你不知道的 2024 Web AI 新动态，这将如何改变你我的生活？

大家好，我是童欧巴。

本文将会带大家回顾 2024 Google I/O 的一篇主题演讲 “Web AI：为你的下一个项目提供的本地机器学习模型和工具”。

回顾原则是挑干的讲，感兴趣大家可以去看完整版视频，链接在文末。

Web AI 是指在浏览器中使用机器学习模型的技术，通过 JavaScript 和用于加速的 WebAssembly 和 WebGPU，在你自己设备的 CPU 或 GPU 上运行。与 Cloud AI 不同，Cloud AI 的模型在服务器端执行，通过 API 访问。

自 2023 年以来，Web AI 发生了翻天覆地的变化，今天的演讲主要介绍如下内容：

在浏览器中以极快的速度运行全新的大语言模型，页面加载后无需等待服务器端调用延迟，并且在创建商业应用（如视频会议）时能够极大降低成本。

Visual Blocks 与 Hugging Face 进行合作，来加速从想法到原型的过程。通过与 Visual Blocks（低代码框架）对话，并在几秒钟内利用最新的研究成果构建工作流。

Chrome 团队也带来了更新，让 JavaScript 开发人员利用 WebGPU、WebAssembly 等技术在 Chrome 规模化使用 Web AI，甚至在浏览器级别推出新的 AI 专用 API。

一年的时间到底能带来什么样的变化呢？

MediaPipe 和 TensorFlow.js 库和模型累计下载量超过 10 亿次。

在过去两年中，平均每年下载量达到 6 亿次，使得在这段时间内的下载总量超过 12 亿次，2024 年有望继续保持这种增长趋势。

让我们来单独看看 TensorFlow.js 库，如下这张来自 NPM 的图表中，显示了自 2020 年以来的稳步增长，开发人员真正开始投入 Web AI。

请注意，这张图表显示的是每周的下载量，所以目前仅通过 NPM 每月就有大约 110 万次下载。

再看下一个图表，这是 2024 年 1 月份来自 JSDelivr 的 CDN 下载量，有超过 1180 万次库的下载。

预计在未来一年中，随着更多开发人员在实际应用中探索 Web AI，使用量将会进一步增加。

这会给业务带来很多好处：

• 减少延迟带来更好用户体验。
• 用户隐私保护。
• 显著降低成本。

不妨让我们算一笔经济账，以视频会议为例，许多视频会议提供背景模糊或背景移除功能来保护用户隐私。

摄像头通常以每秒 30 帧的速度生成视频，假设平均会议时间为 30 分钟，那就是需要对 54,000 帧进行背景模糊处理。

假设每天有 100 万次会议，这意味着每天 540 亿次处理。

假设每次处理的成本极低，仅为 0.0001 美分，这仍然意味着每天 540 万美元的成本，每年约 20 亿美元的服务器端 GPU 计算成本。

通过 WebAI 在客户端进行背景模糊，这些成本将不复存在。

另外，你还可以将其他模型移植到浏览器中，例如背景噪音去除，用极低的成本提升用户的会议体验。

2024 年对于将生成式 AI 引入浏览器，引入 JavaScript 社区来说是非常重要的一年，Google 也推出了一些新产品。

Gemma Web

Gemma Web 是一个新的开源模型，可以在用户设备的浏览器中运行，基于与 Gemini 模型相同的技术构建。

如上图示例，用户根据给定的上下文和某些要求生成一封电子邮件并发给他们的朋友，这个过程非常快，无需将任何文本发送到服务器。

想象将这样的功能变成一个 Chrome 扩展程序，你可以在网页上选中任何文本，右键点击将其转换为某种形式并发布在社交媒体上，或者解释你不理解的单词。

只需几次点击即可处理你遇到的任何问题，无需访问第三方网站。

有许多创造性的想法等待实现，从增强生产力的 Chrome 插件到 Web 应用本身的功能，我们正处于一个可以真正提升你网页体验的新纪元的开端。

实际上，浏览器中的生成式 AI 现在还处于早期阶段。但随着硬件的不断改进，更多的 CPU 和 GPU RAM 变得普及，我们将继续看到这种模型被移植到浏览器设备端。

企业能够重新设想在网页上能实现的功能，特别是针对某些行业或特定任务的情况，其中参数在 20 亿到 80 亿之间的小型大语言模型的权重可以在消费者硬件上为特定目的进行调整。

LLM inference API

全新推出了大语言模型推理 API，这个 API 开箱即用，支持四种领先的开源架构，可以由 CPU 和 GPU 加速。

通过一个通用的 API 即可轻松加载和运行，完全在设备端的浏览器中运行，无需在页面加载后进行任何服务器调用。

任何前端开发者都可以使用，并且速度远超人平均的阅读速度。

Gemma 2B

Gemma 2B 是一个轻量级的开源模型，非常适合各种文本生成任务，包括问答、摘要甚至推理。

Gemma 2B 可以在 Kaggle models[1] 下载，采用与 LLM inference API 兼容的格式提供。

其他的三种开源模型需要使用转换库将它们转换为可在通用 API 中使用的运行时格式。

Phi-2

Phi-2 是一个 27 亿参数的 Transformer 模型，适合问答、聊天和代码格式化的场景。

Falcon RW 1B

Falcon RW 1B 是一个拥有 10 亿参数的模型，在数据集 RefinedWeb[2] 的 3500 亿 tokens 上进行训练。

Stable LM 3B

Stable LM 3B 是 decoder only 架构，拥有 30 亿参数，在多样化的英语和代码数据集的 1 万亿 tokens 上进行预训练。

如下图，性能实际上取决于运行的客户端设备。

不同的模型和客户端设备，内存使用量和生成速度会有所不同。

需要注意的是，每个 token 大约代表 0.75 个单词，测试中最快每秒可以生成约 64 个单词，最慢每秒约 10 个单词。

普通人的阅读速度大约是每秒 4 个单词，这仍然比普通人阅读速度快两倍多。

所以这对于大多数情况来说已经足够了，随着时间的推移，硬件的不断改进，这种情况只会变得更好。

我们也可以采用混合模式，如果客户端设备足够强大，就在本地下载并运行模型，在设备无法运行模型时便回退到 Cloud AI，这可能适用于那些 CPU 或 GPU RAM 较小的老旧设备。

随着时间的推移，越来越多的计算可以在设备上完成，当使用这种方法时，投资回报率应该会越来越好。

说了这么多，代码要如何写呢？其实非常简单，见下图。

首先，使用标准 JavaScript 导入语句导入 MediaPipe LLM Inference API。

接下来，定义大语言模型地址。

定义一个新的异步函数来实际加载和使用该模型。

在其中，可以指定所需 MediaPipe 运行时的 FilesetURL，使用的是 MediaPipe 提供并托管的默认版本。

你也可以将这个文件保存在自己的 CDN 或服务器上托管。

接下来，使用之前的 FilesetURL 来初始化 MediaPipe 的 FilesetResolver，实际下载和使用将执行的生成式 AI 任务的运行时。

通过调用 LlmTask.createFromModelPath 来加载模型，将定义的 Fileset 和 modelURL 传递给它。

由于模型文件较大，需要等待它加载完成，然后它会返回加载好的模型，你可以将其赋值给名为 LLM 的变量。

现在模型已经加载完成，你可以通过输入一些文本作为参数来生成文本，并将结果存储在名为 answer 的变量中。

接下来，你可以记录这个答案，在屏幕上显示它，或利用返回的信息进行其他操作。

如果你想流式传输结果而不是一次性输出，可以在第二次调用时传递一个函数，这个函数会在部分结果可用时进行流式传输，你可以在它们可用时将其注入到网页中，从而实现类似所有在线聊天应用程序中看到的流媒体效果。

现在只需调用 initLLM 函数来启动上述加载过程并等待结果输出。

Bring Your own weights

通过使用这四种模型中的任何一种，你都能够加载自定义调整的模型，这意味着可以将这些模型的自定义版本进行蒸馏或微调到其中一个目标架构。

然后将其转换为客户端模型格式，并能够立即在浏览器中运行自定义调整的模型，速度与我们刚才看到的相当，只要权重适配这些架构之一并且大小相同。

要了解更多详细信息，请参阅提供的链接。

LLM inference API 让你可以在用户设备的浏览器中完全运行大型语言模型，用于你的下一个 Web 应用程序。

你可以使用 LLM 执行广泛的任务，这些任务以前仅靠 JavaScript 是无法完成的，例如生成文本、回答文档问题，甚至在网页上定义某些文本，以你可以理解的方式呈现。

同时，你可以非常快速地完成这些任务。

Visual Blocks

Visual Blocks 是去年推出的一个无代码机器学习原型工具，旨在让开发人员和决策者能够在使用机器学习时协同工作。

用户可以专注于解决实际问题，而不是被代码复杂性和技术障碍所阻碍。

如图所示，所有的关键功能都被打包在一个图形编辑器中。

用户可以从一套预制节点中选择，来执行常见的任务，例如从网络摄像头或麦克风获取数据，或可视化 AI 模型的输出。

当你从这些节点之一拖出时，会得到有效节点的连接建议。通过这种方式，可以快速创建一个端到端的原型，并与团队成员分享。

在今年与 Hugging Face 的合作中，Hugging Face 为 Visual Blocks 创建了 16 个全新的自定义节点。

将 Transformers.js 的强大功能和 Hugging Face 生态系统引入 Visual Blocks，这 16 个新节点中有 8 个是通过 Web AI 完全在客户端运行的。

Image segmentation 图像分割

以前，Visual Blocks 只提供了一个人物分割模型，Hugging Face 将这一能力进行扩展。

可以点击图像上的多个区域，然后结合对象分割并实时查看结果，操作起来更加丝滑。

还可以根据想要分割的对象来选择最合适的模型，对于人像，face-parsing 模型可能是一个不错的选择，但对于衣物，segformer_b0_clothes 模型可能会更好。

Translation 翻译

翻译节点是新上架的功能，输入任意文本，选择一个想要的语言，然后将输入的文本转换为目标语言。

根据需求，有五种不同的模型可供选择，最小的模型为 78 MB。

还可以使用一个节点从图像中提取文本，然后文本输入到翻译节点中，使得在现实世界中看到的内容转换成你可以理解的语言，就像 Google Lens[3] 一样。

Token classification 标记分类

简单来说，标记分类就是给定一个句子，它可以提取句子中有意义的词语，例如地点、公司或人名，如图所示。

从长句子中提取有用信息可以帮助你进行更强大的搜索，或者更详细地了解用户的意图，你可以根据需要选择合适的模型。

Image classification / object detection 图像分类和目标检测

可以选择四个新的分类模型和两个新的目标检测模型。

需要注意的是，这些模型是在不包含人物的 ImageNet 1K 数据集上训练的。

因此，这些模型在处理人物图像时表现可能不佳，但在识别动物和其他物体时效果很好。

Text classification 文本

文本分类节点，可以根据情感或内容毒性来分类文本。

可以根据需求选择三个提供的模型，最小的模型大小为 67 MB。

Background removal 背景移除

这款模型擅长从图像中移除背景，它的酷炫之处在于不仅仅支持人物，同时也支持动物。

Depth estimation 深度估计

对于任何给定的图像，模型将尝试估计每个像素与摄像头的距离，能够使普通的 2D 图像产生 3D 图像的效果。

使用查看器节点中的滑块调整位移量，来获得适合特定图像的效果。

Hugging Face 还支持通过 API 调用服务器端来执行模型的任务节点，这意味着你可以尝试成千上万的模型。

包括：填充掩码、图像分类、摘要、文本分类、文本生成、文生图、标记分类。

Visual Blocks custom nodes

Visual Blocks 支持自定义节点，来满足用户的自定义需求。自定义节点是常规的 Web components，与框架无关。

Instruct Pipe

Instruct Pipe 是一个研究项目，为 Visual Blocks 提供了一个 Copilot，用户可以通过自然语言描述需求，自动生成相应的工作流。

使用这种方式，能够减少大约 81% 的用户交互，让用户专注于他们尝试解决的任务，而不是拖拽和链接模块。

如果你对实现原理感兴趣，可以通过此链接[4]了解更多。

Model Explorer

Model Explorer 使模型调试更加直观和便捷，其支持多种模型格式，包括 JAX 和 TensorFlow、TensorFlow Lite 和 TensorFlow.js 文件。

Google 的许多团队在日常工作中使用 Model Explorer，例如 Gemini、Chrome 和 YouTube。

即使是非常大的模型也非常流畅、整洁和低延迟。

支持逐层导航图表，点击图层会高亮显示相似的图层，节省你的时间和点击次数。

属性窗格提供了每个图层和节点的详细信息。

书签功能，支持在图表的不同区域之间跳转。

颜色调色板功能，支持自定义颜色对节点进行标注，使你可以轻松找到关心的相似节点。

使用 Model Explorer[5] ，你可以轻松地遍历、分析和调试几乎任何大小和复杂性的机器学习模型，现在免费供所有人使用。

WebGPU

AI and the Web[6] 是我们开发的一个新网站，专门为选择使用 AI 的 web 开发人员提供指导。

Chrome 今年对 WebGPU 进行了更新，现在可以支持 16 位浮点值的 GPU。

但是，为什么这很重要呢？

如图所示，使用 32 位来存储大型语言模型的权重时，每秒解码大约 11 个 token。

如果通过使用 16 位，这一速度提高了 45%，达到了每秒 16 个 token，并且只需一半的内存来存储这些权重。

WebAssembly

接下来是关于 WebAssembly 的更新。

我知道 WebAI 社区的一些人在尝试加载超过 4 GB 的模型时遇到了一些问题。

新的 Memory64 提案正在探索支持 64 位内存索引，这将支持加载比以前更大的 AI 模型。

此外，现在可以试用 JSPI 支持，它能够更好地实现 WebAssembly 与其他 JavaScript API（如 WebGPU）之间的互操作性。

这基本上弥补了同步应用程序和异步 Web API 之间的差距。

Chrome 正在使其翻译和语音识别 API 可以完全离线工作，这意味着在离线状态下你可以使用这些高级功能来增强 web 应用程序的用户体验。

Web AI testing

在服务器端进行测试是有据可查和相对简单的，但是，如果在真实的浏览器环境中测试客户端模型，看看它是否能使用 WebGPU 和 WebAssembly 等技术良好运行该怎么办呢？

Jason Mayes 制作了一个解决方案，适用于任何需要 WebGL 或 WebGPU 支持的 Web AI 应用程序。

• Run in Google Colab[7]
• Deeper dive[8]
• GitHub Code[9]

左侧 CPU 的性能差异是默认情况下在无头 Chrome 中运行时获得的效果。

右侧是 GPU，当 Chrome 正确使用服务器端 GPU 时的效果。

这可以显著提高测试速度，能够验证生成式 AI 模型在这些浏览器环境中是否能正常工作，然后再上生产。

以上就是本次演讲的主要内容，希望阅读完本文你能有所收获。

“视频：https://www.youtube.com/watch?v=PJm8WNajZtw&list=PLOU2XLYxmsIKeQI4KTrrplA_mUPI3Lq5b&index=7 演讲者：Jason Mayes，Google Web AI 负责人。Na Li，端机器学习工具负责人。 ”

参考资料

[1]

Kaggle models: https://www.kaggle.com/models

[2]

RefinedWeb: https://huggingface.co/datasets/tiiuae/falcon-refinedweb

[3]

Google Lens: https://lens.google/

[4]

此链接: https://arxiv.org/abs/2312.09672

[5]

Model Explorer: https://ai.google.dev/edge/model-explorer

[6]

AI and the Web: https://web.dev/explore/ai

[7]

Run in Google Colab: https://developer.chrome.com/docs/web-platform/webgpu/colab-headless

[8]

Deeper dive: https://developer.chrome.com/blog/supercharge-web-ai-testing

[9]

GitHub Code: https://github.com/jasonmayes/headless-chrome-nvidia-t4-gpu-support/tree/main