Websites are critical in today’s digital world, with over 1.11 billion currently active and approximately 252,000 new sites launched daily. Converting website layout design into functional UI code is a time-consuming yet indispensable step of website development. Manual methods of converting visual designs into functional code present significant challenges, especially for non-experts. To explore automatic design-to-code solutions, we first conduct a motivating study on GPT-4o and identify three types of issues in generating UI code: element omission, element distortion, and element misarrangement. We further reveal that a focus on smaller visual segments can help multimodal large language models (MLLMs) mitigate these failures in the generation process.
In this paper, we propose DCGen, a divide-and-conquer-based approach to automate the translation of webpage design to UI code. DCGen starts by dividing screenshots into manageable segments, generating descriptions for each segment, and then reassembling them into complete UI code for the entire screenshot. We conduct extensive testing with a dataset comprised of real-world websites and various MLLMs and demonstrate that DCGen achieves up to a 14% improvement in visual similarity over competing methods. Human evaluations show that DCGen can help developers implement webpages significantly faster and more similar to the UI designs. To the best of our knowledge, DCGen is the first segment-aware MLLM-based approach for generating UI code directly from screenshots.
Tue 24 JunDisplayed time zone: Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna change
10:30 - 12:30 | Code Generation 2Research Papers / Journal First at Cosmos Hall Chair(s): Reyhaneh Jabbarvand University of Illinois at Urbana-Champaign | ||
10:30 20mTalk | An Empirical Study of the Non-determinism of ChatGPT in Code Generation Journal First Shuyin Ouyang King's College London, Jie M. Zhang King's College London, Mark Harman Meta Platforms, Inc. and UCL, Meng Wang University of Bristol | ||
10:50 20mTalk | Don’t Complete It! Preventing Unhelpful Code Completion for Productive and Sustainable Neural Code Completion Systems Journal First Zhensu Sun Singapore Management University, Xiaoning Du Monash University, Fu Song Institute of Software at Chinese Academy of Sciences; University of Chinese Academy of Sciences; Nanjing Institute of Software Technology, Shangwen Wang National University of Defense Technology, Mingze Ni University of Technology Sydney, Li Li Beihang University, David Lo Singapore Management University | ||
11:10 20mTalk | Divide-and-Conquer: Generating UI Code from Screenshots Research Papers Yuxuan Wan The Chinese University of Hong Kong, Chaozheng Wang The Chinese University of Hong Kong, Yi Dong The Chinese University of Hong Kong, Wenxuan Wang Chinese University of Hong Kong, Shuqing Li The Chinese University of Hong Kong, Yintong Huo Singapore Management University, Michael Lyu Chinese University of Hong Kong DOI | ||
11:30 20mTalk | LLM-based Method Name Suggestion with Automatically Generated Context-Rich Prompts Research Papers Waseem Akram Beijing Institute of Technology, Yanjie Jiang Peking University, Yuxia Zhang Beijing Institute of Technology, Haris Ali Khan Beijing Institute of Technology, Hui Liu Beijing Institute of Technology DOI | ||
11:50 20mTalk | Beyond Functional Correctness: Investigating Coding Style Inconsistencies in Large Language Models Research Papers Yanlin Wang Sun Yat-sen University, Tianyue Jiang Sun Yat-sen University, Mingwei Liu Sun Yat-Sen University, Jiachi Chen Sun Yat-sen University, Mingzhi Mao Sun Yat-sen University, Xilin Liu Huawei Cloud, Yuchi Ma Huawei Cloud Computing Technologies, Zibin Zheng Sun Yat-sen University DOI | ||
12:10 20mTalk | Refining ChatGPT-Generated Code: Characterizing and Mitigating Code Quality Issues Journal First Yue Liu Monash University, Le-Cong Thanh The University of Melbourne, Ratnadira Widyasari Singapore Management University, Singapore, Kla Tantithamthavorn Monash University, Li Li Beihang University, Xuan-Bach D. Le University of Melbourne, David Lo Singapore Management University |
This is the main event hall of Clarion Hotel, which will be used to host keynote talks and other plenary sessions. The FSE and ISSTA banquets will also happen in this room.
The room is just in front of the registration desk, on the other side of the main conference area. The large doors with numbers “1” and “2” provide access to the Cosmos Hall.