OneHTML Lab — приложение для создания и проверки HTML-приложений и игр с помощью внешних ИИ-ботов. Получите код у ИИ, вставьте его на телефоне или компьютере, запустите результат и сохраните готовый HTML-файл. Для работы OneHTML Lab установка и сервер не нужны.
Открыть приложение · Скачать готовый HTML
Простой режим: вставка, очистка, запуск и остановка, сохранение и отправка файла. В обоих режимах работают сеть игры, виртуальный localStorage для игровых рекордов, автоматическая подмена доступных библиотек в предпросмотре, выбор встраивания библиотек при сохранении, показ ошибок запущенного кода и один автоматически сохраняемый черновик. Экспертный режим добавляет открытие HTML-файла, переключатель игрового хранилища, историю 20 прошлых версий, сравнение текущего кода с любой записью истории, возврат из истории, встраивание библиотек в код и замену встроенных копий CDN-ссылками или файлами рядом для анализа в ИИ, состояние сохранения, ссылки на ИИ-ботов и готовые запросы, шесть полноэкранных готовых игр, две исходные игры ИИ с ошибками для самостоятельного исправления и тест работы библиотек с FPS, касаниями, нагрузкой до 10 000 объектов и демонстрациями возможностей движков. Для готовых примеров есть вкладки «Телефон» и «Компьютер». Выбранный режим и настройки сети и игрового хранилища восстанавливаются при следующем открытии. Руководство · Сборка из исходников · Вопросы и идеи · Лицензия MIT
Код, документация, значки, включая логотип, и изображения проекта распространяются по лицензии MIT. Встроенный редактор CodeMirror и его зависимости также используют MIT; полные лицензии и список версий сохранены в репозитории и внутри HTML. Загружаемые библиотеки игр имеют собственные лицензии: MIT, Apache-2.0 либо LGPL-2.1 для p5.js. Полные тексты лицензий, а для Babylon.js также NOTICE, сохраняются вместе с библиотеками.
По умолчанию используется CodeMirror с переносом длинных строк. Он позволяет сворачивать HTML, CSS и JavaScript значками − / + возле строк. Кнопка справа в нижней панели переключает CodeMirror и обычный редактор; крайняя правая кнопка включает светлую или тёмную тему приложения. Оба редактора работают с общим кодом, отменой, историей и сохранением. Выбор редактора и темы запоминается и действует также в простом режиме. CodeMirror встроен в HTML и не требует интернета.
Поиск, настройки редактора, история и сравнение оформлены общими компактными панелями со значками. В истории текущая версия закреплена над прокручиваемыми записями; сравнение предлагает код или запуск игры, краткий или полный вид и счётчики изменений.
Основные и экспертные инструменты используют ту же палитру и тонкие значки. На телефоне медиа и примеры открываются значками; на компьютере видны также подписи. Памятка оформлена пошагово, а разделённый предпросмотр сохраняет выбор размера, поворот и перезапуск игры.
В экспертном каталоге «Примеры» есть также раздел «Мультимедиа»: интерактивная афиша, история с выбором, инфографика, звуковая панель и 3D-витрина. Первые четыре работают без внешних ресурсов; для 3D используется Three.js r160, которую можно загрузить и встроить при сохранении. У них и игры «Поймай круг» кнопка «Задание» раскрывает базовую правку, усложнение, подсказку и проверку результата. После открытия копии можно подготовить запрос для внешнего ИИ с текущим кодом; задания подходят и для ручной работы без сети после подготовки библиотеки.
Для открытой копии учебного примера в «Редактировании» доступен «Разбор примера»: краткие пояснения и переходы к текстам, данным, оформлению и действиям. Режимы ИИ «Объяснить» и «Проверить» готовят запросы с текущим кодом, выделенным фрагментом или различиями с прошлой версией. Ответы внешнего бота участник оценивает сам; подготовка запроса не изменяет проект.
Перед демонстрацией откройте экспертную диагностику → «Проверка»: наблюдения по коду и экрану, ручные проверки управления, читаемости, повторного начала, звука и скачанного файла без сети. Отчёт можно скопировать или включить в запрос внешнему ИИ. Отметки относятся к проверенному коду; отсутствие замечаний не подтверждает качество всей работы. См. памятку перед показом и сдачей.
Кнопка ? возле названия открывает короткую памятку прямо в приложении, в том числе без интернета. Для группового занятия есть сценарий с подготовкой, заданиями и запасным вариантом без сети.
- Откройте приложение по ссылке выше или скачайте
onehtml-lab.htmlиз последнего выпуска и откройте файл в браузере. - Вставьте свой HTML-код в большое поле. Кнопка вставки заменяет код целиком; обычная команда «Вставить» в поле действует в позиции курсора.
- Нажмите «Запустить» — поле сменится игрой. «Стоп» вернёт исходный код. Нажмите «Сохранить» и подтвердите предложенное имя
game.htmlлибо измените его.
Для проверки можно вставить этот пример. После запуска кнопка в игре должна увеличивать счёт:
<!doctype html>
<html lang="ru">
<meta charset="utf-8">
<button id="score">Счёт: 0</button>
<script>
let score = 0;
document.querySelector('#score').onclick = event => {
event.target.textContent = `Счёт: ${++score}`;
};
</script>
</html>Предпросмотр изолирован от редактора, но игре разрешены внешние HTTPS-ресурсы, если доступ включён. Библиотеки игр в комплект редактора не входят. Для поддерживаемых версий Three.js r128–r160, Matter.js, Phaser 3, Phaser 4.2.1 и Babylon.js 9.30.0 приложение предлагает скачать код и лицензию, затем хранит их в IndexedDB. Распознаются ссылки на CDN и локальные пути с версией в имени или каталоге, включая подкаталоги и ../. Для других локальных JS-подключений можно выбрать файл библиотеки и её полную лицензию MIT или Apache-2.0 с NOTICE. Уже подготовленные библиотеки используются без повторного скачивания, в том числе при отключённой сети игры. Доступные библиотеки автоматически используются в предпросмотре и отправляемой копии. При сохранении можно получить один HTML со встроенными библиотеками, HTML и отдельные JS-файлы для сохранения в одну папку или исходный код с внешними ссылками. Лицензии включаются в подготовленные библиотеки. Код в поле не меняется. Неподдерживаемые сетевые адреса, другие ES-модули и подключения с async, defer или nomodule не подменяются. При обнаружении загрузки приложение показывает число замеченных файлов и измеренный объём в КБ. Если размер не измерен, отображается «(нет данных)». Фактический трафик может быть больше. Отдельно открытый сохранённый файл работает вне защитного окна редактора. Черновик сохраняется в браузере в обоих режимах, если доступно локальное хранилище; для отдельной копии сохраните HTML-файл. Отправка файла через системное меню зависит от поддержки браузера.
Модульное ядро Three.js r160–r180 также можно подготовить для автономной работы: поддерживаются точные ссылки jsDelivr/unpkg, статический import, type="module" и имя three через один importmap. Полученные модули вместе с MIT-лицензией сохраняются в кэше и могут быть встроены в один HTML. Такой файл открывается без сервера. Вариант с отдельными модульными JS-файлами требует HTTP; сохранение показывает это ограничение. Addons, произвольные локальные модули, динамический импорт и importmap со scopes пока не преобразуются. Подробности — в инструкции.
В «ИИ и запросы» можно выбрать «Игра» или «Приложение» и основное устройство. Для нового приложения есть необязательные заготовки афиши, истории с выбором, инфографики и викторины; они дописываются к вашим пожеланиям. Тип работы и устройство запоминаются в браузере.
Весь цикл работы с ИИ оформлен как компактная рабочая область: задачи со значками, медиа и история в заголовке, просмотр запроса, копирование и приём ответа внизу. Ответ сначала сравнивается с текущим кодом, затем применяется отдельной кнопкой. На телефоне используются короткие подписи, на компьютере — полные; переключение темы доступно в запросе, истории и приёме ответа.
Медиа, подготовка изображений и сохранение используют такое же компактное оформление: превью и значки действий, сравнение копии с оригиналом, основные действия и тема внизу. Из окна сохранения можно отправить HTML с выбранными вариантами встраивания.
Диагностика и проверка готовности оформлены в том же стиле: закреплённые вкладки со значками, раскрываемые подробности, отчёт и тема внизу. Скорость показана тремя показателями; ручные проверки сохраняют отметки и заметки для конкретной версии кода.
В запущенном предпросмотре экспертного режима можно указать элемент для ИИ: нажмите значок курсора в рамке рядом с разворачиванием, коснитесь кнопки, текста или изображения и выберите «К запросу». Опишите изменение — признаки элемента добавятся к текущему коду. Canvas и WebGL выбираются целиком, без распознавания нарисованных объектов. Выбор элемента.
Для новой игры доступны 2D/3D, рекомендация основы и ручной выбор Canvas, Phaser 3.90.0, Phaser 4.2.1, Matter.js, Three.js или Babylon.js 9.30.0. Жанр, оформление, физика и другие пожелания раскрываются по желанию. Параметры сохраняются вместе с запросом; изменение готовой игры учитывает текущий код и сохраняет его библиотеки. При приёме ответа можно сопоставить подключения с выбранным запросом и увидеть дополнительные внешние ресурсы. Проверка подключений не подтверждает качество или работоспособность игры.
Кнопка «Медиа» в экспертном режиме добавляет свои изображения, звук и самодостаточные GLB-модели для работы через ИИ. Отметьте нужные файлы: их имена и размеры изображений в пикселях появятся в конце запроса. Изображения можно вставить из буфера, уменьшить и преобразовать в WebP с предпросмотром и сохранением оригинала. Лента миниатюр над нижними инструментами показывает доступные файлы и выбранные для запроса. Опишите, как их использовать; после вставки ответа файлы подставятся по точным именам без подкаталогов. При сохранении и отправке их можно встроить в один автономный HTML как data URL. Выбранные файлы сохраняются в браузере; привязки входят в историю кода. Работа с медиа. Для моделей поддержаны GLTFLoader Three.js r160 и загрузчик Babylon.js 9.30.0 с полными лицензиями; есть отдельный пример спутника с текстурой и анимацией. Работа с GLB.
Для 3D-игр с вращением и равновесием поддерживаются cannon-es 0.20.0, Rapier 0.21.0 и Havok 1.3.14 для Babylon.js: точные подключения в запросе ИИ, загрузка и кэш, встраивание с полными лицензиями и сокращение обратно до ссылок. В «Мультимедиа» есть пример «3D-физика: башня и шар» с массой, трением и отскоком. В «Тесте работы библиотек» можно сравнить одну башню с cannon-es и без физического движка. Работа с 3D-физикой.
В «Мультимедиа» добавлены композиция Canvas / p5.js, сравнение трёх физических движков, экспонат model-viewer и выставка A-Frame. У каждого есть управление для телефона и компьютера, короткое пояснение и задания. Новые библиотеки подготавливаются через каталог и могут переноситься набором или встраиваться в автономный HTML. p5.js вынесена в экспериментальные: её нужно выбирать отдельно, общая загрузка по умолчанию её не включает; можно включить галочкой экспериментальные библиотеки. Исходники p5 получают от разработчиков и упаковывают в браузере; игровых библиотек и их архивов в репозитории проекта нет. p5.js сохраняется вместе с исходниками по LGPL; Havok — вместе с WASM.
Автор: Илья Барило.