{"id":13744,"url":"\/distributions\/13744\/click?bit=1&hash=32fb82be5c2244b7f0c304b6cee13c1e54f8b098bb45091f59db856312407183","title":"\u041a\u0440\u0443\u043f\u043d\u044b\u0435 \u0440\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u043b\u0438\u0441\u044c \u0432 \u0430\u043b\u044c\u044f\u043d\u0441 \u0438 \u0438\u0449\u0443\u0442 \u0441\u0442\u0430\u0440\u0442\u0430\u043f\u044b","buttonText":"","imageUuid":"","isPaidAndBannersEnabled":false}

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

Hola, Amigos!

На связи команда 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-модели

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

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

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

Что в итоге

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

Команда:

Дмитрий Тарасов — CEO Amiga

Владимир Причина — РM Amiga

Сергей Лепшей — PM Amiga

Леонид Никулин — Art Director Amiga

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

Антон Мартышков — Flutter Dev, Amiga

Андрей Татаринов — CEO AGIMA AI

Александр Козлов — ML Dev, AGIMA AI

0
3 комментария
Ольга Князева

Круто, а дайте название приложения, хочу попробовать

Ответить
Развернуть ветку
Христос Воскресович

согласен, хорошая статья, любопытно почекать прилу

Ответить
Развернуть ветку
Amiga.agency
Автор

Добрый день! Проект под NDA, пока дать название не можем, к сожалению.

Ответить
Развернуть ветку
Читать все 3 комментария
null