Repairing Responsive Layout Failures Using Retrieval Augmented Generation

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.