diff --git a/main.py b/main.py index c55b425..9d7c007 100644 --- a/main.py +++ b/main.py @@ -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( + '' + ) 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): diff --git a/tab_batch_ng.py b/tab_batch_ng.py index 4c78ec1..27e5ae9 100644 --- a/tab_batch_ng.py +++ b/tab_batch_ng.py @@ -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(): diff --git a/tab_comfy_ng.py b/tab_comfy_ng.py index 496d455..7ae456d 100644 --- a/tab_comfy_ng.py +++ b/tab_comfy_ng.py @@ -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'' - ) + 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_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') diff --git a/tab_raw_ng.py b/tab_raw_ng.py index 4b5277f..39ec6f3 100644 --- a/tab_raw_ng.py +++ b/tab_raw_ng.py @@ -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() diff --git a/tab_timeline_ng.py b/tab_timeline_ng.py index 9aaee0a..7f49b09 100644 --- a/tab_timeline_ng.py +++ b/tab_timeline_ng.py @@ -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: