Создайте Веб-Сайт за Секунды: Нейронка GPT-4o Генерирует Код по Скриншоту!



В этом видео я покажу уникальную возможность создать сайт по одному скриншоту!

Для этого я буду использовать возможности новой модели GPT-4o от OpenAI.

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

GPT-4o обладает высокой скоростью реакции на аудио в разговоре, среднее время ответа составляет 320 миллисекунд, что сопоставимо с человеческим временем реакции.

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

Модель доступна для разработчиков через API и предлагает значительное улучшение производительности и доступности по сравнению с предыдущими версиями.

И её вы можете использовать бесплатно.

У меня уже есть скриншот сайта — это один из шаблонов с сайта paw.websitelayout.net

Теперь открываем новый чат и загружаем наш скриншот сайта.

И пишем такой текст запроса (промт): Написать html код страницы на основе изображения.

Нам начинает выводиться html код страницы.

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

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

И далее просим вывести код для CSS-файла.

Затем копируем код в два файла html и CSS.

Я изменил название CSS-файла на mystyles.css и исправил строку в html-файле.

Сохраняем их и загружаем на сервер.

И видим такую страницу https://sitebiznes.ru/page/mytestpage/mypage.html

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

И меню имеет другой вид.

Теперь мы можем самостоятельно доработать код нашей страницы.

Я добавил несколько изображений из оригинального сайта.

Вот что у меня получилось.

Понятно, что модель GPT-4o от OpenAI не сделает всё за вас, но поможет существенно сократить время на разработку.

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

Не забудьте подписаться на наш канал.

Спасибо за просмотр, и до новых встреч!

Оставьте комментарий