Como Transformar um Grafo Emaranhado do ComfyUI em uma Aplicação Web Limpa

Qualquer pessoa que já construiu um pipeline no ComfyUI conhece essa sensação. Você passou três dias, encontrou os LoRAs perfeitos, configurou o ControlNet e escreveu upscalers inteligentes. Você terminou com um grafo massivo com cem nós, parecendo um esquema de placa de circuito. Tudo funciona perfeitamente.

Aí um colega—designer ou gerente de produto—aparece e pergunta: "Ei, você pode fazer para eu só enviar uma imagem, clicar num botão e obter o resultado?"

Você abre o ComfyUI, mostra a tela e vê puro horror nos olhos deles. Dar acesso a uma pessoa despreparada a uma tela vazia com nós é uma maneira garantida de acabar com um workflow quebrado em cinco minutos.

É exatamente isso que o ViewComfy resolve. É uma ferramenta open-source que pega um workflow JSON pronto do ComfyUI e constrói uma interface web limpa com formulários de entrada padrão.

O Que Está Por Trás e Como Funciona

O projeto é construído em Next.js e TypeScript. O conceito é direto: exporte seu pipeline do ComfyUI como workflow_api.json, arraste-o para o editor ViewComfy e use a interface para selecionar quais parâmetros expor aos usuários finais.

Em vez de um emaranhado de fios e dezenas de nós técnicos, os usuários só veem o que realmente precisam: um campo de texto para prompts, alguns sliders, um dropdown para seleção de estilo e um botão de gerar.

ViewComfy suporta tanto instâncias locais do ComfyUI quanto endpoints serverless via API. Isso significa que você pode executar computações em um servidor GPU remoto enquanto entrega um frontend leve para os usuários.

Principais Recursos

Vamos detalhar o que o projeto oferece pronto para uso.

Construtor de Formulários e Personalização de Entrada

Você decide quais parâmetros expor e quais codificar permanentemente.

O editor suporta a maioria dos controles básicos:

• Campos de texto e entradas numéricas
• Sliders com restrições de valor mínimo/máximo
• Dropdowns (select) e checkboxes
• Upload de arquivos de imagem, vídeo e áudio

Os campos podem ter texto de ajuda e ser marcados como obrigatórios ou opcionais.

Editor de Máscaras Integrado

Se seu workflow é adaptado para inpainting ou edição local, os usuários precisam desenhar máscaras diretamente no navegador. ViewComfy inclui uma ferramenta integrada de desenho de máscaras que funciona sobre imagens carregadas.

Modo Playground e Isolamento de Interface

O recurso mais útil para compartilhar é o modo Playground (ou ViewMode). Nesse modo, a interface do editor fica completamente oculta e os usuários só veem a aplicação web final.

Isso resolve dois problemas de uma vez:

1. Protege a lógica do pipeline. Você não expõe o arquivo workflow_api.json em si se não quiser compartilhar seu conhecimento.
2. Previne quebras acidentais. Os usuários fisicamente não podem mover um nó ou desconectar um fio no pipeline.

Autenticação de Usuários

Se você planeja fazer deploy da aplicação não apenas para uso local, mas para sua equipe, você pode habilitar autenticação através do Clerk. Basta adicionar as chaves em .env e definir a flag apropriada.

Como Executar Localmente

Você vai precisar de uma versão recente do Node.js para começar rapidamente (os autores recomendam v20.18+).

Clone o repositório e instale as dependências:

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

Após iniciar o servidor de desenvolvimento, abra seu navegador. Arraste o arquivo workflow_api.json exportado do ComfyUI para a janela do editor, configure a exibição dos campos e baixe o config gerado view_comfy.json.

Para alternar o projeto para o modo de aplicação limpa (Playground Mode), coloque ambos os arquivos JSON na raiz e edite .env:

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

Reinicie npm run dev e você obtém uma aplicação web pronta para uso. Se você precisa empacotar tudo em um container, há um Dockerfile no repositório:

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

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

Onde Isso É Útil na Prática

Vejo três cenários claros onde ViewComfy economiza muito tempo:

1. Ferramentas internas para equipes não técnicas. Designers, redatores ou profissionais de marketing precisam de uma ferramenta para upscaling de imagens, remoção de fundo ou geração de banners que sigam um guia de marca específico. Você configura o grafo uma vez e entrega a eles um formulário intuitivo.
2. Prototipagem de serviços de IA. Quando você precisa testar rapidamente uma nova hipótese de produto usando redes neurais antes de ter desenvolvedores frontend construindo uma UI completa do zero.
3. Demos para clientes. Em vez de iniciar o ComfyUI pesado durante uma chamada, você abre uma página web limpa e demonstra o pipeline em ação.

O Problema e as Conclusões

O projeto usa licenciamento AGPL-3.0. Se você planeja reconstruí-lo para um SaaS comercial fechado, precisará considerar as restrições da licença. Também existe uma plataforma de nuvem paga (ViewComfy Cloud), então alguns recursos como faturamento integrado e análises detalhadas são projetados para a nuvem deles, embora o frontend em si permaneça totalmente autônomo e open source.

Quem deveria experimentar:

• Desenvolvedores e engenheiros de ML cansados de construir frontends repetitivos em Gradio ou Streamlit para cada workflow.
• Equipes que usam ativamente geração de mídia internamente e buscam simplificar as coisas para seus colegas.

ViewComfy parece uma ferramenta sólida que resolve a dor específica de conectar "pipeline complexo — usuário simples". Você pode testar localmente em 10 minutos, já que o projeto inicia com um npm run dev padrão.