ComfyUI-AppGen est un ensemble de nœuds pour ComfyUI conçu pour générer et modifier des applications monopage (SPA) en utilisant le langage naturel. Inspiré par groq-appgen de GroqLabs, cet outil exploite la puissance des grands modèles linguistiques (LLM) pour simplifire les flux de travail de développement Web.

Fonctionnalités principales de ComfyUI-AppGen :

• Langage naturel vers code : Générer et modifier des SPA à l'aide de requêtes simples en langage naturel.
• Intégration LLM flexible : Compatible avec tout LLM prenant en charge l'API OpenAI.
• Environnement sandbox : Tester les SPA générés dans un environnement sandbox sécurisé.
• Édition transparente : Modifier les SPA existants en utilisant des retours en langage naturel.

1, Démarrage rapide avec ComfyUI-AppGen

Installation de ComfyUI-AppGen :

• Clonez ce dépôt ou téléchargez les nœuds.
• Ajoutez les nœuds à votre flux de travail ComfyUI.

Configuration du LLM :

• Configurez votre LLM préféré compatible avec l'API OpenAI (par exemple, Groq, DeepSeek).

Génération et édition de SPA :

• Utilisez le nœud AppGen pour créer des SPA à partir de requêtes en langage naturel.
• Utilisez le nœud AppEdit pour modifier des SPA existants avec des retours.
• Testez vos SPA dans l'environnement AppSandbox.

2, Nœuds personnalisés de ComfyUI-AppGen

2.1 CoderLLM

Client LLM personnalisable agissant comme un robot de programmation. Il peut générer du code en fonction d'invite en langage naturel. Il convient à tout LLM prenant en charge l'API OpenAI.

Modèles testés :

• Groq : llama-3.3-70b-specdec
• DeepSeek : DeepSeek-V3 MoE

Il produit des résultats hautement précis et efficaces sur les modèles testés.

2.2 AppGen

Génère des applications monopage (SPA) à partir de requêtes en langage naturel et exporte le code source sous forme de fichier HTML unique.

Exemple :

• Requête : "Générer une aplpication de calculatrice."
• Sortie : Application de calculatrice fonctionnelle dans un seul fichier HTML.

2.3 AppEdit

Modifie les SPA existants en fonction des retours en langage naturel.

Exemple :

• Retour : "Changer le titre de l'application en 'Ma Calculatrice'."
• Sortie : SPA mis à jour avec le nouveau titre.

2.4 AppSandbox

Fournit un environnement sandbox sécurisé pour exécuter et tester les SPA générés.

3, Exemples de flux de travail

3.1 Génération d'application

• Requête : "Créer une application de calculatrice."
• Nœud : AppGen
• Sortie : Application de calculatrice fonctionnelle dans un seul fichier HTML.

3.2 Édition d'application

• Retour : "Modifier le titre de l'application en 'Ma Calculatrice'."
• Nœud : AppEdit
• Sortie : Application de calculatrice mise à jour avec le nouveau titre.

4, Exemples de requêtes

• Calculatrice

Concevez une calculatrice avec un design moderne et épuré. Incluez les opérations arithmétiques de base (addition, soustraction, multiplication, division) et un bouton de remise à zéro. La calculatrice doit gérer les nombres décimaux et afficher le calcul en cours.

• Bloc-notes

Développez une application de prise de notes avec une interface minimaliste. Ajoutez un champ de titre et une zone de contenu pour chaque note. Incluez la possibilité de créer de nouvelles notes et de prévisualiser les notes existantes dans un panneau latéral. Assurez-vous que les champs de saisie ont des couleurs de texte cohérentes avec le thème sélectionné. Le stockage des notes doit être correctement implémenté. Chaque note doit être une entrée distincte dans le stockage d'objets.

• Application météo

Concevez un tableau de bord météo affichant la température actuelle, les conditions météorologiques et d'autres indicateurs comme l'humidité et la vitesse du vent. Utilisez des icônes adaptées à la météo et une disposition moderne et claire avec une bonne hiérarchie visuelle.

• Jeu du serpent

Développez un jeu du serpent classique avec des contrôles au clavier. Incluez un compteur de score, un écran de fin de partie et un bouton de redémarrage. Le serpent doit grandir lorsqu'il mange de la nourriture, et le jeu doit se terminer si le serpent heurte les murs ou lui-même. Assurez-vous que l'implémentation JavaScript est simple et correcte. L'algorithme de génération doit faire apparaître les éléments dans les limites.

• Galerie d'images

Concevez une galerie d'images réactive avec une disposition en grille. Incluez des miniatures d'images qui s'agrandissent au format complet lorsqu'on clique dessus. Ajoutez des transitions fluides et un effet de lightbox pour la visualisation des images.

• Application de quiz

Créez une application de quiz interactif avec des questions à choix multiples. Incluez un indicateur de progression, un suivi des scores et un retour immédiat sur les réponses. Rendez-le visuellement attrayant avec un espacement approprié et des transitions entre les questions.

• Tableau Kanban

Créez un tableau Kanban avec les colonnes 'À faire', 'En cours' et 'Terminé'. Incluez un bouton 'Ajouter une tâche' (sélectionnez quel tableau), des cartes de tâche avec titres et descriptions, et une fonctionnalité de glisser-déposer. Utilisez un design épuré et réactif avec des couleurs pastel et des animations subtiles. Rendez-le fonctionnellement complet. Autorisez le glisser-déposer entre les colonnes. Utilisez le rendu React dans le navigateur avec Babel. Assurez-vous que les champs de saisie ont des couleurs explicites compatibles avec le thème. Utilisez les fonctionnalités natives HTML5 pour le glisser-déposer et vérifiez qu'il fonctionne correctement. Remplissez avec quelques exemples de génie logiciel.

• Lecteur vidéo

Construisez un lecteur vidéo avec des contrôles standards (lecture/pause, volume, plein écran). Incluez une barre de progression avec des aperçus miniatures et des contrôles de vitesse de lecture. Ajoutez une interface minimale et épurée qui s'estompe lorsque non utilisée.

• Suivi des dépenses

Développez une application de suivi des dépenses permettant d'ajouter des transactions avec montants et catégories. Affichez le solde total et le résumé par catégorie. Incluez un graphique simple pour visualiser les modèles de dépenses. Assurez-vous que les champs de saisie ont des couleurs explicites compatibles avec le thème.

• Caelndrier

Concevez une vue mensuelle de calendrier permettant de naviguer entre les mois. Mettez en évidence la date actuelle et utilisez différents styles pour les jours de week-end. Incluez un système d'affichage d'événements simple.