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

Jason Mayes

François Beaufort

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

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

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

透過 GPU 建立一致的測試環境並不容易 。我們會在這篇網誌文章中分享目前面臨的問題及解決方法 ，方便您提升應用程式效能。

這不只適用於網頁 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，畫面應會顯示下列結果：

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

啟用 WebGPU 和 WebGL 支援功能

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

• --no-sandbox 標記會停用 Chrome 安全沙箱， 系統其他部分的瀏覽器處理程序以根權限執行 Chrome，但沒有 不支援此沙箱
• --headless=new 旗標執行 Chrome 時，將經過改良後的新版 無頭模式，不顯示任何 UI。
• --use-angle=vulkan 標記會指示 Chrome 使用 Vulkan 後端 適用於 ANGLE，而 會將 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 問題，且值會從 只會停用至軟體

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

安裝正確的 GPU 驅動程式

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

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

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

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

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

現在，請再次執行指令碼，然後得到以下結果。🎉

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

幕後花絮：本團隊的調查

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

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

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

在一般機器中，50 個訓練週期 (稱為「週期」) 應該在更短的時間內執行 不到 1 秒在呼叫 Headless Chrome 時，可記錄 將 JavaScript 控制台輸出到 Node.js 伺服器端指令列 實際花費的訓練時間

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

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

摘要

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

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

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

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

總結

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

覺得這個做法很實用，歡迎在這裡與我們分享 LinkedIn, X (舊稱 Twitter)，或任何 社群網路，運用主題標記 #WebAI。歡迎與我們分享 您的寶貴意見。

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

特別銘謝

非常感謝 Chrome 團隊的所有成員協助偵錯驅動程式 這項解決方案中遇到的 WebGPU 問題， Jecelyn Yeen 和 Alexandra White 協助使用 Wordsmith 功能 這篇網誌文章感謝 Yuly Novikov、Andrey Kosyakov， Alex Rudenko 不會白費工夫