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 来加速神经网络的计算，即便是文生图、对话式等比较重的模型都可以在本地跑出不错的效果。
现阶段前端如何应用机器学习
热门资源和框架有哪些？
- Tensorflow.js 可以使用现有模型、迁移学习重新训练现有模型、使用JS开发机器学习模型。
- ONNX RUNTIME Web 微软开源的跨平台推理和训练机器学习加速器在
Web端的运行时。兼容不同的硬件、驱动程序和操作系统，并通过在适用的情况下利用硬件加速器以及图形优化和转换来提供最佳性能。 - Huggingface.js 与
Hugging Face API交互的JS库的集合 - Transformers.js 在浏览器中运行
Transformer模型
现阶段前端应用机器学习的推荐和建议
模型选择不要大单体，要小且精
对于合适的应用场景，用机器学习来往往比传统方案要有更好的效果，比如简单的手势识别 、物体检测 、图片分类 、人脸、姿态检测等。
鉴于 Web 前端应用场景的局限性，在 Web 前端加载一个几十 MB 甚至上百 MB 的模型文件来使用是不合适的，尽管做本地化存储，也会由于用户设备的性能参差不齐，大部分用户往往会在等待中失去耐心，丢失对产品的信任。
现阶段前端应该使用尽可能小的模型 来解决特定问题 ，给我们的传统应用做减法 ，为我们的服务减负，为用户提供更轻量级、更好效果的服务，建立用户的信任，以备日后标准、基建、硬件的发展之后应用更强劲的模型最终提供更好的价值成就用户。
或许不太合适，可以调整参数/重训练
现有的预训练可能并不是泛化效果最好的，可以慢慢积累有效数据重新训练模型，或者调整参数，让模型的预测效果达到尽可能最佳。
总结
当下这个时代，机器学习的浪潮如洪水猛兽般袭来，有着重写万物之称的JS（手动doge），有着无数新轮子的 Web 前端生态必定要和 AI 产生交集，这是无比让人兴奋的，对开发者来说，与其随波逐流，不如乘风破浪，希望各位同仁也勇敢加入这次浪潮！
引用
WebGL webglfundamentals.org/webgl/lesso...
WebGL2 webgl2fundamentals.org/
WebGPU webgpufundamentals.org/webgpu/less...
WebNN webmachinelearning.github.io/webnn-intro...
ONNX Runtime github.com/microsoft/o...
Tensorflow.js www.tensorflow.org/js?hl=zh-cn
Transformers.js huggingface.co/docs/transf...
Huggingface.js huggingface.co/docs/huggin...
李沐《动手学深度学习》 zh-v2.d2l.ai/index.html
深入理解深度学习 udlbook.github.io/udlbook/