Do zero ao AI Image Analyzer em 5 minutos: um guia para iniciantes

Quer saber como construir um analisador de imagens de IA? Então leia este artigo até o fim! Vou mostrar como construir ferramentas de análise de IA de maneira muito simples, para que você quase não precise ter nenhum conhecimento prévio. Vou guiá-lo passo a passo e usaremos o Project IDX e a API Gemini. Isso significa que você não precisa configurar nada; tudo o que faremos está na nuvem. Se você estiver pronto, vamos começar!

Visite meu canal no YouTube

Introdução ao Projeto IDX

O primeiro passo é bem simples. Precisamos abrir o site idx.google.com . Se você ainda não se cadastrou, primeiro deve se cadastrar e depois poderá ver a tela abaixo.

1. Escolha um modelo: escolherei o modelo API Gemini.

   
   

2. Dê um nome ao seu projeto: vou chamá-lo de “teste 2024”.

   
   

3. Selecione Ambiente: escolherei "Vite", que é um ambiente de aplicação web JavaScript.

   
   

4. Crie o Projeto: Pressione o botão Criar.

   
   

   

Depois de alguns minutos, o IDX criará tudo para nós e veremos nossos arquivos de modelo, que podemos modificar como quisermos.

Modificando o modelo

Este é o nosso arquivo index.html. Podemos modificá-lo da maneira que quisermos, mas vamos primeiro dar uma olhada nisso. O modelo inicial contém quase tudo que precisamos. Este modelo usa o modelo Gemini 1.5 flash, então é mais que suficiente para nós.

Obtendo uma chave de API

Como você pode ver, o aplicativo não funciona inicialmente porque precisamos primeiro obter uma chave de API. Acesse o site https://aistudio.google.com/app/apikey , e obtenha sua chave lá. Se você quiser instruções detalhadas sobre como obter uma chave de API , assista a outro vídeo sobre o Projeto IDX.

Depois de obter sua chave, copie-a e vá para o arquivo main.js. Substitua o espaço reservado pela sua chave de API.

Testando o aplicativo

Vamos verificar se nosso aplicativo está funcionando. Pressione “Go” e veja o que Gêmeos retorna para nós.

Como você pode ver, Gêmeos entende o que está dentro da imagem e sugere algumas receitas para assar esse tipo de padaria. Como este aplicativo já está no servidor, você poderá compartilhar o link ou abrir este aplicativo em seu navegador.

A URL ainda não é bonita; no entanto, você poderá ver que tudo está funcionando e poderá compartilhar esse link com seus parceiros ou colegas de trabalho.

Adicionando funcionalidade de upload de imagens

Para completar nosso analisador de imagens de IA, precisamos ser capazes de adicionar nossa própria imagem. Vamos fazer alguns ajustes no template; primeiro está o arquivo index.html:

1. Altere o nome do aplicativo: vou chamá-lo de “AI Image Analyzer”.

   
   

2. Exclua o HTML: Exclua as imagens predefinidas. Linhas de 14 a 27.

 <div class="image-picker"> <label class="image-choice"> <input type="radio" checked name="chosen-image" value="/baked_goods_1.jpg"> <img src="/baked_goods_1.jpg"> </label> <label class="image-choice"> <input type="radio" name="chosen-image" value="/baked_goods_2.jpg"> <img src="/baked_goods_2.jpg"> </label> <label class="image-choice"> <input type="radio" name="chosen-image" value="/baked_goods_3.jpg"> <img src="/baked_goods_3.jpg"> </label> </div>

3. Adicione um campo de entrada para upload de imagens. Linha 15

 <input type="file" id="fileInput" name="file">

4. Altere o valor do prompt do nome de entrada para "Pergunte o que quiser sobre esta imagem".

O HTML resultante deve ser semelhante à imagem abaixo.

Atualizando o JavaScript

Precisamos definir o código JavaScript para ler nosso arquivo. Abra o arquivo main.js e faça as seguintes alterações:

1. Remova o código da linha 22 até 26.

 // Load the image as a base64 string let imageUrl = form.elements.namedItem('chosen-image').value; let imageBase64 = await fetch(imageUrl) .then(r => r.arrayBuffer()) .then(a => Base64.fromByteArray(new Uint8Array(a)));

2. Adicione um novo código a partir da linha 22.

 // Load the image as a base64 string const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; const imageBase64 = await new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { const base64String = reader.result.split(',')[1]; // Extract base64 part resolve(base64String); }; reader.onerror = reject; });

Seu aplicativo ficará assim na imagem abaixo.

Teste Final

Vamos verificar o resultado. Faça upload de uma imagem, pergunte o que está nela e pressione “Ir”.

Meu exemplo de imagem.

O resultado:

Como você pode ver, a API Gemini explica tudo sobre a imagem. Nosso analisador de imagens AI está funcionando!

Conclusão

É isso! Como você pode ver, é muito simples construir um analisador de imagens de IA usando o Project IDX e a API Gemini. Você pode criar vários aplicativos diferentes. isso é apenas um exemplo. Espero que você considere este artigo útil e informativo. Não se esqueça de compartilhar seus comentários nos comentários abaixo.

Obrigado e até meus próximos artigos! :)