Frontend Components

React-based frontend for the ComfyUI interface.

Components

App.tsx

Main application component that manages:

  • Server IP configuration and status checking
  • Tab navigation between upload, status, and history
  • Global state management for jobs and history

WorkflowUpload.tsx

Handles workflow file upload and execution:

  • Drag & drop JSON file upload
  • Manual JSON text editing with validation
  • Workflow preview and node analysis
  • Execute button with server status checking

JobStatus.tsx

Displays real-time job status and progress:

  • Automatic polling for status updates
  • Timeline visualization
  • Progress bars for running jobs
  • Error handling and display

ImageGallery.tsx

Shows generated images with:

  • Grid layout with thumbnails
  • Full-size modal view
  • Download functionality
  • Loading states and error handling

Features

  • Real-time Updates: Automatic polling for job status
  • Drag & Drop: Easy workflow file upload
  • Responsive Design: Works on desktop and mobile
  • Error Handling: Comprehensive error states
  • Image Management: View, download, and share generated images
  • History Tracking: Keep track of previous executions

State Management

The app uses React hooks for state management:

  • useState for component-level state
  • useEffect for side effects and polling
  • localStorage for persisting server IP

Styling

Uses TailwindCSS for styling with custom CSS classes for:

  • Drag & drop zones
  • Status indicators
  • Image galleries
  • Modal overlays