ComfyUI Interactive Selector

Human-in-the-loop image selection for ComfyUI workflows using a Flask web server.

🎯 Features

• Interactive Selection: Pause ComfyUI workflow and select your favorite image via web browser
• Beautiful Web UI: Clean, responsive interface with auto-refresh
• Batch Support: Handle multiple images at once
• Latent Support: Works with both decoded images and latents
• Easy Setup: Simple Flask server + ComfyUI custom node
• Polling Architecture: ComfyUI node polls server until user makes selection

📋 Architecture

┌─────────────────┐         ┌──────────────────┐         ┌──────────────┐
│  ComfyUI Node   │ ──────> │  Flask Server    │ <────── │  Web Browser │
│  (Submits)      │         │  (API + UI)      │         │  (User)      │
│  (Polls)        │ <────── │                  │         │              │
└─────────────────┘         └──────────────────┘         └──────────────┘
                                     │
                                     ▼
                            ┌──────────────────┐
                            │  Shared Storage  │
                            │  (Images)        │
                            └──────────────────┘

🚀 Quick Start

1. Install Flask Server

# Install dependencies
pip install -r requirements.txt

# Set shared directory (optional, defaults to /tmp/comfyui_interactive)
export SHARED_IMAGE_DIR=/path/to/shared/images

# Start server
python interactive_server.py

The server will start on http://localhost:5000

2. Install ComfyUI Node

Copy interactive_nodes.py to your ComfyUI custom_nodes directory:

# Option 1: Create a new folder
mkdir -p ComfyUI/custom_nodes/comfyui-interactive
cp interactive_nodes.py ComfyUI/custom_nodes/comfyui-interactive/
cp __init__.py ComfyUI/custom_nodes/comfyui-interactive/

# Option 2: Add to existing custom_nodes folder
cp interactive_nodes.py ComfyUI/custom_nodes/

3. Configure Environment (Optional)

Set environment variables before starting ComfyUI:

# Server URL (default: http://localhost:5000)
export INTERACTIVE_SERVER_URL=http://localhost:5000

# Shared image directory (must match Flask server)
export SHARED_IMAGE_DIR=/tmp/comfyui_interactive

4. Restart ComfyUI

Restart ComfyUI to load the new nodes.

📖 Usage

Basic Image Selection

1. In ComfyUI: Add "Interactive Image Selector" node to your workflow
2. Connect: Feed a batch of images (2 or more) into the node
3. Run: Execute the workflow - it will pause and wait
4. Select: Open http://localhost:5000 in your browser
5. Choose: Click on your favorite image
6. Continue: Workflow automatically continues with selected image

Example Workflow

[Load Image Batch] → [Interactive Image Selector] → [Save Image]
                           │
                           └─> Returns: (selected_image, index)

With Latents

[KSampler] → [Interactive Latent Selector] → [VAE Decode] → [Save]
                      ↑
                    [VAE]

🎨 Node Parameters

InteractiveImageSelector

Inputs:

• images (IMAGE): Batch of images to choose from (required)
• timeout (INT): Seconds to wait before timeout (default: 300)

Outputs:

• selected_image (IMAGE): The chosen image
• selected_index (INT): Index of selection (0-based)

InteractiveLatentSelector

Inputs:

• latents (LATENT): Batch of latents
• vae (VAE): VAE for decoding preview
• timeout (INT): Seconds to wait

Outputs:

• selected_latent (LATENT): The chosen latent
• selected_index (INT): Index of selection

🔧 Configuration

Environment Variables

| Variable | Default | Description | |----------|---------|-------------| | INTERACTIVE_SERVER_URL | http://localhost:5000 | Flask server URL | | SHARED_IMAGE_DIR | /tmp/comfyui_interactive | Shared storage path |

Server Configuration

Edit interactive_server.py:

# Change port
app.run(host='0.0.0.0', port=8080, debug=True)

# Change poll interval in node (interactive_nodes.py)
self.poll_interval = 5  # Check every 5 seconds

🌐 API Reference

Endpoints

Create Problem

POST /api/problem
Content-Type: application/json

{
  "type": "image_selection",
  "images": ["img1.png", "img2.png"]
}

Response:
{
  "status": "success",
  "problem_id": "uuid"
}

Get Problem Status

GET /api/problem/{problem_id}

Response:
{
  "status": "success",
  "problem": {
    "type": "image_selection",
    "images": [...],
    "answer": 1,  # or null if pending
    "status": "solved",  # or "pending"
    "timestamp": "2024-01-01 12:00:00"
  }
}

Submit Answer

POST /api/solve/{problem_id}
Content-Type: application/json

{
  "answer": 1
}

Response:
{
  "status": "success",
  "problem_id": "uuid",
  "answer": 1
}

List All Problems

GET /api/problems

Response:
{
  "status": "success",
  "problems": {...}
}

Cleanup Solved Problems

POST /api/cleanup

Response:
{
  "status": "success",
  "remaining": 3
}

🎭 Web Interface

Access at http://localhost:5000

Features:

• ✅ Auto-refresh every 5 seconds
• ✅ Shows pending and solved problems
• ✅ Image grid with selection buttons
• ✅ Mobile responsive
• ✅ Beautiful gradient design

🐛 Troubleshooting

"Connection refused" error

• Make sure Flask server is running: python interactive_server.py
• Check server URL matches: http://localhost:5000

Images not loading in browser

• Verify SHARED_IMAGE_DIR is the same for both server and ComfyUI
• Check file permissions on shared directory
• Look at browser console for 404 errors

Timeout errors

• Increase timeout parameter in node
• Check server logs for errors
• Verify browser can reach server URL

Node not appearing in ComfyUI

• Restart ComfyUI after adding node file
• Check ComfyUI console for Python errors
• Verify file is in correct custom_nodes directory

🔮 Future Enhancements

Potential improvements:

• [ ] WebSocket for real-time updates (no polling)
• [ ] Multiple problem types (text input, sliders, ratings)
• [ ] Authentication/multi-user support
• [ ] Problem history and analytics
• [ ] Persistent storage (SQLite/Redis)
• [ ] Docker container for easy deployment
• [ ] Mobile app
• [ ] Comparison mode (A/B testing)

📝 Example Use Cases

1. Style Selection: Generate 4 variations, pick the best
2. Face Selection: Choose favorite portrait from batch
3. Composition Testing: Try different layouts, select winner
4. A/B Testing: Compare prompts or models
5. Quality Control: Manual filtering in generation pipeline

🤝 Contributing

Feel free to submit issues and enhancement requests!

📄 License

MIT License - use freely!

🙏 Credits

Created for the ComfyUI community. Inspired by the need for human-in-the-loop workflows.

---

Enjoy interactive workflows! 🎨✨