Как решать любые задачи распознавания в миниаппах

Всем привет! Как вы уже знаете, мы в Smart Engines вот уже десять лет занимаемся разработкой высокоточных технологий распознавания паспортов и других документов. За это время наша команда перенесла возможности компьютерного зрения практически на все существующие платформы и операционные системы. В последнее время мы наблюдаем всплеск интереса к мини-приложениям в Telegram, Max и других известных мессенджерах. Сегодня рассказываем, как и зачем мы перенесли наш ИИ в миниаппы.

В чем секрет привлекательности миниаппов

Миниаппы (мини-приложения) – это встроенные в мессенджер веб-приложения, которые позволят воспользоваться тем или иным сервисом без установки отдельных программ. Миниаппы дают возможность пользователям взаимодействовать с цифровыми продуктами, совершать покупки или играть в игры, не покидая интерфейса мессенджера. Такие приложения интегрируются с экосистемой мессенджера, используя его API для авторизации, платежей и уведомлений.

Популярность миниаппов нетрудно объяснить. Во-первых, это просто удобно: пользователь мгновенно преодолевает путь до услуги или инструмента. Во-вторых, мини-приложения крайне просты в интеграции и подходят для внедрения сервисов, маркетплейсов и других востребованных платформ. В-третьих, разработка миниаппов значительно проще и дешевле, чем создание и дистрибуция классических нативных приложений. Наконец, многие мессенджеры уже имеют встроенные механизмы платежей или поддерживают их через сторонние системы. В результате от использования миниаппов выигрывает и бизнес, и разработчик, и эндюзер.

Что будущее за интернетом, мы поняли еще несколько лет назад – и сразу адаптировали наши системы для веб-среды. Сделать это нам удалось благодаря технологии WebAssembly (Wasm), с помощью которой можно создавать прогрессивные веб-приложения (PWA). Уже в 2021 году мы смогли добиться видимых результатов: распознавание паспорта РФ, распознавание документов и QR-кодов, а также сверка лиц стали доступны непосредственно в браузере. Притом все вычисления происходят непосредственно на пользовательском устройстве, а для распознавания не требуется GPU.

Распознавание паспорта РФ в браузере с помощью Smart ID Engine

Эти возможности сразу оценили в банках – когда после удаления их приложений из сторов возникла необходимость перенести привычный пользовательский функционал в интернет.

Как использовать технологии распознавания в вебе

Сегодня наши решения на базе WebAssembly применяются во многих ключевых пользовательских сценариях. Для иллюстрации назовем некоторые из них.

• Цифровой онбординг. Распознавание паспорта сегодня позволяет осуществлять онбординг и проверки KYC прямо через браузер. Чтобы открыть счет, оформить продукт или подключить услугу, клиенту нужно просто просканировать документ, или загрузить его изображение из галереи. Благодаря этому отпала необходимость личного посещения офисов или отделений и стало возможно получить доступ к сервисам в любое удобное время. Наша система работает и с паспортами СНГ, мы рассказывали об этом тут. 
• Платежи и переводы. Благодаря автоматическому распознаванию стало возможно реализовать ежедневные платежи в онлайн-банках. Пользователь наводит камеру мобильника на QR, номер телефона или квитанцию и может моментально совершить оплату или перевод. Система уверенно работает даже в “экстремальных” случаях: когда треть QR-кода перекрыта или он находится на расстоянии или под углом. Здесь мы рассказывали, как в вебе реализовать распознавание банковской карты.

• Сервисы бухгалтерии. Сегодня большой популярностью пользуются сервисы аутсорсинга бухгалтерии для обслуживания юридических лиц. В особенности эта возможность полезна для малого бизнеса и индивидуальных предпринимателей – там, где для работы с документами просто нет штатного сотрудника. Распознавание документов (акты, УПД, счета-фактуры, формы ТОРГ-12, накладные и другие) позволяет решать задачи ввода и структуризации данных прямо в браузере. Быстро и удобно.

Распознавание банковской карточки в вебе с помощью Smart Code Engine

Благодаря возможностям Wasm эту функциональность можно легко перенести и в мессенджер. Некоторые наши клиенты так и поступили. Например, ВТБ уже запустил оплату по QR в мессенджере MAX. Говорят, что работает даже на парковке (наша распознавалка уж точно – интернет для этого не требуется).

Как это реализовать

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

Наш основной продукт – библиотека компьютерного зрения. Поскольку она написана на С++, для переноса кодовой базы в браузер мы используем инструмент emscripten, поддерживаемый google. На выходе мы получаем wasm файл и js файл для работы с ним. Добавляем бизнес логику и распознавание, например, банковской карты реализуется вот так:

			// Инициализация WASM модуля. Объект module содержит ссылки на загружаемые ресурсы.
const SE = await SmartDocEngine(module);
// Создание инстанса библиотеки Smart Code Engine
const engine = new SE.CodeEngine(false); 
// Создание настроек сессии распознавания с указанием документа для поиска
let sessionSettings = engine.GetDefaultSessionSettings();
let engineName = SE.ToString(SE.EngineSettingsGroup.Card); 
sessionSettings.SetOption(engineName + ".enabled", "true");

// Инициализация сессии
let spawnedSession = engine.SpawnSession(sessionSettings, signature);
// Создание изображения
		

В браузере для захвата изображений с камеры необходимо сначала отрисовать видеопоток на canvas, аналогичным образом клиент может отрисовывать на canvas PDF и HEIC, если вам необходимо распознавания фотографии или документа из галереи, например.

			const image = new SE.seImage(imageData);
// Получение результата
const result = spawnedSession.Process(image);

// Освобождение ресурсов
image.delete();
result.delete();
spawnedSession.Reset();
		

Код выше показывает работу распознавания одного изображения, но если вы в цикле будете передавать изображения с камеры и дальше в spawnedSession.Process(image), то воспользуетесь преимуществами распознавания документов в видеопотоке. Кстати, мы недавно получили на это патент США.

Для распознавания в браузере паспорта РФ, реализация очень похожа.

			// Инициализируем wasm модуль
const SE = await SmartIDEngine(module);

// Создаем инстанс библиотеки распознавания
let ENGINE = createEngine(SE, {});

// Создание настроек сессии распознавания
let sessionSettings = engine.CreateSessionSettings();
		

Указываем режим распознавания и маску документа. Можно указать маску звездочкой “*”, а режим “anydoc”, тогда поиск будет осуществляться по всем доступным документам.

			sessionSettings.SetCurrentMode(“anydoc”);
sessionSettings.AddEnabledDocumentTypes(“*”);
		

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

			sessionSettings.SetOption("common.extractTemplateImages", "true");

Теперь мы инициализируем сессию.
let spawnedSession = engine.SpawnSession(sessionSettings, signature);

// Передадим изображение на распознавание.
const result = spawnedSession.Process(image);

// Освобождение ресурсов
image.delete();
result.delete();
spawnedSession.Reset();
		

Результат распознавания представляет из себя объект с именованными полями документа и его изображения (лицо, подпись, шаблон документа). Мы не ограничиваем в структуре ответа, поэтому вы можете сформировать для себя ответ в json в любом удобном виде: с картинками или без, с метаданными, с коэффициентами уверенности и т.п.

Напоследок

Как можно убедиться, интеграция систем Smart Engines в миниаппы осуществляется быстро и абсолютно безболезненно. Гибкость наших технологий позволяет решать любые задачи распознавания хоть в Telegram, хоть в MAX, хоть в любом другом мессенджере с возможностью создания мини-приложений.

Скорость и качество работы технологий распознавания паспорта и других документов, а также кодифицированных объектов в веб-среде сопоставима с нативными библиотеками. Охват широкой аудитории мессенджеров и положительный пользовательский опыт обеспечены. Smart Engines – распознаем даже на парковке!