Table Of Links Mesa de la izquierda Abstracción 1 INTRODUCTION 1 Introducción 2 SYSTEM DESIGN 2 Diseño del sistema 3 RESULTS, DISCUSSION AND REFERENCES 3 Resultados, discusión y referencias Diseño del sistema Introducimos Frontend Diffusion, una herramienta de generación de código frontend de alta calidad, impulsada por LLM, que va desde el esbozo de canvas hasta la previsión de sitios web. Como se describe en la introducción, la tarea de generación frontend progresa a través de tres etapas: esbozo, escritura y codificación Nuestro sistema utiliza el modelo de lenguaje Claude 3.5 Sonnet (Sonnet)1 para toda la generación de texto y código. Mientras que Claude representa uno de los modelos de lenguaje más avanzados a partir de julio de 2024, anticipamos rápidos desarrollos en la IA generativa. por lo tanto, las técnicas de transición de tareas descritas aquí están diseñadas para ser modelo-agnostic, asegurando su aplicabilidad a futuros modelos de IA generativa más avanzados. 2.1 Sketching: Visual Layout Design and Theme Input La fase inicial del sistema consiste en una interfaz gráfica de usuario con dos componentes clave: un panel de canvas para la representación visual del diseño del sitio web previsto, y un panel prompt para las descripciones textuales del tema del sitio web. Este proceso de conversión de dos pasos se implementó sobre la base de la evidencia empírica de nuestras pruebas, mostrando que los modelos de lenguaje muestran un mejor rendimiento al procesar imágenes en formato JPG en comparación con las imágenes en formato SVG. 2.2 Writing: Product Requirements Document Generation Esta fase transforma las entradas visuales y textuales del usuario en un documento estructurado, conocido como el Documento de Requisitos del Producto (PRD), que sirve como un plan para el proceso de desarrollo del sitio web. El proceso de generación de PRD aprovecha Sonnet. El modelo de idioma se invita específicamente a incluir términos de imagen y descripciones de tamaño (por ejemplo, [school(large)]). Estos descriptores se utilizan posteriormente para consultar la API de Pexels, que devuelve URLs de imagen relevantes para su incorporación al PRD. 2.3 Coding: Website Generation and Iterative Refinement La fase de codificación del sistema consta de dos componentes primarios: (1) Generación inicial de código: el sistema utiliza el PRD generado y el prompt de usuario original como entradas para la generación de código, empleando Sonnet para producir el código inicial del sitio web; (2) Refinamiento iterativo: el sistema implementa un proceso de refinamiento iterativo para mejorar automáticamente el sitio web generado con una funcionalidad más rica y reducidos defectos. Este proceso implica analizar el código inicial para generar sugerencias de optimización, fusionar estas sugerencias con el tema original y utilizar el tema mejorado junto con el PRD previamente generado para regenerar el código. El sistema ejecuta este proceso de refinamiento iterativo varias veces (por defecto, n=4). Los autores: Qinshi Zhang Latisha Besariani Hendra Mohan Chi Gijón Ding Authors: Qinshi Zhang Latisha Besariani Hendra Mohan Chi Gijón Ding Este artículo está disponible en archivo bajo la licencia CC BY 4.0 DEED. Este documento es bajo la licencia CC BY 4.0 DEED. Disponible en Archivo Disponible en Archivo
