Rodando Multimodality localmente
Use esta página para rodar um dos projetos Multimodality extraídos: geração de imagens ou compreensão de imagens. Ambos precisam da mesma adaptação de chave do Vite e atualização do SDK do OpenAI. Depois disso, siga o conserto do projeto que você tem. A adaptação de chave é a mesma que todo projeto do curso extraído precisa; Rodando Chef Claude localmente aplica isso 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.
Verifique se ambos os comandos funcionam:
$ node --version
v24.18.0
$ npm --version
11.18.0Você precisa de uma chave de API do OpenAI com cobrança ativa e acesso ao modelo que vai usar. O acesso à geração de imagens pode exigir verificação da organização.
Use uma chave temporária com limite de gastos baixo. Ambos os projetos fazem requisições pagas ao OpenAI a partir do código do navegador, onde a chave pode ser inspecionada.
Abra e prepare o projeto
Abra um terminal na pasta extraída que contém package.json:
$ cd path-to-your-downloaded-project
$ npm install
$ npm install openai@latestA segunda instalação atualiza o SDK antigo do curso antes de usar as APIs de imagem atuais.
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 sua chave e a pasta node_modules reconstruível fora de qualquer repositório que você criar; ignorando arquivos e bons hábitos cobre o hábito mais amplo.
Em index.js, altere a chave do cliente OpenAI de:
apiKey: process.env.OPENAI_API_KEY,para:
apiKey: import.meta.env.VITE_OPENAI_API_KEY,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 somente do navegador; mova a requisição do OpenAI para um backend primeiro.
package.json, instale seus pacotes e depois instale o SDK OpenAI atual por cima. Sua chave temporária vai em .env, e .gitignore mantém esse arquivo fora do Git. Uma chave que nunca cai em um commit é uma chave que você nunca precisa substituir! Conserte o projeto de geração de imagens
O snapshot do curso chama o modelo aposentado dall-e-3 e espera uma URL de imagem hospedada. Seguindo o guia atual de geração de imagens do OpenAI, altere sua requisição de imagem para usar gpt-image-2:
const image = await openai.images.generate({
model: "gpt-image-2",
prompt,
size: "1024x1024",
})Onde o código lê image.data[0].url, substitua por uma data URL feita a partir da imagem base64 retornada:
`data:image/png;base64,${image.data[0].b64_json}`Mantenha a atribuição ou markup ao redor do seu arquivo extraído.
A string base64 é a imagem inteira embutida na resposta, então espere payloads de um megabyte ou mais. Uma versão com um backend salvaria a imagem no servidor e entregaria à página uma URL curta em vez de uma data URL longa.
gpt-image-2 e transforme o valor base64 retornado em uma data URL PNG. O modelo aposentado e o campo antigo .url andam juntos, então ambas as metades precisam da atualização. Alterar uma sem a outra resulta em uma imagem quebrada, que é exatamente o erro que cometi primeiro! Conserte o projeto de visão
No projeto Vision Part 2, substitua o ID de modelo aposentado:
model: "gpt-4-vision-preview",pelo gpt-4o-mini capaz de imagens:
model: "gpt-4o-mini",O formato de mensagem existente ainda pode enviar entradas de texto e imagem.
Se a requisição atualizada falhar, envie uma mensagem apenas com texto para gpt-4o-mini primeiro. Um sucesso ali confirma que sua conta pode usar o modelo, o que deixa a parte de imagem da mensagem como o que inspecionar.
gpt-4o-mini e deixe o formato de mensagem com texto e imagem sozinho. Apenas o ID do modelo mudou, não a forma da requisição. Quanto menos linhas você toca, menos pode quebrar, uma lição que continuo reaprendendo! Rode um dos projetos
$ npm startAbra a URL Local impressa pelo Vite. No projeto de geração de imagens, envie um prompt e procure pela imagem gerada na página. No projeto de visão, envie uma imagem e pergunta e procure pela resposta em texto do modelo. Reinicie após alterar .env, e pare o projeto com Ctrl+C.
npm start, abra a URL Local que Vite imprime, e tente o fluxo de ponta a ponta. Uma imagem gerada ou uma resposta de visão é o sinal de sucesso, e cada tentativa é uma requisição paga. Escrevo meu prompt de teste antes de começar a clicar, o que economiza dinheiro e segundas opiniões! 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 está indisponível: Confirme cobrança, verificação de organização e acesso ao modelo no projeto OpenAI. A disponibilidade do provider pode variar por conta.
O SDK relata um erro de ambiente semelhante ao navegador: npm install openai@latest mantém a proteção do navegador do SDK, que se recusa a rodar com uma chave de API no código do navegador. Se seu extrato ainda não passa dangerouslyAllowBrowser: true nas opções do cliente OpenAI, adicione ao lado da linha apiKey. O nome da opção é o aviso: isso permanece aceitável apenas para uma chave temporária e restrita usada localmente.
A requisição funciona mas a página fica inalterada: Verifique o console do navegador para um erro de renderização e compare o campo retornado com o conserto relevante acima.
process.env restante, confirme o modelo, depois verifique b64_json para geração de imagens ou o Console do navegador para um erro de renderização. A maioria das falhas aqui é uma edição inacabada em vez de um mistério. Verifique as coisas ordinárias primeiro; levou muito tempo para eu fazer disso um hábito!