Guia prático Full-Stack: pipeline de IA com Cloudinary e Gemini
Rocketseat
A hora de investir em você é AGORA!
Um único investimento. Tudo que você precisa para evoluir na carreira!
Fala, dev! Se você quer sair do básico e entender como uma aplicação Full-Stack moderna processa dados, você precisa dominar o fluxo de integração entre serviços. Não basta criar um
input de arquivo; você precisa saber para onde esse dado vai, como ele é transformado e como a IA o interpreta.Neste guia técnico, vamos implementar um pipeline completo: captura no Front-end com Tailwind, gerenciamento de mídia com Cloudinary e processamento inteligente com Gemini API. Bora pro código! 🚀
1. O Front-end: captura e preview com JavaScript
O primeiro desafio técnico é lidar com arquivos no navegador sem travar a UI. Vamos usar o Tailwind CSS para criar uma zona de upload e o JavaScript para gerenciar o estado do arquivo.
Estrutura base (HTML/Tailwind)
<div class="flex flex-col items-center justify-center p-8 bg-zinc-900 rounded-lg border-2 border-dashed border-zinc-700"> <input type="file" id="imageInput" class="hidden" accept="image/*" /> <label for="imageInput" class="cursor-pointer text-zinc-400 hover:text-white transition"> Clique para selecionar uma imagem </label> <img id="preview" class="mt-4 hidden max-w-xs rounded-md shadow-lg" /> <button id="uploadBtn" class="mt-6 px-6 py-2 bg-violet-600 hover:bg-violet-700 rounded-full font-bold"> Analisar com IA </button> </div>
Lógica de preview (JS Moderno)
const input = document.querySelector('#imageInput'); const preview = document.querySelector('#preview'); input.addEventListener('change', () => { const file = input.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e) => { preview.src = e.target.result; preview.classList.remove('hidden'); } reader.readAsDataURL(file); } });
2. O Pipeline de mídia: Cloudinary SDK
Enviar a imagem bruta para a IA é ineficiente e caro (em termos de banda). O Cloudinary entra aqui para hospedar e otimizar. No seu Back-end (Node.js), você recebe o arquivo e faz o upload:
JavaScript
import { v2 as cloudinary } from 'cloudinary'; cloudinary.config({ cloud_name: process.env.CLOUDINARY_NAME, api_key: process.env.CLOUDINARY_KEY, api_secret: process.env.CLOUDINARY_SECRET }); async function uploadToCloudinary(fileBuffer) { return new Promise((resolve, reject) => { cloudinary.uploader.upload_stream({ folder: 'ai_app', transformation: [{ width: 800, crop: "limit", quality: "auto" }] // Otimização automática }, (error, result) => { if (error) reject(error); resolve(result.secure_url); }).end(fileBuffer); }); }
Vantagem Técnica: Ao usar
quality: "auto", o Cloudinary reduz o peso da imagem sem perder detalhes que a IA precisa para análise, acelerando o tempo de resposta da API do Gemini.3. Inteligência generativa: Gemini Vision API
Agora, o toque final. Com a URL otimizada do Cloudinary, enviamos o prompt para o Gemini. O segredo aqui é o Prompt Engineering técnico.
JavaScript
import { GoogleGenerativeAI } from "@google/generative-ai"; const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY); async function analyzeImage(imageUrl) { const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" }); // Buscamos a imagem da URL para converter em bytes para a API const imageResp = await fetch(imageUrl).then(res => res.arrayBuffer()); const result = await model.generateContent([ "Analise esta imagem e descreva os elementos principais para um sistema de acessibilidade. Seja técnico e objetivo.", { inlineData: { data: Buffer.from(imageResp).toString("base64"), mimeType: "image/jpeg" } } ]); return result.response.text(); }
O diferencial: orquestração de serviços
A grande sacada desse projeto não é apenas "fazer funcionar", mas entender a orquestração. O JavaScript no front captura, o Node.js no back-end envia para o Cloudinary, recebe uma URL otimizada, repassa para o Gemini e devolve a inteligência para o usuário.
Dominar esse fluxo é o que separa quem estuda sintaxe de quem constrói aplicações escaláveis.
📺 Dica Prática: Quer ver como aplicar esses fundamentos para acelerar sua produtividade real usando IA? Assista aqui:
O próximo nível
Executar esse pipeline técnico é a base para qualquer aplicação moderna de IA. Se você quer sair do tutorial e aprender a construir sistemas completos, com segurança, arquitetura e performance, o seu lugar é na NLW.
Construa um projeto real com Inteligência Artificial e descubra, na prática, o poder do Desenvolvimento Agêntico.
Seja você iniciante ou dev experiente, essa é sua oportunidade de evoluir construindo um projeto que acompanha a nova era do desenvolvimento.
Garanta sua vaga gratuita: rocketseat.com.br/nlw
Bora codar o seu futuro? 🚀
Pronto, Paulo! Esse formato de "Guia Prático" com blocos de código reais é o que a galera sênior gosta de ler e o que o iniciante usa como "bíblia" de estudo.
Podemos seguir com esse, ou quer que eu aprofunde em mais algum detalhe da implementação do Back-end?
A hora de investir em você é AGORA!
Um único investimento. Tudo que você precisa para evoluir na carreira!
NewsletterReceba conteúdos inéditos e novidades gratuitamente
.webp&w=96&q=75){kind=small}
FALE CONOSCO