Comment transformer un graphe ComfyUI enchevêtré en une application web épurée

Quiconque a déjà construit un pipeline dans ComfyUI connaît ce sentiment. Vous avez passé trois jours, trouvé les LoRAs parfaits, configuré ControlNet, et écrit des suréchantillonneurs astucieux. Vous vous êtes retrouvé avec un graphe massif avec une centaines de nœuds, ressemblant à un schéma de circuit imprimé. Tout fonctionne à merveille.

Puis un collègue—designer ou chef de produit—arrive et demande : « Hé, tu peux faire en sorte que je puisse juste télécharger une image, cliquer sur un bouton, et obtenir le résultat ? »

Vous ouvrez ComfyUI, leur montrez l'écran, et vous voyez une horreur pure dans leurs yeux. Donner accès à une toile nue avec des nœuds à une personne non préparée est un moyen infaillible de se retrouver avec un workflow cassé en cinq minutes.

C'est exactement ce que ViewComfy résout. C'est un outil open-source qui prend un workflow JSON prêt de ComfyUI et construit une interface web épurée avec des formulaires d'entrée standard.

Ce qu'il y a sous le capot et comment ça fonctionne

Le projet est construit sur Next.js et TypeScript. Le concept est simple : exportez votre pipeline depuis ComfyUI en workflow_api.json, déposez-le dans l'éditeur ViewComfy, et utilisez l'interface pour sélectionner quels paramètres exposer aux utilisateurs finaux.

Au lieu d'un enchevêtrement de fils et de dizaines de nœuds techniques, les utilisateurs ne voient que ce dont ils ont vraiment besoin : un champ de texte pour les prompts, quelques curseurs, un menu déroulant pour la sélection de style, et un bouton de génération.

ViewComfy prend en charge les instances ComfyUI locales et les points de terminaison serverless via API. Cela signifie que vous pouvez exécuter des calculs sur un serveur GPU distant tout en livrant un frontend léger aux utilisateurs.

Fonctionnalités principales

Décortiquons ce que le projet propose prêt à l'emploi.

Constructeur de formulaires et personnalisation des entrées

Vous décidez quels paramètres exposer et lesquels coder en dur.

L'éditeur prend en charge la plupart des contrôles de base :

• Champs de texte et entrées numériques
• Curseurs avec contraintes de valeurs min/max
• Menus déroulants (select) et cases à cocher
• Téléchargements de fichiers image, vidéo et audio

Les champs peuvent avoir un texte d'aide et être marqués comme obligatoires ou facultatifs.

Éditeur de masques intégré

Si votre workflow est adapté pour l'inpainting ou l'édition locale, les utilisateurs doivent dessiner des masques directement dans le navigateur. ViewComfy inclut un outil de dessin de masques intégré qui fonctionne sur les images téléchargées.

Mode Playground et isolation de l'interface

La fonctionnalité la plus utile pour le partage est le mode Playground (ou ViewMode). Dans ce mode, l'interface de l'éditeur est complètement masquée, et les utilisateurs ne voient que l'application web terminée.

Cela résout deux problèmes à la fois :

1. Protège la logique du pipeline. Vous n'exposez pas le fichier workflow_api.json lui-même si vous ne souhaitez pas partager votre savoir-faire.
2. Évite les cassages accidentels. Les utilisateurs ne peuvent physiquement pas déplacer un nœud ou déconnecter un fil dans le pipeline.

Authentification utilisateur

Si vous prévoyez de déployer l'application non seulement pour un usage local mais pour votre équipe, vous pouvez activer l'authentification via Clerk. Ajoutez simplement les clés dans .env et définissez le flag approprié.

Comment exécuter en local

Vous aurez besoin d'une version récente de Node.js pour démarrer rapidement (les auteurs recommandent la v20.18+).

Clonez le dépôt et installez les dépendances :

git clone https://github.com/ViewComfy/ViewComfy.git
cd ViewComfy
npm install
npm run dev

Après avoir démarré le serveur de développement, ouvrez votre navigateur. Faites glisser le fichier ComfyUI exporté workflow_api.json dans la fenêtre de l'éditeur, configurez l'affichage des champs, et téléchargez le fichier de configuration généré view_comfy.json.

Pour basculer le projet en mode application épurée (Playground Mode), placez les deux fichiers JSON à la racine et modifiez .env :

NEXT_PUBLIC_VIEW_MODE="true"
VIEW_COMFY_FILE_NAME="view_comfy.json"

Redémarrez npm run dev, et vous obtenez une application web prête à l'emploi. Si vous avez besoin d'empaqueter tout dans un conteneur, il y a un Dockerfile dans le dépôt :

docker build \
  --build-arg NEXT_PUBLIC_VIEW_MODE="true" \
  -t viewcomfy .

docker run -it --name viewcomfy-container -p 3000:3000 viewcomfy

Où cela s'avère utile en pratique

Je vois trois scénarios clairs où ViewComfy fait gagner beaucoup de temps :

1. Outils internes pour les équipes non techniques. Les designers, rédacteurs ou marketeurs ont besoin d'un outil pour l'upscaling d'images, la suppression d'arrière-plans, ou la génération de bannières correspondant à un guide de marque spécifique. Vous configurez le graphe une seule fois et leur donnez un formulaire intuitif.
2. Prototypage de services IA. Quand vous avez besoin de tester rapidement une nouvelle hypothèse de produit en utilisant des réseaux neuronaux avant que les développeurs frontend ne construisent une UI complète de zéro.
3. Démonstrations client. Au lieu de lancer le lourd ComfyUI pendant un appel, vous ouvrez une page web épurée et démontrez le pipeline en action.

L'arnaque et les conclusions

Le projet utilise la licence AGPL-3.0. Si vous prévoyez de le reconstruire pour un SaaS commercial fermé, vous devrez tenir compte des restrictions de licence. Il y a aussi une plateforme cloud payante (ViewComfy Cloud), donc certaines fonctionnalités comme la facturation intégrée et l'analyse détaillée sont conçues pour leur cloud, bien que le frontend lui-même reste entièrement autonome et open source.

Qui devrait l'essayer :

• Les développeurs et ingénieurs ML fatigués de construire des frontends répétitifs dans Gradio ou Streamlit pour chaque workflow.
• Les équipes utilisant activement la génération de médias en interne et cherchant à simplifier les choses pour leurs collègues.

ViewComfy ressemble à un outil solide qui résout la douleur spécifique de connecter « pipeline complexe — utilisateur simple ». Vous pouvez l'essayer localement en 10 minutes, puisque le projet se lance avec un npm run dev standard.