We Built ComfyUI Workflow Visualization Into Our AI Art Portfolio Platform

Source: Dev.to

Overview

PixelAI is a portfolio platform for AI artists. The latest release adds ComfyUI workflow support with an interactive graph visualization, making it easier to share and explore AI image/video generation pipelines.

Why It Matters

Sharing ComfyUI workflows has traditionally been cumbersome:

• Screenshots of node graphs
• Prompt text pasted in Discord
• .json files uploaded to random file hosts
• Explanations scattered across comment threads

PixelAI streamlines this process by embedding the workflow directly alongside the artwork.

Key Features

Workflow Upload & Extraction

• Upload your .json workflow together with your artwork.
• Automatic extraction of key parameters (checkpoint, sampler, seed, steps, CFG).

Interactive Node Graph

• Built with React Flow; viewers can zoom, pan, and explore the graph.
• Color‑coded node categories:
  • Loader (purple)
  • Sampler (blue)
  • Conditioning (yellow)
  • Output (red)
• Custom nodes are flagged with a ⚡ badge.
• Edge labels display data types (e.g., IMAGE, VIDEO, MASK).
• Fullscreen mode for complex graphs (50+ nodes).

One‑Click Download

• Viewers can download the exact .json file and load it directly into ComfyUI.

Robust Parsing & Validation

• Supports both Workflow format (File → Save) and API format (File → Export API).
• Non‑ComfyUI JSON files are rejected with a helpful error message.

Collaboration Tools

• A/B comparison of different workflows for the same image.
• Workflow versioning to iterate and track changes.
• “Fork” button lets users remix someone else’s workflow with their own modifications.

Technical Stack

• Next.js 14 (App Router)
• React Flow (@xyflow/react)
• Supabase (using a jsonb column for workflow storage)
• Tailwind CSS

Try It Out

Explore the new feature at pixelai.world.