We create sites using photos through a neural network | HTML, CSS/TAILWINDCSS, FONTAWESOME, JS | Figma model

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

Всем привет!
В данной теме я покажу создание сайтов через конструктор приложений на сайте blаckbоx.аi
Статья разделена на 2 части.

Важно! Сайт схожим на свой оригинал в 100% не будет. Что бы сделать его еще более похожим - надо будет строить промпты.

Часть 1
Создаем скелет сайта | Верстка

Заходим на сайт blackbox.ai
Для использования нейросети регистрируемся.​

Выбираем удобный способ входа

После того как зашли, нажимаем на 3 полоски слева сверху.​

Меню

В выпавшем окне нажимаем на вкладку Image To App.
Дальше мы видим строку ввода текста, но она нам щас не нужна.

Теперь нам нужен скрин сайта.
Я использую для этого программу LightShot.
Создаю скрин, сохраняю его в удобную для себя папку.
Теперь грузим скрин на сайт. Нажимаем на кнопку Upload Files.​

Кнопка загрузки медиа

Заходим в папку в которой у вас лежал скрин и загружаем его. Начинается процесс создания сайта.
В своем примере я взял главную страницу форума.
Получилось не совсем похоже и без кнопок, один лишь текст.​

Итог генерации

Переходим ко второй части.

Часть 2
Доделываем наш сайт промптами.

И так. Скелет мы сделали. Но сайт ведь не так похож, верно? По-этому тыкаем на кнопку Select and update.​

Кнопка изменения элемента

Используя данную кнопку мы входим в режим изменения. Кликаем на любой элемент что нам надо изменить.​

Изменяем элемент

Теперь сюда вписываем наш промпт, например изменяем эту кнопку цветом более потемнее.
Начинается новая генерация.
И вот, кнопка изменилась! Так можно с абсолютно любым элементом и фоном.​

Измененная кнопка

Теперь на этой же странице мы можем начать писать скрипты и другие промпты, используя режим изменения или строку снизу.​

Строка для промптов снизу

Попросил написать маленький скрипт который будет высвечивать небольшую плашку темно-зеленого цвета. Как видим, все работает!​

Работа скрипта

Что-бы посмотреть код сайта, нам надо нажать на эту кнопку:​

Кнопка для просмотра кода сайта

Первая кнопка с иконкой монитора это как выглядит ваш сайт в десктоп версии ( для компьютера ).
Вторая кнопка с иконкой телефона это как выглядит ваш сайт с телефонной версии.
Третья кнопка с иконкой треугольных скобок и слеша это просмотр кода.
Четвертая кнопка с иконкой скачивания это скачивание сайта в формате html, файл будет называться index.html.

При нажатии на версии у вас будет произведен откат до нажатой вами версии.​

Версии

Вот и все! Мы разобрались как создавать сайты через конструктор приложений.
Да, и кстати, нейросеть бесплатная, но без выбора моделей. Что бы выбрать модель нейросети, надо заплатить.
Я уже так создавал сайты, и скажу вам, результаты были неплохие!

Надеюсь данная тема была очень полезна кому то. Если хотите что нибудь добавить/предложить, то напишите в комментариях. Все прочитаю и на все отвечу.​