IA na Prática:
da foto à aplicação

Duas formas de participar, um mesmo projeto

O Google Stitch e a API do Gemini, usada pelo AI Studio, só podem ser usados por maiores de 18 anos. Por isso, a turma se divide em duas trilhas que trabalham juntas.

Checklist antes da aula

• Conta Google pessoalContas institucionais podem ter o AI Studio bloqueado.
• Abri stitch.withgoogle.com e fiz loginAceite os termos antes da aula.
• Abri aistudio.google.com e fiz loginAceite os termos antes da aula.
• Notebook ou computadorNo celular dá para acompanhar, mas não para construir.

Roteiro da aula

IA generativa cria. Ela não copia nem consulta.

Um modelo generativo aprendeu padrões com milhões de exemplos. Quando recebe um pedido, ele produz algo novo que combina com esses padrões.

Quatro jeitos de trabalhar com IA

Copiar um prompt pronto é nível 1. Hoje você vai escrever os requisitos, abrir o código e julgar o resultado.

A regra das fotos nesta aula

Um rosto é um dado biométrico, e a LGPD trata esse tipo de dado como sensível. Dados de crianças e adolescentes têm proteção ainda maior. Ao enviar uma foto para a aplicação, ela vai para um servidor na nuvem.

Crie sua pessoa fictícia: no AI Studio, abra um chat com um modelo que gera imagens e cole:

Gere uma foto realista de uma pessoa fictícia, adulta, em estilo selfie casual: rosto de frente, bem iluminado, fundo simples de uma sala comum, roupa do dia a dia. A pessoa não deve se parecer com nenhuma pessoa famosa ou real.

Baixe a imagem. Ela será a foto de entrada da sua aplicação.

O desafio: AI Professional Photos

1. O usuário envia uma foto
2. Escolhe um estilo: Executivo, Palestrante, Casual Profissional, Criativo ou um estilo criado pela turma
3. Escolhe uma pose: braços cruzados, sentado, em pé ou meio corpo
4. Clica em Gerar minha foto
5. Recebe a foto gerada e vê o prompt usado para criá-la

Anatomia de um bom prompt

Antes de construir, precisamos explicar para a IA o que queremos. Veja as partes do prompt que vamos usar:

Criando a primeira interface

1. Acesse stitch.withgoogle.com e escolha o formato Web
2. Cole o prompt abaixo e envie

Crie uma aplicação web responsiva chamada "AI Professional Photos", para pessoas sem conhecimento técnico que querem uma foto profissional para currículo ou LinkedIn.

O usuário deve:
1. Fazer upload de uma foto e ver uma prévia;
2. Escolher um estilo fotográfico;
3. Escolher uma pose;
4. Clicar no botão "Gerar minha foto";
5. Ver o resultado logo abaixo.

Tudo em uma única página, com textos em português do Brasil. Visual moderno, limpo e em tons de azul.

Evoluindo o layout

Mantenha o layout atual. Transforme os estilos em cards visuais com imagem ilustrativa e nome: Executivo, Palestrante, Casual Profissional e Criativo. Abaixo deles, mostre as poses como botões selecionáveis: Braços cruzados, Sentado, Em pé e Retrato de meio corpo.

Mantenha tudo o que já existe. Abaixo do botão "Gerar minha foto", adicione uma área de resultado com a foto original e a foto gerada lado a lado, os botões "Baixar foto" e "Gerar outra versão", e um bloco recolhível chamado "Ver o prompt usado".

Atividade: crie um estilo novo

Preencha os campos. O texto à direita é montado automaticamente, e os melhores estilos entram na aplicação do professor.

Agora vamos fazer essa interface funcionar

1. No Stitch, selecione a tela final e clique em Exportar ou no ícone </>
2. Escolha HTML e copie o código
3. Em aistudio.google.com, clique em Build
4. Deixe o código copiado guardado: ele vai no fim do prompt do Passo 4

Todo software é Entrada → Processamento → Saída

Requisito vago ou requisito verificável?

Um bom requisito pode ser testado: ao usar a aplicação, você consegue dizer se ele foi cumprido ou não.

Transformando requisitos em software

Cole no Build do AI Studio. Troque as duas marcações entre colchetes: uma pelo estilo criado na atividade e outra pelo código do Stitch.

Tenho o layout de uma aplicação chamada "AI Professional Photos", criado no Google Stitch. O código está no final desta mensagem. Transforme esse layout em uma aplicação funcional, mantendo o visual o mais fiel possível.

ENTRADA
- O usuário envia uma foto (JPG ou PNG) e vê uma prévia dela.
- Escolhe um estilo e uma pose.
- O botão "Gerar minha foto" só fica ativo quando foto, estilo e pose foram escolhidos.

PROCESSAMENTO
- Use o modelo de geração de imagens do Gemini, enviando a foto original como referência.
- Guarde as descrições dos estilos em uma lista única no código chamada ESTILOS, fácil de encontrar e editar:
  • Executivo: roupa social escura, escritório moderno com fundo desfocado, luz suave de estúdio.
  • Palestrante: palco com iluminação cênica, microfone de lapela, plateia desfocada ao fundo.
  • Casual Profissional: camisa ou blusa sem gravata, coworking claro, luz natural.
  • Criativo: roupa com cores marcantes, fundo de estúdio colorido, iluminação artística.
  • [COLE AQUI O ESTILO CRIADO PELA TURMA]
- Monte a instrução juntando a descrição do estilo, a pose escolhida e esta regra: "Preserve exatamente o rosto, o tom de pele, a idade, o cabelo e os traços da pessoa da foto de referência."
- Durante a geração, mostre "Gerando sua foto...".

SAÍDA
- Mostre a foto original e a gerada lado a lado.
- "Baixar foto" baixa a imagem gerada.
- "Gerar outra versão" gera de novo com as mesmas escolhas.
- Em "Ver o prompt usado", mostre o texto exato enviado ao modelo.
- Se a geração falhar, mostre uma mensagem em português explicando o que aconteceu e permita tentar de novo.

Todos os textos em português do Brasil.

CÓDIGO DO LAYOUT (Stitch):
[COLE AQUI O CÓDIGO COPIADO DO STITCH]

Revisão: os requisitos foram cumpridos?

• Upload da foto com prévia
• Estilos, incluindo o da turma
• Seleção de pose
• Botão Gerar desativado até escolher tudo
• Mensagem "Gerando sua foto..."
• Bloco "Ver o prompt usado"

Faltou algo? Descreva o problema com precisão, do mesmo jeito que você falaria com uma pessoa:

O botão "Gerar minha foto" fica ativo mesmo sem foto enviada. Ele deve ficar desativado até que a foto, o estilo e a pose tenham sido escolhidos. Não altere mais nada na aplicação.

O que acontece quando você clica em Gerar

O prompt virou parte do software

1. No AI Studio, abra a visão de código (aba Code ou ícone </>)
2. Procure por ESTILOS com Ctrl + F
3. Na descrição do Executivo, troque "roupa social escura" por "jaqueta jeans e camiseta branca"
4. Salve, gere de novo com o estilo Executivo e compare com a primeira foto

Não encontrou? Peça para a IA mostrar onde está:

Mostre em qual arquivo e em qual trecho está a lista ESTILOS. Explique em linguagem simples, em até 5 frases, como o texto enviado ao modelo é montado quando o usuário clica em "Gerar minha foto". Não altere o código.

Hora da verdade: três testes

A IA entregou. Agora, você julga.

Compare a foto original com as geradas. Marque o que você encontrou:

• IdentidadeO rosto mudou? A pessoa parece mais nova, mais velha ou outra pessoa?
• ViésO tom de pele, o cabelo ou o tipo de corpo mudaram conforme o estilo?
• EstereótipoComo a IA imagina um "Executivo"? E um "Criativo"? Quem ficou de fora dessa imagem?
• DefeitosMãos, olhos, dentes, textos e objetos do fundo estão corretos?
• FidelidadeA pose e o estilo pedidos foram respeitados?
• Uso realVocê usaria essa foto em um currículo? O recrutador saberia que é gerada por IA?

Se algo der errado

Descreva o que aconteceu, o que era esperado e o que não deve mudar.

Quando clico em "Gerar minha foto", nada acontece. O esperado é ver "Gerando sua foto..." e depois a imagem na área de resultado. Encontre a causa, explique em uma frase e corrija sem alterar o visual.

A foto gerada não se parece com a pessoa da foto original. Reforce a regra de preservação no prompt enviado ao modelo: o rosto, o tom de pele, a idade, o cabelo e os traços devem ser idênticos aos da foto de referência. Mude apenas o texto do prompt.

Quando o limite de uso do modelo é atingido, a aplicação trava. Mostre a mensagem "Muitas gerações em pouco tempo. Aguarde um minuto e tente de novo." e reative o botão.

O plano gratuito tem limite de gerações. Se ele acabar, continue pela Trilha Diretor e acompanhe a tela do professor.

O que separa este protótipo de um produto

A IA acelerou a construção. As decisões acima continuam sendo de pessoas.

O método: sua ficha de projeto

O método que usamos hoje serve para qualquer aplicação. Preencha com uma ideia sua. O prompt ao lado é montado sozinho e fica salvo neste navegador.

Desafio para casa, em três níveis

Depois que a foto for gerada, crie também uma legenda curta (até 2 frases) para o LinkedIn, de acordo com o estilo escolhido. Mostre a legenda abaixo da foto com um botão "Copiar legenda". Não altere o restante da aplicação.

Menor de 18 anos? Os níveis 1 e 3 funcionam no papel: escreva o prompt e a ficha completos. Quando fizer 18 anos, é só colar.

Em 1 hora nós...

Você não precisa começar sabendo programar para transformar uma ideia em algo real.

Precisa aprender a descrever problemas, experimentar, avaliar os resultados e assumir as decisões que a IA não deve tomar sozinha.