HyperAIHyperAI

Command Palette

Search for a command to run...

ScreenCoder : Progresser dans la génération visuelle vers le code pour l'automatisation du front-end grâce à des agents multimodaux modulaires

Yilei Jiang Yaozhi Zheng Yuxuan Wan Jiaming Han Qunzhong Wang Michael R. Lyu Xiangyu Yue

Résumé

Automatiser la transformation des maquettes d’interface utilisateur (UI) en code front-end représente un potentiel considérable pour accélérer le développement logiciel et démocratiser les workflows de conception. Bien que les modèles linguistiques massifs (LLM) récents aient montré des progrès dans la génération de code à partir de texte, de nombreuses approches existantes s’appuient exclusivement sur des promps en langage naturel, ce qui limite leur efficacité pour capturer la disposition spatiale et l’intention visuelle de la conception. À l’inverse, en pratique, le développement d’interfaces utilisateur est intrinsèquement multimodal, souvent initié à partir de croquis visuels ou de maquettes. Pour combler cet écart, nous proposons un cadre modulaire à agents multiples, qui réalise la génération UI-to-code en trois étapes interprétables : ancrage, planification et génération. L’agent d’ancrage utilise un modèle vision-langage pour détecter et étiqueter les composants UI, l’agent de planification construit une disposition hiérarchique en s’appuyant sur des connaissances préalables en ingénierie front-end, et l’agent de génération produit du code HTML/CSS par synthèse adaptative basée sur des promps. Ce design améliore la robustesse, l’interprétabilité et la fidélité par rapport aux méthodes monolithiques à boîte noire. Par ailleurs, nous étendons ce cadre en un moteur de données évolutif, capable de produire automatiquement de grandes quantités de paires image-code. À l’aide de ces exemples synthétiques, nous fine-tunons et renforçons un modèle vision-langage open-source, obtenant des gains significatifs en compréhension des interfaces et en qualité du code. Des expériences étendues démontrent que notre approche atteint un niveau d’excellence dans la précision de la disposition, la cohérence structurelle et la correction du code. Le code source est mis à disposition publiquement à l’adresse suivante : https://github.com/leigest519/ScreenCoder.


Créer de l'IA avec l'IA

De l'idée au lancement — accélérez votre développement IA avec le co-codage IA gratuit, un environnement prêt à l'emploi et le meilleur prix pour les GPU.

Codage assisté par IA
GPU prêts à l’emploi
Tarifs les plus avantageux

HyperAI Newsletters

Abonnez-vous à nos dernières mises à jour
Nous vous enverrons les dernières mises à jour de la semaine dans votre boîte de réception à neuf heures chaque lundi matin
Propulsé par MailChimp
ScreenCoder : Progresser dans la génération visuelle vers le code pour l'automatisation du front-end grâce à des agents multimodaux modulaires | Articles | HyperAI