Ethanfel/Comfyui-JSON-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Overhaul UI: new color palette, spacing, and visual hierarchy

Browse Source 
Replace red accent with amber, add Inter font, introduce 4-level depth
palette via CSS variables, expand padding/gaps, wrap sidebar and content
sections in cards, add section/subsection header typography classes, and
style scrollbars for dark theme. Pure visual changes — no functional or
data-flow modifications.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ethanfel
2026-02-26 17:27:02 +01:00
parent 97748ab8ff
commit 710a8407d2
5 changed files with 490 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

387
main.py
View File

@@ -20,72 +20,129 @@ from tab_comfy_ng import render_comfy_monitor
def index():
# -- Streamlit dark theme --
ui.dark_mode(True)
ui.colors(primary='#FF4B4B')
ui.colors(primary='#F59E0B')
ui.add_head_html(
'<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">'
)
ui.add_css('''
/* === Streamlit Dark Theme === */
/* === Dark Theme with Depth Palette === */
:root {
--bg-page: #0B0E14;
--bg-surface-1: #13161E;
--bg-surface-2: #1A1E2A;
--bg-surface-3: #242836;
--border: rgba(255,255,255,0.08);
--text-primary: #EAECF0;
--text-secondary: rgba(234,236,240,0.55);
--accent: #F59E0B;
--accent-subtle: rgba(245,158,11,0.12);
--negative: #EF4444;
}
/* Backgrounds */
body.body--dark,
.q-page.body--dark,
.body--dark .q-page { background: #0E1117 !important; }
.body--dark .q-drawer { background: #262730 !important; }
.body--dark .q-card { background: #262730 !important; border-radius: 0.5rem; }
.body--dark .q-page { background: var(--bg-page) !important; }
.body--dark .q-drawer { background: var(--bg-surface-1) !important; }
.body--dark .q-card {
background: var(--bg-surface-2) !important;
border: 1px solid var(--border);
border-radius: 0.75rem;
}
.body--dark .q-tab-panels { background: transparent !important; }
.body--dark .q-tab-panel { background: transparent !important; }
.body--dark .q-expansion-item { background: transparent !important; }
/* Text */
.body--dark { color: #FAFAFA !important; }
.body--dark .q-field__label { color: rgba(250,250,250,0.6) !important; }
.body--dark .text-caption { color: rgba(250,250,250,0.6) !important; }
.body--dark { color: var(--text-primary) !important; }
.body--dark .q-field__label { color: var(--text-secondary) !important; }
.body--dark .text-caption { color: var(--text-secondary) !important; }
.body--dark .text-subtitle1,
.body--dark .text-subtitle2 { color: #FAFAFA !important; }
.body--dark .text-subtitle2 { color: var(--text-primary) !important; }
/* Inputs & textareas */
.body--dark .q-field--outlined .q-field__control {
background: #262730 !important;
background: var(--bg-surface-3) !important;
border-radius: 0.5rem !important;
}
.body--dark .q-field--outlined .q-field__control:before {
border-color: rgba(250,250,250,0.2) !important;
border-color: var(--border) !important;
border-radius: 0.5rem !important;
}
.body--dark .q-field--outlined.q-field--focused .q-field__control:after {
border-color: #FF4B4B !important;
border-color: var(--accent) !important;
}
.body--dark .q-field__native,
.body--dark .q-field__input { color: #FAFAFA !important; }
.body--dark .q-field__input { color: var(--text-primary) !important; }
/* Sidebar inputs get main bg */
/* Sidebar inputs get page bg */
.body--dark .q-drawer .q-field--outlined .q-field__control {
background: #0E1117 !important;
background: var(--bg-page) !important;
}
/* Buttons */
.body--dark .q-btn--standard { border-radius: 0.5rem !important; }
.body--dark .q-btn--outline {
transition: background 0.15s ease;
}
.body--dark .q-btn--outline:hover {
background: var(--accent-subtle) !important;
}
/* Tabs */
.body--dark .q-tab--active { color: #FF4B4B !important; }
.body--dark .q-tab__indicator { background: #FF4B4B !important; }
.body--dark .q-tab--active { color: var(--accent) !important; }
.body--dark .q-tab__indicator { background: var(--accent) !important; }
/* Separators */
.body--dark .q-separator { background: rgba(250,250,250,0.2) !important; }
.body--dark .q-separator { background: var(--border) !important; }
/* Expansion items */
.body--dark .q-expansion-item__content { padding: 4px 0; }
.body--dark .q-expansion-item__content { padding: 12px 16px; }
.body--dark .q-item { border-radius: 0.5rem; }
/* Splitter */
.body--dark .q-splitter__separator { background: rgba(250,250,250,0.2) !important; }
.body--dark .q-splitter__separator { background: var(--border) !important; }
.body--dark .q-splitter__before,
.body--dark .q-splitter__after { padding: 0 8px; }
/* Action row wrap */
.action-row { flex-wrap: wrap !important; gap: 4px !important; }
.action-row { flex-wrap: wrap !important; gap: 8px !important; }
/* Notifications */
.body--dark .q-notification { border-radius: 0.5rem; }
/* Font */
body { font-family: "Source Sans Pro", "Source Sans 3", sans-serif !important; }
body { font-family: "Inter", "Source Sans Pro", "Source Sans 3", sans-serif !important; }
/* Surface utility classes (need .body--dark to beat .body--dark .q-card specificity) */
.body--dark .surface-1 { background: var(--bg-surface-1) !important; }
.body--dark .surface-2 { background: var(--bg-surface-2) !important; }
.body--dark .surface-3 { background: var(--bg-surface-3) !important; }
/* Typography utility classes */
.section-header {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary) !important;
}
.subsection-header {
font-size: 0.85rem;
font-weight: 500;
color: var(--text-primary) !important;
}
/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.12);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.2);
}
''')
config = load_config()
@@ -106,9 +163,9 @@ def index():
'text-subtitle1 q-pa-lg')
return
ui.label(f'Editing: {state.file_path.name}').classes('text-h5 q-mb-md')
ui.label(f'Editing: {state.file_path.name}').classes('text-h5 q-mb-lg').style('font-weight: 600')
with ui.tabs().classes('w-full') as tabs:
with ui.tabs().classes('w-full').style('border-bottom: 1px solid var(--border)') as tabs:
ui.tab('batch', label='Batch Processor')
ui.tab('timeline', label='Timeline')
ui.tab('raw', label='Raw Editor')
@@ -148,7 +205,7 @@ def index():
# ------------------------------------------------------------------
# Sidebar (rendered AFTER helpers are attached)
# ------------------------------------------------------------------
with ui.left_drawer(value=True).classes('q-pa-md').style('width: 300px'):
with ui.left_drawer(value=True).classes('q-pa-md').style('width: 320px'):
render_sidebar(state)
# ------------------------------------------------------------------
@@ -165,172 +222,172 @@ def index():
def render_sidebar(state: AppState):
ui.label('Navigator').classes('text-h6')
# --- Path input ---
path_input = ui.input(
'Current Path',
value=str(state.current_dir),
).classes('w-full')
# --- Path input + Pin ---
with ui.card().classes('w-full q-pa-md q-mb-md'):
path_input = ui.input(
'Current Path',
value=str(state.current_dir),
).classes('w-full')
def on_path_enter():
p = resolve_path_case_insensitive(path_input.value)
if p is not None and p.is_dir():
state.current_dir = p
state.config['last_dir'] = str(p)
def on_path_enter():
p = resolve_path_case_insensitive(path_input.value)
if p is not None and p.is_dir():
state.current_dir = p
state.config['last_dir'] = str(p)
save_config(state.current_dir, state.config['favorites'], state.config)
state.loaded_file = None
state.file_path = None
path_input.set_value(str(p))
render_file_list.refresh()
# Auto-load inside render_file_list already refreshed main content
# if files exist; only refresh here for the empty-directory case.
if not state.loaded_file:
state._render_main.refresh()
path_input.on('keydown.enter', lambda _: on_path_enter())
def pin_folder():
d = str(state.current_dir)
if d not in state.config['favorites']:
state.config['favorites'].append(d)
save_config(state.current_dir, state.config['favorites'], state.config)
render_favorites.refresh()
ui.button('Pin Folder', icon='push_pin', on_click=pin_folder).classes('w-full')
# --- Favorites ---
with ui.card().classes('w-full q-pa-md q-mb-md'):
ui.label('Favorites').classes('section-header')
@ui.refreshable
def render_favorites():
for fav in list(state.config['favorites']):
with ui.row().classes('w-full items-center'):
ui.button(
fav,
on_click=lambda f=fav: _jump_to(f),
).props('flat dense').classes('col')
ui.button(
icon='close',
on_click=lambda f=fav: _unpin(f),
).props('flat dense color=negative')
def _jump_to(fav: str):
state.current_dir = Path(fav)
state.config['last_dir'] = fav
save_config(state.current_dir, state.config['favorites'], state.config)
state.loaded_file = None
state.file_path = None
path_input.set_value(str(p))
path_input.set_value(fav)
render_file_list.refresh()
# Auto-load inside render_file_list already refreshed main content
# if files exist; only refresh here for the empty-directory case.
if not state.loaded_file:
state._render_main.refresh()
path_input.on('keydown.enter', lambda _: on_path_enter())
def _unpin(fav: str):
if fav in state.config['favorites']:
state.config['favorites'].remove(fav)
save_config(state.current_dir, state.config['favorites'], state.config)
render_favorites.refresh()
# --- Pin / Unpin ---
def pin_folder():
d = str(state.current_dir)
if d not in state.config['favorites']:
state.config['favorites'].append(d)
save_config(state.current_dir, state.config['favorites'], state.config)
render_favorites.refresh()
ui.button('Pin Folder', icon='push_pin', on_click=pin_folder).classes('w-full')
@ui.refreshable
def render_favorites():
for fav in list(state.config['favorites']):
with ui.row().classes('w-full items-center'):
ui.button(
fav,
on_click=lambda f=fav: _jump_to(f),
).props('flat dense').classes('col')
ui.button(
icon='close',
on_click=lambda f=fav: _unpin(f),
).props('flat dense color=negative')
def _jump_to(fav: str):
state.current_dir = Path(fav)
state.config['last_dir'] = fav
save_config(state.current_dir, state.config['favorites'], state.config)
state.loaded_file = None
state.file_path = None
path_input.set_value(fav)
render_file_list.refresh()
if not state.loaded_file:
state._render_main.refresh()
def _unpin(fav: str):
if fav in state.config['favorites']:
state.config['favorites'].remove(fav)
save_config(state.current_dir, state.config['favorites'], state.config)
render_favorites.refresh()
render_favorites()
ui.separator()
render_favorites()
# --- Snippet Library ---
ui.label('Snippet Library').classes('text-subtitle1 q-mt-md')
with ui.card().classes('w-full q-pa-md q-mb-md'):
ui.label('Snippet Library').classes('section-header')
with ui.expansion('Add New Snippet'):
snip_name_input = ui.input('Name', placeholder='e.g. Cinematic').classes('w-full')
snip_content_input = ui.textarea('Content', placeholder='4k, high quality...').classes('w-full')
with ui.expansion('Add New Snippet'):
snip_name_input = ui.input('Name', placeholder='e.g. Cinematic').classes('w-full')
snip_content_input = ui.textarea('Content', placeholder='4k, high quality...').classes('w-full')
def save_snippet():
name = snip_name_input.value
content = snip_content_input.value
if name and content:
state.snippets[name] = content
def save_snippet():
name = snip_name_input.value
content = snip_content_input.value
if name and content:
state.snippets[name] = content
save_snippets(state.snippets)
snip_name_input.set_value('')
snip_content_input.set_value('')
ui.notify(f"Saved '{name}'")
render_snippet_list.refresh()
ui.button('Save Snippet', on_click=save_snippet).classes('w-full')
@ui.refreshable
def render_snippet_list():
if not state.snippets:
return
ui.label('Click to copy snippet text:').classes('text-caption')
for name, content in list(state.snippets.items()):
with ui.row().classes('w-full items-center'):
async def copy_snippet(c=content):
await ui.run_javascript(
f'navigator.clipboard.writeText({json.dumps(c)})', timeout=3.0)
ui.notify('Copied to clipboard')
ui.button(
f'{name}',
on_click=copy_snippet,
).props('flat dense').classes('col')
ui.button(
icon='delete',
on_click=lambda n=name: _del_snippet(n),
).props('flat dense color=negative')
def _del_snippet(name: str):
if name in state.snippets:
del state.snippets[name]
save_snippets(state.snippets)
snip_name_input.set_value('')
snip_content_input.set_value('')
ui.notify(f"Saved '{name}'")
render_snippet_list.refresh()
ui.button('Save Snippet', on_click=save_snippet).classes('w-full')
@ui.refreshable
def render_snippet_list():
if not state.snippets:
return
ui.label('Click to copy snippet text:').classes('text-caption')
for name, content in list(state.snippets.items()):
with ui.row().classes('w-full items-center'):
async def copy_snippet(c=content):
await ui.run_javascript(
f'navigator.clipboard.writeText({json.dumps(c)})', timeout=3.0)
ui.notify('Copied to clipboard')
ui.button(
f'{name}',
on_click=copy_snippet,
).props('flat dense').classes('col')
ui.button(
icon='delete',
on_click=lambda n=name: _del_snippet(n),
).props('flat dense color=negative')
def _del_snippet(name: str):
if name in state.snippets:
del state.snippets[name]
save_snippets(state.snippets)
render_snippet_list.refresh()
render_snippet_list()
ui.separator()
render_snippet_list()
# --- File List ---
@ui.refreshable
def render_file_list():
json_files = sorted(state.current_dir.glob('*.json'))
json_files = [f for f in json_files if f.name not in ('.editor_config.json', '.editor_snippets.json')]
with ui.card().classes('w-full q-pa-md q-mb-md'):
@ui.refreshable
def render_file_list():
json_files = sorted(state.current_dir.glob('*.json'))
json_files = [f for f in json_files if f.name not in ('.editor_config.json', '.editor_snippets.json')]
if not json_files:
ui.label('No JSON files in this folder.').classes('text-caption')
ui.button('Generate Templates', on_click=lambda: _gen_templates()).classes('w-full')
return
if not json_files:
ui.label('No JSON files in this folder.').classes('text-caption')
ui.button('Generate Templates', on_click=lambda: _gen_templates()).classes('w-full')
return
with ui.expansion('Create New JSON'):
new_fn_input = ui.input('Filename', placeholder='my_prompt_vace').classes('w-full')
with ui.expansion('Create New JSON'):
new_fn_input = ui.input('Filename', placeholder='my_prompt_vace').classes('w-full')
def create_new():
fn = new_fn_input.value
if not fn:
return
if not fn.endswith('.json'):
fn += '.json'
path = state.current_dir / fn
first_item = DEFAULTS.copy()
first_item[KEY_SEQUENCE_NUMBER] = 1
save_json(path, {KEY_BATCH_DATA: [first_item]})
new_fn_input.set_value('')
render_file_list.refresh()
def create_new():
fn = new_fn_input.value
if not fn:
return
if not fn.endswith('.json'):
fn += '.json'
path = state.current_dir / fn
first_item = DEFAULTS.copy()
first_item[KEY_SEQUENCE_NUMBER] = 1
save_json(path, {KEY_BATCH_DATA: [first_item]})
new_fn_input.set_value('')
render_file_list.refresh()
ui.button('Create', on_click=create_new).classes('w-full')
ui.button('Create', on_click=create_new).classes('w-full')
ui.label('Select File').classes('text-subtitle2 q-mt-sm')
file_names = [f.name for f in json_files]
ui.radio(
file_names,
value=file_names[0] if file_names else None,
on_change=lambda e: state._load_file(e.value) if e.value else None,
).classes('w-full')
ui.label('Select File').classes('subsection-header q-mt-sm')
file_names = [f.name for f in json_files]
ui.radio(
file_names,
value=file_names[0] if file_names else None,
on_change=lambda e: state._load_file(e.value) if e.value else None,
).classes('w-full')
# Auto-load first file if nothing loaded yet
if file_names and not state.loaded_file:
state._load_file(file_names[0])
# Auto-load first file if nothing loaded yet
if file_names and not state.loaded_file:
state._load_file(file_names[0])
def _gen_templates():
generate_templates(state.current_dir)
render_file_list.refresh()
def _gen_templates():
generate_templates(state.current_dir)
render_file_list.refresh()
render_file_list()
ui.separator()
render_file_list()
# --- Comfy Monitor toggle ---
def on_monitor_toggle(e):

207
tab_batch_ng.py
View File

@@ -156,69 +156,68 @@ def render_batch_processor(state: AppState):
batch_list = data.get(KEY_BATCH_DATA, [])
# Source file data for importing
json_files = sorted(state.current_dir.glob('*.json'))
json_files = [f for f in json_files if f.name not in (
'.editor_config.json', '.editor_snippets.json')]
file_options = {f.name: f.name for f in json_files}
with ui.card().classes('w-full q-pa-md q-mb-lg'):
json_files = sorted(state.current_dir.glob('*.json'))
json_files = [f for f in json_files if f.name not in (
'.editor_config.json', '.editor_snippets.json')]
file_options = {f.name: f.name for f in json_files}
src_file_select = ui.select(
file_options,
value=file_path.name,
label='Source File:',
).classes('w-64')
src_file_select = ui.select(
file_options,
value=file_path.name,
label='Source File:',
).classes('w-64')
src_seq_select = ui.select([], label='Source Sequence:').classes('w-64')
src_seq_select = ui.select([], label='Source Sequence:').classes('w-64')
# Track loaded source data
_src_cache = {'data': None, 'batch': [], 'name': None}
# Track loaded source data
_src_cache = {'data': None, 'batch': [], 'name': None}
def _update_src():
name = src_file_select.value
if name and name != _src_cache['name']:
src_data, _ = load_json(state.current_dir / name)
_src_cache['data'] = src_data
_src_cache['batch'] = src_data.get(KEY_BATCH_DATA, [])
_src_cache['name'] = name
if _src_cache['batch']:
opts = {i: format_seq_label(s.get(KEY_SEQUENCE_NUMBER, i+1))
for i, s in enumerate(_src_cache['batch'])}
src_seq_select.set_options(opts, value=0)
else:
src_seq_select.set_options({})
def _update_src():
name = src_file_select.value
if name and name != _src_cache['name']:
src_data, _ = load_json(state.current_dir / name)
_src_cache['data'] = src_data
_src_cache['batch'] = src_data.get(KEY_BATCH_DATA, [])
_src_cache['name'] = name
if _src_cache['batch']:
opts = {i: format_seq_label(s.get(KEY_SEQUENCE_NUMBER, i+1))
for i, s in enumerate(_src_cache['batch'])}
src_seq_select.set_options(opts, value=0)
else:
src_seq_select.set_options({})
src_file_select.on_value_change(lambda _: _update_src())
_update_src()
src_file_select.on_value_change(lambda _: _update_src())
_update_src()
# --- Add New Sequence ---
ui.label('Add New Sequence').classes('text-subtitle1 q-mt-md')
# --- Add New Sequence ---
ui.label('Add New Sequence').classes('section-header q-mt-md')
def _add_sequence(new_item):
new_item[KEY_SEQUENCE_NUMBER] = max_main_seq_number(batch_list) + 1
for k in [KEY_PROMPT_HISTORY, KEY_HISTORY_TREE, 'note', 'loras']:
new_item.pop(k, None)
batch_list.append(new_item)
data[KEY_BATCH_DATA] = batch_list
save_json(file_path, data)
render_sequence_list.refresh()
def _add_sequence(new_item):
new_item[KEY_SEQUENCE_NUMBER] = max_main_seq_number(batch_list) + 1
for k in [KEY_PROMPT_HISTORY, KEY_HISTORY_TREE, 'note', 'loras']:
new_item.pop(k, None)
batch_list.append(new_item)
data[KEY_BATCH_DATA] = batch_list
save_json(file_path, data)
render_sequence_list.refresh()
with ui.row():
def add_empty():
_add_sequence(DEFAULTS.copy())
with ui.row():
def add_empty():
_add_sequence(DEFAULTS.copy())
def add_from_source():
item = copy.deepcopy(DEFAULTS)
src_batch = _src_cache['batch']
sel_idx = src_seq_select.value
if src_batch and sel_idx is not None:
item.update(copy.deepcopy(src_batch[int(sel_idx)]))
elif _src_cache['data']:
item.update(copy.deepcopy(_src_cache['data']))
_add_sequence(item)
def add_from_source():
item = copy.deepcopy(DEFAULTS)
src_batch = _src_cache['batch']
sel_idx = src_seq_select.value
if src_batch and sel_idx is not None:
item.update(copy.deepcopy(src_batch[int(sel_idx)]))
elif _src_cache['data']:
item.update(copy.deepcopy(_src_cache['data']))
_add_sequence(item)
ui.button('Add Empty', icon='add', on_click=add_empty)
ui.button('From Source', icon='file_download', on_click=add_from_source)
ui.separator()
ui.button('Add Empty', icon='add', on_click=add_empty)
ui.button('From Source', icon='file_download', on_click=add_from_source)
# --- Standard / LoRA / VACE key sets ---
lora_keys = ['lora 1 high', 'lora 1 low', 'lora 2 high', 'lora 2 low',
@@ -250,36 +249,36 @@ def render_batch_processor(state: AppState):
ui.button('Sort by Number', icon='sort', on_click=sort_by_number).props('flat')
for i, seq in enumerate(batch_list):
_render_sequence_card(
i, seq, batch_list, data, file_path, state,
_src_cache, src_seq_select,
standard_keys, render_sequence_list,
)
with ui.card().classes('w-full q-mb-sm'):
_render_sequence_card(
i, seq, batch_list, data, file_path, state,
_src_cache, src_seq_select,
standard_keys, render_sequence_list,
)
render_sequence_list()
ui.separator()
# --- Save & Snap ---
with ui.row().classes('w-full items-end q-gutter-md'):
commit_input = ui.input('Change Note (Optional)',
placeholder='e.g. Added sequence 3').classes('col')
with ui.card().classes('w-full q-pa-md q-mt-lg'):
with ui.row().classes('w-full items-end q-gutter-md'):
commit_input = ui.input('Change Note (Optional)',
placeholder='e.g. Added sequence 3').classes('col')
def save_and_snap():
data[KEY_BATCH_DATA] = batch_list
tree_data = data.get(KEY_HISTORY_TREE, {})
htree = HistoryTree(tree_data)
snapshot_payload = copy.deepcopy(data)
snapshot_payload.pop(KEY_HISTORY_TREE, None)
note = commit_input.value if commit_input.value else 'Batch Update'
htree.commit(snapshot_payload, note=note)
data[KEY_HISTORY_TREE] = htree.to_dict()
save_json(file_path, data)
state.restored_indicator = None
commit_input.set_value('')
ui.notify('Batch Saved & Snapshot Created!', type='positive')
def save_and_snap():
data[KEY_BATCH_DATA] = batch_list
tree_data = data.get(KEY_HISTORY_TREE, {})
htree = HistoryTree(tree_data)
snapshot_payload = copy.deepcopy(data)
snapshot_payload.pop(KEY_HISTORY_TREE, None)
note = commit_input.value if commit_input.value else 'Batch Update'
htree.commit(snapshot_payload, note=note)
data[KEY_HISTORY_TREE] = htree.to_dict()
save_json(file_path, data)
state.restored_indicator = None
commit_input.set_value('')
ui.notify('Batch Saved & Snapshot Created!', type='positive')
ui.button('Save & Snap', icon='save', on_click=save_and_snap).props('color=primary')
ui.button('Save & Snap', icon='save', on_click=save_and_snap).props('color=primary')
# ======================================================================
@@ -321,7 +320,7 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
batch_list[idx] = item
commit('Copied!')
ui.button('Copy Src', icon='file_download', on_click=copy_source).props('dense')
ui.button('Copy Src', icon='file_download', on_click=copy_source).props('outline')
# Clone Next
def clone_next(idx=i, sn=seq_num, s=seq):
@@ -334,7 +333,7 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
batch_list.insert(pos, new_seq)
commit('Cloned to Next!')
ui.button('Clone Next', icon='content_copy', on_click=clone_next).props('dense')
ui.button('Clone Next', icon='content_copy', on_click=clone_next).props('outline')
# Clone End
def clone_end(s=seq):
@@ -343,7 +342,7 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
batch_list.append(new_seq)
commit('Cloned to End!')
ui.button('Clone End', icon='vertical_align_bottom', on_click=clone_end).props('dense')
ui.button('Clone End', icon='vertical_align_bottom', on_click=clone_end).props('outline')
# Clone Sub
def clone_sub(idx=i, sn=seq_num, s=seq):
@@ -360,7 +359,10 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
batch_list.insert(pos, new_seq)
commit(f'Created {format_seq_label(new_seq[KEY_SEQUENCE_NUMBER])}!')
ui.button('Clone Sub', icon='link', on_click=clone_sub).props('dense')
ui.button('Clone Sub', icon='link', on_click=clone_sub).props('outline')
# Spacer before Promote
ui.element('div').classes('col')
# Promote
def promote(idx=i, s=seq):
@@ -375,14 +377,17 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
# and sees the file is now single (no KEY_BATCH_DATA)
state._render_main.refresh()
ui.button('Promote', icon='north_west', on_click=promote).props('dense')
ui.button('Promote', icon='north_west', on_click=promote)
# Spacer before Delete
ui.element('div').classes('col')
# Delete
def delete(idx=i):
batch_list.pop(idx)
commit()
ui.button(icon='delete', on_click=delete).props('dense color=negative')
ui.button(icon='delete', on_click=delete).props('color=negative')
ui.separator()
@@ -390,13 +395,13 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
with ui.splitter(value=66).classes('w-full') as splitter:
with splitter.before:
dict_textarea('General Prompt', seq, 'general_prompt').classes(
'w-full').props('outlined rows=2')
'w-full q-mt-sm').props('outlined rows=2')
dict_textarea('General Negative', seq, 'general_negative').classes(
'w-full').props('outlined rows=2')
'w-full q-mt-sm').props('outlined rows=2')
dict_textarea('Specific Prompt', seq, 'current_prompt').classes(
'w-full').props('outlined rows=10')
'w-full q-mt-sm').props('outlined rows=10')
dict_textarea('Specific Negative', seq, 'negative').classes(
'w-full').props('outlined rows=2')
'w-full q-mt-sm').props('outlined rows=2')
with splitter.after:
# Sequence number
@@ -452,7 +457,7 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
with ui.expansion('LoRA Settings', icon='style').classes('w-full'):
with ui.row().classes('w-full q-gutter-md'):
for lora_idx in range(1, 4):
with ui.column().classes('col'):
with ui.card().classes('col q-pa-sm surface-3'):
ui.label(f'LoRA {lora_idx}').classes('text-subtitle2')
for tier, tier_label in [('high', 'High'), ('low', 'Low')]:
k = f'lora {lora_idx} {tier}'
@@ -474,8 +479,7 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
lora_input.on('blur', on_lora_blur)
# --- Custom Parameters ---
ui.separator()
ui.label('Custom Parameters').classes('text-caption')
ui.label('Custom Parameters').classes('section-header q-mt-md')
custom_keys = [k for k in seq.keys() if k not in standard_keys]
if custom_keys:
@@ -537,11 +541,11 @@ def _render_vace_settings(i, seq, batch_list, data, file_path, refresh_list):
ui.button('Shift', icon='arrow_downward', on_click=shift_fts).props('dense')
dict_input(ui.input, 'Transition', seq, 'transition').props('outlined')
dict_input(ui.input, 'Transition', seq, 'transition').props('outlined').classes('q-mt-sm')
# VACE Schedule
sched_val = max(0, min(int(seq.get('vace schedule', 1)), len(VACE_MODES) - 1))
with ui.row().classes('w-full items-center'):
with ui.row().classes('w-full items-center q-mt-sm'):
vs_input = dict_number('VACE Schedule', seq, 'vace schedule', default=1,
min=0, max=len(VACE_MODES) - 1).classes('col').props('outlined')
mode_label = ui.label(VACE_MODES[sched_val]).classes('text-caption')
@@ -566,8 +570,8 @@ def _render_vace_settings(i, seq, batch_list, data, file_path, refresh_list):
ui.button('Mode Reference', icon='help', on_click=ref_dlg.open).props('flat dense')
# Input A / B frames
ia_input = dict_number('Input A Frames', seq, 'input_a_frames').props('outlined')
ib_input = dict_number('Input B Frames', seq, 'input_b_frames').props('outlined')
ia_input = dict_number('Input A Frames', seq, 'input_a_frames').props('outlined').classes('q-mt-sm')
ib_input = dict_number('Input B Frames', seq, 'input_b_frames').props('outlined').classes('q-mt-sm')
# VACE Length + output calculation
input_a = int(seq.get('input_a_frames', 16))
@@ -582,7 +586,7 @@ def _render_vace_settings(i, seq, batch_list, data, file_path, refresh_list):
else:
base_length = max(stored_total - input_a - input_b, 1)
with ui.row().classes('w-full items-center'):
with ui.row().classes('w-full items-center q-mt-sm'):
vl_input = ui.number('VACE Length', value=base_length, min=1).classes('col').props(
'outlined')
output_label = ui.label(f'Output: {stored_total}').classes('text-bold')
@@ -607,7 +611,7 @@ def _render_vace_settings(i, seq, batch_list, data, file_path, refresh_list):
for inp in (vs_input, ia_input, ib_input, vl_input):
inp.on('update:model-value', recalc_vace)
dict_number('Reference Switch', seq, 'reference switch').props('outlined')
dict_number('Reference Switch', seq, 'reference switch').props('outlined').classes('q-mt-sm')
# ======================================================================
@@ -638,13 +642,14 @@ def _render_mass_update(batch_list, data, file_path, state: AppState, refresh_li
source_select.on_value_change(update_fields)
update_fields()
ui.label('Apply to:').classes('text-subtitle2 q-mt-md')
ui.label('Apply to:').classes('subsection-header q-mt-md')
select_all_cb = ui.checkbox('Select All')
target_checks = {}
for idx, s in enumerate(batch_list):
sn = s.get(KEY_SEQUENCE_NUMBER, idx + 1)
cb = ui.checkbox(format_seq_label(sn))
target_checks[idx] = cb
with ui.scroll_area().style('max-height: 250px'):
for idx, s in enumerate(batch_list):
sn = s.get(KEY_SEQUENCE_NUMBER, idx + 1)
cb = ui.checkbox(format_seq_label(sn))
target_checks[idx] = cb
def on_select_all(e):
for cb in target_checks.values():

186
tab_comfy_ng.py
View File

@@ -55,7 +55,7 @@ def render_comfy_monitor(state: AppState):
# Add server section
ui.separator()
ui.label('Add New Server').classes('text-subtitle1')
ui.label('Add New Server').classes('section-header')
with ui.row().classes('w-full items-end'):
new_name = ui.input('Server Name', placeholder='e.g. Render Node 2').classes('col')
new_url = ui.input('URL', placeholder='http://192.168.1.50:8188').classes('col')
@@ -152,18 +152,18 @@ def _render_single_instance(state: AppState, instance_config: dict, index: int,
running_cnt = len(queue_data.get('queue_running', []))
pending_cnt = len(queue_data.get('queue_pending', []))
with ui.card().classes('q-pa-sm'):
with ui.card().classes('q-pa-md text-center').style('min-width: 100px'):
ui.label('Status')
ui.label('Online' if running_cnt > 0 else 'Idle').classes(
'text-positive' if running_cnt > 0 else 'text-grey')
with ui.card().classes('q-pa-sm'):
with ui.card().classes('q-pa-md text-center').style('min-width: 100px'):
ui.label('Pending')
ui.label(str(pending_cnt))
with ui.card().classes('q-pa-sm'):
with ui.card().classes('q-pa-md text-center').style('min-width: 100px'):
ui.label('Running')
ui.label(str(running_cnt))
else:
with ui.card().classes('q-pa-sm'):
with ui.card().classes('q-pa-md text-center').style('min-width: 100px'):
ui.label('Status')
ui.label('Offline').classes('text-negative')
ui.label(f'Could not connect to {comfy_url}').classes('text-negative')
@@ -173,104 +173,106 @@ def _render_single_instance(state: AppState, instance_config: dict, index: int,
ui.button('Refresh Status', icon='refresh', on_click=refresh_status).props('flat dense')
# --- Live View ---
ui.label('Live View').classes('text-subtitle1 q-mt-md')
toggle_key = f'live_toggle_{index}'
with ui.card().classes('w-full q-pa-md q-mt-md'):
ui.label('Live View').classes('section-header')
toggle_key = f'live_toggle_{index}'
live_checkbox = ui.checkbox('Enable Live Preview', value=False)
# Store reference so poll_all timer can disable it on timeout
state._live_checkboxes[toggle_key] = live_checkbox
live_checkbox = ui.checkbox('Enable Live Preview', value=False)
# Store reference so poll_all timer can disable it on timeout
state._live_checkboxes[toggle_key] = live_checkbox
@ui.refreshable
def render_live_view():
if not live_checkbox.value:
ui.label('Live Preview is disabled.').classes('text-caption')
return
# Record start time
if toggle_key not in state.live_toggles or state.live_toggles.get(toggle_key) is None:
state.live_toggles[toggle_key] = time.time()
timeout_val = config.get('monitor_timeout', 0)
if timeout_val > 0:
start = state.live_toggles.get(toggle_key, time.time())
remaining = (timeout_val * 60) - (time.time() - start)
if remaining <= 0:
live_checkbox.set_value(False)
state.live_toggles[toggle_key] = None
ui.label('Preview timed out.').classes('text-caption')
@ui.refreshable
def render_live_view():
if not live_checkbox.value:
ui.label('Live Preview is disabled.').classes('text-caption')
return
ui.label(f'Auto-off in: {int(remaining)}s').classes('text-caption')
iframe_h = ui.slider(min=600, max=2500, step=50, value=1000).classes('w-full')
ui.label().bind_text_from(iframe_h, 'value', backward=lambda v: f'Height: {v}px')
# Record start time
if toggle_key not in state.live_toggles or state.live_toggles.get(toggle_key) is None:
state.live_toggles[toggle_key] = time.time()
viewer_base = config.get('viewer_url', '').strip()
parsed = urllib.parse.urlparse(viewer_base)
if viewer_base and parsed.scheme in ('http', 'https'):
safe_src = html.escape(viewer_base, quote=True)
ui.label(f'Viewing: {viewer_base}').classes('text-caption')
timeout_val = config.get('monitor_timeout', 0)
if timeout_val > 0:
start = state.live_toggles.get(toggle_key, time.time())
remaining = (timeout_val * 60) - (time.time() - start)
if remaining <= 0:
live_checkbox.set_value(False)
state.live_toggles[toggle_key] = None
ui.label('Preview timed out.').classes('text-caption')
return
ui.label(f'Auto-off in: {int(remaining)}s').classes('text-caption')
iframe_container = ui.column().classes('w-full')
iframe_h = ui.slider(min=600, max=2500, step=50, value=1000).classes('w-full')
ui.label().bind_text_from(iframe_h, 'value', backward=lambda v: f'Height: {v}px')
def update_iframe():
iframe_container.clear()
with iframe_container:
ui.html(
f'<iframe src="{safe_src}" width="100%" height="{int(iframe_h.value)}px"'
f' style="border: 2px solid #666; border-radius: 8px;"></iframe>'
)
viewer_base = config.get('viewer_url', '').strip()
parsed = urllib.parse.urlparse(viewer_base)
if viewer_base and parsed.scheme in ('http', 'https'):
safe_src = html.escape(viewer_base, quote=True)
ui.label(f'Viewing: {viewer_base}').classes('text-caption')
iframe_h.on_value_change(lambda _: update_iframe())
update_iframe()
else:
ui.label('No valid viewer URL configured.').classes('text-warning')
iframe_container = ui.column().classes('w-full')
state._live_refreshables[toggle_key] = render_live_view
live_checkbox.on_value_change(lambda _: render_live_view.refresh())
render_live_view()
def update_iframe():
iframe_container.clear()
with iframe_container:
ui.html(
f'<iframe src="{safe_src}" width="100%" height="{int(iframe_h.value)}px"'
f' style="border: 2px solid #666; border-radius: 8px;"></iframe>'
)
iframe_h.on_value_change(lambda _: update_iframe())
update_iframe()
else:
ui.label('No valid viewer URL configured.').classes('text-warning')
state._live_refreshables[toggle_key] = render_live_view
live_checkbox.on_value_change(lambda _: render_live_view.refresh())
render_live_view()
# --- Latest Output ---
ui.label('Latest Output').classes('text-subtitle1 q-mt-md')
img_container = ui.column().classes('w-full')
with ui.card().classes('w-full q-pa-md q-mt-md'):
ui.label('Latest Output').classes('section-header')
img_container = ui.column().classes('w-full')
async def check_image():
img_container.clear()
loop = asyncio.get_event_loop()
res, err = await loop.run_in_executor(
None, lambda: _fetch_blocking(f'{comfy_url}/history', timeout=2))
with img_container:
if err is not None:
ui.label(f'Error fetching image: {err}').classes('text-negative')
return
try:
history = res.json()
except (ValueError, Exception):
ui.label('Invalid response from server').classes('text-negative')
return
if not history:
ui.label('No history found.').classes('text-caption')
return
last_prompt_id = list(history.keys())[-1]
outputs = history[last_prompt_id].get('outputs', {})
found_img = None
for node_output in outputs.values():
if 'images' in node_output:
for img_info in node_output['images']:
if img_info['type'] == 'output':
found_img = img_info
break
async def check_image():
img_container.clear()
loop = asyncio.get_event_loop()
res, err = await loop.run_in_executor(
None, lambda: _fetch_blocking(f'{comfy_url}/history', timeout=2))
with img_container:
if err is not None:
ui.label(f'Error fetching image: {err}').classes('text-negative')
return
try:
history = res.json()
except (ValueError, Exception):
ui.label('Invalid response from server').classes('text-negative')
return
if not history:
ui.label('No history found.').classes('text-caption')
return
last_prompt_id = list(history.keys())[-1]
outputs = history[last_prompt_id].get('outputs', {})
found_img = None
for node_output in outputs.values():
if 'images' in node_output:
for img_info in node_output['images']:
if img_info['type'] == 'output':
found_img = img_info
break
if found_img:
break
if found_img:
break
if found_img:
params = urllib.parse.urlencode({
'filename': found_img['filename'],
'subfolder': found_img['subfolder'],
'type': found_img['type'],
})
img_url = f'{comfy_url}/view?{params}'
ui.image(img_url).classes('w-full').style('max-width: 600px')
ui.label(f'Last Output: {found_img["filename"]}').classes('text-caption')
else:
ui.label('Last run had no image output.').classes('text-caption')
params = urllib.parse.urlencode({
'filename': found_img['filename'],
'subfolder': found_img['subfolder'],
'type': found_img['type'],
})
img_url = f'{comfy_url}/view?{params}'
ui.image(img_url).classes('w-full').style('max-width: 600px')
ui.label(f'Last Output: {found_img["filename"]}').classes('text-caption')
else:
ui.label('Last run had no image output.').classes('text-caption')
ui.button('Check Latest Image', icon='image', on_click=check_image).props('flat')
ui.button('Check Latest Image', icon='image', on_click=check_image).props('flat')

107
tab_raw_ng.py
View File

@@ -11,64 +11,63 @@ def render_raw_editor(state: AppState):
data = state.data_cache
file_path = state.file_path
ui.label(f'Raw Editor: {file_path.name}').classes('text-h6')
with ui.card().classes('w-full q-pa-md'):
ui.label(f'Raw Editor: {file_path.name}').classes('text-h6 q-mb-md')
hide_history = ui.checkbox(
'Hide History (Safe Mode)',
value=True,
)
hide_history = ui.checkbox(
'Hide History (Safe Mode)',
value=True,
)
@ui.refreshable
def render_editor():
# Prepare display data
if hide_history.value:
display_data = copy.deepcopy(data)
display_data.pop(KEY_HISTORY_TREE, None)
display_data.pop(KEY_PROMPT_HISTORY, None)
else:
display_data = data
@ui.refreshable
def render_editor():
# Prepare display data
if hide_history.value:
display_data = copy.deepcopy(data)
display_data.pop(KEY_HISTORY_TREE, None)
display_data.pop(KEY_PROMPT_HISTORY, None)
else:
display_data = data
try:
json_str = json.dumps(display_data, indent=4, ensure_ascii=False)
except Exception as e:
ui.notify(f'Error serializing JSON: {e}', type='negative')
json_str = '{}'
text_area = ui.textarea(
'JSON Content',
value=json_str,
).classes('w-full font-mono').props('outlined rows=30')
ui.separator()
def do_save():
try:
input_data = json.loads(text_area.value)
# Merge hidden history back in if safe mode
if hide_history.value:
if KEY_HISTORY_TREE in data:
input_data[KEY_HISTORY_TREE] = data[KEY_HISTORY_TREE]
if KEY_PROMPT_HISTORY in data:
input_data[KEY_PROMPT_HISTORY] = data[KEY_PROMPT_HISTORY]
save_json(file_path, input_data)
data.clear()
data.update(input_data)
state.last_mtime = get_file_mtime(file_path)
ui.notify('Raw JSON Saved Successfully!', type='positive')
render_editor.refresh()
except json.JSONDecodeError as e:
ui.notify(f'Invalid JSON Syntax: {e}', type='negative')
json_str = json.dumps(display_data, indent=4, ensure_ascii=False)
except Exception as e:
ui.notify(f'Unexpected Error: {e}', type='negative')
ui.notify(f'Error serializing JSON: {e}', type='negative')
json_str = '{}'
ui.button('Save Raw Changes', icon='save', on_click=do_save).props(
'color=primary'
).classes('w-full')
text_area = ui.textarea(
'JSON Content',
value=json_str,
).classes('w-full font-mono').props('outlined rows=30')
hide_history.on_value_change(lambda _: render_editor.refresh())
render_editor()
def do_save():
try:
input_data = json.loads(text_area.value)
# Merge hidden history back in if safe mode
if hide_history.value:
if KEY_HISTORY_TREE in data:
input_data[KEY_HISTORY_TREE] = data[KEY_HISTORY_TREE]
if KEY_PROMPT_HISTORY in data:
input_data[KEY_PROMPT_HISTORY] = data[KEY_PROMPT_HISTORY]
save_json(file_path, input_data)
data.clear()
data.update(input_data)
state.last_mtime = get_file_mtime(file_path)
ui.notify('Raw JSON Saved Successfully!', type='positive')
render_editor.refresh()
except json.JSONDecodeError as e:
ui.notify(f'Invalid JSON Syntax: {e}', type='negative')
except Exception as e:
ui.notify(f'Unexpected Error: {e}', type='negative')
ui.button('Save Raw Changes', icon='save', on_click=do_save).props(
'color=primary'
).classes('w-full q-mt-md')
hide_history.on_value_change(lambda _: render_editor.refresh())
render_editor()

30
tab_timeline_ng.py
View File

@@ -68,11 +68,12 @@ def _render_graph_or_log(mode, all_nodes, htree, selected_nodes,
"""Render graph visualization or linear log view."""
if mode in ('Horizontal', 'Vertical'):
direction = 'LR' if mode == 'Horizontal' else 'TB'
try:
graph_dot = htree.generate_graph(direction=direction)
_render_graphviz(graph_dot)
except Exception as e:
ui.label(f'Graph Error: {e}').classes('text-negative')
with ui.card().classes('w-full q-pa-md'):
try:
graph_dot = htree.generate_graph(direction=direction)
_render_graphviz(graph_dot)
except Exception as e:
ui.label(f'Graph Error: {e}').classes('text-negative')
elif mode == 'Linear Log':
ui.label('Chronological list of all snapshots.').classes('text-caption')
@@ -82,9 +83,9 @@ def _render_graph_or_log(mode, all_nodes, htree, selected_nodes,
card_style = ''
if is_selected:
card_style = 'background: #3d1f1f !important;'
card_style = 'background: rgba(239, 68, 68, 0.1) !important; border-left: 3px solid var(--negative);'
elif is_head:
card_style = 'background: #1a2332 !important;'
card_style = 'background: var(--accent-subtle) !important; border-left: 3px solid var(--accent);'
with ui.card().classes('w-full q-mb-sm').style(card_style):
with ui.row().classes('w-full items-center'):
if selection_mode_on:
@@ -145,7 +146,7 @@ def _render_batch_delete(htree, data, file_path, state, refresh_fn):
def _render_node_manager(all_nodes, htree, data, file_path, restore_fn, refresh_fn):
"""Render node selector with restore, rename, delete, and preview."""
ui.label('Manage Version').classes('text-subtitle1 q-mt-md')
ui.label('Manage Version').classes('section-header')
def fmt_node(n):
ts = time.strftime('%b %d %H:%M', time.localtime(n['timestamp']))
@@ -186,7 +187,7 @@ def _render_node_manager(all_nodes, htree, data, file_path, restore_fn, refresh_
ui.button('Update Label', on_click=rename_node).props('flat')
# Danger zone
with ui.expansion('Danger Zone (Delete)', icon='warning').classes('w-full q-mt-md'):
with ui.expansion('Danger Zone (Delete)', icon='warning').classes('w-full q-mt-md').style('border-left: 3px solid var(--negative)'):
ui.label('Deleting a node cannot be undone.').classes('text-warning')
def delete_selected():
@@ -226,7 +227,7 @@ def render_timeline_tab(state: AppState):
'text-info q-pa-sm')
# --- View mode + Selection toggle ---
with ui.row().classes('w-full items-center q-gutter-md'):
with ui.row().classes('w-full items-center q-gutter-md q-mb-md'):
ui.label('Version History').classes('text-h6 col')
view_mode = ui.toggle(
['Horizontal', 'Vertical', 'Linear Log'],
@@ -249,11 +250,10 @@ def render_timeline_tab(state: AppState):
if selection_mode.value and state.timeline_selected_nodes:
_render_batch_delete(htree, data, file_path, state, render_timeline.refresh)
ui.separator()
_render_node_manager(
all_nodes, htree, data, file_path,
_restore_and_refresh, render_timeline.refresh)
with ui.card().classes('w-full q-pa-md q-mt-md'):
_render_node_manager(
all_nodes, htree, data, file_path,
_restore_and_refresh, render_timeline.refresh)
def _toggle_select(nid, checked):
if checked: