Ethanfel 24f9b7d955 Fix graph interactivity: use querySelector instead of NiceGUI DOM ID
The c{id} DOM ID pattern was wrong. Use document.querySelector with
the timeline-graph class instead, with retries until g.node elements
are present in the DOM.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 00:27:00 +01:00
2025-12-30 15:01:41 +01:00
2026-02-25 14:28:46 +01:00

{ JSON } ComfyUI JSON Manager Visual dashboard & dynamic nodes for AI video workflows

License Python NiceGUI ComfyUI

A visual dashboard for managing, versioning, and batch-processing JSON configuration files used in AI video generation workflows (I2V, VACE). Two parts:

  1. NiceGUI Web Interface — Dockerized editor for prompts, LoRAs, settings, and branching history
  2. ComfyUI Custom Nodes — Read JSON files directly into workflows, including a dynamic node that auto-discovers keys

Features

B Batch Processor

  • Unlimited sequences within a single JSON file
  • Import settings from any file or history entry
  • Per-shot custom keys (e.g. Shot 1: fog: 0.5, Shot 2: fog: 0.0)
  • Clone, reorder, and manage sequences visually
  • Conflict protection against external file modifications
  • Snippet library for reusable prompt fragments

T Visual Timeline

  • Git-style branching with horizontal node graph
  • Non-destructive: forking on old-version edits preserves all history
  • Visual diff highlighting changes between any two versions
  • Restore any past state with one click

D Dynamic Node (New)

  • Auto-discovers all JSON keys and exposes them as outputs
  • No code changes needed when JSON structure evolves
  • Preserves connections when keys are added on refresh
  • Native type handling: int, float, string

Installation

1. Unraid / Docker (NiceGUI Manager)

# Repository: python:3.12-slim
# Network: Bridge
# WebUI: http://[IP]:[PORT:8080]

Path Mappings:

Container Host Purpose
/app /mnt/user/appdata/ai-manager/ App files
/mnt/user/ /mnt/user/ Project data / JSON location

Post Arguments:

/bin/sh -c "apt-get update && apt-get install -y graphviz && \
  pip install nicegui graphviz requests && \
  cd /app && python main.py"

2. ComfyUI (Custom Nodes)

cd ComfyUI/custom_nodes/
git clone <this-repo> ComfyUI-JSON-Manager
# Restart ComfyUI

ComfyUI Nodes

Node Overview

batch_prompt .json JSON Loader (Dynamic) auto-discovers keys click Refresh to populate JSON Batch Loader (I2V) prompts, flf, seed, paths JSON Batch Loader (VACE) + vace frames, schedule JSON Loader (Custom 1/3/6) general_prompt seed (int) my_custom_key ... general_prompt, camera, flf, seed, paths ... + frame_to_skip, vace_schedule, input_a_frames ... manual key lookup (1-6 slots)

Dynamic Node

The JSON Loader (Dynamic) node reads your JSON file and automatically creates output slots for every key it finds. No code changes needed when your JSON structure evolves.

How it works:

  1. Enter a json_path and sequence_number
  2. Click Refresh Outputs
  3. Outputs appear named after JSON keys, with native types preserved

JSON Loader (Dynamic)

json_path: /data/prompt.json sequence_number: 1

Refresh Outputs general_prompt negative seed flf camera KSampler positive seed STRING INT FLOAT

Type handling: Values keep their native Python type — int stays int, float stays float, booleans become "true"/"false" strings, everything else becomes string. The * (any) output type allows connecting to any input.

Refreshing is safe: Clicking Refresh after adding new keys to your JSON preserves all existing connections. Only removed keys get disconnected.

Standard & Batch Nodes

Node Outputs Use Case
JSON Loader (Standard/I2V) prompts, flf, seed, paths Single-file I2V workflows
JSON Loader (VACE Full) above + VACE integers Single-file VACE workflows
JSON Loader (LoRAs Only) 6 LoRA strings Single-file LoRA loading
JSON Batch Loader (I2V) prompts, flf, seed, paths Batch I2V with sequence_number
JSON Batch Loader (VACE) above + VACE integers Batch VACE with sequence_number
JSON Batch Loader (LoRAs) 6 LoRA strings Batch LoRA loading
JSON Loader (Custom 1/3/6) 1, 3, or 6 string values Manual key lookup by name

Web Interface Usage

Navigate to your container's IP (e.g., http://192.168.1.100:8080).

Path navigation supports case-insensitive matching — typing /media/P5/myFolder will resolve to /media/p5/MyFolder automatically.

  • Custom Parameters: Scroll to "Custom Parameters" in any editor tab. Type a key and value, click Add.
  • Timeline: Switch to the Timeline tab to see version history as a graph. Restore any version, and new edits fork a branch automatically.
  • Snippets: Save reusable prompt fragments and append them with one click.

JSON Format

{
  "batch_data": [
    {
      "sequence_number": 1,
      "general_prompt": "A cinematic scene...",
      "negative": "blurry, low quality",
      "seed": 42,
      "flf": 0.5,
      "camera": "pan_left",
      "video file path": "/data/input.mp4",
      "reference image path": "/data/ref.png",
      "my_custom_key": "any value"
      // ... any additional keys are auto-discovered by the Dynamic node
    }
  ]
}

File Structure

ComfyUI-JSON-Manager/
├── __init__.py            # ComfyUI entry point, exports nodes + WEB_DIRECTORY
├── json_loader.py         # All ComfyUI node classes + /json_manager/get_keys API
├── web/
│   └── json_dynamic.js    # Frontend extension for Dynamic node (refresh, show/hide)
├── main.py                # NiceGUI web UI entry point & navigator
├── state.py               # Application state management
├── utils.py               # I/O, config, defaults, case-insensitive path resolver
├── history_tree.py        # Git-style branching engine
├── tab_batch_ng.py        # Batch processor UI (NiceGUI)
├── tab_timeline_ng.py     # Visual timeline UI (NiceGUI)
├── tab_comfy_ng.py        # ComfyUI server monitor (NiceGUI)
├── tab_raw_ng.py          # Raw JSON editor (NiceGUI)
└── tests/
    ├── test_json_loader.py
    ├── test_utils.py
    └── test_history_tree.py

License

Apache 2.0

Description
Streamlit webui to manager comfyui paramaters with json
Readme Apache-2.0 1.4 MiB
Languages
Python 93.8%
JavaScript 6.2%