Executando Multimodality localmente

Use esta página para rodar o projeto de geração de imagens ou o projeto de visão extraído do curso de Multimodality no seu computador, com sua própria chave OpenAI. Três coisas são diferentes do editor do Scrimba: o pacote OpenAI precisa ser atualizado, o modelo que cada projeto solicita foi descontinuado, e a chave em index.js precisa da sintaxe do Vite.

O que você precisa primeiro

Instale uma versão LTS suportada do Node.js. A versão 24 é recomendada e inclui npm. Qualquer coisa mais antiga que Node 22.12 é muito antiga para os pacotes que esses projetos instalam.

Verifique se ambos os comandos funcionam. Os números de versão podem ser diferentes:

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

Você também precisa de uma chave da API OpenAI em uma conta com cobrança configurada. Crie uma chave que você deletará quando terminar e defina um orçamento mensal baixo para o projeto no painel do OpenAI; a caixa de perigo abaixo explica por quê. Para o projeto de geração de imagens, o OpenAI pode pedir que você verifique sua organização no painel antes que os modelos de imagem respondam.

JunoO que você precisa primeiro Instale a versão LTS do Node.js, que inclui npm, e verifique se node --version e npm --version imprimem uma versão.

Depois crie uma chave da API OpenAI em uma conta com cobrança e defina um orçamento baixo. Se você tem o projeto de geração de imagens, verifique se o painel pede que você valide sua organização.

JunoO que você precisa primeiro Node e npm instalam e servem o projeto sem nunca olhar para sua chave. OpenAI verifica a chave, a cobrança e a organização apenas quando a página envia uma requisição.

JunoO que você precisa primeiro Ambos os projetos criam o cliente OpenAI com dangerouslyAllowBrowser: true. Sem essa opção, o SDK recusa-se a rodar em um navegador, que é o próprio sinal do SDK de que essa configuração é apenas para seu computador.

Instale os pacotes

Abra um terminal na pasta do projeto extraído. É aquela que contém package.json e index.js:

$ cd path-to-your-extracted-project

Instale os pacotes do projeto e depois substitua seu pacote OpenAI pelo atual. A versão do curso vem de 2023, antes dos modelos que você está prestes a usar:

$ npm install
$ npm install openai@latest

O primeiro comando reporta added 61 packages. O segundo reporta added 1 package, removed 45 packages, changed 1 package, porque o pacote OpenAI atual precisa de muito menos dependências. Em um Mac, o segundo pode terminar com um aviso de allow-scripts sobre fsevents; isso não impede o projeto.

JunoInstale os pacotes Abra o terminal na pasta que contém package.json, execute npm install e depois execute npm install openai@latest.

Se npm disser que não consegue encontrar package.json, você está na pasta errada.

JunoInstale os pacotes A primeira instalação traz Vite e o pacote OpenAI do curso. A segunda substitui esse pacote pela versão mais recente e escreve a nova versão em package.json, então um npm install posterior a mantém.

JunoInstale os pacotespackage.json fixa openai exatamente em 4.20.0, então apenas um @latest explícito o move. Vite é listado como latest, então já se resolve para a versão mais recente a cada instalação nova.

Mude o modelo

Abra index.js. Ele diz qual projeto você tem: se chama openai.images.generate, é o projeto de geração de imagens; se chama openai.chat.completions.create, é o projeto de visão. Faça apenas a mudança do seu projeto abaixo.

Geração de imagens. O projeto solicita dall-e-3, que o OpenAI descontinuou. Seu substituto, gpt-image-2, envia a imagem de volta como texto base64 em vez de um link, então duas partes de generatePoster mudam. Mude a requisição de:

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

para:

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

Depois mude a linha que lê a imagem de:

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

para:

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

A linha depois dela, que coloca imgURL na página, permanece como está.

Visão. O projeto solicita gpt-4-vision-preview, que o OpenAI descontinuou. Mude:

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

para o modelo compatível com imagens gpt-4o-mini:

model: "gpt-4o-mini",

O resto da requisição, o texto e o link da imagem, permanece como o curso escreveu.

JunoMude o modelo Descubra qual projeto você tem pela chamada em index.js. Para geração de imagens, mude o modelo, adicione a linha size e mude a linha imgURL; com a linha .url antiga, o pôster aparece como imagem quebrada. Para visão, mude a única linha model.

JunoMude o modelo A página do pôster mostra a imagem com uma tag img, que precisa de um endereço; a URL de dados carrega a imagem toda dentro desse endereço. A requisição de visão envia uma mensagem com uma parte de texto e um link de imagem, e gpt-4o-mini lê os dois, então apenas seu nome muda.

JunoMude o modelo Os modelos GPT Image retornam b64_json em vez de uma URL hospedada, então a linha antiga escreve src="undefined" e o catch nunca executa, porque nada lançou uma exceção. No projeto de visão, o OpenAI baixa o link da imagem ele mesmo, então um endereço localhost ou um arquivo de images não chegaria a ele como uma URL comum.

Dê sua chave ao projeto

O editor do Scrimba preenche process.env.OPENAI_API_KEY para você. O navegador não tem process, e Vite não cria um, então a linha da chave perto do topo de index.js deve mudar de:

apiKey: process.env.OPENAI_API_KEY,

para:

apiKey: import.meta.env.VITE_OPENAI_API_KEY,

Vite entrega ao código do navegador apenas as variáveis cujos nomes começam com VITE_, e por isso o nome ganha esse prefixo. Deixe a linha dangerouslyAllowBrowser: true abaixo dela como está.

Depois crie .env ao lado de package.json e coloque sua chave nele:

VITE_OPENAI_API_KEY=your-openai-api-key

Crie .gitignore ao lado de package.json e adicione:

.env
node_modules/

Uma chave que chega a um repositório Git permanece no histórico mesmo depois que você deleta o arquivo. O manual do Git cobre o hábito em ignorando arquivos e boas práticas.

Essa chave é visível no navegador

Vite escreve cada valor VITE_ no código que envia ao navegador, então qualquer um que abra essa página pode ler sua chave, e cada pôster ou descrição é cobrado em sua conta. Mantenha essa versão no seu próprio computador: nunca implante ou compartilhe, e nunca faça commit de .env. Uma versão que você publica precisa de um backend ou função serverless que mantém a chave no servidor.

JunoDê sua chave ao projeto Mude a linha apiKey para o formato import.meta.env e deixe a linha abaixo dela sozinha. Depois faça um arquivo chamado .env ao lado de package.json com sua chave em uma linha, e liste .env em .gitignore para que Git nunca a salve.

JunoDê sua chave ao projeto Vite substitui cada leitura de import.meta.env.VITE_... pelo valor de .env. Um nome sem o prefixo é ocultado do código do navegador, então chega como undefined em vez de um erro. Quando você salva .env enquanto o projeto roda, Vite reinicia a si mesmo e serve o novo valor.

JunoDê sua chave ao projeto O cliente é construído no topo de index.js, então um process.env remanescente lança antes que qualquer coisa depois dele execute. No projeto de geração de imagens, isso significa que o manipulador de envio do formulário nunca é anexado.

Inicie o projeto

Inicie o servidor de desenvolvimento:

$ npm start

Vite pode primeiro imprimir um aviso que começa com (!) Your Vite config uses features. Isso não impede o projeto. Abaixo dele, Vite imprime o endereço para abrir:

  VITE v8.3.4  ready in 1825 ms

  ➜  Local:   http://localhost:5173/

Abra o endereço exato do Local. Se você criar ou salvar .env enquanto o projeto roda, o terminal mostra [vite] .env changed, restarting server... e a página pega a nova chave.

Geração de imagens. A página é intitulada Film-Fusion. Digite um título de filme, escolha um estilo de arte e clique em Generate Poster. O formulário limpa e a caixa abaixo mostra Generating poster for "…" in the style of …. O pôster substitui essa linha quando OpenAI responde, o que pode levar um tempo. Se a caixa mostra Sorry, an error occurred while generating the poster. em vez disso, a razão está no console do navegador.

Visão. O projeto envia sua requisição assim que a página abre, então a página fica em branco enquanto OpenAI observa a imagem. Quando a resposta chega, a imagem de um edifício aparece e a resposta é impressa no console do navegador, não na página. O console a mostra dobrada: clique na seta ao lado, depois na ao lado de message, para ler content, a descrição. Cada recarga envia uma nova requisição, e Vite recarrega a página cada vez que você salva index.js.

Para ler o console, abra as ferramentas de desenvolvimento do navegador (F12, ou Cmd+Option+J no Chrome em um Mac) e escolha a aba Console. Um 404 vermelho para favicon.ico é inofensivo; a solução de problemas abaixo corresponde às outras mensagens.

Pare o projeto com Ctrl+C.

JunoInicie o projeto Execute npm start, ignore o aviso de config se aparecer, e abra o endereço Local.

Para geração de imagens, envie um título e um estilo e espere pelo pôster. Para visão, abra o Console e espere pela resposta. Se nenhum aparecer, leia o erro vermelho no Console.

JunoInicie o projeto A página abrindo apenas prova que Vite funciona. O pôster ou a descrição precisa de uma requisição do seu navegador ao OpenAI para ter sucesso, então um resultado ausente é uma questão de chave, conta ou modelo, não de instalação.

JunoInicie o projeto A requisição de visão é um await no nível superior sem try/catch. Uma falha para o módulo antes de adicionar a imagem, e é por isso que uma requisição falhada deixa a página em branco e coloca um erro não capturado no console.

Solução de problemas

Generate Poster apenas limpa o formulário: O endereço ganha ?art-styles=… e nenhuma linha Generating poster aparece. O código parou enquanto a página estava carregando, antes do botão ser conectado; o console diz qual dos próximos dois problemas é.

O console diz process is not defined: A linha apiKey em index.js ainda lê process.env. Mude para o formato import.meta.env e salve.

O console diz Missing credentials: O navegador não tem chave. Verifique que .env está ao lado de package.json e que o nome é exatamente VITE_OPENAI_API_KEY, depois salve. A mensagem sugere OPENAI_API_KEY; mantenha o nome VITE_.

O console diz 401 Incorrect API key provided: A chave chegou, mas OpenAI não a aceitou. Copie-a novamente do seu painel OpenAI e verifique se não foi deletada.

O console diz 429 You exceeded your current quota: A chave funciona, mas a conta não tem crédito para gastar. Adicione crédito em Billing no painel OpenAI e tente novamente.

O console menciona verificação de organização ou acesso a modelo: Sua conta não pode usar o modelo de imagem ainda. Verifique sua organização no painel OpenAI, espere por isso surtir efeito e tente novamente.

O pôster é uma imagem quebrada: A linha imgURL ainda lê .url. Mude para a linha b64_json mostrada acima.

O console diz que o modelo não existe: Verifique que index.js solicita gpt-image-2 ou gpt-4o-mini, não o modelo antigo. OpenAI planeja parar de servir gpt-4o-mini em 14 de janeiro de 2027; depois disso, use o substituto que sua página de depreciações nomeia.

JunoSolução de problemas Encontre o erro vermelho no Console, pule o de favicon.ico, e corresponda-o a um título em negrito acima. A maioria desses é uma linha em index.js ou .env que ainda precisa mudar.

JunoSolução de problemasprocess is not defined e Missing credentials param a página antes de qualquer requisição sair. Um 401, um 429, uma verificação ou um erro de modelo é OpenAI rejeitando uma requisição que saiu.

JunoSolução de problemas Um 401 significa que a requisição chegou ao OpenAI com uma chave que ele rejeitou, então a substituição do Vite funcionou. Missing credentials vem do SDK em si: sem chave, ele lança enquanto constrói o cliente e não envia nada.