用于选择和运行本地 AI 模型的浏览器 API

为任务选择合适的模型

打开示例查看代码。模型 ID 是占位符；请将它们替换为你的应用使用的具体模型 ID。

        01// Placeholder: replace with the ID of your chosen LLM.
02const model = '<llm-model-id>';
03
04button.addEventListener('click', async () => {
05  if (!('models' in navigator)) return showFallback();
06
07  try {
08    const { status } = await navigator.models.requestAccess(model);
09    if (status !== 'granted') return showFallback();
10
11    const result = await navigator.models.generate(model, {
12      messages: [
13        { role: 'system', content: 'Summarize the key points in three bullets.' },
14        { role: 'user', content: documentInput.value },
15      ],
16    });
17
18    if (result.finishReason !== 'stop') return showFallback();
19    output.textContent = result.data ?? '';
20  } catch {
21    showFallback();
22  }
23});
      

这里的 documentInput 是一个包含文章或文档的文本区域。button、output 和 showFallback() 由你的应用提供。这些示例仅用于说明，不会在此页面上执行。

        01// Placeholder: a vision-capable model with structured output.
02const model = '<vision-model-id>';
03
04button.addEventListener('click', async () => {
05  if (!('models' in navigator)) return showFallback();
06  const image = imageInput.files?.[0];
07  if (!image) return showFallback();
08
09  try {
10    const { status } = await navigator.models.requestAccess(model);
11    if (status !== 'granted') return showFallback();
12
13    const result = await navigator.models.generate(model, {
14      messages: [{
15        role: 'user',
16        content: [
17          { type: 'text', text: 'Extract the merchant, date, and total.' },
18          { type: 'image', image },
19        ],
20      }],
21      output: {
22        schema: {
23          type: 'object',
24          properties: {
25            merchant: { type: 'string' },
26            date: { type: 'string' },
27            total: { type: 'number' },
28          },
29          required: ['merchant', 'date', 'total'],
30        },
31      },
32    });
33
34    if (result.finishReason !== 'stop') return showFallback();
35    output.textContent = JSON.stringify(result.data, null, 2);
36  } catch {
37    showFallback();
38  }
39});
      

这里的 imageInput 是用于受支持收据图像（最大 10 MiB）的文件输入。button、output 和 showFallback() 由你的应用提供。这些示例仅用于说明，不会在此页面上执行。

        01// Placeholder: replace with the ID of your chosen embedding model.
02const model = '<embedding-model-id>';
03
04button.addEventListener('click', async () => {
05  if (!('models' in navigator)) return showFallback();
06
07  try {
08    const { status } = await navigator.models.requestAccess(model);
09    if (status !== 'granted') return showFallback();
10
11    const index = await navigator.models.embed(model, notes);
12    const query = await navigator.models.embed(index.model, queryInput.value);
13    if (query.model !== index.model) return showFallback();
14
15    const matches = notes.map((text, i) => ({
16      text,
17      score: cosineSimilarity(query.vectors[0], index.vectors[i]),
18    })).sort((a, b) => b.score - a.score);
19
20    output.textContent = JSON.stringify(matches.slice(0, 5), null, 2);
21  } catch {
22    showFallback();
23  }
24});
      

这里的 notes 是一个由文本字符串组成的小型非空数组，queryInput 是搜索字段。将更大的集合拆分为符合 API 限制的批次。button、output 和 showFallback() 由你的应用提供。这些示例仅用于说明，不会在此页面上执行。