Publication Date
Fall 2024
Degree Type
Master's Project
Degree Name
Master of Science in Computer Science (MSCS)
Department
Computer Science
First Advisor
Nada Attar
Second Advisor
Sayma Akther
Third Advisor
Gaojian Huang
Keywords
Automated Code Generation, Finetuning, HCI Principles, Large Language Models, Retrieval Augmented Generation (RAG), UI/UX Rules
Abstract
Website Creation is revolutionized by automated code generation, reducing the development effort, speeding the production process, and ensuring consistency in design. Automated web design code generation has emerged as a transformative tool bridging the gap between design and development. In this research, a website design tool is developed and used to create visual layouts, exporting them as JSON designs. These JSON outputs were then transformed into textual prompts, optimized using established HCI principles and UI/UX rules to ensure consistency, visual hierarchy, aesthetics and minimalistic design, accessibility, user-friendly navigation and flexibility. These generated prompts were fed into large language models for code generation. In this research, three methodologies are compared: pretrained large language models, retrieval augmented generation (RAG), and finetuning. While the pretrained models provided basic outputs with limited adaptability, RAG improved contextual relevance but was constrained by storage requirements and limited flexibility in adapting to diverse designs. Finetuning on a custom dataset of 450 diverse web design templates demonstrated superior performance, producing accurate, responsive, and aesthetically coherent designs that adhered to HCI principles and UI/UX rules. Each methodology is thoroughly evaluated, and its strengths and limitations are clearly outlined. This study highlights the efficacy of finetuning in automating and enhancing design to code generation. In this research, a user survey was conducted to evaluate the generated web designs based on various attributes of web design.
Recommended Citation
Chavan, Srinivas Rao, "Optimizing Web Design Code Generation: A Comparative Study of Finetuning, Pretrained Models, and RAG (Retrieval Augmented Generation)" (2024). Master's Projects. 1456.
https://scholarworks.sjsu.edu/etd_projects/1456
