В прошлом видео я рассказывал о том, как использовать новую модель GPT-4o от OpenAI для создания веб-сайта по одному скриншоту.
Всё там хорошо, но есть пара недостатков.
Первое, сайт ChatGPT не доступен для пользователя из России, без использования дополнительных сервисов.
Второе, нужно проходить регистрацию.
Я нашел один интересный сервис, который позволяет автоматически получать код HTML и CSS для любого скриншота в формате jpeg или png.
Использовать его предельно просто.
Вы загружаете изображение со скриншотом HTML-страницы или какой-то отдельный фрагмент.
И сразу начинается его распознавание и создание HTML и CSS кода.
Давайте рассмотрим на одном из примеров — это форма подписки, второй пример в нижней части страницы.
Я увеличил скорость генерации, чтобы не затягивать видео.
В результате мы получаем код HTML и CSS, а также можем посмотреть как это будет выглядеть в браузере.
Код мы можем скопировать или скачать к себе на компьютер в виде текстового файла.
Вот я открыл файл уже в текстовом редакторе.
А так, будет отображаться наш код в браузере.
Есть один недостаток у данного сервиса, он не может обрабатывать большие страницы.
Возникает ошибка.
Но вы всегда можете разбить страницу на части и получить HTML и CSS код для каждой из них.
У меня для примера есть готовый скриншот страницы.
Я разбил его на две части: основная часть с верхним меню и дополнительная, где выводятся посты из блога и футер.
И мы в начале получаем HTML и CSS код для основной части, а затем для дополнительной.
После чего их нужно объединить.
Для этого вам потребуются знания HTML и CSS.
И вот что у меня в результате получилось.
Мы получили прототип HTML-страниы, который можем использовать для дальнейшей разработки.
Вы можете использовать данный инструмент для сокращения времени на создание сайтов.
Не забудьте подписаться на наш канал и поставить лайк, чтобы не пропустить новые полезные видео!
Всем удачи и до встречи в следующем видео!