Se você começar a dar café de graça, as pessoas irão aparecer. A equipe do Flutter vinha tentando há algum tempo encontrar uma maneira de colocar esse princípio em prática com um demo que começava com um aplicativo Flutter e terminava com uma bebida quente e deliciosa. O problema era como torná-lo mais interessante, mais pessoal do que apenas receber pedidos e entregar.

Então o que mudou? Dois novos elementos de tecnologia chegaram ao cenário. Um é Nano Banana, com sua capacidade de gerar rapidamente imagens personalizadas. O segundo é GenUI, com sua capacidade de gerar a experiência do usuário dinamicamente em tempo real e oferecer aos participantes perguntas pessoalmente adaptadas sobre como eles gostariam de modificar essas imagens. Junte os dois com o Flutter e você pode oferecer às pessoas a chance de pedir café com uma imagem do seu lugar feliz impressa na tampa com uma impressora jato de tinta. Agora isso é bastante memorável.

Tudo o que tínhamos a fazer era executar. Duas vezes, como acabou acontecendo — o demo foi chamado de “GenLatte” no Cloud Next e “Antigravity Coffee Co.” no Google I/O. Para simplificar e economizar alguns tokens para o agente que resume este artigo para você, o nome “GenLatte” é usado abaixo.

Construímos uma cafeteria

Realizar uma visão tão ambiciosa quanto o GenLatte envolve muitas pessoas. Tipo, muitas pessoas. Há equipes para especificar o espaço físico e decidir como os “clientes” [1] fluirão. Existem equipes de branding e conceitos para criar a estética. Claro que há também as equipes de construção indo à loja de ferragens e comprando madeira. Eventualmente, há os engenheiros de software colando código juntos para construir os vários aplicativos, o que é onde eu acabei entrando. Este post no blog apenas descreverá o software, mas isso não deve minimizar a incrível quantidade de trabalho que foi necessário em muitas outras camadas necessárias para que o GenLatte eventualmente abrisse suas portas.

[1] Eles ainda são clientes se você não cobrar nada?

Como o GenLatte funciona

No seu núcleo, o GenLatte é um aplicativo Flutter com uma base de dados Firebase.

Zoomando em um passo mais, é um monorepo com projetos separados de Flutter, Firebase e código compartilhado. Usar um monorepo nos permite deduplicar dependências, compartilhar lógica de negócios e executar implantações atômicas. O aplicativo Flutter também roda em iOS e Android, mas os clientes interagiam apenas com a versão web. Usamos Cloud Build e Firebase Hosting para manter nossa história de implantação longe de Alguém executa $firebase deploy no seu laptop. No servidor, temos uma mistura de funções disparadas e chamáveis HTTP, dando ao aplicativo flexibilidade entre fluxos de dados explícitos e gerenciamento reativo de dados.

Dentro do aplicativo Flutter, construímos 5 interfaces de usuário separadas: a tela kiosk onde os participantes sonolentos de conferências pedem um café, uma tela barista para mostrar novas ordens, uma tela moderadora para verificar a segurança de cada envio, uma grande tela de fila para dar aos clientes uma ideia de quando esperar seu drink e uma puramente fantasiosa “tela de pedidos recentes” para exibir os últimos 13 pedidos como bolhas flutuantes e permitir que todos tenham uma última chance de apreciar sua criação digital.

Segurança de demonstração

Uma das principais preocupações da Google em qualquer demonstração que envolva conteúdo gerado pelo usuário é prevenir voluntários de generosamente doar suas habilidades de red-team para publicar conteúdo inapropriado para consumo público. Na prática, isso se materializa em várias preocupações distintas:

• Prevenindo usuários autorizados de criar conteúdo NSFW: Para prevenir isso, o GenLatte implementou uma abordagem em três níveis. Primeiro, strings brutas de “happy place” foram enviadas para Gemini Flash para moderação rápida, juntamente com cerca de trinta exemplos delineando quais temas indesejáveis queríamos bloquear. Em seguida, quando um happy place era aprovado, começávamos a gerar imagens e confiávamos na própria formação interna da Nano Banana para produzir apenas conteúdo SFW. No final do processo, nosso moderador humano aprovaria manualmente cada imagem. Com tudo isso em vigor, estávamos bastante confiantes de que o GenLatte não envergonharia a Google.
• Prevenindo o spoofing de contas administrativas: Outra maneira pela qual usuários autorizados podem potencialmente quebrar seu aplicativo é visitando telas que concedem permissões elevadas que você não pretendia compartilhar. Dada a tela back-of-house do moderador e barista no GenLatte, isso era óbvio um risco. Nosso escolha de implantar na web, onde os usuários podem navegar arbitrariamente usando a barra de URL do navegador, aumentou ainda mais a pressão. Para resolver isso, nossa implementação GoRouter possui roteamento declarativo centralizado, com verificações de roteamento para garantir que cada visita a uma página seja legal para o usuário específico, conforme determinado por reivindicações personalizadas do Firebase.
• Prevenindo escritas não autorizadas no Firestore: Usuários autorizados usando o aplicativo é uma coisa, mas alguém lendo os conteúdos de firebase_options.dart, iniciando um novo projeto e vendo o que pode causar caos é outra. Para prevenir isso, vinculamos todas as leituras e escritas a credenciais de conta estritas com regras de segurança rigorosas, das quais você pode se inspirar para seus próprios projetos.

Entregando imagens divertidas

Uma vez que nos convencemos de que nosso aplicativo não seria hackeado na demonstração, passamos a garantir que o Gemini pudesse entregar imagens consistentes que ficariam ótimas em um café. Esta parte do projeto pode ter envolvido tardes gratuitamente super-estimuladas no escritório, então é provavelmente sem surpresa que rapidamente concluímos.

No seu núcleo, nosso sistema envolvia upscale do happy place do usuário, um prompt limitado a 50 caracteres mas frequentemente apenas uma palavra ou duas, em quatro solicitações de imagem únicas e altamente específicas. Por exemplo, para um usuário que entrou com um happy place de “em casa com minha família”, o GenLatte poderia pedir à Nano Banana uma imagem de “Uma confortável casa na floresta com fogo na lareira e jantar esperando na mesa. A casa está cheia de familiares e amigos, todos celebrando e desfrutando da companhia um do outro. A iluminação e o clima é…” (e assim por diante). O Gemini lidava com este upscale, significando que as quatro solicitações eram todas diferentes; entregando a variedade de imagens que os usuários viram dentro do aplicativo.

Também otimizamos o Nano Banana para composições agradáveis; especificamente, “uma curva S principal em direção ao assunto”, que girava entre estradas, rios, colinas, litorais ou outras abstrações. Esta técnica de prompt aumentou significativamente a porcentagem de imagens atraentes e utilizáveis do Nano Banana.

Para a segunda aparição do GenLatte, como Antigravity Coffee Co, no I/O em Mountain View este mês de maio, atualizamos nossos prompts para girar entre diferentes composições sugeridas. Isso mantinha as coisas frescas tanto para o pessoal do evento que viu centenas de imagens por dia quanto para os indivíduos que simplesmente queriam uma imagem evocativa para seu café.

Modificando as imagens em tempo real

O verdadeiro encanto do GenLatte não vinha apenas de criar uma imagem e imprimir na xícara; mas de ajustá-la especificamente às preferências exatas da pessoa. Por trás desse botão Ajustar, havia quatro perguntas, pré-escritas pelo Gemini, sobre como a imagem poderia ser modificada.

Essas imagens eram derivadas da própria solicitação original, ampliada; então voltando à nossa família acolhedora feliz de antes, o Gemini poderia ter fornecido perguntas sobre que tipo de comida havia na mesa, se havia mais ou menos pessoas, ou se a celebração era por algum evento específico da vida. As outras “em casa com minha família” felizes que o usuário viu podem ter seguido caminhos diferentes, e assim ajustar essas seleções faria surgir perguntas apropriadas para aquelas imagens.

Uma vez que as respostas do usuário estavam em mãos, voltamos ao Nano Banana com a mesma solicitação, enviada várias vezes simultaneamente, para obter novas obras de arte. A solicitação parecia algo assim:

Depois de ver uma imagem derivada desta solicitação original:

{{original_prompt}}

O usuário solicitou essas alterações:

{{questions[0].body}}: {{questions[0].answer}}
{{questions[1].body}}: {{questions[1].answer}}
{{questions[2].body}}: {{questions[2].answer}}
{{questions[3].body}}: {{questions[3].answer}}

Por favor, gere esta nova imagem.

De Las Vegas a Mountain View, foi mágico para nós, após meses de construir o GenLatte, ver as pessoas sorrindo com suas imagens modificadas!

A2UI e GenLatte

GenLatte não é apenas um exemplo de Flutter e Firebase ou mesmo um exemplo de IA gerativa; mas sim, um GenUI demo. GenUI pode assumir muitas formas diferentes, mas para o GenLatte, conectou os pontos entre mostrar aos usuários a interface correta para responder uma das perguntas do Gemini. O detalhe-chave é que nem todas as perguntas são melhor atendidas pela mesma UI. Uma pergunta como “Sua família está celebrando um evento de vida específico?” é aberta e, portanto, requer um campo de texto; mas “Que horas do dia é isso?” provavelmente tem apenas algumas opções relevantes e, por isso, é melhor servida por um botão de rádio.

Há uma variedade de maneiras para implementar GenUI em um aplicativo. No extremo conservador estão experiências controladas, onde o agente escolhe widgets de um catálogo grosseiro para renderizar interfaces previsíveis. Aplicativos mais ousados podem dar aos seus agentes mais liberdade, compostos UIs a partir de catálogos finos-granularidade para renderizar quase tudo que é imaginável. Para o GenLatte, optamos pelo extremo conservador: expor um pequeno catálogo de widgets personalizados que o agente poderia usar para exibir perguntas. Isso permitiu ao Gemini escolher a correta no momento enquanto garantia que a composição geral permanecesse dentro das nossas diretrizes de design.

Se você gostaria de ver o que Gemini pode fazer com mais liberdade, confira Hatcha, um aplicativo para planejamento de festas. Ele vai muito além do GenUI delegando significativamente mais responsabilidade em tempo real ao Gemini.

Três mil cafés depois...

Depois de servir 1.200 lattes no Google Cloud Next e outras 1.800 no Google I/O, é seguro dizer que o GenLatte foi um sucesso. Nunca estive mais cafeinado do que estava enquanto construía este demo ou atendendo a ambos os eventos, nem vi tantos sorrisos felizes em rostos imediatamente após usar um aplicativo.

O Flutter tornou a UI excêntrica um deleite para construir; desde seu suporte elegante para layouts dinâmicos e shaders personalizados, até sua capacidade de alvo múltiplos plataformas sem problemas. Firebase tornou o backend uma brisa: lidando com dores de cabeça de implantação e escalabilidade para nós e oferecendo vinculação de dados reativa em toda a pilha. Gemini e Nano Banana (é claro) transformaram os prompts felizes dos usuários em arte fantástica que foi um prazer ver tomar forma física. E, é claro, o verdadeiro herói da operação, nossos baristas, fizeram lattes excelentes - porque tudo isso seria um fracasso se o café não fosse bom!

Para ler o código do GenLatte, visite sua pasta no repositório flutter/demos. No entanto, tenha cuidado: o código nesse repositório não é mantido e oferecido apenas para fins inspiradores.

Estamos entusiasmados com o futuro do desenvolvimento de aplicativos em 2026. Com ferramentas como Flutter, Firebase e Gemini; a escala das experiências que você pode realmente entregar aos seus usuários cresceu exponencialmente.

Para começar com o GenUI, visite a documentação do Flutter. Nos conte se você tem uma ideia sobre como poderia usar esses padrões em seu próprio trabalho, e até lá — não podemos esperar para ver o que você constrói!