مرورگر خود را نه به عنوان پنجره‌ای به یک سرور دوردست، بلکه به عنوان یک گره مستقل در رایانش لبه (Edge Computing) تصور کنید. طبق یک راهنمای فنی مفصل در ۲۶ اوت ۲۰۲۶، ابزار ONNX Runtime Web به توسعه‌دهندگان اجازه می‌دهد خط لوله‌های بینایی با کارایی بالا — مانند حذف پس‌زمینه در لحظه — را به‌طور کامل در فضای حافظه کلاینت اجرا کنند.
برای سال‌ها، صنعت بر مدل «کلاینت نازک» تکیه داشت. وظایف سنگین محاسباتی مانند بینایی ماشین، قطعه‌بندی معنایی (Semantic Segmentation) و استخراج ویژگی‌های عمیق، به‌طور سخت‌گیرانه‌ای در پشت خوشه‌های سرور مجهز به GPUهای گران‌قیمت قفل شده بودند. کاربران تصاویر را به یک میکروسرویس پایتون که با PyTorch یا TensorFlow اجرا می‌شد ارسال می‌کردند، منتظر پاسخ می‌ماندند و هزینه آن را با پهنای باند و تأخیر می‌پرداختند. در این مدل، مرورگر صرفاً یک لایه نمایش بود که پیکسل‌ها را می‌گرفت، فشرده می‌کرد و از طریق HTTP ارسال می‌نمود.
این معماری موانع حریم خصوصی بزرگی ایجاد می‌کرد، به‌ویژه برای دارایی‌های سازمانی که تحت قوانین GDPR یا HIPAA هستند. هدایت جریان‌های ویدیویی خصوصی یا داده‌های حساس سازمانی از طریق نقاط انتهایی ابری متمرکز، کابوسی برای انطباق با قوانین است. علاوه بر این، رفت‌وبرگشت کلاینت-سرور اصطکاک شدیدی ایجاد می‌کند: تأخیر بالا، مصرف عظیم پهنای باند و صورت‌حساب‌های تکراری زیرساخت ابری. این رویکرد یادآور راهکارهای زنجیره‌ای برای تشخیص چهره در مرورگر است که با هدف حذف هزینه‌های سرور در اتوماسیون‌های تصویری طراحی شده‌اند.
همان‌طور که در تحلیل قبلی ما درباره‌ی مدل MobileNetV2 و استخراج ویژگی برای شناسایی اشیا اشاره کردیم، چرخش به سمت اجرای سمت کلاینت نشان‌دهنده حرکت گسترده‌تر به سوی هوش مصنوعی غیرمتمرکز است. اکنون به‌جای ارسال پیکسل‌ها به ابر، هوش مصنوعی به سراغ پیکسل‌ها می‌آید. به لطف همگرایی APIهای شتاب‌دهنده سخت‌افزاری، بلوغ WebAssembly (Wasm) و محیط‌های اجرای قابل حمل یادگیری ماشین، دستگاه کلاینت دیگر یک ترمینال غیرفعال نیست.
سه ستون هوش مصنوعی در مرورگر
به نقل از گزارش dev.to، یادگیری ماشین در سمت کلاینت بر سه فناوری بنیادی استوار است که شکاف بین برنامه‌های وب سطح بالا و شبکه‌های عصبی سطح پایین را پر می‌کنند:
- ONNX (Open Neural Network Exchange): این یک نمایش میانی مدل (IR) است. ONNX استانداردی باز برای نمایش مدل‌های یادگیری ماشین فراهم می‌کند. گراف‌هایی که در PyTorch یا TensorFlow آموزش دیده‌اند، می‌توانند به یک گراف محاسباتی جهانی تبدیل شوند که هر پلتفرمی قادر به اجرای آن است.
- ONNX Runtime Web: این محیط اجرای مدل است. این ابزار که با C++ نوشته شده و به WebAssembly کامپایل شده است، به عنوان لایه ترجمه بین TypeScript و زیرساخت‌های محاسباتی مرورگر عمل می‌کند.
- لایه‌های انتزاع سخت‌افزاری: این‌ها خط لوله‌های بومی گرافیک و محاسبات مرورگر هستند. بسته به دستگاه میزبان، onnxruntime-web محاسبات تانسوری را از طریق WebAssembly چندرشته‌ای، شیدرهای WebGL یا شیدرهای محاسباتی WebGPU هدایت می‌کند.
درک بردار معنایی در مرورگر
هنگام استفاده از مدل‌های استخراج ویژگی، مانند رمزگذارهای بینایی CLIP، سیستم بردار معنایی (Embedding) — مثل کارت معرفی عددی برای هر واژه یا تصویر که می‌گوید این مورد «همسایه‌ی» چه مفاهیم دیگری است — تولید می‌کند. در توسعه وب سنتی، یک نقشه هش یا ایندکس پایگاه‌داده رابطه‌ای اجازه جست‌وجوی دقیق کلیدها را با پیچیدگی $O(1)$ می‌دهد. اما اگر کلیدی متفاوت نوشته شده باشد یا مفهوم مشابهی را نمایندگی کند، این روش شکست می‌خورد.
یک بردار معنایی این مشکل را با تصویر کردن مفاهیم گسسته در یک فضای هندسی چندبعدی پیوسته حل می‌کند. هر بعد در بردار، نشان‌دهنده یک ویژگی نهان است که در طول آموزش یاد گرفته شده است. همان‌طور که معماری میکروسرویس‌ها یک سیستم یکپارچه را به سرویس‌های تخصصی تجزیه می‌کند، یک مدل بردار معنایی نیز رسانه‌های خام و بدون ساختار — پیکسل‌ها، شکل‌موج‌های صوتی، اسناد متنی — را به مختصات عددی متراکم و ساختاریافته تبدیل می‌کند. این مدل‌های جست‌وجوی معنایی در مقیاس کلان، مشابه آنچه در زیرساخت‌های جست‌وجوی Agentic شرکت Exa Labs مشاهده می‌کنیم، تعریف جدیدی از بازیابی اطلاعات را ارائه می‌دهند.
این مختصات را می‌توان فوراً با استفاده از معیارهای فاصله ریاضی مانند شباهت کسینوسی (Cosine Similarity) یا فاصله اقلیدسی مقایسه کرد. این قابلیت، جست‌وجوهای معنایی فوق‌سریع را مستقیماً در حافظه کلاینت ممکن می‌کند و نیاز به پرس‌وجوی پایگاه‌داده در بک‌اند را برای تطبیق شباهت‌ها از بین می‌برد.
سلسله‌مراتب اجرا: Wasm، WebGL و WebGPU
جاوااسکریپت به‌طور تاریخی تک‌رشته‌ای است، در حالی که یادگیری عمیق به اجرای موازی عظیم ضرب ماتریس‌ها نیاز دارد. برای پر کردن این شکاف، ONNX Runtime Web از یک استراتژی تامین‌کننده اجرا در چند سطح استفاده می‌کند. هنگام شروع یک جلسه استنتاج (Inference) — لحظه‌ای که مدل واقعاً جواب تولید می‌کند، شبیه خودِ آشپزی و نه دوره‌ی آموزش آشپز — محیط اجرا، سخت‌افزار میزبان را بررسی می‌کند تا بهینه‌ترین گزینه را انتخاب کند.
۱. تامین‌کننده اجرای WebAssembly (Wasm)
هر مرورگر مدرنی از WebAssembly پشتیبانی می‌کند که برای سرعت‌های نزدیک به بومی طراحی شده است. این تامین‌کننده موتور C++ را به یک ماژول Wasm تبدیل می‌کند و برای حداکثر کردن کارایی، از دستورات SIMD و چندرشته‌ای بودن از طریق Web Workers بهره می‌برد. با این حال، این روش به دلیل محدودیت در تعداد هسته‌ها، برای مدل‌های ترنسفورمر متراکم بهینه نیست.
۲. تامین‌کننده اجرای WebGL
پیش از WebGPU، ابزار WebGL پل اصلی به شتاب‌دهنده سخت‌افزاری بود. این ابزار که برای گرافیک سه‌بعدی طراحی شده، اجازه می‌دهد برنامه‌های سفارشی به نام شیدرهای فرگمنت روی GPU اجرا شوند. تامین‌کننده WebGL عملیات تانسور را به عملیات گرافیکی نگاشت می‌کند. تانسورهای چندبعدی در بافت‌های دوبعدی WebGL بسته‌بندی می‌شوند و ضرب ماتریس با رندر کردن یک چهارضلعی تمام‌صفحه اجرا می‌شود. این روش به دلیل تخصیص بافت‌ها و اجبار محاسبات عمومی به خط لوله گرافیکی، سربار زیادی دارد.
۳. تامین‌کننده اجرای WebGPU
ابزار WebGPU استاندارد طلایی مدرن است. این فناوری که برای نمایش معماری‌های مدرن GPU (مشابه Vulkan و Metal) ساخته شده، پشتیبانی درجه‌یک از شیدرهای محاسباتی GPGPU، مدیریت مستقیم حافظه و خط لوله‌های محاسباتی فراهم می‌کند. تانسورها مستقیماً در بافرهای ذخیره‌سازی GPU قرار می‌گیرند و شیدرهای محاسباتی ضرب ماتریس‌ها را بدون جریمه‌های انتزاعی رندر گرافیکی اجرا می‌کنند. این امر منجر به سرعت‌هایی می‌شود که به عملکرد برنامه‌های بومی دسکتاپ نزدیک است و قطعه‌بندی در لحظه جریان‌های ویدیویی با کیفیت HD را ممکن می‌سازد.
مکانیسم حذف پس‌زمینه
پیاده‌سازی یک خط لوله حذف پس‌زمینه — با استفاده از مدل‌هایی مانند MediaPipe Selfie Segmentation یا MODNet — شامل سه مرحله ریاضی متمایز است.
پیش‌پردازش: نرمال‌سازی تانسور
پیکسل‌های خام RGBA از یک المان <canvas> در HTML5، یک شیء ImageData تولید می‌کنند. شبکه‌های عصبی تانسورهای چندبعدی با مقادیر اعشاری نرمال‌شده در بازه $[-1, 1]$ یا $[0, 1]$ را می‌طلبند.
از نظر ریاضی، اگر $I_{raw}$ مقدار پیکسل ورودی باشد، تابع پیش‌پردازش یک تبدیل آفین را اعمال می‌کند:
$I_{norm} = \frac{\frac{I_{raw}}{255.0} - \mu}{\sigma}$
علاوه بر این، چیدمان‌های فضایی باید از فرمت کانال‌های درهم‌تنیده (RGBRGB...) به فرمت صفحه‌ای (RRR...GGG...BBB...) تغییر کنند تا با چیدمان حافظه NCHW مورد نیاز مدل‌های ONNX مطابقت داشته باشند.
گذر پیشرو استنتاج
زمانی که تانسور ورودی $X \in \mathbb{R}^{1 \times 3 \times H \times W}$ به جلسه ONNX ارسال می‌شود، رمزگذار به‌تدریج ابعاد فضایی را کاهش داده و عمق کانال را افزایش می‌دهد تا ویژگی‌های معنایی سطح بالا را استخراج کند. سپس رمزگشا این ویژگی‌ها را افزایش ابعاد داده و با استفاده از اتصالات پرشی (Skip-connections)، دقت فضایی را بازیابی می‌کند. خروجی این مرحله یک نقشه احتمال یا ماسک لاجیت $Y \in \mathbb{R}^{1 \times 1 \times H' \times W'}$ است.
پس‌پردازش: Alpha Matting
به دلیل اینکه خروجی خام اغلب به دلیل کاهش ابعاد، لبه‌های نرم یا دندانه‌داری دارد، سیستم مراحل زیر را اعمال می‌کند:
- تغییر اندازه و درونیابی: مقیاس‌بندی ماسک با رزولوشن پایین به رزولوشن اصلی ورودی با استفاده از درونیابی bilinear یا bicubic.
- آستانه‌گذاری و هموارسازی: اعمال عملیات مورفولوژیک یا تاری گوسی روی کانال آلفا برای نرم کردن لبه‌های دندانه‌دار.
- ترکیب آلفا: ترکیب پیکسل‌های فریم ویدیویی اصلی با یک پس‌زمینه شفاف با استفاده از معادلات ترکیب آلفای Porter-Duff:
$C_{out} = \alpha \cdot C_{foreground} + (1 - \alpha) \cdot C_{background}$
محدودیت‌های مهندسی در لبه
انتقال هوش مصنوعی به مرورگر چالش‌هایی را ایجاد می‌کند که مهندسان سمت سرور هرگز با آن‌ها مواجه نمی‌شوند.
فشار حافظه و جمع‌آوری زباله (Garbage Collection)
مدل‌های شبکه عصبی به بلوک‌های حافظه متوالی نیاز دارند. در جاوااسکریپت، تکیه زیاد به TypedArrays می‌تواند باعث توقف‌های مکرر GC شود. موتورهای با کارایی بالا باید استراتژی‌های سخت‌گیرانه برای استخر تانسورها (Tensor Pooling) و بازاستفاده از حافظه را اجرا کنند و صراحتاً متد .dispose() را روی دستگیره‌های تانسور ONNX فراخوانی کنند تا از نشت حافظه در Heap موتور V8 جلوگیری شود.
اندازه باندل و مقداردهی اولیه شبکه
مدل‌های سمت کلاینت باید هنگام بارگذاری اولیه صفحه دانلود شوند. مدل‌های ترنسفورمر کوانتیده می‌توانند از ۱۵ مگابایت تا بیش از ۱۰۰ مگابایت باشند. برای جلوگیری از کند شدن بارگذاری صفحه، تیم‌های مهندسی باید این موارد را اجرا کنند:
- استراتژی‌های بارگذاری تنبل (Lazy Loading) هوشمند.
- دریافت تدریجی مدل با نمایشگرهای پیشرفت بصری.
- کش کردن مرورگر از طریق Cache API یا IndexedDB برای بارگذاری فوری در بازدیدهای بعدی.
تکه تکه شدن سخت‌افزاری
همه کاربران GPUهای رده‌بالا ندارند. یک موتور آماده تولید باید جایگزین‌های مناسبی داشته باشد. اگر مقداردهی اولیه WebGPU به دلیل درایورهای قدیمی شکست خورد، موتور باید استثنا را بگیرد، به WebGL بازگردد و در صورت شکست مجدد، به‌طور بی‌درز به اجرای CPU از طریق WebAssembly چندرشته‌ای تغییر وضعیت دهد. این امر عملکرد را در همه دستگاه‌ها، از ایستگاه‌های کاری پیشرفته تا گوشی‌های موبایل ارزان‌قیمت، تضمین می‌کند.
این چرخش، اقتصاد SaaSهای هوش مصنوعی را به‌طور بنیادی تغییر می‌دهد. با انتقال بار محاسباتی به سخت‌افزار کاربر، شرکت‌ها می‌توانند صورت‌حساب‌های تکراری زیرساخت ابری را حذف کنند و در عین حال پردازشی فوری و خصوصی را به کاربران ارائه دهند.
برای توسعه‌دهندگان، این بدان معناست که مرورگر از یک نمایشگر سند به یک محیط اجرای قدرتمند برای هوش بصری در لحظه تبدیل شده است. توانایی تولید بردار‌های معنایی متراکم به‌صورت محلی، جست‌وجوهای معنایی فوق‌سریع را بدون حتی یک درخواست شبکه ممکن می‌کند.
گام بعدی شما
- بررسی مستندات ONNX Runtime Web برای تبدیل مدل‌های PyTorch به فرمت
.onnx. - تست قابلیت‌های WebGPU در مرورگرهای کروم و اج برای سنجش سرعت استنتاج در سخت‌افزارهای مختلف.
- مطالعه کتاب Generative Media & Visual Workflow Engines برای درک عمیق‌تر خط لوله‌های استریم رسانه‌ای در TypeScript.
اما داستان سخت‌افزاری این تحول حتی شگفت‌انگیزتر است — به تحلیل ما درباره‌ی تراشه‌های Blackwell مراجعه کنید.
گفتگو