98 lines
4.1 KiB
HTML
98 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Prompt API Demo</title>
|
|
<link rel="stylesheet" href="../shared.css" />
|
|
</head>
|
|
<body>
|
|
<main class="shell">
|
|
<aside class="rail">
|
|
<p class="eyebrow">Built-in AI</p>
|
|
<h1>Prompt API</h1>
|
|
<p class="lead">
|
|
演示网页如何检测 Chrome 内置语言模型能力，并在不可用时退回到可解释的本地 mock。
|
|
</p>
|
|
<nav class="nav" aria-label="Demo navigation">
|
|
<a href="../index.html"><span class="num">0</span><span>返回总览</span></a>
|
|
<a href="../webmcp/index.html"><span class="num">1</span><span>WebMCP</span></a>
|
|
<a class="active" href="./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="../baseline/index.html"><span class="num">5</span><span>Baseline</span></a>
|
|
<a href="../view-transitions/index.html"><span class="num">6</span><span>View Transitions</span></a>
|
|
</nav>
|
|
<div class="note">
|
|
讲述重点：Prompt API 是渐进增强。先检测 availability，再由用户动作触发模型创建和下载进度。
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="stage">
|
|
<div class="hero">
|
|
<section class="statement">
|
|
<p class="eyebrow">window.LanguageModel</p>
|
|
<h2>把浏览器内置模型当作页面能力，而不是远程服务。</h2>
|
|
<p>
|
|
可用时，页面直接创建本地模型会话；不可用时，页面仍能展示同一套输入、输出和错误边界，
|
|
让观众理解这个 API 的产品形态。
|
|
</p>
|
|
</section>
|
|
<aside class="metrics">
|
|
<div class="metric">
|
|
<strong id="support-status">检测中</strong>
|
|
<span>当前浏览器 Prompt API 状态</span>
|
|
</div>
|
|
<div class="metric">
|
|
<strong id="availability">未知</strong>
|
|
<span>LanguageModel.availability() 结果</span>
|
|
</div>
|
|
<div class="metric">
|
|
<strong id="mode">未运行</strong>
|
|
<span>native 或 mock 执行路径</span>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<section class="two-col">
|
|
<div class="panel">
|
|
<p class="eyebrow">Task</p>
|
|
<h2>把 Chrome 更新摘要改写成给业务同事看的说明</h2>
|
|
<label class="field">
|
|
输入材料
|
|
<textarea id="prompt-input">Chrome 正在把浏览器能力分成三层：面向用户的体验 API、面向开发者的 DevTools agent workflow，以及面向 AI Agent 的 WebMCP 和 Built-in AI。</textarea>
|
|
</label>
|
|
<label class="field">
|
|
输出风格
|
|
<select id="tone">
|
|
<option value="业务说明">业务说明</option>
|
|
<option value="技术摘要">技术摘要</option>
|
|
<option value="现场讲稿">现场讲稿</option>
|
|
</select>
|
|
</label>
|
|
<div class="controls">
|
|
<button id="run">运行 Prompt API</button>
|
|
<button id="check" class="secondary">重新检测</button>
|
|
</div>
|
|
<pre class="code"><code>const availability = await LanguageModel.availability();
|
|
const session = await LanguageModel.create({
|
|
monitor(m) {
|
|
m.addEventListener("downloadprogress", updateProgress);
|
|
},
|
|
});
|
|
const result = await session.prompt(prompt);</code></pre>
|
|
</div>
|
|
|
|
<aside class="console">
|
|
<p class="eyebrow">Execution</p>
|
|
<h2>输出与日志</h2>
|
|
<pre id="log">等待运行...</pre>
|
|
</aside>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
|
|
<script type="module" src="./prompt-api.js"></script>
|
|
</body>
|
|
</html>
|