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:
- Extração de Características Visuais: A imagem de entrada é normalizada e processada por uma rede convolucional para extrair mapas de características espaciais.
- Decodificação Sequencial: Um modelo recorrente traduz os tensores visuais em uma linguagem de representação intermediária (DSL).
- 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.