Виртуальная примерочная в Mini App Telegram с помощью конструктора Puzzlebot и сервиса Puzzle AI Tracker

Мини-приложения в Telegram (Telegram Mini Apps) — это веб-приложения, которые открываются внутри мессенджера и позволяют пользователям взаимодействовать с различными сервисами и получать доступ к дополнительным функциям, не выходя из Telegram

Раньше создание виртуальной примерочной было сложным, дорогим и доступным только крупным компаниям. Но теперь всё изменилось! С помощью конструктора Puzzlebot и сервиса Puzzle AI Tracker вы сможете запустить полноценную примерочную в Telegram всего за 30 минут. Без кода и без лишних затрат. Загрузите фото, выберите одежду и удивите своих пользователей мгновенным результатом. Это инновация, которая раньше казалась невозможной, а теперь доступна каждому.

Чтобы чтение было увлекательным, покажу пример итогового результата, к чему мы придём

Виртуальная примерочная в Mini App Telegram с помощью конструктора Puzzlebot и сервиса Puzzle AI Tracker

Красное платье мы наденем на человека и получим такой вот результат 👇🏻

Видео результат

Следуйте моему пошаговому руководству

Перейдите на <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fpuzzlebot.top%2F%3Fr%3DE9PvsjUV&postId=1731920" rel="nofollow noreferrer noopener" target="_blank">Puzzlebot</a> и зарегистрируйтесь

Если вы ещё не зарегистрированы, вам сразу предложит ввести токен. Если вы уже зарегистрированы, в разделе Личный кабинет нажимаем Добавить бота и указываем наш токен, полученный в BotFather.

Для подключения виртуальной примерочной будут использоваться нейросети. Для этого к телеграм боту необходимо подключить Puzzle AI

Puzzle AI - партнёрский плагин конструктора Puzzlebot от pxsto.re

Для этого перейдите в телеграм бот Puzzle AI и сделайте следующие шаги: (см. скриншоты выше)

Нажмите кнопку Меню и выберите команду Start
Нажмите Подключить свой бот в AI
Введите токен, который получили в BotFather

Переходим в Настройки
Нажимаем на Подписки на события
Добавляем подписку на события нажав кнопку Добавить
В строке Адрес указываем https://api.pxsto.re/main/chatgpt-plugin
Выбираем тип события Любое сообщение
Активируем тумблер, чтобы он был активирован
Переходим в раздел Интеграции
В строке Адрес указываем https://api.pxsto.re/main/advanced

Перейдите в раздел Переменные и нажмите кнопку Добавить переменную

{{tryon-person}}
{{tryon-full-body}}
{{tryon-top}}
{{tryon-down}}

{{tryon-mode}}
{{tryon-clothes}}

Эти переменные помогут передавать данные между различными этапами примерочной.

2. Нажимаем + и выбираем команду Мини-приложение

3. В открывшемся окне назовём мини-приложение Try-on webapp form (person). Данная команда будет первой страницей в мини-приложении, которая будет отвечать за выбор модели человека, на которого будет примерятся одежда

4. Далее необходимо произвести настройку мини-приложения в Botfather по <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fhelp.puzzlebot.top%2Farticle%3Fr%3D5%26amp%3Ba%3D169&postId=1731920" rel="nofollow noreferrer noopener" target="_blank">инструкции</a>

5. Добавьте Заголовок и Описание для страницы в мини-приложении

6. Добавьте Изображения для страницы мини-приложения

7. Добавьте блок «Форма ввода» в мини-приложение

Тип ввода: "Загрузка файла"
Маска ввода: "Изображение"
Количество: 1
Свяжите ответ с переменной {{tryon-person}} нажав Дублировать ответ в переменную

8. Выберите Действия и Очистите переменную {{tryon-person}} перед выполнением действия

1. Повторим шаг из пункта 5 и снова создадим мини-приложение. В открывшемся окне назовём мини-приложение Try-one mode. Данная команда будет второй страницей в мини-приложении, которая будет отвечать за выбор категории одежды, которую будем примерять

2. Выберем Клавиатура и создадим 3 инлайн-кнопки, как на скриншоте

Добавьте блок "Клавиатура" с инлайн-кнопками:

"Верхняя одежда".
"Нижняя одежда".
"Платье".

Настройте действия для каждой кнопки, чтобы менять значение переменной {{tryon-mode}}

1. Повторим шаг из пункта 5-6 и снова создадим мини-приложение. В открывшемся окне назовём мини-приложение Try-on webapp form (clothes). Данная команда будет третьей страницей в мини-приложении, которая будет отвечать за выбор фотографии для примерки

2. Добавьте описание и изображения для примера пользователю

3. Добавьте блок «Форма ввода» в мини-приложение

Тип ввода: "Загрузка файла"
Маска ввода: "Изображение"
Количество: 1
Свяжите ответ с переменной {{tryon-clothes}} нажав Дублировать ответ в переменную

Цель кнопки-условия Определить, какой формат одежды выбрал пользователь, и передать данные в Puzzle AI Tracker для корректной обработки.

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

2. Назовём команду Условие "Try-on Кнопка Условие"

3. Добавим правило №1. Если значение top: измените переменную {{tryon-top}}, чтобы указать, что загружается верхняя одежда, и отправьте команду «Попробовать Tracker».

Добавляем Правило №1

Если значение top: измените переменную {{tryon-top}}, чтобы указать, что загружается верхняя одежда, и отправьте команду «Попробовать Tracker». (см. скриншоты выше)

Значение переменной: tryon-mode
Тип условия: Полное совпадение
Фразы: top
Задайте действие и измените переменную tryon-top
Установите выражение, которое будет = {{tryon-clothes}}
Добавьте действие и выберите Отправить команду или условие и выберите команду Try-on Tracker