Разработка игры "Голоса животных России" для самых маленьких на FireBase Studio с помощью ИИ Агента.

Всем Привет!

Для самых не терпеливых ссылка на результат(хостинг бесплатный и если долго не открывали, то нужно подождать до 60 сек для загрузки):

studio-gxt2.onrender.com

Это уже не первая моя поделка для моих детей. В этот раз вдохновением выступил гайд по мультиагентным системам от Сбера, который натолкнул меня на идею попробовать новый подход в вайб-разработке. В качестве платформы для вайб-разработки я сначала попробовал настроить GigaCode, но из коробки (без танцев с бубном) он работать не захотел, и я решил отложить это до лучших времён и посмотреть в сторону более зрелой платформы — Firebase Studio (от Google). Я не говорю, что GigaCode не достоин моего внимания, наоборот, очень хочу на нём поработать и обязательно поработаю. Просто порог входа для разработки на нём выше, что требует определённого времени на изучение мануалов, что для меня на текущий момент ввиду ограниченного времени нецелесообразно.

cdn-app.giga.chat

https://cdn-app.giga.chat/misc/0.0.0/assets/giga-landing/3a42508d_WP.pdf

" Чтобы разработка была не в стол, она должна решать конкретную проблему. "
информационное поле земли.

Многие родители покупают книги или журналы с изображениями животных, чтобы обучать детей звукам животных. Это актуально для возраста от 1 до 2,5 лет. В моём случае, с тремя маленькими детьми, после первого ребёнка мало что осталось в живом виде, так как они всё проверяют на прочность. А ведь эти материалы нужны ещё для двоих других детей, и тратиться на покупку новых развивающих пособий каждый раз — не выход. Конечно, многие могут возразить, что проще купить новые методические материалы. Но это не наш метод. Как вы уже догадались, мы пойдём по пути автоматизации.

У меня уже был небольшой опыт, о котором я писал [тут] и [тут]. В этот раз после прочтения документации от GigaChat я решил поменять подход и посмотреть, насколько это улучшит предсказуемость результата.

Ну и напомню основные проблемы, с которыми я столкнулся в предыдущем опыте:

Не предсказуемость результата.
Некорректная работа алгоритмов (непонимание: ИИ не всегда правильно интерпретирует цели).
Сложность внесения изменений в код для исправления ошибок и доработки. Технический долг растёт, иногда экспоненциально, с каждым промпт-запросом на изменение.

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

Мы хотим создать веб-приложение, состоящее из двух уровней:

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

Контент(с учётом разных вариантов реализации)
Изображение животного
- Вариант А: Использовать готовые изображения с сайтов бесплатных стоков (например, https://ru.freepik.com).Плюсы: Высокое качество. Минусы: Требует отдельной проработки выбора изображений и их хранения.
- Вариант Б: Использовать увеличенные векторные эмодзи. Плюсы: Простота использования. Минусы: Иногда низкое качество и ограниченное количество доступных животных.
Аудио
2.1 Звук животного
- Вариант А: Предзаписанные звуки. Плюсы: Высокое качество. Минусы: Требует отдельной проработки каждого аудиофайла и его хранения.*
- Вариант Б: Синтезированный звук. Плюсы: Динамичный подход, генерирует звуки в реальном времени. Минусы: Среднее или низкое качество произношения, зависящее от выбранного фреймворка синтеза.
2.2 Голос, произносящий название животного*
- Вариант А: Предзаписанный голос. Плюсы: Высокое качество. Минусы: Требует отдельной проработки каждого аудиофайла и его хранения.*
- Вариант Б: Синтезированный голос (TTS - Text-to-Speech). Плюсы: Динамичный подход, генерирует речь в реальном времени. Минусы: Среднее или низкое качество произношения, зависящее от выбранного TTS-движка.

Целевой пользователь: Ребёнок 3-6 лет + родитель-помощник.

Уровень 1 "Знакомство"

Уровень 2 "Викторина"

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

4.1. Информация о животных хранится в папке animals

4.2. Имя файла: [animal_name].json4.3. Формат JSON-файла:

ссылка на изображение или emoji животного
текст для синтеза речи

В этот раз перед написанием промта для ИИ-агента добавим шаг: поручим DeepSeek разработать план промта для создания игры. При необходимости внесём правки в этот план, после чего запустим его в ИИ-агенте Firebase Studio.

Промт 1 для DeepSeek

//В этот раз прежде чем писать промт для ИИ Агента, мы добавим дополнительный шаг в котором заставим DeepSeek расписать промт план для разработки нашей игры, после чего при необходимости внесём туда изменения и запустим в ИИ Агенте FireBase Studio.

распиши промт на английском для разработки игры ИИ агентом. Не пиши код, только промт для ИИ агента. Задание: напиши веб приложение с двумя уровнями. 1. Первый уровень 1.1. на экране пользователя отображаются изображения животных. 1.2 Изображения животных можно скачать на сайте https://ru.freepik.com 1.3 По нажатие на животное синтезированный голос произносит на русском название животного и какой звук издаёт животное. например если пользователь нажал на изображение коровы, то чин езированный голос сказал "мууууууу , корова" 1.4 Есть кнопка для возвращения к выбору уровня 2.второй уровень 2.1. синтезированный голос произносит, как говорит животное. Пример: му-му Корова 2.2. Если пользователь выбрал животное которое соответствует синтезированной у голосу, то синтезированный голос говорит молодец!!!. Если пользователь выбрал не правильно, то синтезированный голос говорит "Попробуй ещё" 2.3. есть кнопка для возвращения к выбору уровня 3. Выбор уровня происходит на первом экране. 4. Информация про животных 4.1 Хранится в папке animal 4.2. Имя файла [name animal].json 4.3 формат файла json содержит Ссылку на изображение или эмодзи животного текст для синтезированного голоса

//Результат

//Так, уже не плохо, но исходя и результатов кажется мы упустили конкретику по количеству животных, которую мы попробуем восполнить в следующем промт запросе.
Промт 2 к DeepSeek

напиши 30 животных распространенных на территории России и имеющие ярко выраженные голоса, которые может выучить ребёнок. пример корова - муууу, собака - гав, кошка - мяу

//Результат

[ {"name": "корова", "sound": "муууу"}, {"name": "собака", "sound": "гав-гав"}, {"name": "кошка", "sound": "мяууу"}, {"name": "петух", "sound": "ку-ка-ре-ку"}, {"name": "курица", "sound": "ко-ко-ко"}, {"name": "поросёнок", "sound": "хрю-хрю"}, {"name": "овца", "sound": "бе-бее"}, {"name": "коза", "sound": "ме-мее"}, {"name": "лошадь", "sound": "иго-го"}, {"name": "утка", "sound": "кря-кря"}, {"name": "гусь", "sound": "га-га-га"}, {"name": "ворона", "sound": "кар-кар"}, {"name": "воробей", "sound": "чик-чирик"}, {"name": "сова", "sound": "ух-ух"}, {"name": "дятел", "sound": "тук-тук"}, {"name": "голубь", "sound": "курлы-курлы"}, {"name": "лиса", "sound": "фыр-фыр"}, {"name": "волк", "sound": "уууу-у"}, {"name": "медведь", "sound": "рыыы"}, {"name": "ёжик", "sound": "пых-пых"}, {"name": "белка", "sound": "цок-цок"}, {"name": "заяц", "sound": "шур-шур"}, {"name": "лягушка", "sound": "ква-ква"}, {"name": "кукушка", "sound": "ку-ку"}, {"name": "сорока", "sound": "тре-тре"}, {"name": "клёст", "sound": "тюк-тюк"}, {"name": "синица", "sound": "синь-синь"}, {"name": "грач", "sound": "кра-кра"}, {"name": "индюк", "sound": "буль-буль"}, {"name": "комар", "sound": "ззззз"} ]

//В целом уже неплохо, с учётом тонкого тюнинга, который мы ранее закладывали и который можно сделать после разработки.
Теперь добавим к списку изображение эмодзи. Решил не использовать вариант авто подбора изображений из бесплатных источников.
Промт 3 к DeepSeek

добавь в json поле с эмодзи животного

//Результат

[ {"name": "корова", "sound": "муууу", "emoji": "🐄"}, {"name": "собака", "sound": "гав-гав", "emoji": "🐕"}, {"name": "кошка", "sound": "мяууу", "emoji": "🐈"}, {"name": "петух", "sound": "ку-ка-ре-ку", "emoji": "🐓"}, {"name": "курица", "sound": "ко-ко-ко", "emoji": "🐔"}, {"name": "поросёнок", "sound": "хрю-хрю", "emoji": "🐖"}, {"name": "овца", "sound": "бе-бее", "emoji": "🐑"}, {"name": "коза", "sound": "ме-мее", "emoji": "🐐"}, {"name": "лошадь", "sound": "иго-го", "emoji": "🐎"}, {"name": "утка", "sound": "кря-кря", "emoji": "🦆"}, {"name": "гусь", "sound": "га-га-га", "emoji": "🪿"}, {"name": "ворона", "sound": "кар-кар", "emoji": "🐦‍⬛"}, {"name": "воробей", "sound": "чик-чирик", "emoji": "🐦"}, {"name": "сова", "sound": "ух-ух", "emoji": "🦉"}, {"name": "дятел", "sound": "тук-тук", "emoji": "🐦"}, {"name": "голубь", "sound": "курлы-курлы", "emoji": "🕊️"}, {"name": "лиса", "sound": "фыр-фыр", "emoji": "🦊"}, {"name": "волк", "sound": "уууу-у", "emoji": "🐺"}, {"name": "медведь", "sound": "рыыы", "emoji": "🐻"}, {"name": "ёжик", "sound": "пых-пых", "emoji": "🦔"}, {"name": "белка", "sound": "цок-цок", "emoji": "🐿️"}, {"name": "заяц", "sound": "шур-шур", "emoji": "🐇"}, {"name": "лягушка", "sound": "ква-ква", "emoji": "🐸"}, {"name": "кукушка", "sound": "ку-ку", "emoji": "🐦"}, {"name": "сорока", "sound": "тре-тре", "emoji": "🪺"}, {"name": "клёст", "sound": "тюк-тюк", "emoji": "🦜"}, {"name": "синица", "sound": "синь-синь", "emoji": "🐦"}, {"name": "грач", "sound": "кра-кра", "emoji": "🐦‍⬛"}, {"name": "индюк", "sound": "буль-буль", "emoji": "🦃"}, {"name": "комар", "sound": "ззззз", "emoji": "🦟"} ]

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

Промт 4 к DeepSeek

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

[ {"name": "корова", "sound": "муууу", "emoji": "🐄"}, {"name": "собака", "sound": "гав-гав", "emoji": "🐕"}, {"name": "кошка", "sound": "мяууу", "emoji": "🐈"}, {"name": "петух", "sound": "ку-ка-ре-ку", "emoji": "🐓"}, {"name": "курица", "sound": "ко-ко-ко", "emoji": "🐔"}, {"name": "поросёнок", "sound": "хрю-хрю", "emoji": "🐖"}, {"name": "овца", "sound": "бе-бее", "emoji": "🐑"}, {"name": "коза", "sound": "ме-мее", "emoji": "🐐"}, {"name": "лошадь", "sound": "иго-го", "emoji": "🐎"}, {"name": "утка", "sound": "кря-кря", "emoji": "🦆"}, {"name": "гусь", "sound": "га-га-га", "emoji": "🪿"}, {"name": "ворона", "sound": "кар-кар", "emoji": "🐦‍⬛"}, {"name": "воробей", "sound": "чик-чирик", "emoji": "🐦"}, {"name": "сова", "sound": "ух-ух", "emoji": "🦉"}, {"name": "бобр", "sound": "грр-грр", "emoji": "🦫"}, {"name": "голубь", "sound": "курлы-курлы", "emoji": "🕊️"}, {"name": "лиса", "sound": "фыр-фыр", "emoji": "🦊"}, {"name": "волк", "sound": "уууу-у", "emoji": "🐺"}, {"name": "медведь", "sound": "рыыы", "emoji": "🐻"}, {"name": "ёжик", "sound": "пых-пых", "emoji": "🦔"}, {"name": "белка", "sound": "цок-цок", "emoji": "🐿️"}, {"name": "заяц", "sound": "шур-шур", "emoji": "🐇"}, {"name": "лягушка", "sound": "ква-ква", "emoji": "🐸"}, {"name": "лебедь", "sound": "гаа-гаа", "emoji": "🦢"}, {"name": "мышка", "sound": "пи-пи", "emoji": "🐁"}, {"name": "кузнечик", "sound": "три-три", "emoji": "🦗"}, {"name": "пчела", "sound": "жжжж", "emoji": "🐝"}, {"name": "цыплёнок", "sound": "пи-пи-пи", "emoji": "🐤"}, {"name": "тюлень", "sound": "ор-ор", "emoji": "🦭"}, {"name": "комар", "sound": "ззззз", "emoji": "🦟"} ]

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

**Task:** Develop a web application with two interactive levels for learning animal names and sounds in Russian. ### Core Requirements: 1. **Level Selection Screen (Initial View):** - Display two buttons: "Level 1" and "Level 2". - Always show a "Back to Levels" button during gameplay. 2. **Level 1 (Learning Mode):** - **Visuals:** - Fetch and display animal images from `https://ru.freepik.com`. - Render images in a grid/collection on-screen. - **Interactivity:** - When a user clicks an animal image: - Use TTS (Text-to-Speech) to speak: `"[animal_sound], [animal_name]"` (e.g., `"мууууууу, корова"`). - **Navigation:** - Include a "Back to Levels" button. 3. **Level 2 (Quiz Mode):** - **Audio Challenge:** - On level start, use TTS to play: `"[animal_sound] [animal_name]"` (e.g., `"му-му Корова"`). - **User Interaction:** - Display animal images (same as Level 1). - User clicks an image to guess the animal matching the audio. - **Feedback Logic:** - **Correct guess:** TTS says `"Молодец!!!"`. - **Incorrect guess:** TTS says `"Попробуй ещё"`. - **Navigation:** - Include a "Back to Levels" button. 4. **Data Management:** - **Storage:** - Animal data stored in `/animal` directory. - **File Format:** - Each animal: `[animal_name].json` (e.g., `cow.json`). - **JSON Structure:** ```json { "image_url": "string", // Direct URL to animal image (from Freepik) or emoji "sound_text": "string" // Text for TTS (e.g., "мууууууу" for Level 1, "му-му" for Level 2) } ``` - **Usage:** - `sound_text` + animal name constructs full TTS phrases. 5. **Technical Specifications:** - Use browser TTS (Web Speech API) with `lang="ru-RU"`. - Preload animal data from JSON files on level start. - Single-page design (no page reloads during navigation). 6. **UI/UX Notes:** - Optimize for children (large buttons, intuitive layout). - Handle TTS errors gracefully (fallback: alert message). 7. ** Animals List ** [ {"name": "корова", "sound": "муууу", "emoji": "🐄"}, {"name": "собака", "sound": "гав-гав", "emoji": "🐕"}, {"name": "кошка", "sound": "мяууу", "emoji": "🐈"}, {"name": "петух", "sound": "ку-ка-ре-ку", "emoji": "🐓"}, {"name": "курица", "sound": "ко-ко-ко", "emoji": "🐔"}, {"name": "поросёнок", "sound": "хрю-хрю", "emoji": "🐖"}, {"name": "овца", "sound": "бе-бее", "emoji": "🐑"}, {"name": "коза", "sound": "ме-мее", "emoji": "🐐"}, {"name": "лошадь", "sound": "иго-го", "emoji": "🐎"}, {"name": "утка", "sound": "кря-кря", "emoji": "🦆"}, {"name": "гусь", "sound": "га-га-га", "emoji": "🪿"}, {"name": "ворона", "sound": "кар-кар", "emoji": "🐦‍⬛"}, {"name": "воробей", "sound": "чик-чирик", "emoji": "🐦"}, {"name": "сова", "sound": "ух-ух", "emoji": "🦉"}, {"name": "бобр", "sound": "грр-грр", "emoji": "🦫"}, {"name": "голубь", "sound": "курлы-курлы", "emoji": "🕊️"}, {"name": "лиса", "sound": "фыр-фыр", "emoji": "🦊"}, {"name": "волк", "sound": "уууу-у", "emoji": "🐺"}, {"name": "медведь", "sound": "рыыы", "emoji": "🐻"}, {"name": "ёжик", "sound": "пых-пых", "emoji": "🦔"}, {"name": "белка", "sound": "цок-цок", "emoji": "🐿️"}, {"name": "заяц", "sound": "шур-шур", "emoji": "🐇"}, {"name": "лягушка", "sound": "ква-ква", "emoji": "🐸"}, {"name": "лебедь", "sound": "гаа-гаа", "emoji": "🦢"}, {"name": "мышка", "sound": "пи-пи", "emoji": "🐁"}, {"name": "кузнечик", "sound": "три-три", "emoji": "🦗"}, {"name": "пчела", "sound": "жжжж", "emoji": "🐝"}, {"name": "цыплёнок", "sound": "пи-пи-пи", "emoji": "🐤"}, {"name": "тюлень", "sound": "ор-ор", "emoji": "🦭"}, {"name": "комар", "sound": "ззззз", "emoji": "🦟"} ] --- **Key Constraints for the AI Agent:** - **No code** – provide a solution design only. - Assume Russian as the primary language for UI/TTS. - All animal assets (images/TTS text) must be pre-defined in `/animal/*.json`. - Freepik URLs must be validated for CORS/compatibility. This prompt gives the AI agent clear guidelines to architect the app while leaving implementation details (e.g., framework choice, TTS initialization) to its discretion.

1. Регистрируемся на платформе Firebase Studio:

studio.firebase.google.com

Firebase Studio

2. Вводим подготовленный промт.

После завершения разработки запускаем превью в отдельном окне.

В ходе отладки обнаружили:

Ошибку при быстром нажатии на нескольких животных подряд (из-за некорректного завершения воспроизведения звука).Решение: Новый промт-запрос "Исправь ошибку [копируем текст ошибки]". После нескольких итераций ИИ предлагает исправление, после чего доработка завершена. Можно было внести правки вручную, но в этот раз решил использовать ИИ.
Проблемы с произношением названий животных. Решение: По запросу ИИ создал папку с данными о животных. Исправления вносятся вручную: выбираем нужный файл и корректируем текст.

Важно: Для изменения названий животных или добавления новых нужно редактировать массив животных в файле Animals.ts.

Выкладываем код в Git
Публикуем из Git на бесплатный хостинг: https://studio-gxt2.onrender.com/

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

Добавить поддержку ссылок на аудиофайлы
Перенести названия животных в файлы с описанием
Добавить третий уровень без названий животных (только звуки)
Голосовое управление (включая подсказки) для меню и повтора
Адаптация под ошибки: после трёх неправильных ответов показывать подсказку

Спасибо, за то что дочитали до конца, надеюсь оправдал ваши ожидания.

#AI #личныйопыт #разработка #ииагенты #GIGACODE #DEEPSEEK #FIREBASESTUDIO #ОБУЧЕНИЕ #игрыдлядетей #nocode #аналитика

Разработка игры "Голоса животных России" для самых маленьких на FireBase Studio с помощью ИИ Агента.

Вступление

Проблематика

Идея

Постановка

3. Пользовательский путь

4.Требования к хранению информации о животных

Создаём промт для ИИ-агента на основе описания задачи

Запуск разработки в Firebase Studio

Отладка

Публикация

Итог

Что можно улучшить: