LiteRT.js چیست؟ اجرای هوش مصنوعی داخل مرورگر بدون سرور

LiteRT.js اتصال JavaScript به Runtime بهینه LiteRT است و مدل های .tflite را مستقیماً داخل مرورگر اجرا می کند. نتیجه می تواند تأخیر بسیار پایین، حفظ داده روی دستگاه و حذف هزینه Inference سرور برای بخشی از کاربردها باشد. Google از شتاب CPU با XNNPACK، GPU با WebGPU و مسیر آزمایشی NPU با WebNN پشتیبانی می کند. اما دانلود مدل، سازگاری Browser، حافظه و امنیت Client محدودیت هایی هستند که باید از ابتدا در معماری دیده شوند.

LiteRT.js دقیقاً چیست؟

LiteRT.js Binding جاوااسکریپت LiteRT است؛ Runtimeی که پیش تر برای اجرای مدل روی موبایل و Edge استفاده می شد و اکنون از طریق WebAssembly به مرورگر می آید. توسعه دهنده می تواند مدل .tflite را Load و Compile کند، Tensor ورودی بسازد و Inference را روی CPU، GPU یا در شرایط آزمایشی NPU اجرا کند. کد برنامه JavaScript یا TypeScript است، اما Kernelهای اصلی صرفاً پیاده سازی کند جاوااسکریپت نیستند.

این معماری برای تیمی جذاب است که مدل Mobile موجود دارد و می خواهد همان Artifact را در وب نیز استفاده کند. Google آن را تکامل مسیر اجرای tflite نسبت به راهکارهای قدیمی تر معرفی می کند. با Stack مشترک، بهبود Quantization و Hardware Optimization در پلتفرم های دیگر می تواند به وب نیز برسد.

چرا AI داخل مرورگر اجرا کنیم؟

اولین مزیت Privacy است. تصویر دوربین، صدای کاربر یا متن حساس می تواند بدون Upload شدن پردازش شود. دوم Latency است؛ پس از دانلود و Warm-up مدل، Round-trip شبکه حذف می شود. سوم هزینه است؛ درخواست Inference به سرور GPU ارسال نمی شود و هزینه به دستگاه کاربر منتقل می شود. چهارم Offline یا شبکه ضعیف است، چون Feature پس از Cache مدل می تواند مستقل تر کار کند.

این مزایا مطلق نیستند. مدل از سرور یا CDN دانلود می شود، حجم آن روی تجربه اولیه اثر دارد و دستگاه ضعیف ممکن است کند یا داغ شود. Privacy نیز فقط وقتی واقعی است که برنامه Telemetry یا Input را جداگانه ارسال نکند. معماری باید دقیقاً مشخص کند چه داده ای محلی و چه داده ای Remote است.

CPU، WebGPU و WebNN چه تفاوتی دارند؟

در CPU، LiteRT.js از XNNPACK برای اجرای چندرشته ای و SIMD استفاده می کند. این مسیر گسترده ترین سازگاری را دارد و Fallback خوبی است، اما برای مدل Vision یا Audio سنگین ممکن است کند باشد. WebGPU محاسبه را به GPU می برد و برای Inference بلادرنگ در Browserهای مدرن مناسب تر است. Google در Benchmark کنترل شده برای بعضی مدل ها تا سه برابر نسبت به Runtimeهای وب دیگر و برای GPU/NPU نسبت به CPU سرعت های بسیار بالاتر گزارش کرده، اما نتیجه دستگاه به دستگاه متفاوت است.

WebNN هدفش استفاده از NPU یا Framework ML سیستم است. در مستندات فعلی Experimental است، به Flag، JSPI و Driver نیاز دارد و هیچ Browser آن را به صورت عمومی کامل عرضه نکرده است. بنابراین Production باید Capability Detection و Fallback داشته باشد. طراحی فقط برای NPU، بخش بزرگی از کاربران را حذف می کند.

سازگاری Browser و Hardware

برای WebGPU، مستندات Google به Chrome و Edge 113 به بالا، Safari 17.4 به بالا و پشتیبانی جزئی Firefox 121 به بالا اشاره می کند. اما نسخه Browser تنها شرط نیست؛ GPU، Driver، Policy سازمانی و Feature Flag می تواند دسترسی را تغییر دهد. WebViewهای قدیمی و دستگاه های Low-end نیز رفتار متفاوت دارند.

قبل از Load مدل، API و Adapter را Detect کنید. مسیر CPU باید کار کند و UI باید وضعیت دانلود یا عدم پشتیبانی را شفاف نشان دهد. تست روی لپ تاپ توسعه دهنده M4 نماینده کاربران موبایل یا Windows میان رده نیست. Matrix واقعی دستگاه و Browser بسازید.

چه مدل هایی مناسب مرورگرند؟

مدل مناسب باید کوچک، Quantized و متناسب با Task باشد. Object Detection سبک، Classification، Embedding، Noise Suppression، Audio Event Detection و Image Enhancement گزینه های رایج اند. مدل چندمیلیاردپارامتری ممکن است از نظر دانلود و RAM برای Browser عمومی مناسب نباشد، حتی اگر از نظر فنی Load شود.

Google تبدیل PyTorch با LiteRT Torch و Quantization لایه ای را معرفی می کند. Quantization اندازه و زمان را کاهش می دهد، اما می تواند Accuracy را تغییر دهد. Quality Dataset واقعی لازم است. مدل را فقط با Sample رسمی نسنجید؛ نور، زبان، دستگاه و Input کاربران شما متفاوت است.

معماری Load، Compile و Run

چرخه اصلی شامل بارگذاری فایل های Wasm، دریافت مدل، Compile برای Accelerator و اجرای Tensor است. Model Download را از UI پنهان نکنید؛ Progress، Cancel و Cache لازم است. Compile یا Warm-up اولین اجرا می تواند کند باشد و بهتر است در زمان مناسب انجام شود، نه پس از کلیک حساس کاربر.

Model و Wasm را می توانید از CDN یا Server خودتان ارائه کنید. Self-hosting کنترل Version و CSP بیشتری می دهد. فایل ها باید با Cache Header و Integrity مناسب سرو شوند. Version مدل را در URL قرار دهید تا Rollback و Cache Busting قابل کنترل باشد.

شروع ساده با WebGPU

نمونه رسمی با loadLiteRt فایل های Wasm را آماده و با loadAndCompile مدل را برای WebGPU Compile می کند. در Production باید Error Handling، Fallback و Abort نیز اضافه شود. نمونه زیر مسیر حداقلی را نشان می دهد؛ شکل Tensor ورودی باید با Signature مدل شما هماهنگ باشد.

import {
  loadLiteRt,
  loadAndCompile,
  Tensor
} from '@litertjs/core';

await loadLiteRt('/litert/wasm/');

const model = await loadAndCompile('/models/model.tflite', {
  accelerator: 'webgpu'
});

const inputData = new Float32Array(1 * 3 * 224 * 224);
const inputTensor = new Tensor(inputData, [1, 3, 224, 224]);
const output = await model.run(inputTensor);

این کد Preprocessing واقعی تصویر را انجام نمی دهد. ترتیب Channel، Normalize، Shape و نوع داده باید دقیقاً مطابق مدل باشد. خطای کوچک در Preprocessing می تواند مدل سالم را بی کیفیت نشان دهد.

Preprocessing و Postprocessing

بخش زیادی از زمان و خطا خارج از مدل است. Resize، Color Space، Normalize، Tokenize و تبدیل Tensor باید با Training Pipeline همسان باشند. Google استفاده از TensorFlow.js برای Pre/Post Processing و Interop را پیشنهاد می کند. هنگام WebGPU از dataSync دوری کنید، چون انتقال هم زمان داده می تواند Performance را خراب کند.

Tensorهای میانی را آزاد کنید. Leak در Session طولانی مرورگر می تواند RAM و GPU Memory را پر کند. برای دوربین بلادرنگ، Backpressure تعریف کنید؛ اگر Inference از Frame Rate کندتر است، Frameها را Queue بی نهایت نکنید. آخرین Frame یا نرخ نمونه برداری کنترل شده بهتر است.

چگونه Benchmark واقعی بگیریم؟

زمان را به Download، Initialize Wasm، Compile/Warm-up، Preprocess، Inference و Postprocess تقسیم کنید. فقط میانگین Inference گرم را گزارش نکنید؛ کاربر Cold Start را هم تجربه می کند. p50 و p95، RAM، Battery و Thermal را روی دستگاه های مختلف ثبت کنید.

Backendها را جدا مقایسه کنید. CPU ممکن است برای مدل کوچک سریع تر از هزینه Setup GPU باشد. WebGPU برای Batch یا مدل سنگین مزیت دارد. WebNN فعلاً آزمایشی است. Quality نیز کنار سرعت سنجیده شود؛ Quantization سریع اما نادقیق برای محصول قابل قبول نیست.

حریم خصوصی و امنیت مدل Client-side

محلی بودن Inference داده را از سرور دور نگه می دارد، اما مدل و منطق به Client تحویل می شوند و قابل استخراج اند. اگر مدل مالکیت فکری بسیار حساس است، Browser محیط مخفی سازی کامل نیست. همچنین Input می تواند از طریق Extension مخرب یا XSS در صفحه در معرض خطر باشد. CSP، Dependency Security و Isolation مهم اند.

در UI صادقانه بگویید پردازش محلی است و چه Telemetry ارسال می شود. Permission دوربین و میکروفن را در لحظه نیاز بخواهید. Input حساس را در Log، Analytics یا Error Report ثبت نکنید.

Offline، PWA و Cache مدل

LiteRT.js با PWA ترکیب خوبی دارد. Service Worker می تواند فایل Wasm و مدل را Cache کند تا پس از نصب اولیه Feature آفلاین بماند. اما مدل بزرگ Storage زیادی می گیرد و Browser ممکن است Cache را پاک کند. نسخه، Integrity و Migration Cache باید مدیریت شود.

مدل را به صورت Lazy و فقط برای کاربر نیازمند دانلود کنید. شبکه موبایل و هزینه داده را در نظر بگیرید. گزینه حذف مدل و نمایش حجم دانلود UX را بهتر می کند.

سناریوهای مناسب و نامناسب

Object Detection دوربین، Blur پس زمینه، تشخیص Gesture، Audio Processing، Embedding و جست وجوی محلی، OCR محدود و Upscaling می توانند مناسب باشند. Google Demoهایی مانند YOLO، Depth Estimation و 4x Image Upscaling ارائه کرده است.

Taskی که نیازمند مدل بسیار بزرگ، دانش دائم به روز، Secret Server یا کنترل مرکزی سخت است شاید برای Inference کامل Client مناسب نباشد. معماری Hybrid می تواند مرحله حساس را محلی و Reasoning سنگین را Server-side انجام دهد.

نسخه بندی و انتشار مدل

مدل را مانند Artifact نرم افزار Version کنید. Hash، Dataset ارزیابی، Backendهای تست شده و حداقل Browser را ثبت کنید. Rollout مدل جدید با درصد کم و Metric Quality انجام شود. اگر خطا رخ داد، URL نسخه قبلی قابل بازگشت باشد.

CDN باید Range، Cache و Compression مناسب داشته باشد. Integrity و Origin را کنترل کنید. مدل از منبع ناشناس دانلود نشود. Error دانلود، Quota Storage و Offline باید Fallback واضح داشته باشد.

LiteRT.js در برابر Inference سرور

معماری Hybrid در بسیاری از محصولات بهترین تعادل است: Feature کم ریسک و بلادرنگ در Browser، و Task سنگین یا نیازمند داده مرکزی روی Server.

محدودیت ها، ریسک ها و نکات مهم

چک لیست راه اندازی LiteRT.js

1. Task و مدل کوچک مناسب Browser انتخاب کنید.
2. مدل را به tflite تبدیل و با Dataset واقعی ارزیابی کنید.
3. Wasm و مدل را Version و Cache کنید.
4. WebGPU را Detect و CPU را Fallback نگه دارید.
5. Cold Start، Warm-up، p95 و Memory را Benchmark کنید.
6. Preprocessing را با Training دقیقاً هماهنگ کنید.
7. Tensor و Resourceها را Dispose کنید.
8. Privacy، CSP و Dependency Security را بررسی کنید.
9. روی موبایل، لپ تاپ ضعیف و Browserهای مختلف تست کنید.

پیش از سرمایه گذاری روی NPU، مسیر WebGPU و CPU را پایدار کنید؛ WebNN هنوز Experimental است و محیط کاربر قابل کنترل نیست.

پرسش های متداول

LiteRT.js چه تفاوتی با TensorFlow.js دارد؟

LiteRT.js Runtime بومی و بهینه LiteRT را از طریق WebAssembly و شتاب دهنده ها برای اجرای مدل های tflite به وب می آورد؛ TensorFlow.js همچنان برای Pre/Post Processing مفید است.

آیا داده به سرور ارسال می شود؟

Inference می تواند کاملاً محلی باشد، اما مدل و کد برنامه همچنان ممکن است از CDN دانلود شوند و Analytics باید جدا بررسی شود.

کدام Browserها WebGPU دارند؟

مستندات Google Chrome و Edge 113+، Safari 17.4+ و پشتیبانی جزئی Firefox 121+ را ذکر می کنند.

WebNN آماده Production است؟

خیر. مستندات آن را Experimental می دانند و فعال سازی Flag و Driver خاص ممکن است لازم باشد.

آیا مدل های بزرگ LLM اجرا می شوند؟

LiteRT-LM.js مسیر LLM مرورگر را اضافه می کند، اما محدودیت RAM، دانلود، Context و توان دستگاه همچنان تعیین کننده است.

جمع بندی سریع

• LiteRT.js برای Privacy، Offline و Latency پایین جذاب است.
• مدل باید از نظر حجم، حافظه و Hardware کاربران مناسب باشد.
• WebGPU را مسیر اصلی و Wasm/CPU را Fallback در نظر بگیرید.
• WebNN هنوز Experimental است و نباید تنها مسیر Production باشد.
• قبل از انتشار روی دستگاه های ضعیف و Browserهای مختلف Benchmark کنید.

یک مدل کوچک و سناریوی مشخص انتخاب کنید، Demo را با WebGPU و CPU Fallback بسازید و زمان دانلود، Warm-up، Inference و مصرف حافظه را روی دستگاه واقعی اندازه بگیرید.

منابع رسمی

معرفی رسمی LiteRT.js — قابلیت ها، Benchmark، Backendها و نمونه های واقعی

راهنمای شروع رسمی LiteRT.js — نصب، Wasm، WebGPU، WebNN و Pipeline کد

مستندات LiteRT برای وب — معماری و منابع توسعه