Verso la generazione di codice front-end eseguibile per framework multipli con autocorrezione

Abstract degli autori

La generazione di codice a partire da screenshot di interfacce utente ha recentemente beneficiato dei MLLM, ma i metodi esistenti, incentrati su output HTML, si adattano male a framework multipli come React, Vue e Angular. A differenza dell’HTML, che non comporta problemi di compilazione, generare codice eseguibile in contesti con framework multipli è più difficile, a causa delle differenze specifiche dei framework nella sintassi e nelle modalità di errore, nonché della necessità di mantenere la coerenza globale tra i file. Per affrontare questo problema, studiamo la generazione di codice front-end eseguibile per framework multipli e proponiamo MESCoder, un framework di generazione autocorrettiva strutturato ad albero. Il nostro metodo estrae innanzitutto dallo screenshot una struttura di base, quindi costruisce passo dopo passo sottoalberi e relazioni di assemblaggio, trasformando la generazione di progetti di grandi dimensioni in una sequenza di decisioni circoscritte. Su questa struttura introduciamo un Project Agent unificato, che rivede continuamente il proprio progetto parziale in base al feedback di una sandbox in fase di esecuzione e sceglie dinamicamente tra la riparazione locale e quella a livello di cluster. Per l’addestramento adottiamo una strategia in due fasi: prima inizializziamo offline la policy affinché apprenda i principi di base della generazione e della riparazione per framework multipli, poi la perfezioniamo con l’apprendimento per rinforzo online per ottimizzare l’eseguibilità su orizzonti lunghi e la qualità finale della pagina. Il framework risultante modella l’eseguibilità per framework multipli come un processo condizionato di transizione dello stato del progetto e migliora la stabilità e la qualità della generazione front-end complessa grazie all’autocorrezione. Gli esperimenti mostrano che il nostro metodo migliora l’eseguibilità e riduce il divario di fedeltà visiva rispetto alla generazione basata su HTML. Il codice è disponibile all’indirizzo https://github.com/leo-lilinxiao/MESCoder.