Spaces:
Running on Zero
Running on Zero
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Wan Studio — Wireframe Gallery (8 screens)</title> | |
| <style> | |
| :root { | |
| --bg: #0e1014; | |
| --bg-elev: #161a22; | |
| --bg-card: #1c2230; | |
| --border: #2a3142; | |
| --border-strong: #3a4356; | |
| --text: #e6e9ef; | |
| --text-dim: #9aa3b2; | |
| --text-faint: #6c7587; | |
| --accent: #7aa2ff; | |
| --accent-2: #b18cff; | |
| --pill: #232a3a; | |
| --shadow: 0 10px 30px rgba(0,0,0,0.45); | |
| --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; | |
| --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace; | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--font-system); | |
| font-size: 15px; | |
| line-height: 1.55; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| } | |
| a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| border-bottom: 1px dotted rgba(122,162,255,0.4); | |
| } | |
| a:hover { | |
| color: #a8c0ff; | |
| border-bottom-color: rgba(168,192,255,0.7); | |
| } | |
| header.page { | |
| padding: 56px 32px 32px; | |
| max-width: 1480px; | |
| margin: 0 auto; | |
| } | |
| header.page h1 { | |
| margin: 0 0 12px; | |
| font-size: 34px; | |
| font-weight: 700; | |
| letter-spacing: -0.01em; | |
| } | |
| header.page .subtitle { | |
| color: var(--text-dim); | |
| font-size: 16px; | |
| max-width: 820px; | |
| margin: 0 0 22px; | |
| } | |
| header.page .meta { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-top: 6px; | |
| } | |
| header.page .meta .pill { | |
| display: inline-block; | |
| background: var(--pill); | |
| border: 1px solid var(--border); | |
| color: var(--text-dim); | |
| padding: 3px 10px; | |
| border-radius: 999px; | |
| font-size: 12px; | |
| font-family: var(--font-mono); | |
| } | |
| nav.sticky { | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| background: rgba(14,16,20,0.85); | |
| backdrop-filter: saturate(140%) blur(10px); | |
| -webkit-backdrop-filter: saturate(140%) blur(10px); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| nav.sticky .inner { | |
| max-width: 1480px; | |
| margin: 0 auto; | |
| padding: 10px 32px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px 4px; | |
| align-items: center; | |
| } | |
| nav.sticky .nav-label { | |
| color: var(--text-faint); | |
| font-size: 12px; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| margin-right: 10px; | |
| } | |
| nav.sticky a { | |
| display: inline-block; | |
| padding: 5px 10px; | |
| border-radius: 6px; | |
| font-size: 13px; | |
| color: var(--text-dim); | |
| border: 1px solid transparent; | |
| border-bottom: 1px solid transparent; | |
| } | |
| nav.sticky a:hover { | |
| color: var(--text); | |
| background: var(--bg-elev); | |
| border-color: var(--border); | |
| } | |
| main { | |
| max-width: 1480px; | |
| margin: 0 auto; | |
| padding: 24px 32px 80px; | |
| } | |
| section.hero { | |
| background: var(--bg-elev); | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| padding: 20px; | |
| margin: 16px 0 36px; | |
| box-shadow: var(--shadow); | |
| } | |
| section.hero h2 { | |
| margin: 0 0 6px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| section.hero p { | |
| margin: 0 0 14px; | |
| color: var(--text-dim); | |
| font-size: 13px; | |
| } | |
| section.hero a.hero-link { | |
| display: block; | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| background: #ffffff; | |
| line-height: 0; | |
| } | |
| section.hero img { | |
| display: block; | |
| width: 100%; | |
| height: auto; | |
| } | |
| section.shot { | |
| margin: 0 0 56px; | |
| scroll-margin-top: 72px; | |
| } | |
| section.shot header.shot-head { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 14px; | |
| margin-bottom: 10px; | |
| flex-wrap: wrap; | |
| } | |
| section.shot .tag { | |
| font-family: var(--font-mono); | |
| font-size: 13px; | |
| color: var(--accent-2); | |
| background: rgba(177,140,255,0.10); | |
| border: 1px solid rgba(177,140,255,0.30); | |
| padding: 2px 9px; | |
| border-radius: 6px; | |
| letter-spacing: 0.02em; | |
| } | |
| section.shot h2 { | |
| margin: 0; | |
| font-size: 22px; | |
| font-weight: 650; | |
| letter-spacing: -0.005em; | |
| color: var(--text); | |
| } | |
| section.shot p.caption { | |
| color: var(--text-dim); | |
| margin: 0 0 14px; | |
| max-width: 1000px; | |
| font-size: 14.5px; | |
| } | |
| section.shot .frame { | |
| border: 1px solid var(--border-strong); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| background: #ffffff; | |
| box-shadow: var(--shadow); | |
| max-width: 1400px; | |
| } | |
| section.shot .frame a { | |
| display: block; | |
| line-height: 0; | |
| border-bottom: 0; | |
| } | |
| section.shot .frame img { | |
| display: block; | |
| width: 100%; | |
| height: auto; | |
| } | |
| footer.page { | |
| max-width: 1480px; | |
| margin: 0 auto; | |
| padding: 28px 32px 60px; | |
| border-top: 1px solid var(--border); | |
| color: var(--text-dim); | |
| font-size: 14px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| footer.page .right { | |
| color: var(--text-faint); | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| } | |
| @media (max-width: 720px) { | |
| header.page { padding: 36px 18px 18px; } | |
| header.page h1 { font-size: 26px; } | |
| main { padding: 16px 18px 60px; } | |
| nav.sticky .inner { padding: 10px 18px; } | |
| section.shot h2 { font-size: 19px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="page"> | |
| <h1>Wan Studio — Wireframe Gallery (8 screens)</h1> | |
| <p class="subtitle"> | |
| Multi-mode Gradio Studio mockups for Wan 2.1 + 2.2 deployment to HF ZeroGPU. | |
| Eight low-fidelity wireframes covering the global shell, every generation mode, settings, and gallery views. | |
| </p> | |
| <div class="meta"> | |
| <span class="pill">8 screens</span> | |
| <span class="pill">1536 × 960</span> | |
| <span class="pill">Gradio Studio</span> | |
| <span class="pill">Wan 2.1 + 2.2</span> | |
| <span class="pill">HF ZeroGPU</span> | |
| </div> | |
| </header> | |
| <nav class="sticky"> | |
| <div class="inner"> | |
| <span class="nav-label">Jump to</span> | |
| <a href="#hero">Montage</a> | |
| <a href="#w1">W1 · T2V</a> | |
| <a href="#w2">W2 · I2V</a> | |
| <a href="#w3">W3 · FLF2V</a> | |
| <a href="#w4">W4 · VACE</a> | |
| <a href="#w5">W5 · S2V</a> | |
| <a href="#w6">W6 · Animate</a> | |
| <a href="#w7">W7 · Settings</a> | |
| <a href="#w8">W8 · Gallery</a> | |
| </div> | |
| </nav> | |
| <main> | |
| <section class="hero" id="hero"> | |
| <h2>All 8 screens at a glance</h2> | |
| <p>Click to open the full-resolution montage in a new tab.</p> | |
| <a class="hero-link" href="all_wireframes.png" target="_blank" rel="noopener"> | |
| <img src="all_wireframes.png" alt="Combined 2×4 montage of all 8 Wan Studio wireframes" loading="eager"> | |
| </a> | |
| </section> | |
| <section class="shot" id="w1"> | |
| <header class="shot-head"> | |
| <span class="tag">W1</span> | |
| <h2>Global shell + T2V mode active</h2> | |
| </header> | |
| <p class="caption"> | |
| The default landing view. Demonstrates the full chrome — top header with Generation dropdown + Fast / Quality preset radio, | |
| left sidebar with all 7 modes plus Gallery + Settings, two-column main area with Inputs (prompt + duration + advanced | |
| accordion + Generate) and Output (empty video, ZeroGPU reservation, Send-to chips), and an Examples row beneath. | |
| </p> | |
| <div class="frame"> | |
| <a href="w1_shell_t2v.png" target="_blank" rel="noopener"> | |
| <img src="w1_shell_t2v.png" alt="W1 — Global shell with T2V mode active" loading="lazy"> | |
| </a> | |
| </div> | |
| </section> | |
| <section class="shot" id="w2"> | |
| <header class="shot-head"> | |
| <span class="tag">W2</span> | |
| <h2>I2V mode panel</h2> | |
| </header> | |
| <p class="caption"> | |
| Same shell, I2V active. Adds a source image upload slot with paste-from-clipboard hint, a motion-focused prompt, and a | |
| yellow info banner explaining the Wan 2.2 I2V Lightning V1-only quality caveat with a link to enable the community hybrid trick. | |
| </p> | |
| <div class="frame"> | |
| <a href="w2_i2v.png" target="_blank" rel="noopener"> | |
| <img src="w2_i2v.png" alt="W2 — I2V mode panel" loading="lazy"> | |
| </a> | |
| </div> | |
| </section> | |
| <section class="shot" id="w3"> | |
| <header class="shot-head"> | |
| <span class="tag">W3</span> | |
| <h2>FLF2V (first-last-frame to video)</h2> | |
| </header> | |
| <p class="caption"> | |
| First-last-frame to video, Wan 2.1 only. Two side-by-side image slots; the end-frame slot is itself wrapped in nested | |
| Upload / Generate tabs (Generate uses a T2I model to synthesize the end frame). Advanced accordion open by default to expose CFG = 5.5. | |
| </p> | |
| <div class="frame"> | |
| <a href="w3_flf2v.png" target="_blank" rel="noopener"> | |
| <img src="w3_flf2v.png" alt="W3 — FLF2V mode with nested upload/generate tabs" loading="lazy"> | |
| </a> | |
| </div> | |
| </section> | |
| <section class="shot" id="w4"> | |
| <header class="shot-head"> | |
| <span class="tag">W4</span> | |
| <h2>VACE mode (densest screen)</h2> | |
| </header> | |
| <p class="caption"> | |
| The densest screen by design. Top-level 3×3 sub-mode radio (Depth / Pose / Sketch / Flow / Inpaint / Outpaint / | |
| Reference / Extension / Animate-Anything) plus a secondary 6-option mask-source radio when Inpaint is active. | |
| Conditional reference-image gallery (1–3 slots) and a sub-mode-aware prompt placeholder. Quality preset only | |
| (Lightning is untrained on VACE). | |
| </p> | |
| <div class="frame"> | |
| <a href="w4_vace.png" target="_blank" rel="noopener"> | |
| <img src="w4_vace.png" alt="W4 — VACE mode with 9 sub-modes and reference gallery" loading="lazy"> | |
| </a> | |
| </div> | |
| </section> | |
| <section class="shot" id="w5"> | |
| <header class="shot-head"> | |
| <span class="tag">W5</span> | |
| <h2>S2V (speech-to-video)</h2> | |
| </header> | |
| <p class="caption"> | |
| Speech-driven video. Audio upload with stylized waveform preview and microphone record source. Read-only duration field | |
| (driven by audio length). Note that S2V is served via the upstream <code>wan</code> package — diffusers doesn't have a | |
| pipeline class yet. | |
| </p> | |
| <div class="frame"> | |
| <a href="w5_s2v.png" target="_blank" rel="noopener"> | |
| <img src="w5_s2v.png" alt="W5 — S2V mode with audio waveform" loading="lazy"> | |
| </a> | |
| </div> | |
| </section> | |
| <section class="shot" id="w6"> | |
| <header class="shot-head"> | |
| <span class="tag">W6</span> | |
| <h2>Animate mode</h2> | |
| </header> | |
| <p class="caption"> | |
| Character animation + replacement. Reference image + driving video, three-option mode radio (Character Swap / | |
| Pose Retarget / Replacement), low / medium resolution radio, warning banner about CPU preprocessing time. Output | |
| column adds an open "Processing outputs" accordion showing intermediate pose / face / bg / mask videos for debugging. | |
| </p> | |
| <div class="frame"> | |
| <a href="w6_animate.png" target="_blank" rel="noopener"> | |
| <img src="w6_animate.png" alt="W6 — Animate mode with processing outputs accordion" loading="lazy"> | |
| </a> | |
| </div> | |
| </section> | |
| <section class="shot" id="w7"> | |
| <header class="shot-head"> | |
| <span class="tag">W7</span> | |
| <h2>Settings / Model manager</h2> | |
| </header> | |
| <p class="caption"> | |
| Pure configuration page — no video player. Active models table per mode with load status, Lightning LoRA status with the | |
| Wan-2.1-on-Wan-2.2 hybrid-trick checkbox, cache control buttons, per-mode preset overrides, and an About monospace block. | |
| </p> | |
| <div class="frame"> | |
| <a href="w7_settings.png" target="_blank" rel="noopener"> | |
| <img src="w7_settings.png" alt="W7 — Settings and model manager" loading="lazy"> | |
| </a> | |
| </div> | |
| </section> | |
| <section class="shot" id="w8"> | |
| <header class="shot-head"> | |
| <span class="tag">W8</span> | |
| <h2>Gallery / history grid</h2> | |
| </header> | |
| <p class="caption"> | |
| Session history grid (3×4 tiles, mode-badge per tile, indigo border on the selected one) with a detail view below | |
| showing the selected video, its params, and Reload-into-mode action buttons. | |
| </p> | |
| <div class="frame"> | |
| <a href="w8_gallery.png" target="_blank" rel="noopener"> | |
| <img src="w8_gallery.png" alt="W8 — Gallery grid with detail view" loading="lazy"> | |
| </a> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="page"> | |
| <div> | |
| <a href="../RESEARCH.md">← Back to RESEARCH.md</a> | |
| </div> | |
| <div class="right">wan-studio · wireframes · 8 screens</div> | |
| </footer> | |
| </body> | |
| </html> | |