Создание мини-приложения Suno

Новый формат Suno для разработчиков Puzzle AI!

Теперь вы можете создать полнофункциональное мини-приложение для генерации музыки с помощью Suno в вашем Telegram-боте.

Ключевые возможности готового приложения:

1. Генерация в простом режиме. Трек создается по короткому текстовому описанию (например, "создай лоу-фай бит про тихую библиотеку").

2. Генерация в расширенном режиме. Полная кастомизация трека, включая загрузку своего текста, выбор стиля, версии Suno, голоса вокалиста и других параметров.

3. Режим кавера. Возможность загрузить собственную аудиозапись для создания кавер-версии.

Пример готового приложения: https://t.me/ChatGPT_PuzzleBot?startapp=b2be1083b5699909

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

Шаг 1. Подготовка. Создаем переменные

Мы создадим набор переменных, каждая из которых будет отвечать за свою часть информации (от текста песни до сообщений об ошибках).

1. В личном кабинете PuzzleBot выберите вашего бота и перейдите во вкладку "Переменные".

1. Создайте 10 новых персональных переменных:

Переменная	Тип	Назначение
suno_prompt	Текст	(Основной промпт) Главная переменная, которая будет хранить финальный текстовый запрос для отправки в Suno.
suno_styles	Текст	(Стили музыки) Хранит выбранные пользователем музыкальные стили (например, "pop", "rock", "lo-fi").
suno_mode	Текст (значение по умолчанию: "simple")	(Режим работы) Определяет, в каком режиме работает приложение — простом или расширенном.
suno_gpt_lyric	Текст (значение по умолчанию: "false"	(Текст от ChatGPT) Сюда будет записываться текст песни, сгенерированный с помощью ChatGPT.
suno_music_only	Текст (значение по умолчанию: "false")	(Только музыка) Используется как флаг (true или false), чтобы указать, нужно ли генерировать только инструментал, без вокала.
suno_additional	Интегрированный (Текст)	(Доп. параметры) Хранит расширенные настройки из кастомного режима (версия Suno, голос и т.д.).
suno_voice_upload	Текст	(Загруженный голос) Сюда будет записываться файл с голосом, который пользователь загрузит для кавера.
suno_cover	Текст	(Режим кавера) Переменная для хранения аудиофайла при создании кавера.
suno_error	Текст	(Сообщения об ошибках) Сюда можно записывать тексты ошибок для последующего отображения пользователю.
suno_extend	Текст	(Продление трека) Переменная для хранения аудиофайла при продлении трека

Важно! Переменная {{suno_additional}} - Интегрированная. Вот полные настройки:

• Тип значения: Интегрированный

• Тип интеграции: HTTP Запрос

• Формат значения: Текст

• Ссылка (JSON): https://api.pxsto.re/main/99d25b4b-a540-41b2-a32b-e6b469610077

• Ответ: result

• Тип запроса: GET

• Параметр - Ключ: user_id - Значение: {{USER_ID_TEXT}}

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

Шаг 2. Создаем фундамент. Основные экраны приложения

2.1. Создание мини-приложений

Прежде чем настраивать логику, нам нужно создать три "экрана" (в виде мини-приложений), между которыми будет переключаться пользователь.

1. В PuzzleBot перейдите во вкладку "Конструктор" и создайте 4 новых мини-приложения.

1. Дайте им любое произвольное название.

В нашем примере:

• Главный экран (Suno Webapp). Здесь пользователь будет выбирать между генерацией трека или модификациями.

• Переключатель режимов (Suno :// формат трека). Дополнительная команда для работы со вкладками.

• Простой режим (Suno :// создать просто). Экран для быстрой генерации трека по одной фразе.

• Расширенный режим (Suno :// создать кастомно). Экран с полным набором настроек для продвинутых пользователей.

• Модификации (Suno :// меню модификаций). Здесь пользователь сможет продлевать трек, разделять его на инструментал и вокал и т.д.

2.2. Настройка главного экрана (Suno Webapp)

1. Откройте мини-приложение Suno Webapp и добавьте в него блок "Клавиатура".

1. Настройте первую кнопку (как на изображении):

1. Настройте вторую кнопку (как на изображении):

1. В этом же мини-приложении откройте вкладку "Действия" и создайте поочередно 5 новых действий "Очистить переменную":

• suno_gpt_lyric

• suno_styles

• suno_music_only

• suno_cover

• suno_mode

2.3. Переключатель режимов

1. В мини-приложении "Suno :// формат трека" добавьте новый блок "Вкладки" и настройте по аналогии:

2.4. (Опционально) Копирование нашего дизайна

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

• Раскройте эту страницу 👇

✨ КАК СКОПИРОВАТЬ ДИЗАЙН

Важная подготовка. Настройка темы

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

1. В конструкторе PuzzleBot перейдите в "Настройки" вашего бота.

2. Откройте раздел "Мини-приложение".

3. Установите следующие значения:

   • Тема: Темная

   • Стиль: Android

1. Добавление "бегущей строки":

Создайте новое мини-приложение с любым названием, например "html 1 (бегущая строка)". Добавьте блок "HTML-код" и вставьте в него содержимое файла бегущая строка.txt

[Ссылка на HTML-код]

Вернитесь в каждое из трех основных приложений ( "Suno Webapp", "Suno :// создать просто" и "Suno :// создать кастомно"). В каждом из них добавьте блок "Подстановка" и выберите созданное ранее приложение "html 1 (бегущая строка)":

1. Добавление анимированного стикера "Кот с маракасами"

Этот забавный элемент оживляет главный экран.

1. Перейдите в главное мини-приложение Suno Webapp.

2. Добавьте в него поочередно три блока "Стикер".

3. В каждый из блоков загрузите по одному файлу: 1.tgs, 2.tgs, 3.tgs. (ссылка на файлы стикеров)

1. Установка фирменного фона и цвета шапки

Единый стиль для всех экранов делает приложение целостным и профессиональным.

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

• Откройте мини-приложение (например, Suno Webapp).

• Перейдите в его дополнительные настройки.

• Установите галочку "Задать цвет шапки". Цвет шапки: 22374a

• В поле «Фон» загрузите файл background.mp4. [Ссылка на файл с фоном]

• Сохраните изменения и повторите эту процедуру для остальных мини-приложений.

Сохраните изменения и перейдите к следующему шагу.

Шаг 3. Настройка простого режима

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

3.1. Создание поля для ввода идеи трека

Это основное текстовое поле, куда пользователь будет вводить свой запрос.

1. В конструкторе PuzzleBot перейдите в мини-приложение "Suno :// создать просто".

2. Создайте в нём новый блок "Форма ввода".

1. Заполните основные поля:

• Тип ввода: "Ввод текста"

• Маска ввода: "Текст"

• Тип поля ввода: "Многострочный"

• Плейсхолдер: "✨ опиши идею для трека"

1. Настройте сохранение данных.

• Раскройте "Дополнительные настройки". Установите все галочки и в поле "Дублировать ответ в переменную" укажите созданную ранее suno_prompt:

3.2. Добавление переключателя "Только музыка"

Этот элемент позволит пользователю указать, что ему нужен только инструментал, без вокала.

1. Добавьте в мини-приложение ещё один блок "Форма ввода". Заполните поля следующим образом:

• Тип ввода: Выбор варианта

• Количество ответов: Один

• Вид переключателей: Тумблеры

• Вид кнопки: Только текст

• Название кнопки: "только музыка" (произвольное)

1. Раскройте дополнительные настройки кнопки. Установите галочку напротив пункта "Изменить переменную". Укажите название переменной suno_music_only с выражением "true".

д

3.3. Настройка кнопки генерации

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

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

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

1. Настройте клавиатуру:

• Вернитесь в мини-приложение Suno :// создать просто и измените блок "Клавиатура".

• Настройте кнопку, как показано на изображении ниже, привязав к ней команду

  suno_tracker

1. Раскройте дополнительные настройки клавиатуры. Установите галочки напротив пунктов "Закрыть Мини-приложение" и "Изменить переменную". Укажите переменную suno_mode и выражение "simple"

Сохраните изменения и переходите к следующему шагу.

3.4. (Опционально) Копирование нашего дизайна

• Раскройте эту страницу 👇

КАК СКОПИРОВАТЬ ДИЗАЙН

• Добавьте бегущую строку, которую мы сделали в Шаге 2, путем добавления блока "Подстановка". Переместите этот блок на первую позицию:

• Добавьте новый блок "Описание", после "Текст с музыкой", чтобы получилось так:

Шаг 4. Настройка расширенного режима

На этом шаге мы создадим многофункциональную страницу для "расширенного режима", которая даёт полный контроль над генерацией.

4.1. Поле для ввода текста песни

Это поле позволит пользователям вставлять свой собственный текст для песни.

1. Перейдите в мини-приложение Suno :// создать кастомно. Создайте в нём новый блок "Форма ввода".

2. Заполните основные поля:

• Название для статистики: suno_lyrics

• Переменная: suno_lyrics

• Тип ввода: Ввод текста

• Маска ввода: Текст

• Тип поля ввода: Многострочный

• Ограничить количество символов: 2000

• Плейсхолдер: напиши текст песни (произвольное)

1. Раскройте дополнительные настройки формы ввода. Установите все галочки и настройте дублирование в переменную suno_prompt, как показано на скриншоте:

4.2. Переключатель "Сочинить текст"

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

1. В мини-приложении Suno :// создать кастомно создайте ещё один блок "Форма ввода". Заполните основные поля:

• Тип ввода: Выбор варианта

• Количество ответов: Один

• Вид переключателей: Тумблеры

• Вид кнопки: Только текст

• Название кнопки: "сочинить текст" (произвольное)

1. Раскройте дополнительные настройки кнопки. Установите галочку напротив пункта "Изменить переменную". Укажите переменную suno_gpt_lyric с выражением "true"

4.3. Переключатель "Только музыка"

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

1. Добавьте новый блок "Форма ввода" в то же мини-приложение. Заполните основные поля:

• Тип ввода: Выбор варианта

• Количество ответов: Один

• Вид переключателей: Тумблеры

• Вид кнопки: Только текст

• Название кнопки: "только музыка" (произвольное)

1. Раскройте дополнительные настройки кнопки. Установите галочку напротив пункта "Изменить переменную". Укажите название переменной suno_music_only с выражением "true".

4.4. Выбор стилей (опционально, требует NocoDB)

Этот блок позволит пользователям выбирать до 7 музыкальных стилей из готового списка.

Важно: Пропустите этот шаг, если у вашего бота нет интеграции с NocoDB

1. Загрузите данные в NocoDB:

• Скачайте CSV-файл со списком стилей по этой ссылке: https://disk.yandex.ru/d/9zeSHRWNyOKTqw

• В вашей базе NocoDB нажмите "Import Data"

• Выберите формат "CSV", загрузите скачанный файл и подтвердите импорт.

1. Настройте блок в PuzzleBot:

• Вернитесь в мини-приложение Suno :// создать кастомно и создайте новый блок "Форма ввода"

• Заполните поля:

• Название для статистики: suno_styles_all

• Переменная: suno_styles_all

• Тип ввода: Список

• Количество ответов: Несколько

• Ограничить количество вариантов: от 0 до 7

• Способ записи значения: Значения через запятую

• Источник списка: Подключить NocoDB

Выберите вашу БД, подгрузите таблицу из NocoDB и заполните поля:

• Столбец с названием варианта: title

• Столбец с названием варианта: description

В настройках "Клавиатуры" этого блока установите галочку напротив "Дублировать ответ в переменную" и введите переменную suno_styles:

4.5. Блок расширенных настроек

Этот блок, реализованный через HTML, будет содержать все остальные кастомные параметры (выбор версии, голоса и т.д.).

1. Создайте мини-приложение для HTML-кода:

• Создайте новое мини-приложение с произвольным названием, например, "html 2 (доп. параметры)".

• Добавьте в него блок "HTML-код" и вставьте в него код из этого файла

1. Настройте кнопку и клавиатуру в основном приложении:

Вернитесь к мини-приложению "Suno :// создать кастомно". Добавьте новый блок "Клавиатура" и заполните поля:

• Тип клавиатуры: Обычная

• Название: расширенные настройки (произвольное)

Настройте кнопку и сам блок клавиатуры, как показано в примере:

Сохраните изменения и переходите к следующему шагу.

Шаг 5. Настройка режима создания кавера

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

5.1. Создание экрана для загрузки

1. Создайте новое мини-приложение с произвольным названием, например "Suno :// создать кавер".

2. Добавьте в это приложение два блока "Заголовок" и "Описание". Заполните их текстом, который объяснит пользователю, что нужно сделать. Например:

• Заголовок: "кавер-версия"

• Описание: "для создания кавер-версии трека загрузи собственный аудиотрек или запиши голосовое сообщение".

5.2. Настройка формы для загрузки файла

Это ключевой элемент экрана, который позволит пользователю загрузить свой аудиофайл.

1. Добавьте в это же мини-приложение новый блок "Форма ввода".

2. Заполните поля:

• Название для статистики: suno_upload_audio

• Переменная: suno_upload_audio

• Тип ввода: Загрузка файла

• Количество файлов: 1

• Ошибка (превышено количество): Превышено максимальное количество файлов

• Маска ввода: Аудио

• Ошибка (маска ввода): Недопустимый формат файла

1. Раскройте "Дополнительные настройки". Поставьте галочку напротив "Дублировать ответ в переменную" и укажите пользовательскую переменную suno_cover. Это действие сохранит загруженный файл в нужную переменную для дальнейшей обработки.

5.3. Создание команды для записи голосового сообщения

Зачем нужна отдельная команда? Запись голоса — это стандартная функция Telegram, которая временно выводит пользователя из интерфейса мини-приложения. Поэтому мы создадим отдельную команду, которая будет ловить его ответ.

1. Создайте новую обычную команду. Дайте ей любое название, например "Suno :// записать голосовое".

1. Добавьте в эту команду новый блок "Форма ввода" и заполните поля:

• Текст: "запиши и отправь мне голосовое сообщение"

• Название для статистики: suno_upload_voice

• Переменная: suno_upload_voice2

• Тип ввода: Отправка сообщения

• Варианты для выбора: Один

• Маска ввода: Голосовая запись

1. Раскройте "Дополнительные настройки". Установите галочку напротив пункта "Дублировать ответ в переменную" и укажите пользовательскую переменную suno_cover:

1. Откройте вкладку "Действия". Во вкладке "Действия" этой же команды добавьте действие "Отправить команду или условие" и выберите suno_tracker:

5.4. Добавление кнопок на экран кавера

Теперь вернитесь в мини-приложение "Suno :// создать кавер" и добавим в него две кнопки.

1. Настройте кнопку "Записать голос":

Добавьте новый блок "Клавиатура". Дайте кнопке любое название, например "записать голос" и установите тип клавиатуры "Обычная".

Настройте кнопку так, как показано на скриншоте:

Раскройте "Дополнительные настройки". Здесь заложена основная функция перехода в Телеграм-бот для записи голосового сообщения. Установите галочку "Показать попап" и заполните основные поля:

• Тип: С кнопкой

• Добавить заголовок: Да (поставить галочку)

• Заголовок: "запись голосового сообщения"

• Текст: "вы будете направлены в бот для записи голосового сообщения"

• Название кнопки: ОК

Нажмите на созданную кнопку "ОК" и раскройте дополнительные настройки.

• Установите действие кнопки: "Переход к команде или условию" -> "Suno :// записать голосовое".

• В дополнительных настройках установите галочки напротив пунктов "Закрыть Мини-приложение" и "Выполнить вибрацию".

1. Настройте кнопку "Создать трек".

Это финальный штрих в мини-приложении "Suno :// Создать кавер".

• Найдите уже созданный автоматически блок "Клавиатура" (с фиксированным типом) и измените кнопку по аналогии:

Раскройте "Дополнительные настройки" клавиатуры. Установите галочки напротив пунктов "Закрыть Мини-приложение" и "Изменить переменную". Укажите переменную suno_mode и выражение "custom"

5.5. Добавление кнопки "Загрузить аудио"

Финальный штрих — добавим кнопку для перехода в созданный нами режим кавера с экрана расширенных настроек.

1. Вернитесь в мини-приложение "Suno :// Создать кастомно".

Найдите автоматически созданную клавиатуру с типом "Фиксированная". Добавьте в неё две кнопки "загрузить аудио" и "создать трек":

• Настройте кнопку "загрузить аудио". Установите действие кнопки: "Переход к Мини-приложению" -> "Suno :// создать кавер".

• Настройте кнопку "создать трек". Установите действие кнопки: "Переход к команде или условию" -> "suno_tracker":

• Раскройте дополнительные настройки для кнопки "создать трек". Установите галочку напротив "Изменить переменную" и добавьте suno_mode с выражением "custom"

После сохранения изменений все экраны будут связаны между собой.

Шаг 6. Добавляем модификации

На момент написания инструкции доступно 2 модификации: продление трека и разделение трека на вокал и инструментал

6.1. Подготовка и основной экран

В этом блоке мы будем заполнять основной экран "Suno :// меню модификаций", а также создадим команды для перехода к функциям.

1. Создайте два новых мини-приложения:

• Продление трека (Suno :// продлить трек). Здесь пользователь загружает аудиофайл для продления трека.

• Разделение трека (Suno :// разделить трек). Здесь пользователь загружает аудиофайл для разделения трека.

1. В мини-приложении Suno :// меню модификаций создайте два новых блока "Заголовок" и "Текст". Заполните по аналогии:

1. Добавьте новый блок "Клавиатура" с типом "Обычная". Создайте две кнопки "продлить трек" и "отделить вокал" и соедините их с мини-приложениями Suno :// продлить трек и Suno :// разделить трек соответственно:

6.2. Продление трека

1. Продублируйте мини-приложение "Suno :// создать кастомно". Назовите дублированное мини-приложение "Suno :// продлить" (или любое другое).

Единственное, что нужно изменить в продублированном мини-приложении - это кнопка "Создать трек" заменяется на "Продолжить", чтобы перенаправить пользователя на загрузку аудио и новое мини-приложение "Suno :// продлить трек"

1. В приложении "Suno :// продлить трек" добавьте два блока "Заголовок" и "Текст" и заполните по аналогии (см. скриншот):

1. Добавьте блок "Форма ввода" для загрузки аудиофайла. Заполните поля:

• Тип ввода: Загрузка файла

• Количество файлов: 1

• Маска ввода: Аудио

• Название кнопки: "загрузить аудио"

Раскройте дополнительные настройки формы ввода. Поставьте галочку напротив "Дублировать ответ в переменную" и укажите пользовательскую переменную suno_cover. Это действие сохранит загруженный файл в нужную переменную для дальнейшей обработки.

1. Создайте новый блок "Форма ввода". Заполните основные поля:

• Тип ввода: Выбор времени

• Задать интервал: с 00:01 по 00:00

Раскройте дополнительные настройки формы ввода. Установите галочку напротив пункта "Дублировать ответ в переменную" и укажите переменную suno_extend. Разрешите повторное прохождение.

1. Создайте новый блок "Клавиатура" с типом "Фиксированная". Настройте по аналогии:

Раскройте дополнительные настройки кнопки. Установите галочки напротив пунктов "Закрыть Мини-приложение" и "Изменить переменную". Установите переменную suno_mode и значение "extend":

6.2. Разделение трека

1. В приложении "Suno :// разделить трек" добавьте два новых блока "Заголовок" и "Текст" и заполните по аналогии:

1. Добавьте новый блок "Форма ввода". Заполните основные поля:

• Тип ввода: Загрузка файла

• Количество файлов: 1

• Маска ввода: Аудио

• Название кнопки: "загрузить аудио"

1. Создайте новый блок "Клавиатура" с типом "Фиксированная". Настройте по аналогии:

• Раскройте дополнительные настройки кнопки. Установите галочки напротив пунктов "Закрыть Мини-приложение" и "Изменить переменную". Установите переменную suno_mode и значение "separate":

Шаг 7. Финал. Настраиваем отправку запроса

Мы подошли к финальному и ключевому шагу. Сейчас мы настроим команду suno_tracker, которую мы создавали как "заглушку" на предыдущих этапах. Эта команда собирает всю информацию из переменных и отправляет единый запрос в систему Puzzle AI для начала генерации.

7.1. Настройка основного запроса (Tracker)

1. В конструкторе PuzzleBot откройте команду suno_tracker

2. Перейдите на вкладку "Действия" и добавьте действие "Отправить запрос".

3. Заполните основные поля запроса:

• Ссылка: https://api.pxsto.re/main/puzzlebot-tracker

• Установите тип запроса: POST

• Вид запроса: Сформированный

1. Добавьте 12 параметров. Эти параметры передают в Puzzle AI всю необходимую информацию для генерации.

• Ключ: user Значение: {{USER_ID_TEXT}}

• Ключ: model Значение: suno

• Ключ: bot Значение: {{BOT_USERNAME_TEXT}}

• Ключ: token Значение: [Укажите ваш API-токен]

• Ключ: prompt Значение: {{suno_prompt}}

• Ключ: instrumental Значение: {{suno_music_only}}

• Ключ: styles Значение: {{suno_styles}}

• Ключ: mode Значение: {{suno_mode}}

• Ключ: gpt_lyric Значение: {{suno_gpt_lyric}}

• Ключ: additional Значение: {{suno_additional}}

• Ключ: gpt_tags_edit Значение: true

• Ключ: extend Значение: {{suno_extend}}

7.2. Очистка переменных после запроса

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

1. В этой же команде suno_tracker, после действия "Отправить запрос", добавьте несколько действий "Очистить переменную".

2. Последовательно очистите следующие переменные:

• suno_styles

• suno_music_only

• suno_gpt_lyric

• suno_cover

• suno_mode

7.3. Создание команды для обработки ошибок

1. Создайте новую инлайн-команду и назовите её suno_error.

2. Добавьте новый блок "Текст". Введите текст с сообщением об ошибке и укажите переменную {{suno_error}}

Поздравляем!

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

Остались вопросы? Напишите в поддержку: https://t.me/FreeAIchat/199018