1. Предыстория

В современной быстро развивающейся среде разработки программного обеспечения,Совместная работа дизайнеров и разработчиков особенно важна. Однако,Понимание и точная реализация цели проекта часто требует много времени и затрат на общение. с этой целью,Открытый исходный код Поразительный проект появился в сообществе——screenshot-to-code,Он использует технологию искусственного интеллекта AI (алгоритм машинного обучения и технологию визуального анализа).,Автоматически конвертировать снимки экрана во внешний код,Открывает новые возможности для сотрудничества между дизайнерами и разработчиками.

Для фронтенд-разработчиков это означает, что они могут сэкономить много времени на ручное кодирование и быстро перейти от прототипов или эскизов к фактическому этапу разработки. Например, дизайнеры могут напрямую загружать скриншоты спроектированного интерфейса, а затем получать предварительный код, что значительно ускоряет переход от дизайна к разработке. Кроме того, этот проект также очень подходит для образовательных целей, помогая новичкам понять связь между дизайном пользовательского интерфейса и реализацией кода.

2. Представление проекта

screenshot-to-codeявляется инновационным Открытый исходный кодинструмент,Он может автоматически преобразовывать снимки экрана в проектных чертежах во фрагменты кода.,В основном используется для разработки веб-страниц и интерфейсов приложений. Загрузив скриншот с макетом дизайна,Инструмент может интеллектуально анализировать различные элементы интерфейса.,Такие как текст, изображения, кнопки, таблицы, навигационная панель и т. Д.,И исходя из положения, размера, цвета и иерархической связи этих элементов.,Точно генерировать хорошо структурированный и простой в обслуживании интерфейсный код.,Включая HTML, CSS,и код для интерфейсных фреймворков, таких как React или Vue.,Удовлетворение потребностей различных проектов.

Адрес проекта:

https://github.com/abi/screenshot-to-code

Поддерживаемые стеки технологий включают в себя:

• HTML + Tailwind
• React + Tailwind
• Vue + Tailwind
• Bootstrap
• Ionic + Tailwind
• SVG

3. Технические принципы

первый,Давайте узнаемscreenshot-to-codeКак работает проект。Этот проект использует преимуществаAIтехнология искусственного интеллекта。Когда пользователь загружает скриншот,Система сначала проанализирует этот скриншот,Определите различные элементы пользовательского интерфейса внутри него.,Например, кнопки, текстовые поля, изображения и т. д. затем,Он преобразует эти визуальные элементы в соответствующие теги HTML и стили CSS. Если пользователь выбирает React или Vue,Он также автоматически сгенерирует соответствующий код компонента.

Конкретно,screenshot-to-codeЯдро основано наизображение Глубокое обучение для признания Модель。Должен Модельобученный,Умение понимать и интерпретировать элементы проектных чертежей.,Например, макет、цвет、Размер и тип шрифта、Маржа и т. д. Принцип работы Модели примерно следующий:

• изображениепредварительная обработка：первый Стандартизируйте входные скриншоты,Включая изменение размера, обрезку, оттенки серого и т. д.,Для облегчения анализа по Модели.
• Извлечение признаков：Модельчерез сверточную нейронную сеть（CNN）извлекатьизображениеключевые особенности в,например, форма、цвет、Текстура и т. д.
• Идентификация элемента: на основе извлеченных признаков,Модель идентифицирует и классифицирует элементы интерфейса на изображениях.,как текст、изображение、кнопкаждать。
• Анализ макета: модель дополнительно анализирует положение между элементами.、размер、цвети иерархические отношения,Создайте полный макет интерфейса.
• Генерация кода: окончательная,Модель в соответствии с макетом интерфейса и атрибутами элемента.,Сгенерируйте соответствующий код HTML, CSS и интерфейсной платформы.

4. Этапы использования

Во-первых, вам необходимо иметь ключ API OpenAI с доступом к GPT-4 Vision.

в настоящий моментscreenshot-to-codeподдерживаетсяAIМодельиметь：

• GPT-4 Turbo (Apr 2024) - Best model
• GPT-4 Vision (Nov 2023) - Good model that's better than GPT-4 Turbo on some inputs
• Claude 3 Sonnet - Faster, and on par or better than GPT-4 vision for many inputs
• DALL-E 3 for image generation

Во-вторых, разверните серверную часть и серверную часть соответственно,

Перейдите во внутренний каталог, создайте файл .env и установите ключ API OpenAI, затем используйте Poetry для установки зависимостей и запуска среды.

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001

Затем запустите внешний интерфейс в каталоге внешнего интерфейса, выполните команду Yarn для установки зависимостей, а затем запустите сервер разработки Yarn dev.

cd frontend
yarn
yarn dev

Откройте браузер, чтобы посетить http://localhost:5173 Используйте приложение.

Если вы хотите выполнить развертывание с помощью Docker, просто настройте переменные среды в корневом каталоге и запишите ключ API в файл .env, а затем запустите команду docker-compose.

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

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

Чтобы узнать о конкретных эффектах отображения, заинтересованные читатели могут обратиться к официальному демонстрационному видео.

5. Резюме и перспективы

screenshot-to-codeПреимущества проекта,Самое очевидное – это повышение эффективности.,Это не только повышает эффективность развития,Сократите затраты на связь,Это также снижает требования к уровню квалификации дизайнеров и разработчиков.

В традиционном процессе разработки преобразование проектов в код — трудоемкая и повторяющаяся задача, а данный проект значительно сокращает этот процесс за счет автоматизации. Кроме того, это помогает уменьшить количество человеческих ошибок и повышает точность и согласованность вашего кода.

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

Хотя есть некоторые проблемы,ноscreenshot-to-codeПотенциал проекта огромный。Поскольку технологии продолжают развиваться,Мы можем ожидать, что его точность и применимость будут продолжать улучшаться. будущее,Благодаря постоянному развитию и оптимизации технологий,мы с нетерпением ждемscreenshot-to-codeМожет применяться и продвигаться в большем количестве областей.,Привнесение большего удобства и инноваций в разработку программного обеспечения.

Если статья вам полезна, подписывайтесь, ставьте лайки, смотрите и делитесь ею с друзьями!