ITADN

feat: Integrate ComfyUI workflow list with selection in main UI

#133Pull RequestSamarthShukla17 创建于 2025-09-13
S
SamarthShukla17commented
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 条评论