feat: Integrate ComfyUI workflow list with selection in main UI
This PR introduces a new feature that integrates ComfyUI workflows directly into Clapper’s main user interface, enabling users to browse, select, and preview ComfyUI workflows seamlessly.
What was done
Added a new reusable React component ComfyWorkflowList that fetches available workflows from a running ComfyUI server (http://localhost:8188/api/workflows by default).
Integrated the workflow list UI component into the main app layout, positioned below the TopBar in MainContent.
Added state management to track the currently selected workflow and display its details interactively.
Preserved the existing Clapper UI layout and functionality with minimal disruption.
Included error handling and loading state in the workflow list component.
Why this is important
This feature addresses the current limitation in Clapper’s support for ComfyUI by providing a native, user-friendly interface for selecting workflows. It forms a foundational step toward full workflow execution support for image, video, sound, voice, and music generation within Clapper, aligning with the project’s long-term vision.
How to test
Start a local ComfyUI server or use a compatible ComfyUI API endpoint running at http://localhost:8188.
Run the Clapper development server with bun run dev.
Open http://localhost:3000 in a browser.
Verify that the ComfyUI workflows load and list below the top bar.
Click the "Use" button on each listed workflow to select it.
Confirm that selected workflow details appear below the list.
Additional Notes
The serverUrl for ComfyUI API is currently hardcoded but can be extended with a user configuration interface in future iterations.
This PR does not yet implement running workflows or integrating the output media into Clapper’s timeline segments; these are planned next steps.
Feel free to reach out for any required improvements or questions.
Related issues
Closes #5 (Improve ComfyUI integration)
合并状态:未合并 0 条评论