大幅提升 Web AI 模型測試效率:WebGPU、WebGL 和 Headless Chrome

François Beaufort
François Beaufort

好消息!您已建構很酷的 Web AI 應用程式 直接在使用者的裝置上執行機器學習模型完全在用戶端網頁瀏覽器上執行,不必仰賴雲端。在這部裝置上 設計可強化使用者隱私、提高效能並降低成本 。

但也有一些難題。您的 TensorFlow.js 模型可以在上面運作 CPU (WebAssembly) 和更強大的 GPU WebGLWebGPU)。問題是: 如何使用所選硬體持續自動執行瀏覽器測試?

比較機器學習模型時,請務必維持一致性 逐步改進效能,然後才實際部署 以便實際使用的裝置

透過 GPU 建立一致的測試環境並不容易 。在這篇網誌文章中,我們將分享我們遇到的問題和解決方法,協助您改善應用程式效能。

這項功能不僅適用於 Web AI 開發人員!如果您是網頁遊戲或圖像的開發人員,這篇文章也能提供寶貴意見。

自動化工具箱提供哪些功能

以下是我們使用的工具:

  • 環境:採用 Linux 的 Google Colab 已連線至 NVIDIA 的 notebook T4 或 V100 GPU您可以使用 Google Cloud 等其他雲端平台 (GCP)。
  • 瀏覽器:Chrome 支援 WebGPU, 強大的 WebGL 架構, 現代 GPU API 的先進技術為網路。
  • 自動化Puppeteer 是一個 Node.js 程式庫,可讓您使用這項功能 您也能使用 JavaScript 以程式輔助方式控制瀏覽器透過 Puppeteer,我們可以在無頭模式下自動執行 Chrome,也就是在伺服器上執行瀏覽器,但沒有可見的介面。使用改良後 新的無頭模式,而非 舊版表單。
,瞭解如何調查及移除這項存取權。

驗證環境

如要檢查 Chrome 的硬體加速功能是否已啟用,最好的方法就是 在網址列中輸入 chrome://gpu。你可以 透過程式輔助方式使用 Puppeteer 執行對等項目 使用 console.log,或是將完整報表儲存為 PDF 檔案,方便手動檢查:

/* Incomplete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters: Expands later
const browser = await puppeteer.launch({
  headless: 'new',
  args:  ['--no-sandbox']
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({ path: './gpu.pdf' });

await browser.close();

開啟 chrome://gpu,畫面應會顯示下列結果:

圖形地圖項目狀態
OpenGL: 已停用
Vulkan: 已停用
WebGL: 僅限軟體,無法使用硬體加速功能。
WebGL2: 僅限軟體,無法使用硬體加速功能。
WebGPU: 已停用

偵測到問題。
已透過封鎖清單或指令列停用 WebGPU。

這不是個好的開始。硬體偵測明顯失敗了。 WebGL、WebGL2 和 WebGPU 已完全停用或僅適用於軟體。三 這種情況並不孤立,因為許多使用者在線上討論 (1)、 (2)。

啟用 WebGPU 和 WebGL 支援

系統預設使用無頭 Chrome 就會「停用 GPU」。 如要在 Linux 上啟用這項功能,請在啟動無頭介面時套用下列所有標記 Chrome:

  • --no-sandbox 標記會停用 Chrome 安全沙箱, 系統其他部分的瀏覽器處理程序以根權限執行 Chrome,但沒有 不支援此沙箱
  • --headless=new 標記會以全新且更強大的無頭模式執行 Chrome,且不會顯示任何 UI。
  • --use-angle=vulkan 標記會指示 Chrome 為 ANGLE 使用 Vulkan 後端,將 OpenGL ES 2/3 呼叫轉譯為 Vulkan API 呼叫。
  • --enable-features=Vulkan 旗標可讓 Vulkan 圖形後端 Chrome 的程式設計和光柵化功能。
  • --disable-vulkan-surface 標記會停用 VK_KHR_surface vulkan 執行個體。不使用交換鏈 位元光用於 螢幕上會顯示轉譯結果
  • --enable-unsafe-webgpu 標記會在以下位置啟用實驗性 WebGPU API: Linux 上的 Chrome 並停用轉接程式封鎖清單。

現在,我們會將已做的所有變更合併,以下是完整的腳本。

/* Complete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters
const browser = await puppeteer.launch({
  headless: 'new',
  args: [
    '--no-sandbox',
    '--headless=new',
    '--use-angle=vulkan',
    '--enable-features=Vulkan',
    '--disable-vulkan-surface',
    '--enable-unsafe-webgpu',
  ]
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({path: './gpu.pdf'});

await browser.close();

再次執行指令碼。未偵測到 WebGPU 問題,且值會從 只會停用至軟體

圖形地圖項目狀態
OpenGL: 已停用
Vulkan: 已停用
WebGL: 僅限軟體,無法使用硬體加速功能。
WebGL2: 僅限軟體,無法使用硬體加速功能。
WebGPU: 僅限軟體,無法使用硬體加速功能。

不過,硬體加速功能仍無法使用,因此 NVIDIA T4 GPU 並未 。

安裝正確的 GPU 驅動程式

我們與部分 GPU 專家一起深入調查「chrome://gpu」的輸出內容 。我們發現安裝在裝置的預設驅動程式時 Linux Colab 例如,導致 Vulkan 發生問題,導致 Chrome 無法偵測到 GL_RENDERER 層級的 NVIDIA T4 GPU,如下輸出內容所示。這個 會導致 Headless Chrome 發生問題

預設輸出內容不會偵測 NVIDIA T4 GPU。
駕駛資訊
GL_RENDERER ANGLE (Google,Vulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE))、SwiftShader 驅動程式-5.0.0)

只要安裝相容的正確驅動程式,即可解決這個問題。

安裝驅動程式後,輸出結果會更新。
駕駛人資訊
GL_RENDERER ANGLE (NVIDIA Corporation、 Tesla T4/PCIe/SSE2、OpenGL ES 3.2 NVIDIA 525.105.17)

如要安裝正確的驅動程式,請在設定期間執行下列指令。 最後兩行會說明如何記錄 NVIDIA 驅動程式一併偵測到的輸出內容 只在 vulkaninfo

apt-get install -y vulkan-tools libnvidia-gl-525

// Verify the NVIDIA drivers detects along with vulkaninfo
nvidia-smi
vulkaninfo --summary

再次執行指令碼,我們會得到以下結果。🎉

圖形地圖項目狀態
OpenGL: 已啟用
Vulkan: 已啟用
WebGL: 硬體加速,但效能降低。
WebGL2: 硬體加速,但效能降低。
WebGPU: 硬體加速,但效能降低。

我們在執行 Chrome 時使用了正確的驅動程式和標記,因此現在有了 WebGPU 和 WebGL。

幕後花絮:本團隊的調查

經過多次研究後,我們找不到適合環境的可行方法 需要在 Google Colab 中執行 希望訊息 但這也讓我們深具潛力最終 成功在 Colab NVIDIA T4 環境中複製成功經驗,2 個 重要問題:

  1. 某些標記組合允許偵測 GPU,但不允許您執行以下操作 實際使用 GPU
  2. 使用舊版 Chrome 無頭 Chrome 的第三方工作解決方案範例 但日後也會淘汰,並改用 新版本。我們需要一種解決方案 提升了 Headless Chrome 的效用

我們已執行 圖片辨識範例 TensorFlow.js 網頁範例, 我們也訓練模型辨識服飾類範例 (例如 世界」機器學習的一環

在一般機器上,50 個訓練週期 (稱為「epoch」) 的執行時間應各自少於 1 秒。在呼叫 Headless Chrome 時,可記錄 將 JavaScript 控制台輸出到 Node.js 伺服器端指令列 實際花費的訓練時間

正如預期的那樣,每個訓練週期花費的時間比預期長得多 (數個 就會表示 Chrome 已改回採用平實的 JS CPU 執行方式 而不是使用 GPU:

訓練週期的移動速度較慢。
圖 1:即時擷取,顯示每個訓練週期的執行所需時間 (秒)。

修正驅動程式後,使用正確的 Headless 旗標組合 Chrome,重新執行 TensorFlow.js 訓練範例可大幅提升速度 訓練週期

紀元速度已加快...
圖 2:顯示訓練週期加快的即時擷取。

摘要

網路 AI 的成長迅速 。使用 WebGPU、WebGL 及 WebAssembly,是機器學習模型的 客戶端可以進一步加速數學運算。

截至 2023 年,TensorFlow.js 和 MediaPipe Web 的下載量超過 10 億 這不僅是歷史性的里程碑,同時也有像徵網路 開發人員和工程師都在邁向採用新世代 AI 技術的趨勢 用於打造強大解決方案

如果能成功使用產品,就必須負起責任。達到此用量層級 因此,測試用戶端、瀏覽器式 AI 技術的需求 同時具備擴充性、自動化功能 並存在於已知的標準化硬體配置中

結合全新 Headless Chrome 和 Puppeteer 的強大優勢 讓您能放心地以標準化且可複製的方式測試這類工作負載 確保結果一致且可靠的結果。

總結

您可以在下列位置使用逐步指南: ,不妨自行嘗試完整的設定。

覺得這個做法很實用,歡迎在這裡與我們分享 LinkedIn, X (舊稱 Twitter),或任何 社群網路,運用主題標記 #WebAI。歡迎提供任何意見,讓我們知道日後該如何撰寫這類內容。

在 GitHub 存放區上加上星號 ,接收日後的最新消息。

特別銘謝

非常感謝 Chrome 團隊的所有成員協助偵錯驅動程式 這項解決方案中遇到的 WebGPU 問題, Jecelyn YeenAlexandra White 協助使用 Wordsmith 功能 這篇網誌文章感謝 Yuly Novikov、Andrey Kosyakov 和 Alex Rudenko,他們在打造最終可行解決方案的過程中發揮了重要作用。