DOne: Decoupling Structure and Rendering for High-Fidelity Design-to-Code Generation

O artigo apresenta o DOne, um framework que supera as limitações dos modelos de linguagem visuais na geração de código a partir de designs ao desacoplar a compreensão estrutural do renderizado de elementos, utilizando novos módulos de segmentação e recuperação para alcançar maior fidelidade visual e produtividade.

O essencial

Imagine que você tem um desenho incrível de um site feito por um designer (uma "foto" do site) e quer transformá-lo automaticamente em código real (HTML e CSS) para que ele funcione na internet.

O problema é que, até agora, os "robôs" (Inteligências Artificiais) que faziam essa tarefa eram como pintores que tentam copiar uma pintura complexa de uma só vez, sem olhar os detalhes. Eles conseguiam capturar a ideia geral, mas o resultado final ficava torto, as cores erradas, faltavam botões ou os ícones viravam caixas cinzas genéricas. Eles ficavam sobrecarregados tentando ver o "todo" e perdiam os "detalhes".

O artigo que você enviou apresenta uma nova solução chamada DOne. Para explicar como ele funciona, vamos usar uma analogia de uma construção de uma casa:

O Problema: O "Engenheiro Sobrecarregado"

Antes do DOne, os sistemas tentavam pegar a foto do site e, de uma só vez, dizer: "Ok, vou construir essa casa inteira agora!".

• O resultado: Eles confundiam onde ficava a cozinha com o quarto, esqueciam de colocar as janelas (ícones) ou faziam a parede ficar torta. Era como tentar montar um quebra-cabeça de 10.000 peças olhando apenas para a caixa fechada.

A Solução: A Equipe Especializada do DOne

O DOne muda a estratégia. Em vez de um único robô tentando fazer tudo, ele divide o trabalho em três especialistas que trabalham em equipe, como se fosse uma obra de construção civil organizada:

1. O Arquiteto de Estrutura (Segmentação de Layout)

• O que faz: Em vez de olhar a foto inteira de uma vez, esse especialista olha para o desenho e desenha linhas imaginárias, dividindo a página em blocos lógicos: "Aqui é o topo (cabeçalho)", "Aqui é a barra lateral", "Aqui é o conteúdo principal".
• A Analogia: É como se você pegasse um bolo complexo e cortasse em fatias antes de decorar. Isso evita que o robô se confunda e misture o topo com o rodapé. Ele cria um "mapa" da estrutura antes de começar a construir.

2. O Caçador de Detalhes (Recuperação de Elementos)

• O que faz: Enquanto o Arquiteto cuida das paredes, este especialista é um "detetive" que varre a imagem procurando cada pequeno item: botões, ícones, logotipos e fotos específicas.
• A Analogia: Imagine que você está montando um quebra-cabeça. Enquanto um monta as bordas, este outro garimpa todas as peças pequenas e coloridas para garantir que nenhuma peça (como um ícone de "carrinho de compras") seja perdida ou substituída por um quadrado cinza. Ele garante que a "peça do quebra-cabeça" certa seja usada no lugar certo.

3. O Mestre de Obras (Geração Guiada por Esquema)

• O que faz: Agora que temos o mapa (estrutura) e as peças (detalhes), este especialista recebe um "plano de construção" (um esquema JSON) que diz exatamente: "Coloque o botão X dentro da área Y, com a cor Z".
• A Analogia: É como um mestre de obras que recebe um plano detalhado. Ele não precisa "adivinhar" onde as coisas vão ficar. Ele apenas segue o plano rigoroso para montar o código. Isso garante que o site final fique idêntico ao desenho original, sem erros de alinhamento.

O Resultado: O "HiFi" (Alta Fidelidade)

Os autores criaram um novo teste chamado HiFi2Code (como um "exame de qualificação" muito difícil) para ver quem fazia o melhor trabalho.

• O DOne passou no exame com nota máxima.
• Ele não apenas fez o site parecer parecido, mas reproduziu a fidelidade visual (cores, posições, ícones) de forma muito superior aos concorrentes.
• Para os desenvolvedores humanos, isso significa que eles podem economizar 3 vezes mais tempo. Em vez de passar 10 horas corrigindo o código gerado, eles passam 3 horas apenas ajustando detalhes finos.

Resumo em uma frase

O DOne é como substituir um pintor que tenta copiar uma foto inteira de uma vez por uma equipe de especialistas (um que divide a foto em partes, um que encontra cada detalhe e um que monta tudo seguindo um plano), garantindo que o site final seja uma cópia perfeita do desenho original, sem erros e muito mais rápido.

Resumo técnico

1. O Problema: O "Gargalo Holístico"

O artigo identifica que, embora os Modelos de Linguagem e Visão (VLMs) tenham avançado na geração de código a partir de designs (Design-to-Code), eles ainda sofrem de um "gargalo holístico".

• Falha na Reconciliação: Os modelos atuais lutam para equilibrar a recuperação da hierarquia estrutural de alto nível com a reconstrução visual de detalhes finos.
• Consequências: Isso resulta frequentemente em distorções de layout, omissão de elementos críticos (como ícones e logotipos) e substituição de ativos visuais por espaços reservados genéricos.
• Causas Raiz:
  1. Análise Hierárquica Errônea: Confusão entre seções semânticas (ex: confundir barra lateral com bloco de conteúdo).
  2. Perda de Elementos Visuais: Falha em detectar ativos discretos devido à densidade ou proporções extremas.
  3. Sobrecarga de Processamento: Tentar processar uma página complexa como uma imagem monolítica excede a capacidade dos VLMs atuais, forçando um compromisso entre integridade estrutural e detalhes locais.

2. Metodologia: A Framework DOne

Para superar essas limitações, os autores propõem o DOne, um framework end-to-end que desacopla a compreensão estrutural da renderização de elementos. A abordagem segue uma estratégia hierárquica em três estágios:

A. Segmentação de Layout Aprendida (WebSeg)

• Em vez de usar cropping heurístico (que ignora o contexto semântico), o DOne utiliza um modelo de segmentação aprendido (RT-DETR) treinado no novo dataset WebSeg.
• Função: Decompõe a imagem de design em blocos semânticos significativos (cabeçalhos, barras laterais, conteúdo principal).
• Otimização: Inclui um algoritmo de pós-processamento para resolver sobreposições de caixas, garantindo uma estrutura de layout limpa e não sobreposta antes da geração de código.

B. Recuperação de Elementos Visuais de Alta Granularidade

• Para lidar com desafios únicos de UI (proporções extremas, alta densidade de ícones), o DOne emprega uma estratégia de detecção híbrida:
  • DETR: Para estruturas que definem o layout e dependem de contexto global (ex: barras de navegação grandes).
  • YOLOv10: Para elementos pequenos e densos (ex: ícones, botões, rótulos de texto).
• Resultado: Identificação e preservação precisa de ativos visuais, que são armazenados para uso posterior na geração de código.

C. Geração Guiada por Esquema (Schema-Guided Generation)

• O DOne não gera código diretamente da imagem. Primeiro, infere um Esquema de Layout (um blueprint JSON hierárquico) que atua como uma representação intermediária.
• Processo:
  1. O VLM recebe o esquema estrutural e as coordenadas dos elementos detectados.
  2. O esquema "ancora" os ativos visuais dentro de seus contêineres semânticos corretos.
  3. O VLM gera o código final (HTML/Tailwind CSS) focando apenas no preenchimento do esqueleto estrutural e na estilização, garantindo fidelidade visual e corretude estrutural.

3. Contribuições Principais

1. Framework DOne: Uma nova arquitetura unificada que integra segmentação de layout aprendida, recuperação de elementos e geração guiada por esquema.
2. Novos Datasets:
   • WebSeg: Um dataset de 30.000 rascunhos de design com anotações de layout detalhadas para treinar a segmentação.
   • HiFi2Code: Um benchmark de avaliação com 200 páginas web modernas, caracterizado por complexidade de layout significativamente maior e densidade de elementos do que datasets existentes (como Design2Code ou Web2Code).
3. Validação Empírica: Demonstração de que a abordagem desacoplada supera métodos state-of-the-art em fidelidade visual e produtividade.

4. Resultados e Avaliação

Os experimentos foram conduzidos no dataset HiFi2Code utilizando vários backbones de VLM (Claude-3.7-Sonnet, Gemini-2.5-Pro, Qwen-VL-Max).

• Desempenho Quantitativo:
  • O DOne superou os métodos existentes (S2C, CoT2C, DCGen) em mais de 10% na pontuação GPT Score (avaliação de similaridade visual de alto nível).
  • Alcançou um CLIP Score de 0.7435 (com Claude-3.7-Sonnet), indicando alta similaridade visual com o design original.
  • Em métricas de granularidade fina (cor, texto, posição), o DOne demonstrou superioridade, especialmente na correspondência de cores (0.461 vs <0.07 nos baselines), provando que ele renderiza ativos reais e não apenas wireframes.
• Avaliação Humana:
  • Desenvolvedores e designers preferiram o DOne em 58,6% das comparações diretas contra os concorrentes.
  • Produtividade: Em testes de eficiência, o uso do DOne reduziu o tempo de conclusão de tarefas de 9,81 minutos para 3,18 minutos (um ganho de 3x), mantendo alta fidelidade visual.

5. Significado e Impacto

O trabalho DOne representa um avanço significativo na automação de desenvolvimento front-end ao resolver o problema fundamental da "alucinação estrutural" dos VLMs. Ao introduzir uma camada intermediária de raciocínio estrutural (o esquema) e desacoplar a detecção de elementos da geração de código, o framework permite a criação de interfaces web complexas e de alta fidelidade que eram anteriormente impossíveis de gerar automaticamente com precisão. A liberação dos datasets WebSeg e HiFi2Code estabelece novos padrões para pesquisa e avaliação futura nesta área, focando em cenários de produção realista em vez de designs simplificados.