ScreenCoder : Convertissez vos captures de design en code HTML/CSS propre et éditable 239

ScreenCoder est un outil d'IA open source capable de convertir n'importe quelle capture d'écran de design en code front-end HTML/CSS bien structuré et éditable. Il s'appuie sur une architecture modulaire multi-agents, combinant la compréhension visuelle, l'analyse de la mise en page et la génération de code, afin de produire un code à la sémantique précise et à la mise en page exacte. Les utilisateurs peuvent facilement ajuster la structure et le style de l'interface, permettant ainsi une transition fluide du design vers une interface front-end opérationnelle. Il convient au prototypage rapide et aux projets nécessitant une fidélité au pixel près, et améliore significativement l'efficacité du développement.

Fonctionnalités principales de ScreenCoder

• Conversion de capture d'écran en code front-end : ScreenCoder permet de transformer en un clic des captures d'écran UI ou des maquettes de design en code HTML et CSS bien structuré.

• Restauration haute fidélité : le code généré par ScreenCoder est très proche du design original en termes de mise en page visuelle et de structure sémantique, garantissant un alignement au pixel près et une fonctionnalité complète.

• Flexible et éditable : les utilisateurs peuvent librement modifier la structure de mise en page et les propriétés de style générées, ce qui facilite le développement ultérieur et les ajustements personnalisés.

• Intégration multi-modèles : compatible avec de nombreux grands modèles populaires, comme Doubao, Qwen, GPT, Gemini, etc., permettant aux utilisateurs de choisir le moteur de génération selon leurs besoins.

• Sortie prête à l'emploi : le code généré est de qualité production et peut être utilisé directement dans un projet, prenant en charge la construction rapide de prototypes ou d'interfaces front-end complètes.

Architecture technique de ScreenCoder

• La technologie clé de ScreenCoder consiste à diviser la tâche complexe « de l'UI au code » en trois sous-tâches spécialisées, chacune étant prise en charge par un agent dédié :

• Agent d'ancrage (Grounding Agent) : utilise un modèle vision-langage (VLM) pour détecter et étiqueter les composants clés de l'interface UI.

• Agent de planification (Planning Agent) : organise ces composants en un arbre de mise en page hiérarchisé, en suivant les bonnes pratiques de l'ingénierie front-end.

• Agent de génération (Generation Agent) : génère de manière adaptative un code de haute qualité à partir de l'arbre de mise en page et des instructions de l'utilisateur.

Cas d'utilisation de ScreenCoder

• Accélération du développement front-end : conversion rapide de captures d'écran UI en code HTML/CSS de haute qualité, raccourcissant les cycles de développement front-end.

• Collaboration design et développement : transformation directe des captures d'écran de design en code exploitable, favorisant une collaboration fluide entre les équipes de design et de développement.

• Prototypage rapide : transformation instantanée de concepts de design en prototypes front-end interactifs, accélérant la validation précoce et les tests utilisateurs du design produit.

• Éducation et formation : utilisé comme outil pédagogique pour aider les étudiants et les développeurs débutants à comprendre la relation entre le design UI et le code front-end.

• Petites équipes et startups : offre une solution efficace de génération de code aux petites équipes et startups disposant de ressources limitées.

Comment utiliser ScreenCoder

Installation et déploiement

1. Cloner le dépôt : exécutez la commande suivante dans le terminal pour cloner le projet ScreenCoder en local :

git clone https://github.com/leigest519/ScreenCoder.git
cd ScreenCoder

2. Créer un environnement virtuel : pour éviter les conflits de dépendances, il est recommandé de créer un environnement virtuel Python :

python3 -m venv .venv
source .venv/bin/activate

Pour les utilisateurs Windows : source .venv\Scripts\activate.

3. Installer les dépendances : installez les bibliothèques Python nécessaires au projet :

pip install -r requirements.txt

4. Configurer le modèle et la clé API :

• Créez à la racine du projet un fichier texte brut correspondant au modèle choisi (par exemple doubao_api.txt, qwen_api.txt, gpt_api.txt, gemini_api.txt), puis collez la clé API dans ce fichier.

• Configurez le modèle souhaité dans block_parsor.py et html_generator.py. Les options prises en charge sont : Doubao (par défaut), Qwen, GPT, Gemini.

Mode d'emploi

1. Génération initiale avec des espaces réservés :

Détection des blocs : exécutez la commande suivante pour analyser la capture d'écran UI saisie et identifier les composants clés :

python block_parsor.py

Génération du HTML initial avec espaces réservés : exécutez la commande suivante pour générer le code HTML initial contenant des espaces réservés (comme des blocs d'image gris) :

python html_generator.py

2. Génération du code HTML final :

Détection des espaces réservés : exécutez la commande suivante pour détecter les zones d'image à remplacer :

python image_box_detection.py

Exécution de UIED pour détecter les éléments UI précis : exécutez la commande suivante pour détecter les éléments UI précis dans la capture d'écran :

python UIED/run_single.py

Mappage des espaces réservés avec les éléments réels : exécutez la commande suivante pour aligner et mapper les espaces réservés avec les éléments UI réels :

python mapping.py

Remplacement des images d'espace réservé : exécutez la commande suivante pour remplacer les espaces réservés par les images recadrées réelles :

python image_replacer.py

3. Exécution simplifiée : si vous ne souhaitez pas exécuter les étapes une par une, vous pouvez lancer directement la commande suivante pour générer en un clic le code HTML final :

python main.py

Les fichiers de sortie seront enregistrés dans le répertoire output/, contenant index.html ainsi que les ressources css/ et images/ correspondantes.