gsusgg 25ba6bfbe1 Update (#1)
* feat: Improve prompt handling and UI layout and other fixes

* feat: Implement image zoom/pan and improve modal display

* feat: Enhance UI persistence and randomized input display

- Display randomized numbers in input fields instead of disabling them.
- Persist generated preview images across page navigations.
- Ensure randomized form data is saved and loaded from local storage.
- Update .gitignore to include Gemini documentation.
- Add package-lock.json for dependency consistency.

* fix: Improve gallery folder navigation and "Folder up" functionality

- Add "Folder up" button to gallery for easier navigation.
- Implement path normalization to correctly handle mixed path separators (forward and backward slashes).
- Fix issue where "Folder up" button would incorrectly navigate to root from nested folders.

* feat: Enhance batch image display and modal styling\n\n- Backend: Modify CozyGenOutput to send individual WebSocket messages for each image in a batch, enabling proper display of all generated images.\n- Frontend: Implement a responsive grid layout for batch image previews on the generate page ("mini gallery").\n- Frontend: Reduce padding of the image preview modal for a more compact look.\n- Frontend: Adjust gap-y styling in DynamicForm.jsx.\n- Workflow: Update TestingTemplate.json with new dynamic input configurations.

* feat: Add CozyGen_example.json workflow

* fixing dev

* feat: Remove bypass functionality and improve dynamic input handling

* docs: Update TechDoc.md with recent error resolutions

* feat: Implement frontend bypass control for CozyGenDynamicInput

This commit introduces the functionality to bypass nodes in the ComfyUI workflow
via the frontend UI. When the "bypass" toggle is enabled for a CozyGenDynamicInput,
the connected node (e.g., LoraLoader) is removed from the workflow, and its
upstream and downstream connections are rewired.

- Added logic in `js/src/pages/MainPage.jsx` to process bypassed dynamic inputs.
- Implemented specific rewiring for `LoraLoader` nodes (model and clip outputs).
- Included generic rewiring for other nodes (limited to single input/output scenarios).
- Updated frontend build artifacts.

* feat: Revert image preview to single image display

* Update README

* feat: Implement CozyGen Image Input node and related frontend/backend changes

* catchup

* feat: Implement image upload and refactor CozyGenImageInput

* feat: Implement image upload and refactor CozyGenImageInput

- Refactored CozyGenImageInput node to accept Base64 image data.
- Implemented frontend logic in MainPage.jsx for image upload and injecting Base64 into workflow.
- Updated ImageInput.jsx to handle Base64 images for CozyGenImageInput nodes.
- Resolved merge conflicts in .gitignore.

* feat: Improve frontend control grouping and image upload visibility

This commit addresses several issues on the CozyGen generate page:

- Resolves `NameError: name 'io' is not defined` in `nodes.py` by explicitly importing `BytesIO` within the `load_image` function. This ensures proper module access within ComfyUI's execution context.
- Refactors `js/src/pages/MainPage.jsx` to correctly group dynamic input controls. Instead of rendering a separate "controls" box for each input, all `CozyGenDynamicInput` nodes are now passed to a single `DynamicForm` component, resulting in a unified and organized control panel.
- Implements conditional rendering for the "Upload Image for Workflow" section in `js/src/pages/MainPage.jsx`. This section now only appears when the loaded workflow contains a `CozyGenImageInput` node, improving UI clarity and relevance.

* feat: Implement multi-image input and optimize image handling

This commit introduces robust support for multiple image inputs and optimizes image handling to prevent browser storage issues:

- Refactors `js/src/components/ImageInput.jsx` to directly handle image uploads to the backend. When an image is selected, it is now immediately uploaded, and only its filename (instead of the large Base64 string) is stored in the frontend's `formData`. This resolves the "Quota Exceeded" DOMException previously encountered.
- Updates `js/src/pages/MainPage.jsx` by removing the single `uploadedImageBase64` state and its associated logic. The `handleGenerate` function is modified to correctly retrieve and inject image filenames from `formData` into the workflow JSON for all `CozyGenImageInput` nodes.
- Adds a `param_name` widget to the `CozyGenImageInput` node in `nodes.py`, allowing for customizable titles for image input fields in the frontend. The `load_image` function in `nodes.py` has been updated to accept this new parameter.
- Includes a new workflow file.
- Updates frontend build artifacts.

* feat: Implement smart image resize and improve gallery UI

This commit introduces a smart image resize feature and enhances the gallery modal UI:

- Implements an automatic smart resize feature in `js/src/components/ImageInput.jsx`. When an image is uploaded, it is now automatically resized to fit within a 2048-pixel sum for its dimensions (width + height), while preserving its aspect ratio. This is controlled by a 'Smart Resize' toggle.
- Simplifies the gallery image modal in `js/src/pages/Gallery.jsx` by replacing the full workflow JSON display with a 'Copy Workflow to Clipboard' button. This provides a cleaner user experience while still allowing users to access the workflow data.
- Updates `js/src/pages/MainPage.jsx` and `nodes.py` to support the new image handling and resize logic, ensuring that `param_name` and `image_filename` are correctly passed to the backend.
- Updates frontend build artifacts.

* Fix: Image preview and redundant input box on generate page\n\n- Corrected image preview URL construction in ImageInput.jsx.\n- Removed redundant 'Image Input' title block from MainPage.jsx.\n- Updated TechDoc.md to reflect these changes.

* Feat: Compact Image Input control box\n\n- Redesigned the ImageInput component for a more compact layout.\n- Browse and resize options are now on the left, with a smaller inline thumbnail on the right.\n- Updated TechDoc.md to reflect this UI/UX improvement.

* Full commit for gallery and img2img changes

* Standardized image modal view

* Fixed modal width issue

* Actually fixed modal, for real this time.hopefully.

* Added pagination to gallery. Added image modal navigation.

* Cleanup for main
2025-09-11 23:25:29 -05:00
2025-09-11 23:25:29 -05:00
2025-09-11 23:25:29 -05:00
2025-09-11 23:25:29 -05:00
2025-09-11 23:25:29 -05:00
2025-09-11 23:25:29 -05:00
2025-09-11 23:25:29 -05:00
2025-09-11 23:25:29 -05:00
2025-09-11 23:25:29 -05:00
2025-09-11 23:25:29 -05:00
2025-08-29 15:12:27 -05:00

CozyGen: A Mobile-Friendly ComfyUI Controller

ComfyUI Custom Node

DISCLAIMER

This project was 100% "vibe-coded" using Gemini 2.5 Pro/Flash. I dont code, but wanted to share a working LLM assisted projected. Everything AFTER this disclaimer section is 99% made by an LLM. I just wanted to make dumb cat pictures with my desktop ComfyUI from my phone, so now this exists. Thanks to @acly and the comfyui-tooling-nodes for the inspiration.

Known Issues:

  • If you use a batch higher than 1 they will generate and show in the gallery, but the preview only displays the first image of the batch.

Changelog:

  • 9/11/2025 - Update 1 NOTE This update will require you to remake workflows if you already had some. If you run into weird issues, try a complete reinstall if you are upgrading. - Added image 2 image support with the "Cozy Gen Image Input" Node - Added more robust support for dropdown choices, with option to specify model subfolder with "choice_type" option. - Improved gallery view and image overlay modals, with zoom/pinch and pan controls. - Added gallery pagination to reduce load of large gallery folders. - Added bypass option to dropdown connections. This is mainly intended for loras so you can add multiple to the workflow, but choose which to use from the front end. - General improvements (Layout, background functions, etc.) - The other stuff that I forgot about but is in here.

  • 8/29/2025 - Initial release

✨ Overview

CozyGen is a custom node for ComfyUI that provides a sleek, mobile-friendly web interface to remotely control your ComfyUI server. Designed for ease of use, it allows you to load pre-defined workflows, dynamically adjust parameters, and generate stunning images from any device with a web browser. Say goodbye to the desktop interface and hello to on-the-go creativity!

🚀 Features

  • Modern & Intuitive UI: A beautiful, mobile-first interface built with React, Vite, and Tailwind CSS, featuring a stylish dark theme.
  • Dynamic Controls: The user interface automatically generates input controls (text fields, sliders, dropdowns, toggles) based on the CozyGenDynamicInput nodes in your ComfyUI workflows.
  • Priority Sorting: A "priority" field that determines how the webpage is ordered. A 0 priority will push the field towards the top of the page.
  • Real-time Previews: Get instant visual feedback with real-time previews of your generated images directly in the web interface.
  • Persistent Sessions: Your selected workflow, input values, and even the last generated image are remembered across browser sessions.
  • Image Gallery: Browse, view, and manage all your previously generated images, complete with extracted prompt and seed metadata.
  • Randomization: Easily randomize numerical inputs like seeds with a dedicated toggle.
  • Seamless Integration: Works directly with your existing ComfyUI setup, leveraging its core functionalities.

📸 Screenshots / Demos

Mobile-first design:

Image

Adapts to browser size:

Image

Custom Node adapts to the string/int/float/dropdown they are connected to:

Image

A gallery tab that can navigate your ComfyUI output folder. Click on the path in the top left to go back to the base output folder.

Image

📦 Installation

Node can be installed with the ComfyUI Manager. Search for "CozyGen" to install.

Follow these steps to get CozyGen up and running with your ComfyUI instance.

1. Clone the Repository

Navigate to your ComfyUI custom_nodes directory and clone this repository:

cd /path/to/your/ComfyUI/custom_nodes
git clone https://github.com/gsusgg/ComfyUI_CozyGen.git

2. Install Python Dependencies

(This node only requires aiohttp, which should already be installed with ComfyUI.)

CozyGen requires the aiohttp Python package. Navigate into the ComfyUI_CozyGen directory and install them using pip.

cd custom_nodes/ComfyUI_CozyGen
pip install -r requirements.txt

3. Restart ComfyUI

After completing the above steps, restart your ComfyUI server to load the new custom node and its web interface.

4. (Optional) ComfyUI --listen

If you want to use this as a remote to your machine running ComfyUI on the local network, add the "--listen" flag to your ComfyUI startup.

🚀 Usage

1. Prepare Your Workflow

In ComfyUI, create or open a workflow that you want to control remotely. For each parameter you wish to expose to the web UI:

  • Add a CozyGenDynamicInput node and connect its output to the desired input on another node.

  • Configure the CozyGenDynamicInput node's properties (e.g., param_name, param_type, default_value, min_value, max_value, add_randomize_toggle).

  • Add a CozyGenOutput node at the end of your workflow to save the generated image and send real-time previews to the web UI.

  • IMPORTANT When exporting your workflow, export with API into the ComfyUI_CozyGen/workflows/ directory.

  • Some dropdown menus may not automatically populate if the model folder is not a default. Use the choice_type widget to point to the correct models subfolder using its name (ex: loras)

2. Access the Web UI

Open your web browser and navigate to:

http://<your-comfyui-ip>:8188/cozygen

(Replace <your-comfyui-ip> with the IP address or hostname where your ComfyUI server is running, e.g., 127.0.0.1 for local access).

3. Generate Images

  1. Select your prepared workflow from the dropdown menu.
  2. Adjust the dynamically generated parameters as needed. Your settings will be saved automatically.
  3. Click the "Generate" button.
  4. The generated image will appear in the preview area. You can click it to expand it or use the "Clear" button to reset the panel.
  5. Click the "Gallery" link in the header to browse all your generated images.

🤝 Contributing

I do not plan to update this forever, but wanted to share what I have. Feel free to take it and update it on your own!

📄 License

This project is licensed under the GPL-3.0 license - see the LICENSE file for details.

S
Description
No description provided
Readme GPL-3.0
770 KiB
Languages
JavaScript 76%
Python 16.2%
CSS 6.8%
HTML 1%