Evaluation des Nutzens von LLMs zur Übersetzung von UI-Code zwischen verschiedenen Frameworks

Softwaresysteme sind oftmals über viele Jahre hinweg im produktiven Einsatz. Herangehensweisen die zum Entwicklungszeitpunkt als State-of-the-Art gelten, veralten mit der Zeit. Dies betrifft insbesondere auch Benutzeroberflächen und die damit verbundenen Technologien. Um neuen Nutzerbedürfnissen nachzukommen, versucht man im Rahmen von Softwaremodernisierungen diese durch neue, moderne Technologien und Ansätze zu ersetzen. Dies erfordert allerdings einen hohen Zeit- und Kapitaleinsatz. Daher wäre es zielführend, diesen Prozess weitestgehend zu automatisieren oder zumindest zu unterstützen. Im Bereich generativer KI bzw. Large Language Models gibt es dahingehend bereits Ansätze, um beispielsweise aus Screenshots Screen Designs und aus Screen Designs Source Code zu generieren.

Zielsetzung der Arbeit ist, zu untersuchen inwieweit sich aktuelle Large Language Models für die technologische Modernisierung von Benutzeroberflächen nutzen lassen, zum Beispiel für die Übersetzung von bestehenden Rich-Client-Anwendungen in Webanwendungen. Im Rahmen der Arbeit soll dies u.a. durch eine prototypische Umsetzung eines Unterstützungstools untersucht werden.

• Analyse und Recherche des State-of-the-Art
• Definition und Erstellung von beispielhaften Rich-Client-Dialogen unterschiedlicher Komplexität als Anwendungsbeispiele (oder Verwendung existierender Dialoge aus Open-Source-Projekten)
• Systematische Exploration von Lösungsansätzen auf Basis eines bestehenden Large Language Models (z.B. GPT-4)
• Charakterisierung des Ansatzes hinsichtlich zu definierender Qualitätskriterien (bspw. UX, Bugs, Code-Qualität, visuelle Ähnlichkeit, …)

• Erfahrung in der Programmierung mit React oder anderer Web-Frontend-Frameworks
• erste Berührungspunkte mit Large Language Models bspw. ChatGPT
• hilfreich: Erfahrung im Bereich UI-Design

• https://www.figma.com/community/plugin/1237633393230609544/screenshot2design
• https://github.com/kazuyaseki/code-transformer-for-Figma
• https://www.builder.io/blog/figma-to-code-visual-copilot
• https://github.com/abi/screenshot-to-code
• https://twitter.com/mckaywrigley/status/1706851319372476534
• https://twitter.com/skirano/status/1706823089487491469
• https://makereal.tldraw.com/
• https://dl.acm.org/doi/abs/10.1145/3180155.3180240
• https://arxiv.org/abs/2308.03109
• https://dl.acm.org/doi/abs/10.1145/3472749.3474763