ScreenCoder: uma ferramenta para converter capturas de tela da interface do usuário em código HTML/CSS editável

O ScreenCoder é uma ferramenta de código aberto projetada para transformar capturas de tela ou esboços de design da interface do usuário (UI) em código HTML e CSS pronto para produção. Ele usa uma estrutura modular de inteligência múltipla para transformar designs complexos em código claramente estruturado e editável por meio de três etapas de compreensão visual, planejamento de layout e geração de código. Os desenvolvedores ou designers podem transformar rapidamente protótipos de design em páginas da Web reais, economizando tempo de codificação manual. O ScreenCoder oferece suporte a vários modelos de geração, como Doubao, Qwen, GPT e Gemini, que são adequados para diferentes necessidades de desenvolvimento. O código está disponível publicamente no GitHub, permitindo que os usuários façam download, modifiquem e implementem livremente.

Lista de funções

• Converta capturas de tela da interface do usuário ou esboços de design em código HTML/CSS.
• Oferece suporte a uma estrutura modular de corpo multiinteligente, dividida em três fases: reconhecimento visual, planejamento de layout e geração de código.
• Vários modelos de geração (Doubao, Qwen, GPT, Gemini) são suportados, e os usuários podem escolher de acordo com suas necessidades.
• Fornece saída de código editável para os desenvolvedores personalizarem os ajustes.
• Geração automática de pares de código de imagem em grande escala para otimizar o desempenho do modelo.
• Oferece suporte à prototipagem rápida e à implementação de interface com precisão de pixels.

Usando a Ajuda

Processo de instalação

Para usar o ScreenCoder, os usuários precisam primeiro fazer o download do código do repositório do GitHub e configurar o ambiente. Veja a seguir as etapas detalhadas de instalação:

1. armazém de clones
   Execute o seguinte comando no terminal para clonar o projeto ScreenCoder localmente:
   "`bash
   git clone https://github.com/leigest519/ScreenCoder.git
   cd screencoder

2. Criação de um ambiente virtual
   Para evitar conflitos de dependência, é recomendável criar um ambiente virtual Python:
   "`bash
   python3 -m venv .venv
   fonte .venv/bin/activate

Para usuários do Windows:source .venv\Scripts\activate.

3. Instalação de dependências
   Instale as bibliotecas Python necessárias para o projeto:
   "`bash
   pip install -r requirements.txt

4. Modelos de configuração e chaves de API
   O ScreenCoder é compatível com vários modelos de geração (por exemplo, Doubao, Qwen, GPT, Gemini). Os usuários precisam criar o arquivo de chave de API correspondente no diretório raiz do projeto (por exemplodoubao_api.txteqwen_api.txtetc.) e cole a chave da API no arquivo.
   Então, noblock_parsor.pyresponder cantandohtml_generator.pyno arquivo de configuração para definir o modelo desejado. Por exemplo, modifique os parâmetros do modelo no arquivo de configuração para:
   "`python
   modelo = "Doubao" # ou Qwen, GPT. Gêmeos

Processo de uso

A operação do ScreenCoder é dividida nas seguintes etapas, e os usuários podem concluir a conversão da interface do usuário em código por meio da linha de comando:

1. Detecção de blocos
   estar em movimentoblock_parsor.pyScript que analisa as capturas de tela da interface do usuário de entrada e identifica os principais componentes (por exemplo, barra de navegação, barra lateral, área de conteúdo etc.). O comando é o seguinte:
   "`bash
   python block_parsor.py

Essa etapa gera rótulos de componentes e informações de localização em preparação para o planejamento de layout subsequente.

2. Gerar código com placeholders
   estar em movimentohtml_generator.pyque gera o código HTML inicial com espaços reservados:
   "`bash
   python html_generator.py

O código de saída contém a estrutura da página e espaços reservados (por exemplo, blocos de imagens em cinza) para edição posterior.

3. Mapeamento de conteúdo e geração do código final
   Depois de gerar o código do espaço reservado, o ScreenCoder mapeia os componentes reconhecidos da interface do usuário para o código HTML/CSS final. Os usuários podem ajustar manualmente o código conforme necessário para garantir que o estilo e o layout atendam às expectativas.

Operação da função em destaque

• Reconhecimento visual (agente de aterramento)
  O módulo de reconhecimento visual do ScreenCoder analisa as capturas de tela da interface do usuário usando modelos linguísticos visuais (VLMs) para detectar e marcar automaticamente os principais elementos da interface, como botões, barras de navegação, caixas de texto etc. Esse recurso garante que a estrutura de código gerada seja altamente consistente com o design. Os usuários simplesmente fazem upload de capturas de tela em formato PNG ou JPG, e o sistema processa e gera automaticamente os rótulos dos componentes.
• Planejamento de layout (agente de planejamento)
  O módulo Layout Planning organiza os componentes identificados em uma estrutura de página hierárquica com base nos princípios de engenharia de front-end. Por exemplo, ele colocará a barra de navegação na parte superior, a barra lateral à esquerda e a área de conteúdo principal no centro. Os usuários não precisam especificar o layout manualmente, pois o sistema gerará automaticamente uma estrutura HTML razoável.
• Geração de código (Generation Agent)
  O módulo de geração de código gera código HTML e CSS com prompts adaptáveis. O código gerado é limpo, semanticamente claro e está em conformidade com os padrões modernos de desenvolvimento da Web. Os usuários podem copiar o código diretamente para o projeto após a geração ou ajustar o estilo e a funcionalidade conforme necessário.

advertência

• Certifique-se de que as capturas de tela de entrada sejam claras e que os elementos da interface do usuário estejam bem definidos, evitando imagens borradas ou excessivamente complexas.
• Verifique a validade da chave da API para garantir que o modelo selecionado seja atendido corretamente pela API.
• Se você precisar ajustar o código, é recomendável usar um editor de código (por exemplo, VS Code) para verificar e otimizar os estilos CSS após a geração.

Com as etapas acima, os usuários podem transformar rapidamente um design em código da Web utilizável, adequado para prototipagem rápida ou implantação em ambiente de produção.

cenário do aplicativo

1. Prototipagem rápida
   Os designers ou desenvolvedores precisam transformar rapidamente os designs de interface do usuário em protótipos interativos para a Web. O ScreenCoder gera automaticamente o código HTML/CSS para reduzir o tempo entre o design e o desenvolvimento.
2. Automação de front-end
   As equipes de desenvolvimento front-end querem automatizar a geração de código e reduzir as tarefas repetitivas. A estrutura modular do ScreenCoder fornece código de alta precisão para projetos de grande escala.
3. Aprendizagem e ensino
   Os iniciantes em programação ou em cursos de desenvolvimento front-end podem usar o ScreenCoder para transformar o design real da interface do usuário em código e aprender a estrutura e o estilo de escrita de HTML/CSS.
4. Desenvolvimento de interface entre plataformas
   Os desenvolvedores precisam usar o mesmo design para várias plataformas (por exemplo, Web e móvel), e o código gerado pelo ScreenCoder pode ser usado como base para fazer pequenos ajustes para se adaptar a diferentes dispositivos.

QA

1. Quais formatos de arquivo o ScreenCoder suporta?
   O ScreenCoder é compatível com capturas de tela da interface do usuário ou esboços de design nos formatos PNG e JPG. Certifique-se de que as imagens estejam nítidas e os elementos da interface do usuário bem definidos para obter os melhores resultados de conversão.
2. É necessário ter experiência em programação?
   Não é necessária nenhuma experiência aprofundada em programação, mas os usuários familiarizados com HTML/CSS podem ajustar melhor o código gerado. Os iniciantes podem usar o código gerado diretamente.
3. Como posso optar por gerar um modelo?
   existirblock_parsor.pyresponder cantandohtml_generator.pyDefina os modelos (por exemplo, Doubao, Qwen etc.) nele e forneça as chaves de API correspondentes. Modelos diferentes podem afetar a velocidade de geração e a qualidade do código, portanto, é recomendável testar de acordo com os requisitos.
4. O código gerado precisa ser ajustado manualmente?
   O código gerado geralmente está pronto para ser usado, mas projetos complexos podem exigir ajustes manuais no estilo CSS ou na estrutura HTML para atender a necessidades específicas.
5. O ScreenCoder é gratuito?
   O ScreenCoder é um projeto de código aberto, e o código está disponível publicamente de forma gratuita no GitHub. No entanto, o uso de determinados modelos generativos (por exemplo, GPT, Gemini) requer a obtenção de chaves de API por conta própria, o que pode envolver custos.