Encomenda de imagens e de vídeo gerados por IA para o capítulo bônus (curso Frontends com Vibecoding, 25/09/2026) ================================================================================================================= Este é o material REAL que gerou as ilustrações e o clipe do capítulo. Três peças: o estilo fixo da casa, a encomenda por imagem e o pedido ao modelo de vídeo. Nada aqui foi inventado depois: o manifesto público em /educacao/frontends-com-vibecoding/ilustracoes/manifest-bonus2.json guarda largura, altura e bytes de cada saída. -------------------------------------------------------------------------------------------------- 1. Estilo fixo (prefixo de todo pedido de imagem, scripts/gen-fvc-ilustracoes-nano.py) -------------------------------------------------------------------------------------------------- Modelo: gemini-3-pro-image (Nano Banana Pro), pela Gemini API, generationConfig com responseModalities ["IMAGE"] e imageConfig { aspectRatio "16:9", imageSize "2K" }. Saída convertida para WebP de 1280 px com teto de 90 KB (qualidade cai de 82 até caber). "Ilustração editorial moderna para um curso de design de interfaces e marketing digital, estilo isométrico suave com formas planas, sombras leves e traços limpos, composição horizontal 16:9 com um ponto focal claro e bastante respiro. Paleta obrigatória: azul #0070CA, grafite #1F2937, coral #F2635B como acento pontual e off-white #F7F7F5 como fundo dominante. Elementos concretos de produto digital (telas de celular e notebook, cartões de interface, cursores, blocos de layout, gráficos abstratos) ao lado de pessoas brasileiras estilizadas trabalhando; nada de clip-art, nada de robô genérico, nada de cérebro brilhante. PROIBIDO: qualquer texto, palavra, letra, número, sigla, logotipo, ícone de app ou marca reconhecível. Telas, placas, cadernos, etiquetas, papéis e gráficos aparecem em branco, com barras de cor ou rabiscos abstratos, nunca com caracteres legíveis." Por que "sem texto": número, marca e legenda ficam na legenda HTML, onde têm fonte, data e podem ser corrigidos sem gerar a imagem de novo. Imagem com número vira print e o print viaja sem a fonte. -------------------------------------------------------------------------------------------------- 2. Encomenda por imagem (scripts/fvc-ilustracoes/encomendas-bonus2.json) -------------------------------------------------------------------------------------------------- { "imagens": [ { "id": "bonus-agentes-em-raias", "cena": "Vista de cima, em isometria suave, de uma piscina olímpica estilizada com quatro raias paralelas; em cada raia uma pessoa brasileira nada em ritmo diferente, e entre as raias pequenos envelopes de papel azul e coral cruzam de uma raia para outra sobre boias; na borda da piscina um relógio grande de parede sem números e uma pessoa com prancheta anotando; fundo off-white, sem texto.", "alt": "Piscina vista de cima com quatro raias, uma pessoa nadando em cada raia em ritmo diferente, envelopes azuis e coral cruzando entre as raias sobre boias, e na borda um relógio de parede sem números e uma pessoa com prancheta.", "legenda": "Agentes em paralelo são raias de uma piscina: cada um nada no próprio ritmo, as mensagens cruzam de raia em raia e a prova termina quando o mais lento chega." } ] } Campos: id (vira o nome do arquivo .webp, ASCII), cena (o que desenhar, em português, com a paleta e a proibição de texto herdadas do estilo fixo), alt (o que uma pessoa cega precisa saber), legenda (a afirmação com o dado, que fica no HTML). O script é idempotente: imagem que já existe em disco não é gerada de novo; --force regenera. -------------------------------------------------------------------------------------------------- 3. Pedido ao modelo de vídeo (Veo 3.1 Fast, Gemini API, 25/09/2026) -------------------------------------------------------------------------------------------------- POST https://generativelanguage.googleapis.com/v1beta/models/veo-3.1-fast-generate-preview:predictLongRunning x-goog-api-key: { "instances": [{ "prompt": "Clean 3D rendered animation, soft isometric look with flat colors and gentle shading, palette of blue #0070CA, graphite #1F2937 and a few coral #F2635B accents on an off-white #F7F7F5 background. A modern container port seen from above at a slight angle: dozens of identical blue gantry cranes move hundreds of identical containers at the same time onto a grid of graphite container stacks, all cranes cycling in a steady synchronized rhythm; a large white analog stopwatch with a blue hand sits in the foreground, its hand barely moving. Smooth slow camera push-in, steady lighting, no people, no text, no letters, no numbers, no logos, no watermarks, no captions." }], "parameters": { "aspectRatio": "16:9", "resolution": "720p", "durationSeconds": 8 } } A resposta é uma operação de longa duração (name: models/.../operations/); consulte GET https://generativelanguage.googleapis.com/v1beta/ a cada 10 s até done = true e baixe response.generateVideoResponse.generatedSamples[0].video.uri com ?alt=media e a mesma chave. Nesta rodada: 8 s, 1280 x 720, 24 quadros por segundo, H.264 com áudio AAC, 3,49 MB, cerca de 3 minutos de espera. Preço publicado do Veo 3.1 Fast em 720p: US$ 0,10 por segundo (Google AI, página de preços da Gemini API, consulta em 25/09/2026), ou seja, US$ 0,80 pelo clipe. Conversão para a web (ffmpeg 8.1), sem áudio porque a peça é decorativa e toca muda: ffmpeg -i veo.mp4 -an -c:v libvpx-vp9 -b:v 0 -crf 34 -row-mt 1 saida.webm -> 1,78 MB ffmpeg -i veo.mp4 -an -c:v libx264 -preset slow -crf 26 -movflags +faststart saida.mp4 -> 1,34 MB ffmpeg -ss 1.5 -i veo.mp4 -frames:v 1 -vf scale=1280:-2 poster.webp -> 93 KB Na página: