add official Chrome feature demos
This commit is contained in:
@@ -0,0 +1,97 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,74 @@
|
||||
import { logTo, setText } from "../shared.js";
|
||||
|
||||
const hasPromptApi = "LanguageModel" in window;
|
||||
|
||||
document.querySelector("#check").addEventListener("click", checkAvailability);
|
||||
document.querySelector("#run").addEventListener("click", runPrompt);
|
||||
|
||||
await checkAvailability();
|
||||
|
||||
async function checkAvailability() {
|
||||
setText("#support-status", hasPromptApi ? "支持" : "未暴露");
|
||||
setText("#mode", hasPromptApi ? "Native" : "Mock");
|
||||
|
||||
if (!hasPromptApi) {
|
||||
setText("#availability", "unavailable");
|
||||
logTo("#log", "prompt-api.detect", {
|
||||
supported: false,
|
||||
fallback: "Use local mock response for the presentation.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const availability = await LanguageModel.availability();
|
||||
setText("#availability", availability);
|
||||
logTo("#log", "prompt-api.availability", { availability });
|
||||
} catch (error) {
|
||||
setText("#availability", "error");
|
||||
logTo("#log", "prompt-api.error", { message: error.message });
|
||||
}
|
||||
}
|
||||
|
||||
async function runPrompt() {
|
||||
const source = document.querySelector("#prompt-input").value.trim();
|
||||
const tone = document.querySelector("#tone").value;
|
||||
const prompt = `请用${tone}风格，用三句话解释下面内容：\n\n${source}`;
|
||||
|
||||
if (!hasPromptApi) {
|
||||
const result = createMockSummary(source, tone);
|
||||
logTo("#log", "prompt-api.mock-result", { prompt, result });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setText("#mode", "Native running");
|
||||
const session = await LanguageModel.create({
|
||||
monitor(monitor) {
|
||||
monitor.addEventListener("downloadprogress", (event) => {
|
||||
const percent = Math.round(event.loaded * 100);
|
||||
setText("#availability", `downloading ${percent}%`);
|
||||
});
|
||||
},
|
||||
});
|
||||
const result = await session.prompt(prompt);
|
||||
setText("#mode", "Native complete");
|
||||
logTo("#log", "prompt-api.native-result", { prompt, result });
|
||||
} catch (error) {
|
||||
setText("#mode", "Native error");
|
||||
logTo("#log", "prompt-api.native-error", {
|
||||
prompt,
|
||||
message: error.message,
|
||||
fallback: createMockSummary(source, tone),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function createMockSummary(source, tone) {
|
||||
const first = source.split(/[。.!?]/).find(Boolean)?.trim() || source;
|
||||
return [
|
||||
`[${tone}] Chrome 的新能力可以理解为三条线同时推进。`,
|
||||
`第一条是用户体验升级，第二条是开发者工具升级，第三条是让网页能被 AI Agent 结构化调用。`,
|
||||
`这是一段 mock 输出，用来在当前浏览器没有 Prompt API 时保持演示可运行；输入摘要：${first}。`,
|
||||
].join("");
|
||||
}
|
||||
Reference in New Issue
Block a user