Entrar Ainda não tem acesso?
2
respostas

[Dúvida] Integração de funcionalidade de imagem

por Isabella Lima
| 5.8k xp | 6 posts
Desenvolvedora FrontEnd 
    try {
          let resposta;
          if (isImage) {
            
            const response = await fetch('https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent?key=AIzaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({
                base64Image: message.replace(/^data:image\/[a-z]+;base64,/, ''),
              }),
            });
            const data = await response.json();
            resposta = data.description;
          } else {
            resposta = await inicializaChat(novoHistorico);
          }

          const novaMensagemBot = { role: 'bot', text: resposta };
          const historicoAtualizado = [...novoHistorico, novaMensagemBot];

          setChatHistory(historicoAtualizado);

          if (isImage) {
            const novaBolhaUsuarioImagem = criaBolhaUsuarioImagem(message);
            chatElement.appendChild(novaBolhaUsuarioImagem);
          } else {
            const novaBolhaUsuario = criaBolhaUsuario(message);
            chatElement.appendChild(novaBolhaUsuario);
          }

          const novaBolhaBot = criaBolhaBot(resposta);
          chatElement.appendChild(novaBolhaBot);
          vaiParaFinalDoChat();
        } catch (error) {
          console.log(error, "Erro ao enviar mensagem");
        }
      };

Estou desenvolvendo um atendimento ao cliente com a Gemini, até o momento está atendendo as espectativas, porém preciso implmentar a funcionalidade de imagens pois os usuários em algum momento vai enviar um print de comprovante e preciso que a ia reconheça e descreva a imagem enviada. Quando faço o envio da imagem ela é exiba no chat a ia da uma resposta aletória pois a requisição de imagem está sendo 400 porvavelmente o payload pode estar errado. Vou deixar algumas informações do erro que estou tendo, estou desenvolvendo em um projeto frontend em next e js.

Payload: base64Image:"/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEA"

{ "error": { "code": 400, "message": "Invalid JSON payload received. Unknown name "base64Image": Cannot find field.", "status": "INVALID_ARGUMENT", "details": [ { "@type": "type.googleapis.com/google.rpc.BadRequest", "fieldViolations": [ { "description": "Invalid JSON payload received. Unknown name "base64Image": Cannot find field." } ] } ] } }

2 respostas
por Lorena Garcia
| 7833.5k xp | 11342 posts
Alura Scuba Team Suporte Educacional

Oi, Isabella!

Pelo o que vejo o problema que você tá enfrentando é devido ao campo incorreto no payload JSON que está sendo enviado para a API. A mensagem de erro indica que o campo base64Image não é reconhecido pela API.

Pra resolver isso, você precisará verificar a documentação da API que está utilizando para garantir que o campo que está enviando no JSON é o correto. Geralmente, APIs que processam imagens esperam um campo como image, imageData, ou algo similar.

Vou sugerir uma modificação no seu código, assumindo que o campo correto seja image:

try {
  let resposta;
  if (isImage) {
    const response = await fetch('https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent?key=AIzaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        image: message.replace(/^data:image\/[a-z]+;base64,/, ''), // Alterado para "image"
      }),
    });
    const data = await response.json();
    resposta = data.description;
  } else {
    resposta = await inicializaChat(novoHistorico);
  }

  const novaMensagemBot = { role: 'bot', text: resposta };
  const historicoAtualizado = [...novoHistorico, novaMensagemBot];

  setChatHistory(historicoAtualizado);

  if (isImage) {
    const novaBolhaUsuarioImagem = criaBolhaUsuarioImagem(message);
    chatElement.appendChild(novaBolhaUsuarioImagem);
  } else {
    const novaBolhaUsuario = criaBolhaUsuario(message);
    chatElement.appendChild(novaBolhaUsuario);
  }

  const novaBolhaBot = criaBolhaBot(resposta);
  chatElement.appendChild(novaBolhaBot);
  vaiParaFinalDoChat();
} catch (error) {
  console.log(error, "Erro ao enviar mensagem");
}

Verifique a documentação da API para confirmar o nome do campo correto. Se image não for o campo certo, substitua-o pelo campo apropriado conforme a documentação.

Um abraço e bons estudos.

por Isabella Lima
| 5.8k xp | 6 posts
Desenvolvedora FrontEnd

olhei a documentação e o json que tem lá seria com image mesmo. obrigada! { "requests": [ { "image": { "content": "BASE64_ENCODED_DATA" }, "features": [ { "type": "LABEL_DETECTION", "maxResults": 1 } ] } ] }

como implementei:   body: JSON.stringify({
        image: {
          content: message.replace(/^data:image\/[a-z]+;base64,/, '')},
      }),