Cómo Convertir un Gráfico Complicado de ComfyUI en una Aplicación Web Limpia
Cualquiera que haya construido un pipeline en ComfyUI conoce esta sensación. Pasaste tres días, encontraste los LoRAs perfectos, configuraste ControlNet y escribiste clever upscalers. Terminaste con un gráfico enorme con cien nodos, pareciendo un esquema de placa de circuito. Todo funciona de maravilla.
Entonces un colega—diseñador o gerente de producto—se acerca y pregunta: "Oye, ¿puedes hacer para que yo simplemente suba una imagen, haga clic en un botón y obtenga el resultado?"
Abres ComfyUI, les muestras la pantalla y ves puro horror en sus ojos. Darle a una persona no preparada acceso a un lienzo desnudo con nodos es una manera segura de terminar con un workflow roto en cinco minutos.
Esto es exactamente lo que ViewComfy resuelve. Es una herramienta de código abierto que toma un workflow JSON listo de ComfyUI y construye una interfaz web limpia con formularios de entrada estándar.
Qué hay bajo el capó y cómo funciona
El proyecto está construido sobre Next.js y TypeScript. El concepto es directo: exporta tu pipeline desde ComfyUI como workflow_api.json, arrástralo al editor de ViewComfy y usa la interfaz para seleccionar qué parámetros exponer a los usuarios finales.
En lugar de un enredo de cables y docenas de nodos técnicos, los usuarios solo ven lo que realmente necesitan: un campo de texto para prompts, un par de deslizadores, un menú desplegable para selección de estilo y un botón de generación.
ViewComfy soporta tanto instancias locales de ComfyUI como endpoints serverless a través de API. Esto significa que puedes ejecutar cómputos en un servidor GPU remoto mientras entregas un frontend ligero a los usuarios.
Características principales
Veamos en detalle lo que el proyecto ofrece desde el primer momento.
Constructor de formularios y personalización de entradas
Tú decides qué parámetros exponer y cuáles codificar de forma fija.
El editor soporta la mayoría de los controles básicos:
- Campos de texto y entradas numéricas
- Deslizadores con restricciones de valor mínimo/máximo
- Menús desplegables (select) y casillas de verificación
- Subidas de archivos de imagen, video y audio
Los campos pueden tener texto de ayuda y marcarse como requeridos u opcionales.
Editor de máscaras integrado
Si tu workflow está diseñado para inpainting o edición local, los usuarios necesitan dibujar máscaras directamente en el navegador. ViewComfy incluye una herramienta integrada de dibujo de máscaras que funciona sobre las imágenes subidas.
Modo Playground y aislamiento de interfaz
La característica más útil para compartir es el Modo Playground (o ViewMode). En este modo, la interfaz del editor está completamente oculta y los usuarios solo ven la aplicación web terminada.
Esto resuelve dos problemas a la vez:
- Protege la lógica del pipeline. No expones el archivo
workflow_api.jsonsi no quieres compartir tu conocimiento. - Previene roturas accidentales. Los usuarios físicamente no pueden mover un nodo ni desconectar un cable en el pipeline.
Autenticación de usuarios
Si planeas desplegar la aplicación no solo para uso local sino para tu equipo, puedes habilitar la autenticación a través de Clerk. Solo añade las claves a .env y establece el flag correspondiente.
Cómo ejecutar localmente
Necesitarás una versión reciente de Node.js para comenzar rápidamente (los autores recomiendan v20.18+).
Clona el repositorio e instala las dependencias:
git clone https://github.com/ViewComfy/ViewComfy.git
cd ViewComfy
npm install
npm run dev
Después de iniciar el servidor de desarrollo, abre tu navegador. Arrastra el archivo exportado de ComfyUI workflow_api.json a la ventana del editor, configura la visualización de los campos y descarga la configuración generada view_comfy.json.
Para cambiar el proyecto al modo de aplicación limpia (Modo Playground), coloca ambos archivos JSON en la raíz y edita .env:
NEXT_PUBLIC_VIEW_MODE="true"
VIEW_COMFY_FILE_NAME="view_comfy.json"
Reinicia npm run dev y obtienes una aplicación web lista para usar. Si necesitas empaquetar todo en un contenedor, hay un Dockerfile en el repositorio:
docker build \
--build-arg NEXT_PUBLIC_VIEW_MODE="true" \
-t viewcomfy .
docker run -it --name viewcomfy-container -p 3000:3000 viewcomfy
Dónde resulta útil en la práctica
Veo tres escenarios claros donde ViewComfy ahorra mucho tiempo:
- Herramientas internas para equipos no técnicos. Diseñadores, redactores o especialistas en marketing necesitan una herramienta para mejorar imágenes, eliminar fondos o generar banners que coincidan con una guía de marca específica. Configuras el gráfico una vez y les das un formulario intuitivo.
- Prototipado de servicios de IA. Cuando necesitas probar rápidamente una nueva hipótesis de producto usando redes neuronales antes de que los desarrolladores frontend construyan una UI completa desde cero.
- Demos para clientes. En lugar de iniciar el voluminoso ComfyUI durante una llamada, abres una página web limpia y demuestras el pipeline en acción.
La trampa y las conclusiones
El proyecto usa licencia AGPL-3.0. Si planeas reconstruirlo para un SaaS cerrado comercial, necesitarás tener en cuenta las restricciones de la licencia. También existe una plataforma en la nube de pago (ViewComfy Cloud), así que algunas características como facturación integrada y análisis detallados están diseñadas para su nube, aunque el frontend en sí permanece completamente autónomo y de código abierto.
Quién debería probarlo:
- Desarrolladores e ingenieros de ML cansados de construir frontends repetitivos en Gradio o Streamlit para cada workflow.
- Equipos que usan activamente la generación de medios internamente y buscan simplificar las cosas para sus colegas.
ViewComfy parece una herramienta sólida que resuelve el dolor específico de conectar "pipeline complejo — usuario simple". Puedes probarlo localmente en 10 minutos, ya que el proyecto se inicia con un npm run dev estándar.
Proyectos relacionados