Фронтенд-дизайнеры напряглись: этот ИИ-инструмент преобразует скриншот страницы сайта в код с помощью GPT-4 Vision
Выход GPT-4 Vision от OpenAI вызвал очень много потрясающих примеров использования в интернете. Но один инструмент привлек мое внимание своими невероятными возможностями - с помощью GPT-4 Vision можно генерировать исходный код из одного скриншота страницы сайта или блога.
Спонсор статьи - 👨💻 Разработка Телеграм-ботов любой сложности (от 5000₽)
Этот инструмент, который называется screenshot-to-code, является настоящей находкой в мире веб-программирования.
Что такое GPT-4 Vision?
Для тех, кто не знает, GPT-4 Vision представляет собой огромный скачок вперед в способности ИИ понимать и описывать изображения. Честно говоря, его навыки понимания изображений поражают воображение. Он может превратить фотографию двух милых щенков в описательный абзац.
В данном примере я просто загрузил изображение щенков в ChatGPT и попросил чатбота описать его. Последняя версия ChatGPT достаточно умна, чтобы автоматически переключиться на модель GPT-4 Vision для выполнения этой задачи.
Теперь разработчики используют потенциал этой технологии для преобразования компонентов пользовательского интерфейса в полноценный код.
Что такое screenshot-to-code?
На мой взгляд, screenshot-to-code - это самая впечатляющая демонстрация возможностей GPT-4 Vision на сегодняшний день. С помощью всего лишь одного скриншота это веб-приложение может создать полноценный HTML и Tailwind CSS для воссоздания дизайна веб-сайтов и приложений. Инструмент также способен генерировать похожие изображения с помощью Dall-E 3.
Как разработчика, меня этот инструмент просто поразил. Он автоматизирует то, что раньше было трудоемким ручным процессом, в несколько кликов.
Вот пример скриншота страницы Тейлор Свифт в Instagram:
За считанные секунды screenshot-to-code воссоздаст дизайн страницы с потрясающей точностью. Это невероятный ресурс для создания макетов дизайна в процессе разработки.
Попробуйте сами
Screenshot-to-code можно использовать совершенно бесплатно, если у вас есть ключ OpenAI. Перейдите на этот сайт, нажмите на значок настроек, добавьте свой ключ OpenAI и нажмите кнопку сохранения.
Я сам попробовал этот инструмент на скриншоте страницы статьи Zeniteq.
Вот конечный результат, полученный с помощью инструмента.
Удалось ли на 100% скопировать скриншот? Не совсем. Но результаты были довольно близки. Вы можете внести дополнительные изменения в код, введя запрос для ИИ в выделенном на скриншоте разделе.
Вы также можете вручную править исходный код, нажав на тумблер "code" в правом верхнем углу.
Нажав на кнопку загрузки, вы можете скачать файл index.html со сгенерированным HTML и CSS-кодом Tailwind. Вот как выглядит файл index.html в приведенном выше примере.
На мой взгляд, он выглядит вполне прилично.
Преимущества
Использование screenshot-to-code имеет ряд преимуществ.
- Может сэкономить программистам значительное количество времени. Автоматизируя задачу генерации кода, screenshot-to-code позволяет освободить программистов, чтобы они могли сосредоточиться на других задачах, таких как разработка и тестирование программного обеспечения.
- Поможет сэкономить деньги. Шаблоны сайтов обычно стоят от 50 до 200 долларов. Инструмент поможет сэкономить вам значительную сумму денег, особенно если вам нужно создать несколько сайтов.
- Очень прост в использовании. Инструменты screenshot-to-code обычно очень просты в использовании. Просто загрузите скриншот сайта, и инструмент сгенерирует для вас код.
Недостатки
- Он может быть неточным. Инструмент находится на ранних стадиях разработки, поэтому он не всегда точен. Инструмент может генерировать неправильный код или не генерировать весь необходимый код.
- Инструмент не заменяет программиста. Он может быть использован для генерации кода, но программист должен убедиться, что код корректен и эффективен.
В целом, я впечатлен таким вариантом использования GPT-4 Vision. Даже на ранних стадиях развития инструмента он поражает своими возможностями. И я думаю, что дальше будет только лучше. Кто знает, насколько хорошо он будет работать всего через несколько месяцев?
Меня также интересует возможность замены фронтенд-дизайнеров. Хотя я не думаю, что это произойдет в ближайшее время, я считаю, что это дело времени.
Еще больше полезностей про нейросети и анонсы статей - в моем хобби-блоге про нейросети в Телеграм.
- Подборка: Телеграм-боты для создания картинок. ТОП-10 ботов
- Подборка ботов ChatGPT в Телеграм
Оригинал статьи на внглийском - здесь.
Шляпа полная, по крайней мере сейчас, вся эта генерация кода (верстки). Такое генерит что мама родная. Тут что бы банально подогнать инструкции под бизнес задачу банальную надо неделю инструкции сочинять на трёх листах. Какая верстка, как ее потом натягивать на бекэнд, как править потом. Выдыхайте фронтэндеры.
Не поверите, но html-версии страниц штампует вполне хорошо. Для серьёзных проектов не особо подойдёт, но вот для неправильных задач - вполне.
С фронтенд-дизайнерами рановато прощаться. Нейронки иногда могут нагенерировать такого бреда с техническими ошибками в коде, что в валидаторах кода задолбетесь исправлять.
Это да. Но в прошлом году даже тяжело было представить, что появится такая техническая возможность.
Если сделать второго ИИ-агента, который будет проверять код в валидаторах и отправлять первому на доработку столько раз, сколько нужно, то вам будет приходить вполне достойный результат.
https://vc.ru/tag/autogen
Могу сказать точно. Именно дизайнеров GPT-4 Vision не заменит, потому что эта бездушная машина только копирует, но на выходе получается шаблонный кусок кода, который далёк от профессионального UI\UX Design. То есть на выходе получится низкосортная вёрстка новичка.
Ну и дальше:
- Вёрстка свёрстана адаптивной ?
- Вёрстка кросс браузерная ?
- Мелкие правки в вёрстку делает GPT-4 или программист ?
- Кто проверяет валидность html кода?
- Как на счёт SEO, мета-тегов, OpenGraph и т. д. ?
- Картинки, ссылки, цвета, шрифты кто редактирует ?
Ну и Frontend Developer, Дизайнер и Верстальщик - это 3 разных профессии.
GPT-4 может заменить только верстальщиков. Прибавьте ко всему прочему, что сейчас многие компании отказываются от сайтов в пользу web-приложений, потому что они в 30 раз быстрее и не требуют перезагрузки страницы. Свёрстанный сайт на GPT-4 на фоне web-приложений, это как целый кузов от автомобиля на фоне целого автомобиля Феррари. Толку от свёрстанного не до макета html. Чтобы отредактировать, нале лезть в код. Ссылки по клику перезагружают весь сайт, нет никакого динамического контента, подгруздки данных из баз данных или API.
И это я ещё молчу про технический долг. Так что это не замена. Вот когда статика перестанет быть основной фишкой этого инструмента, тогда есть смысл что-то обсуждать 😁😂🤣
Никто не утверждает, что это замена верстальщиков или других специалистов: "Инструмент не заменяет программиста. Он может быть использован для генерации кода, но программист должен убедиться, что код корректен и эффективен".
Это скорее как ассистент для уменьшения монотонной работы.