FronTalk: 다중 모달 피드백을 활용한 대화형 코드 생성으로 프론트엔드 개발을 위한 벤치마크

FronTalk: Benchmarking Front-End Development as Conversational Code Generation with Multi-Modal Feedback

본 논문에서는 FronTalk을 소개합니다. FronTalk은 프론트엔드 코드 생성을 위한 벤치마크이며, 독특한 상호작용 방식을 연구하는 데 중점을 둡니다. 즉, 다중 모달 피드백을 활용한 대화형 코드 생성입니다. 프론트엔드 개발에서 스케치, 목업, 주석이 달린 화면 이미지와 같은 시각적 요소는 디자인 의도를 전달하는 데 필수적이지만, 이러한 요소가 다단계 코드 생성에 미치는 영향은 아직 충분히 연구되지 않았습니다. 이러한 격차를 해소하기 위해, 우리는 프론트엔드 개발 작업을 중심으로 FronTalk을 구축했습니다. FronTalk은 뉴스, 금융, 예술 등 다양한 분야의 실제 웹사이트에서 수집된 100개의 다단계 대화 데이터셋으로 구성되어 있습니다. 각 단계는 텍스트 지시문과 동일한 사용자 의도를 나타내는 동등한 시각적 지시문을 포함합니다. 모델 성능을 종합적으로 평가하기 위해, 우리는 웹 에이전트를 활용하여 사용자를 시뮬레이션하고 웹사이트를 탐색하는 새로운 에이전트 기반 평가 프레임워크를 제안합니다. 이를 통해 기능 정확성과 사용자 경험 모두를 측정합니다. 20개의 모델에 대한 평가는 기존 문헌에서 체계적으로 다루어지지 않았던 두 가지 주요 과제를 드러냅니다. 첫째, 모델이 이전에 구현된 기능을 덮어쓰는 '망각' 문제가 상당하며, 이는 작업 실패로 이어집니다. 둘째, 특히 오픈 소스 비전-언어 모델(VLMs)의 경우 시각적 피드백을 해석하는 데 지속적인 어려움이 존재합니다. 우리는 자율 웹 에이전트를 사용하여 각 이전 지시문의 구현을 검토하는 방법인 AceCoder를 통해 '망각' 문제를 해결하기 위한 강력한 기본 솔루션을 제안합니다. 이 접근 방식은 '망각' 현상을 거의 0으로 줄이고 성능을 최대 9.3% 향상시킵니다 (56.0%에서 65.3%). 궁극적으로, 우리는 프론트엔드 개발 및 다단계, 다중 모달 코드 생성의 일반적인 상호작용 방식에 대한 미래 연구를 위한 견고한 기반을 제공하고자 합니다. 코드와 데이터는 https://github.com/shirley-wu/frontalk 에서 공개됩니다.

We present FronTalk, a benchmark for front-end code generation that pioneers the study of a unique interaction dynamic: conversational code generation with multi-modal feedback. In front-end development, visual artifacts such as sketches, mockups and annotated creenshots are essential for conveying design intent, yet their role in multi-turn code generation remains largely unexplored. To address this gap, we focus on the front-end development task and curate FronTalk, a collection of 100 multi-turn dialogues derived from real-world websites across diverse domains such as news, finance, and art. Each turn features both a textual instruction and an equivalent visual instruction, each representing the same user intent. To comprehensively evaluate model performance, we propose a novel agent-based evaluation framework leveraging a web agent to simulate users and explore the website, and thus measuring both functional correctness and user experience. Evaluation of 20 models reveals two key challenges that are under-explored systematically in the literature: (1) a significant forgetting issue where models overwrite previously implemented features, resulting in task failures, and (2) a persistent challenge in interpreting visual feedback, especially for open-source vision-language models (VLMs). We propose a strong baseline to tackle the forgetting issue with AceCoder, a method that critiques the implementation of every past instruction using an autonomous web agent. This approach significantly reduces forgetting to nearly zero and improves the performance by up to 9.3% (56.0% to 65.3%). Overall, we aim to provide a solid foundation for future research in front-end development and the general interaction dynamics of multi-turn, multi-modal code generation. Code and data are released at https://github.com/shirley-wu/frontalk