react-llm - 使用无头 React Hooks 在浏览器中运行 LLM，支持 WebGPU 加速

项目介绍：React-LLM

react-llm 是一个易于使用的工具包，提供了无头的 React Hooks，能够在浏览器中使用 WebGPU 运行大语言模型（LLM）。它的使用方式非常简单，就像调用 useLLM() 这种接口一样。

主要功能

支持 Vicuna 7B 模型，可以进行对话生成。
允许使用自定义系统提示以及"用户:"/"助手:"角色名称。
提供生成选项，例如最大 tokens 数量和停止序列。
所有数据都不会离开浏览器，使用 WebGPU 提升速度。
该工具包设计为"带上你自己的 UI"（即支持自定义界面）。
在浏览器存储中持久化对话内容，并提供加载和保存对话的钩子。
模型缓存使后续加载速度更快。

安装方法

要开始使用 react-llm，只需在项目中执行以下安装命令：

npm install @react-llm/headless

库中的其他包

@react-llm/model：LLM 模型和分词器，为浏览器编译。
@react-llm/retro-ui：为这些钩子提供复古主题的用户界面。
@react-llm/extension：使用这些钩子的 Chrome 扩展。
@react-llm/headless：用于在浏览器中运行 LLM 的无头 React Hooks。

UseLLM API

useLLM 提供了一系列功能强大的接口和类型，帮助开发者轻松调用并管理语言模型。这包括模型初始化、生成消息、设置模型状态、管理对话等功能。

使用示例

为了更好地理解如何使用这些钩子，下面是一个简化的示例代码：

import useLLM from '@react-llm/headless';

const MyComponent = () => {
  const {
    conversation,
    allConversations,
    loadingStatus,
    isGenerating,
    createConversation,
    setConversationId,
    deleteConversation,
    deleteAllConversations,
    deleteMessages,
    setConversationTitle,
    onMessage,
    setOnMessage,
    userRoleName,
    setUserRoleName,
    assistantRoleName,
    setAssistantRoleName,
    gpuDevice,
    send,
    init,
  } = useLLM();

  // 组件的逻辑...

  return null;
};

如何工作

这个库通过提供一组简单的 React Hooks 界面，使得在浏览器中运行 LLM 变得直观易用。其内部使用了 Vicuna 13B 模型、SentencePiece 分词器，并编译为可在浏览器环境中运行的 Apache TVM。

所需的模型、分词器和 TVM 运行时都从 CDN（如 huggingface）加载，并在浏览器存储中缓存，以提高后续的加载速度。

示例代码

可以在 packages/retro-ui 文件夹中查看完整的演示代码。简单开始的步骤如下：

cd packages/retro-ui
pnpm install
pnpm dev

许可证

该项目主要代码使用 MIT 许可证。
位于 packages/headless/worker/lib/tvm 的代码使用 Apache 2.0 许可证。

通过这样的工具，开发者可以在前端中更好地利用强大的语言模型，使得创建智能交互变得更加容易和高效。