Мобильное Flutter-приложение – революция в сфере «магазин на диване»
Hola, Amigos!
На связи команда Amiga. Мы занимаемся заказной разработкой мобильных приложений, создаем веб-сайты и корпоративные порталы. Мы эксперты в мобильной разработке и обожаем Flutter.
Сегодня мы хотим рассказать о проекте, который сделали вместе с коллегами из AGIMA AI. Помните, были популярны телемагазины? Чтобы совершить покупку, нужно было позвонить и дождаться ответа менеджера, а дальше следовало долгое оформление и оплата заказа. Мы создали мобильное приложение, в котором все товары из фильмов и сериалов можно купить без лишних усилий: сканируете видео и сразу получаете товары для покупки прямо в приложении. А еще оно подскажет название фильма и имя главного героя!
Интро
Заказчик — визионер с большим опытом, который хочет изменить привычные для всех вещи в лучшую сторону. Сама идея создания приложения звучала для нас как вызов, мимо которого мы не смогли пройти.
Перед нами стояла задача: создать MVP версию мобильного приложения, которое поможет пользователям быстро и просто приобретать товары из любого видео. Предположим, вы смотрите фильм, и платье главной героини западает в душу с первого взгляда. Но как его найти среди всего видеопотока? Заходите в приложение, наводите смартфон на экран, и сразу получаете название фильма и карточку товара для покупки.
Какие функции есть в приложении и как они работают? Основная – real-time распознавание видео. Пользователь сканирует экран устройства – телевизор, планшет или ноутбук, – алгоритм искусственного интеллекта определяет фрагмент видео и товары в нем. Понравившиеся товары можно купить или добавить в вишлист, а еще посмотреть историю отсканированных видео.
Мы разработали логотип и дизайн приложения. В качестве логотипа выбрали «рамку», так мы сразу подсказываем пользователю, что нужно делать в приложении. Мы провели аналогию с привычными для человека вещами: фотоаппаратом и сканированием qr-кода. Наша команда создала мобильное приложение с современным дизайном, который не отвлекает пользователя от основного – покупки товаров.
Технологический стек или как это работает внутри
Приложение создано на фреймворке 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.
Пайплайн состоит из нескольких частей:
1. Детекция монитора, на котором показывается видеопоток.
Для обучения детекции мы собрали и разметили изображения, на которых наблюдаются включенные мониторы.
2. Эмбеддинг полученного кадра из видеопотока: превращение изображения кадра в численный вектор.
Мы собрали много разнообразных картинок: кадры из фильмов, картины, произведения искусства и пр. А дальше научили эмбеддер отличать все эти картинки друг от друга.
3. Мэтчинг полученных численных векторов с шаблонными векторами из базы Milvus.
4. Предложение товаров на основе найденного видеопотока.
С точки зрения пользователя ML-модель работает так: пользователь снимает видеопоток на смартфон, детектор находит монитор в его окружении, преобразует показываемый видеопоток из монитора в численный вектор. Каждые 6 кадров по полученной последовательности числовых векторов происходит поиск шаблонного вектора. Когда нужный вектор найден, определяется видеопоток и пользователь узнает, откуда это видео, и какие в нем товары присутствуют.
Для высокоскоростного вывода данных на пользовательских устройствах мы создали модель Tensor Flow, использовали модель MLKit и внедрили ее в нативный код.
Что в итоге
За два месяца мы создали MVP версию приложения, которая не имеет аналогов на рынке. Разработали дизайн, создали ML-модель и все это реализовали на Flutter. Теперь для поиска товара в видео достаточно навести смартфон на монитор и получить ответ за доли секунды: какой фильм, какие часы и костюм на главном герое.
Команда:
Дмитрий Тарасов — CEO Amiga
Владимир Причина — РM Amiga
Сергей Лепшей — PM Amiga
Леонид Никулин — Art Director Amiga
Тимур Моисеев — Teamlead Amiga
Антон Мартышков — Flutter Dev, Amiga
Андрей Татаринов — CEO AGIMA AI
Александр Козлов — ML Dev, AGIMA AI
Круто, а дайте название приложения, хочу попробовать
согласен, хорошая статья, любопытно почекать прилу
Добрый день! Проект под NDA, пока дать название не можем, к сожалению.
можно название приложения