停止将医疗数据发送到云端：使用 WebLLM 和 Transformers.js 构建 100% 私有健康 AI
Source: Dev.to
Introduction
在数据隐私常常成为我们为便利付出的代价的时代，医疗信息仍然是最敏感的前沿。当你将患者的记录或个人健康日志上传到集中式 API 时，实际上是把最私密的数据交给第三方。但如果 “大脑” 完全运行在你的浏览器中会怎样？
今天，我们将深入探讨 Edge AI 和 privacy‑preserving technology 的世界。我们将构建一个 Local Health Assistant，使用 WebGPU 加速在本地运行 Llama‑3 和 Whisper。通过利用 Transformers.js 和 WebLLM，我们可以实现 100 % 离线的敏感医疗案例摘要，且没有任何数据包离开用户的机器。这种 browser‑based AI 方法将为医疗应用、研究以及数据敏感行业带来颠覆性变化。
架构：100 % 本地推理
魔法发生在浏览器对 GPU 的访问中。与传统的客户端‑服务器模型不同，浏览器充当了基础设施。
graph TD
A[User Audio/Text Input] --> B{WebGPU Enabled?}
B -- Yes --> C[Transformers.js / Whisper]
B -- No --> D[Error: WebGPU Required]
C -->|Transcript| E[WebLLM / Llama‑3]
E -->|Contextual Summary| F[Local React UI]
F --> G[Downloadable Local Report]
subgraph Browser_Environment
C
E
F
end前置条件
- 技术栈：React (Vite)，WebLLM，Transformers.js。
- 硬件：一台支持 WebGPU 的 GPU 机器（最新的 Chrome/Edge 版本）。
- 模型：
Llama-3-8B-Instruct-q4f16_1-MLC和Xenova/whisper-tiny。
步骤 1：使用 Transformers.js 进行转录
首先，我们需要将口述的医学记录转换为文本。我们使用 Transformers.js，因为它允许我们直接在浏览器中运行 OpenAI 的 Whisper 模型。
import { pipeline } from '@xenova/transformers';
async function transcribe(audioBlob) {
// Initialize the automatic speech recognition pipeline
const transcriber = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny');
// Convert blob to audio buffer
const audioData = await audioBlob.arrayBuffer();
// Perform inference
const output = await transcriber(audioData, {
chunk_length_s: 30,
stride_length_s: 5,
});
return output.text;
}第2步：使用 WebLLM（Llama‑3）进行摘要
一旦获取到文本，我们就将其输入 WebLLM。WebLLM 利用 WebGPU 以接近原生的速度运行大型语言模型。这对于在确保 零隐私泄漏 的同时保持流畅的用户体验至关重要。
import * as webllm from '@mlc-ai/webllm';
const selectedModel = 'Llama-3-8B-Instruct-q4f16_1-MLC';
async function generateHealthSummary(transcript) {
const engine = await webllm.CreateEngine(selectedModel, {
initProgressCallback: (report) => console.log(report.text),
});
const messages = [
{
role: 'system',
content:
'You are a medical assistant. Summarize the following patient case into key symptoms and recommended follow‑ups. Ensure privacy‑first language.',
},
{ role: 'user', content: transcript },
];
const reply = await engine.chat.completions.create({ messages });
return reply.choices[0].message.content;
}第 3 步：编排 React UI
将这些重量级模型集成到 React 生命周期中需要谨慎的状态管理，以避免阻塞主线程。
寻找更适用于生产环境的模式？ 🚀
构建基于浏览器的 AI 很令人兴奋，但要将这些应用扩展到企业级的安全性和性能，需要更深入的架构洞察。如果您对 Edge AI 的高级模式、性能优化以及本地优先的数据同步感兴趣，请查看 Official WellAlly Tech Blog。
在 WellAlly，我们深入探讨医疗科技与高性能计算的交叉领域，提供超越基础的资源。
性能考虑与技巧
- 模型缓存：用户首次访问时，需要下载数千兆字节的权重。请有效利用浏览器缓存，以便后续访问能够瞬间加载。
- 惰性加载：仅在用户启动转录任务时才加载 Whisper。
- 分块推理：对于长篇转录，在将文本输入 Llama‑3 之前，将其拆分为可管理的块，以避免内存峰值。
- GPU 内存管理：监控 WebGPU 内存使用情况，并在用户离开页面时释放资源（
engine.dispose()）。 - UI 响应性：将繁重的推理工作卸载到 Web Worker，或使用
requestIdleCallback来保持界面流畅。
祝开发愉快，保持隐私至上！
关键技术
-
工作线程
在 Web Worker 中运行Transformers.js和WebLLM。这可确保在 GPU 进行计算时 UI 保持响应（60 fps）。 -
量化
在浏览器环境中始终选择 4‑bit 量化（例如q4f16_1），以便在拥有 8 GB–16 GB RAM 的用户机器上保持可接受的内存占用。
结论
浏览器不再仅仅是文档查看器；它是一个强大且私密的执行环境。通过结合 WebLLM 和 Transformers.js，我们可以创建尊重用户主权并默认遵守最严格的数据隐私法规（如 HIPAA 或 GDPR）的医疗助理。
您对本地 AI 的未来有何看法？
让我们在下方评论区讨论吧！ 👇