Geração Automatizada de Código Frontend a Partir de Capturas de Tela via Deep Learning

O Pix2Code é um modelo de rede neural profunda projetado para traduzir capturas de tela de Interfaces Gráficas de Usuário (GUI) diretamente em código de marcação e estilo. O sistema utiliza uma abordagem de ponta a ponta para mapear características visuais em sintaxe de programação estruturada, operando como um compilador visual.

Pipeline de Processamento e Compiladores

O núcleo do sistema, implementado no módulo principal do modelo, opera através de um pipeline de três estágios:

  1. Extração de Características Visuais: A imagem de entrada é normalizada e processada por uma rede convolucional para extrair mapas de características espaciais.
  2. Decodificação Sequencial: Um modelo recorrente traduz os tensores visuais em uma linguagem de representação intermediária (DSL).
  3. Compilação para Plataforma: A DSL é parseada por compiladores específicos para gerar o código final.

O repositório inclui compiladores dedicados para diferentes ecossistemas:

  • web-compiler.py: Converte a DSL em HTML e CSS.
  • android-compiler.py: Gera layouts XML para Android.
  • ios-compiler.py: Produz código Swift/UIKit para iOS.

Preparação do Ambiente

A execução do modelo requer um ambiente Python legado, devido às versões específicas das bibliotecas de deep learning utilizadas na pesquisa original. As dependências críticas incluem:

keras==2.1.2
numpy==1.13.3
opencv-python==3.3.0.10
h5py==2.7.1
tensorflow==1.4.0

Para configurar o ambiente virtual e instalar os pacotes, execute:

python -m venv venv_pix2code
source venv_pix2code/bin/activate
pip install -r requirements.txt

Automação da Geração de Código

Em vez de invocar os scripts de linha de comando diretamente no terminal, é possível encapsular a lógica de inferência em um script Python orientado a objetos para processamento em lote ou individual. Abaixo está uma implementação reestruturada que abstrai a chamada aos módulos originais:

import subprocess
import sys
from pathlib import Path

class UICompiler:
    def __init__(self, model_dir: str, weights_name: str):
        self.base_dir = Path(model_dir)
        self.weights = weights_name

    def _execute_script(self, script_name: str, input_path: Path, output_dir: Path):
        output_dir.mkdir(parents=True, exist_ok=True)
        cmd = [
            sys.executable, script_name,
            str(self.base_dir), self.weights,
            str(input_path), str(output_dir)
        ]
        subprocess.run(cmd, check=True)

    def compile_single_screen(self, image_file: str, target_dir: str):
        img_path = Path(image_file)
        self._execute_script("sample.py", img_path, Path(target_dir))

    def compile_batch_screens(self, images_folder: str, target_dir: str):
        folder_path = Path(images_folder)
        self._execute_script("generate.py", folder_path, Path(target_dir))

if __name__ == "__main__":
    compiler = UICompiler(model_dir="../bin", weights_name="pix2code")
    
    # Processamento de um único arquivo de imagem
    compiler.compile_single_screen("../assets/mockup_test.png", "../output/single")
    
    # Processamento em lote de um diretório
    compiler.compile_batch_screens("../assets/screenshots/", "../output/batch")

Limitações Técnicas e Escopo

Esta implementação é estritamente um protótipo de pesquisa. O modelo não possui mecanismos para inferir lógica de negócios, estado da aplicação ou interatividade comlpexa, como manipulação de estado nativo ou scripts dinâmicos. A arquitetura atual não foi projetada para ser estendida para novos frameworks ou linguagens além dos três compiladores fornecidos, mantendo o escopo restrito à validação do paper original. O uso em ambientes de produção é desencorajado devido à falta de robustez e à incapacidade de gerar código limpo e manutenível em escala.

Tags: deep-learning computer-vision keras tensorflow ui-automation

Publicado em 5-30 14:13 por Thomas