浏览器内运行的AI模型：BrowserAI教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00462/article/details/146901875

浏览器内运行的AI模型：BrowserAI教程

BrowserAI Run local LLMs inside your browser 项目地址: https://gitcode.com/gh_mirrors/br/BrowserAI

1. 项目介绍

BrowserAI 是一个开源项目，它允许用户直接在浏览器中运行生产就绪的大型语言模型（LLM），无需服务器支持。该项目利用WebGPU进行加速，提供接近本地性能的推断速度。BrowserAI 保证了100%的隐私性，因为所有处理都在用户的浏览器内完成，同时它还具备离线运行的能力。这个项目非常适合网页开发者、需要隐私保护的AI解决方案的公司、进行浏览器AI实验的研究人员以及没有基础设施负担的爱好者使用。

2. 项目快速启动

首先，确保您的开发环境已经安装了npm或yarn。以下是如何快速启动BrowserAI的步骤：

# 安装BrowserAI
npm install @browserai/browserai
# 或者
yarn add @browserai/browserai

接下来，您可以在JavaScript中创建一个BrowserAI实例，并加载一个模型：

// 引入BrowserAI
import { BrowserAI } from '@browserai/browserai';

// 创建BrowserAI实例
const browserAI = new BrowserAI();

// 加载模型，这里以llama-3.2-1b-instruct模型为例
await browserAI.loadModel('llama-3.2-1b-instruct', {
  quantization: 'q4f16_1',
  onProgress: (progress) => console.log('加载中:', progress.progress + '%')
});

// 生成文本
const response = await browserAI.generateText('你好，今天天气怎么样？');
console.log(response.choices[0].message.content);

3. 应用案例和最佳实践

文本生成

您可以要求BrowserAI生成一首关于编程的短诗：

const response = await browserAI.generateText('写一首关于编程的短诗', {
  temperature: 0.8,
  max_tokens: 100,
  system_prompt: "你是一位专注于技术主题的创意诗人。"
});

聊天界面

创建一个聊天界面，其中包含系统提示和用户输入：

const ai = new BrowserAI();
await ai.loadModel('gemma-2b-it');

const response = await ai.generateText([
  { role: 'system', content: '你是一位乐于助人的助手。' },
  { role: 'user', content: '什么是WebGPU？' }
]);

结构化输出

生成符合JSON schema的结构化输出：

const response = await browserAI.generateText('列出三种颜色', {
  json_schema: {
    type: "object",
    properties: {
      colors: {
        type: "array",
        items: {
          type: "object",
          properties: {
            name: { type: "string" },
            hex: { type: "string" }
          }
        }
      }
    }
  },
  response_format: {
    type: "json_object"
  }
});

语音识别和文本转语音

使用内置的录音机进行语音识别，并将文本转换为语音：

// 语音识别
const browserAI = new BrowserAI();
await browserAI.loadModel('whisper-tiny-en');

await browserAI.startRecording();
const audioBlob = await browserAI.stopRecording();
const transcription = await browserAI.transcribeAudio(audioBlob, { return_timestamps: true, language: 'en' });

// 文本转语音
const ai = new BrowserAI();
await ai.loadModel('kokoro-tts');
const audioBuffer = await ai.textToSpeech('你好，今天过得怎么样？', { voice: 'af_bella', speed: 1.0 });