Ejecutar Multimodality localmente

Usa esta página para ejecutar el proyecto de generación de imágenes extraído o el proyecto de visión extraído del curso de Multimodality en tu computadora, con tu propia clave de OpenAI. Hay tres diferencias respecto al editor de Scrimba: el paquete de OpenAI necesita actualizarse, el modelo que cada proyecto solicita ha sido descontinuado, y la clave en index.js necesita la sintaxis de Vite.

Lo que necesitas primero

Instala una versión LTS compatible de Node.js. Se recomienda Node 24 e incluye npm. Cualquier versión anterior a Node 22.12 es demasiado antigua para los paquetes que estos proyectos instalan.

Verifica que ambos comandos funcionen. Los números de versión pueden ser diferentes:

$ node --version
v24.18.0
$ npm --version
11.18.0

También necesitas una clave de API de OpenAI en una cuenta con facturación configurada. Crea una clave que eliminarás cuando termines, y establece un presupuesto mensual bajo para el proyecto en el panel de OpenAI; el recuadro de peligro abajo explica por qué. Para el proyecto de generación de imágenes, OpenAI puede pedirte que verifiques tu organización en el panel antes de que sus modelos de imágenes respondan.

JunoLo que necesitas primero Instala la versión LTS de Node.js, que incluye npm, y verifica que node --version y npm --version muestren una versión.

Luego crea una clave de API de OpenAI en una cuenta con facturación, y establece un presupuesto bajo. Si tienes el proyecto de generación de imágenes, comprueba si el panel te pide verificar tu organización.

JunoLo que necesitas primero Node y npm instalan y sirven el proyecto, y nunca miran tu clave. OpenAI verifica la clave, la facturación y la organización solo cuando la página envía una solicitud.

JunoLo que necesitas primero Ambos proyectos crean el cliente de OpenAI con dangerouslyAllowBrowser: true. Sin esa opción, el SDK se niega a ejecutarse en un navegador, que es la propia señal del SDK de que esta configuración es solo para tu computadora.

Instala los paquetes

Abre una terminal en la carpeta del proyecto extraído. Es la que contiene package.json e index.js:

$ cd path-to-your-extracted-project

Instala los paquetes del proyecto y luego reemplaza su paquete de OpenAI con el actual. La versión del curso viene de 2023, antes de que cambies a los modelos:

$ npm install
$ npm install openai@latest

El primer comando reporta added 61 packages. El segundo reporta added 1 package, removed 45 packages, changed 1 package, porque el paquete actual de OpenAI necesita muchos menos auxiliares. En una Mac, el segundo puede terminar con una advertencia allow-scripts sobre fsevents; no detiene el proyecto.

JunoInstala los paquetes Abre la terminal en la carpeta que contiene package.json, ejecuta npm install, luego ejecuta npm install openai@latest.

Si npm dice que no puede encontrar package.json, estás en la carpeta equivocada.

JunoInstala los paquetes La primera instalación trae Vite y el paquete de OpenAI del curso. La segunda cambia ese paquete por el último lanzamiento y escribe la nueva versión en package.json, así un npm install posterior la mantiene.

JunoInstala los paquetespackage.json fija openai exactamente a 4.20.0, así solo un @latest explícito lo cambia. Vite se lista como latest, así que ya se resuelve a la versión más nueva en cada instalación nueva.

Cambia el modelo

Abre index.js. Te dice cuál proyecto tienes: si llama a openai.images.generate, es el proyecto de generación de imágenes; si llama a openai.chat.completions.create, es el proyecto de visión. Haz solo el cambio de tu proyecto abajo.

Generación de imágenes. El proyecto solicita dall-e-3, que OpenAI ha descontinuado. Su reemplazo, gpt-image-2, devuelve la imagen como texto base64 en lugar de un enlace, así dos partes de generatePoster cambian. Cambia la solicitud de:

const image = await openai.images.generate({
   model: "dall-e-3",
   prompt
});

a:

const image = await openai.images.generate({
  model: "gpt-image-2",
  prompt,
  size: "1024x1024",
})

Luego cambia la línea que lee la imagen de:

const imgURL = image.data[0].url;

a:

const imgURL = `data:image/png;base64,${image.data[0].b64_json}`;

La línea siguiente, que pone imgURL en la página, se queda como está.

Visión. El proyecto solicita gpt-4-vision-preview, que OpenAI ha descontinuado. Cambia:

model: "gpt-4-vision-preview",

al modelo con capacidad de imágenes gpt-4o-mini:

model: "gpt-4o-mini",

El resto de la solicitud, el texto y el enlace de la imagen, se queda como el curso lo escribió.

JunoCambia el modelo Encuentra cuál proyecto tienes por la llamada en index.js. Para generación de imágenes, cambia el modelo, añade la línea size y cambia la línea imgURL; con la línea .url antigua, el póster se muestra como imagen rota. Para visión, cambia la línea model única.

JunoCambia el modelo La página del póster muestra la imagen con una etiqueta img, que necesita una dirección; la URL de datos lleva toda la imagen dentro de esa dirección. La solicitud de visión envía un mensaje con una parte de texto y un enlace de imagen, y gpt-4o-mini lee ambos, así solo su nombre cambia.

JunoCambia el modelo Los modelos GPT Image devuelven b64_json en lugar de una URL alojada, así la línea antigua escribe src="undefined" y el catch nunca se ejecuta, porque nada lanzó una excepción. En el proyecto de visión, OpenAI descarga el enlace de imagen mismo, así una dirección localhost o un archivo de images no llegaría como una URL simple.

Dale al proyecto tu clave

El editor de Scrimba rellena process.env.OPENAI_API_KEY por ti. El navegador no tiene process, y Vite no crea uno, así la línea de clave cerca de la parte superior de index.js debe cambiar de:

apiKey: process.env.OPENAI_API_KEY,

a:

apiKey: import.meta.env.VITE_OPENAI_API_KEY,

Vite entrega al código del navegador solo las variables cuyos nombres comienzan con VITE_, por eso el nombre gana ese prefijo. Deja la línea dangerouslyAllowBrowser: true debajo como está.

Luego crea .env al lado de package.json y pon tu clave en ella:

VITE_OPENAI_API_KEY=your-openai-api-key

Crea .gitignore al lado de package.json y añade:

.env
node_modules/

Una clave que llega a un repositorio de Git se queda en su historial incluso después de que elimines el archivo. El manual de Git cubre el hábito en ignoring files and good habits.

Esta clave es visible en el navegador

Vite escribe cada valor VITE_ en el código que envía al navegador, así cualquiera que abra esta página puede leer tu clave, y cada póster o descripción se carga a tu cuenta. Mantén esta versión en tu propia computadora: nunca la despliegues ni la compartas, y nunca hagas commit de .env. Una versión que publiques necesita un backend o una función serverless que mantenga la clave en el servidor.

JunoDale al proyecto tu clave Cambia la línea apiKey a la forma import.meta.env y deja sola la línea debajo. Luego haz un archivo llamado .env al lado de package.json con tu clave en una línea, y lista .env en .gitignore para que Git nunca la guarde.

JunoDale al proyecto tu clave Vite reemplaza cada lectura de import.meta.env.VITE_... con el valor de .env. Un nombre sin el prefijo está oculto del código del navegador, así llega como undefined en lugar de un error. Cuando guardas .env mientras el proyecto se ejecuta, Vite se reinicia a sí mismo y sirve el nuevo valor.

JunoDale al proyecto tu clave El cliente se construye en la parte superior de index.js, así un process.env sobrante lanza antes de que anything después se ejecute. En el proyecto de generación de imágenes eso significa que el manejador de envío del formulario nunca se adjunta.

Inicia el proyecto

Inicia el servidor de desarrollo:

$ npm start

Vite puede primero imprimir una advertencia que comienza con (!) Your Vite config uses features. No detiene el proyecto. Debajo, Vite imprime la dirección a abrir:

  VITE v8.3.4  ready in 1825 ms

  ➜  Local:   http://localhost:5173/

Abre la dirección exacta Local. Si creas o guardas .env mientras el proyecto se ejecuta, la terminal muestra [vite] .env changed, restarting server... y la página recoge la nueva clave.

Generación de imágenes. La página se titula Film-Fusion. Escribe un título de película, elige un estilo artístico, y haz clic en Generate Poster. El formulario se borra y la caja debajo muestra Generating poster for "…" in the style of …. El póster reemplaza esa línea cuando OpenAI responde, que puede tomar un tiempo. Si la caja muestra Sorry, an error occurred while generating the poster. en su lugar, la razón está en la consola del navegador.

Visión. El proyecto envía su solicitud tan pronto como la página abre, así la página se queda en blanco mientras OpenAI mira la imagen. Cuando la respuesta llega, aparece una imagen de un edificio y la respuesta se imprime en la consola del navegador, no en la página. La consola la muestra plegada: haz clic en la flecha al lado, luego en la al lado de message, para leer content, la descripción. Cada recarga envía una nueva solicitud, y Vite recarga la página cada vez que guardas index.js.

Para leer la consola, abre las herramientas de desarrollador de tu navegador (F12, o Cmd+Option+J en Chrome en una Mac) y elige la pestaña Console. Un 404 rojo para favicon.ico es inofensivo; la solución de problemas abajo coincide con los otros mensajes.

Detén el proyecto con Ctrl+C.

JunoInicia el proyecto Ejecuta npm start, ignora la advertencia de configuración si aparece, y abre la dirección Local.

Para generación de imágenes, envía un título y un estilo y espera el póster. Para visión, abre la Consola y espera la respuesta. Si ninguno aparece, lee el error rojo en la Consola.

JunoInicia el proyecto La página abriendo solo prueba que Vite funciona. El póster o la descripción necesita una solicitud de tu navegador a OpenAI para tener éxito, así un resultado faltante es una pregunta de clave, cuenta o modelo, no de instalación.

JunoInicia el proyecto La solicitud de visión es un await de nivel superior sin try/catch. Una falla detiene el módulo antes de que agregue la imagen, por eso una solicitud fallida deja la página en blanco e pone un error no capturado en la consola.

Solución de problemas

Generate Poster solo borra el formulario: La dirección gana ?art-styles=… y no aparece línea Generating poster. El código se detuvo mientras la página se cargaba, antes de que el botón se conectara; la consola dice cuál de los dos problemas siguientes es.

La consola dice process is not defined: La línea apiKey en index.js aún lee process.env. Cámbiala a la forma import.meta.env y guarda.

La consola dice Missing credentials: El navegador no tiene clave. Comprueba que .env esté al lado de package.json y que el nombre sea exactamente VITE_OPENAI_API_KEY, luego guárdalo. El mensaje sugiere OPENAI_API_KEY; mantén el nombre VITE_.

La consola dice 401 Incorrect API key provided: La clave llegó, pero OpenAI no la aceptó. Cópiala de nuevo de tu panel de OpenAI y comprueba que no haya sido eliminada.

La consola dice 429 You exceeded your current quota: La clave funciona, pero la cuenta no tiene crédito para gastar. Añade crédito bajo Billing en el panel de OpenAI, luego intenta de nuevo.

La consola menciona verificación de organización o acceso a modelo: Tu cuenta aún no puede usar el modelo de imagen. Verifica tu organización en el panel de OpenAI, espera a que surta efecto, luego intenta de nuevo.

El póster es una imagen rota: La línea imgURL aún lee .url. Cámbiala a la línea b64_json mostrada arriba.

La consola dice que el modelo no existe: Comprueba que index.js solicite gpt-image-2 o gpt-4o-mini, no el modelo antiguo. OpenAI planea dejar de servir gpt-4o-mini el 14 de enero de 2027; después, usa el reemplazo que su página de deprecations nombra.

JunoSolución de problemas Encuentra el error rojo en la Consola, salta el de favicon.ico, y coincídelo con un encabezado en negrita arriba. La mayoría de estos es una línea en index.js o .env que aún necesita cambiar.

JunoSolución de problemasprocess is not defined y Missing credentials detienen la página antes de que ninguna solicitud se vaya. Un 401, un 429, una verificación o un error de modelo es OpenAI rechazando una solicitud que se fue.

JunoSolución de problemas Un 401 significa que la solicitud llegó a OpenAI con una clave que rechazó, así el reemplazo de Vite funcionó. Missing credentials viene del SDK mismo: sin clave, lanza mientras construye el cliente y no envía nada.