Testowanie internetowego modelu AI w Google Colab

Stworzenie spójnego środowiska testowego z GPU może być trudniejsze, niż się spodziewasz. Poniżej znajdziesz kroki pozwalające przetestować po stronie klienta oparte na przeglądarce modele AI w prawdziwych środowiskach przeglądarek, a także aby były skalowalne, zautomatyzowane i zgodne ze znanymi ustandaryzowanymi konfiguracjami sprzętowymi.

W tym przypadku przeglądarka to prawdziwa przeglądarka Chrome z obsługą sprzętu (w przeciwieństwie do emulacji programowej).

Niezależnie od tego, czy zajmujesz się programowaniem AI w przeglądarce, grami internetowymi lub grafiką, czy też interesuje Cię testowanie modeli internetowych AI, ten przewodnik jest dla Ciebie.

Krok 1. Utwórz nowy notatnik Google Colab

1. Aby utworzyć nowy notatnik Colab, otwórz stronę colab.new. Ilustracja powinna wyglądać podobnie do tej na ilustracji 1. 2. Postępuj zgodnie z instrukcjami, aby zalogować się na konto Google.

Krok 2. Połącz się z serwerem obsługującym GPU T4

1. W prawym górnym rogu notatnika kliknij Połącz arrow_drop_down.
2. Wybierz Zmień typ środowiska wykonawczego:

   

3. W oknie modalnym wybierz GPU T4 jako akcelerator sprzętowy. Gdy się połączysz, Colab będzie używać instancji z systemem Linux z podłączonym GPU NVIDIA T4.

   

4. Kliknij Zapisz.
5. Kliknij przycisk Connect (Połącz), aby połączyć się ze środowiskiem wykonawczym. Po pewnym czasie na przycisku pojawi się zielony znacznik wyboru oraz wykresy dotyczące wykorzystania pamięci RAM i dysku. Oznacza to, że serwer został utworzony z wymaganym sprzętem.

Świetnie. Właśnie udało Ci się utworzyć serwer z podłączonym GPU.

Krok 3. Zainstaluj odpowiednie sterowniki i zależności

1. Skopiuj następujące 2 wiersze kodu i wklej je do pierwszej komórki kodu notatnika. W środowisku Colab wykonanie wiersza poleceń jest poprzedzone wykrzyknikiem.

   !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
   

   • Sprawdź skrypt na GitHubie, aby zobaczyć nieprzetworzony kod wiersza poleceń wykonywany przez ten skrypt.

   # 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. Aby wykonać kod, kliknij play_circle obok komórki.

   

3. Po zakończeniu wykonywania kodu sprawdź, czy nvidia-smi wyświetlił(a) coś podobnego do poniższego zrzutu ekranu, aby potwierdzić, że masz podłączony GPU i jest rozpoznawany na serwerze. Aby wyświetlić te dane wyjściowe, może być konieczne przewinięcie logów do wcześniejszego momentu.

   

Krok 4. Używaj Chrome bez interfejsu graficznego i zautomatyzuj go

1. Kliknij przycisk add Kod, aby dodać nową komórkę z kodem.
2. Następnie możesz napisać własny kod, aby wywołać projekt Node.js z preferowanymi parametrami (lub po prostu wywołać funkcję google-chrome-stable bezpośrednio w wierszu poleceń). Poniżej znajdziesz przykłady obu.

Część A. Używanie Chrome bez interfejsu graficznego bezpośrednio w wierszu poleceń

# 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

W tym przykładzie wynikowy zapis PDF zapisał w usłudze /content/gpu.pdf. Aby wyświetlić ten plik, rozwiń treść folder. Następnie kliknij more_vert, aby pobrać plik PDF na komputer lokalny.

Część B: przejmij kontrolę nad Chrome przy pomocy Puppeteer

Przygotowaliśmy minimalistyczny przykład, w którym aplikacja Puppeteer do sterowania Chrome bez interfejsu graficznego działa w taki sposób:

# 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

W przykładzie jPuppet możemy wywołać skrypt Node.js, aby utworzyć zrzut ekranu. Ale jak to działa? Zapoznaj się z tym szczegółowym omówieniem kodu Node.js w pliku jPuppet.js.

Podział kodu węzła jPuppet.js

Najpierw zaimportuj plik Puppeteer. Pozwoli Ci to zdalnie sterować Chrome przy użyciu środowiska Node.js:

import puppeteer from 'puppeteer';

Następnie sprawdź, jakie argumenty wiersza poleceń zostały przekazane do aplikacji Node. Upewnij się, że ustawiony jest trzeci argument, czyli adres URL, do którego należy przejść. Musisz zbadać 3 argument, ponieważ pierwsze 2 argumenty wywołują sam węzeł i uruchamiany skrypt. Trzeci element zawiera tak naprawdę pierwszy parametr przekazany do programu węzłów:

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

Teraz zdefiniuj funkcję asynchroniczną o nazwie runWebpage(). Spowoduje to utworzenie obiektu przeglądarki skonfigurowanego za pomocą argumentów wiersza poleceń uruchamiającego plik binarny Chrome w sposób, który wymaga do działania WebGL i WebGPU zgodnie z opisem w sekcji Włączanie obsługi WebGPU i 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'
      ]
  });

Utwórz nowy obiekt strony przeglądarki, którego można później użyć do wejścia na dowolny adres URL:

const page = await browser.newPage();

Następnie dodaj detektor zdarzeń, który będzie nasłuchiwał zdarzeń console.log, gdy strona wykona kod JavaScript. Dzięki temu możesz rejestrować komunikaty w wierszu poleceń węzła, a także sprawdzać w tekście konsoli tekst w konsoli (w tym przypadku captureAndEnd), który powoduje zrzut ekranu, a następnie kończy proces przeglądarki w węźle. Jest to przydatne w przypadku stron internetowych, które wymagają trochę pracy, zanim można zrobić zrzut ekranu, i których czas wykonania jest nieokreślony.

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

Na koniec wydaj polecenie strony prowadzącej do podanego adresu URL i zrób początkowy zrzut ekranu po wczytaniu strony.

Jeśli zdecydujesz się zrobić zrzut ekranu z elementem chrome://gpu, możesz od razu zamknąć sesję przeglądarki, zamiast czekać na wyniki konsoli, ponieważ strona nie jest kontrolowana przez Twój własny kod.

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

Modyfikowanie pliku package.json

Być może wiesz, że na początku pliku jPuppet.js użyliśmy instrukcji importowania. package.json musi mieć ustawione wartości typu module. W przeciwnym razie pojawi się komunikat o błędzie informujący o tym, że moduł jest nieprawidłowy.

 {
    "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"
}

To wszystko. Puppeteer ułatwia automatyczne interfejsy z Chrome.

Gotowe

Możemy teraz sprawdzić, czy klasyfikator mody TensorFlow.js Fashion MNIST może prawidłowo rozpoznawać parę spodni na zdjęciach, wykorzystując przetwarzanie po stronie klienta w przeglądarce przy użyciu GPU.

Możesz go używać w przypadku dowolnych zadań opartych na GPU po stronie klienta – od modeli systemów uczących się po testowanie grafiki i gier.

Zasoby

Dodaj gwiazdkę w repozytorium GitHub, aby otrzymywać przyszłe aktualizacje.