Фронтенд-дизайнеры напряглись: этот ИИ-инструмент преобразует скриншот страницы сайта в код с помощью 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 в Телеграм
Оригинал статьи на внглийском - здесь.