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

127
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,7 +222,8 @@ 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 ---
with ui.card().classes('w-full q-pa-md q-mb-md'):
path_input = ui.input( path_input = ui.input(
'Current Path', 'Current Path',
value=str(state.current_dir), value=str(state.current_dir),
@@ -188,7 +246,6 @@ def render_sidebar(state: AppState):
path_input.on('keydown.enter', lambda _: on_path_enter()) path_input.on('keydown.enter', lambda _: on_path_enter())
# --- Pin / Unpin ---
def pin_folder(): def pin_folder():
d = str(state.current_dir) d = str(state.current_dir)
if d not in state.config['favorites']: if d not in state.config['favorites']:
@@ -198,6 +255,10 @@ def render_sidebar(state: AppState):
ui.button('Pin Folder', icon='push_pin', on_click=pin_folder).classes('w-full') 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 @ui.refreshable
def render_favorites(): def render_favorites():
for fav in list(state.config['favorites']): for fav in list(state.config['favorites']):
@@ -230,10 +291,9 @@ def render_sidebar(state: AppState):
render_favorites() 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')
@@ -281,9 +341,8 @@ def render_sidebar(state: AppState):
render_snippet_list() render_snippet_list()
ui.separator()
# --- File List --- # --- File List ---
with ui.card().classes('w-full q-pa-md q-mb-md'):
@ui.refreshable @ui.refreshable
def render_file_list(): def render_file_list():
json_files = sorted(state.current_dir.glob('*.json')) json_files = sorted(state.current_dir.glob('*.json'))
@@ -312,7 +371,7 @@ def render_sidebar(state: AppState):
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,
@@ -330,8 +389,6 @@ def render_sidebar(state: AppState):
render_file_list() render_file_list()
ui.separator()
# --- Comfy Monitor toggle --- # --- Comfy Monitor toggle ---
def on_monitor_toggle(e): def on_monitor_toggle(e):
state.show_comfy_monitor = e.value state.show_comfy_monitor = e.value

55
tab_batch_ng.py
View File

@@ -156,6 +156,7 @@ 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
with ui.card().classes('w-full q-pa-md q-mb-lg'):
json_files = sorted(state.current_dir.glob('*.json')) json_files = sorted(state.current_dir.glob('*.json'))
json_files = [f for f in json_files if f.name not in ( json_files = [f for f in json_files if f.name not in (
'.editor_config.json', '.editor_snippets.json')] '.editor_config.json', '.editor_snippets.json')]
@@ -190,7 +191,7 @@ def render_batch_processor(state: AppState):
_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
@@ -218,8 +219,6 @@ def render_batch_processor(state: AppState):
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',
'lora 3 high', 'lora 3 low'] 'lora 3 high', 'lora 3 low']
@@ -250,6 +249,7 @@ 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):
with ui.card().classes('w-full q-mb-sm'):
_render_sequence_card( _render_sequence_card(
i, seq, batch_list, data, file_path, state, i, seq, batch_list, data, file_path, state,
_src_cache, src_seq_select, _src_cache, src_seq_select,
@@ -258,9 +258,8 @@ def render_batch_processor(state: AppState):
render_sequence_list() render_sequence_list()
ui.separator()
# --- Save & Snap --- # --- Save & Snap ---
with ui.card().classes('w-full q-pa-md q-mt-lg'):
with ui.row().classes('w-full items-end q-gutter-md'): with ui.row().classes('w-full items-end q-gutter-md'):
commit_input = ui.input('Change Note (Optional)', commit_input = ui.input('Change Note (Optional)',
placeholder='e.g. Added sequence 3').classes('col') placeholder='e.g. Added sequence 3').classes('col')
@@ -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,9 +642,10 @@ 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 = {}
with ui.scroll_area().style('max-height: 250px'):
for idx, s in enumerate(batch_list): for idx, s in enumerate(batch_list):
sn = s.get(KEY_SEQUENCE_NUMBER, idx + 1) sn = s.get(KEY_SEQUENCE_NUMBER, idx + 1)
cb = ui.checkbox(format_seq_label(sn)) cb = ui.checkbox(format_seq_label(sn))

16
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,7 +173,8 @@ 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'):
ui.label('Live View').classes('section-header')
toggle_key = f'live_toggle_{index}' toggle_key = f'live_toggle_{index}'
live_checkbox = ui.checkbox('Enable Live Preview', value=False) live_checkbox = ui.checkbox('Enable Live Preview', value=False)
@@ -230,7 +231,8 @@ def _render_single_instance(state: AppState, instance_config: dict, index: int,
render_live_view() 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'):
ui.label('Latest Output').classes('section-header')
img_container = ui.column().classes('w-full') img_container = ui.column().classes('w-full')
async def check_image(): async def check_image():

7
tab_raw_ng.py
View File

@@ -11,7 +11,8 @@ 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)',
@@ -39,8 +40,6 @@ def render_raw_editor(state: AppState):
value=json_str, value=json_str,
).classes('w-full font-mono').props('outlined rows=30') ).classes('w-full font-mono').props('outlined rows=30')
ui.separator()
def do_save(): def do_save():
try: try:
input_data = json.loads(text_area.value) input_data = json.loads(text_area.value)
@@ -68,7 +67,7 @@ def render_raw_editor(state: AppState):
ui.button('Save Raw Changes', icon='save', on_click=do_save).props( ui.button('Save Raw Changes', icon='save', on_click=do_save).props(
'color=primary' 'color=primary'
).classes('w-full') ).classes('w-full q-mt-md')
hide_history.on_value_change(lambda _: render_editor.refresh()) hide_history.on_value_change(lambda _: render_editor.refresh())
render_editor() render_editor()

14
tab_timeline_ng.py
View File

@@ -68,6 +68,7 @@ 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'
with ui.card().classes('w-full q-pa-md'):
try: try:
graph_dot = htree.generate_graph(direction=direction) graph_dot = htree.generate_graph(direction=direction)
_render_graphviz(graph_dot) _render_graphviz(graph_dot)
@@ -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,8 +250,7 @@ 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)