Kiểm thử mô hình AI cho web trong Google Colab

Jason Mayes
François Beaufort
François Beaufort
GitHub

Việc thiết lập môi trường kiểm thử nhất quán với GPU có thể khó hơn dự kiến. Dưới đây là các bước để kiểm thử mô hình AI phía máy khách, dựa trên trình duyệt trong môi trường trình duyệt thực tế, đồng thời có thể mở rộng quy mô, tự động hoá và nằm trong chế độ thiết lập phần cứng được tiêu chuẩn hoá đã biết.

Trong trường hợp này, trình duyệt là một trình duyệt Chrome thực có hỗ trợ phần cứng, thay vì mô phỏng phần mềm.

Dù bạn là nhà phát triển AI trên web, trò chơi trên web hay đồ hoạ, hoặc bạn quan tâm đến việc kiểm thử mô hình AI trên web, thì hướng dẫn này đều dành cho bạn.

Bước 1: Tạo một sổ tay Google Colab mới

1. Truy cập vào colab.new để tạo một sổ tay mới trên Colab. Kết quả sẽ tương tự như hình 1. 2. Làm theo lời nhắc để đăng nhập vào Tài khoản Google của bạn.
Ảnh chụp màn hình của một Colab mới
Hình 1: Một sổ tay Colab mới.

Bước 2: Kết nối với máy chủ có GPU T4

  1. Nhấp vào biểu tượng Kết nối ở gần phía trên cùng bên phải của sổ tay.
  2. Chọn Change runtime type (Thay đổi loại thời gian chạy):
    Ảnh chụp màn hình cận cảnh cho thấy các bước thay đổi thời gian chạy.
    Hình 2. Thay đổi thời gian chạy trong giao diện Colab.
  3. Trong cửa sổ phương thức, hãy chọn GPU T4 làm trình tăng tốc phần cứng. Khi bạn kết nối, Colab sẽ sử dụng một phiên bản Linux có GPU NVIDIA T4 được đính kèm.
    Ảnh chụp màn hình mô-đun Thay đổi loại thời gian chạy.
    Hình 3: Trong Trình tăng tốc phần cứng, hãy chọn GPU T4.
  4. Nhấp vào Lưu.
  5. Nhấp vào nút Connect (Kết nối) để kết nối với môi trường thời gian chạy. Sau một khoảng thời gian, nút này sẽ hiển thị dấu kiểm màu xanh lục, cùng với biểu đồ mức sử dụng RAM và ổ đĩa. Điều này cho biết rằng máy chủ đã được tạo thành công bằng phần cứng bắt buộc.

Làm tốt lắm, bạn vừa tạo một máy chủ có GPU đính kèm.

Bước 3: Cài đặt đúng trình điều khiển và phần phụ thuộc

  1. Sao chép và dán hai dòng mã sau vào ô mã đầu tiên của cuốn sổ ghi chú. Trong môi trường Colab, việc thực thi dòng lệnh được thêm dấu chấm than vào đầu.

    !git clone https://github.com/jasonmayes/headless-chrome-nvidia-t4-gpu-support.git
!cd headless-chrome-nvidia-t4-gpu-support && chmod +x scriptyMcScriptFace.sh && ./scriptyMcScriptFace.sh

    # Update, install correct drivers, and remove the old ones.
apt-get install -y vulkan-tools libnvidia-gl-525

# Verify NVIDIA drivers can see the T4 GPU and that vulkan is working correctly.
nvidia-smi
vulkaninfo --summary

# Now install latest version of Node.js
npm install -g n
n lts
node --version
npm --version

# Next install Chrome stable
curl -fsSL https://dl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/googlechrom-keyring.gpg
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrom-keyring.gpg] http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee /etc/apt/sources.list.d/google-chrome.list
sudo apt update
sudo apt install -y google-chrome-stable

# Start dbus to avoid warnings by Chrome later.
export DBUS_SESSION_BUS_ADDRESS="unix:path=/var/run/dbus/system_bus_socket"
/etc/init.d/dbus start

  2. Nhấp vào bên cạnh ô để thực thi mã.

    Ảnh chụp màn hình của một Colab mới
    Hình 4.

  3. Sau khi mã thực thi xong, hãy xác minh nvidia-smi đã in nội dung tương tự như ảnh chụp màn hình sau để xác nhận rằng bạn thực sự đã đính kèm GPU và GPU đó được nhận dạng trên máy chủ của bạn. Bạn có thể cần phải di chuyển đến phần trước trong nhật ký để xem kết quả này.

    Hình 5: Tìm kết quả bắt đầu bằng "NVIDIA-SMI".

Bước 4: Sử dụng và tự động hoá Chrome không có giao diện người dùng

  1. Nhấp vào nút Mã để thêm một ô mã mới.
  2. Sau đó, bạn có thể viết mã tuỳ chỉnh để gọi một dự án Node.js bằng các tham số ưu tiên (hoặc chỉ gọi google-chrome-stable trực tiếp trong dòng lệnh). Chúng tôi có ví dụ cho cả hai trường hợp sau.

Phần A: Sử dụng trực tiếp Chrome không có giao diện người dùng trong dòng lệnh

# Directly call Chrome to dump a PDF of WebGPU testing page
# and store it in /content/gpu.pdf
!google-chrome-stable \
--no-sandbox \
--headless=new \
--use-angle=vulkan \
--enable-features=Vulkan \
--disable-vulkan-surface \
--enable-unsafe-webgpu \
--print-to-pdf=/content/gpu.pdf https://webgpureport.org

Trong ví dụ này, chúng ta đã lưu bản chụp PDF thu được trong /content/gpu.pdf. Để xem tệp đó, hãy mở rộng nội dung . Sau đó, hãy nhấp vào để tải tệp PDF xuống máy cục bộ.

Ảnh chụp màn hình của một Colab mới
Hình 6: Xem các bước tải tệp PDF xuống trong ảnh chụp màn hình giao diện Colab này.

Phần B: Điều khiển Chrome bằng Puppeteer

Chúng tôi đã cung cấp một ví dụ tối giản sử dụng Puppeteer để kiểm soát Headless Chrome. Bạn có thể chạy ví dụ này như sau:

# Call example node.js project to perform any task you want by passing
# a URL as a parameter
!node headless-chrome-nvidia-t4-gpu-support/examples/puppeteer/jPuppet.js chrome://gpu

Trong ví dụ về jPuppet, chúng ta có thể gọi một tập lệnh Node.js để tạo ảnh chụp màn hình. Nhưng cách thức hoạt động như thế nào? Hãy xem hướng dẫn từng bước về mã Node.js trong jPuppet.js.

Phân tích mã Node jPuppet.js

Trước tiên, hãy nhập Puppeteer. Điều này cho phép bạn điều khiển Chrome từ xa bằng Node.js:

import puppeteer from 'puppeteer';

Tiếp theo, hãy kiểm tra xem đối số dòng lệnh nào đã được truyền đến ứng dụng Node. Đảm bảo rằng bạn đã đặt đối số thứ ba – đại diện cho một URL để điều hướng đến. Bạn cần kiểm tra đối số thứ ba tại đây vì hai đối số đầu tiên gọi chính Node và tập lệnh chúng ta đang chạy. Phần tử thứ 3 thực sự chứa tham số thứ nhất được truyền đến chương trình Node:

const url = process.argv[2];
if (!url) {
  throw "Please provide a URL as the first argument";
}

Bây giờ, hãy xác định một hàm không đồng bộ có tên là runWebpage(). Thao tác này sẽ tạo một đối tượng trình duyệt được định cấu hình bằng các đối số dòng lệnh để chạy tệp nhị phân Chrome theo cách chúng ta cần để WebGL và WebGPU hoạt động như mô tả trong phần Bật tính năng hỗ trợ WebGPU và WebGL.

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

Tạo một đối tượng trang trình duyệt mới mà sau này bạn có thể dùng để truy cập vào bất kỳ URL nào:

const page = await browser.newPage();

Sau đó, hãy thêm trình nghe sự kiện để theo dõi các sự kiện console.log khi trang web thực thi JavaScript. Thao tác này cho phép bạn ghi nhật ký thông báo trên dòng lệnh Node và cũng kiểm tra văn bản bảng điều khiển để tìm một cụm từ đặc biệt (trong trường hợp này là captureAndEnd) kích hoạt ảnh chụp màn hình, sau đó kết thúc quy trình trình duyệt trong Node. Điều này hữu ích cho các trang web cần thực hiện một số công việc trước khi có thể chụp ảnh màn hình và có khoảng thời gian thực thi không xác định.

page.on('console', async function(msg) {
  console.log(msg.text());
  if (msg.text() === 'captureAndEnd') {
    await page.screenshot({ path: '/content/screenshotEnd.png' });
    await browser.close();
  }
});

Cuối cùng, hãy ra lệnh cho trang truy cập vào URL đã chỉ định và chụp ảnh màn hình ban đầu khi trang đã tải.

Nếu chọn chụp ảnh màn hình chrome://gpu, bạn có thể đóng phiên trình duyệt ngay lập tức thay vì chờ bất kỳ kết quả nào trên bảng điều khiển, vì trang này không được mã của riêng bạn kiểm soát.

  await page.goto(url,  { waitUntil: 'networkidle2' });
  await page.screenshot({path: '/content/screenshot.png'});
  if (url === 'chrome://gpu') {
    await browser.close();
  }
}
runWebpage();

Sửa đổi package.json

Bạn có thể nhận thấy chúng ta đã sử dụng câu lệnh nhập ở đầu tệp jPuppet.js. package.json phải đặt giá trị loại là module, nếu không bạn sẽ nhận được lỗi mô-đun không hợp lệ.

 {
    "dependencies":  {
      "puppeteer": "*"
    },
    "name": "content",
    "version": "1.0.0",
    "main": "jPuppet.js",
    "devDependencies": {},
    "keywords": [],
    "type": "module",
    "description": "Node.js Puppeteer application to interface with headless Chrome with GPU support to capture screenshots and get console output from target webpage"
}

Chỉ vậy thôi. Việc sử dụng Puppeteer giúp bạn dễ dàng giao tiếp với Chrome theo phương thức lập trình.

Thành công

Giờ đây, chúng ta có thể xác minh rằng trình phân loại MNIST thời trang TensorFlow.js có thể nhận dạng chính xác một chiếc quần dài trong hình ảnh, với quá trình xử lý phía máy khách trong trình duyệt bằng GPU.

Bạn có thể sử dụng tính năng này cho mọi khối lượng công việc dựa trên GPU phía máy khách, từ các mô hình học máy đến đồ hoạ và kiểm thử trò chơi.

Ảnh chụp màn hình của một Colab mới
Hình 7: Chụp thành công mô hình TensorFlow.js tăng tốc GPU có khả năng nhận dạng trang phục phía máy khách trong trình duyệt theo thời gian thực

Tài nguyên

Thêm dấu sao vào kho lưu trữ GitHub để nhận thông tin cập nhật trong tương lai.