Архитектура и принцип работы
ScreenCoder — это не просто генератор кода, а сложная система, использующая модульную архитектуру мультиагентного взаимодействия. Процесс преобразования визуального интерфейса в код разбит на несколько этапов: от детекции UI-элементов (UIED) до планирования макета и адаптивной генерации HTML. Это позволяет системе не только копировать внешний вид, но и создавать семантически верную, редактируемую структуру.
Система поддерживает интеграцию с различными LLM-моделями, включая Doubao (по умолчанию), Qwen, GPT и Gemini. Разработчики могут выбирать модель в конфигурационных файлах block_parsor.py и html_generator.py, что обеспечивает гибкость в зависимости от доступных API и требований к качеству генерации.
Новый бенчмарк ScreenBench
Для оценки качества генерации команда выпустила датасет ScreenBench. Это первый специализированный бенчмарк для задач визуального преобразования в веб-код, содержащий 1000 актуальных скриншотов реальных веб-страниц с соответствующим исходным HTML-кодом. Датасет охватывает разнообразные темы и сложные макеты, что позволяет объективно сравнивать новые методы с существующими решениями.
Сравнение с базовыми методами
В ходе качественных тестов ScreenCoder демонстрирует преимущество над базовыми подходами (Baseline). В отличие от простых моделей, ScreenCoder генерирует код, который точнее соответствует визуальному дизайну, сохраняет семантическую целостность и легче поддается ручной доработке разработчиками.
| Характеристика | ScreenCoder | Базовые методы (Baseline) |
|---|---|---|
| Точность визуального соответствия | Высокая (Pixel-perfect) | Средняя/Низкая |
| Семантическая верность кода | Высокая | Часто нарушена |
| Редактируемость | Легкая кастомизация | Сложная поддержка |
| Поддерживаемые модели | Doubao, Qwen, GPT, Gemini | Зависит от реализации |
Как запустить проект
Проект полностью открыт на GitHub. Для локального запуска требуется клонировать репозиторий, создать виртуальное окружение и установить зависимости. Ключевым шагом является настройка API-ключа выбранной модели (например, doubao_api.txt).
Типичный рабочий процесс включает запуск основного скрипта main.py, который последовательно выполняет:
- Детекцию блоков и UI-элементов.
- Генерацию HTML с плейсхолдерами.
- Замену плейсхолдеров на реальные изображения.
- Финальную сборку чистого кода.
Демо-версия доступна на Hugging Face, где пользователи могут протестировать возможности системы без установки локального окружения.
Источник: Github ↗