Chrome Built-in AI：端侧大模型浏览器扩展开发

Google 今年推出了 Chrome Built-in AI 功能，作为端侧"大"模型，可以在浏览器使用 Gemini Nano，我最近也体验了一下，Luna Assistant 最开始的架构是 Chrome Extension <---> Server，而 Server 实际只是做了一个 LLM 代理转发，为了简化开发，后来去掉了 Server，直接访问 LLM RESTful API，再后来就发现了 Chrome Built-in AI，抽时间把原来的代码重构成新的实现方式。

我自己体验下来，Chrome Built-in AI 在常规任务上的性能比调用云端 LLM 接口有明显优势，在划词翻译时，可以做到瞬间秒出结果，而调用云端 LLM 接口即使在流式输出的情况下，也是有明显停顿的，而翻译结果也很不错。

关于开发环境的设置，推荐阅读官方文档和 Get Started with Chrome Built-in AI : Access Gemini Nano Model locally，需要使用 Chrome Dev 版本，这里就不详细描述。

Chrome’s Built-in AI

Chrome Built-in AI 计划将包括 Gemini Nano 在内的大型语言模型 (LLM) 等 AI 模型直接集成到浏览器中。这使得网站和网络应用无需管理自己的模型即可执行 AI 任务，从而带来更轻松的部署、硬件加速和敏感数据的本地处理等优势。Built-in AI 促进了端侧 AI 执行，带来了更快捷的用户体验、更广泛的 AI 功能访问，甚至可以离线使用。虽然端侧 AI 在很多领域表现出色，但有时需要结合云端 AI 的混合方法来处理复杂任务或实现更广泛的设备兼容性。

Chrome Built-in AI 可通过 API（如 Translator 和 Summarizer）以及探索性 API（如 Prompt）访问，用于本地原型设计和反馈。这项技术非常适合增强内容消费（摘要、翻译）和支持内容创作（写作辅助、语法纠正）。一些内置的 AI API 可在初始试用版中进行测试，而探索性 API 则可供早期预览计划的参与者使用。

Luna Assistant

Luna Assistant 是一款 Chrome 扩展程序，旨在增强浏览体验和内容交互。它利用 Chrome 内置的 AI 功能提供一套实用功能：

文本翻译 (Translate API)
内容创作 (Write API)
内容改写 (Rewrite API)
代码解释 (Prompt API)
网页对话 (Summarization API, WIP)

代码分析

TypeScript 类型定义 (src/types/global.d.ts):

declare global {
    interface Window {
      ai: {
        languageModel: {
          capabilities: () => Promise<{
            available: string;
            defaultTemperature: number;
            defaultTopK: number;
          }>;
          create: (options?: any) => Promise<any>;
        };
        writer: {
          create: (options?: {
            sharedContext?: string;
            tone?: string;
            signal?: AbortSignal;
          }) => Promise<{
            write: (content: string, options?: { 
              context?: string;
              signal?: AbortSignal;
            }) => Promise<string>;
            writeStreaming: (content: string, options?: {
              context?: string;
              signal?: AbortSignal;
            }) => AsyncIterableIterator<string>;
            destroy: () => void;
          }>;
        };
        rewriter: {
          create: (options?: {
            sharedContext?: string;
            signal?: AbortSignal;
          }) => Promise<{
            rewrite: (content: string, options?: {
              context?: string;
              signal?: AbortSignal;
            }) => Promise<string>;
            rewriteStreaming: (content: string, options?: {
              context?: string;
              signal?: AbortSignal;
            }) => AsyncIterableIterator<string>;
            destroy: () => void;
          }>;
        };
      };
      translation: {
        canTranslate: (options: {
          sourceLanguage: string;
          targetLanguage: string;
        }) => Promise<string>;
        createTranslator: (options: {
          sourceLanguage: string;
          targetLanguage: string;
        }) => Promise<{
          translate: (text: string) => Promise<string>;
        }>;
      };
    }
    const translation: Window['translation'];
}
  
export {};

2. 代码解释 (src/components/explain_content.tsx)

      // Check if AI model is available
      const { available } = await window.ai.languageModel.capabilities();
      
      if (available === "no") {
        throw new Error("AI model is not available");
      }

      // Create AI session
      const session = await window.ai.languageModel.create({
        systemPrompt: "You are a helpful programming assistant. Explain the following code in a clear and concise way, focusing on its main functionality and key components."
      });

      // Construct the prompt
      const prompt = `Please explain this code:\n\n${code}`;

      // Use streaming response to get explanation
      let explanation = '';
      let previousChunk = '';
      
      const stream = session.promptStreaming(prompt);
      for await (const chunk of stream) {
        const newChunk = chunk.startsWith(previousChunk)
          ? chunk.slice(previousChunk.length)
          : chunk;
        explanation += newChunk;
        setTargetContent(explanation);
        previousChunk = chunk;
      }

      // Release session resources
      session.destroy();

未来展望

Chrome Built-in AI 拥有无限潜力。随着更多 API 和改进的 AI 模型出现，我们可以期待更多创新应用，例如图像理解、视频摘要以及更自然的人机交互。Luna Assistant 展示了这些可能性，为变革的网络体验铺平了道路。