what-new-in-chrome/public/demo/index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chrome API Demo Desk</title>
    <link rel="stylesheet" href="./shared.css" />
  </head>
  <body>
    <main class="shell">
      <aside class="rail">
        <p class="eyebrow">Public Demo Desk</p>
        <h1>Chrome API Lab</h1>
        <p class="lead">
          这里专门放可运行 demo。启动方式统一使用 <strong>npm run dev</strong>，再访问
          <strong>/demo/</strong> 下的不同能力页面。
        </p>
        <nav class="nav" aria-label="Chrome API demos">
          <a class="active" href="./index.html"><span class="num">0</span><span>Demo 总览</span></a>
          <a href="./webmcp/index.html"><span class="num">1</span><span>WebMCP</span></a>
          <a href="./prompt-api/index.html"><span class="num">2</span><span>Prompt API</span></a>
          <a href="./devtools-agents/index.html"><span class="num">3</span><span>DevTools Agents</span></a>
          <a href="./modern-web-guidance/index.html"><span class="num">4</span><span>Modern Web Guidance</span></a>
          <a href="../html-in-canvas/index.html"><span class="num">5</span><span>HTML-in-Canvas</span></a>
          <a href="./view-transitions/index.html"><span class="num">6</span><span>View Transitions</span></a>
          <a href="./baseline/index.html"><span class="num">7</span><span>Baseline</span></a>
        </nav>
        <div class="note">
          这部分只修改 public 静态代码，不进入 Slidev PPT 页面。实验 API 都按渐进增强处理，有能力检测和本地兜底。
        </div>
      </aside>

      <section class="stage">
        <div class="hero">
          <section class="statement">
            <p class="eyebrow">Run with npm run dev</p>
            <h2>一个入口，分别展示不同 Chrome API 能力。</h2>
            <p>
              总览页负责现场导航；每个能力页都可以独立打开、独立演示，不依赖 PPT 路由。
              适合分享时从幻灯片跳出，展示真实浏览器中的 API 边界和 fallback。
            </p>
          </section>
          <aside class="metrics">
            <div class="metric">
              <strong>7</strong>
              <span>WebMCP、Prompt API、DevTools Agents、Modern Web Guidance、HTML-in-Canvas、View Transitions、Baseline</span>
            </div>
            <div class="metric">
              <strong>静态</strong>
              <span>全部放在 public 静态目录，由 Slidev dev server 直接托管</span>
            </div>
            <div class="metric">
              <strong>兜底</strong>
              <span>实验能力不可用时仍能讲清楚输入、输出和边界</span>
            </div>
          </aside>
        </div>

        <section class="section">
          <h2>能力页面</h2>
          <div class="grid">
            <a class="card" href="./webmcp/index.html">
              <span class="tag blue">Agentic Web</span>
              <h3>WebMCP 工具契约</h3>
              <p>声明式表单工具、JavaScript 注册工具、工具 schema 和复合任务调用日志。</p>
              <ul>
                <li>能力检测：navigator.modelContext</li>
                <li>兜底：本地 mock runtime</li>
              </ul>
            </a>
            <a class="card" href="./prompt-api/index.html">
              <span class="tag green">Built-in AI</span>
              <h3>Prompt API</h3>
              <p>检测 LanguageModel，可用时创建本地模型会话，不可用时展示 mock 摘要流程。</p>
              <ul>
                <li>能力检测：window.LanguageModel</li>
                <li>重点：本地模型、下载状态、渐进增强</li>
              </ul>
            </a>
            <a class="card" href="./devtools-agents/index.html">
              <span class="tag violet">Workflow</span>
              <h3>DevTools for Agents</h3>
              <p>提供一个故意带问题的页面，让 Chrome DevTools MCP 检查 console、network 和 performance。</p>
              <ul>
                <li>官方工具：chrome-devtools-mcp</li>
                <li>重点：让 Agent 看到真实浏览器运行时</li>
              </ul>
            </a>
            <a class="card" href="./modern-web-guidance/index.html">
              <span class="tag green">Guidance</span>
              <h3>Modern Web Guidance</h3>
              <p>展示官方 CLI 如何给 AI coding agent 检索现代 Web 用法和 Baseline 边界。</p>
              <ul>
                <li>重点：把现代 Web 知识注入 agent</li>
                <li>兜底：可复制命令和预期输出</li>
              </ul>
            </a>
            <a class="card" href="../html-in-canvas/index.html">
              <span class="tag amber">Origin Trial</span>
              <h3>HTML-in-Canvas</h3>
              <p>展示真实 DOM 表单绘制进 canvas 的 API 方向；不支持时显示 fallback 预览。</p>
              <ul>
                <li>能力检测：drawElementImage / requestPaint</li>
                <li>重点：不是 canvas 手绘控件</li>
              </ul>
            </a>
            <a class="card" href="./baseline/index.html">
              <span class="tag amber">Compatibility</span>
              <h3>Baseline</h3>
              <p>把“能不能放心用”从浏览器版本猜测，改成特性状态和 fallback 策略。</p>
              <ul>
                <li>重点：跨浏览器采用判断</li>
                <li>兜底：本地特性矩阵</li>
              </ul>
            </a>
            <a class="card" href="./view-transitions/index.html">
              <span class="tag red">UX API</span>
              <h3>View Transitions</h3>
              <p>展示 same-document 页面切换动画，并在不支持时退化为普通 DOM 更新。</p>
              <ul>
                <li>能力检测：document.startViewTransition</li>
                <li>重点：体验增强而非业务依赖</li>
              </ul>
            </a>
          </div>
        </section>

        <section class="section">
          <h2>本地运行</h2>
          <pre class="code"><code>npm run dev

# Slidev dev server 启动后访问：
http://localhost:3030/demo/index.html
http://localhost:3030/demo/webmcp/index.html
http://localhost:3030/demo/prompt-api/index.html
http://localhost:3030/demo/devtools-agents/index.html
http://localhost:3030/demo/modern-web-guidance/index.html
http://localhost:3030/html-in-canvas/index.html
http://localhost:3030/demo/baseline/index.html
http://localhost:3030/demo/view-transitions/index.html

# Modern Web Guidance 官方 CLI
scripts/demo-modern-web-guidance.sh</code></pre>
        </section>
      </section>
    </main>
  </body>
</html>