Repairing Responsive Layout Failures Using Retrieval Augmented Generation
Tasmia Zerin, Moumita Asad, B. M. Mainul Hossain, Kazi Sakib

TL;DR
This paper introduces ReDeFix, an automated method using retrieval-augmented generation with large language models and Stack Overflow data to repair responsive layout failures in websites, achieving high accuracy and visual correctness.
Contribution
ReDeFix is the first retrieval-augmented generation approach that leverages domain-specific knowledge from Stack Overflow to automate CSS repairs for responsive layout failures.
Findings
Achieves 88% accuracy in repairing RLFs
Generated repairs produce visually correct layouts
Maintains aesthetics in repaired layouts
Abstract
Responsive websites frequently experience distorted layouts at specific screen sizes, called Responsive Layout Failures (RLFs). Manually repairing these RLFs involves tedious trial-and-error adjustments of HTML elements and CSS properties. In this study, an automated repair approach, leveraging LLM combined with domain-specific knowledge is proposed. The approach is named ReDeFix, a Retrieval-Augmented Generation (RAG)-based solution that utilizes Stack Overflow (SO) discussions to guide LLM on CSS repairs. By augmenting relevant SO knowledge with RLF-specific contexts, ReDeFix creates a prompt that is sent to the LLM to generate CSS patches. Evaluation demonstrates that our approach achieves an 88\% accuracy in repairing RLFs. Furthermore, a study from software engineers reveals that generated repairs produce visually correct layouts while maintaining aesthetics.
Peer Reviews
No public reviews on file for this paper yet. If you reviewed it on a platform where reviews are public (OpenReview, ICLR, NeurIPS, ICML), you can paste yours below so the community can read it here.
Videos
No videos yet. Explain this paper in a talk, walkthrough, or lecture? Add one.
Taxonomy
TopicsSoftware Engineering Research · Software Testing and Debugging Techniques · Web Data Mining and Analysis
