The AI Engineer PathEjecutar Multimodalidad localmente
Usa esta página para ejecutar cualquiera de los proyectos Multimodalidad extraídos: generación de imágenes o comprensión de imágenes. Ambos necesitan el mismo cambio de clave de Vite y la misma actualización del SDK de OpenAI. Después, sigue la reparación del proyecto que tengas. El cambio de clave es el que todo proyecto de navegador extraído en estos cursos necesita; Ejecutar Chef Claude localmente lo aplica a un proyecto de React con dos rutas de proveedor.
Lo que necesitas primero
Instala una versión LTS soportada de Node.js. Se recomienda Node 24 e incluye npm. El proyecto instala la última versión de Vite, que necesita Node 22.12 o superior.
Verifica que ambos comandos funcionen:
$ 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 generación de imágenes puede requerir verificación de organización.
Usa una clave temporal con un límite de gasto bajo. Ambos proyectos realizan solicitudes pagas de OpenAI desde código del navegador, así que cualquiera que abra las herramientas de desarrollo del navegador puede leer la clave.
node --version y npm --version. Cada uno debe imprimir un número de versión. A continuación, crea una clave temporal de OpenAI con facturación y un límite de gasto bajo. Si planeas ejecutar el proyecto de generación de imágenes, verifica si tu organización necesita verificación antes de empezar.
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 reemplaza el SDK antiguo del curso con el actual antes de que cambies el modelo.
Revisa index.js para ver qué proyecto tienes. El proyecto de generación de imágenes llama a openai.images.generate y construye un formulario de póster con un título de película y un estilo artístico. El proyecto de visión llama a openai.chat.completions.create con gpt-4-vision-preview y tiene una carpeta images/.
Crea .env y .gitignore junto a 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,Deja la línea dangerouslyAllowBrowser: true debajo en su lugar. El SDK se niega a ejecutarse en el navegador sin ella.
La clave está incluida en el frontend
Esto es aceptable solo para aprendizaje local temporal con una clave restringida. Las solicitudes de imágenes pueden costar dinero. Nunca despliegues ni compartas esta versión de navegador; mueve la solicitud de OpenAI a un backend primero.
package.json, instala sus paquetes, luego instala el SDK actual de OpenAI encima. Pon tu clave temporal en .env, y deja que .gitignore mantenga ese archivo fuera de Git. Luego cambia la única línea apiKey en index.js y deja sola la línea debajo.
Repara el proyecto de generación de imágenes
La captura del curso llama al modelo retirado 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",
})El modelo devuelve la imagen como datos base64 en lugar de una URL. Donde el código lee image.data[0].url:
const imgURL = image.data[0].url;construye una URL de datos PNG desde la imagen base64 devuelta en su lugar:
const imgURL = `data:image/png;base64,${image.data[0].b64_json}`;Mantén la línea que coloca imgURL en la salida del póster tal como está.
gpt-image-2, luego cambia la línea imgURL para que construya una URL de datos PNG desde b64_json. Haz ambos cambios juntos. Si cambias el modelo y mantienes .url, el póster no aparecerá.
Repara el proyecto de visión
En el proyecto Vision Part 2, reemplaza el ID de modelo retirado:
model: "gpt-4-vision-preview",con el modelo 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, así que el resto de la solicitud permanece igual.
gpt-4o-mini y mantén el mensaje de texto e imagen exactamente como está. Solo el ID del modelo cambia aquí, no la forma de la solicitud.
Ejecuta cualquiera de los proyectos
$ npm startAbre la URL Local que imprime Vite.
En el proyecto de generación de imágenes, ingresa un título de película, elige un estilo artístico y selecciona Generar póster. La página muestra "Generando póster para..." mientras se ejecuta la solicitud, luego el póster. Si la solicitud falla, la página muestra "Lo sentimos, ocurrió un error al generar el póster." y la consola del navegador muestra el error.
El proyecto de visión envía su solicitud tan pronto como carga la página. La página muestra la imagen siendo analizada, y la descripción del modelo aparece en la consola del navegador, no en la página. Cada carga de página envía una nueva solicitud pagada, incluida la recarga que Vite activa cuando guardas index.js.
Reinicia después de cambiar .env, y detén el proyecto con Ctrl+C.
npm start y abre la URL Local que Vite imprime. Para generación de imágenes, envía un título de película y estilo artístico y espera el póster. Para visión, abre la consola del navegador: la descripción del modelo aparece allí. Cada intento es una solicitud pagada, así que decide qué quieres probar antes de empezar a hacer clic.
Solución de problemas
process is not defined: Reemplaza la lectura restante de clave process.env en index.js con la forma import.meta.env.VITE_....
La imagen generada está rota: Confirma que el código lee b64_json y agrega el prefijo data:image/png;base64, en lugar de leer .url.
El modelo no está disponible: Confirma la facturación, la verificación de organización y el acceso al modelo en el proyecto de OpenAI. La disponibilidad del proveedor puede variar según la cuenta.
La página de visión permanece en blanco: La página agrega la imagen solo después de que la solicitud tiene éxito, así que una página en blanco significa que la solicitud falló. Lee el error en la consola del navegador. Si no apunta a la clave o al modelo, envía primero un mensaje de solo texto a gpt-4o-mini; un éxito allí confirma que tu cuenta puede usar el modelo, así que la parte de imagen del mensaje es lo siguiente a inspeccionar.
La solicitud funciona pero la página permanece sin cambios: Verifica la consola del navegador para un error de renderizado y compara el campo devuelto con la reparación relevante arriba.
process.env, confirma el modelo, luego verifica b64_json para la generación de imágenes. Para cualquiera de los proyectos, la consola del navegador muestra el error. La mayoría de los fallos aquí son una edición sin terminar.