LiteRT-LM JavaScript API指南：如何在浏览器中用WebGPU运行Gemma 4

LiteRT-LM JavaScript API指南如何在浏览器中用WebGPU运行Gemma 4【免费下载链接】LiteRT-LMLiteRT-LM is Googles production-ready, high-performance, open-source inference framework for deploying Large Language Models on edge devices.项目地址: https://gitcode.com/GitHub_Trending/li/LiteRT-LMLiteRT-LM JavaScript API 是 Google 开源推理框架 LiteRT-LM 的网页端封装基于 WebGPU 硬件加速让开发者可以在浏览器中直接运行 Gemma 4 大语言模型E2B / E4B实现文本进、文本出的本地 LLM 推理数据完全不出设备隐私与性能兼得。为什么选择在浏览器中跑 Gemma 4传统的 LLM 应用需要把用户数据发送到云端服务器推理而 LiteRT-LM 的 JS API 把整个推理引擎编译为 WASM配合WebGPU调用浏览器 GPU 算力带来三大优势隐私优先模型与对话全部在本地完成无需后端⚡GPU 加速通过 WebGPU 后端推理速度远快于纯 CPU 方案零服务器成本一个静态网页即可交付完整的 AI 对话能力目前 JS API 处于 Early Preview 阶段支持文本进 / 文本出可直接运行的网页版模型包括模型文件说明gemma-4-E2B-it-web.litertlm轻量版内存占用更低gemma-4-E4B-it-web.litertlm能力更强推荐 GPU 较好的设备详细说明见仓库内的 [js/packages/core/README.md] 文档。一键安装步骤npm 或 CDN 两种引入方式安装方式非常轻量两种任选其一# 方式一npm 安装 npm i --save litert-lm/core # 方式二在脚本中直接从 CDN 动态导入 # import * as litertlm from https://cdn.jsdelivr.net/npm/litert-lm/core/esm;如果你习惯本地开发调试也可以 clone 仓库后在js/目录下用 [js/package.json] 中定义的 workspace 工具链turbo vite构建示例应用地址为git clone https://gitcode.com/GitHub_Trending/li/LiteRT-LM快速配置 Engine加载 Gemma 4 模型并指定 WebGPU 后端Engine是整个 JS API 的入口负责模型加载、会话创建和资源管理。核心配置项集中在EngineSettings中定义于 [js/packages/core/src/engine_settings.ts]import {Engine, EngineSettings, Backend} from litert-lm/core; const settings: EngineSettings { // 支持 URL、Blob 或 ReadableStream边下边加载 model: gemma-4-E2B-it-web.litertlm, backend: Backend.GPU, // 显式指定 WebGPU 后端 mainExecutorSettings: { maxNumTokens: 8192, // 上下文长度上限 }, }; const engine await Engine.create(settings); // 用完记得释放 GPU 资源 await engine.delete(); 小贴士模型初始化需要下载并编译模型首次加载可能耗时数秒建议给用户展示加载进度。创建对话与流式输出让 Gemma 4 逐字回答拿到 Engine 后创建Conversation实例即可开始多轮对话。可以传入preface设置系统提示词const chat await engine.createConversation({ preface: { messages: [{role: system, content: You are a helpful assistant}] } }); // 非流式等待完整回复 const reply await chat.sendMessage(What is the capital of France?); console.log(reply.content[0].text);流式输出体验更好sendMessageStreaming返回标准的ReadableStream实现逐字渲染for await (const chunk of chat.sendMessageStreaming(Tell me a story.)) { for (const item of chunk.content) { if (item.type text) render(item.text); } }需要随时中断两种方式都可以chat.cancel(); // 主动取消 // 或在 for await 循环里 break会自动取消底层生成进阶玩法AutoToolChat 让浏览器模型调用工具LiteRT-LM 的 JS API 内置了AutoToolChat编排层[js/packages/core/src/orchestration/auto_tool_chat.ts]让 Gemma 4 具备函数调用能力模型输出工具调用 → 应用执行 → 结果回传 → 模型用自然语言总结整个闭环都发生在浏览器内。该流程的核心是三个转换环节FormatTools将应用声明的工具格式化为模型可理解的文本ToMessage把模型产出的工具调用串解析为 JSONMessageToTemplateInput再把执行结果拼回提示模板。实战参考两个官方示例应用仓库js/目录下提供了两个开箱即用的 Web 示例强烈建议对照阅读源码Web 聊天应用[js/apps/chat/] —— 基于 Lit 元素构建的 PWA 聊天界面展示了模型加载、流式渲染、设置面板上下文长度、温度等的完整实践模型测试台[js/apps/model_tester/] —— 可切换 Session 与 Conversation 两种模式、实时调节采样参数的调试工具这两个应用共同印证了 JS API 的设计哲学用最少的代码约 10 行核心逻辑跑通浏览器端 Gemma 4 全链路。常见问题速查问题排查建议页面提示 WebGPU 不可用更换 Chrome/Edge 等新版 Chromium 内核浏览器并开启 GPU 硬件加速首次加载特别慢属于正常现象模型需下载编译可用 ReadableStream 边下边载并展示进度内存不足报错改用更小的gemma-4-E2B-it-web.litertlm或调低maxNumTokens忘记释放资源页面切换/卸载模型时调用engine.delete()释放 GPU 显存 至此你已经掌握了 LiteRT-LM JavaScript API 的完整路径安装依赖 → 用 WebGPU 启动 Engine → 创建 Gemma 4 对话 → 流式渲染 → 工具调用把隐私安全的本地 LLM 能力直接装进浏览器。【免费下载链接】LiteRT-LMLiteRT-LM is Googles production-ready, high-performance, open-source inference framework for deploying Large Language Models on edge devices.项目地址: https://gitcode.com/GitHub_Trending/li/LiteRT-LM创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考