index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="See-Through 动漫角色美术拆分免费入口：生成语义图层与分层 PSD。"
    />
    <title>See-Through 美术拆分</title>
    <style>
      :root {
        color-scheme: dark;
        --bg: #07111f;
        --surface: rgba(13, 26, 45, 0.82);
        --surface-strong: #10233d;
        --line: rgba(145, 181, 222, 0.2);
        --text: #eef6ff;
        --muted: #a9bdd3;
        --cyan: #5ce1e6;
        --violet: #9c82ff;
        --green: #68e0a3;
        --amber: #ffd17a;
        --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
      }

      * { box-sizing: border-box; }

      body {
        margin: 0;
        min-height: 100vh;
        color: var(--text);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
        background:
          radial-gradient(circle at 12% 8%, rgba(92, 225, 230, 0.16), transparent 32rem),
          radial-gradient(circle at 88% 4%, rgba(156, 130, 255, 0.18), transparent 30rem),
          linear-gradient(165deg, #07111f 0%, #091625 48%, #07101b 100%);
      }

      a { color: inherit; }

      .shell {
        width: min(1240px, calc(100% - 32px));
        margin: 0 auto;
        padding: 32px 0 56px;
      }

      .hero,
      .notice,
      .demo-card,
      .info-card {
        border: 1px solid var(--line);
        background: var(--surface);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
      }

      .hero {
        position: relative;
        overflow: hidden;
        border-radius: 28px;
        padding: clamp(28px, 5vw, 62px);
      }

      .hero::after {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        right: -150px;
        top: -180px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--cyan), var(--violet));
        filter: blur(24px);
        opacity: 0.22;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 18px;
        color: var(--cyan);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--amber);
        box-shadow: 0 0 18px currentColor;
      }

      .dot.online { color: var(--green); background: var(--green); }
      .dot.offline { color: #ff7c94; background: #ff7c94; }

      h1 {
        position: relative;
        z-index: 1;
        max-width: 880px;
        margin: 0;
        font-size: clamp(38px, 7vw, 78px);
        line-height: 0.98;
        letter-spacing: -0.045em;
      }

      .gradient {
        color: transparent;
        background: linear-gradient(95deg, var(--cyan), #9fe6ff 42%, var(--violet));
        background-clip: text;
        -webkit-background-clip: text;
      }

      .lede {
        position: relative;
        z-index: 1;
        max-width: 760px;
        margin: 24px 0 0;
        color: var(--muted);
        font-size: clamp(17px, 2vw, 21px);
        line-height: 1.7;
      }

      .actions {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 30px;
      }

      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        padding: 0 18px;
        border: 1px solid var(--line);
        border-radius: 14px;
        color: var(--text);
        background: rgba(255, 255, 255, 0.045);
        font-weight: 760;
        text-decoration: none;
        transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
      }

      .button:hover {
        transform: translateY(-2px);
        border-color: rgba(92, 225, 230, 0.55);
        background: rgba(92, 225, 230, 0.1);
      }

      .button.primary {
        color: #06111e;
        border-color: transparent;
        background: linear-gradient(110deg, var(--cyan), #9fe6ff);
      }

      .notice {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 14px;
        margin: 18px 0;
        padding: 18px 20px;
        border-radius: 18px;
      }

      .notice strong { display: block; margin-bottom: 4px; }
      .notice p { margin: 0; color: var(--muted); line-height: 1.55; }

      .demo-card {
        overflow: hidden;
        border-radius: 24px;
      }

      .demo-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 20px;
        border-bottom: 1px solid var(--line);
      }

      .demo-head h2 { margin: 0; font-size: 18px; }
      .status { color: var(--muted); font-size: 13px; }

      .frame-wrap {
        position: relative;
        min-height: 820px;
        background: #fff;
      }

      iframe {
        display: block;
        width: 100%;
        height: 820px;
        border: 0;
        background: #fff;
      }

      .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-top: 18px;
      }

      .info-card {
        border-radius: 20px;
        padding: 22px;
      }

      .step {
        display: inline-grid;
        width: 34px;
        height: 34px;
        place-items: center;
        margin-bottom: 18px;
        border-radius: 11px;
        color: #06111e;
        background: var(--cyan);
        font-weight: 900;
      }

      .info-card h3 { margin: 0 0 9px; }
      .info-card p { margin: 0; color: var(--muted); line-height: 1.6; }

      footer {
        display: flex;
        justify-content: space-between;
        gap: 24px;
        padding: 28px 4px 0;
        color: var(--muted);
        font-size: 13px;
      }

      @media (max-width: 820px) {
        .shell { width: min(100% - 20px, 1240px); padding-top: 10px; }
        .hero { border-radius: 20px; }
        .grid { grid-template-columns: 1fr; }
        .frame-wrap, iframe { min-height: 720px; height: 720px; }
        footer { flex-direction: column; }
      }
    </style>
  </head>
  <body>
    <main class="shell">
      <section class="hero">
        <div class="eyebrow">
          <span class="dot" id="status-dot"></span>
          <span id="status-label">正在检查上游 Demo</span>
        </div>
        <h1>把一张角色图，拆成<span class="gradient">可编辑图层</span></h1>
        <p class="lede">
          See-Through 为动漫角色推断遮挡区域、语义部件与绘制顺序，输出可继续修整的分层 PSD。
          当前页面是免费静态入口，GPU 推理由作者维护的 ZeroGPU Space 提供。
        </p>
        <div class="actions">
          <a
            class="button primary"
            href="https://huggingface.co/spaces/24yearsold/see-through-demo"
            target="_blank"
            rel="noopener noreferrer"
          >在 Hugging Face 完整页面打开 ↗</a>
          <a
            class="button"
            href="https://huggingface.co/layerdifforg/seethroughv0.0.2_layerdiff3d"
            target="_blank"
            rel="noopener noreferrer"
          >模型权重</a>
          <a
            class="button"
            href="https://github.com/shitagaki-lab/see-through"
            target="_blank"
            rel="noopener noreferrer"
          >官方代码</a>
        </div>
      </section>

      <aside class="notice">
        <span aria-hidden="true">🛡️</span>
        <div>
          <strong>上传前请注意</strong>
          <p>
            图片会直接发送到上游 <code>24yearsold/see-through-demo</code>，不在本 Static
            Space 内处理。不要上传未获授权的客户原画或敏感素材。
          </p>
        </div>
      </aside>

      <section class="demo-card" aria-label="See-Through 在线演示">
        <header class="demo-head">
          <h2>在线 Demo</h2>
          <span class="status">推荐：768 分辨率 · Seed 42</span>
        </header>
        <div class="frame-wrap">
          <iframe
            id="demo-frame"
            title="See-Through upstream Gradio demo"
            src="https://24yearsold-see-through-demo.hf.space/?__theme=light"
            loading="eager"
            allow="clipboard-read; clipboard-write"
            referrerpolicy="strict-origin-when-cross-origin"
          ></iframe>
        </div>
      </section>

      <section class="grid" aria-label="工作流程">
        <article class="info-card">
          <span class="step">1</span>
          <h3>上传角色图</h3>
          <p>正面、主体完整、轮廓清晰的动漫角色图更容易获得稳定拆分。</p>
        </article>
        <article class="info-card">
          <span class="step">2</span>
          <h3>生成语义层</h3>
          <p>LayerDiff3D 补画遮挡部分，Marigold 提供深度信息并辅助确定图层顺序。</p>
        </article>
        <article class="info-card">
          <span class="step">3</span>
          <h3>下载并精修</h3>
          <p>PSD 是 Live2D 起点；正式成品仍需人工修边、补画、拆左右部件与绑定。</p>
        </article>
      </section>

      <footer>
        <span>Static portal by E5note · No GPU is billed to this Space</span>
        <span>See-Through · Apache-2.0 research implementation</span>
      </footer>
    </main>

    <script>
      const dot = document.getElementById("status-dot");
      const label = document.getElementById("status-label");
      const frame = document.getElementById("demo-frame");

      frame.addEventListener("load", () => {
        dot.classList.remove("offline");
        dot.classList.add("online");
        label.textContent = "上游 Demo 已加载";
      });

      frame.addEventListener("error", () => {
        dot.classList.remove("online");
        dot.classList.add("offline");
        label.textContent = "上游连接异常，可从完整页面重试";
      });
    </script>
  </body>
</html>