Разработка

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

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

Опубликовано

3 месяца назад

12.12.2024

Автор:

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")
                }
            }
        }
    }
}

​x
 
@OptIn(ExperimentalPermissionsApi::class)@Composableprivate 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")                }            }        }    }}

Для доступа к камере необходимо соответствующее разрешение. Этот пример кода обрабатывает запросы и предоставление разрешений с помощью библиотеки разрешений Google Accompanist.
Пользовательский анализатор, который на вход получает изображение и выводит текст. Это будет рассмотрено в следующем разделе.
PreviewView из Jetpack CameraX управляет предварительным просмотром с камеры в реальном времени. К сожалению, он не Compose-native, поэтому мы должны использовать старый View.
Контроллер должен знать, когда приложение находится на переднем/заднем плане, чтобы распределять ресурсы, так что это удобно.
Пользовательский интерфейс для отображения запросов на выдачу разрешений.

Анализатор

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()
        }
    }
}

xxxxxxxxxx
 
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()        }    }}

Это ML KitRecognition от Google для выполнения OCR (оптического распознавания символов) с помощью машинного обучения. По сути, он анализирует изображения и возвращает текст.
Для фоновой обработки мы используем корутины.
Они вызываются, когда обработка OCR завершена, и мы можем перейти к бизнес-логике для извлеченного текста.

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

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

Источник

Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.