STARTUP

WebGUP 催生AI创企的新模式

当大模型调用账单的增长速度却远远超过我们的收入时，我们意识到商业模式已经崩溃了。我们不只是在为服务器付费，而是在为每一次思考付费。

admin

Dec 6, 2025 • 12 min read

我最近收到的 OpenAI 账单让我警醒。

我最近加入了一家 AI 初创公司的启动团队。我们开发了一款“智能”写作助手，并为此感到自豪。我们使用了 Vercel AI SDK，从 GPT-4 获取实时回复简直易如反掌。我们发布了产品，获得了一些用户，然后就收到了第一张账单。那真是太可怕了。

我们掉进了“API优先”的陷阱。每个功能、每个用户、每一次按键都变成了一笔小小的交易，账单上又多了几美分，而账单的增长速度却远远超过了我们的收入。我们意识到我们的商业模式已经崩溃了。我们不只是在为服务器付费，而是在为每一次思考付费。

我开始执着于一个问题：如何在不支付高昂的、按使用量计费的服务器费用的情况下，构建真正智能的应用？

我最近写了一篇关于桌面端“本地优先AI”的文章（你可以在这里阅读）。但真正的目标，那个能够催生百万家新创企业的平台，是网页浏览器。多年来，这简直是个笑话。我们有tensorflow.js，但它主要用于玩具模型。

然而，在过去一年里，情况发生了根本性的变化。现在，我们可以在浏览器标签页中直接运行数十亿参数的语言模型，这些模型真正智能。

这不是对未来的预测，它正在发生。如果你正在打造一家人工智能初创公司，那么这次架构上的转变可能会决定你的成败。

1、颠覆商业模式的技术

是什么让这一切成为可能？不仅仅是模型变得更小了。更重要的是，我们习以为常的浏览器平台获得了超能力。这一转变建立在两项关键技术的成熟之上。

WebGPU：浏览器的“加速器”

这才是真正的游戏规则改变者。几十年来，我们的 JavaScript 代码只能与 CPU 通信。计算机中最强大的硬件——GPU（图形处理器）——一直被限制在绘制图像和运行游戏的范围内。

这一切随着 WebGPU 在 Chrome（版本 113）中稳定运行而改变，如今，在 2025 年底，它又登陆了 Safari（版本 18）和 Firefox。

WebGPU 是一种全新的底层 API。与它的前身 WebGL 不同，它不仅仅用于图形处理，而是一个真正的计算 API。它让你的 JavaScript 代码能够直接、原始地访问用户的显卡，从而进行通用并行处理。

这意义重大，因为人工智能运行所需的数学运算——数十亿次矩阵乘法——正是 GPU 的设计初衷。原本在 CPU 上（通过标准 JavaScript）需要 30 秒才能完成的任务，现在使用 WebGPU 可以在不到一秒的时间内完成。

WebAssembly (WASM)：引擎

如果说 WebGPU 是加速器，那么 WebAssembly 就是新的引擎。它让我们能够在浏览器中以接近原生应用的速度运行用 C++ 或 Rust 等高性能语言编写的代码。

这就是“如何实现”。我们并没有用 JavaScript 重写复杂的 AI 模型。我们只是将用于原生应用的强大且高度优化的 C++ 推理引擎（例如 llama.cpp 背后的引擎）编译成 WASM，使其能够在浏览器中运行。

将这两者结合起来，就能得到一个系统：它能够运行由计算机 GPU 加速的已编译 C++ 代码 (WASM)，而这一切都只需一个简单的 JavaScript 调用即可完成。我们有效地赋予了 Web 应用原生桌面应用的强大功能。

2、我们是如何构建这个系统（工具包）的？

好了，以上是理论部分。但作为开发者，我们究竟该如何使用它呢？

几年前，你需要一支由专业的 C++ 和图形工程师组成的团队来手动完成所有这些工作。而如今，Hugging Face 的优秀团队凭借其 transformers.js 库，让这一切变得几乎轻而易举。

这是一个高级 API，它能帮你处理所有繁琐的部分。它会自动：

检测用户的浏览器是否支持 WebGPU 并使用它。
如果不支持，它会优雅地回退到仅使用 WASM（CPU）的后端。
处理模型的下载、缓存和运行。

它是连接整个 Hugging Face 生态系统与您的前端的桥梁。

3、模型：为什么 Phi-3 是完美之选

另一个关键在于模型选择。您不会加载拥有 700 亿参数的 Llama 3 模型。目前最佳选择是参数量在 30 亿到 40 亿之间的小型语言模型 (SLM)，特别是微软的 Phi-3。

Phi-3-mini（拥有 38 亿参数）性能强大。它不仅仅是一个“小型”模型；它是在“教科书级”数据上训练的，这意味着它的推理和编码能力远超其规模所暗示的水平。

最重要的是，我们甚至没有使用完整尺寸的模型。我们使用的是量化版本。这意味着模型的“权重”（构成智能体的关键数字）从 16 位数字缩减到 4 位数字。这一过程使模型文件体积缩小了 75%，速度也大幅提升，而质量下降却出奇地小。一个 4 位量化的 Phi-3-mini 模型文件大小仅为约 1.9GB。

虽然仍然很大，但只需下载一次即可。

4、实用指南：构建无服务器 AI 聊天机器人

让我们构建一个简单的浏览器聊天机器人。这相当于新时代的“Hello, World”。

免责声明：此代码真实有效，但已进行简化。生产级应用需要更完善的用户界面来处理初始模型下载（文件大小可能超过 1GB！）以及在生成令牌时将其流式传输回服务器。此示例仅展示了核心机制。

以下是 index.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Browser AI with WebGPU</title>
    <style>
        body { font-family: sans-serif; max-width: 600px; margin: 2rem auto; }
        textarea { width: 100%; box-sizing: border-box; }
        #status { font-style: italic; color: #555; margin-bottom: 1rem; }
        #output { white-space: pre-wrap; background: #f4f4f4; padding: 1rem; }
    </style>
</head>
<body>
    <h1>My 100% Private, In-Browser Chatbot</h1>
    <p>
        Your AI server bill is now $0. All inference runs on your local machine
        using WebGPU and transformers.js.
    </p>
    <textarea id="prompt-input" rows="4" cols="50" placeholder="Type your prompt here..."></textarea>
    <button id="generate-btn" disabled>Generate</button>
    
    <h3>Output:</h3>
    <div id="status">Loading model... this can take a minute on first load.</div>
    <div id="output"></div>
    <script type="importmap">
    {
        "imports": {
            "@xenova/transformers": "https://cdn.jsdelivr.net/npm/@xenova/transformers@2/dist/transformers.min.js"
        }
    }
    </script>
    <script type="module" src="app.js"></script>
</body>
</html>

以下是你的 app.js：

// 3. Import the pipeline and env objects
import { pipeline, env } from '@xenova/transformers';
// --- Configuration ---
// In a real app, you'd host the .wasm files yourself.
// For this demo, we'll allow remote models.
env.allowRemoteModels = true;
// Use the browser's cache for model files
env.useBrowserCache = true;
// Skip the WASM proxy for simpler setup
env.backends.onnx.wasm.proxy = false;
// --- Get UI Elements ---
const status = document.getElementById('status');
const promptInput = document.getElementById('prompt-input');
const generateBtn = document.getElementById('generate-btn');
const output = document.getElementById('output');
// --- The Core Logic ---
(async function() {
    try {
        // 4. Create a text-generation pipeline
        // This is the magic line. We're loading a 4-bit quantized Phi-3 model
        // from Hugging Face, optimized by Xenova.
        status.textContent = 'Loading model (Phi-3-mini-4k-instruct_q4)... This can take a minute on first load.';
        
        const generator = await pipeline('text-generation', 'Xenova/Phi-3-mini-4k-instruct_q4', {
            quantized: true,
            device: 'webgpu', // Request WebGPU backend
            dtype: 'q4'        // Specify 4-bit quantization
        });
        status.textContent = 'Model loaded. Ready to chat!';
        generateBtn.disabled = false;
        // 5. Set up the button click event
        generateBtn.addEventListener('click', async () => {
            output.textContent = 'Generating...';
            generateBtn.disabled = true;
            const prompt = promptInput.value;
            
            // The prompt format for Phi-3 is specific
            const messages = [
                { role: 'user', content: prompt }
            ];
            // 6. Run the generator!
            // All computation happens here, on the user's device.
            const result = await generator(messages, {
                max_new_tokens: 512,  // Control output length
                temperature: 0.7,
                top_k: 50,
            });
            // Extract the generated text from the complex result object
            const generatedContent = result[0].generated_text[result[0].generated_text.length - 1].content;
            output.textContent = generatedContent;
            
            generateBtn.disabled = false;
        });
    } catch (err) {
        status.textContent = `Error: ${err.message}`;
        console.error(err);
    }
})();

5、可能遇到的问题和解决方案

运行这段代码后，打开浏览器的网络选项卡。你会看到它下载了一堆文件。这就是模型。但是第二次加载呢？什么都没有。所有内容都已缓存。现在是离线优先模式。

这很不可思议。但这并非魔法。我一直在用它进行开发，你会立即遇到三个难题。

1) 1.9GB 的“Hello, World” 第一次加载是个庞然大物。你不能只是显示一个“正在加载……”的旋转图标持续两分钟。你的用户会因此离开。

解决方案：你需要构建一个“模型感知”的用户界面。显示进度条。使用浏览器的 CacheStorage API 积极缓存模型。你的应用首次使用流程现在变成了“模型安装”流程。你还可以先使用一个 50MB 的小型模型来处理简单的任务（例如情感分析），然后再提供“升级”选项，在后台下载包含 40 亿参数的大型模型。

2) “在我的 M4 Mac 上运行正常……”（硬件问题）它在我的新笔记本电脑上运行完美。但是我朋友用了五年的 Windows 电脑或者中端 Android 手机呢？

解决方案：这就是 transformers.js 的优势所在。如果 device: 'webgpu' 失败，它会自动回退到 device: 'wasm'。这意味着它将在 CPU 上运行。速度会很慢……非常慢。但它能运行。

商业解决方案：你需要启用功能标志。你可以使用 if (navigator.gpu) 来检查 WebGPU 支持。如果用户拥有 WebGPU 支持，则启用“完整 AI”体验。如果没有，你可以回退到速度较慢的 CPU 版本（用于简单任务），或者——这一点至关重要——回退到你原有的服务器端 API 调用。这样，你可以为 90% 的用户提供“零成本”版本，同时仍然支持其余 10% 的用户。

3) 浏览器端的“黑盒”：当用户收到异常响应时，如何调试？你无法调试。你的服务器日志是空的。

解决方案：这需要一种新型的客户端日志记录方式。你需要构建一个简单的、用户选择加入的“反馈”系统。一个“点赞/点踩”按钮，在获得用户许可后，将 (提示、响应、模型名称) 元组发送回你的服务器进行分析。你不再需要调试服务器错误；您正在构建一个数据集来评估模型的客户端性能。

6、由此解锁的新商业模式

这部分内容应该会让每位创始人和产品经理都感到兴奋。这不仅仅是技术上的新奇，更是一场商业模式的革命。

1) “100% 私密”应用。这是一个巨大的营销优势。您现在可以构建以前不可能实现的应用。想想看：

一个分析用户健康症状的医疗聊天机器人。
一个可以阅读用户个人日记或笔记的“第二大脑”。
一个可以审查敏感合同的法律助理。

现在您可以构建这些应用，并在主页上醒目地标明：“您的数据永远不会离开您的电脑。绝对安全。”您不仅仅是在说您注重隐私，而是从架构层面实现了隐私保护。这就是您与行业巨头竞争的方式。

2) “零用户成本”SaaS 模式。这简直让我难以置信。我们的 AI 服务器费用从数千美元骤降至 0 美元。

这彻底颠覆了“按 API 调用付费”的商业模式。现在，您可以：

提供真正免费运行的“永久免费”版本。
将您的应用作为一次性购买出售。想象一下！一个“一次购买”的 AI 写作助手。
在价格上展开激烈竞争，让那些以 API 为先的公司望尘莫及。您的“用户成本”仅仅是首次下载的带宽费用，而不是对用户每次思考都收取费用。

3) “离线优先”的 AI 我的应用现在可以在飞机上运行。它可以在地下室运行。它可以在偏远地区网络连接不稳定的情况下运行。对于全球市场而言，这并非锦上添花，而是一项杀手级功能。

我们已经进入了一个新时代。“AI 必须运行在服务器上”的默认假设现在已经过时了。对于大量任务而言，AI 的最佳运行位置就在用户所在的地方：浏览器中。

原文链接：Your Company's AI Server Bill Can Now Be Zero: Save a Ton Of Money

汇智网翻译整理，转载请标明出处