ScreenCoder: преобразование скриншотов дизайна в чистый, редактируемый HTML/CSS-код 234

ScreenCoder — это открытый инструмент на основе ИИ, который преобразует любые снимки дизайна в структурированный, редактируемый фронтенд-код HTML/CSS. Он использует модульную мультиагентную архитектуру, сочетая визуальное понимание, анализ макета и генерацию кода, выдавая семантически точный код с точным макетом. Пользователи могут легко настраивать структуру интерфейса и стили, обеспечивая плавный переход от макета дизайна к работающему фронтенд-интерфейсу. Инструмент подходит для быстрого прототипирования и проектов, требующих попиксельного воспроизведения, что значительно повышает эффективность разработки.

Основные возможности ScreenCoder

• Преобразование скриншота во фронтенд-код: ScreenCoder поддерживает преобразование UI-скриншотов или макетов дизайна в хорошо структурированный HTML и CSS-код одним нажатием.

• Высококачественное воспроизведение: код, сгенерированный ScreenCoder, визуально и семантически максимально приближен к исходному дизайну, обеспечивая попиксельное выравнивание и полную функциональность.

• Гибкость и редактируемость: пользователи могут свободно изменять сгенерированную структуру макета и свойства стилей для удобства дальнейшей разработки и настройки.

• Интеграция с несколькими моделями: совместимость с множеством популярных больших моделей, таких как Doubao, Qwen, GPT, Gemini и др. Пользователи могут выбирать механизм генерации в зависимости от своих потребностей.

• Готовый к использованию вывод: сгенерированный код имеет прод-класса качество и может быть напрямую использован в проектах, поддерживая быстрое создание прототипов или полноценных фронтенд-интерфейсов.

Техническая архитектура ScreenCoder

• Основная технология ScreenCoder разбивает сложную задачу преобразования UI в код на три специализированные подзадачи, каждая из которых выполняется отдельным агентом:

• Агент привязки (Grounding Agent): использует визуально-языковую модель (VLM) для обнаружения и разметки ключевых компонентов в UI-интерфейсе.

• Агент планирования (Planning Agent): в соответствии с лучшими практиками фронтенд-разработки организует эти компоненты в иерархическое дерево макета.

• Агент генерации (Generation Agent): на основе дерева макета и пользовательских инструкций адаптивно генерирует высококачественный код.

Сценарии применения ScreenCoder

• Ускорение фронтенд-разработки: быстрое преобразование скриншотов UI-дизайна в высококачественный HTML/CSS-код, сокращение цикла фронтенд-разработки.

• Взаимодействие дизайна и разработки: прямое преобразование скриншотов дизайна в готовый к использованию код, обеспечение бесшовного сотрудничества между командами дизайна и разработки.

• Быстрое прототипирование: возможность мгновенного преобразования концепций дизайна в интерактивные фронтенд-прототипы, ускорение ранней валидации продуктового дизайна и пользовательского тестирования.

• Образование и обучение: в качестве образовательного инструмента помогает студентам и начинающим разработчикам понять связь между UI-дизайном и фронтенд-кодом.

• Маленькие команды и стартапы: предоставляет эффективное решение для генерации кода командам с ограниченными ресурсами и стартапам.

Как пользоваться ScreenCoder

Установка и развёртывание

1. Клонирование репозитория: выполните следующую команду в терминале, чтобы клонировать проект ScreenCoder локально:

git clone https://github.com/leigest519/ScreenCoder.git
cd ScreenCoder

2. Создание виртуального окружения: чтобы избежать конфликтов зависимостей, рекомендуется создать виртуальное окружение Python:

python3 -m venv .venv
source .venv/bin/activate

Пользователям Windows следует использовать: source .venv\Scripts\activate.

3. Установка зависимостей: установите необходимые для проекта библиотеки Python:

pip install -r requirements.txt

4. Настройка модели и API-ключей:

• В корневой директории проекта создайте простые текстовые файлы, соответствующие выбранной модели (например, doubao_api.txt, qwen_api.txt, gpt_api.txt, gemini_api.txt), и вставьте в них API-ключи.

• Укажите нужную модель в block_parsor.py и html_generator.py. Поддерживаемые варианты: Doubao (по умолчанию), Qwen, GPT, Gemini.

Использование

1. Начальная генерация с использованием заглушек:

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

python block_parsor.py

Генерация начального HTML с заглушками: выполните следующую команду, чтобы сгенерировать начальный HTML-код с заглушками (например, серыми блоками изображений):

python html_generator.py

2. Генерация финального HTML-кода:

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

python image_box_detection.py

Запуск UIED для обнаружения конкретных UI-элементов: выполните следующую команду, чтобы обнаружить конкретные UI-элементы на скриншоте:

python UIED/run_single.py

Сопоставление заглушек и реальных элементов: выполните следующую команду, чтобы сопоставить заглушки с реальными UI-элементами:

python mapping.py

Замена изображений-заглушек: выполните следующую команду, чтобы заменить заглушки реальными вырезанными изображениями:

python image_replacer.py

3. Простой запуск: если вы не хотите выполнять шаги по отдельности, можно напрямую выполнить следующую команду для генерации финального HTML-кода одним действием:

python main.py

Выходные файлы сохраняются в директории output/ и включают index.html, а также соответствующие ресурсы css/ и images/.