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(): def index():
# -- Streamlit dark theme -- # -- Streamlit dark theme --
ui.dark_mode(True) 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(''' 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 */ /* Backgrounds */
body.body--dark, body.body--dark,
.q-page.body--dark, .q-page.body--dark,
.body--dark .q-page { background: #0E1117 !important; } .body--dark .q-page { background: var(--bg-page) !important; }
.body--dark .q-drawer { background: #262730 !important; } .body--dark .q-drawer { background: var(--bg-surface-1) !important; }
.body--dark .q-card { background: #262730 !important; border-radius: 0.5rem; } .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-panels { background: transparent !important; }
.body--dark .q-tab-panel { background: transparent !important; } .body--dark .q-tab-panel { background: transparent !important; }
.body--dark .q-expansion-item { background: transparent !important; } .body--dark .q-expansion-item { background: transparent !important; }
/* Text */ /* Text */
.body--dark { color: #FAFAFA !important; } .body--dark { color: var(--text-primary) !important; }
.body--dark .q-field__label { color: rgba(250,250,250,0.6) !important; } .body--dark .q-field__label { color: var(--text-secondary) !important; }
.body--dark .text-caption { color: rgba(250,250,250,0.6) !important; } .body--dark .text-caption { color: var(--text-secondary) !important; }
.body--dark .text-subtitle1, .body--dark .text-subtitle1,
.body--dark .text-subtitle2 { color: #FAFAFA !important; } .body--dark .text-subtitle2 { color: var(--text-primary) !important; }
/* Inputs & textareas */ /* Inputs & textareas */
.body--dark .q-field--outlined .q-field__control { .body--dark .q-field--outlined .q-field__control {
background: #262730 !important; background: var(--bg-surface-3) !important;
border-radius: 0.5rem !important; border-radius: 0.5rem !important;
} }
.body--dark .q-field--outlined .q-field__control:before { .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; border-radius: 0.5rem !important;
} }
.body--dark .q-field--outlined.q-field--focused .q-field__control:after { .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__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 { .body--dark .q-drawer .q-field--outlined .q-field__control {
background: #0E1117 !important; background: var(--bg-page) !important;
} }
/* Buttons */ /* Buttons */
.body--dark .q-btn--standard { border-radius: 0.5rem !important; } .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 */ /* Tabs */
.body--dark .q-tab--active { color: #FF4B4B !important; } .body--dark .q-tab--active { color: var(--accent) !important; }
.body--dark .q-tab__indicator { background: #FF4B4B !important; } .body--dark .q-tab__indicator { background: var(--accent) !important; }
/* Separators */ /* Separators */
.body--dark .q-separator { background: rgba(250,250,250,0.2) !important; } .body--dark .q-separator { background: var(--border) !important; }
/* Expansion items */ /* 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; } .body--dark .q-item { border-radius: 0.5rem; }
/* Splitter */ /* 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 wrap */
.action-row { flex-wrap: wrap !important; gap: 4px !important; } .action-row { flex-wrap: wrap !important; gap: 8px !important; }
/* Notifications */ /* Notifications */
.body--dark .q-notification { border-radius: 0.5rem; } .body--dark .q-notification { border-radius: 0.5rem; }
/* Font */ /* 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() config = load_config()
@@ -106,9 +163,9 @@ def index():
'text-subtitle1 q-pa-lg') 'text-subtitle1 q-pa-lg')
return 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('batch', label='Batch Processor')
ui.tab('timeline', label='Timeline') ui.tab('timeline', label='Timeline')
ui.tab('raw', label='Raw Editor') ui.tab('raw', label='Raw Editor')
@@ -148,7 +205,7 @@ def index():
# ------------------------------------------------------------------ # ------------------------------------------------------------------
# Sidebar (rendered AFTER helpers are attached) # 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) render_sidebar(state)
# ------------------------------------------------------------------ # ------------------------------------------------------------------
@@ -165,172 +222,172 @@ def index():
def render_sidebar(state: AppState): def render_sidebar(state: AppState):
ui.label('Navigator').classes('text-h6') ui.label('Navigator').classes('text-h6')
# --- Path input --- # --- Path input + Pin ---
path_input = ui.input( with ui.card().classes('w-full q-pa-md q-mb-md'):
'Current Path', path_input = ui.input(
value=str(state.current_dir), 'Current Path',
).classes('w-full') value=str(state.current_dir),
).classes('w-full')
def on_path_enter(): def on_path_enter():
p = resolve_path_case_insensitive(path_input.value) p = resolve_path_case_insensitive(path_input.value)
if p is not None and p.is_dir(): if p is not None and p.is_dir():
state.current_dir = p state.current_dir = p
state.config['last_dir'] = str(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) save_config(state.current_dir, state.config['favorites'], state.config)
state.loaded_file = None state.loaded_file = None
state.file_path = None state.file_path = None
path_input.set_value(str(p)) path_input.set_value(fav)
render_file_list.refresh() 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: if not state.loaded_file:
state._render_main.refresh() 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 --- render_favorites()
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()
# --- Snippet Library --- # --- 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'): with ui.expansion('Add New Snippet'):
snip_name_input = ui.input('Name', placeholder='e.g. Cinematic').classes('w-full') 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') snip_content_input = ui.textarea('Content', placeholder='4k, high quality...').classes('w-full')
def save_snippet(): def save_snippet():
name = snip_name_input.value name = snip_name_input.value
content = snip_content_input.value content = snip_content_input.value
if name and content: if name and content:
state.snippets[name] = 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) save_snippets(state.snippets)
snip_name_input.set_value('')
snip_content_input.set_value('')
ui.notify(f"Saved '{name}'")
render_snippet_list.refresh() render_snippet_list.refresh()
ui.button('Save Snippet', on_click=save_snippet).classes('w-full') render_snippet_list()
@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()
# --- File List --- # --- File List ---
@ui.refreshable with ui.card().classes('w-full q-pa-md q-mb-md'):
def render_file_list(): @ui.refreshable
json_files = sorted(state.current_dir.glob('*.json')) def render_file_list():
json_files = [f for f in json_files if f.name not in ('.editor_config.json', '.editor_snippets.json')] 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: if not json_files:
ui.label('No JSON files in this folder.').classes('text-caption') ui.label('No JSON files in this folder.').classes('text-caption')
ui.button('Generate Templates', on_click=lambda: _gen_templates()).classes('w-full') ui.button('Generate Templates', on_click=lambda: _gen_templates()).classes('w-full')
return return
with ui.expansion('Create New JSON'): with ui.expansion('Create New JSON'):
new_fn_input = ui.input('Filename', placeholder='my_prompt_vace').classes('w-full') new_fn_input = ui.input('Filename', placeholder='my_prompt_vace').classes('w-full')
def create_new(): def create_new():
fn = new_fn_input.value fn = new_fn_input.value
if not fn: if not fn:
return return
if not fn.endswith('.json'): if not fn.endswith('.json'):
fn += '.json' fn += '.json'
path = state.current_dir / fn path = state.current_dir / fn
first_item = DEFAULTS.copy() first_item = DEFAULTS.copy()
first_item[KEY_SEQUENCE_NUMBER] = 1 first_item[KEY_SEQUENCE_NUMBER] = 1
save_json(path, {KEY_BATCH_DATA: [first_item]}) save_json(path, {KEY_BATCH_DATA: [first_item]})
new_fn_input.set_value('') new_fn_input.set_value('')
render_file_list.refresh() 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') ui.label('Select File').classes('subsection-header q-mt-sm')
file_names = [f.name for f in json_files] file_names = [f.name for f in json_files]
ui.radio( ui.radio(
file_names, file_names,
value=file_names[0] if file_names else None, value=file_names[0] if file_names else None,
on_change=lambda e: state._load_file(e.value) if e.value else None, on_change=lambda e: state._load_file(e.value) if e.value else None,
).classes('w-full') ).classes('w-full')
# Auto-load first file if nothing loaded yet # Auto-load first file if nothing loaded yet
if file_names and not state.loaded_file: if file_names and not state.loaded_file:
state._load_file(file_names[0]) state._load_file(file_names[0])
def _gen_templates(): def _gen_templates():
generate_templates(state.current_dir) generate_templates(state.current_dir)
render_file_list.refresh() render_file_list.refresh()
render_file_list() render_file_list()
ui.separator()
# --- Comfy Monitor toggle --- # --- Comfy Monitor toggle ---
def on_monitor_toggle(e): 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, []) batch_list = data.get(KEY_BATCH_DATA, [])
# Source file data for importing # Source file data for importing
json_files = sorted(state.current_dir.glob('*.json')) with ui.card().classes('w-full q-pa-md q-mb-lg'):
json_files = [f for f in json_files if f.name not in ( json_files = sorted(state.current_dir.glob('*.json'))
'.editor_config.json', '.editor_snippets.json')] json_files = [f for f in json_files if f.name not in (
file_options = {f.name: f.name for f in json_files} '.editor_config.json', '.editor_snippets.json')]
file_options = {f.name: f.name for f in json_files}
src_file_select = ui.select( src_file_select = ui.select(
file_options, file_options,
value=file_path.name, value=file_path.name,
label='Source File:', label='Source File:',
).classes('w-64') ).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 # Track loaded source data
_src_cache = {'data': None, 'batch': [], 'name': None} _src_cache = {'data': None, 'batch': [], 'name': None}
def _update_src(): def _update_src():
name = src_file_select.value name = src_file_select.value
if name and name != _src_cache['name']: if name and name != _src_cache['name']:
src_data, _ = load_json(state.current_dir / name) src_data, _ = load_json(state.current_dir / name)
_src_cache['data'] = src_data _src_cache['data'] = src_data
_src_cache['batch'] = src_data.get(KEY_BATCH_DATA, []) _src_cache['batch'] = src_data.get(KEY_BATCH_DATA, [])
_src_cache['name'] = name _src_cache['name'] = name
if _src_cache['batch']: if _src_cache['batch']:
opts = {i: format_seq_label(s.get(KEY_SEQUENCE_NUMBER, i+1)) opts = {i: format_seq_label(s.get(KEY_SEQUENCE_NUMBER, i+1))
for i, s in enumerate(_src_cache['batch'])} for i, s in enumerate(_src_cache['batch'])}
src_seq_select.set_options(opts, value=0) src_seq_select.set_options(opts, value=0)
else: else:
src_seq_select.set_options({}) src_seq_select.set_options({})
src_file_select.on_value_change(lambda _: _update_src()) src_file_select.on_value_change(lambda _: _update_src())
_update_src() _update_src()
# --- Add New Sequence --- # --- Add New Sequence ---
ui.label('Add New Sequence').classes('text-subtitle1 q-mt-md') ui.label('Add New Sequence').classes('section-header q-mt-md')
def _add_sequence(new_item): def _add_sequence(new_item):
new_item[KEY_SEQUENCE_NUMBER] = max_main_seq_number(batch_list) + 1 new_item[KEY_SEQUENCE_NUMBER] = max_main_seq_number(batch_list) + 1
for k in [KEY_PROMPT_HISTORY, KEY_HISTORY_TREE, 'note', 'loras']: for k in [KEY_PROMPT_HISTORY, KEY_HISTORY_TREE, 'note', 'loras']:
new_item.pop(k, None) new_item.pop(k, None)
batch_list.append(new_item) batch_list.append(new_item)
data[KEY_BATCH_DATA] = batch_list data[KEY_BATCH_DATA] = batch_list
save_json(file_path, data) save_json(file_path, data)
render_sequence_list.refresh() render_sequence_list.refresh()
with ui.row(): with ui.row():
def add_empty(): def add_empty():
_add_sequence(DEFAULTS.copy()) _add_sequence(DEFAULTS.copy())
def add_from_source(): def add_from_source():
item = copy.deepcopy(DEFAULTS) item = copy.deepcopy(DEFAULTS)
src_batch = _src_cache['batch'] src_batch = _src_cache['batch']
sel_idx = src_seq_select.value sel_idx = src_seq_select.value
if src_batch and sel_idx is not None: if src_batch and sel_idx is not None:
item.update(copy.deepcopy(src_batch[int(sel_idx)])) item.update(copy.deepcopy(src_batch[int(sel_idx)]))
elif _src_cache['data']: elif _src_cache['data']:
item.update(copy.deepcopy(_src_cache['data'])) item.update(copy.deepcopy(_src_cache['data']))
_add_sequence(item) _add_sequence(item)
ui.button('Add Empty', icon='add', on_click=add_empty) ui.button('Add Empty', icon='add', on_click=add_empty)
ui.button('From Source', icon='file_download', on_click=add_from_source) ui.button('From Source', icon='file_download', on_click=add_from_source)
ui.separator()
# --- Standard / LoRA / VACE key sets --- # --- Standard / LoRA / VACE key sets ---
lora_keys = ['lora 1 high', 'lora 1 low', 'lora 2 high', 'lora 2 low', 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') ui.button('Sort by Number', icon='sort', on_click=sort_by_number).props('flat')
for i, seq in enumerate(batch_list): for i, seq in enumerate(batch_list):
_render_sequence_card( with ui.card().classes('w-full q-mb-sm'):
i, seq, batch_list, data, file_path, state, _render_sequence_card(
_src_cache, src_seq_select, i, seq, batch_list, data, file_path, state,
standard_keys, render_sequence_list, _src_cache, src_seq_select,
) standard_keys, render_sequence_list,
)
render_sequence_list() render_sequence_list()
ui.separator()
# --- Save & Snap --- # --- Save & Snap ---
with ui.row().classes('w-full items-end q-gutter-md'): with ui.card().classes('w-full q-pa-md q-mt-lg'):
commit_input = ui.input('Change Note (Optional)', with ui.row().classes('w-full items-end q-gutter-md'):
placeholder='e.g. Added sequence 3').classes('col') commit_input = ui.input('Change Note (Optional)',
placeholder='e.g. Added sequence 3').classes('col')
def save_and_snap(): def save_and_snap():
data[KEY_BATCH_DATA] = batch_list data[KEY_BATCH_DATA] = batch_list
tree_data = data.get(KEY_HISTORY_TREE, {}) tree_data = data.get(KEY_HISTORY_TREE, {})
htree = HistoryTree(tree_data) htree = HistoryTree(tree_data)
snapshot_payload = copy.deepcopy(data) snapshot_payload = copy.deepcopy(data)
snapshot_payload.pop(KEY_HISTORY_TREE, None) snapshot_payload.pop(KEY_HISTORY_TREE, None)
note = commit_input.value if commit_input.value else 'Batch Update' note = commit_input.value if commit_input.value else 'Batch Update'
htree.commit(snapshot_payload, note=note) htree.commit(snapshot_payload, note=note)
data[KEY_HISTORY_TREE] = htree.to_dict() data[KEY_HISTORY_TREE] = htree.to_dict()
save_json(file_path, data) save_json(file_path, data)
state.restored_indicator = None state.restored_indicator = None
commit_input.set_value('') commit_input.set_value('')
ui.notify('Batch Saved & Snapshot Created!', type='positive') 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 batch_list[idx] = item
commit('Copied!') 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 # Clone Next
def clone_next(idx=i, sn=seq_num, s=seq): 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) batch_list.insert(pos, new_seq)
commit('Cloned to Next!') 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 # Clone End
def clone_end(s=seq): 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) batch_list.append(new_seq)
commit('Cloned to End!') 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 # Clone Sub
def clone_sub(idx=i, sn=seq_num, s=seq): 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) batch_list.insert(pos, new_seq)
commit(f'Created {format_seq_label(new_seq[KEY_SEQUENCE_NUMBER])}!') 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 # Promote
def promote(idx=i, s=seq): 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) # and sees the file is now single (no KEY_BATCH_DATA)
state._render_main.refresh() 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 # Delete
def delete(idx=i): def delete(idx=i):
batch_list.pop(idx) batch_list.pop(idx)
commit() commit()
ui.button(icon='delete', on_click=delete).props('dense color=negative') ui.button(icon='delete', on_click=delete).props('color=negative')
ui.separator() 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 ui.splitter(value=66).classes('w-full') as splitter:
with splitter.before: with splitter.before:
dict_textarea('General Prompt', seq, 'general_prompt').classes( 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( 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( 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( 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: with splitter.after:
# Sequence number # 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.expansion('LoRA Settings', icon='style').classes('w-full'):
with ui.row().classes('w-full q-gutter-md'): with ui.row().classes('w-full q-gutter-md'):
for lora_idx in range(1, 4): 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') ui.label(f'LoRA {lora_idx}').classes('text-subtitle2')
for tier, tier_label in [('high', 'High'), ('low', 'Low')]: for tier, tier_label in [('high', 'High'), ('low', 'Low')]:
k = f'lora {lora_idx} {tier}' 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) lora_input.on('blur', on_lora_blur)
# --- Custom Parameters --- # --- Custom Parameters ---
ui.separator() ui.label('Custom Parameters').classes('section-header q-mt-md')
ui.label('Custom Parameters').classes('text-caption')
custom_keys = [k for k in seq.keys() if k not in standard_keys] custom_keys = [k for k in seq.keys() if k not in standard_keys]
if custom_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') 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 # VACE Schedule
sched_val = max(0, min(int(seq.get('vace schedule', 1)), len(VACE_MODES) - 1)) 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, vs_input = dict_number('VACE Schedule', seq, 'vace schedule', default=1,
min=0, max=len(VACE_MODES) - 1).classes('col').props('outlined') min=0, max=len(VACE_MODES) - 1).classes('col').props('outlined')
mode_label = ui.label(VACE_MODES[sched_val]).classes('text-caption') 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') ui.button('Mode Reference', icon='help', on_click=ref_dlg.open).props('flat dense')
# Input A / B frames # Input A / B frames
ia_input = dict_number('Input A Frames', seq, 'input_a_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') ib_input = dict_number('Input B Frames', seq, 'input_b_frames').props('outlined').classes('q-mt-sm')
# VACE Length + output calculation # VACE Length + output calculation
input_a = int(seq.get('input_a_frames', 16)) 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: else:
base_length = max(stored_total - input_a - input_b, 1) 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( vl_input = ui.number('VACE Length', value=base_length, min=1).classes('col').props(
'outlined') 'outlined')
output_label = ui.label(f'Output: {stored_total}').classes('text-bold') 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): for inp in (vs_input, ia_input, ib_input, vl_input):
inp.on('update:model-value', recalc_vace) 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) source_select.on_value_change(update_fields)
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') select_all_cb = ui.checkbox('Select All')
target_checks = {} target_checks = {}
for idx, s in enumerate(batch_list): with ui.scroll_area().style('max-height: 250px'):
sn = s.get(KEY_SEQUENCE_NUMBER, idx + 1) for idx, s in enumerate(batch_list):
cb = ui.checkbox(format_seq_label(sn)) sn = s.get(KEY_SEQUENCE_NUMBER, idx + 1)
target_checks[idx] = cb cb = ui.checkbox(format_seq_label(sn))
target_checks[idx] = cb
def on_select_all(e): def on_select_all(e):
for cb in target_checks.values(): 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 # Add server section
ui.separator() 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'): with ui.row().classes('w-full items-end'):
new_name = ui.input('Server Name', placeholder='e.g. Render Node 2').classes('col') 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') 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', [])) running_cnt = len(queue_data.get('queue_running', []))
pending_cnt = len(queue_data.get('queue_pending', [])) 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('Status')
ui.label('Online' if running_cnt > 0 else 'Idle').classes( ui.label('Online' if running_cnt > 0 else 'Idle').classes(
'text-positive' if running_cnt > 0 else 'text-grey') '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('Pending')
ui.label(str(pending_cnt)) 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('Running')
ui.label(str(running_cnt)) ui.label(str(running_cnt))
else: 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('Status')
ui.label('Offline').classes('text-negative') ui.label('Offline').classes('text-negative')
ui.label(f'Could not connect to {comfy_url}').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') ui.button('Refresh Status', icon='refresh', on_click=refresh_status).props('flat dense')
# --- Live View --- # --- Live View ---
ui.label('Live View').classes('text-subtitle1 q-mt-md') with ui.card().classes('w-full q-pa-md q-mt-md'):
toggle_key = f'live_toggle_{index}' ui.label('Live View').classes('section-header')
toggle_key = f'live_toggle_{index}'
live_checkbox = ui.checkbox('Enable Live Preview', value=False) live_checkbox = ui.checkbox('Enable Live Preview', value=False)
# Store reference so poll_all timer can disable it on timeout # Store reference so poll_all timer can disable it on timeout
state._live_checkboxes[toggle_key] = live_checkbox state._live_checkboxes[toggle_key] = live_checkbox
@ui.refreshable @ui.refreshable
def render_live_view(): def render_live_view():
if not live_checkbox.value: if not live_checkbox.value:
ui.label('Live Preview is disabled.').classes('text-caption') 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')
return 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') # Record start time
ui.label().bind_text_from(iframe_h, 'value', backward=lambda v: f'Height: {v}px') 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() timeout_val = config.get('monitor_timeout', 0)
parsed = urllib.parse.urlparse(viewer_base) if timeout_val > 0:
if viewer_base and parsed.scheme in ('http', 'https'): start = state.live_toggles.get(toggle_key, time.time())
safe_src = html.escape(viewer_base, quote=True) remaining = (timeout_val * 60) - (time.time() - start)
ui.label(f'Viewing: {viewer_base}').classes('text-caption') 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(): viewer_base = config.get('viewer_url', '').strip()
iframe_container.clear() parsed = urllib.parse.urlparse(viewer_base)
with iframe_container: if viewer_base and parsed.scheme in ('http', 'https'):
ui.html( safe_src = html.escape(viewer_base, quote=True)
f'<iframe src="{safe_src}" width="100%" height="{int(iframe_h.value)}px"' ui.label(f'Viewing: {viewer_base}').classes('text-caption')
f' style="border: 2px solid #666; border-radius: 8px;"></iframe>'
)
iframe_h.on_value_change(lambda _: update_iframe()) iframe_container = ui.column().classes('w-full')
update_iframe()
else:
ui.label('No valid viewer URL configured.').classes('text-warning')
state._live_refreshables[toggle_key] = render_live_view def update_iframe():
live_checkbox.on_value_change(lambda _: render_live_view.refresh()) iframe_container.clear()
render_live_view() 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 --- # --- Latest Output ---
ui.label('Latest Output').classes('text-subtitle1 q-mt-md') with ui.card().classes('w-full q-pa-md q-mt-md'):
img_container = ui.column().classes('w-full') ui.label('Latest Output').classes('section-header')
img_container = ui.column().classes('w-full')
async def check_image(): async def check_image():
img_container.clear() img_container.clear()
loop = asyncio.get_event_loop() loop = asyncio.get_event_loop()
res, err = await loop.run_in_executor( res, err = await loop.run_in_executor(
None, lambda: _fetch_blocking(f'{comfy_url}/history', timeout=2)) None, lambda: _fetch_blocking(f'{comfy_url}/history', timeout=2))
with img_container: with img_container:
if err is not None: if err is not None:
ui.label(f'Error fetching image: {err}').classes('text-negative') ui.label(f'Error fetching image: {err}').classes('text-negative')
return return
try: try:
history = res.json() history = res.json()
except (ValueError, Exception): except (ValueError, Exception):
ui.label('Invalid response from server').classes('text-negative') ui.label('Invalid response from server').classes('text-negative')
return return
if not history: if not history:
ui.label('No history found.').classes('text-caption') ui.label('No history found.').classes('text-caption')
return return
last_prompt_id = list(history.keys())[-1] last_prompt_id = list(history.keys())[-1]
outputs = history[last_prompt_id].get('outputs', {}) outputs = history[last_prompt_id].get('outputs', {})
found_img = None found_img = None
for node_output in outputs.values(): for node_output in outputs.values():
if 'images' in node_output: if 'images' in node_output:
for img_info in node_output['images']: for img_info in node_output['images']:
if img_info['type'] == 'output': if img_info['type'] == 'output':
found_img = img_info found_img = img_info
break break
if found_img:
break
if found_img: if found_img:
break params = urllib.parse.urlencode({
if found_img: 'filename': found_img['filename'],
params = urllib.parse.urlencode({ 'subfolder': found_img['subfolder'],
'filename': found_img['filename'], 'type': found_img['type'],
'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')
img_url = f'{comfy_url}/view?{params}' ui.label(f'Last Output: {found_img["filename"]}').classes('text-caption')
ui.image(img_url).classes('w-full').style('max-width: 600px') else:
ui.label(f'Last Output: {found_img["filename"]}').classes('text-caption') ui.label('Last run had no image output.').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 data = state.data_cache
file_path = state.file_path 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 = ui.checkbox(
'Hide History (Safe Mode)', 'Hide History (Safe Mode)',
value=True, value=True,
) )
@ui.refreshable @ui.refreshable
def render_editor(): def render_editor():
# Prepare display data # Prepare display data
if hide_history.value: if hide_history.value:
display_data = copy.deepcopy(data) display_data = copy.deepcopy(data)
display_data.pop(KEY_HISTORY_TREE, None) display_data.pop(KEY_HISTORY_TREE, None)
display_data.pop(KEY_PROMPT_HISTORY, None) display_data.pop(KEY_PROMPT_HISTORY, None)
else: else:
display_data = data 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: try:
input_data = json.loads(text_area.value) json_str = json.dumps(display_data, indent=4, ensure_ascii=False)
# 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: 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( text_area = ui.textarea(
'color=primary' 'JSON Content',
).classes('w-full') value=json_str,
).classes('w-full font-mono').props('outlined rows=30')
hide_history.on_value_change(lambda _: render_editor.refresh()) def do_save():
render_editor() 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.""" """Render graph visualization or linear log view."""
if mode in ('Horizontal', 'Vertical'): if mode in ('Horizontal', 'Vertical'):
direction = 'LR' if mode == 'Horizontal' else 'TB' direction = 'LR' if mode == 'Horizontal' else 'TB'
try: with ui.card().classes('w-full q-pa-md'):
graph_dot = htree.generate_graph(direction=direction) try:
_render_graphviz(graph_dot) graph_dot = htree.generate_graph(direction=direction)
except Exception as e: _render_graphviz(graph_dot)
ui.label(f'Graph Error: {e}').classes('text-negative') except Exception as e:
ui.label(f'Graph Error: {e}').classes('text-negative')
elif mode == 'Linear Log': elif mode == 'Linear Log':
ui.label('Chronological list of all snapshots.').classes('text-caption') 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 = '' card_style = ''
if is_selected: 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: 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.card().classes('w-full q-mb-sm').style(card_style):
with ui.row().classes('w-full items-center'): with ui.row().classes('w-full items-center'):
if selection_mode_on: 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): def _render_node_manager(all_nodes, htree, data, file_path, restore_fn, refresh_fn):
"""Render node selector with restore, rename, delete, and preview.""" """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): def fmt_node(n):
ts = time.strftime('%b %d %H:%M', time.localtime(n['timestamp'])) 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') ui.button('Update Label', on_click=rename_node).props('flat')
# Danger zone # 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') ui.label('Deleting a node cannot be undone.').classes('text-warning')
def delete_selected(): def delete_selected():
@@ -226,7 +227,7 @@ def render_timeline_tab(state: AppState):
'text-info q-pa-sm') 'text-info q-pa-sm')
# --- View mode + Selection toggle --- # --- 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') ui.label('Version History').classes('text-h6 col')
view_mode = ui.toggle( view_mode = ui.toggle(
['Horizontal', 'Vertical', 'Linear Log'], ['Horizontal', 'Vertical', 'Linear Log'],
@@ -249,11 +250,10 @@ def render_timeline_tab(state: AppState):
if selection_mode.value and state.timeline_selected_nodes: if selection_mode.value and state.timeline_selected_nodes:
_render_batch_delete(htree, data, file_path, state, render_timeline.refresh) _render_batch_delete(htree, data, file_path, state, render_timeline.refresh)
ui.separator() with ui.card().classes('w-full q-pa-md q-mt-md'):
_render_node_manager(
_render_node_manager( all_nodes, htree, data, file_path,
all_nodes, htree, data, file_path, _restore_and_refresh, render_timeline.refresh)
_restore_and_refresh, render_timeline.refresh)
def _toggle_select(nid, checked): def _toggle_select(nid, checked):
if checked: if checked: