Show HN: Convertir capturas de pantalla en código HTML limpio usando GPT Vision (herramienta OSS)

App para convertir capturas de pantalla a código

• Una app simple que convierte capturas de pantalla a HTML/Tailwind CSS
• Usa GPT-4 Vision para generar el código y DALL-E 3 para crear una imagen similar
• Consulta la sección de ejemplos más abajo para ver una demo

Actualizaciones

• Se añadió una opción para desactivar la generación de imágenes con DALL-E cuando no sea necesaria
• Ahora se puede ver el código directamente dentro de la app
• Si la IA aplica mal los estilos o se salta secciones, se le puede indicar que actualice el código

Primeros pasos

• La app está compuesta por un frontend en React/Vite y un backend en FastAPI
• Se necesita una clave de la API de OpenAI con acceso a la API de GPT-4 Vision
• Se incluyen instrucciones para ejecutar el backend y el frontend, y usar la app localmente

Preguntas frecuentes (FAQ)

• Se ofrecen soluciones si aparecen errores durante la configuración del backend
• Se explica cómo obtener una clave de la API de OpenAI que incluya el modelo GPT4 Vision
• Se indica cómo enviar comentarios, solicitar funciones y reportar errores

Ejemplos

• Se muestran ejemplos del original y la réplica de páginas como NYTimes, Instagram y Hacker News

Versión alojada

• Debes tener una clave de OpenAI y contar con acceso a GPT-4 Vision
• En la sección de primeros pasos puedes revisar las instrucciones de instalación local

Opinión de GN⁺

Esta app es una herramienta innovadora para convertir capturas de pantalla en código web, y lo más importante es que aprovecha tecnologías de IA de última generación como GPT-4 Vision y DALL-E 3. Esto resulta interesante y atractivo porque puede ahorrar tiempo a desarrolladores web y diseñadores, permitiéndoles concentrarse más en el trabajo creativo. Además, la función que permite al usuario indicarle directamente a la IA cómo modificar el código mejora la experiencia de uso y contribuye a aumentar la precisión de la IA.

[GN⁺]

Opiniones de Hacker News

• A algunos les parece que esta tecnología es casi magia; entienden el concepto de que una red neuronal modela un conjunto de funciones que mapean una entrada a una salida, pero les sorprende que GPT modele el proceso de mapear una imagen a tokens de texto HTML+Tailwind y que luego el navegador los renderice.

  Expresa asombro ante que GPT modele el mapeo de la intensidad de los píxeles de una imagen a tokens de texto HTML y Tailwind, y que el navegador interprete y renderice esos tokens.

• Preguntan si esta herramienta puede considerarse un compilador de diagramas y si podría formar parte de un pipeline de build que convierta artefactos generados por herramientas como Sketch o Figma en HTML/CSS/JS.

  Reflexión sobre la posibilidad de que la herramienta funcione como compilador de diagramas y su uso potencial dentro de un pipeline de build.

• Se comparte un ejemplo de prompt para construir una aplicación de una sola página usando Tailwind, HTML y JS a partir de una captura de pantalla de una página web proporcionada por el usuario, con énfasis en replicar el diseño con precisión.

  Ejemplo de prompt que indica una réplica exacta del diseño de una página web usando Tailwind, HTML y JS.

• Opinión personal de que quizá haya un mejor camino que el prompting defensivo, pero que el simple hecho de que esta tecnología funcione ya es asombroso.

  Postura escéptica sobre el prompting defensivo y admiración por el hecho de que la tecnología funcione.

• Mencionan un video de investigación en YouTube según el cual agregar la frase "es muy importante para mi carrera" mejora la calidad de la salida, y opinan que esa frase mejora los resultados en varias tareas.

  Mención del efecto de una frase específica para mejorar la calidad de la salida.

• Comentan que esta tecnología amplía el rango de problemas que pueden resolverse, lo que lleva a preguntarse qué habría que construir ahora y a la necesidad de mirar los problemas y resolverlos de otra manera.

  Reflexión sobre cómo el avance tecnológico cambia la forma de resolver problemas y de reconocer nuevos problemas.

• Señalan que es sorprendente realizar esta tarea con un modelo general, aunque también opinan que los datos para aprendizaje supervisado podrían generarse fácilmente.

  Comentario sobre la facilidad de generar datos para aprendizaje supervisado.

• Se informa que planean ofrecer una versión alojada a través de GitHub Pages usando Pico, y preguntan por qué eligieron Pico.

  Planes para ofrecer un servicio alojado mediante Pico y pregunta sobre la razón de esa elección.

• Elogian que la demo del sitio web generado se muestre en tiempo real usando iframe con srcdoc, considerándolo una solución simple y elegante.

  Elogio a la simplicidad y elegancia de mostrar en tiempo real la demo del sitio web generado.

• Opinan que, si lo que se quiere es copiar un sitio web existente, usar Httrack puede dar un resultado más parecido y además ahorrar costos de la API de GPT.

  Opinión sobre la eficiencia de usar Httrack para copiar sitios web existentes.

• Expresan preocupación porque esto hará mucho más rápida la creación de sitios de phishing.

  Preocupación por el aumento en la velocidad de creación de sitios de phishing.

• Dicen que la herramienta es perfecta para responder a solicitudes en constante cambio por parte de gerentes de proyecto, y preguntan si también funciona con entradas ambiguas como "Make it pop".

  Pregunta sobre la idoneidad de la herramienta para cambios de requisitos y sobre su funcionamiento con instrucciones ambiguas.