75 lines
2.5 KiB
JavaScript
75 lines
2.5 KiB
JavaScript
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("");
|
|
}
|