Blame for wireframes/index.html

<!doctype html>
<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>