Design2Code: Насколько мы далеки от автоматизации фронтенд-инженерии?

Design2Code: How Far Are We From Automating Front-End Engineering?

March 5, 2024

Авторы: Chenglei Si, Yanzhe Zhang, Zhengyuan Yang, Ruibo Liu, Diyi Yang

cs.AI

Аннотация

Генеративное искусственное интеллекта в последние годы сделало быстрые прорывы, достигнув беспрецедентных возможностей в мультимодальном понимании и генерации кода. Это может способствовать новой парадигме разработки фронт-энда, в рамках которой мультимодальные LLM могут непосредственно преобразовывать визуальные дизайны в кодовые реализации. В данной работе мы формализуем это как задачу Design2Code и проводим комплексное бенчмаркинг. Конкретно, мы вручную составляем бенчмарк из 484 разнообразных веб-страниц в реальном мире в качестве тестовых случаев и разрабатываем набор автоматических метрик оценки, чтобы оценить, насколько хорошо текущие мультимодальные LLM могут генерировать кодовые реализации, которые непосредственно отображаются на заданных эталонных веб-страницах, учитывая скриншоты как входные данные. Мы также дополняем автоматические метрики комплексными оценками человека. Мы разрабатываем набор мультимодальных методов подсказок и демонстрируем их эффективность на моделях GPT-4V и Gemini Pro Vision. Мы также донастраиваем открытую модель Design2Code-18B, которая успешно соответствует производительности Gemini Pro Vision. Как человеческая оценка, так и автоматические метрики показывают, что GPT-4V лучше всего справляется с этой задачей по сравнению с другими моделями. Более того, аннотаторы считают, что сгенерированные веб-страницы GPT-4V могут заменить исходные эталонные веб-страницы в 49% случаев по внешнему виду и содержанию; и, возможно, удивительно, в 64% случаев сгенерированные веб-страницы GPT-4V считаются лучше исходных эталонных веб-страниц. Наши детальные метрики показывают, что открытые модели в основном отстают в воспроизведении визуальных элементов с входных веб-страниц и в генерации правильных макетов, в то время как аспекты, такие как текстовое содержание и цветовая гамма, могут значительно улучшиться при должном донастройке.

English

Generative AI has made rapid advancements in recent years, achieving unprecedented capabilities in multimodal understanding and code generation. This can enable a new paradigm of front-end development, in which multimodal LLMs might directly convert visual designs into code implementations. In this work, we formalize this as a Design2Code task and conduct comprehensive benchmarking. Specifically, we manually curate a benchmark of 484 diverse real-world webpages as test cases and develop a set of automatic evaluation metrics to assess how well current multimodal LLMs can generate the code implementations that directly render into the given reference webpages, given the screenshots as input. We also complement automatic metrics with comprehensive human evaluations. We develop a suite of multimodal prompting methods and show their effectiveness on GPT-4V and Gemini Pro Vision. We further finetune an open-source Design2Code-18B model that successfully matches the performance of Gemini Pro Vision. Both human evaluation and automatic metrics show that GPT-4V performs the best on this task compared to other models. Moreover, annotators think GPT-4V generated webpages can replace the original reference webpages in 49% of cases in terms of visual appearance and content; and perhaps surprisingly, in 64% of cases GPT-4V generated webpages are considered better than the original reference webpages. Our fine-grained break-down metrics indicate that open-source models mostly lag in recalling visual elements from the input webpages and in generating correct layout designs, while aspects like text content and coloring can be drastically improved with proper finetuning.