Pesquisadores da Apple publicaram detalhes sobre uma ferramenta experimental chamada SQUIRE, que ajuda os desenvolvedores a explorar e desenvolver ideias de interface com mais controle. Aqui estão os detalhes.

Uma Abordagem Interessante para Prototipagem de Interface com AI

No novo artigo intitulado "SQUIRE: Slot QUery Intermediate REpresentations para Escrita de UI Interativa", um grupo de desenvolvedores da Apple propõe uma maneira inovadora de abordar interfaces geradas por AI.

Os pesquisadores explicam que a linguagem natural traz mais flexibilidade para muitos aspectos do processo de desenvolvimento, mas também traz duas principais dificuldades:

Primeiro, a linguagem natural pode ser ambígua por si só, dificultando a comunicação exata das intenções dos desenvolvedores. Em segundo lugar, o modelo pode responder de maneira imprevisível, exigindo que o desenvolvedor faça novas solicitações por tentativa e erro para corrigir alterações indesejadas.

É aqui que o SQUIRE entra em cena. É uma interface visual que permite aos desenvolvedores criar e desenvolver protótipos de UI passo a passo, proporcionando um controle mais claro sobre os resultados.

Do estudo:

No SQUIRE, os usuários começam um projeto fornecendo uma solicitação que define seus objetivos para a UI e adicionam dados de exemplo que contêm informações que o SQUIRE pode usar como referência. Os usuários orientam o SQUIRE a preencher lacunas que representam funcionalidades ausentes, construindo a UI como uma árvore de componentes de cima para baixo. Em resposta a esse tipo de solicitação, o SQUIRE gera uma lista de alternativas apropriadas especificamente contextualizadas para o espaço vazio na UI incompleta. Clicar em cada alternativa facilita a visualização das diferenças, atualizando instantaneamente uma prévia ao vivo e o código básico. O usuário também pode fazer solicitações direcionadas para alterar a aparência de áreas específicas da UI, garantindo que nenhum código fora do escopo desejado será alterado. Em resposta a esse tipo de solicitação, o SQUIRE gera controles temporários que permitem ao usuário aplicar rapidamente alterações semanticamente relacionadas sem exigir novas solicitações. Em todos os casos, o LLM atua como um assistente, oferecendo opções razoáveis para a avaliação do usuário, mas deixando a autoridade de aceitar ou rejeitar as sugestões com o usuário.

Em outras palavras, as solicitações em linguagem natural ainda eram a maneira como os desenvolvedores interagiam com o SQUIRE, mas cada solicitação estava ligada a uma parte específica da UI e não afetava toda a interface de uma só vez.

Com base nas observações de 11 desenvolvedores front-end que usaram o SQUIRE para desenvolver protótipos de interface, os pesquisadores descobriram que os participantes puderam explorar e iterar diferentes designs de UI com uma forte sensação de controle, além de avaliar o sistema com uma alta pontuação em usabilidade e satisfação geral.

Além disso, eles observam que essa sensação de controle extra fez com que os desenvolvedores se sentissem mais confortáveis em explorar maneiras de fazer alterações, prever e reverter mudanças.

Novamente, do estudo:

Através dos dados coletados de 11 desenvolvedores front-end, observamos que (1) as interações do SQUIRE frequentemente incentivavam os participantes a explorar, não apenas usando o SQUIRE como um acelerador de código, (2) os participantes eram incentivados a assumir riscos ao fazer alterações, sabendo que as consequências de decisões incomuns poderiam ser revertidas sem atrito, (3) os participantes tinham confiança de que o SQUIRE atendia suas intenções ao fazer alterações, e (4) os participantes estavam geralmente satisfeitos com a qualidade do código e das imagens geradas pelo sistema.

A Estrutura Interna do SQUIRE

Em vez de gerar código de interface diretamente a partir das solicitações dos usuários, o SQUIRE primeiro cria sua própria representação intermediária da interface, chamada SquireIR, modelando a UI como uma árvore de componentes com lacunas nomeadas que podem ser preenchidas ao longo do tempo, como no exemplo abaixo:

Essa estrutura também pode incluir marcadores de posição para partes ainda não definidas (por exemplo, um rótulo de botão, uma imagem ou uma seção de conteúdo) e várias alternativas de UI possíveis. Por exemplo, pode representar o mesmo conteúdo como uma lista ou uma grade.

Depois disso, o SQUIRE converte essa representação em código usando HTML, CSS e JavaScript, gerenciando a estrutura final da UI com Web Components.

Outro aspecto importante do SQUIRE é como ele gerencia as alterações.

Quando um desenvolvedor deseja ajustar um botão ou alterar um layout, apenas aquela parte é atualizada, enquanto o restante permanece inalterado.

Segundo os pesquisadores, isso ajuda a evitar os ciclos de tentativa e erro vistos em muitas ferramentas de codificação com AI; devido à imprevisibilidade geral dos LLMs, o modelo pode fazer mais alterações do que o desenvolvedor pretendia.

Essa estrutura também permite que o SQUIRE sugira várias opções a cada passo, permitindo que os desenvolvedores comparem rapidamente diferentes versões sem perder seu trabalho anterior.

Diferentemente de muitos artigos técnicos, este estudo não fornece detalhes sobre o treinamento do modelo, arquitetura ou dados. Embora os pesquisadores tenham mencionado que o SQUIRE funciona com o GPT-4o da OpenAI, o foco do artigo é no design do sistema e no modelo de interação.

O SQUIRE não está disponível ao público em geral e seu uso é limitado aos 11 desenvolvedores que participaram do estudo. No entanto, não é difícil imaginar como isso poderia ser aplicado em futuras versões do Xcode ou em outras ferramentas de desenvolvimento feitas pela Apple.

Para saber mais sobre o SQUIRE, você pode seguir este link.

Produtos que Valem a Pena Conferir na Amazon

  • David Pogue – 'Apple: Os Primeiros 50 Anos'
  • MacBook Neo
  • Logitech MX Master 4
  • AirPods Pro 3
  • AirTag (2ª Geração) – Pacote com 4
  • Apple Watch Series 11
  • Adaptador CarPlay Sem Fio