Bỏ qua tới nội dung chính
Quay lại tin tức

Xử lý ngôn ngữ tự nhiên (NLP) thực tế trên trình duyệt với Transformers.js

KDnuggets· Shittu Olumide· 29/5/2026general

Hướng dẫn này đề cập đến ba tác vụ xử lý ngôn ngữ tự nhiên (NLP): phân loại văn bản, gán nhãn zero-shot và trả lời câu hỏi bằng cách sử dụng API `pipeline()` của Transformers.js.

Thực hành Xử lý ngôn ngữ tự nhiên (NLP) trên trình duyệt với Transformers.js - KDnuggets # Giới thiệu Trong một thời gian dài, việc chạy các mô hình transformer đòi hỏi phải duy trì một máy chủ Python, chi trả cho thời gian sử dụng GPU và định tuyến mọi yêu cầu suy luận thông qua một API. Người dùng nhập nội dung, nội dung đó rời khỏi máy của họ, chạm đến cơ sở hạ tầng của bạn và trở lại dưới dạng một dự đoán. Kiến trúc đó có ý nghĩa khi các mô hình quá lớn để chạy ở bất kỳ nơi nào khác. Hiện tại, đó không còn là lựa chọn duy nhất. Transformers.js thay đổi phương trình. Nó chạy các mô hình NLP hiện đại trực tiếp trên trình duyệt, trên thiết bị của người dùng, không liên quan đến máy chủ. Các mô hình tải xuống một lần, lưu vào bộ nhớ đệm cục bộ và chạy ngoại tuyến từ thời điểm đó trở đi. Bản dịch từ Python sang JavaScript gần như là một-một: // JavaScript -- gần như giống hệt import { pipeline } from '@huggingface/transformers'; const classifier = await pipeline('sentiment-analysis'); const result = await classifier('I love transformers!'); Hướng dẫn này bao gồm ba tác vụ NLP: phân loại văn bản, gán nhãn zero-shot và trả lời câu hỏi bằng cách sử dụng API pipeline() của Transformers.js. Đối với mỗi tác vụ, bạn sẽ thấy cách khởi tạo pipeline, cấu trúc đầu ra trông như thế nào và cách diễn giải nó, cùng với một ví dụ HTML hoạt động mà bạn có thể mở trực tiếp trong trình duyệt. Hướng dẫn kết thúc với một ứng dụng định tuyến phiếu hỗ trợ hoàn chỉnh kết hợp cả ba pipeline thành một công cụ thực tế. Mọi ví dụ mã trong bài viết này đều sử dụng đường dẫn nhập CDN, vì vậy không cần bước xây dựng. Mở một trình soạn thảo văn bản, dán mã và chạy nó. # Transformers.js thực sự là gì Thư viện này được thiết kế để có chức năng tương đương với thư viện transformers Python của Hugging Face, nghĩa là cùng các mô hình được huấn luyện trước, cùng tên tác vụ và cùng API pipeline chỉ trong JavaScript. Bên dưới, cầu nối giúp điều này khả thi là ONNX Runtime. Các mô hình được huấn luyện trong PyTorch, TensorFlow hoặc JAX được chuyển đổi sang định dạng ONNX bằng cách sử dụng Hugging Face Optimum. ONNX Runtime sau đó thực thi các mô hình này trong trình duyệt. Theo mặc định, nó chạy trên CPU thông qua WebAssembly (WASM), hoạt động trong mọi trình duyệt hiện đại. Nếu bạn muốn tăng tốc GPU, việc đặt device: 'webgpu' sẽ định tuyến tính toán thông qua API WebGPU của trình duyệt nhanh hơn đáng kể khi có sẵn, mặc dù vẫn đang trong giai đoạn thử nghiệm ở một số môi trường. Lưu trữ mô hình (Model caching). Lần đầu tiên một pipeline chạy, các trọng số mô hình sẽ được tải xuống từ Hugging Face Hub và lưu trữ vào IndexedDB của trình duyệt trong ngữ cảnh trình duyệt, hoặc hệ thống tệp trong Node.js. Thử nghiệm của nhà phát triển cho thấy pipeline phân tích cảm xúc tải xuống khoảng 111 MB trong lần tải đầu tiên. Các lần chạy tiếp theo sẽ bỏ qua hoàn toàn việc tải xuống và tải từ bộ nhớ đệm. Điều này có nghĩa là phiên người dùng đầu tiên sẽ có chi phí băng thông; mọi phiên sau đó đều nhanh chóng và có thể hoạt động ngoại tuyến. Lượng tử hóa (Quantization). Tùy chọn dtype kiểm soát độ chính xác của mô hình. q8 (lượng tử hóa 8-bit) là mặc định của WASM; nó mang lại sự cân bằng tốt giữa kích thước và độ chính xác. q4 giảm kích thước tệp xuống khoảng một nửa với mức mất độ chính xác từ 1–3% trên hầu hết các tác vụ, đây là sự đánh đổi phù hợp cho thiết bị di động hoặc kết nối chậm. Đối với việc sử dụng phía máy chủ Node.js, fp32 cung cấp độ chính xác đầy đủ mà không bị giới hạn kích thước. // Thực thi WASM mặc định -- hoạt động ở mọi nơi const pipe = await pipeline('sentiment-analysis'); // WebGPU để suy luận nhanh hơn trên phần cứng tương thích const pipe = await pipeline('sentiment-analysis', null, { device: 'webgpu' }); // Lượng tử hóa 4-bit để tải xuống mô hình nhỏ hơn const pipe = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english', { dtype: 'q4' } ); # API pipeline() Hàm pipeline là toàn bộ giao diện công khai cho hầu hết các trường hợp sử dụng. Nó gói gọn ba thứ: một mô hình được huấn luyện trước, một bộ mã hóa (tokenizer) và logic xử lý hậu kỳ, thành một đối tượng có thể gọi duy nhất. Người dùng không trực tiếp chạm vào bộ mã hóa hoặc trọng số mô hình. Người dùng gọi pipeline với văn bản và nhận lại đầu ra có cấu trúc. Chữ ký có ba phần: const pipe = await pipeline(task, model?, options?); const result = await pipe(input, inferenceOptions?); task là một định danh chuỗi cho thư viện biết loại mô hình nào cần tải và cách xử lý đầu vào và đầu ra. model là tùy chọn; nếu bỏ qua, thư viện sẽ tải mô hình mặc định cho tác vụ đó. Nếu chỉ định một ID mô hình (như 'Xenova/distilbert-base-uncased-finetuned-sst-2-english'), mô hình đó sẽ được tải từ Hub. options là nơi người dùng đặt device, dtype và progress_callback. Cả hai bước đều là bất đồng bộ (async). pipeline() tải xuống và nạp mô hình vào bộ nhớ. Đây là phần chậm trong lần chạy đầu tiên. Lệnh gọi pipe thường nhanh sau khi mô hình được tải. Cả hai đều trả về Promises, có nghĩa là giao diện người dùng của người dùng cần xử lý trạng thái tải. Một progress_callback cho phép người dùng theo dõi quá trình tải xuống và hiển thị tiến độ cho người dùng: // progress_callback kích hoạt trong quá trình tải xuống mô hình với các cập nhật trạng thái // Đây là UX quan trọng -- người dùng cần biết điều gì đó đang xảy ra const pipe = await pipeline( 'sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english', { dtype: 'q8', progress_callback: (progress) => { // progress.status có thể là: 'initiate', 'download', 'progress', 'done' if (progress.status === 'progress') { const pct

Nguồn tin: KDnuggets — Tác giả: Shittu Olumide. Bản dịch tiếng Việt do AI thực hiện, có thể có sai sót.