Процесс создания VK Mini Apps

Тут собраны короткие заметки, которые я делал пока создавал web приложение «Похожие актёры».

Решил сделать приложение, оно будет искать похожих актёров, на фото, которое загрузит пользователь.

Я уже делал в 2017 похожего бота, но он работал долго и тратил кучу оперативки на предсказание. Думаю, что сейчас у меня получится сделать всё более элегантно.

Оказывается я бережливый, и у меня остался датасет, в котором 40к фото артёров с известного всем сайта. Но думаю, лучше заново собрать более чистенький и актуальный. Для того, чтобы найти похожих людей, нужно на каждой фотке в датасете получить координаты лица, а потом получить из этого лица 128 float чисел. У разных фоток одного и того же человека должны получаться примерно одинаковые числа.

Получается, что алгоритм сбора датасета будет такой: качаем фотку, ищем лицо, получаем 128 чисел этого лица, записываем в базу данных. Решил на всякий случай записывать в бд ещё внутренний айдишник актёра с сайта и его имя. Лишним точно не будет )

Такое ощущение, что самое сложное в Python это разобраться в его установке, версиях и в том, как между ними переключаться. Всё остальное уже есть в интернете. Для определения лиц и получения тех 128 чисел я использовал библиотеку Dlib. Просто взял две уже обученные модели и написал скрипт состоящий из 15 строчек на python3.

Пока идёт всё довольно просто и интересно. Хотя если скармливать скрипту фото с 2 лицами, прилетает ошибка. Пока не буду на этом останавливаться, потом если что сделаю обрезалку фото на фронтенде, благо опыт такой уже есть. А пока нужно быстрее запустить парсер и посмотреть насколько большой датасет получится собрать.

Парсер запущен, ноут жужжит.

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

У меня осталось около 5к пользовательских фоток, которые присылали боту, так что попробую оба на них и посмотрю, какой лучше себя покажет.

17 032 фотки в датасете, продолжаю парсить. Модель с использованием классификатора по методу k-ближайших соседей весит всего 38,0 MB предсказывает моментально. Тренируется тоже достаточно быстро. Папка с фотками весит уже 630,4 MB.

Написал себе маленький скрипт, чтобы соединять фотки вместе. Так легче визуально заметить сходство. Вот что получается. Та которую пришлёт пользователь будет слева, а справа будет та знаменитость, которая больше всего на него похожа. Это пригодится при репосте, чтобы приложение получило вирусное распространение. Для теста беру старые фотки знаменитостей и смотрю получилось ли предсказание. Вроде норм )

Процесс создания VK Mini Apps, изображение №1

Ещё немного результатов с фотками пользователей. Слева то что я дал на вход, а справа, та знаменитость, которая ближе всего к искомому.

Процесс создания VK Mini Apps, изображение №2

Похоже, что получается не плохо. Пора просить Надежду сделать дизайн будущего приложения.

Интересно, что в датасете есть какое то количество актёров и актрис фильмов для взрослых. Поэтому неизбежно, кто то будет на них похож )

40 976 фоток в датасете. Папка весит 1.3г. Это не очень много, учитывая, то что по одной фотке на каждого актёра. Принял решение взять ещё по несколько фоток для каждого актёра. К сожалению сайт с которого я это всё беру выбивает капчу если чувствует, что запросы посылаются автоматически.

Самое время попробовать два инструмента для автоматического тестирования. PhantomJS и Headless Chrome. Это такие браузеры без графического интерфейса. Они отрисовывают страницу в памяти, можно делать скриншоты, выполнять js на странице, получать дерево DOM. А самое главное они почти не отличимы от браузеров обычного пользователя. Думаю это поможет решить проблему с капчей)

Сделали макет будущего приложения. Всего 3 экрана. Делать будем на платформе VK Mini Apps

  1. Welcome экран рассказывает о приложении, возможно будет несколько слайдов на нём. Чтобы полностью раскрыть нашу идею и пользователь точно понял, что от него требуется.

2. Главный экран. На нём пользователь может загрузить свою фотку или сфотографироваться (посмотрим на возможности input в вебе на разных платформах). Мы заинтересованны в хорошем результате, поэтому внизу есть несколько подсказок для пользователя.

3. Окно результата. На нём есть текст с именем актёра, склеенное фото пользователя и фото актёра на которого он похож. Возможно сделаем интересный шаблон, чтобы не просто были две фотки рядом, а какое то оформление. Кнопка поделиться очень важна для нас, ведь без этого не получится генерировать виральный трафик.

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

Процесс создания VK Mini Apps, изображение №9

Ещё на старте VK Mini Apps я сделал свой boilerplate. В нём уже реализованы основные функции, которые используются во всех приложениях. Смена темы, в зависимости от темы в приложении ВКонтакте, сложная навигация, включая возможность создавать панели на лету, работа с бекендом, работа с API VK, свайпбек и много всяких мелких фишек.

Обычно когда делаю новое приложение, я парой команд разворачиваю свой boilerplate с GitHub на VPS сервер. Это решает мне сразу кучу проблем с тестированием. Статический ip адрес с привязанным к нему доменом третьего уровня позволяет использовать https соединение на фронтенде и на бэкенде.

Поэтому после npm start сервис доступен в режиме разработки в приложениях ВКонтакте на Android, iOS и в web версии. А если нужно кому-то показать промежуточный результат, то просто делаю npm deploy на сервер статики ВКонтакте.

Вот и сейчас вся настройка и подготовка к разработке заняла не более 30 минут. Дальше нужно будет накидать основные элементы на панели и определиться, какие методы будут в API бэкенда.

Вернулся к приложению для поиска похожих актёров. В датасете набралось 100к фоток, весом около 5 гигабайт. Для того, чтобы понять будет ли приложение интересно пользователям этого должно хватить.

Для приложений на проде я использую облачный хостинг Jelastic от REG.RU.

Каждое приложение это отдельное окружение в котором есть ноды.

Они находятся на разных физических серверах и объединены между собой локальной сетью. Все ноды могут автоматически горизонтально и вертикально масштабироваться. А платите вы только за использование ресурсов.

Например в окружении приложения, получилось:

Нода с балансировщиком NGINX 1.20.1
Нода для API с PHP 8.0
Нода с ml функциями на Python 3.9.7
Нода с SQL базой данных

Между этими нодами есть возможность обмениваться ресурсами. Монтировать папки из одной ноды в другую. А для установки ssl сертификата можно просто подключить дополнение и настроить его.

Для меня основное удобство это быстрое развёртывание и настройка. Для того чтобы развернуть такую систему нод я потратил около 2 часов с учётом копирования 5 гигабайт изображений в окружение.

В общем при правильном подходе с Jelastic можно администрировать огромное количество приложений разной степени сложности. Рекомендую.

Процесс создания VK Mini Apps, изображение №12

Репосты в VK Mini Apps выглядят не очень круто. В лучшем случае можно поделиться ссылкой на приложение. Есть конечно метод VKWebAppOpenWallPost, который может без получения дополнительных прав доступа публиковать посты на стене сообщества или пользователя. Но на этом и всё. Если нужно прикрепить какой то дополнительный контент типа картинки, нужно уже выполнять целую кучу действий, типа получения адреса сервера, загрузки картинки, сохранения её. Да ещё и права запрашивать на доступ к фото.

Хорошо сделали в создании историй, там картинку можно передать просто в data:base64 без дополнительных запросов прав. Но в VKWebAppOpenWallPost такое не завезли.

В общем я придумал при нажатии на кнопку репоста делать вот такой пост с картинкой и опросом, который завершится через 3 дня после публикации, дополнительно пушнув всех, кто в нём проголосовал.

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

Процесс создания VK Mini Apps, изображение №13

Монетизация.

Важная штука, так как сервера стоят денег и хочется не только окупить их, но ещё и заработать.

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

Придётся при каждом выборе фото, если на нём найдено лицо показывать спиннер загрузки и показывать рекламное видео. По факту пользователь смотрит больше рекламы, но зато правила ВКонтакте это не нарушает.

Сделал первую альфа версию приложения.

Нет велкам экранов. Вместо них просто заглушки с опечатками =)

Мало информации об актёре, зато оставил ссылку на КиноПоиск, чтобы можно было посмотреть, кто это вообще такой. В дальнейшем думаю расширить информацию об актёре, а ссылку убрать.

Так как версию для iOS с ODR могут получить только приложения из каталога(за редким исключением), пока iOS открывается через m.vk.com, что выглядит, мягко говоря, не очень. После того, как сделаю всё, что запланировал, подам заявку в каталог.

Навел лоска в приложении и доделал велкам экраны. Теперь чтобы сервис хорошо работал на iOS (не открывался в m.vk.com) нужно подать заявку на модерацию, пройти её и попасть в бетта тестирование. Там тестеры из ВКонтакте будут искать в нём баги, а я буду их исправлять или говорить, что это не баг =)

Пока я добавляю в базу данных дополнительную информацию по каждому актёру придётся оставить ссылку на КиноПоиск. Это 100% вызовет вопросы у модератора.

Процесс создания VK Mini Apps, изображение №14

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

На деле, к сожалению, всё не так.

Были случаи, когда модератор пишет в среду о том, что приложение должно хранить ключи доступа сообществ на фронтенде(чушь конечно, так делать нельзя). Или, проверяя сервер на устойчивость к флуду, получали бан на свой IP от nginx и fail2ban, а потом радостно рапортовали, что положили сервер.

Я конечно понимаю, что все ошибаются, но из-за таких ошибочек обычно теряется целая неделя.

Процесс создания VK Mini Apps, изображение №17

Общение с модератором идёт в положительном ключе. Похоже, что есть все шансы попасть в тестирование уже завтра.

Процесс создания VK Mini Apps, изображение №18

Вчера приложение попало в тестирование. Тестеры накинулись на него и нашли около 30 багов. В основном это опечатки и всякие косметические несоответствия. Но есть и интересные. Например, можно загрузить вместо фотки — видео, просто переименовав его. Ничего страшного конечно не произойдёт, просто сервис встанет в бесконечную загрузку, но это нужно исправить.

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

Например, если я вижу, что приложение получило много вирального трафика и сервер предсказаний уже не справляется, тогда мне нужно будет добавить в топологию ещё одну копию сервера предсказаний. С таким подходом можно пережить самую дикую нагрузку. Если она будет конечно =)

В сообществе VK Mini Apps сейчас проходит Fresh Code. Это такой конкурс приложений, где в разных номинациях можно получить 150 000 рублей на развитие приложения. Думаю туда стоит подать заявку, 150к на рекламу явно не будут лишними.

Допилил архитектуру и разобрался с горизонтальным масштабированием. Теперь могу дирижировать серверами, как мне угодно. Добавлять, когда нужно пережить нагрузку или убирать, когда её нет. Оказалось, что когда знаешь чего хочешь в Jelastic от REG.RU это делается очень просто и понятно.

Оставшиеся задачи до релиза.

  1. Подключить метрику и настроить в ней цель на сделанный репост на стену.

2. Расширить информацию об актёре, чтобы на втором экране сразу было видно карьеру актёра, жанры в которых он снимался, лучшие фильмы или сериалы с его участием.

3. Добавить fail2ban, чтобы блокать по IP тех, кто выйдет за пределы лимитов на запросы.

4. Исправить все баги, которые за это время найдут тестеры.

5. Дождаться пока Apple и ВКонтакте, проверят фронтенд и добавят к себе в приложение архив ODR.

Заметил, что на видео, которые присылают тестеры, при получении результата долго грузится картинка. Так, что теперь во время загрузки и просмотра рекламы, картинка заранее загружается по URL, а потом уже просто отрисовывается на странице результата из кэша.

Подключил метрику. Настроил там цель на созданный пост. Цель срабатывает, только после того как пост появился на стене пользователя. Теперь смогу точно отследить конверсию в репост.

Процесс создания VK Mini Apps, изображение №19

В админке VK Mini Apps, можно поставить галочку и тогда приложение будет доступно ещё и в Одноклассниках. Я раньше просто тыкал на эту галку смотрел, что приложение в ОК не запускалось и забивал. Сегодня попробовал разобраться, так как концепция похожего актёра должна там хорошо сработать.

Оказалось, что в ОК не поддерживается вызов метода показа рекламы и нет VK Pay, так что с монетизацией пока не понятно, что там можно делать. Айдишники у страниц в ОК реально огромные =) Вот например мой — 561958452460.

В общем то приложение запустилось там без проблем, не работал только репост. Отдельно взбесило, что поля для загрузки фото в ВК называются file, а в ОК — pic1, пришлось немного разделить код на бекенде и на фронтенде. Там также, чтобы опубликовать фото на стене нужно его сначала загрузить на сервер ОК, опубликовать от имени пользователя, а уже потом прикрепить к посту. Что, как я уже писал не очень круто.

Документация в ОК оставляет желать лучшего. Для человека, который редко взаимодействует с API разных продуктов это прям враждебная среда. Хотя может быть я уже привык к формату ВКонатакте, где всё интуитивно понятно, как только начинаешь читать.

Но я вроде, как осилили и вот что получилось: https://ok.ru/app/vk_app7970803

Модерация в Одноклассниках отличается от модерации ВКонтакте.

После отправки сервиса на проверку, диалог с модератором строится не в самой соц сети, а в Jira. Примерно через 2-3 рабочих дня после отправления заявки вам приходит на почту ссылка jira.apiok.ru. Там уже создана задача и ей назначен исполнитель.

Прикольно, что видно имя, фамилию модератора и менеджера проекта VK (Mail.Ru Group), так что можно чекнуть его профиль на linkedin

Обновил базу, теперь у актёра есть дополнительная информация. Карьера, жанры фильмов в которых он снимался, лучшие фильмы и сериалы с его участием.

Так как теперь информации на экране много, пришлось закрепить кнопку, поделиться снизу. Так она всегда на виду.

Процесс создания VK Mini Apps, изображение №20

Заглянул в статистику показов рекламы в сервисе. Там конечно весело. Количество показов рекламы и вознаграждение за неё мягко говоря показываются не точно. При посещении в 500 уников, отображает, что показалось реклама аж 20 000 раз.

Это очень плохо так как не возможно построить дальнейшие планы, посчитать примерные расходы на сервис и тд.

Скорее всего это сбой на стороне ВКонтакте.

Процесс создания VK Mini Apps, изображение №23

«Похожие актёры» разместили в каталоге Одноклассников. Каталог там есть в веб версии сайта и в версии на Android. В приложении на iOS почему-то его нет. Там не нужно ничего мутить с ODR, приложение сразу доступно, но только по прямой ссылке. Ни единого намёка на приложения в iOS нет.

Модерация в ОК, проходит достаточно быстро. Так как они работают в jira, сразу видно, когда модератор приступил к проверке твоего приложения и когда её закончил. Если что-то не так он меняет статус в заявки и пишет комментарий, а вам приходит уведомление на почту.

За 24 часа из каталога в Одноклассниках мы получили 350 уникальных посетителей.

Процесс создания VK Mini Apps, изображение №25

Баги все исправлены. По идее можно уже писать в поддержку и они должны добавить приложение в каталог. Но я решил немного подождать и пока самому налить в него трафика.

Для этого я разместил рекламный баннер в одном из своих приложений. Все, кто зайдут в приложение будут попадать в аудиторию для ретаргетинга. Да в VK Mini App так можно сделать используя VKWebAppRetargetingPixel. Получилось 2 аудитории. Первая это те, кто получил удачно результат предсказания, вторая это те, кто сделал репост себе на стену.

Потом на основе этих аудиторий я найду похожих пользователей используя look a like ВКонтакте и попробую сделать рекламу на них.

Посмотрим сколько удастся привлечь пользователей без каталога. Используя рекламу ВКонтакте и те ресурсы, которые уже у меня есть. А потом посмотрим сколько даст нам каталог.

Приложение «Похожие актёры» в Одноклассниках было выбрано для дополнительного фичеринга. Об этом нам сообщил вчера модератор.

Фичеринг это бесплатная реклама приложения, организованная самой соц. сетью. В глазах пользователей это выглядит солидно. Тут работает принцип win-win. OK выгодно, чтобы пользователям в ней было чем заняться и показатель вовлечённости был высоким, а разработчик получает бесплатный дополнительный трафик, возможно каким-то образом его монетизирует. А если монетизация проходит с помощью этой соц. сети, так это вообще идеально. К сожалению метод показа рекламы в ОК ещё не работает, получается этот фичеринг для нас пройдёт без монетизации. Жаль. Но в целом это отличный опыт и дополнительная возможность расспросить модератора о том, как именно рекламируется приложение внутри соц. сети.

Через неделю можно будет сравнить количество уникальных посетителей из ОК за неделю до фичеринга и в эту неделю.

Процесс создания VK Mini Apps, изображение №28

Переименовали приложение прям во время фичеринга в Одноклассниках. Теперь оно называется «Кто похож на меня». Жаль, что название «Сходство налицо» уже занял Яндекс.

Одноклассники прям стреляют по посещалке. На графике посещения из ВКонтакте — заштрихованные, а из ОК не заштрихованные. Пока соотношение за всё время: 30% из ВКонтакте и 70% из ОК. Но в ОК сейчас идёт фичеринг, а ВКонтакте пока нет.

Процесс создания VK Mini Apps, изображение №29

«Похожие актёры» победили в Fresh Code от VK Mini Apps. Это замечательное подтверждение того, что приложение получилось качественное и интересное.

Итоги, статистика. Дальнейшая жизнь приложения.

Прошло 4 месяца от идеи до момента когда пора принимать решение о его дальнейшей жизни.

Подводим итоги так сказать.

80 000 участников ВКонтакте
436 226 участников в Одноклассниках

Всего больше 500 000 уникальных посетителей с 17.11.2021 до 17.01.2022.

Победа в Fresh Code от VK Mini Apps.

Монетизировать приложение, к сожалению, так и не получилось. В основном из за технических ошибок на платформе VK Mini Apps.

Вывод

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