Spaces:
Running on Zero
Running on Zero
| """Top header — brand mark + Generation + Preset + chrome nav. | |
| Linear-inspired: hairline border, 13px nav labels, restrained type, light pill CTA. | |
| NOTE: NO `gr.Radio` for chrome. Preset uses two `gr.Button`s with active class | |
| flipped via state in app.py. Generation stays as `gr.Dropdown`. | |
| """ | |
| from __future__ import annotations | |
| import gradio as gr | |
| def build_header() -> dict: | |
| with gr.Row(elem_id="ws-header", elem_classes=["ws-header-row"]): | |
| # ── Brand mark ──────────────────────────────────────────────────── | |
| with gr.Column(scale=1, min_width=240, elem_classes=["ws-chrome-col", "ws-brand-col"]): | |
| # Brand + hamburger live together so the mobile drawer trigger | |
| # sits naturally to the left of the monogram. The hamburger is | |
| # hidden via CSS on desktop (≥1024px); click is wired in the | |
| # nav-JS block in app.py (no Gradio event handler). | |
| gr.HTML( | |
| """ | |
| <div class="ws-brand"> | |
| <button class="ws-hamburger" id="ws-hamburger" type="button" aria-label="Open menu" aria-controls="ws-sidebar"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"> | |
| <line x1="3" y1="6" x2="21" y2="6"/> | |
| <line x1="3" y1="12" x2="21" y2="12"/> | |
| <line x1="3" y1="18" x2="21" y2="18"/> | |
| </svg> | |
| </button> | |
| <div class="ws-brand-mark"></div> | |
| <div class="ws-brand-text"> | |
| <span class="ws-brand-name">Wan Studio</span> | |
| <span class="ws-brand-sub">studio · video diffusion</span> | |
| </div> | |
| </div> | |
| """, | |
| elem_id="ws-brand-html", | |
| ) | |
| # ── Generation dropdown ────────────────────────────────────────── | |
| with gr.Column(scale=0, min_width=150, elem_classes=["ws-chrome-col"]): | |
| generation = gr.Dropdown( | |
| choices=[("Wan 2.1", "wan2.1"), ("Wan 2.2", "wan2.2")], | |
| value="wan2.1", | |
| label="Generation", | |
| show_label=False, | |
| interactive=True, | |
| container=False, | |
| elem_classes=["ws-dropdown"], | |
| ) | |
| # ── Preset toggle (two pill buttons + state) ───────────────────── | |
| with gr.Column(scale=0, min_width=160, elem_classes=["ws-chrome-col"]): | |
| preset_state = gr.State("fast") | |
| with gr.Row(elem_classes=["ws-preset-group"]): | |
| preset_fast = gr.Button( | |
| "Fast", | |
| elem_classes=["ws-pill", "ws-pill-active"], | |
| elem_id="ws-preset-fast", | |
| ) | |
| preset_quality = gr.Button( | |
| "Quality", | |
| elem_classes=["ws-pill"], | |
| elem_id="ws-preset-quality", | |
| ) | |
| # ── Chrome nav buttons ─────────────────────────────────────────── | |
| with gr.Column(scale=0, min_width=200, elem_classes=["ws-chrome-col", "ws-chrome-right"]): | |
| with gr.Row(elem_classes=["ws-chrome-actions"]): | |
| history_btn = gr.Button( | |
| "History", | |
| elem_classes=["ws-nav-btn"], | |
| elem_id="ws-history-btn", | |
| ) | |
| settings_btn = gr.Button( | |
| "Settings", | |
| elem_classes=["ws-nav-btn"], | |
| elem_id="ws-settings-btn", | |
| ) | |
| return { | |
| "generation": generation, | |
| # back-compat alias: app.py reads header["preset"] to seed about-block. | |
| "preset": preset_state, | |
| "preset_state": preset_state, | |
| "preset_fast": preset_fast, | |
| "preset_quality": preset_quality, | |
| "history_btn": history_btn, | |
| "settings_btn": settings_btn, | |
| } | |