[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-r2d4--react-llm":3,"tool-r2d4--react-llm":61},[4,18,26,36,44,53],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",160015,2,"2026-04-18T11:30:52",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":32,"last_commit_at":42,"category_tags":43,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",109154,"2026-04-18T11:18:24",[14,15,13],{"id":45,"name":46,"github_repo":47,"description_zh":48,"stars":49,"difficulty_score":32,"last_commit_at":50,"category_tags":51,"status":17},6121,"gemini-cli","google-gemini\u002Fgemini-cli","gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。\n\n这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。\n\n它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。",100752,"2026-04-10T01:20:03",[52,13,15,14],"插件",{"id":54,"name":55,"github_repo":56,"description_zh":57,"stars":58,"difficulty_score":32,"last_commit_at":59,"category_tags":60,"status":17},4721,"markitdown","microsoft\u002Fmarkitdown","MarkItDown 是一款由微软 AutoGen 团队打造的轻量级 Python 工具，专为将各类文件高效转换为 Markdown 格式而设计。它支持 PDF、Word、Excel、PPT、图片（含 OCR）、音频（含语音转录）、HTML 乃至 YouTube 链接等多种格式的解析，能够精准提取文档中的标题、列表、表格和链接等关键结构信息。\n\n在人工智能应用日益普及的今天，大语言模型（LLM）虽擅长处理文本，却难以直接读取复杂的二进制办公文档。MarkItDown 恰好解决了这一痛点，它将非结构化或半结构化的文件转化为模型“原生理解”且 Token 效率极高的 Markdown 格式，成为连接本地文件与 AI 分析 pipeline 的理想桥梁。此外，它还提供了 MCP（模型上下文协议）服务器，可无缝集成到 Claude Desktop 等 LLM 应用中。\n\n这款工具特别适合开发者、数据科学家及 AI 研究人员使用，尤其是那些需要构建文档检索增强生成（RAG）系统、进行批量文本分析或希望让 AI 助手直接“阅读”本地文件的用户。虽然生成的内容也具备一定可读性，但其核心优势在于为机器",93400,"2026-04-06T19:52:38",[52,14],{"id":62,"github_repo":63,"name":64,"description_en":65,"description_zh":66,"ai_summary_zh":67,"readme_en":68,"readme_zh":69,"quickstart_zh":70,"use_case_zh":71,"hero_image_url":72,"owner_login":73,"owner_name":74,"owner_avatar_url":75,"owner_bio":76,"owner_company":76,"owner_location":76,"owner_email":77,"owner_twitter":78,"owner_website":79,"owner_url":80,"languages":81,"stars":98,"forks":99,"last_commit_at":100,"license":101,"difficulty_score":10,"env_os":102,"env_gpu":103,"env_ram":104,"env_deps":105,"category_tags":114,"github_topics":115,"view_count":32,"oss_zip_url":76,"oss_zip_packed_at":76,"status":17,"created_at":120,"updated_at":121,"faqs":122,"releases":142},9109,"r2d4\u002Freact-llm","react-llm","Easy-to-use headless React Hooks to run LLMs in the browser with WebGPU. Just useLLM().","react-llm 是一套专为 React 开发者设计的无头（Headless）Hooks 库，旨在让大型语言模型（LLM）直接在浏览器端运行。它解决了传统 AI 应用依赖后端服务器、存在数据隐私泄露风险以及部署成本高的问题，实现了“数据不出浏览器”的本地化推理体验。\n\n该工具主要适合前端工程师和全栈开发者使用，帮助他们快速构建无需后端支持的智能对话应用。通过简单的 `useLLM()` 钩子，开发者即可轻松集成模型初始化、消息发送、会话管理及状态监听等功能，并自由定制用户界面，真正实现“自带 UI\"的灵活开发模式。\n\n其核心技术亮点在于利用 WebGPU 进行硬件加速，结合 Apache TVM 编译技术和 Emscripten 转译方案，成功将 Vicuna 7B 等主流模型及 SentencePiece 分词器移植到浏览器环境中。模型推理在独立的 Web Worker 线程中运行，避免阻塞主界面，同时支持对话持久化存储和模型缓存机制，显著提升了加载速度与用户体验。无论是构建隐私优先的聊天机器人，还是探索端侧 AI 的原型设计，react-llm 都提供了一个高效、轻量且易于集成的","react-llm 是一套专为 React 开发者设计的无头（Headless）Hooks 库，旨在让大型语言模型（LLM）直接在浏览器端运行。它解决了传统 AI 应用依赖后端服务器、存在数据隐私泄露风险以及部署成本高的问题，实现了“数据不出浏览器”的本地化推理体验。\n\n该工具主要适合前端工程师和全栈开发者使用，帮助他们快速构建无需后端支持的智能对话应用。通过简单的 `useLLM()` 钩子，开发者即可轻松集成模型初始化、消息发送、会话管理及状态监听等功能，并自由定制用户界面，真正实现“自带 UI\"的灵活开发模式。\n\n其核心技术亮点在于利用 WebGPU 进行硬件加速，结合 Apache TVM 编译技术和 Emscripten 转译方案，成功将 Vicuna 7B 等主流模型及 SentencePiece 分词器移植到浏览器环境中。模型推理在独立的 Web Worker 线程中运行，避免阻塞主界面，同时支持对话持久化存储和模型缓存机制，显著提升了加载速度与用户体验。无论是构建隐私优先的聊天机器人，还是探索端侧 AI 的原型设计，react-llm 都提供了一个高效、轻量且易于集成的解决方案。","# @react-llm\u002Fheadless\n\nEasy-to-use headless React Hooks to run LLMs in the browser with WebGPU. As simple as `useLLM()`.\n\n### [**Live Demo**](https:\u002F\u002Fchat.matt-rickard.com)\n\n![image](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fr2d4_react-llm_readme_bc33bbe5d9ea.webp)\n\n**Features**:\n\n* Supports [Vicuna 7B](https:\u002F\u002Flmsys.org\u002Fblog\u002F2023-03-30-vicuna\u002F)\n* Use custom system prompts and \"user:\"\u002F\"assistant:\" role names\n* Completion options like `max tokens` and `stop sequences`\n* No data leaves the browser. Accelerated via WebGPU.\n* Hooks built to 'Bring your own UI'\n* Persistent storage for conversations in browser storage. Hooks for loading and saving conversations.\n* Model caching for faster subsequent loads\n\n## Installation\n\n```bash\nnpm install @react-llm\u002Fheadless\n```\n\n## Packages in this repository\n- [@react-llm\u002Fmodel](packages\u002Fmodel) - The LLM model and tokenizer compiled for the browser\n- [@react-llm\u002Fretro-ui](packages\u002Fretro-ui) - Retro-themed UI for the hooks\n- [@react-llm\u002Fextension](packages\u002Fextension) - Chrome Extension that uses the hooks\n- [@react-llm\u002Fheadless](packages\u002Fheadless) - Headless React Hooks for running LLMs in the browser\n\n\n## **useLLM** API\n### Types\n```typescript\n\u002F\u002F Model Initialization\ninit: () => void;\n\n\u002F\u002F Model Generation\nsend: (msg: string, maxTokens: number, stopSequences: string[]) => void;\nonMessage: (msg: GenerateTextResponse) => void;\nsetOnMessage: (cb: (msg: GenerateTextResponse) => void) => void;\n\n\u002F\u002F Model Status\nloadingStatus: InitProgressReport;\nisGenerating: boolean;\ngpuDevice: GPUDeviceInfo;\n\n\u002F\u002F Model Configuration\nuserRoleName: string;\nsetUserRoleName: (roleName: string) => void;\nassistantRoleName: string;\nsetAssistantRoleName: (roleName: string) => void;\n\n\u002F\u002F Conversation Management\nconversation: Conversation | undefined;\nallConversations: Conversation[] | undefined;\ncreateConversation: (title?: string, prompt?: string) => void;\nsetConversationId: (conversationId: string) => void;\ndeleteConversation: (conversationId: string) => void;\ndeleteAllConversations: () => void;\ndeleteMessages: () => void;\nsetConversationTitle: (conversationId: string, title: string) => void;\n```\n\n### Hooks\n```typescript\nimport useLLM from '@react-llm\u002Fheadless';\n\nconst MyComponent = () => {\n  const {\n    conversation,\n    allConversations,\n    loadingStatus,\n    isGenerating,\n    createConversation,\n    setConversationId,\n    deleteConversation,\n    deleteAllConversations,\n    deleteMessages,\n    setConversationTitle,\n    onMessage,\n    setOnMessage,\n    userRoleName,\n    setUserRoleName,\n    assistantRoleName,\n    setAssistantRoleName,\n    gpuDevice,\n    send,\n    init,\n  } = useLLM();\n\n  \u002F\u002F Component logic...\n\n  return null;\n};\n```\n\n### Provider\n```typescript\nimport { ModelProvider } from \"@react-llm\u002Fheadless\";\n\nexport default function Home() {\n  return (\n    \u003CModelProvider\n      config={{\n        kvConfig: {\n          numLayers: 64,\n          shape: [32, 32, 128],\n          dtype: 'float32',\n        },\n        wasmUrl: 'https:\u002F\u002Fyour-custom-url.com\u002Fmodel.wasm',\n        cacheUrl: 'https:\u002F\u002Fyour-custom-url.com\u002Fcache\u002F',\n        tokenizerUrl: 'https:\u002F\u002Fyour-custom-url.com\u002Ftokenizer.model',\n        sentencePieceJsUrl: 'https:\u002F\u002Fyour-custom-url.com\u002Fsentencepiece.js',\n        tvmRuntimeJsUrl: 'https:\u002F\u002Fyour-custom-url.com\u002Ftvmjs_runtime.wasi.js',\n        maxWindowSize: 2048,\n        persistToLocalStorage: true,\n      }}\n    >\n      \u003CChat \u002F>\n    \u003C\u002FModelProvider>\n  );\n}\n```\n\n### Packages\n\n* `@react-llm\u002Fheadless` - Headless React Hooks for running LLMs in the browser\n* `@react-llm\u002Fretro-ui` - Retro-themed UI for the hooks\n\n## How does it work?\n\nThis library is a set of React Hooks that provide a simple interface to run LLMs in the browser. It uses Vicuna 13B.\n\n* SentencePiece tokenizer (compiled for the browser via Emscripten)\n* Vicuna 7B (transformed to Apache TVM format)\n* Apache TVM and MLC Relax (compiled for the browser via Emscripten)\n* Off-the-main-thread WebWorker to run the model (bundled with the library)\n\n\nThe model, tokenizer, and TVM runtime are loaded from a CDN (huggingface). The model is cached in browser storage for faster subsequent loads.\n\n\n\n\n### Example\nSee [packages\u002Fretro-ui](packages\u002Fretro-ui) for the full demo code. This is a simple example of how to use the hooks. To run it, after cloning the repo,\n\n```bash\ncd packages\u002Fretro-ui\npnpm install\npnpm dev\n```\n\n\n### License\nMIT\n\nThe code under `packages\u002Fheadless\u002Fworker\u002Flib\u002Ftvm` is licensed under Apache 2.0.\n","# @react-llm\u002Fheadless\n\n易于使用的无头 React 钩子，可在浏览器中通过 WebGPU 运行大语言模型。简单到只需调用 `useLLM()` 即可。\n\n### [**在线演示**](https:\u002F\u002Fchat.matt-rickard.com)\n\n![image](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fr2d4_react-llm_readme_bc33bbe5d9ea.webp)\n\n**特性**：\n\n* 支持 [Vicuna 7B](https:\u002F\u002Flmsys.org\u002Fblog\u002F2023-03-30-vicuna\u002F)\n* 可自定义系统提示词以及“user:”和“assistant:”的角色名称\n* 提供完成选项，如 `max tokens` 和 `stop sequences`\n* 数据完全保留在浏览器内。借助 WebGPU 加速。\n* 钩子设计为“自带 UI”，方便开发者自由定制界面\n* 对话可持久化存储在浏览器本地存储中，并提供加载和保存对话的钩子\n* 模型缓存功能，提升后续加载速度\n\n## 安装\n\n```bash\nnpm install @react-llm\u002Fheadless\n```\n\n## 本仓库包含的包\n- [@react-llm\u002Fmodel](packages\u002Fmodel) - 编译后可在浏览器中运行的大语言模型及分词器\n- [@react-llm\u002Fretro-ui](packages\u002Fretro-ui) - 为这些钩子提供的复古风格 UI\n- [@react-llm\u002Fextension](packages\u002Fextension) - 使用这些钩子的 Chrome 扩展程序\n- [@react-llm\u002Fheadless](packages\u002Fheadless) - 用于在浏览器中运行大语言模型的无头 React 钩子\n\n\n## **useLLM** API\n### 类型\n```typescript\n\u002F\u002F 模型初始化\ninit: () => void;\n\n\u002F\u002F 模型生成\nsend: (msg: string, maxTokens: number, stopSequences: string[]) => void;\nonMessage: (msg: GenerateTextResponse) => void;\nsetOnMessage: (cb: (msg: GenerateTextResponse) => void) => void;\n\n\u002F\u002F 模型状态\nloadingStatus: InitProgressReport;\nisGenerating: boolean;\ngpuDevice: GPUDeviceInfo;\n\n\u002F\u002F 模型配置\nuserRoleName: string;\nsetUserRoleName: (roleName: string) => void;\nassistantRoleName: string;\nsetAssistantRoleName: (roleName: string) => void;\n\n\u002F\u002F 对话管理\nconversation: Conversation | undefined;\nallConversations: Conversation[] | undefined;\ncreateConversation: (title?: string, prompt?: string) => void;\nsetConversationId: (conversationId: string) => void;\ndeleteConversation: (conversationId: string) => void;\ndeleteAllConversations: () => void;\ndeleteMessages: () => void;\nsetConversationTitle: (conversationId: string, title: string) => void;\n```\n\n### 钩子\n```typescript\nimport useLLM from '@react-llm\u002Fheadless';\n\nconst MyComponent = () => {\n  const {\n    conversation,\n    allConversations,\n    loadingStatus,\n    isGenerating,\n    createConversation,\n    setConversationId,\n    deleteConversation,\n    deleteAllConversations,\n    deleteMessages,\n    setConversationTitle,\n    onMessage,\n    setOnMessage,\n    userRoleName,\n    setUserRoleName,\n    assistantRoleName,\n    setAssistantRoleName,\n    gpuDevice,\n    send,\n    init,\n  } = useLLM();\n\n  \u002F\u002F 组件逻辑...\n\n  return null;\n};\n```\n\n### Provider\n```typescript\nimport { ModelProvider } from \"@react-llm\u002Fheadless\";\n\nexport default function Home() {\n  return (\n    \u003CModelProvider\n      config={{\n        kvConfig: {\n          numLayers: 64,\n          shape: [32, 32, 128],\n          dtype: 'float32',\n        },\n        wasmUrl: 'https:\u002F\u002Fyour-custom-url.com\u002Fmodel.wasm',\n        cacheUrl: 'https:\u002F\u002Fyour-custom-url.com\u002Fcache\u002F',\n        tokenizerUrl: 'https:\u002F\u002Fyour-custom-url.com\u002Ftokenizer.model',\n        sentencePieceJsUrl: 'https:\u002F\u002Fyour-custom-url.com\u002Fsentencepiece.js',\n        tvmRuntimeJsUrl: 'https:\u002F\u002Fyour-custom-url.com\u002Ftvmjs_runtime.wasi.js',\n        maxWindowSize: 2048,\n        persistToLocalStorage: true,\n      }}\n    >\n      \u003CChat \u002F>\n    \u003C\u002FModelProvider>\n  );\n}\n```\n\n### 包\n* `@react-llm\u002Fheadless` - 用于在浏览器中运行大语言模型的无头 React 钩子\n* `@react-llm\u002Fretro-ui` - 为这些钩子提供的复古风格 UI\n\n## 工作原理？\n\n该库是一组 React 钩子，提供了一个简单的接口来在浏览器中运行大语言模型。它使用 Vicuna 13B。\n\n* SentencePiece 分词器（通过 Emscripten 编译为浏览器版本）\n* Vicuna 7B（转换为 Apache TVM 格式）\n* Apache TVM 和 MLC Relax（通过 Emscripten 编译为浏览器版本）\n* 使用主线程外的 WebWorker 来运行模型（随库一起打包）\n\n\n模型、分词器和 TVM 运行时从 CDN（Hugging Face）加载。模型会被缓存在浏览器存储中，以便下次更快地加载。\n\n\n\n\n### 示例\n完整演示代码请参见 [packages\u002Fretro-ui](packages\u002Fretro-ui)。以下是一个简单的使用示例。克隆仓库后，运行以下命令即可启动：\n\n```bash\ncd packages\u002Fretro-ui\npnpm install\npnpm dev\n```\n\n\n### 许可证\nMIT\n\n`packages\u002Fheadless\u002Fworker\u002Flib\u002Ftvm` 下的代码采用 Apache 2.0 许可证。","# react-llm 快速上手指南\n\n`react-llm` 是一个基于 React Hooks 的无头（Headless）库，允许你在浏览器中直接通过 WebGPU 运行大型语言模型（如 Vicuna 7B）。所有数据均在本地处理，无需离开浏览器。\n\n## 环境准备\n\n在开始之前，请确保你的开发环境满足以下要求：\n\n*   **操作系统**：支持 WebGPU 的现代操作系统（Windows 10\u002F11, macOS, Linux）。\n*   **浏览器**：必须使用支持 WebGPU 的浏览器版本（推荐最新版的 **Chrome** 或 **Edge**）。\n    *   *注意：如果浏览器未默认开启 WebGPU，可能需要在 `chrome:\u002F\u002Fflags` 中手动启用 \"Unsafe WebGPU\"。*\n*   **Node.js**：建议安装 Node.js 16+ 版本。\n*   **硬件**：拥有一定显存的 GPU 以获得最佳推理速度（模型会在本地缓存以加速后续加载）。\n\n## 安装步骤\n\n使用 npm 或 pnpm 安装核心包 `@react-llm\u002Fheadless`：\n\n```bash\nnpm install @react-llm\u002Fheadless\n```\n\n或者使用 pnpm：\n\n```bash\npnpm add @react-llm\u002Fheadless\n```\n\n> **提示**：目前官方资源托管于 HuggingFace CDN。若在国内网络环境下加载模型文件（WASM、Tokenizer 等）较慢，建议在 `ModelProvider` 配置中将 `wasmUrl`、`cacheUrl` 等地址替换为你自己的国内对象存储（如阿里云 OSS、腾讯云 COS）或加速镜像地址。\n\n## 基本使用\n\n### 1. 配置 Provider\n\n首先，在你的应用根组件中包裹 `ModelProvider`，并配置模型资源的加载地址。\n\n```typescript\nimport { ModelProvider } from \"@react-llm\u002Fheadless\";\n\nexport default function Home() {\n  return (\n    \u003CModelProvider\n      config={{\n        \u002F\u002F 内存配置 (根据模型大小调整)\n        kvConfig: {\n          numLayers: 64,\n          shape: [32, 32, 128],\n          dtype: 'float32',\n        },\n        \u002F\u002F 模型资源 URL (建议替换为国内加速地址)\n        wasmUrl: 'https:\u002F\u002Fyour-custom-url.com\u002Fmodel.wasm',\n        cacheUrl: 'https:\u002F\u002Fyour-custom-url.com\u002Fcache\u002F',\n        tokenizerUrl: 'https:\u002F\u002Fyour-custom-url.com\u002Ftokenizer.model',\n        sentencePieceJsUrl: 'https:\u002F\u002Fyour-custom-url.com\u002Fsentencepiece.js',\n        tvmRuntimeJsUrl: 'https:\u002F\u002Fyour-custom-url.com\u002Ftvmjs_runtime.wasi.js',\n        \n        maxWindowSize: 2048,\n        persistToLocalStorage: true, \u002F\u002F 启用本地存储以保存对话历史\n      }}\n    >\n      \u003CChat \u002F>\n    \u003C\u002FModelProvider>\n  );\n}\n```\n\n### 2. 使用 Hooks 进行交互\n\n在子组件中引入 `useLLM` Hook，即可获取模型控制、状态管理和对话处理能力。\n\n```typescript\nimport useLLM from '@react-llm\u002Fheadless';\nimport { useEffect, useState } from 'react';\n\nconst Chat = () => {\n  const {\n    init,\n    send,\n    onMessage,\n    setOnMessage,\n    loadingStatus,\n    isGenerating,\n    conversation,\n    createConversation,\n    userRoleName,\n    setUserRoleName,\n    assistantRoleName,\n    setAssistantRoleName,\n  } = useLLM();\n\n  const [input, setInput] = useState('');\n  const [response, setResponse] = useState('');\n\n  \u002F\u002F 初始化模型\n  useEffect(() => {\n    init();\n    \n    \u002F\u002F 设置接收消息的回调\n    setOnMessage((msg) => {\n      \u002F\u002F msg 包含生成的文本片段，可在此更新 UI\n      setResponse(prev => prev + msg.text); \n    });\n\n    \u002F\u002F 可选：自定义角色名称\n    setUserRoleName('user:');\n    setAssistantRoleName('assistant:');\n    \n    \u002F\u002F 创建新会话\n    if (!conversation) {\n      createConversation('新对话');\n    }\n  }, [init, conversation]);\n\n  const handleSend = () => {\n    if (!input.trim()) return;\n    setResponse(''); \u002F\u002F 清空上次回复\n    \u002F\u002F 发送消息：内容，最大 token 数，停止序列\n    send(input, 512, ['\\n']); \n    setInput('');\n  };\n\n  if (loadingStatus?.progress !== undefined && loadingStatus.progress \u003C 1) {\n    return \u003Cdiv>模型加载中... {Math.round(loadingStatus.progress * 100)}%\u003C\u002Fdiv>;\n  }\n\n  return (\n    \u003Cdiv>\n      \u003Cdiv style={{ minHeight: '100px', border: '1px solid #ccc', padding: '10px' }}>\n        {response || (isGenerating ? '生成中...' : '等待输入...')}\n      \u003C\u002Fdiv>\n      \u003Cinput \n        value={input} \n        onChange={(e) => setInput(e.target.value)} \n        placeholder=\"输入消息...\"\n        disabled={isGenerating}\n      \u002F>\n      \u003Cbutton onClick={handleSend} disabled={isGenerating}>发送\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n};\n\nexport default Chat;\n```\n\n### 核心功能说明\n\n*   **init()**: 触发模型、Tokenizer 和 TVM 运行时的加载。\n*   **send(msg, maxTokens, stopSequences)**: 发送用户消息并触发推理。\n*   **onMessage \u002F setOnMessage**: 监听流式输出的文本片段。\n*   **Conversation Management**: 提供 `createConversation`, `deleteConversation` 等方法，自动利用浏览器本地存储持久化对话历史。\n*   **Bring Your Own UI**: 该库不包含 UI 组件，你需要根据 `loadingStatus`, `isGenerating`, `conversation` 等状态自行构建界面。","一位前端开发者希望为教育类网站构建一个完全在浏览器端运行的 AI 作文辅导功能，确保学生隐私数据绝不上传服务器。\n\n### 没有 react-llm 时\n- **隐私风险高**：必须将学生的作文内容发送到后端 API 处理，存在数据泄露隐患，难以符合严格的儿童隐私保护法规。\n- **架构复杂沉重**：需要额外搭建和维护昂贵的 GPU 推理服务器集群来承载大模型流量，运维成本极高。\n- **开发周期漫长**：前端需编写复杂的 WebSocket 代码与后端通信，还要处理流式响应的解析与状态同步，逻辑繁琐。\n- **离线不可用**：一旦网络波动或服务器宕机，整个辅导功能立即瘫痪，无法在无网环境下使用。\n\n### 使用 react-llm 后\n- **数据本地闭环**：利用 WebGPU 技术直接在用户浏览器内运行 Vicuna 7B 模型，所有作文数据不出本地，彻底消除隐私顾虑。\n- **零后端负担**：无需部署任何推理服务器，仅通过 `useLLM` Hook 即可调用本地算力，大幅降低基础设施成本。\n- **开发极简高效**：借助头less Hooks 快速集成生成、状态管理及对话持久化功能，几行代码即可实现“自带 UI\"的智能交互。\n- **原生离线体验**：模型支持缓存机制，加载后可在无网状态下持续提供辅导服务，且后续加载速度显著提升。\n\nreact-llm 让前端开发者能以极低的成本，在浏览器中安全、高效地交付原生的大模型应用体验。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fr2d4_react-llm_b564f6b1.png","r2d4","Matt Rickard","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fr2d4_77aa2d62.jpg",null,"git@mattrickard.com","mattrickard","mattrickard.com","https:\u002F\u002Fgithub.com\u002Fr2d4",[82,86,90,94],{"name":83,"color":84,"percentage":85},"TypeScript","#3178c6",80.9,{"name":87,"color":88,"percentage":89},"JavaScript","#f1e05a",18.3,{"name":91,"color":92,"percentage":93},"HTML","#e34c26",0.8,{"name":95,"color":96,"percentage":97},"CSS","#663399",0.1,701,32,"2026-04-11T02:01:07","MIT","未说明","需要支持 WebGPU 的显卡（非 CUDA），具体型号和显存取决于浏览器和驱动支持，用于在浏览器端加速推理","未说明（建议具备运行 7B 参数模型所需的内存，通常需 8GB+ 系统内存）",{"notes":106,"python":107,"dependencies":108},"该工具完全在浏览器中运行，无需安装 Python 或本地 GPU 驱动。依赖浏览器的 WebGPU 支持，模型文件首次加载时从 CDN 下载并缓存到本地存储。支持 Vicuna 7B 模型，使用 WebWorker 在主线程外运行以避免阻塞界面。","不需要",[109,110,111,112,113],"@react-llm\u002Fheadless","Apache TVM","MLC Relax","SentencePiece","Emscripten",[35,14],[116,117,118,119],"headless","llm","react","webgpu","2026-03-27T02:49:30.150509","2026-04-18T22:32:41.432185",[123,128,133,138],{"id":124,"question_zh":125,"answer_zh":126,"source_url":127},40864,"react-llm 支持 Apple Silicon (M1\u002FM2) 芯片吗？","支持。作者确认在 M1 芯片上可以正常运行。使用前请确保满足以下条件：\n1. 使用 Chrome 浏览器版本 113 或更高（以支持 WebGPU）。\n2. 注意：目前尚不支持 iOS 设备。","https:\u002F\u002Fgithub.com\u002Fr2d4\u002Freact-llm\u002Fissues\u002F3",{"id":129,"question_zh":130,"answer_zh":131,"source_url":132},40865,"如何为 Llama 2 等其他模型生成所需的 tokenizer.model 文件？","目前官方文档中缺少关于如何将 Hugging Face 导出的 JSON 格式分词器转换为项目所需的 `tokenizer.model` 文件的详细说明。用户反馈从 Hugging Face 导出 Llama 2 分词器会得到三个 JSON 文件，但无法直接用作 `tokenizer.model`。建议关注项目后续更新或查看 webllm 的相关编译指令以获取转换方法。","https:\u002F\u002Fgithub.com\u002Fr2d4\u002Freact-llm\u002Fissues\u002F8",{"id":134,"question_zh":135,"answer_zh":136,"source_url":137},40866,"如何让项目使用独立显卡而不是集成显卡进行计算？","有用户反馈项目在运行时默认使用了集成显卡。虽然维护者尚未在 Issue 中给出具体配置命令，但这通常与浏览器的 WebGPU 实现或系统图形设置有关。建议检查浏览器是否识别到独显，或在系统图形设置中强制浏览器使用高性能 GPU。此问题已被提出，需等待进一步的技术指引或浏览器内核更新。","https:\u002F\u002Fgithub.com\u002Fr2d4\u002Freact-llm\u002Fissues\u002F1",{"id":139,"question_zh":140,"answer_zh":141,"source_url":137},40867,"GenerateTextRequest 是否支持自定义 temperature 和 topP 参数？","在早期版本中，`temperature` 和 `topP` 参数在代码中被硬编码，未暴露给 `GenerateTextRequest` 类型定义。社区已发起 Pull Request (#2) 试图将这些参数添加到请求类型中以允许用户自定义。如果当前版本仍未生效，建议检查是否已合并该 PR 或手动修改 `packages\u002Fheadless\u002Fsrc\u002Ftypes\u002Fworker_message.ts` 和 `packages\u002Fheadless\u002Fsrc\u002Fworker\u002Fllm.ts` 相关文件以解除硬编码限制。",[143,147],{"id":144,"version":145,"summary_zh":76,"released_at":146},324465,"v0.0.5","2023-05-18T00:56:22",{"id":148,"version":149,"summary_zh":150,"released_at":151},324466,"v0.0.3","初始发布","2023-05-15T03:19:22"]