우리는 ComfyUI 워크플로 시각화를 AI 아트 포트폴리오 플랫폼에 구축했습니다

Source: Dev.to

Overview

PixelAI는 AI 아티스트를 위한 포트폴리오 플랫폼입니다. 최신 릴리스에서는 ComfyUI 워크플로우 지원과 인터랙티브 그래프 시각화를 추가하여 AI 이미지·비디오 생성 파이프라인을 보다 쉽게 공유하고 탐색할 수 있게 되었습니다.

Why It Matters

ComfyUI 워크플로우를 공유하는 것은 전통적으로 번거로웠습니다:

• 노드 그래프 스크린샷
• Discord에 붙여넣은 프롬프트 텍스트
• 임의의 파일 호스트에 업로드한 .json 파일
• 댓글 스레드에 흩어져 있는 설명들

PixelAI는 워크플로우를 작품과 바로 함께 삽입함으로써 이 과정을 간소화합니다.

Key Features

Workflow Upload & Extraction

• 작품과 함께 .json 워크플로우를 업로드합니다.
• 핵심 파라미터(체크포인트, 샘플러, 시드, 스텝, CFG)를 자동으로 추출합니다.

Interactive Node Graph

• React Flow 기반; 사용자는 그래프를 확대·축소하고, 팬(pan)하며 탐색할 수 있습니다.
• 색상으로 구분된 노드 카테고리:
  • Loader (보라)
  • Sampler (파랑)
  • Conditioning (노랑)
  • Output (빨강)
• 커스텀 노드는 ⚡ 배지로 표시됩니다.
• 엣지 라벨에 데이터 타입이 표시됩니다(e.g., IMAGE, VIDEO, MASK).
• 복잡한 그래프(50개 이상 노드)를 위한 전체 화면 모드 제공.

One‑Click Download

• 시청자는 정확한 .json 파일을 한 번에 다운로드하고 바로 ComfyUI에 로드할 수 있습니다.

Robust Parsing & Validation

• Workflow format (File → Save)과 API format (File → Export API) 모두 지원합니다.
• ComfyUI가 아닌 JSON 파일은 친절한 오류 메시지와 함께 거부됩니다.

Collaboration Tools

• 동일 이미지에 대한 서로 다른 워크플로우를 A/B 비교할 수 있습니다.
• 워크플로우 버전 관리를 통해 반복 작업 및 변경 사항을 추적합니다.
• “Fork” 버튼을 눌러 다른 사용자의 워크플로우를 자신의 수정과 함께 리믹스할 수 있습니다.

Technical Stack

• Next.js 14 (App Router)
• React Flow (@xyflow/react)
• Supabase (워크플로우 저장을 위한 jsonb 컬럼 사용)
• Tailwind CSS

Try It Out

새 기능을 pixelai.world 에서 직접 체험해 보세요.