Привет, Хабр! Наткнулся на интересный и, как по мне, революционный проект WebSim AI. Покопался в нем несколько дней и сейчас, как вы уже поняли, решил с вами поделиться информацией о нем.
WebSim AI
Проект WebSim AI представляет собой мощный инструмент для создания веб-страниц с минимальными усилиями, что может значительно ускорить процесс разработки как для новичков, так и для опытных специалистов.
Общий принцип работы
WebSim AI – это своего рода виртуальный интернет, где вы можете использовать модели искусственного интеллекта, чтобы создавать веб-приложения, игры и прочие проекты, основанные на JS.
На данный момент доступны следующие модели для генерации веб приложений (HTML + CSS + JS):
Claude 3.5 Sonnet (самая новая модель, которая используется по умолчанию)
GPT-4o (только добавили, пока работает нестабильно)
Haiku
Sonnet 3
Opus
То есть, происходит ровно следующее:
Вы генерируете промт (запрос) одним из трех способов (подробнее ниже).
Промт отправляется в выбранную нейронку.
Нейронка генерирует и возвращает готовую страницу с HTML + CSS + JS (если требуется для конкретного проекта).
Для тех, кто понимает, что такое JS, сейчас должен был произойти взрыв мозга. На чистом JS можно создавать полноценные веб-приложения, игры, динамические страницы, 3D-графику и прочее.
Под «виртуальный интернет» подразумевается общий формат платформы. После авторизации вас встретит некий внутренний браузер, и вы, как бы, не создаете новые страницы и не пишете в формате чата запросы нейронке (как в ChatGPT), а ходите по внутреннему интернету.
Благодаря этому подходу генерируются, как бы, отдельные страницы. С этого вытекает формат для создания промтов (запросов нейронке).
Варианты ввода промтов
Все промты вводятся в адресной строке внутреннего браузера. Вариантов для ввода промтов всего три:
-
Естественный язык
Пример: «Одностраничный сайт-визитка для Python разработчика уровня сеньор. Сайт на русском языке с динамическими блоками. Выбери черно-белые тона. Добавь стиль».
Пример ввода промта Результат промта (1) Результат промта (2) Далее можно добавлять уточняющие промты. К примеру, попросим добавить на сайт логотип Python и фото python разработчика. Вводить это необходимо в той же адресной строке.
Обратите внимание. Была сгенерирована такая ссылка:
https://websim.ru/dev-portfolio/
(естественно, ссылка фейковая, и чуть дальше я покажу вам, как сохранить свой проект, чтобы им можно было делиться).Кроме того, к данному способу можно отнести и отправку изображений. К примеру, вам понравился какой-то сайт. Вы можете просто сделать скриншот, и написать в стиле "Добавь это в боковое меню". После чего произойдет настоящая магия!
Web Sim AI трансформирует этот скрин в настоящий код, перерисовав иконки. Вот простой пример.
Давайте в этот сайт добавим верхнее меню такое-же как на сайте ppython.org.
Для этого я просто сделаю скрин с сайта python и попрошу Web Sim Ai повторить эти кнопки со стилями и прочим уже на моем сайте.
Далее достаточно указать пару уточняющих промтов и вы получите ровно тот результат которого ждали.
-
Через генерацию фейковых ссылок
Тут логика в следующем. Нейронка считает вашу ссылку и поймет, что вы хотите в это заложить. Можно как просто указать корневой домен, так и сделать описание через параметры пути и параметры запроса (подробно разбирал в цикле своих публикаций про FastApi).
К примеру, такая фейковая ссылка может выглядеть так:
https://python-proger-secret.ru/blogs/1234
.Эту фейковую ссылку мы передаем в адресную строку (где вводили промты) и смотрим:
Тут мы использовали только параметры пути и все. Не описывали никаких промтов, но нейронка поняла, что от нее требуется. Добавим теперь параметр запроса
lang=ru
, получится:https://python-proger-secret.ru/blogs/1234&lang=ru
Вводим и смотрим:
Считав параметр пути, нейронка поняла, что необходимо добавить второй язык и, за пару мгновений, она прописала это в разметку кода.
-
Использование псевдокода
Интересный способ. Он позволяет вам описывать псевдокод с нужными на странице функциями и действиями, а бот это дело будет подхватывать и генерировать нужные странички.
Сохранение проекта
Под сохранением проекта подразумевается сразу несколько действий:
Сохранение проекта внутри системы WebSim AI, чтобы появилась возможность делиться своим проектом внутри системы для других пользователей.
Сохранение исходников кода для последующего деплоя, например, на VPS сервере, GitPages (сегодня покажу, как это происходит), хостинге или своей локальной машине.
Сохранение проекта внутри WebSim AI
Для сохранения проекта внутри WebSim AI, чтобы им можно было поделиться, необходимо:
Добавить проект в закладки.
Дать проекту название.
Установить ползунок на «Опубликовать».
Скопировать ссылку.
![](https://habrastorage.org/getpro/habr/upload_files/267/aab/0de/267aab0de47ada49fb28553b85d9092b.png)
![](https://habrastorage.org/getpro/habr/upload_files/2e5/7a2/b60/2e57a2b60d8e955d0868a30121483c7c.png)
В моем случае получилась следующая ссылка: https://websim.ai/@yakvenalex/python-proger-secret-1234
Выполню переход в проект в режиме инкогнито по скопированной ссылке.
![](https://habrastorage.org/getpro/habr/upload_files/80a/5e8/90e/80a5e890eb377d66c661a918a4e5c28b.png)
Кстати, с каталогом таких созданных и опубликованных проектов вы можете ознакомиться сразу после входа в WebSim AI.
![](https://habrastorage.org/getpro/habr/upload_files/8c0/82d/8d8/8c082d8d81968e2f67b4a72246672eab.png)
И там есть, по-настоящему, сумасшедшие проекты, которые взрывают мозг. Кстати, открыв «чужой» проект, можно посмотреть на промты, которые использовал пользователь для создания проекта.
![](https://habrastorage.org/getpro/habr/upload_files/45b/688/d06/45b688d062d4c6bf5be1649d1e3f6525.png)
Сохранение исходников кода для деплоя
В данном формате все достаточно просто, и я вам покажу, на конкретном примере, как я создал игру «Крестики-нолики», после скачаем проект и опубликуем его на GitHubPages (бесплатно).
Для сохранения исходников вы можете воспользоваться встроенным функционалом в каждую страницу (не важно, ваша она или нет).
Для этого необходимо нажать на 3 точки в правом верхнем углу виртуального браузера и нажать на «Download».
![](https://habrastorage.org/getpro/habr/upload_files/1d2/608/95a/1d260895a43cc957cc61e3c580800061.png)
![](https://habrastorage.org/getpro/habr/upload_files/719/cdd/e7f/719cdde7ff416ba8dedb421c5e492bfb.png)
После мы можем открывать проект локально, а в нашем распоряжении будет исходник кода, который мы сразу сможем запустить локально.
![](https://habrastorage.org/getpro/habr/upload_files/58c/816/b5d/58c816b5d440c1becb1669367cff1951.png)
Или разместить этот код удаленно.
![](https://habrastorage.org/getpro/habr/upload_files/0ba/621/2a4/0ba6212a4ca190e584ed4b5000abbd64.png)
Второй вариант сохранения кода – использование специальных плагинов.
Плагины, по сути, это такие же проекты других пользователей, которые вы можете использовать «поверх» других проектов (своих или проектов других пользователей).
Прекрасным примером такого плагина выступает проект пользователя c15r с названием ide. Данный плагин добавляет полноценную панель разработчика в виртуальный браузер проекта WebSim AI.
Для использования этого плагина вам достаточно в адресную строку браузера (настоящего браузера, не виртуального) ввести ?plugin=@c15r/ide
.
Было: https://websim.ai/c/qAth9IGw5mzk5PY0Z
Стало: https://websim.ai/c/qAth9IGw5mzk5PY0Z?plugin=@c15r/ide
После этого на странице появится 2 кнопки:
![](https://habrastorage.org/getpro/habr/upload_files/b92/399/9f6/b923999f6c9de9e21bf231d920e26c3f.png)
Благодаря данному плагину вы сможете не только удобно копировать код, но и править его в режиме реального времени. Очень полезная штука для фронтенд-разработчиков.
![](https://habrastorage.org/getpro/habr/upload_files/76a/630/b3e/76a630b3e32b9a0ef6f656c011401878.png)
![](https://habrastorage.org/getpro/habr/upload_files/99c/461/163/99c4611639eada13b17a393e3cf2c8e6.png)
Создадим игру «Крестики-нолики»
Ниже я приведу последовательно промты, которые я использовал для создания игры.
Промт 1
Игра крестики-нолики. На стартовом экране вводим имя игрока 1 и игрока 2, после нажимаем на "Старт". Крестики окрашены красным, а нолики окрашены синим. Победа, если 3 крестика или 3 нолика по горизонтали, по вертикали или по диагонали. Стандартные крестики-нолики. Добавь красивую графику. Добавь кнопку завершить игру (возвращать должно на экран ввода имени игроков).
Промт 2
Кнопку «Старт» и «Завершить» размести по центру.
После игры (победа или ничья) добавь кнопку «ещё игра».
Промт 3
Сделай, чтобы кнопки "Ещё игра" и "Завершить игру", когда та появлялась, были расположены в одной строке, а не друг под другом как сейчас.
![](https://habrastorage.org/getpro/habr/upload_files/74a/3b0/678/74a3b0678fff7d3b4908e50b5b864414.png)
![Стартовый экран Стартовый экран](https://habrastorage.org/getpro/habr/upload_files/bbd/ae9/727/bbdae97276a5b03d1719be66c6cd5809.png)
![Экран с игрой Экран с игрой](https://habrastorage.org/getpro/habr/upload_files/ff6/a6b/006/ff6a6b00641ac56c7cbba56fdc31631c.png)
После этого я получил полноценную игру!
Теперь сохраним исходник кода созданной игры.
![](https://habrastorage.org/getpro/habr/upload_files/a18/b3a/331/a18b3a331fc8a0f67bd292faea25f51f.png)
Отлично, исходник сохранен.
Теперь, для красоты, я разобью игру на разные файлы:
index.html
– для хранения HTML шаблона.script.js
– для хранения JS кода.styles.css
– для хранения стилей.
Из «нового» это только описание импортов в HTML коде.
<link rel="stylesheet" href="styles.css">
Это мы указываем в блоке head для импорта стилей.
<script src="script.js"></script>
Это перед закрывающим тегом body для импорта JS.
Полный код index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Крестики-нолики</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Крестики-нолики</h1>
<!-- Экран начала игры -->
<div id="start-screen">
<div class="input-container">
<input type="text" id="player1" placeholder="Имя игрока 1">
<input type="text" id="player2" placeholder="Имя игрока 2">
</div>
<button id="start-button">Старт</button>
</div>
<!-- Экран игры -->
<div id="game-screen" class="hidden">
<div id="player-turn" class="player-turn"></div>
<div id="game-board" class="game-board">
<div class="cell" data-index="0"></div>
<div class="cell" data-index="1"></div>
<div class="cell" data-index="2"></div>
<div class="cell" data-index="3"></div>
<div class="cell" data-index="4"></div>
<div class="cell" data-index="5"></div>
<div class="cell" data-index="6"></div>
<div class="cell" data-index="7"></div>
<div class="cell" data-index="8"></div>
</div>
<div id="game-over" class="game-over hidden"></div>
<div class="button-container">
<button id="play-again" class="hidden">Ещё игра</button>
<button id="end-game">Завершить игру</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Теперь я создам проект в GitHub и запушу туда файлы: https://github.com/Yakvenalex/TicTacToeJSGame
![](https://habrastorage.org/getpro/habr/upload_files/0ed/8b4/679/0ed8b46795feb3705922cc6f60f74361.png)
Теперь остается настроить под это дело GitHubPages:
Заходим в настройки.
Кликаем на Pages.
Устанавливаем данные как на скрине ниже.
Ждем пару минут и переходим по созданной ссылке.
![](https://habrastorage.org/getpro/habr/upload_files/c2f/136/995/c2f1369956425471b5d2f49da0ad4c22.png)
В моем случае ссылка на полученный проект имеет такой вид: https://yakvenalex.github.io/TicTacToeJSGame/
Перехожу по ссылке и вижу, что игра работает.
![](https://habrastorage.org/getpro/habr/upload_files/7cb/3f8/4e8/7cb3f84e8c6a8d95de10509e155e299e.png)
Как вы понимаете, на написание этой игры я потратил примерно 2-3 минуты.
Деплой проекта на сервисе Amvera Cloud
Сейчас мы выполним деплой "чужого" проекта с WebSim AI на сервисе Amvera Cloud. Данный сервис предоставляет бесплатное доменное имя и стартовый бюджет в размере 111 рублей, который вы получаете сразу после регистрации. С учетом низкой цены на услуги и того что деньги списываются постепенно, бюджета вам хватит на пару недель активного пользования сервисом.
Прежде чем мы приступим к деплою нам необходимо будет выполнить несколько шагов.
Шаг 1: Выбор и проверка проекта
Для начала выберем приложение. Мне приглянулся проект "Vertical Air Hockey" у вас это может быть любой другой проект с сайта WebSim AI, в том числе и ваш собственный.
![Скриншот 1](https://habrastorage.org/getpro/habr/upload_files/08d/7bb/aa1/08d7bbaa10fb5364705abc7190d123e5.png)
Скачаем приложение и проверим, корректно ли оно работает локально.
![Скриншот 2](https://habrastorage.org/getpro/habr/upload_files/e9c/5f5/61d/e9c5f561d26eaa29e6293a82c8820894.png)
![Скриншот 3](https://habrastorage.org/getpro/habr/upload_files/ec3/12d/592/ec312d592160da7df6ae7420c014e5be.png)
![Приложение корректно работает локально. Приложение корректно работает локально.](https://habrastorage.org/getpro/habr/upload_files/dd5/0a7/eab/dd50a7eab6ecdd938975cc47fbe1f257.png)
Шаг 2: Подготовка файлов
Создадим отдельную директорию для скачанного HTML-файла на локальной машине. Переименуем скачанный HTML в index.html
.
Теперь создадим файл Dockerfile
. Если вы с этим не знакомы, просто повторяйте за мной. Код будет стандартным:
# Используем официальный образ NGINX в качестве базового
FROM nginx:alpine
# Удаляем дефолтный файл конфигурации NGINX
RUN rm /usr/share/nginx/html/index.html
# Копируем наш index.html в папку с HTML файлами NGINX
COPY index.html /usr/share/nginx/html/
# Экспонируем порт 80
EXPOSE 80
# Запускаем NGINX
CMD ["nginx", "-g", "daemon off;"]
Для простоты понимания добавлены комментарии.
Шаг 3: Деплой на Amvera Cloud
Регистрируемся на сайте Amvera Cloud.
Переходим в раздел проектов
-
Создаем первый проект, заполняя следующие поля:
На стартовом экране указываем имя проекта, выбираем "приложение" и подбираем тарифный план. Для проекта подойдет самый первый тарифный план, но я выберу немного мощнее - "Начальный".
![](https://habrastorage.org/getpro/habr/upload_files/7a2/414/67f/7a241467f838f070841a00198427c957.png)
Жмем на "Далее", "Далее" и кликаем на "Завершить".
Переходим в настройки проекта, кликнув по его названию.
![](https://habrastorage.org/getpro/habr/upload_files/e76/733/b7b/e76733b7beccd1034f1232633c701550.png)
Выбираем вкладку "Репозиторий". Нас будет интересовать ссылка на репозиторий GIT. Копируем ее
![](https://habrastorage.org/getpro/habr/upload_files/9a2/bec/665/9a2bec6650a9979ba41a041a82c175c6.png)
Шаг 4: Загрузка файлов в репозиторий
Для загрузки файлов в Amvera Cloud вы можете воспользоваться GIT (для этого его необходимо предварительно установить на ваш локальный компьютер) или использовать физическое перемещение файлов во вкладке "Репозиторий" --> "Загрузить данные".
![](https://habrastorage.org/getpro/habr/upload_files/933/372/26a/93337226a65ebc7efcf3f8126acbc163.png)
Я выполню загрузку через GIT.
Открываем терминал на локальном компьютере папке с index.html
и Dockerfile
и вводим следующие команды:
git init
git remote add amvera https://git.amvera.ru/YOUR_LOGIN/PROJECT_NAME
В моем случае это:
git remote add amvera https://git.amvera.ru/yakvenalex/airhockeyai
git add .
git commit -m "init commit"
git push amvera master
После этого index.html
и Dockerfile
окажутся внутри проекта Amvera Cloud.
![](https://habrastorage.org/getpro/habr/upload_files/153/315/be6/153315be627199d26ac60fea8233a7aa.png)
Шаг 5: Активируем доменное имя
Кликаем на вкладку "Настройки".
Активируем дефолтное доменное имя, меняя положение ползунка (скрин ниже).
![](https://habrastorage.org/getpro/habr/upload_files/076/245/693/076245693d759f049f3f44bb5e547823.png)
После этих простых манипуляций, в течение пары минут, по вашему дефолтному доменному имени будет доступен ваш проект.
В моем случае ссылка: https://airhockeyai-yakvenalex.amvera.io/.
Случайная генерация
Для тех кто совсем не хочет напрягаться - можно воспользоваться рандомной генерацией страниц. Для этого этого достаточно с любого экрана платформы Web Sim AI кликнуть на значок RANDOM:
![](https://habrastorage.org/getpro/habr/upload_files/b0c/193/300/b0c193300472a970c40f71095004e51e.png)
После этого вы получите полноценное веб-приложение.
![Вот такой результат получился у меня. Вот такой результат получился у меня.](https://habrastorage.org/getpro/habr/upload_files/a4c/545/4b6/a4c5454b60edd43e7914418f2153fcdb.png)
Выводы
WebSim AI – это невероятно мощный инструмент, способный значительно ускорить и упростить процесс создания веб-приложений. Он идеально подходит как для новичков, так и для опытных разработчиков. Возможность генерировать код с использованием искусственного интеллекта, сохранять и делиться проектами делает его незаменимым помощником в арсенале веб-разработчика. Если вы еще не пробовали WebSim AI, самое время начать!
Если эта статья была полезной и интересной, пожалуйста, сообщите мне об этом. Оставьте комментарий под статьей, поставьте лайк или подпишитесь на мой телеграм-канал "Легкий путь в Python". Там я публикую эксклюзивный контент, который не выходит на Хабре, и есть сообщество, где можно обсуждать написание кода, проекты и многое другое с единомышленниками.
До скорого!
Комментарии (12)
Pol1mus
28.07.2024 14:24Ставим vscode (всё равно же понадобится для хоть сколько-нибудь серьезной поделки), копилот(любой из бесплатных вариантов, джемини например), просим написать тетрис для веба...
yakvenalex Автор
28.07.2024 14:24Да, вариант рабочий, но он, на выходе, сложнее и дольше. Больше настроек, больше знаний. Как по мне, самое четкое это создать прототип через WebSim и после локально его добивать на своей стороне.
19Zb84
28.07.2024 14:24+1Без своей модели, обученной на конкретном коде, эти все сервисы бесполезны мне кажется.
Время затраченное на проверку и исправление кода будет привышать время, написания с нуля.
Тоже самое, что просить ии посчитат 2+2 или использовать калькулятор.
ИИ умно, а калькулятор надежно.
yakvenalex Автор
28.07.2024 14:24+1Думаю, что в реальной разработке данный сервис хороший инструмент для создания прототипов для заказчика. Я, как Python разработчик, точно буду пользоваться сервисом, например, для простой визуализации апи. Кроме того, сервис сильно вырос после подключения sonet 3.5. Если развивать его не перестанут, то через пару месяцев может произойти прорыв. Имхо
19Zb84
28.07.2024 14:24+3Если для вас это актуально то конечно да, но ваши хотелки не причина "время фронтендерам напрячься"
Не серебрянная пуля. Мне как js разработчику было бы полезнее свою модель сделать, а модули написанные на python переводить с помошью этой модели в wasm модули и писать код питона автоматически.
Это проще сделать чем фронт собрать автоматически.
davidaganov
28.07.2024 14:24+1у chatgpt есть плагин под названием "Grimoire" который по факту выполняет всё тоже самое, но редактировать полученный результат чуть менее удобно. но по факту все эти убийцы фронтэндеров и других специалистов вызывают только смех. нам грозили цмсками, юкозами, тильдами и много чем ещё, но в итоге всё упирается в то, что то, что генерирует конструктор/нейронка это максимум очень и очень сырой прототип, который большинству даже и не нужен, так как это далеко от MVP, что чаще всего требуют заказчики. да, весело набросать хтмлку и джс, но кто это будет переносить на фреймворк, строить удобную для команды и будущего рефакторинга архитектуру, делать отказоустойчивый код, оптимизировать эту кашу в конце концов? вот и выходит, что порой даже самому прототип накидать быстрее чем доверять всё нейросетке за которой потом минимум 70% кода переписать придется. работать в паре с нейросетью идея хорошая, тот же копайлот или codeium вещи бесспорно полезные и ускоряют мою работу минимум на 20-30% в рутинных задачах, но стоит нейросетке дать свободу написания кода как тут же он превращается в нечитаемое дерьмо которое даже в джуновское портфолио вставлять стыдно
alexhott
28.07.2024 14:24Помню разговор на тему создания сайтов лет 15 назад .
Типа мы предлагаем на своей CMS сделать сайт за 10тр, а за вашу фичу + 20тр.Клиент уходит, потом через месяц возвращается довольный - "мне сайт сделали на ххх(типа битрикс, вордпресс и т.п.) за 5т.р." давайте мою фичу на нем за 10тр сделаем?
..ну друг извини на нашей CMS мы ее за 20 предлагали, а на xxx мы меньше чем за 50т.р. не возьмемся.. да и никто не возьмется.
Боюсь представить сколько будет стоить припилить чего-нибудь нестандартное к тому что это чудо нагенерирует.yakvenalex Автор
28.07.2024 14:24Так это чудо генерирует на чистом HTML + CSS + JS) К этому, как раз, нестандартное прилипить не трудно)
Atreides07
28.07.2024 14:24Практически во всех проектах где я работал есть дизайн система с самописными компонентами. Пока напрягаться рано, а вот если эта штука научится нарезать компоненты и/или создавать сайты макеты на базе существующих компонент, то вот тогда можно напрячься. К большому сожалению пока это все чуть больше чем бесполезно если проекты сложнее кретиков ноликов
n0ne
28.07.2024 14:24+1Фронтенд/бэкенд/etc. уже устали напрягаться от каждого чиха. Как калькуляторы не убили математику, так и это всё тоже не убьёт разработчиков.
MagnumMalum
Есть ещё один похожий сервис - https://v0.dev/
Использует shadcnui и React
l_Tungus_l
Он платный)