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ột 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ử các mô hình AI (trí tuệ nhân tạo) dựa trên trình duyệt, phía máy khách trong môi trường trình duyệt thực tế, đồng thời có thể mở rộng, tự động hoá và trong quy trình thiết lập phần cứng được 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, trái ngược với quy trình mô phỏng phần mềm.

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

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

1. Hãy truy cập vào colab.new để tạo một sổ tay Colab mới. Mã sẽ giống 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: Sổ tay Colab mới.

Bước 2: Kết nối với máy chủ hỗ trợ 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ụ, hãy chọn T4 GPU 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ó đính kèm GPU NVIDIA T4.
    Ảnh chụp màn hình mô-đun Thay đổi loại thời gian chạy.
    Hình 3: Trong phần Hardware tăng tốc, hãy chọn T4 GPU.
  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 của bạn. Sau một khoảng thời gian, nút này sẽ hiện dấu kiểm màu xanh lục, cùng với biểu đồ mức sử dụng ổ đĩa và RAM. Mã này cho biết một máy chủ đã được tạo thành công với phần cứng cần thiết của bạn.

Tốt lắm, bạn vừa tạo một máy chủ có gắn GPU.

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 2 dòng mã sau đây vào ô chứa mã đầu tiên của sổ tay. Trong môi trường Colab, thao tác thực thi dòng lệnh được thêm một dấu chấm than vào trước.

    !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 ra nội dung tương tự như ảnh chụp màn hình sau đây để xác nhận rằng bạn thực sự có GPU được đính kèm và nó được nhận dạng trên máy chủ của bạn. Bạn có thể cần phải cuộn đến trước đó trong nhật ký để xem kết quả này.

    Hình 5: Tìm đầu ra 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 ô chứa mã mới.
  2. Sau đó, bạn có thể viết mã tuỳ chỉnh để gọi dự án Node.js bằng các tham số ưu tiên (hoặc chỉ cần gọi google-chrome-stable trực tiếp trong dòng lệnh). Chúng tôi có ví dụ cho cả hai cách sau.

Phần A: Sử dụng Chrome không giao diện người dùng ngay 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 trữ ảnh chụp PDF thu được trong /content/gpu.pdf. Để xem tệp đó, hãy mở rộng nội dung . Sau đó, 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 này của giao diện Colab.

Phần B: Lệnh 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 Chrome không có giao diện người dùng. Ví dụ này có thể chạ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 tập lệnh Node.js để tạo ảnh chụp màn hình. Nhưng cơ chế này hoạt động như thế nào? Hãy xem hướng dẫn về mã Node.js trong jPuppet.js.

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

Trước tiên, hãy nhập Puppeteer. Việc 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 Nút. Đảm bảo đối số thứ ba đã được đặt – đại diện cho URL cần điều hướng đến. Bạn cần kiểm tra đối số thứ ba ở đây vì hai đối số đầu tiên gọi chính Nút và tập lệnh mà chúng ta đang chạy. Phần tử thứ 3 thực sự chứa tham số thứ 1 được truyền đến chương trình Nút:

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ộ 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 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ể sử dụng để truy cập bất kỳ URL nào:

const page = await browser.newPage();

Sau đó, hãy thêm một trình nghe sự kiện để theo dõi các sự kiện console.log khi trang web thực thi JavaScript. Điều này cho phép bạn ghi nhật ký thông điệp trên dòng lệnh của Nút, đồng thời 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 và sau đó kết thúc quá trình của trình duyệt trong Nút. Đ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 được chỉ định và chụp ảnh màn hình ban đầu khi trang đã tải.

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

  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 tôi đã sử dụng câu lệnh nhập ở đầu tệp jPuppet.js. package.json của bạn phải đặt giá trị loại là module, nếu không bạn sẽ gặp lỗi cho biết 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"
}

Vậy là xong. 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 hơn.

Thành công

Giờ đây, chúng ta có thể xác minh rằng trình phân loại TensorFlow.js Fashion MNIST có thể nhận dạng chính xác một cặp quần trong hình ảnh, nhờ tính năng 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 tải công việc dựa trên GPU phía máy khách, từ mô hình học máy cho đến kiểm thử đồ hoạ và trò chơi.

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

Tài nguyên

Thêm dấu sao trên kho lưu trữ GitHub để nhận các bản cập nhật trong tương lai.