ControlGUI: Guiding Generative GUI Exploration through Perceptual Visual Flow

Resumo Técnico: ControlGUI

1. O Problema

A fase inicial de design de Interfaces Gráficas de Usuário (GUI) exige a exploração de um grande número de alternativas para estimular a criatividade e evitar o comprometimento prematuro com ideias. No entanto, as ferramentas atuais apresentam limitações significativas:

• Restrição Criativa ou Excesso de Especificação: Ferramentas baseadas em sketches ou restrições exigem inputs detalhados que designers não possuem nas fases iniciais, ou limitam a liberdade criativa ao ancorar ideias em exemplos existentes.
• Inadequação da IA Generativa Atual: Os sistemas de IA atuais dependem quase exclusivamente de prompts de texto. Isso falha em capturar a intenção do designer em termos de estrutura (layout, posicionamento de elementos) e percepção (fluxo visual, sequência de atenção do usuário).
• Falta de Controle Multimodal: Não existem métodos que permitam combinar flexivelmente texto, esboços (wireframes) e especificações de fluxo visual para gerar conceitos de baixa fidelidade rapidamente.

2. Metodologia

O ControlGUI é um sistema generativo baseado em modelos de difusão que permite a exploração de GUIs através de entradas multimodais flexíveis.

• Arquitetura Dual-Adapter:
  • O modelo é construído sobre o Stable Diffusion (um modelo de difusão latente).
  • Introduz dois adapters (módulos neurais leves) especializados que operam simultaneamente:
    1. Wireframe Adapter (Controle Local): Controla propriedades locais, como o posicionamento exato e o tipo de elementos da interface (botões, textos, imagens), garantindo fidelidade estrutural ao wireframe fornecido.
    2. Flow Adapter (Controle Global): Controla propriedades globais, especificamente o fluxo visual (a sequência em que os usuários devem olhar para os elementos). Este adapter utiliza embeddings derivados de modelos de previsão de scanpath (como o EyeFormer) para guiar a atenção do usuário na interface gerada.
• Entradas Multimodais: O sistema aceita qualquer combinação de três tipos de entrada:
  1. Prompt de Texto: Descreve o estilo, funcionalidade ou atributos visuais.
  2. Wireframe: Especifica o layout e os tipos de elementos.
  3. Fluxo Visual (Visual Flow): Define a ordem de atenção desejada (sequência de fixação dos olhos).
• Treinamento e Otimização:
  • Utiliza Class-Free Guidance (CFG) para equilibrar a diversidade e a aderência às condições de entrada.
  • Introduz uma Função de Perda de Consistência de Fluxo ($L_{flow}$) baseada em soft-DTW (Dynamic Time Warping diferenciável). Isso força o modelo a gerar interfaces cujos padrões de atenção previstos correspondam ao fluxo visual especificado, sem a necessidade de estudos de usuários reais durante o treinamento.
  • O treinamento ocorre em três estágios: primeiro o adapter de wireframe, depois o de fluxo, e finalmente um ajuste fino conjunto.

3. Contribuições Principais

O artigo apresenta três contribuições fundamentais para a área de HCI e IA Generativa:

1. Método de Controle Multimodal: O primeiro modelo de difusão capaz de integrar prompts de texto, wireframes e fluxos visuais como entradas combináveis e opcionais para a geração de GUIs.
2. Arquitetura Dual-Adapter: Uma inovação técnica que permite o controle simultâneo de aspectos estruturais (layout) e perceptivos (atenção do usuário), superando a limitação de modelos que tratam apenas um desses aspectos.
3. Dataset Multimodal em Grande Escala: A criação e disponibilização de um novo dataset contendo 72.500 GUIs (mobile e web) com anotações alinhadas: capturas de tela, wireframes rotulados, descrições textuais e scanpaths (trajetórias de olhar) preditos.

4. Resultados e Avaliação

O ControlGUI foi avaliado através de comparações quantitativas, qualitativas e um estudo com usuários.

• Avaliação Quantitativa:
  • O modelo superou baselines (como ControlNet, IP-Adapter e GPT-5) em métricas de qualidade perceptual (ManIQA, MUSIQ) e alinhamento com o prompt (CLIP-IQA).
  • Foi a única metodologia capaz de alinhar o fluxo de atenção (medido por Soft-DTW), demonstrando controle sobre a percepção do usuário.
• Avaliação Qualitativa:
  • O sistema gera galerias de designs diversos e realistas em segundos.
  • A adição de wireframes melhora a fidelidade estrutural, enquanto o fluxo visual guia a atenção de forma intencional.
• Estudo com Usuários (18 participantes):
  • Diversidade e Criatividade: Os participantes avaliaram o ControlGUI como significativamente mais diverso e criativo do que o uso de prompts de texto apenas. O sistema atuou como um catalisador para ideias, permitindo a exploração de espaços de design mais amplos.
  • Controle e Alinhamento: O uso de multimodalidade (wireframe + fluxo) aumentou drasticamente a sensação de controle e a satisfação com o alinhamento da saída com a intenção do designer.
  • Limitações Identificadas: Os usuários notaram problemas com a legibilidade do texto gerado (gibberish) e baixa resolução, comuns em modelos de difusão atuais, mas valorizaram a ferramenta para a fase de ideação (baixa fidelidade).
  • Solução Proposta: O artigo inclui um pipeline de correção de texto guiado por Visão-Linguagem (LLaVA-Next) para substituir textos ilegíveis por conteúdo contextualmente apropriado.

5. Significado e Impacto

O ControlGUI representa um avanço significativo na interseção entre Design de Interface e IA Generativa:

• Mudança de Paradigma: Transita de uma geração baseada apenas em texto para uma abordagem multimodal que respeita tanto a estrutura quanto a cognição humana (atenção visual).
• Ferramenta de Ideação Rápida: Permite que designers explorem centenas de conceitos de baixa fidelidade em minutos, validando ideias estruturais e perceptuais antes de investir em protótipos de alta fidelidade.
• Futuro da Pesquisa: Estabelece a base para a criação de ferramentas de design assistido por IA que entendem não apenas "como a interface deve parecer", mas "como o usuário deve interagir e perceber" a interface, integrando métricas de usabilidade (como fluxo visual) diretamente no processo generativo.

Em resumo, o ControlGUI preenche uma lacuna crítica ao fornecer uma ferramenta flexível que apoia a fase inicial e caótica do design, permitindo que designers expressem ideias vagas de forma estruturada e controlada, acelerando o processo criativo e melhorando a qualidade dos conceitos gerados.