Executando Multimodality localmente

Use esta página para executar qualquer um dos projetos Multimodality extraídos: geração de imagens ou compreensão de imagens. Ambos precisam da mesma mudança de chave Vite e da mesma atualização do SDK OpenAI. Depois disso, siga o reparo para o projeto que você tem. A mudança de chave é a que todo projeto de navegador extraído nestes cursos precisa; Running Chef Claude locally a aplica a um projeto React com duas rotas de provider.

O que você precisa primeiro

Instale uma versão LTS suportada do Node.js. Node 24 é recomendado e inclui npm. O projeto instala o Vite mais recente, que precisa do Node 22.12 ou mais novo.

Verifique se os dois comandos funcionam:

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

Você precisa de uma chave de API OpenAI com faturamento e acesso ao modelo que você usa. O acesso à geração de imagens pode exigir verificação organizacional.

Use uma chave temporária com um limite de gastos baixo. Ambos os projetos fazem requisições OpenAI pagas a partir do código do navegador, então qualquer pessoa que abra as ferramentas de desenvolvedor do navegador pode ler a chave.

JunoO que você precisa primeiro Instale Node.js LTS, então execute node --version e npm --version. Cada um deve imprimir um número de versão.

Em seguida, crie uma chave OpenAI temporária com faturamento e um limite de gastos baixo. Se você planeja executar o projeto de geração de imagens, verifique se sua organização precisa de verificação antes de começar.

JunoO que você precisa primeiro Vite pode servir a página muito antes do seu projeto OpenAI ter faturamento ou acesso a modelos, então uma página que carrega não prova nada sobre a conta. A primeira requisição paga é o que prova que a chave funciona.

Mantenha essa chave com um limite de gastos baixo para que um erro não custe caro.

JunoO que você precisa primeiro O bundling local e o acesso OpenAI falham independentemente, então trate-os como pré-requisitos separados. O navegador recebe a chave, o que significa que todos que abrem a página também a recebem.

Defina o limite de gastos agora e mova a requisição para um servidor antes de qualquer coisa que se pareça com uma implantação.

Abra e prepare o projeto

Abra um terminal na pasta extraída contendo package.json:

$ cd path-to-your-downloaded-project
$ npm install
$ npm install openai@latest

O segundo install substitui o SDK antigo do curso pelo atual antes de você mudar o modelo.

Verifique index.js para ver qual projeto você tem. O projeto de geração de imagens chama openai.images.generate e constrói um formulário de pôster com um título de filme e um estilo de arte. O projeto de visão chama openai.chat.completions.create com gpt-4-vision-preview e tem uma pasta images/.

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

VITE_OPENAI_API_KEY=your-openai-api-key

.env
node_modules/

As entradas .gitignore mantêm duas coisas fora de qualquer repositório que você criar a partir desta pasta: sua chave e a pasta node_modules que npm pode reconstruir a qualquer momento. Ignoring files and good habits cobre o hábito mais amplo.

Em index.js, mude a chave do cliente OpenAI de:

apiKey: process.env.OPENAI_API_KEY,

para:

apiKey: import.meta.env.VITE_OPENAI_API_KEY,

Deixe a linha dangerouslyAllowBrowser: true abaixo dela no lugar. O SDK se recusa a rodar no navegador sem ela.

A chave está incluída no frontend

Isso é aceitável apenas para aprendizado local temporário com uma chave restrita. Requisições de imagem podem custar dinheiro. Nunca implante ou compartilhe esta versão apenas do navegador; mova a requisição OpenAI para um backend primeiro.

JunoAbra e prepare o projeto Abra a pasta extraída contendo package.json, instale seus pacotes, depois instale o SDK OpenAI atual por cima.

Coloque sua chave temporária em .env e deixe .gitignore manter esse arquivo fora do Git. Depois mude a única linha apiKey em index.js e deixe a linha abaixo dela intacta.

JunoAbra e prepare o projeto Ambos os projetos precisam das mesmas duas edições: a atualização do SDK e a substituição da chave Vite. Vite lê .env na inicialização, então reinicie-o após mudar o arquivo.

Todo valor VITE_ é enviado para o navegador, então o prefixo marca um valor como publicado em vez de oculto.

JunoAbra e prepare o projeto Atualize o SDK primeiro. O curso fixa OpenAI 4.20, que é anterior aos modelos gpt-image, então uma chamada de novo modelo por meio do pacote antigo pode falhar de maneiras que parecem erros no seu próprio código.

Só então substitua a ID de modelo aposentada e o manuseio de resposta. import.meta.env move a chave para o bundle; não a protege.

Repare o projeto de geração de imagens

O snapshot do curso chama o modelo dall-e-3 aposentado e espera uma URL de imagem hospedada. Seguindo o guia de geração de imagens OpenAI atual, mude sua requisição de imagem para usar gpt-image-2:

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

O modelo retorna a imagem como dados base64 em vez de uma URL. Onde o código lê image.data[0].url:

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

construa uma URL de dados PNG a partir da imagem base64 retornada em vez disso:

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

Mantenha a linha que coloca imgURL na saída do pôster como está.

JunoRepare o projeto de geração de imagens Aponte a requisição para gpt-image-2, depois mude a linha imgURL para que ela construa uma URL de dados PNG a partir de b64_json.

Faça ambas as mudanças juntas. Se você mudar o modelo e manter .url, o pôster não aparecerá.

JunoRepare o projeto de geração de imagens Duas coisas mudaram: o modelo que você solicita e o campo que traz a imagem de volta. Solicite gpt-image-2 e leia b64_json em vez de .url.

Se a imagem está quebrada, verifique o prefixo data:image/png;base64, antes de mudar qualquer coisa.

JunoRepare o projeto de geração de imagens A resposta traz a imagem dentro do JSON em vez de apontar para um arquivo hospedado pelo provider, então a página precisa envolvê-la em uma URL de dados explícita antes que uma tag img possa exibi-la.

O resto do código de renderização permanece como o curso o escreveu.

Repare o projeto de visão

No projeto Vision Part 2, substitua a ID de modelo aposentada:

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

pelo gpt-4o-mini com capacidade de imagem:

model: "gpt-4o-mini",

O formato de mensagem existente ainda pode enviar entradas de texto e imagem, então o resto da requisição permanece igual.

JunoRepare o projeto de visão Substitua o modelo de visão aposentado por gpt-4o-mini e mantenha a mensagem de texto e imagem exatamente como está.

Apenas a ID do modelo muda aqui, não a forma da requisição.

JunoRepare o projeto de visão Este reparo substitui o modelo e nada mais; a mudança de forma de resposta pertence à geração de imagens, não aqui.

Se a chamada ainda falhar após a substituição, verifique o acesso da conta antes de verificar seu próprio código de mensagem.

JunoRepare o projeto de visão Chat Completions ainda aceita um array de conteúdo que mistura uma parte text e uma parte image_url, então a forma de requisição do curso se transfere para gpt-4o-mini sem mudanças.

Reduza qual parte da requisição falha antes de reescrever qualquer parte dela.

Execute qualquer um dos projetos

$ npm start

Abra a URL Local impressa por Vite.

No projeto de geração de imagens, digite um título de filme, escolha um estilo de arte e selecione Gerar Pôster. A página mostra "Generating poster for..." enquanto a requisição é executada, depois o pôster. Se a requisição falhar, a página mostra "Sorry, an error occurred while generating the poster." e o console do navegador mostra o erro.

O projeto de visão envia sua requisição assim que a página carrega. A página mostra a imagem sendo analisada, e a descrição do modelo aparece no console do navegador, não na página. Cada carregamento de página envia uma nova requisição paga, incluindo o recarregamento que Vite dispara quando você salva index.js.

Reinicie após mudar .env e pare o projeto com Ctrl+C.

JunoExecute qualquer um dos projetos Execute npm start e abra a URL Local que Vite imprime.

Para geração de imagens, envie um título de filme e estilo de arte e espere pelo pôster. Para visão, abra o console do navegador: a descrição do modelo aparece lá. Cada tentativa é uma requisição paga, então decida o que você quer testar antes de começar a clicar.

JunoExecute qualquer um dos projetos Vite iniciando prova que o bundle adaptado é compilado; não diz nada sobre a conta. Uma requisição ao vivo verifica a chave, faturamento, acesso ao modelo e manuseio de resposta do projeto em uma única chamada.

Reinicie Vite após qualquer edição .env, ou o valor antigo continua sendo servido.

JunoExecute qualquer um dos projetos Os dois projetos sinalizam sucesso de formas diferentes. A geração de imagens deve receber base64 e renderizá-la como URL de dados; visão executa sua requisição no carregamento do módulo e registra a primeira escolha no console.

Como a requisição de visão é executada em cada carregamento, cada recarregamento é cobrado. Leia o console antes de tentar novamente.

Solução de problemas

process is not defined: Substitua a leitura de chave process.env restante em index.js pela forma import.meta.env.VITE_....

A imagem gerada está quebrada: Confirme que o código lê b64_json e adiciona o prefixo data:image/png;base64, em vez de ler .url.

O modelo não está disponível: Confirme faturamento, verificação organizacional e acesso ao modelo no projeto OpenAI. A disponibilidade do provider pode variar por conta.

A página de visão permanece em branco: A página adiciona a imagem apenas após a requisição ter sucesso, então uma página em branco significa que a requisição falhou. Leia o erro no console do navegador. Se não apontar para a chave ou o modelo, envie uma mensagem apenas de texto para gpt-4o-mini primeiro; um sucesso lá confirma que sua conta pode usar o modelo, então a parte de imagem da mensagem é o que inspecionar em seguida.

A requisição funciona mas a página permanece inalterada: Verifique o console do navegador para um erro de renderização e compare o campo retornado com o reparo relevante acima.

JunoSolução de problemas Verifique isso em ordem: corrija qualquer leitura process.env restante, confirme o modelo, depois verifique b64_json para geração de imagens.

Para qualquer um dos projetos, o console do navegador mostra o erro. A maioria das falhas aqui são uma edição inacabada.

JunoSolução de problemas Separe a substituição Vite, acesso à conta, forma de resposta e renderização de página; cada camada falha por conta própria. Uma requisição pode ter sucesso e ainda renderizar incorretamente.

Corresponda o sintoma a uma camada antes de editar qualquer coisa.

JunoSolução de problemas Leia a resposta do provider antes de mudar qualquer código de UI, porque ela mostra o que o modelo retornou e a página renderizada não mostra.

Mantenha a saída de geração de imagens e o manuseio de mensagem de visão separados; suas falhas parecem semelhantes mas têm causas diferentes.