Ejecutar Multimodalidad localmente
Usa esta página para ejecutar cualquiera de los dos proyectos de Multimodalidad extraídos: generación de imágenes o comprensión de imágenes. Ambos necesitan el mismo cambio de clave Vite y la misma actualización del SDK de OpenAI. Después, sigue la reparación del proyecto que tengas. Ese cambio de clave es el que todos los proyectos extraídos del curso necesitan; Ejecutar Chef Claude localmente lo aplica a un proyecto React con dos rutas de proveedor.
Lo que necesitas primero
Instala una versión LTS compatible de Node.js. Se recomienda Node 24, que incluye npm.
Verifica que ambos comandos funcionan:
$ node --version
v24.18.0
$ npm --version
11.18.0Necesitas una clave de API de OpenAI con facturación y acceso al modelo que uses. El acceso a la generación de imágenes puede requerir verificación de la organización.
Usa una clave temporal con un límite de gasto bajo. Ambos proyectos realizan solicitudes pagadas a OpenAI desde código de navegador, así que cualquiera que abra las herramientas del desarrollador puede leer la clave.
Abre y prepara el proyecto
Abre una terminal en la carpeta extraída que contiene package.json:
$ cd path-to-your-downloaded-project
$ npm install
$ npm install openai@latestLa segunda instalación actualiza el SDK antiguo del curso antes de usar las APIs de imagen actuales.
Crea .env y .gitignore al lado de package.json:
VITE_OPENAI_API_KEY=your-openai-api-key.env
node_modules/Las entradas de .gitignore mantienen dos cosas fuera de cualquier repositorio que crees desde esta carpeta: tu clave y la carpeta node_modules que npm puede reconstruir en cualquier momento. Ignorar archivos y buenos hábitos cubre el hábito más amplio.
En index.js, cambia la clave del cliente de OpenAI de:
apiKey: process.env.OPENAI_API_KEY,a:
apiKey: import.meta.env.VITE_OPENAI_API_KEY,La clave está incluida en el frontend
Esto es aceptable solo para aprendizaje local temporal con una clave restringida. Las solicitudes de imagen pueden costar dinero. Nunca despliegues ni compartas esta versión solo de navegador; mueve la solicitud de OpenAI a un backend primero.
package.json, instala sus paquetes, luego instala el SDK de OpenAI actual encima. Tu clave temporal va en .env, y .gitignore mantiene ese archivo fuera de Git. ¡Una clave que nunca aparece en un commit es una clave que nunca tienes que reemplazar! Repara el proyecto de generación de imágenes
La instantánea del curso llama al modelo descontinuado dall-e-3 y espera una URL de imagen alojada. Siguiendo la guía actual de generación de imágenes de OpenAI, cambia su solicitud de imagen para usar gpt-image-2:
const image = await openai.images.generate({
model: "gpt-image-2",
prompt,
size: "1024x1024",
})Donde el código lee image.data[0].url, reemplázalo con una URL de datos hecha a partir de la imagen base64 devuelta:
`data:image/png;base64,${image.data[0].b64_json}`Mantén la asignación o marcado circundante de tu archivo extraído.
La cadena base64 es la imagen completa incrustada en la respuesta, así que espera cargas de un megabyte o más. Una versión con un backend guardaría la imagen del lado del servidor y enviaría a la página una URL corta en lugar de una URL de datos larga.
gpt-image-2 y convierte el valor base64 devuelto en una URL de datos PNG. El modelo descontinuado y el campo antiguo .url son parte del mismo cambio, así que actualiza ambos. ¡Si cambias uno y no el otro, la imagen se romperá, que es exactamente el error que cometí primero! Repara el proyecto de visión
En el proyecto Vision Part 2, reemplaza el ID de modelo descontinuado:
model: "gpt-4-vision-preview",con el capaz de imágenes gpt-4o-mini:
model: "gpt-4o-mini",El formato de mensaje existente aún puede enviar entradas de texto e imagen.
Si la solicitud actualizada falla, envía un mensaje solo de texto a gpt-4o-mini primero. Un éxito ahí confirma que tu cuenta puede usar el modelo, así que la parte de imagen del mensaje es lo que debes inspeccionar a continuación.
gpt-4o-mini y mantén el formato de mensaje de texto e imagen sin cambios. Solo cambió el ID del modelo, no la forma de la solicitud. ¡Cambiar menos líneas significa menos líneas que pueden romperse, una lección que sigo reaprendiendo! Ejecuta cualquiera de los proyectos
$ npm startAbre la URL Local que imprime Vite. En el proyecto de generación de imágenes, envía un prompt y busca la imagen generada en la página. En el proyecto de visión, envía una imagen y pregunta y busca la respuesta de texto del modelo. Reinicia después de cambiar .env, y detén el proyecto con Ctrl+C.
npm start, abre la URL Local que imprime Vite, e intenta el flujo de principio a fin. Una imagen generada o una respuesta de visión es la señal de éxito, y cada intento es una solicitud pagada. ¡Escribo mi prompt de prueba antes de empezar a hacer clic, así gasto menos dinero y pierdo menos tiempo preguntándome si debo intentar de nuevo! Solución de problemas
process is not defined: Reemplaza la lectura de clave process.env restante en index.js con la forma import.meta.env.VITE_....
La imagen generada está rota: Confirma que el código lee b64_json y añade el prefijo data:image/png;base64, en lugar de leer .url.
El modelo no está disponible: Confirma facturación, verificación de organización y acceso al modelo en el proyecto de OpenAI. La disponibilidad del proveedor puede variar según la cuenta.
El SDK informa un error sobre ejecutarse en un entorno de navegador: npm install openai@latest mantiene la guardia del navegador del SDK, que se niega a ejecutarse con una clave de API en código de navegador. Si tu proyecto extraído no pasa ya dangerouslyAllowBrowser: true en las opciones del cliente de OpenAI, añádelo al lado de la línea apiKey. El nombre de la opción es la advertencia: esto sigue siendo aceptable solo para una clave temporal y restringida usada localmente.
La solicitud funciona pero la página se mantiene sin cambios: Verifica la consola del navegador en busca de un error de renderizado y compara el campo devuelto con la reparación relevante de arriba.
process.env sin terminar, confirma el modelo, luego verifica b64_json para generación de imágenes o la Consola del navegador para un error de renderizado. La mayoría de fallos aquí son una edición sin terminar en lugar de un misterio. ¡Verifica las cosas ordinarias primero; me tomó demasiado tiempo convertir eso en un hábito!