Chrome Prompt API: gọi Gemini Nano on-device từ JavaScript với input text/image/audio

Giới thiệu

Prompt API cho phép bạn gửi natural language request đến Gemini Nano — chạy trực tiếp trong browser. Vì model on-device:

• Không gửi prompt/data ra server.
• Không tốn API cost.
• Hoạt động offline sau khi model download xong.
• Latency thấp vì không có network round-trip.

Tính năng chính

Multimodal input

API accept ba loại input:

• text — prompt thường.
• image — phân tích nội dung ảnh.
• audio — xử lý audio (transcribe, analyze).

Output: chỉ text. Languages hỗ trợ: en, ja, es (đang phát triển thêm).

Use cases

• AI-powered search trong page content.
• Personalized news feeds với dynamic classification.
• Custom content filter (blur/hide theo topic user-defined).
• Calendar event extraction từ web page.
• Contact extraction từ business website.

Cách sử dụng

Kiểm tra availability

const availability = await LanguageModel.availability();
// 'available' | 'downloadable' | 'downloading' | 'unavailable'

Nếu trạng thái là downloading, lắng nghe progress để inform user — model size khá lớn.

Tạo session

const session = await LanguageModel.create();
const response = await session.prompt('Tóm tắt page này');

Với Chrome Extensions, có thể custom topK và temperature:

const params = await LanguageModel.params();
// { defaultTopK: 3, maxTopK: 128, defaultTemperature: 1, maxTemperature: 2 }

const session = await LanguageModel.create({
  temperature: Math.max(params.defaultTemperature * 1.2, 2.0),
  topK: params.defaultTopK,
});

Abort signal

const controller = new AbortController();
stopButton.onclick = () => controller.abort();

const session = await LanguageModel.create({
  signal: controller.signal,
});

Initial prompts (conversational state)

const session = await LanguageModel.create({
  initialPrompts: [
    { role: 'system', content: 'You are a helpful and friendly assistant.' },
    { role: 'user', content: 'What is the capital of Italy?' },
    { role: 'assistant', content: 'The capital of Italy is Rome.' },
  ],
});

Constraint output với prefix

Ép model trả về theo format cụ thể bằng cách prefill phần đầu của assistant response:

const characterSheet = await session.prompt([
  {
    role: 'user',
    content: 'Create a TOML character sheet for a gnome barbarian',
  },
  {
    role: 'assistant',
    content: '```toml\n',
    prefix: true,
  },
]);

Multimodal session

const session = await LanguageModel.create({
  expectedInputs: [
    { type: 'text', languages: ['en', 'ja'] },
    { type: 'image' },
  ],
  expectedOutputs: [
    { type: 'text', languages: ['ja'] },
  ],
});

Nếu model encounter input/output không support, ném NotSupportedError DOMException.

Bật trên localhost

Để test trên localhost, set hai flag thành Enabled rồi relaunch Chrome:

• chrome://flags/#optimization-guide-on-device-model
• chrome://flags/#prompt-api-for-gemini-nano-multimodal-input

Trạng thái triển khai

Lưu ý

• Hardware requirement: device user cần đủ RAM và GPU để chạy Gemini Nano — không phải máy nào cũng support.
• Model download lần đầu khá nặng — nên handle progress UI cẩn thận.
• Production gotcha: vì model chạy on-device, response không reproducible giống cloud LLM, và quality thấp hơn frontier model. Phù hợp cho task ngắn, classification, extraction — không phải agentic workflow phức tạp.
• Privacy win: vì data không rời browser, đây là lựa chọn tốt cho sensitive content (medical, legal, internal docs).