Мобильное Flutter-приложение – революция в сфере «магазин на диване»

Заказчик

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

Задача

Перед нами стояла задача: создать MVP версию мобильного приложения, которое поможет пользователям быстро и просто приобретать товары из любого видео.

На связи команда Amiga. Мы занимаемся заказной разработкой мобильных приложений, создаем веб-сайты и корпоративные порталы. Мы эксперты в мобильной разработке и обожаем Flutter.

Сегодня мы хотим рассказать о проекте, который сделали вместе с коллегами из AGIMA AI. Помните, были популярны телемагазины? Чтобы совершить покупку, нужно было позвонить и дождаться ответа менеджера, а дальше следовало долгое оформление и оплата заказа. Мы создали мобильное приложение, в котором все товары из фильмов и сериалов можно купить без лишних усилий: сканируете видео и сразу получаете товары для покупки прямо в приложении. А еще оно подскажет название фильма и имя главного героя!

Интро

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

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

Какие функции есть в приложении и как они работают? Основная – real-time распознавание видео. Пользователь сканирует экран устройства – телевизор, планшет или ноутбук, – алгоритм искусственного интеллекта определяет фрагмент видео и товары в нем. Понравившиеся товары можно купить или добавить в вишлист, а еще посмотреть историю отсканированных видео.

«Мы разработали логотип и дизайн приложения. В качестве логотипа выбрали «рамку», так мы сразу подсказываем пользователю, что нужно делать в приложении. Мы провели аналогию с привычными для человека вещами: фотоаппаратом и сканированием qr-кода. Наша команда создала мобильное приложение с современным дизайном, который не отвлекает пользователя от основного – покупки товаров.»

Леонид Никулин, Арт-директор Amiga

Технологический стек или как это работает внутри

• Приложение создано на фреймворке Flutter. 
• Табличная база данных видео с предложениями о товарах.
• ML-модели, обученные на TensorFlow.
• База с шаблонными числовыми векторами кадров видео из базы Milvus.

Почему Flutter? Кроссплатформенность Flutter позволяет охватить две мобильные операционные системы, iOS и Android, одним кодом. А значит, Time To Market произойдет быстрее, чем при нативной разработке.

К тому же у Flutter есть возможность повторять дизайн-макеты точно. Время на верстку не требуется, ведь UI Flutter производит своими силами.

А еще на Flutter можно интегрировать искусственный интеллект сразу на обе платформы: Android и iOS.

При разработке приложения мы оптимизировали работу искусственного интеллекта на IOS: на стадии запуска скорость работы ИИ составляла 6 секунд на обработку одного кадра, а после оптимизации скорость обработки одного кадра снизилась до 100 миллисекунд.

За разработку ML-модели отвечали наши коллеги из AGIMA AI. AGIMA AI помогает автоматизировать бизнес с помощью алгоритмов машинного обучения и искусственного интеллекта, также принимать верные решения на основе больших данных. Для приложения коллеги разработали ML-модель, которая распознает видео и предлагает товары в нем присутствующие. Если вы пользуетесь приложением для распознавания музыки Shazam, то здесь что-то подобное, но для видеопотока.

«Этот проект уникален с точки зрения машинного обучения. Здесь было важно сделать не только решение с высоким качеством распознавания, но и оптимизировать его для исполнения в реальном времени на мобильном устройстве. Вместе с командой Amiga мы портировали пайплайн распознавания на Dart и получили решение, которое отлично работает в реальном времени на широком спектре мобильных устройств и на iOS, и на Android.»

Андрей Татаринов, СEO AGIMA AI

Пайплайн состоит из нескольких частей:

1. Детекция монитора, на котором показывается видеопоток.

Для обучения детекции мы собрали и разметили изображения, на которых наблюдаются включенные мониторы.

2. Эмбеддинг полученного кадра из видеопотока: превращение изображения кадра в численный вектор.

Мы собрали много разнообразных картинок: кадры из фильмов, картины, произведения искусства и пр. А дальше научили эмбеддер отличать все эти картинки друг от друга.

3. Мэтчинг полученных численных векторов с шаблонными векторами из базы Milvus.

4. Предложение товаров на основе найденного видеопотока.

С точки зрения пользователя ML-модель работает так: пользователь снимает видеопоток на смартфон, детектор находит монитор в его окружении, преобразует показываемый видеопоток из монитора в численный вектор. Каждые 6 кадров по полученной последовательности числовых векторов происходит поиск шаблонного вектора. Когда нужный вектор найден, определяется видеопоток и пользователь узнает, откуда это видео, и какие в нем товары присутствуют.

«Для высокоскоростного вывода данных на пользовательских устройствах мы создали модель Tensor Flow, использовали модель MLKit и внедрили ее в нативный код.»

Тимур Моисеев, Teamlead Amiga

Что в итоге

За два месяца мы создали MVP версию приложения, которая не имеет аналогов на рынке. Разработали дизайн, создали ML-модель и все это реализовали на Flutter. Теперь для поиска товара в видео достаточно навести смартфон на монитор и получить ответ за доли секунды: какой фильм, какие часы и костюм на главном герое.