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 https://webglfundamentals.org/webgl/lessons/zh_cn/
WebGL2 https://webgl2fundamentals.org/
WebGPU https://webgpufundamentals.org/webgpu/lessons/zh_cn/webgpu-fu...
WebNN https://webmachinelearning.github.io/webnn-intro/
ONNX Runtime https://github.com/microsoft/onnxruntime
Tensorflow.js https://www.tensorflow.org/js?hl=zh-cn
Transformers.js https://huggingface.co/docs/transformers.js/index
Huggingface.js https://huggingface.co/docs/huggingface.js/index
李沐《動手學深度學習》 https://zh-v2.d2l.ai/index.html
深入理解深度學習 https://udlbook.github.io/udlbook/
