Мы уже писали о наших экспериментах с FlutterFlow в прошлых статьях.
А сегодня расскажем не только, что "натворили" на Flutter (старший брат или даже кузен FlutterFlow), но и как это "безобразие" творилось. Идея не нова, но практическая польза в перспективе будет огромной. Итак, вашему вниманию прототип приложения, который распознаёт текст с рисунка и переводит его на нужный язык.
Описание проекта и его задач
Мы разработали приложение для Android, обеспечивающее перевод в реальном времени с помощью технологии OCR и наложения.
Для реализации идеи мы разбили ее на четыре задачи
- Захват экрана приложения с текстом для перевода
- Распознавание текста
- Перевод текста
- Создание виджета, который поместит переведенный текст поверх исходного текста
А теперь рассмотрим каждый этап отдельно.
Захват экрана
Для захвата экрана мы выбрали MediaProjection API – API в Android, которое позволяет приложениям захватывать содержимое экрана (скриншоты или скринкасты) и аудио с устройств. В нашем случае нужно получить скриншот экрана. Для запуска MediaProjection требуется непосредственное разрешение пользователя, а иконка записи отображается в строке статуса.
В связи с тем, что MediaProjection API является частью Android SDK и не поддерживается напрямую из Flutter, то мы предприняли дополнительные шаги
- Настроили Platform Channel для общения между Flutter-кодом и нативным кодом Android.
- Запросили разрешение на захват экрана при первом вызове MediaProjection API.
- Реализовали обработку захвата.
- Вернули обработанные данные во Flutter-часть приложения. Во Flutter-часть приложения возвращаются данные захваченного изображения в Массиве байтов.
Распознавание текста
Для распознавания текста на скриншоте экрана в приложении используется плагин google_mlkit_text_recognition. Полученный массив байтов конвертируется в формат, понятный плагину, а затем текст распознается. Полученные после распознавания данные, это не только текст, но еще и разбивка текста на блоки и метаданные этих блоков текста.
Перевод текста
Для перевода текста в приложении используется плагин google_mlkit_text_recognition. Для того чтобы перевести текст с помощью этого плагина, нужны:
- Язык текста.
Его выбирают вручную; - Язык, на который нужно перевести.
Это системный язык; - Текст.
Текст у нас есть - мы его распознали.
Создание виджета
Для создания виджета с переведенным текстом используется CustomPaint, на котором отрисовываются переведенные блоки текста по координатам из метаданных распознанного текста. Настраиваем прозрачный фон у виджета, чтобы не загораживать нетекстовые элементы экрана.
Используемые технологии:
- Flutter,
- Google's ML Kit Text Recognition,
- Google's ML Kit On-Device Translation.
Если есть вопросы по проекту или вы хотите обсудить свой, оставьте комментарий или напишите нам на почту: proto@mir.dev.
А ещё мы такие проекты делали: