add official Chrome feature demos

2026-06-14 15:22:32 +08:00
parent 500217f2fd
commit de690f85fa
32 changed files with 2376 additions and 567 deletions
@@ -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("");
+}