A web interface for interacting with ComfyUI API endpoints. This application allows users to:

• Connect to any ComfyUI instance by IP address and port
• Upload and execute workflow JSON files
• NEW: Create custom input controls for specific workflow nodes
• NEW: Interactive sliders, text fields, and checkboxes for parameters
• Monitor job progress and view results
• Download generated images

├── backend/
│   ├── index.ts             # Main Hono server
│   └── README.md
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main React application
│   │   ├── WorkflowUpload.tsx
│   │   ├── CustomInputs.tsx # NEW: Dynamic input controls
│   │   ├── JobStatus.tsx
│   │   └── ImageGallery.tsx
│   ├── index.html           # Main HTML template
│   ├── index.tsx            # Frontend entry point
│   └── style.css
├── shared/
│   ├── types.ts             # Shared TypeScript types
│   └── utils.ts             # Shared utility functions
└── README.md

• Server Configuration: Connect to any ComfyUI instance with IP:port format
• Workflow Upload: Upload and validate workflow JSON files
• 🆕 Custom Input Controls: Automatically generate UI controls for workflow parameters
  • Integer sliders with min/max ranges
  • Float sliders with decimal precision
  • Text fields (single-line and multi-line)
  • Boolean checkboxes
  • Image upload placeholders
• Job Management: Queue workflows and monitor progress
• Image Gallery: View and download generated images
• Real-time Updates: WebSocket support for live progress updates

1. Configure Server: Enter your ComfyUI server address in IP:port format (e.g., 127.0.0.1:8188, 192.168.1.100:8188)
2. Upload Workflow:
   • Drag & drop a workflow JSON file, or
   • Paste JSON content directly into the text area
   • Get workflow JSON from ComfyUI: Settings ⚙️ → "Save (API Format)"
3. 🆕 Customize Parameters:
   • Add node IDs (one per line) in the "Customizable Node IDs" field
   • Use the "Auto-detect" button to find common nodes automatically
   • Adjust parameters using the generated controls:
     • Sliders for numbers (integers and floats)
     • Text areas for prompts and long text
     • Checkboxes for boolean values
     • File inputs for image uploads (placeholder)
4. Execute: Click "Execute Workflow" to start generation
5. Monitor: Switch to "Job Status" tab to see real-time progress
6. View Results: Generated images appear in the gallery with download options
7. History: Check the "History" tab to see previous executions

The system automatically analyzes workflow nodes and creates appropriate input controls:

• Integers: Range sliders with number inputs (seeds, steps, dimensions)
• Floats: Precision sliders (CFG scale, denoising strength)
• Strings: Text fields or multi-line areas (prompts, descriptions)
• Booleans: Checkboxes (enable/disable options)
• Images: File upload placeholders (for future implementation)

• Seeds: 0 to 2,147,483,647 range
• Steps: 1 to 150 range
• Dimensions: 64 to 2048 in 64px increments
• CFG Scale: 0.1 to 30.0 with 0.1 precision
• Strength/Denoise: 0.0 to 1.0 with 0.01 precision
• Prompts: Multi-line text areas for long descriptions

1. Open ComfyUI in your browser
2. Load or create your desired workflow
3. Click the gear icon (⚙️) in the menu
4. Select "Save (API Format)" to download the JSON file
5. Upload that file to this frontend or copy-paste its contents

• GET / - Serve the frontend application
• POST /api/execute - Execute a workflow
• GET /api/status/:jobId - Get job status
• GET /api/history - Get execution history
• GET /api/images/:filename - Serve generated images