Automatische Generierung von UI-Code aus Screenshots: Ein Ansatz basierend auf Teilen und Herrschen

Websites sind in der heutigen digitalen Welt von entscheidender Bedeutung, mit über 1,11 Milliarden aktuell aktiven Seiten und etwa 252.000 neuen Sites, die täglich gestartet werden. Die Umwandlung von Website-Layout-Designs in funktionalen UI-Code ist ein zeitaufwändiger, aber unverzichtbarer Schritt der Website-Entwicklung. Manuelle Methoden zur Umwandlung visueller Designs in funktionalen Code stellen insbesondere für Nicht-Experten erhebliche Herausforderungen dar. Um automatische Design-zu-Code-Lösungen zu erforschen, führen wir zunächst eine motivierende Studie mit GPT-4o durch und identifizieren drei Arten von Problemen beim Generieren von UI-Code: Elemente werden ausgelassen, verzerrt oder falsch angeordnet. Weiter zeigen wir, dass die Fokussierung auf kleinere visuelle Segmente multimodalen großen Sprachmodellen (MLLMs) helfen kann, diese Fehler im Generierungsprozess zu verringern. In diesem Beitrag schlagen wir DCGen vor, einen auf Teilen und Herrschen basierenden Ansatz zur Automatisierung der Übersetzung von Webseitendesign in UI-Code. DCGen beginnt damit, Screenshots in handhabbare Segmente zu unterteilen, erstellt Beschreibungen für jedes Segment und setzt diese dann zu einem vollständigen UI-Code für den gesamten Screenshot zusammen. Wir führen umfangreiche Tests mit einem Datensatz realer Websites und verschiedenen MLLMs durch und zeigen, dass DCGen eine Verbesserung der visuellen Ähnlichkeit um bis zu 14 % gegenüber konkurrierenden Methoden erzielt. Nach unserem Wissen ist DCGen der erste segmentsensible, auf Prompt basierende Ansatz zur direkten Generierung von UI-Code aus Screenshots.