diff --git a/js/README.md b/js/README.md new file mode 100644 index 00000000..3832a17c --- /dev/null +++ b/js/README.md @@ -0,0 +1,50 @@ +# ComfyUI-Manager: Frontend (js) + +This directory contains the JavaScript frontend implementation for ComfyUI-Manager, providing the user interface components that interact with the backend API. + +## Core Components + +- **comfyui-manager.js**: Main entry point that initializes the manager UI and integrates with ComfyUI. +- **custom-nodes-manager.js**: Implements the UI for browsing, installing, and managing custom nodes. +- **model-manager.js**: Handles the model management interface for downloading and organizing AI models. +- **components-manager.js**: Manages reusable workflow components system. +- **snapshot.js**: Implements the snapshot system for backing up and restoring installations. + +## Sharing Components + +- **comfyui-share-common.js**: Base functionality for workflow sharing features. +- **comfyui-share-copus.js**: Integration with the ComfyUI Opus sharing platform. +- **comfyui-share-openart.js**: Integration with the OpenArt sharing platform. +- **comfyui-share-youml.js**: Integration with the YouML sharing platform. + +## Utility Components + +- **cm-api.js**: Client-side API wrapper for communication with the backend. +- **common.js**: Shared utilities and helper functions used across the frontend. +- **node_fixer.js**: Utilities for fixing disconnected links and repairing malformed nodes by recreating them while preserving connections. +- **popover-helper.js**: UI component for popup tooltips and contextual information. +- **turbogrid.esm.js**: Grid component library - https://github.com/cenfun/turbogrid +- **workflow-metadata.js**: Handles workflow metadata parsing, validation and cross-repository compatibility including versioning, dependencies tracking, and resource management. + +## Architecture + +The frontend follows a modular component-based architecture: + +1. **Integration Layer**: Connects with ComfyUI's existing UI system +2. **Manager Components**: Individual functional UI components (node manager, model manager, etc.) +3. **Sharing Components**: Platform-specific sharing implementations +4. **Utility Layer**: Reusable UI components and helpers + +## Implementation Details + +- The frontend integrates directly with ComfyUI's UI system through `app.js` +- Dialog-based UI for most manager functions to avoid cluttering the main interface +- Asynchronous API calls to handle backend operations without blocking the UI + +## Styling + +CSS files are included for specific components: +- **custom-nodes-manager.css**: Styling for the node management UI +- **model-manager.css**: Styling for the model management UI + +This frontend implementation provides a comprehensive yet user-friendly interface for managing the ComfyUI ecosystem. \ No newline at end of file