Posted inAI

Chạy AI trong trình duyệt: Hướng dẫn về Transformers.js và WebGPU

AI tutorial - IT technology blog
AI tutorial - IT technology blog

So sánh AI phía Server và AI phía Client

Hầu hết các triển khai AI đều đi theo một mô hình tốn kém và dễ dự đoán. Bạn gửi dữ liệu người dùng đến một backend Python chạy FastAPI, sau đó truy vấn một cụm GPU mạnh mẽ. Mô hình này hoạt động tốt với những gã khổng lồ như GPT-4. Tuy nhiên, nó gây ra độ trễ cao, hóa đơn hạ tầng đắt đỏ và rủi ro về quyền riêng tư khi dữ liệu nhạy cảm phải rời khỏi thiết bị của người dùng.

AI phía Client đảo ngược kiến trúc này. Thay vì đưa dữ liệu đến model, bạn đưa model đến dữ liệu. Sử dụng Transformers.js, chúng ta có thể chạy các model Hugging Face đã được tối ưu hóa trực tiếp bên trong trình duyệt. Với việc WebGPU hiện đã đạt đến độ chín muồi, các trình duyệt có thể truy cập trực tiếp vào card đồ họa cục bộ. Điều này cho phép bạn chạy các bộ phân loại văn bản, nhận dạng hình ảnh và thậm chí cả các Mô hình ngôn ngữ nhỏ (SLM) mà không tốn một xu nào cho GPU đám mây.

Gần đây, tôi đã giúp một đội ngũ chuyển tính năng phân tích cảm xúc từ AWS Lambda sang frontend. Chúng tôi đã cắt giảm chi phí API hàng tháng của họ từ 1.200 USD xuống còn 0. Quan trọng hơn, trải nghiệm người dùng mang lại cảm giác mượt mà hơn nhiều vì chúng tôi đã loại bỏ được 300ms–500ms độ trễ mạng khứ hồi.

Sự đánh đổi: Khi nào nên chạy Local

AI trên Frontend không phải là giải pháp vạn năng. Bạn cần cân nhắc giữa lợi ích và các hạn chế kỹ thuật của môi trường trình duyệt.

Ưu điểm

  • Chi phí mở rộng bằng 0: Người dùng của bạn cung cấp sức mạnh tính toán. Chi phí duy nhất của bạn là lưu trữ các tệp tĩnh như HTML, JS và trọng số của model.
  • Bảo mật ngay từ thiết kế: Dữ liệu không bao giờ rời khỏi máy khách. Đây là một lợi thế đáng kể cho các ứng dụng y tế hoặc tài chính, nơi chủ quyền dữ liệu là yêu cầu bắt buộc.
  • Khả dụng ngoại tuyến: Sau khi trình duyệt lưu model vào bộ nhớ cache trong IndexedDB, ứng dụng có thể hoạt động ở chế độ máy bay.
  • Suy luận tức thì: Việc thực thi cục bộ loại bỏ độ trễ mạng. Trên một chiếc laptop hiện đại, một model nhỏ có thể xử lý đầu vào trong chưa đầy 20ms.

Nhược điểm

  • Tải trọng ban đầu lớn: Các model AI thường rất nặng. Ngay cả một model đã được nén sâu cũng thường nặng từ 40MB đến 150MB. Điều này có thể gây khó chịu cho người dùng sử dụng gói dữ liệu di động hạn chế.
  • Sự khác biệt về phần cứng: Hiệu suất phụ thuộc vào máy của người dùng. Một chiếc MacBook Pro 2024 sẽ chạy cực nhanh, nhưng một chiếc smartphone giá rẻ 5 năm tuổi có thể gặp khó khăn trong việc duy trì giao diện phản hồi tốt.
  • Giới hạn bộ nhớ: Bạn sẽ không thể chạy Llama-3 70B trong một tab trình duyệt. Bạn bị giới hạn nghiêm ngặt bởi VRAM và bộ nhớ hệ thống mà trình duyệt cấp cho mỗi trang.

Bộ công cụ: Thiết lập đề xuất

Hãy quên các môi trường Python phức tạp đi. Một stack frontend hiện đại là tất cả những gì bạn cần. Đối với một ứng dụng sẵn sàng cho sản xuất, tôi đề xuất các công cụ sau:

  • Vite: Tiêu chuẩn cho việc đóng gói nhanh và hot module replacement.
  • Transformers.js (v3): Bản thực thi JavaScript của hệ sinh thái Hugging Face.
  • WebGPU: API hiện đại để tăng tốc phần cứng cho đồ họa và tính toán.

Thiết lập môi trường của bạn với các lệnh sau:

npm create vite@latest browser-ai -- --template react-ts
cd browser-ai
npm install @huggingface/transformers

Xây dựng ứng dụng

Hãy bắt đầu với một ví dụ thực tế. Chúng ta sẽ xây dựng một bộ phân loại hình ảnh bằng MobileNetV2. Model này nặng khoảng 13MB, rất hoàn hảo để triển khai trên web.

Ví dụ 1: Phân loại hình ảnh

Transformers.js sử dụng một lớp trừu tượng gọi là “pipeline”. Nó xử lý các công việc nặng nhọc như thay đổi kích thước hình ảnh, chuẩn hóa và giải mã các nhãn đầu ra của model.

import { pipeline } from '@huggingface/transformers';
import { useState } from 'react';

function ImageClassifier() {
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);

  const classify = async (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    
    reader.onload = async (event) => {
      setLoading(true);
      // Khởi tạo pipeline với một model thân thiện với web
      const classifier = await pipeline('image-classification', 'Xenova/mobilenetv2_1.0_224');
      
      const output = await classifier(event.target.result);
      setResult(output);
      setLoading(false);
    };
    reader.readAsDataURL(file);
  };

  return (
    <div>
      <input type="file" onChange={classify} />
      {loading && <p>Đang tải model (13MB)...</p>}
      {result && <pre>{JSON.stringify(result, null, 2)}</pre>}
    </div>
  );
}

Lần chạy đầu tiên sẽ kích hoạt việc tải xuống. Sau đó, trình duyệt sẽ lưu trữ trọng số cục bộ, cho phép các lần phân loại tiếp theo bắt đầu gần như ngay lập tức.

Ví dụ 2: Tạo văn bản với SLM

Việc tạo văn bản tiêu tốn nhiều tài nguyên hơn so với phân loại hình ảnh. Chúng ta có thể sử dụng LaMini-Flan-T5 cho các tác vụ suy luận cơ bản hoặc tóm tắt mà không cần backend.

const generateText = async (prompt) => {
  const generator = await pipeline('text2text-generation', 'Xenova/LaMini-Flan-T5-78M');
  const output = await generator(prompt, {
    max_new_tokens: 50,
    temperature: 0.7,
  });
  console.log(output[0].generated_text);
};

Tối ưu hiệu suất với WebGPU

Theo mặc định, Transformers.js có thể chuyển sang sử dụng WebAssembly (WASM). Mặc dù WASM tương thích với hầu hết mọi thứ, nhưng nó chạy trên CPU và có thể chậm đối với các tác vụ lớn. WebGPU mang lại một bước ngoặt lớn về hiệu suất.

Trong các thử nghiệm của tôi, một tác vụ tạo văn bản mất 8 giây trên WASM đã giảm xuống chỉ còn 1,5 giây khi sử dụng WebGPU trên một chiếc laptop tầm trung. Để kích hoạt tính năng này, chỉ cần chỉ định thiết bị trong cấu hình của bạn.

// Ép sử dụng WebGPU để tăng tốc phần cứng
const pipe = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english', {
  device: 'webgpu',
});

Quản lý vòng đời của Model

Một sai lầm phổ biến là tải lại model mỗi khi người dùng tương tác với giao diện. Điều này gây lãng phí bộ nhớ và gây lag. Thay vào đó, hãy sử dụng mô hình singleton để giữ model trong bộ nhớ.

// modelWorker.js
import { pipeline } from '@huggingface/transformers';

let classifierPromise = null;

export const getClassifier = () => {
  if (!classifierPromise) {
    classifierPromise = pipeline('image-classification', 'Xenova/resnet-50', {
      device: 'webgpu'
    });
  }
  return classifierPromise;
};

AI dựa trên trình duyệt đã phát triển từ một sự tò mò về mặt kỹ thuật thành một chiến lược sản xuất khả thi. Bằng cách kết hợp Transformers.js với WebGPU, bạn có thể xây dựng các ứng dụng nhanh hơn, riêng tư hơn trong khi vẫn kiểm soát được ngân sách đám mây của mình. Hãy bắt đầu bằng cách chuyển các tác vụ đơn giản như phân loại, sau đó thử nghiệm với các model tạo nội dung lớn hơn khi bạn đã quen với vòng đời của chúng.

Share:
Tags: