AI原生前端开发（011）：Chrome 148+内置Gemini Nano入门

前言

在前面的10篇中，我们学习了各种AI开发工具。现在开始第二阶段：端侧AI开发！

端侧AI是什么？简单说就是：AI直接在用户设备（浏览器、手机、电脑）上运行，不需要联网！

今天我们就来学习：Chrome 148+ 内置的Gemini Nano！

---

1. 端侧AI基础

1.1 什么是端侧AI？

特性	云端AI	端侧AI
运行位置	服务器	用户设备
网络要求	需要网络	不需要
响应速度	慢	极快
隐私	数据外传	数据留在本地
成本	高	无

1.2 为什么要端侧AI？

• 🔒 隐私保护 - 数据不离开设备
• ⚡ 即时响应 - 不需要网络请求
• 💰 无成本 - 不花钱用
• 📴 离线可用 - 断网也能用

---

2. Chrome Gemini Nano环境搭建

2.1 系统要求

• Chrome版本：148或更高
• 操作系统：Windows 10+, macOS 11+, Linux
• 内存：至少8GB RAM（推荐16GB）
• 硬盘：至少4GB可用空间

2.2 启用步骤

步骤1：检查Chrome版本

打开Chrome → 菜单 → 帮助 → 关于Google Chrome
确认版本 ≥ 148

步骤2：启用实验性功能

在Chrome地址栏输入：
chrome://flags/#optimization-guide-on-device-model

找到 "Optimization Guide on Device Model"
选择 "Enabled Bypass Perimeter Check"

步骤3：启用Gemini Nano

输入：
chrome://flags/#prompt-api-for-gemini-nano

找到 "Prompt API for Gemini Nano"
选择 "Enabled"

步骤4：重启Chrome

点击 "Relaunch" 重启浏览器

2.3 验证是否启用

在浏览器控制台输入：

if ('ai' in window) {
  console.log('🎉 Chrome AI可用！');
  
  window.ai.assistant.capabilities().then(can => {
    console.log('AI能力：', can);
  });
  
} else {
  console.log('❌ Chrome AI不可用，请检查版本和设置');
}

---

3. 实战：第一个端侧AI应用

3.1 基础文本生成

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>端侧AI入门</title>
</head>
<body>
  <div class="container mx-auto p-6 max-w-3xl">
    <h1 class="text-3xl font-bold mb-6">🤖 端侧AI入门</h1>
    
    <div class="space-y-4">
      <div>
        <label class="block mb-2 font-medium">输入提示</label>
        <textarea 
          id="prompt" 
          class="w-full p-3 border rounded-lg"
          rows="4"
          placeholder="比如：写一首关于春天的诗..."
        ></textarea>
      </div>
      
      <button 
        id="generateBtn" 
        class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
      >
        生成
      </button>
      
      <div>
        <label class="block mb-2 font-medium">生成结果</label>
        <div id="result" class="p-4 bg-gray-50 rounded-lg min-h-[100px]">
          等待生成...
        </div>
      </div>
    </div>
  </div>

  <script>
    const btn = document.getElementById('generateBtn');
    const promptInput = document.getElementById('prompt');
    const resultDiv = document.getElementById('result');

    btn.addEventListener('click', async () => {
      btn.disabled = true;
      resultDiv.textContent = '正在生成...';

      try {
        if (!('ai' in window)) {
          throw new Error('Chrome AI不可用，请检查设置');
        }

        // 创建AI会话
        const session = await window.ai.assistant.create({
          systemPrompt: '你是一个乐于助人的AI助手。'
        });

        // 发送提示
        const prompt = promptInput.value || '介绍一下你自己';
        const result = await session.prompt(prompt);

        resultDiv.textContent = result;

      } catch (error) {
        resultDiv.textContent = '错误：' + error.message;
      } finally {
        btn.disabled = false;
      }
    });
  </script>
</body>
</html>

3.2 流式输出（打字机效果）

async function generateStream(prompt) {
  const session = await window.ai.assistant.create();
  
  // 获取流式输出
  const result = session.promptStreaming(prompt);
  
  let fullText = '';
  
  for await (const chunk of result) {
    fullText += chunk;
    // 实时更新UI
    resultDiv.textContent = fullText;
  }
}

---

4. API详解

4.1 检查能力

async function checkCapabilities() {
  const capabilities = await window.ai.assistant.capabilities();
  
  console.log('AI能力：', capabilities);
  // {
  //   available: true,
  //   supportsStreaming: true,
  //   language: 'en-US'
  // }
  
  return capabilities;
}

4.2 创建会话

async function createSession() {
  const session = await window.ai.assistant.create({
    systemPrompt: '你是一个专业的前端开发助手。',
    temperature: 0.7, // 创造性
    topK: 40,
    topP: 0.9
  });
  
  return session;
}

4.3 系统提示词工程

// 不同场景的系统提示词

const CODE_ASSISTANT = `你是一个专业的代码助手，精通JavaScript、TypeScript、React、Vue等。
要求：
1. 只返回代码，不要多余解释
2. 代码必须完整可运行
3. 添加必要的注释
`;

const WRITER = `你是一个写作助手，擅长写文章、邮件、文档。
风格：专业、清晰、简洁
语言：中文
`;

const TRANSLATOR = `你是一个翻译专家，支持中英互译。
要求：
1. 准确翻译
2. 保持原有的语气和风格
3. 不要添加额外内容
`;

---

5. 实战：AI写作助手

import React, { useState, useRef } from 'react';

function AIWritingAssistant() {
  const [input, setInput] = useState('');
  const [output, setOutput] = useState('');
  const [loading, setLoading] = useState(false);
  const sessionRef = useRef(null);

  // 初始化会话
  async function initSession() {
    if (!sessionRef.current) {
      sessionRef.current = await window.ai.assistant.create({
        systemPrompt: `你是一个写作助手。
        功能：
        1. 润色文章，让它更流畅
        2. 续写内容
        3. 改变风格（正式、幽默、简洁等）
        请用中文回复。`
      });
    }
    return sessionRef.current;
  }

  async function rewrite(mode) {
    setLoading(true);
    try {
      const session = await initSession();
      
      let prompt = '';
      switch (mode) {
        case 'improve':
          prompt = `请润色以下内容，让它更流畅:\n\n${input}`;
          break;
        case 'expand':
          prompt = `请续写以下内容:\n\n${input}`;
          break;
        case 'formal':
          prompt = `请把以下内容改写得更正式:\n\n${input}`;
          break;
      }
      
      const result = await session.prompt(prompt);
      setOutput(result);
    } catch (error) {
      setOutput('错误：' + error.message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="max-w-4xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">✍️ AI写作助手</h1>
      
      <div className="grid md:grid-cols-2 gap-6">
        <div>
          <label className="block mb-2 font-medium">原文</label>
          <textarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
            className="w-full h-64 p-3 border rounded-lg"
            placeholder="在这里输入你要处理的文本..."
          />
          
          <div className="flex gap-2 mt-4">
            <button 
              onClick={() => rewrite('improve')}
              disabled={loading}
              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50"
            >
              润色
            </button>
            <button 
              onClick={() => rewrite('expand')}
              disabled={loading}
              className="px-4 py-2 bg-green-600 text-white rounded-lg disabled:opacity-50"
            >
              续写
            </button>
            <button 
              onClick={() => rewrite('formal')}
              disabled={loading}
              className="px-4 py-2 bg-purple-600 text-white rounded-lg disabled:opacity-50"
            >
              正式化
            </button>
          </div>
        </div>
        
        <div>
          <label className="block mb-2 font-medium">结果</label>
          <div className="w-full h-64 p-3 border rounded-lg bg-gray-50">
            {loading ? '生成中...' : output}
          </div>
        </div>
      </div>
    </div>
  );
}

export default AIWritingAssistant;

---

6. 踩坑记录

6.1 问题1：AI不可用

问题描述 ：window.ai is undefined

解决方案：

1. 检查Chrome版本 ≥ 148
2. 确认两个flags都启用了
3. 重启浏览器
4. 可能需要等待模型下载完成

6.2 问题2：响应速度慢

问题描述：生成结果很慢

原因分析：

• 模型第一次加载需要时间
• 设备性能限制

解决方案：

1. 保持会话复用，不要每次都创建新的
2. 使用更简洁的提示词
3. 减少不必要的token

---

7. 今日小结

在这一篇中，我们学习了：

1. 端侧AI是什么和优势
2. Chrome Gemini Nano环境搭建
3. 基础API使用
4. 实战：AI写作助手
5. 踩坑记录

---

8. 下篇预告

下一篇，我们深入学习：Prompt API详解！