Na computação tradicional, as interfaces do usuário são predefinidas. Botões, menus e janelas são cuidadosamente codificados pelos desenvolvedores. Mas e se uma interface pudesse ser gerada em tempo real, adaptando-se ao contexto do usuário a cada interação? Exploramos essa questão criando um protótipo de pesquisa (veja o app de demonstração no Google AI Studio) para proporcionar uma experiência de computação generativa e infinita.
Nosso protótipo simula um sistema operacional no qual cada tela é gerada em tempo real por um modelo de linguagem grande. Ele usa o Gemini 2.5 Flash-Lite, um modelo cuja baixa latência é fundamental para criar uma interação responsiva que pareça instantânea. Em vez de navegar em um sistema de arquivos estático, o usuário interage com um ambiente que o modelo cria e recria a cada clique. Esta postagem descreve os principais conceitos técnicos por trás desse protótipo.
Para gerar uma IU em tempo real, é necessário fornecer ao modelo uma estrutura e um contexto claros para cada solicitação. Projetamos nosso prompt dividindo a entrada do modelo em duas partes: uma "constituição da IU" e uma "interação da IU".
A constituição da IU é um prompt do sistema que contém um conjunto fixo de regras para a geração da IU. Essas regras definem elementos consistentes, como a criação de estilo no nível do SO, o formato da tela inicial e a lógica para a incorporação de elementos como mapas.
A interação da IU é um objeto JSON que captura a ação mais recente do usuário, como um clique do mouse em um ícone. Esse objeto atua como a consulta específica que instrui o modelo a gerar a próxima tela. Por exemplo, clicar em um ícone "Salvar nota" no aplicativo Bloco de notas pode gerar um objeto da seguinte forma:
{
// `id`: The unique ID from the button's `data-interaction-id` attribute.
id: 'save_note_action',
// `type`: The interaction type from `data-interaction-type`.
type: 'button_press',
// `value`: Because the button has a `data-value-from` attribute, the system
// retrieves the content from the textarea with the ID 'notepad_main_textarea'.
value: 'Meeting notes\n- Discuss Q3 roadmap\n- Finalize budget',
// `elementType`: The HTML tag of the element that was clicked.
elementType: 'button',
// `elementText`: The visible text inside the button.
elementText: 'Save Note',
// `appContext`: The ID of the application the user is currently in.
// This comes from the `activeApp` state in `App.tsx`.
appContext: 'notepad_app'
}Essa abordagem de configuração de contexto em duas partes permite que o modelo mantenha uma aparência e um funcionamento consistentes ao gerar novas telas com base em entradas específicas do usuário em tempo real.
Uma única interação fornece contexto imediato, mas uma sequência de interações conta uma história mais completa. Nosso protótipo pode usar um rastreamento das N interações anteriores para gerar uma tela mais relevante em termos de contexto. Por exemplo, o conteúdo gerado em um app de calculadora pode variar dependendo de o usuário ter visitado anteriormente um carrinho de compras ou um app de reserva de viagens. Ao ajustar a duração desse rastreamento de interações, podemos ajustar o equilíbrio entre a acurácia contextual e a variabilidade da IU.
Para que o sistema pareça rápido, não podemos esperar que o modelo gere toda a tela da IU antes da renderização. Nosso protótipo usa o streaming de modelos e o analisador nativo do navegador para implementar a renderização progressiva. À medida que o modelo gera códigos HTML em blocos, nós o anexamos continuamente ao estado de nosso componente. Em seguida, o React renderiza novamente o conteúdo, permitindo que o navegador exiba elementos HTML válidos assim que são recebidos. Para o usuário, isso cria a experiência de uma interface que se materializa na tela quase que instantaneamente.
Por padrão, nosso modelo gera uma nova tela a partir do zero com cada entrada do usuário. Isso significa que visitar a mesma pasta duas vezes pode produzir conteúdos completamente diferentes. Essa experiência não determinística e sem estado talvez não seja sempre a preferida, uma vez que a GUI com a qual estamos acostumados é estática. Para introduzir a manutenção de estado em nosso protótipo, o sistema de demonstração tem a opção de criar um cache em memória para modelar um gráfico de IU específico de sessão. Quando um usuário navega para uma tela que já foi gerada, o sistema disponibiliza a versão armazenada do gráfico, sem consultar o Gemini novamente. Quando o usuário solicita uma nova tela que não está no cache, o gráfico de IU se expande de forma incremental. Esse método fornece o estado sem comprometer a qualidade da saída generativa, o que pode ser um efeito colateral da simples redução da temperatura de amostragem do modelo.
Embora esse seja um protótipo conceitual, o framework subjacente pode ser aplicado a casos de uso mais práticos.
Explorar novos conceitos como esse ajuda a entender como novos paradigmas sobre a interação entre humanos e computadores estão evoluindo. Com o aumento da velocidade e eficiência dos modelos, acreditamos que as interfaces generativas representem uma área promissora para pesquisa e desenvolvimento futuros.
