Convertidor de Imágenes a Código con GPT-4 Vision, Next.js, React, TypeScript
343Ahora puedes crear tu propio generador de imagen a código. Estaremos usando Next.js, React.js y GPT4 Vision una API de OPENAI
▶ Repositorio: https://github.com/midudev/image-to-code
▶ No te pierdas más directos en: https://www.twitch.tv/midudev
0:00 Introducción
2:09 GPT VISION (para detectar lo que hay en la img)
5:09 Creando Proyecto
6:30 Eliminando código para empezar
7:10 Instalando prettier
9:20 Instalando componentes de Shadcn
11:15 Cómo Instalar un Componente?
13:00 Modo Oscuro
13:40 Layout
16:45 Formulario
21:00 Colocando estilos
22:05 Creando EndPoint
24:29 Inicializar la API de OPENAI
26:40 Dónde obtener la API de OPENAI
27:17 Cuánto eh pagado por usar la API?
28:38 Colocando la API KEY al .env
29:50 Runtime (edge)
31:10 Streaming
32:32 Agregando Messages y PROMPT
34:40 Como Saber Decirle lo que queremos hacer (PROMPT)
37:47 Streaming de datos (IMPORTANTE)
40:45 Leer Streaming de datos
46:29 El error viene de Next.js
47:15 Siguiendo con el Streaming
49:19 Explicación
50:00 Guardar Resultado / Steps / Renderizando componente
55:10 Probando nuestra App
57:34 NO TE VA A QUITAR EL TRABAJO
58:01 Generando el código
1:00:00 Función Generadora
1:05:00 Drag and Drop
1:12:30 Archivo a la API (imagen a base64)
1:19:03 Probando drag and drop
1:23:00 Evitando el Flasheo
1:28:56 Probando con imagen de Instagram
1:31:32 Creando Repo.
1:33:00 “Adiós” a escribir más commits
1:34:34 Cuanto dinero me han cobrado por todo?