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!   https://youtu.be/kBNwTIoYwr8?si=x1eco-nEqgurQ13r&embedable=true   Visite meu canal no YouTube  Introdução ao Projeto IDX  O primeiro passo é bem simples. Precisamos abrir o site  . Se você ainda não se cadastrou, primeiro deve se cadastrar e depois poderá ver a tela abaixo.    idx.google.com  Escolha um modelo: escolherei o modelo API Gemini.  Dê um nome ao seu projeto: vou chamá-lo de “teste 2024”.  Selecione Ambiente: escolherei "Vite", que é um ambiente de aplicação web JavaScript.  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  e obtenha sua chave lá. Se você quiser instruções detalhadas sobre   , assista a outro vídeo sobre o Projeto IDX.    , https://aistudio.google.com/app/apikey como obter uma chave de API  Depois de obter sua chave, copie-a e vá para o arquivo   Substitua o espaço reservado pela sua chave de API.  main.js.  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:  Altere o nome do aplicativo: vou chamá-lo de “AI Image Analyzer”.  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>  Adicione um campo de entrada para upload de imagens. Linha 15   <input type="file" id="fileInput" name="file">  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   e faça as seguintes alterações: main.js  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)));  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! :)

Read My Blog

Read My Stories

Este áudio é produzido no idioma original da história!

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

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps