На хакатоне HuggingFace разработчик поставил себе задачу: AI-питомец, который генерирует браузерные игры на Three.js по запросу пользователя. Три подхода, модель Nemotron 30b, несколько итераций — и в итоге проект съехал до простого HTML-игрушечника. Честный пост-мортем оказался ценнее, чем ещё один «успешный» demo.
Контекст
Идея пришла из анимационного шоу The Amazing Digital Circus — там виртуальный персонаж Caine (пара говорящих челюстей) каждый день отправляет цифровых клонов людей в приключения внутри виртуального цирка. Разработчик хотел воспроизвести логику: AI-агент, который генерирует задачи-«квесты» для реальной продуктивности. Навороченный todo-лист в обёртке игры.
Для генерации кода выбрали Nemotron 30b — компактную модель, подходящую по вычислительным ограничениям хакатона. Целевой формат: полноценные браузерные игры на Three.js, создаваемые «на лету» единственным вызовом. На старте задача казалась реалистичной — модель ведь справляется с кодогенерацией в целом.
Итог: питомец существует как простой HTML-toymaker. Часы, todo-список, Snake, Breakout — да. Tetris — уже нет. Three.js-игры — нет совсем. Проект живёт на HuggingFace Spaces в упрощённом виде, и разработчик честно описал каждый шаг провала.
Аналитика
Три итерации — три разных инструмента, и все сломались по-своему. Длинный промпт с полными инструкциями: модель «забывала» детали к концу генерации, нарушала структуру Three.js-сцены. Skill-карточки из репозитория awesome-copilot (готовые мини-спеки для game engine): взорвали короткое контекстное окно, которое было урезано ради экономии вычислений. Увеличение окна не помогло. RAG поверх дистиллированных навыков (через Codex): частично заработало, но игры всё равно выдавали пустой экран — логические ошибки в самом коде.
Проблема не в модели как таковой. Nemotron 30b справляется с атомарными задачами — Snake он пишет, Breakout тоже. Но Three.js-игра — это одновременно несколько взаимосвязанных систем: рендерер, игровой цикл, физика, обработка ввода, управление уровнями. LLM в один проход не удерживает все зависимости, особенно при сжатом контексте. Ошибка в инициализации рендерера ломает всё — пользователь видит пустой экран без диагностики и без очевидного способа починить.
Это системная граница компактных моделей в текущем поколении: один файл, одна система, одна функция — рабочая зона. Многокомпонентный код с перекрёстными зависимостями — зона нестабильности. RAG помогает подтянуть специфику API, но не решает проблему когерентности между модулями. Для сложной кодогенерации нужны либо более крупные модели, либо мультиагентные цепочки с итеративной проверкой, либо — сознательное сужение задачи. Третий вариант и сработал: HTML без внешних библиотек, один выстрел.
Кейсы применения в бизнесе
B2B-SaaS стартап: Хотите дать пользователям AI-генерацию кастомных виджетов — ограничьтесь чистым HTML/CSS/JS без тяжёлых библиотек. Это реально работает в one-shot для компактных компонентов. Добавьте автоматическую валидацию: запускайте сгенерированный код в изолированном iframe и проверяйте на «пустой экран» прежде чем показывать пользователю. Результат — стабильные 80–90% успешных генераций на простых элементах вместо случайных провалов.
Корпорация с legacy: Внутренние инструменты — главный кейс для компактных моделей на локальном деплое. Генерация отчётов, простых форм, конфигурационных интерфейсов на базе шаблонов. Nemotron-класс моделей можно запустить on-premise, что критично при требованиях к данным и комплаенсу. Главное правило — один файл, одна задача. Работает стабильно.
SMB/локальный бизнес в КР/СНГ: Маленькая команда, минимальный бюджет — RAG поверх собственной документации: прайс-листы, FAQ, шаблоны договоров. Локальная или облачная модель по выбору. Это рабочая схема уже сегодня, без Three.js и без сложных мультисистемных зависимостей. Делайте MVP минимально рабочим и выпускайте его, а не гонитесь за полной функциональностью с первого раза.
Кейсы в личной жизни
Разработчик: Разбивайте задачу кодогенерации на атомарные части — не «напиши игру», а «напиши только класс GameLoop» или «напиши только функцию инициализации рендерера». Склеивайте вручную или через следующий вызов. Результат стабильнее, чем от одного большого промпта, даже при одинаковом суммарном объёме кода.
Контент-мейкер: HTML-toymaker-подход — быстрый способ сделать интерактивный элемент для лендинга, презентации или соцсети. Анимированные часы, простая форма, мини-игра Snake — всё это генерируется за один запрос без знания Three.js или WebGL. Попробуйте на любой компактной модели через HuggingFace Spaces или локально.
Студент / хакатонщик: Честный пост-мортем — это полноценная контрибьюция. HuggingFace принимает такие материалы, они читаются лучше, чем ещё один «успешный» demo с красивым README. Пишите о том, что не сработало и почему — это реальная ценность для комьюнити и хорошая строчка в портфолио.
Как применить сегодня
- Сузьте scope кодогенерации до одного файла и одной системы — не просите LLM собрать всё за раз.
- Добавьте автотест на «пустой экран»: запускайте сгенерированный JS в изолированной среде и проверяйте результат перед показом пользователю.
- Для сложных API (Three.js, WebGL) сначала дистиллируйте документацию через RAG — но помните, что RAG решает проблему знания API, а не когерентности между модулями.
- Если модель не справляется с задачей за 2–3 итерации — упростите MVP до минимально рабочего и выпустите. Pivot — это решение, а не капитуляция.
- Публикуйте провалы: в AI-комьюнити честные разборы ценятся не меньше демонстраций успехов — и привлекают больше содержательного фидбека.