Transformers.js چیست؟ آموزش اجرای مدل‌های هوش مصنوعی در مرورگر

زمان مطالعه: 11 دقیقه

هوش مصنوعی روزبه‌روز به ابزارهای روزمره ما نزدیک‌تر می‌شود؛ از مدل‌های زبانی گرفته تا سیستم‌های پردازش تصویر و صدا. اما اجرای این مدل‌ها معمولا به سرورهای قدرتمند، GPUهای گران‌قیمت و زیرساخت‌های پیچیده نیاز دارد—چیزی که برای بسیاری از توسعه‌دهندگان یا پروژه‌های کوچک به‌صرفه نیست. اینجاست که Transformers.js وارد میدان می‌شود؛ کتابخانه‌ای از سوی Hugging Face که امکان اجرای مدل‌های پیشرفته را مستقیما در مرورگر یا محیط Node.js فراهم می‌کند، بدون نیاز به سرور.

در این مقاله، گام‌به‌گام یاد می‌گیریم ترنسفورمر چیست و چرا این‌قدر مهم است، سپس با معماری و قابلیت‌های Transformers.js آشنا می‌شویم و در نهایت، با مثال‌های عملی، یاد می‌گیریم چطور مدل‌های متنی، تصویری و صوتی را تنها با چند خط کد اجرا کنیم. اگر می‌خواهید بدون زیرساخت پیچیده، مدل‌های هوش مصنوعی را روی سیستم کاربر اجرا کنید، این آموزش نقطه شروع مناسب شماست.

ترنسفورمر چیست و چرا استفاده می‌شود؟

معماری ترنسفورمر (Transformer) یکی از مهم‌ترین پیشرفت‌های تاریخ یادگیری عمیق است؛ مدلی که در سال ۲۰۱۷ با مقاله معروف Attention Is All You Need معرفی شد و به‌سرعت تبدیل به استاندارد صنعت برای پردازش متن، تصویر، صوت و حتی وظایف چندوجهی شد. پیش از ترنسفورمر، بیشتر مدل‌ها به شبکه‌های RNN و LSTM وابسته بودند—مدل‌هایی که در کار با دنباله‌های طولانی، سرعت پردازش و موازی‌سازی محدودیت داشتند. اما ترنسفورمر با کنار گذاشتن وابستگی مرحله‌به‌مرحله و استفاده از سازوکار Self-Attention توانست هم سریع‌تر باشد، هم دقیق‌تر و هم با داده‌های بسیار بزرگ مقیاس‌پذیر شود.

قلب ترنسفورمر درک روابط میان بخش‌های مختلف داده است؛ یعنی مدل می‌تواند بفهمد هر کلمه، تصویر یا بخش صوتی چطور بر کل محتوای ورودی اثر می‌گذارد. همین ویژگی باعث شده مدل‌هایی مانند BERT، GPT، T5، CLIP، ViT، Whisper و ده‌ها معماری پرکاربرد دیگر شکل بگیرند. بنابراین هر زمان از مدل‌های مدرن هوش مصنوعی استفاده می‌کنید، چه برای تولید متن، چه تحلیل تصویر، درواقع در حال استفاده از نوعی ترنسفورمر هستید.

Transformers.js چیست؟

ترنسفورمر جی اس

Transformers.js نسخه‌ی جاوااسکریپت کتابخانه‌ی مشهور Transformers از Hugging Face است که برای اجرای مدل‌های هوش مصنوعی به‌صورت کامل در مرورگر یا محیط Node.js طراحی شده است. این یعنی می‌توانید مدل‌های متنی، تصویری و صوتی را بدون نیاز به هیچ سرور یا GPU ابری، مستقیما روی دستگاه کاربر اجرا کنید—رویکردی که هم هزینه‌ها را به‌طور چشمگیری کاهش می‌دهد و هم حریم خصوصی را افزایش می‌دهد، چون داده‌ها از سیستم کاربر خارج نمی‌شوند.

این کتابخانه با تکیه بر ONNX Runtime و پشتیبانی از WebGPU و WebAssembly (WASM)، امکان اجرای سریع و بهینه‌ی مدل‌ها را روی سخت‌افزارهای مختلف فراهم می‌کند. در نتیجه، توسعه‌دهندگان می‌توانند مدل‌های قدرتمند Hugging Face را تنها با چند خط کد بارگذاری کرده و روی مرورگرهای مدرن، لپ‌تاپ‌ها و حتی دستگاه‌های ضعیف‌تر اجرا کنند.

Transformer.js چه کاربردهایی دارد؟

Transformers.js تنها یک کتابخانه آزمایشی نیست؛ بلکه ابزار قدرتمندی است که می‌تواند در پروژه‌های واقعی و متنوع استفاده شود. با شناخت قابلیت‌های آن، توسعه‌دهندگان می‌توانند تسک‌هایی مانند تحلیل متن، ترجمه، پاسخ به سوالات یا تبدیل متن به گفتار را مستقیما در مرورگر یا Node.js اجرا کنند.

افزونه‌های مرورگر: برای پردازش متن، ترجمه یا تحلیل محتوا بدون نیاز به سرور.
چت‌بات‌های کاملا محلی: اجرای مکالمات هوشمند در مرورگر کاربران بدون ارسال داده‌ها به سرور.
تحلیل متن بدون backend: استخراج اطلاعات، دسته‌بندی یا خلاصه‌سازی متن‌ها مستقیما در مرورگر.
اپلیکیشن‌های آموزشی و تحقیقاتی: استفاده در محیط‌های آموزش آنلاین یا پروژه‌های تحقیقاتی سبک و سریع.

معماری و نحوه کار Transformers.js

برای اینکه مدل‌های هوش مصنوعی بتوانند مستقیما روی مرورگر اجرا شوند، Transformers.js یک معماری ماژولار و بهینه ارائه می‌دهد که هم ساده است و هم قابل‌اعتماد. این بخش توضیح می‌دهد این کتابخانه چگونه در پشت‌صحنه کار می‌کند و چه ابزارهایی در اختیار توسعه‌دهنده قرار می‌دهد.

Pipeline API

Pipeline API ساده‌ترین و سریع‌ترین روش استفاده از Transformers.js است.

با این روش، تنها با چند خط کد می‌توانید یک مدل را بارگذاری کرده و از آن خروجی بگیرید، بدون نیاز به درگیر شدن با معماری داخلی مدل یا جزئیات پردازش ورودی.

مثلا برای متن‌کاوی یا تولید متن:

import { pipeline } from “@huggingface/transformers”;

const generator = await pipeline(“text-generation”, “Xenova/gpt2”);
const result = await generator(“Hello AI!”);

import { pipeline } from “@huggingface/transformers”;

const generator = await pipeline(“text-generation”, “Xenova/gpt2”);

const result = await generator(“Hello AI!”);

Pipeline به‌صورت خودکار:

مدل مناسب را دانلود و کش می‌کند
توکنایزر را بارگذاری می‌کند
محاسبه را انجام می‌دهد
خروجی نهایی را برمی‌گرداند

این API برای اکثر کاربردهای آموزشی، نمونه‌سازی سریع و پروژه‌های سبک ایدئال است.

Backendها: WebGPU و WASM

Transformers.js از دو بک‌اند اصلی برای اجرای مدل‌ها استفاده می‌کند:

۱) WebGPU

سریع‌ترین و مدرن‌ترین روش اجرا
از کارت گرافیک سیستم کاربر برای شتاب‌دهی پردازش بهره می‌گیرد
مناسب برای مدل‌های بزرگ‌تر
در مرورگرهای جدید (Chrome / Edge) پشتیبانی می‌شود

۲) WebAssembly (WASM)

برای دستگاه‌ها و مرورگرهایی که WebGPU ندارند
اجرای پایدار و قابل پیش‌بینی
بدون نیاز به GPU
مناسب برای مدل‌های سبک، موبایل و پروژه‌های عمومی

Transformers.js به‌صورت خودکار بهترین بک‌اند را انتخاب می‌کند، اما امکان انتخاب دستی هم وجود دارد.

بارگذاری مدل از Hugging Face Hub

مزیت مهم کتابخانه این است که مدل‌ها مستقیما از Hugging Face Hub بارگذاری می‌شوند.

فقط کافی است نام مدل را مشخص کنید:

const classifier = await pipeline(
  “sentiment-analysis”,
  “Xenova/distilbert-base-uncased-finetuned-sst-2-english”
);

const classifier = await pipeline(

“sentiment-analysis”,

“Xenova/distilbert-base-uncased-finetuned-sst-2-english”

);

مزایا:

نیاز نیست مدل را خودتان دانلود و هاست کنید
کش محلی (local cache) باعث افزایش سرعت اجرای دفعات بعدی می‌شود
هزاران مدل آماده در دسترس است (متن، تصویر، صوت، چندوجهی)

Quantization و مدل‌های سبک

برای اجرای سریع‌تر مدل‌ها خصوصا در مرورگر، Transformers.js از تکنیک‌های Quantization پشتیبانی می‌کند:

کاهش دقت وزن‌های مدل از FP32 به FP16 یا INT8
کاهش حجم مدل (گاهی تا ۴ برابر کمتر)
افزایش سرعت inference
کاهش مصرف حافظه و GPU

در نتیجه می‌توانید مدل‌هایی مانند BERT، GPT2 یا ViT را در مرورگر اجرا کنید بدون اینکه عملکرد به‌طور جدی افت کند.

از چه مدل‌هایی در Transformer.js پشتیبانی می‌شود؟

مدل هایی که در Transformer.js پشتیبانی می‌شوند

Transformers.js مجموعه‌ای متنوع از مدل‌ها را در اختیار شما قرار می‌دهد که می‌توانند انواع مختلف داده‌، از متن گرفته تا تصویر، صوت و ترکیب مولتی مودال را در محیط جاوااسکریپت پردازش کنند. این مدل‌ها متناسب با مرورگر و Node.js بهینه‌سازی شده‌اند و همین باعث می‌شود بتوانید قابلیت‌های پیشرفته هوش مصنوعی را بدون نیاز به زیرساخت سنگین، مستقیما در پروژه‌های وب یا اپلیکیشن‌های سمت کلاینت استفاده کنید.

در ادامه، مهم‌ترین تسک‌ها و مدل‌های قابل استفاده را می‌بینید:

۱. پردازش متن (NLP)

Transformers.js از طیف گسترده‌ای از تسک‌های متنی پشتیبانی می‌کند، از جمله:

تحلیل احساسات (Sentiment Analysis)
پاسخ‌به‌پرسش (Question Answering)
تولید متن (Text Generation) مانند GPT2 و دیگر مدل‌های اتورگرسیو
ترجمه ماشینی (Translation) با خانواده مدل‌های Marian و M2M100
خلاصه‌سازی متن (Summarization) با مدل‌هایی مثل BART و T5
تشخیص نهادهای نامدار (NER)
طبقه‌بندی متن (Text Classification)
مدلسازی زبان (Language Modeling)

این تسک‌ها برای ساخت چت‌بات‌ها، ابزارهای تحلیلی، مترجم‌های درون‌مرورگری و اپلیکیشن‌های آموزشی مناسب هستند.

۲. پردازش تصویر (Computer Vision)

Transformers.js قابلیت اجرای مدل‌های بینایی کامپیوتر در مرورگر را هم دارد:

طبقه‌بندی تصویر (Image Classification) با مدل‌هایی مانند ViT و ConvNeXT
تشخیص اشیا (Object Detection) با مدل‌هایی مانند DETR
بخش‌بندی تصویر (Image Segmentation) شامل Semantic و Instance Segmentation
تولید embeddingهای تصویری

این موارد برای پروژه‌هایی مثل تشخیص محصول، تحلیل عکس، اپلیکیشن‌های PhotoAI و ابزارهای بر پایه وب ایدئال هستند.

پیشنهاد مطالعه: درک تفاوت میان شناسایی، تشخیص و بخش‌بندی اشیا در پردازش تصویر

۳. پردازش صوت

کتابخانه از مدل‌های صوتی سبک نیز پشتیبانی می‌کند، مانند:

تبدیل گفتار به متن (ASR) با نسخه‌های ONNX شده‌ی Whisper
تولید صوت (TTS) با مدل‌های سبک‌تر سازگار با مرورگر
استخراج ویژگی‌های صوتی

استفاده از ASR در مرورگر یک مزیت مهم دارد: فایل صوتی هیچ‌وقت به سرور فرستاده نمی‌شود.

۴. مدل‌های چندمودالی (Multimodal)

Transformers.js از مدل‌های چندوجهی که با داده‌های مختلف کار می‌کنند نیز پشتیبانی می‌کند:

CLIP برای مقایسه و تطبیق متن و تصویر
مدل‌های تولید embedding برای جستجو، رده‌بندی و کاربردهای Semantic Search
مدل‌های تطبیق تصویر–متن

چندمودالی‌ها برای ابزارهای جستجوی تصویری، سیستم‌های توصیه‌گر و اپلیکیشن‌های تعاملی بسیار کاربرد دارند.

پیشنهاد مطالعه: راهنمای کامل موتور توصیه‌گر: انواع، مزایا، چالش‌ها و کاربردها

نصب و راه‌اندازی قدم‌به‌قدم Transformers.js

این راهنما هم برای محیط Node.js و هم برای مرورگر نوشته شده — از نصب اولیه تا تنظیم WebGPU، کش مدل‌ها و نکات عملی برای پروژه‌های واقعی.

گام اول: پیش‌نیازها (نرم‌افزاری و سخت‌افزاری)

Node.js: حداقل نسخه‌ی LTS (مثلا 16+ یا 18+) — بعضی توابع در نسخه‌های قدیمی کار نمی‌کنند.
مرورگرهای مدرن: اگر می‌خواهید از WebGPU استفاده کنید باید Chrome/Edge/Firefox Nightly یا Safari نسخه‌ای که WebGPU را پشتیبانی می‌کند داشته باشید. در غیر این صورت موتور بازگشتی WASM استفاده خواهد شد.
اتصال اینترنت برای دانلود مدل‌ها از Hugging Face Hub (مگر اینکه مدل را آفلاین داشته باشید).
برای اجرای مدل‌های بزرگ در مرورگر، کارت گرافیک و حافظه‌ی مناسب مفید است؛ اما تکنیک‌هایی مثل quantization کمک می‌کند روی دستگاه‌های ضعیف‌تر هم اجرا شود.

گام دوم: نصب محلی با npm (Node.js)

در فولدر پروژه دستور زیر را اجرا کنید:

npm init -y

npm install @huggingface/transformers

npm init –y

npm install @huggingface/transformers

(اگر بسته‌ی دیگری را مستندات رسمی معرفی کرده باشد، نام پکیج را از docs مرجع چک کنید — اما معمولا نصب از طریق npm انجام می‌شود.)

مثال ساده در Node.js

// server.js
import { pipeline } from “@huggingface/transformers”;

async function main() {
  const sentiment = await pipeline(“sentiment-analysis”, “Xenova/distilbert-base-uncased-finetuned-sst-2-english”);
  const out = await sentiment(“I love using Transformers.js in the browser!”);
  console.log(out);
}

main();

// server.js

import { pipeline } from “@huggingface/transformers”;

async function main() {

const sentiment = await pipeline(“sentiment-analysis”, “Xenova/distilbert-base-uncased-finetuned-sst-2-english”);

const out = await sentiment(“I love using Transformers.js in the browser!”);

console.log(out);

}

main();

اجرای کد:

node –experimental-fetch server.js   # بعضی runtimeها به flag نیاز دارند

1	node —experimental–fetch server.js # بعضی runtimeها به flag نیاز دارند

گام سوم: استفاده در مرورگر (via bundler یا CDN)

الف) با bundler (Vite / Webpack / Parcel / esbuild)

بسته را با npm install بیاورید و در کد فرانت‌اند import کنید:

import { pipeline } from “@huggingface/transformers”;

(async () => {
  const gen = await pipeline(“text-generation”, “Xenova/gpt2”);
  const out = await gen(“سلام، امروز چه کار کنیم؟”);
  console.log(out);
})();

import { pipeline } from “@huggingface/transformers”;

(async () => {

const gen = await pipeline(“text-generation”, “Xenova/gpt2”);

const out = await gen(“سلام، امروز چه کار کنیم؟”);

console.log(out);

})();

توجه کنید bundler شما باید تنظیمات برای بارگذاری فایل‌های WASM و assetها (weight files) داشته باشد — معمولا Vite/webpack تنظیم‌پذیر هستند. مستندات bundler را برای static assets چک کنید (public dir یا copy plugin).

ب) بدون bundler — از CDN (نمونه کلی)

می‌توانید از CDN استفاده کنید (آدرس دقیق CDN را از docs بگیرید):

<script type=”module”>
  import { pipeline } from “https://cdn.jsdelivr.net/npm/@huggingface/transformers/dist/transformers.min.js”;

  (async () => {
    const clf = await pipeline(“sentiment-analysis”, “Xenova/distilbert-base-uncased-finetuned-sst-2-english”);
    console.log(await clf(“عالیه!”));
  })();
</script>

import { pipeline } from “https://cdn.jsdelivr.net/npm/@huggingface/transformers/dist/transformers.min.js”;

(async () => {

const clf = await pipeline(“sentiment-analysis”, “Xenova/distilbert-base-uncased-finetuned-sst-2-english”);

console.log(await clf(“عالیه!”));

})();

</script>

حتما آدرس CDN و نسخه‌ی دقیق را از مستندات رسمی بردارید تا فایل‌های مرتبط (WASM/weights) درست لود شوند.

گام چهارم: فعال‌سازی و استفاده از WebGPU (در مرورگر)

برای بهتر شدن سرعت و بهره‌وری از GPU، WebGPU را فعال کنید و قبل از استفاده بررسی کنید:

if (navigator.gpu) {
  console.log(“WebGPU supported — Transformers.js will try to use it”);
} else {
  console.log(“WebGPU not available — using WASM fallback”);
}

if (navigator.gpu) {

console.log(“WebGPU supported — Transformers.js will try to use it”);

} else {

console.log(“WebGPU not available — using WASM fallback”);

}

اگر WebGPU در مرورگر فعال نیست، یا کاربر مرورگر پشتیبانی‌نشده دارد، Transformers.js خودکار به WASM برمی‌گردد.

گام پنجم: کش و محل ذخیره‌سازی مدل‌ها (cache)

Transformers.js معمولا مدل‌ها را در کش محلی ذخیره می‌کند (IndexedDB در مرورگر یا پوشه‌ی node_modules/.cache در node) تا در دفعات بعدی نیازی به دانلود مجدد نباشد.

نکته عملی: هنگام توسعه، اگر نمی‌خواهید هر بار مدل دانلود شود، preload/پیش‌دانلود کنید یا بسته‌ی مدل را همراه اپ منتشر کنید (برای آفلاین بودن).

گام ششم: مدیریت مدل‌های بزرگ: quantization و chunking

Quantization: تبدیل وزن‌ها از FP32 به FP16 یا INT8 باعث کاهش حجم و افزایش سرعت می‌شود.

مدل‌های کوانتایز شده را از Hub بگیرید یا خودتان از ابزارهای مخصوص آنها را بسازید.

اگر مدل خیلی بزرگ است، از نسخه‌های کوچک‌تر یا distilled استفاده کنید (مثلا DistilBERT بجای BERT کامل).

گام هفتم: بارگذاری مدل از Hugging Face Hub با تنظیمات proxy / CORS

هنگام load کردن مدل در مرورگر، ممکن است با محدودیت‌های CORS مواجه شوید. راهکارها:

از URLهای رسمی CDN یا mirrorهای پیشنهادی docs استفاده کنید.
یا در محیط تولید مدل‌ها را از پیش به سرور خودتان mirror کنید (و سپس از همان سرور serve کنید) تا سیاست‌های CORS مدیریت‌پذیر باشند.

گام هشتم: نکات مربوط به bundlers و packaging

اگر از Webpack یا Vite استفاده می‌کنید:

اطمینان حاصل کنید assetهای .wasm, .bin, .json به درستی copy می‌شوند.
در Vite ممکن است نیاز به تنظیم assetsInclude برای فایل‌های وزن باشد.

برای کاهش حجم bundle، از import داینامیک استفاده کنید:

const pipeline = await import(“@huggingface/transformers”).then(m => m.pipeline);

1	const pipeline = await import(“@huggingface/transformers”).then(m => m.pipeline);

گام نهم: اجرای مدل‌ها در web worker یا service worker

اجرای سنگین مدل‌ها در thread اصلی (UI thread) می‌تواند باعث فریز شدن UI شود. بهتر است:

از Web Worker یا OffscreenCanvas برای محاسبات سنگین استفاده کنید.
در این حالت پیام‌ها بین worker و main thread تبادل می‌شود و UI روان می‌ماند.

گام دهم: امنیت و سیاست‌های مرورگر (CSP)

اگر از CDN یا هر endpoint خارجی استفاده می‌کنید، قوانین CSP (Content Security Policy) سایت را به‌روزرسانی کنید تا اجازه‌ی بارگذاری اسکریپت‌ها و منابع را بدهد.

هرگز کلیدهای خصوصی یا توکن‌های محرمانه را در کد فرانت‌اند قرار ندهید؛ اگر نیاز به احراز هویت دارید، از backend و proxy استفاده کنید.

نمونه‌های کاربردی (کوتاه و قابل اجرا)

Sentiment (مرورگر)

<script type=”module”>
  import { pipeline } from “@huggingface/transformers”;
  (async () => {
    const sentiment = await pipeline(“sentiment-analysis”, “Xenova/distilbert-base-uncased-finetuned-sst-2-english”);
    const res = await sentiment(“این آموزش عالیه!”);
    console.log(res);
  })();
</script>

import { pipeline } from “@huggingface/transformers”;

(async () => {

const sentiment = await pipeline(“sentiment-analysis”, “Xenova/distilbert-base-uncased-finetuned-sst-2-english”);

const res = await sentiment(“این آموزش عالیه!”);

console.log(res);

})();

</script>

Image classification (Node)

import fs from “fs”;
import { pipeline } from “@huggingface/transformers”;

const img = fs.readFileSync(“./cat.jpg”);
const clf = await pipeline(“image-classification”, “google/vit-base-patch16-224”);
const out = await clf(img);
console.log(out);

import fs from “fs”;

import { pipeline } from “@huggingface/transformers”;

const img = fs.readFileSync(“./cat.jpg”);

const clf = await pipeline(“image-classification”, “google/vit-base-patch16-224”);

const out = await clf(img);

console.log(out);

توجه: در Node ممکن است نیاز به نصب بسته‌هایی مثل canvas یا sharp برای فرمت‌دهی تصویر باشد.

مدیریت خطاهای رایج و راه‌حل آن‌ها

خطای بارگذاری WASM / missing file
- مطمئن شوید فایل‌های wasm و weights در مسیر درست قرار دارند یا CDN آدرس‌دهی درست است.
CORS error هنگام دانلود weights
- از mirror دارای CORS مناسب استفاده کنید یا weights را روی سرور خود serve کنید.
MemoryError / Out of Memory
- از مدل کوچکتر یا quantized استفاده کنید، یا از WebGPU بهره ببرید.
Performance خیلی کند
- بررسی کنید WebGPU فعال است؟ از workerها استفاده کنید؟ مدل را کوانتایز کنید.

نکات بهینه‌سازی برای تولید (Production)

از نسخه‌های فشرده/کوانتایز مدل استفاده کنید.
مدل‌های سنگین را روی server-side یا TGI اجرا کنید و فقط inference های سبک را در مرورگر انجام دهید.
cache کردن مدل و نتایج (IndexedDB) برای کاهش دانلود.
اندازه bundle را با import داینامیک و lazy loading کاهش دهید.
روی device های هدف تست کنید (موبایل، دسکتاپ) تا تجربه کاربری بهینه باشد.

مثال‌های عملی با Transformers.js

بعد از آشنایی با مفاهیم پایه، معماری و مدل‌های پشتیبانی‌شده، بهترین راه برای درک واقعی قابلیت‌های Transformers.js، دیدن مثال‌های عملی است. این مثال‌ها نشان می‌دهند که چگونه می‌توان از کتابخانه برای تسک‌های متنوعی مثل ترجمه متن، پاسخ به سوالات، یا حتی تبدیل متن به گفتار استفاده کرد. با مشاهده‌ی این نمونه‌ها، توسعه‌دهندگان می‌توانند نحوه راه‌اندازی، اجرای pipelineها و مدیریت داده‌ها را در محیط مرورگر یا Node.js یاد بگیرند و آن‌ها را در پروژه‌های واقعی خود به کار بگیرند.

مثال عملی اول: ترجمه متن

ابتدا Transformers.js را نصب کنید:

npm i –save @xenova/transformers

1	npm i —save @xenova/transformers

اطمینان حاصل کنید که در فایل package.json نوع ماژول به صورت module تنظیم شده باشد، مانند:

{
  “type”: “module”,
  “dependencies”: {
    “@xenova/transformers”: “^2”
  }
}

{

“type”: “module”,

“dependencies”: {

“@xenova/transformers”: “^2”

}

یک اسکریپت ساده (مثلاً translate.js) بنویسید تا مجموعه‌ای از جملات انگلیسی را به ایتالیایی ترجمه کند:

import { pipeline } from “@xenova/transformers”;

const translator = await pipeline(‘translation’, ‘Xenova/nllb-200-distilled-600M’);

const output = await translator(
  “There are many things we don’t know about space. The mysteries of black holes, dark matter, dark energy, quantum entanglement, antimatter, and so much more. Follow along with us to learn more.”,
  {
    src_lang: ‘eng_Latn’, // زبان مبدا: انگلیسی
    tgt_lang: ‘ita_Latn’, // زبان مقصد: ایتالیایی
  }
);

console.log(output)

import { pipeline } from “@xenova/transformers”;

const translator = await pipeline(‘translation’, ‘Xenova/nllb-200-distilled-600M’);

const output = await translator(

“There are many things we don’t know about space. The mysteries of black holes, dark matter, dark energy, quantum entanglement, antimatter, and so much more. Follow along with us to learn more.”,

{

src_lang: ‘eng_Latn’, // زبان مبدا: انگلیسی

tgt_lang: ‘ita_Latn’, // زبان مقصد: ایتالیایی

}

);

console.log(output)

اجرای اسکریپت:

node translate.js

1	node translate.js

بار اول کمی زمان می‌برد، زیرا مدل به‌طور خودکار دانلود شده و در یک کش محلی ذخیره می‌شود تا دفعات بعدی سریع‌تر اجرا شود. مسیر کش معمولا به شکل زیر است:

./node_modules/@xenova/transformers/.cache/

1	./node_modules/@xenova/transformers/.cache/

نتیجه ترجمه:

[
  {
    “translation_text”: “Ci sono molte cose che non sappiamo dello spazio. I misteri dei buchi neri, la materia oscura, l’energia oscura, l’intreccio quantistico, l’antimateria, e molto altro.”
  }
]

[

{

“translation_text”: “Ci sono molte cose che non sappiamo dello spazio. I misteri dei buchi neri, la materia oscura, l’energia oscura, l’intreccio quantistico, l’antimateria, e molto altro.”

}

]

مثال دوم: پاسخ به سوالات (Question Answering)

اگر می‌خواهید از یک متن به‌عنوان کانتکست شروع کرده و سپس به سوالات پاسخ دهید، می‌توانید از pipeline پاسخ به سوال استفاده کنید. به‌صورت پیش‌فرض مدل Xenova/distilbert-base-cased-distilled-squad استفاده می‌شود، بنابراین نیازی به مشخص کردن مدل نیست مگر بخواهید مدل دیگری انتخاب کنید.

import { pipeline } from “@xenova/transformers”;

const answerer = await pipeline(‘question-answering’);

const context = “My name is Roberto, and I enjoy programming primarily in PHP. Occasionally, I also use JavaScript and Python.”;
const question = “Which is my favourite programming language?”;

const answer = await answerer(question, context);
console.log(answer);

import { pipeline } from “@xenova/transformers”;

const answerer = await pipeline(‘question-answering’);

const context = “My name is Roberto, and I enjoy programming primarily in PHP. Occasionally, I also use JavaScript and Python.”;

const question = “Which is my favourite programming language?”;

const answer = await answerer(question, context);

console.log(answer);

اجرای اسکریپت:

node question-answering.js

1	node question–answering.js

نتیجه به شکل یک شیء با جواب و نمره مربوطه خواهد بود. نمره (score) نشان‌دهنده سطح اطمینان مدل از پاسخ است:

{ “answer”: “PHP”, “score”: 0.9730337105620812 }

1	{ “answer”: “PHP”, “score”: 0.9730337105620812 }

مثال سوم: تبدیل متن به گفتار (Text-to-Speech)

علاوه بر پردازش متن، Transformers.js امکان تبدیل متن به گفتار را نیز ارائه می‌دهد. با استفاده از مدل‌های قوی ترنسفورمر، می‌توان متن را به صدایی طبیعی تبدیل کرد.

// وارد کردن Transformers.js
import { pipeline } from “@xenova/transformers”;
// وارد کردن wavefile برای ذخیره فایل صوتی
import wavefile from “wavefile”;
// وارد کردن fs برای ذخیره فایل
import fs from “fs”;

// استفاده از pipeline تبدیل متن به گفتار با مدل Xenova/speecht5_tts
const synthesizer = await pipeline(
    “text-to-speech”,
    “Xenova/speecht5_tts”, {
        quantized: false,
    }
);

// بارگذاری speaker embeddings
const speaker_embeddings =
  “https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/speaker_embeddings.bin”;

// تبدیل متن به گفتار با استفاده از embeddings
const out = await synthesizer(
    “Hello, with Transformers you can transform text into audio.”,
    { speaker_embeddings }
);

// ذخیره خروجی به فایل Wave
const wav = new wavefile.WaveFile();
wav.fromScratch(1, out.sampling_rate, “32f”, out.audio);
fs.writeFileSync(“out.wav”, wav.toBuffer());

// وارد کردن Transformers.js

import { pipeline } from “@xenova/transformers”;

// وارد کردن wavefile برای ذخیره فایل صوتی

import wavefile from “wavefile”;

// وارد کردن fs برای ذخیره فایل

import fs from “fs”;

// استفاده از pipeline تبدیل متن به گفتار با مدل Xenova/speecht5_tts

const synthesizer = await pipeline(

“text-to-speech”,

“Xenova/speecht5_tts”, {

quantized: false,

}

);

// بارگذاری speaker embeddings

const speaker_embeddings =

“https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/speaker_embeddings.bin”;

// تبدیل متن به گفتار با استفاده از embeddings

const out = await synthesizer(

“Hello, with Transformers you can transform text into audio.”,

{ speaker_embeddings }

);

// ذخیره خروجی به فایل Wave

const wav = new wavefile.WaveFile();

wav.fromScratch(1, out.sampling_rate, “32f”, out.audio);

fs.writeFileSync(“out.wav”, wav.toBuffer());

برای مدیریت فایل صوتی Wave، نیاز است کتابخانه wavefile نصب شود:

npm i –save wavefile

1	npm i —save wavefile

در این مثال، Transformers.js متن ورودی را به راحتی به گفتار تبدیل می‌کند. این نمونه نشان می‌دهد که این کتابخانه فراتر از تبدیل متن عمل می‌کند و برای کاربردهای متنوع مانند ایجاد ابزارهای آموزشی، اپلیکیشن‌های تعاملی یا پروژه‌های چندرسانه‌ای مناسب است.

Transformer.js چه مزایا و محدودیت‌هایی دارد؟

مهم است بدانیم Transformers.js چه نقاط قوت و محدودیت‌هایی دارد. شناخت این موارد به توسعه‌دهندگان کمک می‌کند تا تصمیم بگیرند کدام تسک‌ها و پروژه‌ها مناسب اجرای مستقیم در مرورگر یا Node.js هستند و چه محدودیت‌هایی ممکن است در مسیر اجرا با آن‌ها مواجه شوند.

مزایا:

حریم خصوصی و بدون نیاز به سرور: همه پردازش‌ها می‌تواند مستقیما در مرورگر انجام شود، بدون ارسال داده‌ها به سرور.
هزینه صفر: نیاز به زیرساخت سرور یا پردازش ابری ندارد و توسعه‌دهندگان می‌توانند بدون هزینه اضافی مدل‌ها را اجرا کنند.

محدودیت‌ها:

حافظه محدود مرورگر: اجرای مدل‌های بزرگ ممکن است باعث مصرف زیاد RAM شود و روی دستگاه‌های ضعیف با محدودیت مواجه شود.
بارگذاری مدل: مدل‌ها باید ابتدا دانلود و در کش ذخیره شوند که می‌تواند زمان‌بر باشد.
سرعت مرورگر: پردازش‌های سنگین ممکن است کند باشند؛ استفاده از WebGPU یا Web Worker می‌تواند کمک کند.

جمع‌بندی

Transformers.js به توسعه‌دهندگان امکان می‌دهد تا مدل‌های پیشرفته‌ی هوش مصنوعی را بدون نیاز به سرور یا زیرساخت سنگین مستقیما در مرورگر یا Node.js اجرا کنند. این کتابخانه، مسائل مرتبط با پردازش داده‌های حساس، کاهش هزینه‌ها و راه‌اندازی سریع پروژه‌های AI را حل می‌کند و برای توسعه‌دهندگان ابزار قدرتمندی محسوب می‌شود.

منابع

huggingface.co | dev.to | medium.com

سوالات متداول

بسته به اندازه مدل، پردازش در مرورگر ممکن است کند باشد. استفاده از WebGPU یا Web Worker می‌تواند سرعت پردازش را افزایش دهد.

با استفاده از مدل‌های سبک‌تر (Distil، quantized) یا تقسیم تسک‌ها به بخش‌های کوچک‌تر، اجرای مدل‌ها روان‌تر و سریع‌تر می‌شود.

تمام پردازش‌ها می‌تواند در سمت کاربر انجام شود و داده‌ها بدون نیاز به سرور مدیریت می‌شوند، بنابراین حریم خصوصی حفظ می‌شود.

Transformers.js چیست؟ آموزش اجرای مدل‌های هوش مصنوعی در مرورگر

ترنسفورمر چیست و چرا استفاده می‌شود؟

Transformers.js چیست؟

Transformer.js چه کاربردهایی دارد؟

معماری و نحوه کار Transformers.js

Pipeline API

Backendها: WebGPU و WASM

بارگذاری مدل از Hugging Face Hub

Quantization و مدل‌های سبک

از چه مدل‌هایی در Transformer.js پشتیبانی می‌شود؟

۱. پردازش متن (NLP)

۲. پردازش تصویر (Computer Vision)

۳. پردازش صوت

۴. مدل‌های چندمودالی (Multimodal)

نصب و راه‌اندازی قدم‌به‌قدم Transformers.js

گام اول: پیش‌نیازها (نرم‌افزاری و سخت‌افزاری)

گام دوم: نصب محلی با npm (Node.js)

مثال ساده در Node.js

گام سوم: استفاده در مرورگر (via bundler یا CDN)

الف) با bundler (Vite / Webpack / Parcel / esbuild)

ب) بدون bundler — از CDN (نمونه کلی)

گام چهارم: فعال‌سازی و استفاده از WebGPU (در مرورگر)

گام پنجم: کش و محل ذخیره‌سازی مدل‌ها (cache)

گام ششم: مدیریت مدل‌های بزرگ: quantization و chunking

گام هفتم: بارگذاری مدل از Hugging Face Hub با تنظیمات proxy / CORS

گام هشتم: نکات مربوط به bundlers و packaging

گام نهم: اجرای مدل‌ها در web worker یا service worker

گام دهم: امنیت و سیاست‌های مرورگر (CSP)

نمونه‌های کاربردی (کوتاه و قابل اجرا)

Sentiment (مرورگر)

Image classification (Node)

مدیریت خطاهای رایج و راه‌حل آن‌ها

نکات بهینه‌سازی برای تولید (Production)

مثال‌های عملی با Transformers.js

مثال عملی اول: ترجمه متن

مثال دوم: پاسخ به سوالات (Question Answering)

مثال سوم: تبدیل متن به گفتار (Text-to-Speech)

Transformer.js چه مزایا و محدودیت‌هایی دارد؟

سوالات متداول

مطالب مرتبط

دیدگاه‌ها

دیدگاهتان را بنویسید لغو پاسخ