WebSim AI: Бесплатный ИИ-помощник для быстрой веб-разработки – время фронтендерам напрячься

Привет, Хабр! Наткнулся на интересный и, как по мне, революционный проект WebSim AI. Покопался в нем несколько дней и сейчас, как вы уже поняли, решил с вами поделиться информацией о нем.

WebSim AI

Проект WebSim AI представляет собой мощный инструмент для создания веб-страниц с минимальными усилиями, что может значительно ускорить процесс разработки как для новичков, так и для опытных специалистов.

Общий принцип работы

WebSim AI – это своего рода виртуальный интернет, где вы можете использовать модели искусственного интеллекта, чтобы создавать веб-приложения, игры и прочие проекты, основанные на JS.

На данный момент доступны следующие модели для генерации веб приложений (HTML + CSS + JS):

• Claude 3.5 Sonnet (самая новая модель, которая используется по умолчанию)

• GPT-4o (только добавили, пока работает нестабильно)

• Haiku

• Sonnet 3

• Opus

То есть, происходит ровно следующее:

1. Вы генерируете промт (запрос) одним из трех способов (подробнее ниже).

2. Промт отправляется в выбранную нейронку.

3. Нейронка генерирует и возвращает готовую страницу с HTML + CSS + JS (если требуется для конкретного проекта).

Для тех, кто понимает, что такое JS, сейчас должен был произойти взрыв мозга. На чистом JS можно создавать полноценные веб-приложения, игры, динамические страницы, 3D-графику и прочее.

Под «виртуальный интернет» подразумевается общий формат платформы. После авторизации вас встретит некий внутренний браузер, и вы, как бы, не создаете новые страницы и не пишете в формате чата запросы нейронке (как в ChatGPT), а ходите по внутреннему интернету.

Благодаря этому подходу генерируются, как бы, отдельные страницы. С этого вытекает формат для создания промтов (запросов нейронке).

Варианты ввода промтов

Все промты вводятся в адресной строке внутреннего браузера. Вариантов для ввода промтов всего три:

• Естественный язык

  Пример: «Одностраничный сайт-визитка для Python разработчика уровня сеньор. Сайт на русском языке с динамическими блоками. Выбери черно-белые тона. Добавь стиль».

  

  

  

  Далее можно добавлять уточняющие промты. К примеру, попросим добавить на сайт логотип 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, чтобы им можно было поделиться, необходимо:

1. Добавить проект в закладки.

2. Дать проекту название.

3. Установить ползунок на «Опубликовать».

4. Скопировать ссылку.

В моем случае получилась следующая ссылка: https://websim.ai/@yakvenalex/python-proger-secret-1234

Выполню переход в проект в режиме инкогнито по скопированной ссылке.

Кстати, с каталогом таких созданных и опубликованных проектов вы можете ознакомиться сразу после входа в WebSim AI.

И там есть, по-настоящему, сумасшедшие проекты, которые взрывают мозг. Кстати, открыв «чужой» проект, можно посмотреть на промты, которые использовал пользователь для создания проекта.

Сохранение исходников кода для деплоя

В данном формате все достаточно просто, и я вам покажу, на конкретном примере, как я создал игру «Крестики-нолики», после скачаем проект и опубликуем его на GitHubPages (бесплатно).

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

Для этого необходимо нажать на 3 точки в правом верхнем углу виртуального браузера и нажать на «Download».

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

Или разместить этот код удаленно.

Второй вариант сохранения кода – использование специальных плагинов.

Плагины, по сути, это такие же проекты других пользователей, которые вы можете использовать «поверх» других проектов (своих или проектов других пользователей).

Прекрасным примером такого плагина выступает проект пользователя c15r с названием ide. Данный плагин добавляет полноценную панель разработчика в виртуальный браузер проекта WebSim AI.

Для использования этого плагина вам достаточно в адресную строку браузера (настоящего браузера, не виртуального) ввести ?plugin=@c15r/ide.

Было: https://websim.ai/c/qAth9IGw5mzk5PY0Z

Стало: https://websim.ai/c/qAth9IGw5mzk5PY0Z?plugin=@c15r/ide

После этого на странице появится 2 кнопки:

Благодаря данному плагину вы сможете не только удобно копировать код, но и править его в режиме реального времени. Очень полезная штука для фронтенд-разработчиков.

Создадим игру «Крестики-нолики»

Ниже я приведу последовательно промты, которые я использовал для создания игры.

Промт 1

Игра крестики-нолики. На стартовом экране вводим имя игрока 1 и игрока 2, после нажимаем на "Старт". Крестики окрашены красным, а нолики окрашены синим. Победа, если 3 крестика или 3 нолика по горизонтали, по вертикали или по диагонали. Стандартные крестики-нолики. Добавь красивую графику. Добавь кнопку завершить игру (возвращать должно на экран ввода имени игроков).

Промт 2

1. Кнопку «Старт» и «Завершить» размести по центру.

2. После игры (победа или ничья) добавь кнопку «ещё игра».

Промт 3

Сделай, чтобы кнопки "Ещё игра" и "Завершить игру", когда та появлялась, были расположены в одной строке, а не друг под другом как сейчас.

После этого я получил полноценную игру!

Теперь сохраним исходник кода созданной игры.

Отлично, исходник сохранен.

Теперь, для красоты, я разобью игру на разные файлы:

• 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

Теперь остается настроить под это дело GitHubPages:

1. Заходим в настройки.

2. Кликаем на Pages.

3. Устанавливаем данные как на скрине ниже.

4. Ждем пару минут и переходим по созданной ссылке.

В моем случае ссылка на полученный проект имеет такой вид: https://yakvenalex.github.io/TicTacToeJSGame/

Перехожу по ссылке и вижу, что игра работает.

Как вы понимаете, на написание этой игры я потратил примерно 2-3 минуты.

Деплой проекта на сервисе Amvera Cloud

Сейчас мы выполним деплой «чужого» проекта с WebSim AI на сервисе Amvera Cloud. Данный сервис предоставляет бесплатное доменное имя и стартовый бюджет в размере 111 рублей, который вы получаете сразу после регистрации. С учетом низкой цены на услуги и того что деньги списываются постепенно, бюджета вам хватит на пару недель активного пользования сервисом.

Прежде чем мы приступим к деплою нам необходимо будет выполнить несколько шагов.

Шаг 1: Выбор и проверка проекта

Для начала выберем приложение. Мне приглянулся проект «Vertical Air Hockey» у вас это может быть любой другой проект с сайта WebSim AI, в том числе и ваш собственный.

Скачаем приложение и проверим, корректно ли оно работает локально.

Шаг 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.

• Переходим в раздел проектов

• Создаем первый проект, заполняя следующие поля:

  • На стартовом экране указываем имя проекта, выбираем «приложение» и подбираем тарифный план. Для проекта подойдет самый первый тарифный план, но я выберу немного мощнее — «Начальный».

• Жмем на «Далее», «Далее» и кликаем на «Завершить».

• Переходим в настройки проекта, кликнув по его названию.

• Выбираем вкладку «Репозиторий». Нас будет интересовать ссылка на репозиторий GIT. Копируем ее

Шаг 4: Загрузка файлов в репозиторий

Для загрузки файлов в Amvera Cloud вы можете воспользоваться GIT (для этого его необходимо предварительно установить на ваш локальный компьютер) или использовать физическое перемещение файлов во вкладке «Репозиторий» —> «Загрузить данные».

Я выполню загрузку через 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.

Шаг 5: Активируем доменное имя

1. Кликаем на вкладку «Настройки».

2. Активируем дефолтное доменное имя, меняя положение ползунка (скрин ниже).

После этих простых манипуляций, в течение пары минут, по вашему дефолтному доменному имени будет доступен ваш проект.

В моем случае ссылка: https://airhockeyai-yakvenalex.amvera.io/.

Случайная генерация

Для тех кто совсем не хочет напрягаться — можно воспользоваться рандомной генерацией страниц. Для этого этого достаточно с любого экрана платформы Web Sim AI кликнуть на значок RANDOM:

После этого вы получите полноценное веб-приложение.

Выводы

WebSim AI – это невероятно мощный инструмент, способный значительно ускорить и упростить процесс создания веб-приложений. Он идеально подходит как для новичков, так и для опытных разработчиков. Возможность генерировать код с использованием искусственного интеллекта, сохранять и делиться проектами делает его незаменимым помощником в арсенале веб-разработчика. Если вы еще не пробовали WebSim AI, самое время начать!

Если эта статья была полезной и интересной, пожалуйста, сообщите мне об этом. Оставьте комментарий под статьей, поставьте лайк или подпишитесь на мой телеграм-канал «Легкий путь в Python«. Там я публикую эксклюзивный контент, который не выходит на Хабре, и есть сообщество, где можно обсуждать написание кода, проекты и многое другое с единомышленниками.

До скорого!