TL;DR

现阶段在前端应用机器学习，要针对合适的场景和需求，寻求特定化、轻量化的模型方案，最终往往有比较不错的效果。展望未来，随着硬件设备的迭代更新，用户群体会有越来越高的 NPU 和高性能 GPU 的设备占比，再加上 WebGPU、WebNN 这类加速 AI 推理计算的 API 和标准推出，未来的前端应用会大放异彩。

人工智能、机器学习、神经网络、深度学习......

这些词到底是什么意思？彼此有什么关系？

这里对李开复的《AI·未来》《AI·未来进行式》中的概括总结：

（1）人工智能

1956年夏天，计算机科学家约翰·麦卡锡（John McCarthy）首次提出"人工智能"（AI）这个概念。

人工智能指的是，通过软件和硬件，来完成通常需要人类智能才能完成的任务。它的研究对象，就是在机器上模拟人类智能。

（2）机器学习

早期，人工智能研究分成两个阵营。

第一个阵营是规则式（rule-based）方法，又称专家系统（expert systems），指的是人类写好一系列逻辑规则，来教导计算机如何思考。

可想而知，对于复杂的、大规模的现实问题，很难写出完备的、明确的规则。所以，这种方法的进展一直很有限。

第二个阵营就是机器学习（machine learning），指的是没有预置的规则，只是把材料提供给计算机，让机器通过自我学习，自己发现规则，给出结果。

（3）神经网络

神经网络（neural network）是机器学习的一种主要形式。

神经网络就是在机器上模拟人脑的结构，构建类似生物神经元的计算网络来处理信息。

一个计算节点就是一个神经元，大量的计算节点组成网络，进行协同计算。

神经网络需要极大的算力，以及海量的训练材料。以前，这是难以做到的，所以20世纪70年代开始，就陷入了停滞，长期没有进展。

（4）深度学习

深度学习是神经网络的一种实现方法，在20世纪80年代由杰弗里·辛顿提出。它让神经网络研究重新复活。

深度学习是一种让多层神经元可以进行有效计算的方法，大大提高了神经网络的性能。"深度学习"这个名字，就是比喻多层神经元的自主学习过程。

多层神经元包括一个输入层和一个输出层，它们之间有很多中间层（又称隐藏层）。以前，计算机算力有限，只能支撑一两个中间层，深度学习使得我们可以构建成千上万个中间层的网络，具有极大的"深度"。

（5）Transformer

早些年，深度学习用到的方法是卷积神经网络（CNN）和循环神经网络（RNN）。

2017年，谷歌的研究人员发明了一种新的深度学习处理方法，叫做 Transformer（转换器）。

Transformer 不同于以前的方法，不再一个个处理输入的单词，而是一次性处理整个输入，对每个词分配不同的权重。

这种方法直接导致了2022年 ChatGPT 和后来无数生成式 AI 模型的诞生，是神经网络和深度学习目前的主流方法。

由于基于 Transformer 的模型需要一次性处理整个输入，所以都有"上下文大小"这个指标，指的是一次可以处理的最大输入。

比如，GPT-4 Turbo 的上下文是 128k 个 Token，相当于一次性读取超过300页的文本。上下文越大，模型能够考虑的信息就越多，生成的回答也就越相关和连贯，相应地，所需要的算力也就越多。

我们后续尽量使用机器学习来统一代表以上种种名词。

Web前端如何跟机器学习关联上

通过调用服务接口或者和本地应用交互等诸如 “我爸是李刚” 此类的方法，提供页面有机器学习的能力，这类情况不在我们的本篇讨论范围内。

我们本篇主要讨论在纯 Web 前端页面男儿当自强，如何实践应用机器学习的能力。

机器学习依赖的计算

众所周知，运行机器学习模型，通常需要大量计算，通常会借助 GPU 或 NPU 之类运算单元加速计算，前端怎么满足这个计算条件呢？

保底方案：Worker、WASM

最保底的算法是借助 WebAssembly 和 WebWorker 来最大限度的利用设备的多核 CPU 的计算能力，可以基本满足类似物体检测这类的小型模型的预测。

进阶方案：WebGL、WebGPU

我们可以将张量数据放到 WebGL的数据纹理(Data Textrues) 或者 WebGPU的纹理缓存区(Storage Textures) 利用 WebGL 中的着色器 或 WebGPU 中的来进行 GPGPU（GPU通用计算） ，性能提升将是 CPU 方案的百倍以上。

终极方案：WebNN（cooking）

WebNN是一种新的 Web 标准，允许 Web 应用程序和框架使用 GPU、CPU 或专用 AI 加速器等设备上的硬件来加速深度神经网络。

如果你的设备搭载了了 AMD 的 Ryzen 300 系列或者 Intel 的 Ultra 9 288v 系列的 CPU ,就可以完全利用设备的 CPU+GPU+NPU 来加速神经网络的计算，即便是文生图、对话式等比较重的模型都可以在本地跑出不错的效果。

现阶段前端如何应用机器学习热门资源和框架有哪些？现阶段前端应用机器学习的推荐和建议模型选择不要大单体，要小且精

对于合适的应用场景，用机器学习来往往比传统方案要有更好的效果，比如简单的手势识别、物体检测、图片分类、人脸、姿态检测等。

鉴于 Web 前端应用场景的局限性，在 Web 前端加载一个几十 MB 甚至上百 MB 的模型文件来使用是不合适的，尽管做本地化存储，也会由于用户设备的性能参差不齐，大部分用户往往会在等待中失去耐心，丢失对产品的信任。

现阶段前端应该使用尽可能小的模型来解决特定问题，给我们的传统应用做减法，为我们的服务减负，为用户提供更轻量级、更好效果的服务，建立用户的信任，以备日后标准、基建、硬件的发展之后应用更强劲的模型最终提供更好的价值成就用户。

或许不太合适，可以调整参数/重训练

现有的预训练可能并不是泛化效果最好的，可以慢慢积累有效数据重新训练模型，或者调整参数，让模型的预测效果达到尽可能最佳。

总结

当下这个时代，机器学习的浪潮如洪水猛兽般袭来，有着重写万物之称的JS（手动doge），有着无数新轮子的 Web 前端生态必定要和 AI 产生交集，这是无比让人兴奋的，对开发者来说，与其随波逐流，不如乘风破浪，希望各位同仁也勇敢加入这次浪潮！

引用

WebGL /webgl/lesso…

WebGL2 /

WebGPU /webgpu/less…

WebNN webmachinelearning.github.io/webnn-intro…

ONNX Runtime /microsoft/o…

Tensorflow.js

Transformers.js huggingface.co/docs/transf…

Huggingface.js huggingface.co/docs/huggin…

李沐《动手学深度学习》 zh-v2.d2l.ai/index.html

深入理解深度学习 udlbook.github.io/udlbook/