index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>ShutterMuse Video Demo</title>
  <meta name="description" content="Video demo for ShutterMuse: Capture-Time Photography Guidance with MLLMs." />
  <style>
    :root {
      color-scheme: light dark;
      --bg: #0f172a;
      --panel: rgba(15, 23, 42, 0.72);
      --text: #e5e7eb;
      --muted: #cbd5e1;
      --link: #93c5fd;
      --accent: #a78bfa;
      --border: rgba(148, 163, 184, 0.3);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.38), transparent 34rem),
        radial-gradient(circle at top right, rgba(168, 85, 247, 0.34), transparent 30rem),
        linear-gradient(135deg, #020617 0%, var(--bg) 48%, #111827 100%);
    }
    main {
      width: min(1120px, calc(100% - 32px));
      margin: 0 auto;
      padding: 56px 0 44px;
    }
    .hero {
      display: grid;
      gap: 24px;
      margin-bottom: 28px;
      text-align: center;
    }
    .eyebrow {
      justify-self: center;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 8px 14px;
      color: var(--muted);
      background: rgba(15, 23, 42, 0.55);
      backdrop-filter: blur(12px);
      font-size: 14px;
    }
    h1 {
      margin: 0;
      font-size: clamp(38px, 7vw, 76px);
      line-height: 0.96;
      letter-spacing: -0.055em;
font-weight: 820;
    }
    .subtitle {
      margin: 0 auto;
      max-width: 820px;
      color: var(--muted);
      font-size: clamp(17px, 2.2vw, 22px);
      line-height: 1.58;
    }
    .video-card {
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 28px;
      background: var(--panel);
      box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
      backdrop-filter: blur(16px);
    }
    video {
      display: block;
      width: 100%;
      max-height: 78vh;
      background: #000;
    }
    .links {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      padding: 24px;
      border-top: 1px solid var(--border);
    }
    .links a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 10px 15px;
      color: var(--text);
      text-decoration: none;
      background: rgba(255, 255, 255, 0.06);
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
    }
    .links a:hover {
      transform: translateY(-1px);
      border-color: rgba(147, 197, 253, 0.8);
      background: rgba(147, 197, 253, 0.12);
    }
    .tasks {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 24px;
    }
    .task {
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 20px;
      background: rgba(15, 23, 42, 0.58);
backdrop-filter: blur(12px);
    }
    .task h2 {
      margin: 0 0 8px;
      font-size: 18px;
    }
    .task p {
      margin: 0;
      color: var(--muted);
      line-height: 1.56;
    }
    footer {
      margin-top: 28px;
      color: #94a3b8;
      text-align: center;
      font-size: 14px;
    }
    footer a { color: var(--link); }
    @media (max-width: 760px) {
      main { padding-top: 34px; }
      .tasks { grid-template-columns: 1fr; }
      .links { justify-content: flex-start; }
    }
  </style>
</head>
<body>
  <main>
    <section class="hero" aria-labelledby="title">
      <div class="eyebrow">📷 Capture-Time Photography Guidance with MLLMs</div>
      <h1 id="title">ShutterMuse Video Demo</h1>
      <p class="subtitle">
        ShutterMuse provides photographer-side composition recommendation and subject-side pose recommendation for interactive capture-time photography guidance.
      </p>
    </section>

    <section class="video-card" aria-label="Demo video">
      <video controls preload="metadata" poster="thumbnail.jpg">
        <source src="Demo.mp4" type="video/mp4" />
        Your browser does not support the HTML video tag. You can download the video from the Space files.
      </video>
      <nav class="links" aria-label="Project links">
        <a href="https://huggingface.co/papers/2606.25763" target="_blank" rel="noreferrer">📄 HF Paper</a>
        <a href="https://arxiv.org/abs/2606.25763" target="_blank" rel="noreferrer">🧾 arXiv</a>
        <a href="https://lijayuTnT.github.io/ShutterMuse/" target="_blank" rel="noreferrer">🌐 Project Page</a>
        <a href="https://github.com/lijayuTnT/ShutterMuse" target="_blank" rel="noreferrer">💻 GitHub</a>
        <a href="https://huggingface.co/ShutterMuse/ShutterMuse" target="_blank" rel="noreferrer">🤗 Model</a>
        <a href="https://huggingface.co/datasets/ShutterMuse/CaptureGuide-Bench" target="_blank" rel="noreferrer">🗂 Benchmark</a>
      </nav>
    </section>

    <section class="tasks" aria-label="Supported benchmark tasks">
      <article class="task">
        <h2>Photographer-side</h2>
        <p>Composition recommendation: keep, refine, or reject the current framing, with composition boxes when refinement is needed.</p>
      </article>
      <article class="task">
        <h2>Subject-side</h2>
        <p>Pose recommendation: generate scene-conditioned portrait poses with COCO-17 keypoints and visibility states.</p>
      </article>
    </section>

    <footer>
      If you use ShutterMuse or CaptureGuide-Bench, please cite
      <a href="https://arxiv.org/abs/2606.25763" target="_blank" rel="noreferrer">arXiv:2606.25763</a>.
    </footer>
  </main>
</body>
</html>