React-LLM API 全解析轻松掌握 Hooks 与组件交互【免费下载链接】react-llmEasy-to-use headless React Hooks to run LLMs in the browser with WebGPU. Just useLLM().项目地址: https://gitcode.com/gh_mirrors/re/react-llmReact-LLM 是一个基于 WebGPU 在浏览器中运行大语言模型的开源项目提供了简单易用的 headless React Hooks让开发者可以通过useLLM()轻松实现与大语言模型的交互。本文将详细解析 React-LLM 的 API 接口帮助新手和普通用户快速掌握其 Hooks 与组件的交互方式。核心功能概览React-LLM 的核心功能是通过useLLM()Hook 提供在浏览器中运行大语言模型的能力。它主要包含以下几个方面对话管理创建、切换、删除对话消息处理发送消息、接收回复、管理消息历史模型控制初始化模型、监控加载状态、GPU 设备检测角色设置自定义用户和助手角色名称图React-LLM 对话界面演示展示了使用useLLM()Hook 实现的聊天功能快速开始要使用 React-LLM首先需要将其集成到你的 React 项目中。你需要通过 ModelProvider 组件提供上下文然后在组件中使用useLLM()Hook。import { ModelProvider, useLLM } from react-llm/headless; function App() { return ( ModelProvider ChatComponent / /ModelProvider ); } function ChatComponent() { const { send, conversation, isGenerating } useLLM(); // 组件实现... }主要 API 解析useLLM() 返回值useLLM()Hook 返回一个对象包含了与 LLM 交互的所有方法和状态对话管理conversation: 当前对话对象allConversations: 所有对话列表按更新时间排序createConversation(title?: string, prompt?: string): 创建新对话setConversationId(conversationId: string): 切换当前对话deleteConversation(conversationId: string): 删除指定对话deleteAllConversations(): 删除所有对话消息处理send(text: string, maxToken: number, stopSequences: string[]): 发送消息isGenerating: 是否正在生成回复deleteMessages(): 删除当前对话的所有消息setOnMessage(cb: (msg: GenerateTextResponse) void): 设置消息接收回调模型控制loadingStatus: 模型加载状态init(): 初始化模型gpuDevice: GPU 设备信息角色设置userRoleName: 用户角色名称setUserRoleName(roleName: string): 设置用户角色名称assistantRoleName: 助手角色名称setAssistantRoleName(roleName: string): 设置助手角色名称组件交互示例下面是一个简单的聊天组件示例展示了如何使用useLLM()Hookfunction ChatWindow() { const { loadingStatus, send, isGenerating, setOnMessage } useLLM(); const [input, setInput] useState(); useEffect(() { setOnMessage((msg) { // 处理接收到的消息 console.log(Received message:, msg.outputText); }); }, [setOnMessage]); const handleSend () { if (input.trim() !isGenerating) { send(input, 100, [user, assistant]); setInput(); } }; return ( div classNamechat-window {/* 聊天界面实现 */} input typetext value{input} onChange{(e) setInput(e.target.value)} disabled{isGenerating} / button onClick{handleSend} disabled{isGenerating} {isGenerating ? 发送中... : 发送} /button /div ); }高级功能持久化对话React-LLM 支持将对话持久化到本地存储只需在 ModelProvider 中配置ModelProvider config{{ persistToLocalStorage: true }} {/* 应用组件 */} /ModelProviderGPU 设备检测React-LLM 会自动检测 GPU 设备你可以通过gpuDevice属性获取相关信息const { gpuDevice } useLLM(); if (!gpuDevice.checked) { return div检测 GPU 设备中.../div; } if (gpuDevice.unsupportedReason) { return divGPU 不支持: {gpuDevice.unsupportedReason}/div; }图React-LLM 浏览器扩展演示展示了在浏览器环境中使用 WebGPU 运行 LLM 的能力项目结构React-LLM 采用 monorepo 结构主要包含以下几个包headless: 核心 Hooks 实现提供useLLM()APImodel: 模型运行时和 WebGPU 支持extension: 浏览器扩展示例retro-ui: 复古风格的 UI 组件库核心代码位于 packages/headless/src/hooks/useLLM.tsx定义了useLLMContext和相关类型。总结React-LLM 提供了简单易用的 API让开发者可以轻松地在浏览器中集成大语言模型功能。通过useLLM()Hook你可以快速实现对话管理、消息处理和模型控制等功能。无论是构建聊天应用还是集成 AI 助手React-LLM 都是一个值得尝试的选择。如果你想开始使用 React-LLM可以通过以下命令克隆仓库git clone https://gitcode.com/gh_mirrors/re/react-llm然后按照项目 README 中的说明进行安装和使用。祝你在 React-LLM 的使用过程中获得愉快的开发体验【免费下载链接】react-llmEasy-to-use headless React Hooks to run LLMs in the browser with WebGPU. Just useLLM().项目地址: https://gitcode.com/gh_mirrors/re/react-llm创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考