Site icon AppTractor

Распознавание текста в реальном времени с Jetpack Compose

AppTractor

Создание приложений, способных легко интерпретировать реальные данные, становится все более необходимым, особенно с развитием искусственного интеллекта и машинного обучения.

Интеграция таких функций, как оптическое распознавание символов (OCR), непосредственно в мобильные приложения позволяет пользователям извлекать и обрабатывать текст из изображений или записей с камер, повышая интерактивность и полезность продукта.

В этом посте мы рассмотрим, как реализовать живой вид с камеры в реальном времени и OCR в Jetpack Compose. Используя современный инструментарий пользовательского интерфейса Compose — Jetpack CameraX — и мощь ML Kit, мы создадим плавный, интуитивно понятный опыт для распознавания текста в реальном времени. Создаете ли вы сканер документов, помощника для ввода данных или просто хотите поэкспериментировать с крутыми технологиями, это руководство обеспечит практический пошаговый подход к интеграции этих функций в ваше приложение.

Представление

@OptIn(ExperimentalPermissionsApi::class)
@Composable
private fun CameraView(
    modifier: Modifier,
    onTextDetected: (Text) -> Unit = {},
) {
    val context = LocalContext.current
    val lifecycleOwner = LocalLifecycleOwner.current
    val permissionState = rememberPermissionState(permission = Manifest.permission.CAMERA) // 1.

    val cameraController = remember {
        LifecycleCameraController(context).apply {
            setEnabledUseCases(CameraController.IMAGE_ANALYSIS)
            setImageAnalysisAnalyzer(
                ContextCompat.getMainExecutor(context),
                TextRecognitionAnalyzer(onTextDetected = onTextDetected), // 2.
            )
        }
    }

    Box(
        modifier = modifier.fillMaxWidth(),
        contentAlignment = Alignment.Center,
    ) {
        AndroidView(
            modifier = Modifier
                .fillMaxSize()
                .clip(RoundedCornerShape(12.dp)),
            factory = { context ->
                PreviewView(context).apply { // 3.
                    scaleType = PreviewView.ScaleType.FILL_CENTER
                    layoutParams = ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.MATCH_PARENT,
                    )
                    this.controller = cameraController
                    cameraController.bindToLifecycle(lifecycleOwner) // 4.
                }
            },
        )

        if (!permissionState.status.isGranted) { // 5.
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Text(
                    text = "Needs camera permission",
                )
                Spacer(modifier = Modifier.size(8.dp))
                Button(
                    onClick = {
                        permissionState.launchPermissionRequest()
                    },
                ) {
                    Text(text = "Request permission")
                }
            }
        }
    }
}
  1. Для доступа к камере необходимо соответствующее разрешение. Этот пример кода обрабатывает запросы и предоставление разрешений с помощью библиотеки разрешений Google Accompanist.
  2. Пользовательский анализатор, который на вход получает изображение и выводит текст. Это будет рассмотрено в следующем разделе.
  3. PreviewView из Jetpack CameraX управляет предварительным просмотром с камеры в реальном времени. К сожалению, он не Compose-native, поэтому мы должны использовать старый View.
  4. Контроллер должен знать, когда приложение находится на переднем/заднем плане, чтобы распределять ресурсы, так что это удобно.
  5. Пользовательский интерфейс для отображения запросов на выдачу разрешений.

Анализатор

internal class TextRecognitionAnalyzer(
    private val onTextDetected: (Text) -> Unit,
) : ImageAnalysis.Analyzer {

    private val scope: CoroutineScope = CoroutineScope(Dispatchers.IO + SupervisorJob())
    private val textRecognizer = TextRecognition.getClient(TextRecognizerOptions.DEFAULT_OPTIONS) // 1.

    @OptIn(ExperimentalGetImage::class)
    override fun analyze(imageProxy: ImageProxy) {
        scope.launch { // 2.
            val mediaImage = imageProxy.image ?: run {
                imageProxy.close()
                return@launch
            }

            val inputImage =
                InputImage.fromMediaImage(mediaImage, imageProxy.imageInfo.rotationDegrees)

            suspendCoroutine { continuation ->
                textRecognizer.process(inputImage)
                    .addOnSuccessListener { visionText: Text ->
                        if (visionText.text.isNotBlank()) {
                            onTextDetected(visionText) // 3.
                        }
                    }
                    .addOnCompleteListener {
                        continuation.resume(Unit)
                    }
            }
            delay(100)
        }.invokeOnCompletion { exception ->
            exception?.printStackTrace()
            imageProxy.close()
        }
    }
}
  1. Это ML KitRecognition от Google для выполнения OCR (оптического распознавания символов) с помощью машинного обучения. По сути, он анализирует изображения и возвращает текст.
  2. Для фоновой обработки мы используем корутины.
  3. Они вызываются, когда обработка OCR завершена, и мы можем перейти к бизнес-логике для извлеченного текста.

Интегрировав в Jetpack Compose просмотр с камеры в реальном времени и OCR, вы открываете мощные возможности для обработки реальных данных в режиме реального времени, что значительно повышает удобство работы с вашим приложением. Такое сочетание CameraX, ML Kit и Compose позволяет создавать бесшовные, современные и эффективные интерфейсы, используя при этом передовые инструменты искусственного интеллекта.

Хорошего кодинга!

Источник

Exit mobile version