تشغيل نماذج مولّدة داخل المتصفح باستخدام WebGPU وONNX Runtime Web

مقدمة: لماذا تشغيل النماذج داخل المتصفح مهم الآن؟

تشغيل نماذج مولّدة (Generative) داخل المتصفح يوفّر خصوصية أفضل، زمن استجابة منخفض، وإمكانيات عمل دون الحاجة لسحابة دائمة. مع تقدّم WebGPU وظهور الدعم في بيئات ONNX Runtime Web، أصبح بالإمكان استغلال قوة وحدات المعالجة الرسومية مباشرة من JavaScript لتسريع الاستدلال.

في هذا المقال العملي سنغطي: تحويل النماذج إلى ONNX، كيفية تقليل الذاكرة واستخدام التخزين المحلي (IndexedDB) للنماذج الكبيرة، خيارات التنفيذ (WebGPU مقابل WASM/WebGL)، ونصائح لتحسين تجربة المستخدم العربية (RTL، خطوط، واستجابة الواجهة).

خطوات عملية: تحويل نموذجك إلى ONNX وتجهيزه للمتصفح

الخطوة الأساسية هي إخراج النموذج بصيغة ONNX مع مراعاة الدقائق التالية:

• تصدير من PyTorch أو TensorFlow: استخدم torch.onnx.export() لنماذج PyTorch أو أدوات مثل tf2onnx لنماذج TensorFlow. تأكد من تحديد dynamic_axes للمداخل المتغيرة الحجم إن لزم.
• اختبار النموذج محلياً: شغّل النموذج في بيئة Python/Node للتحقق من الاتساق قبل التحويل للويب.
• البيانات الخارجية (external_data): للنماذج الكبيرة استخدم ميزة external_data لتفكيك الملف إلى ملفات أوزان خارجية يمكن تنزيلها تدريجياً بدلاً من ملف ONNX أحادي كبير. هذه الطريقة مفيدة لتجاوز قيود التحميل في المتصفحات.

مثال تصدير PyTorch مبسّط:

import torch
# model = ...
input_example = torch.randn(1, 3, 224, 224)
torch.onnx.export(model, input_example, "model.onnx", opset_version=14, dynamic_axes={"input":{0:"batch"}})

تقليل الحجم والكمون: الكمّنة، التخزين المؤقت، والبدائل

لتشغيل نموذج ضمن قيود ذاكرة المتصفح يجب تقليل حجم الأوزان وزمن التحميل. الأدوات والخطوات العملية:

1. الكمّنة (Quantization): استخدم الأدوات المدمجة في ONNX Runtime لتطبيق الكمّنة الديناميكية أو الثابتة (مثلاً إلى INT8 أو حتى إلى 4-bit حيث تدعمها المكتبة) لتقليل الحجم واستهلاك الذاكرة. هذا قد يقلل الدقة قليلاً لكنه يسرّع الاستدلال ويخفض الذاكرة المطلوبة.
2. تخزين النماذج في IndexedDB: بعد التنزيل الأولي للنموذج، خزّنه في IndexedDB ليعمل ككاش محلي ويمنع إعادة التنزيل عند زيارات لاحقة. ONNX Runtime Web يقدّم أمثلة ونصائح للعمل مع ملفات خارجية وأماكن حفظها.
3. تقسيم النموذج أو تحميل أجزاء حسب الحاجة: للنماذج الكبيرة، فكّر بتقسيم الأوزان إلى ملفات صغيرة وتحميلها تدريجياً (lazy load) بحسب ميزات المستخدم أو دقة الاستدلال المطلوبة.
4. العودة إلى WASM أو WebGL عند غياب WebGPU: لا يزال من الأفضل توفير مسار بديل (WASM) لأن بعض الأجهزة أو إصدارات المتصفحات قد لا تدعم WebGPU. ONNX Runtime Web يوفر مزوّدات تنفيذية متعددة ويمكنك اختيارها ديناميكيًا.

تقدير سريع لحجم الذاكرة: المعامل الواحد بتنسيق float32 يستهلك 4 بايت. لذلك نموذج بحجم 100 مليون معلمة يحتاج تقريباً 400 ميجابايت للأوزان فقط قبل أي ضغوط تشغيلية — استخدم الكمّنة أو نماذج أخف إن كانت الذاكرة محدودة.

تشغيل عبر WebGPU وONNX Runtime Web: إعداد وجلسة استدلال

عند جاهزية النموذج يمكنك إنشاء جلسة استدلال في المتصفح واختيار مزوّد تنفيذ WebGPU. أمثلة مرجعية في توثيق ONNX Runtime Web توضح كيفية تهيئة الجلسة والاستفادة من WebGPU للحوسبة المتوازية.

مثال مبسّط لبدء جلسة (JS):

import * as ort from 'onnxruntime-web';
const session = await ort.InferenceSession.create('model.onnx', { executionProviders: ['webgpu'] });
const inputTensor = new ort.Tensor('float32', inputData, [1,3,224,224]);
const output = await session.run({ input: inputTensor });

نصائح مهمة: استخدم Web Workers لمعزلية التنفيذ ومنع تجمّد واجهة المستخدم، وتابع حالة التحميل عبر مؤشرات تقدم تظهر للمستخدم للحد من إحساس البطء.

تحسين تجربة المستخدم العربية (RTL، خطوط، وامتثال الوصول)

عند دمج واجهة عربية مع نموذج مولّد ضع بعين الاعتبار:

• دعم RTL وفصل النص: تأكد من تجهيز النصوص المتولدة لعرض صحيح عبر dir="rtl" وعناصر CSS مناسبة (مثل text-align). اختبر تقطيعات الأسطر والاقتطاع (truncation) لأن اتجاه النص يغيّر سلوك التفاف الأحرف.
• خطوط عربية مناسبة: اختر خطوطاً تدعم علامات التشكيل والرموز العربية. قد تحتاج إلى تحميل نسخ خفيفة للخطوط عبر font subsets لتقليل زمن التحميل.
• إظهار تقدم ذكي: عند استدعاء نماذج كبيرة قد يستغرق التحميل والدعوة وقتاً — اعرض رسائل تدريجية، اقتباسات أولية (streaming partial outputs) أو مخرجات مُبسّطة أولاً لتحسين الإحساس بسرعة الاستجابة.
• خصوصية وموافقات: وضّح للمستخدم أن الاستدلال يجري محلياً إن لم يُرسَل أي شيء للسيرفر — نقطة بيع مهمة للمستخدمين الحريصين على الخصوصية.

هذه التحسينات الصغيرة ترفع من جودة تجربة المستخدم العربي وتقلل الاحتكاك مع واجهات تعمل داخل المتصفح.

خاتمة وتوصيات سريعة

باستخدام WebGPU وONNX Runtime Web يمكن للمطوّرين العرب إنشاء تطبيقات مولِّدة تعمل محلياً داخل المتصفح مع فوائد واضحة للخصوصية والأداء. ابدأ بالنماذج الصغيرة أو الكمّنة، وفكّر في استراتيجية تخزين مؤقت (IndexedDB) وتقسيم الأوزان للنماذج الكبيرة. راقب دعم المتصفحات ووفّر طريق العودة إلى WASM عندما لا يتوفر WebGPU. للمراجع الرسمية والتفاصيل التقنية انظر توثيق ONNX Runtime Web ودلائل تحويل النماذج.

هل تود مثالاً عملياً (مستودع GitHub) يطبّق تحويل نموذج عربي صغير ويشغّله على المتصفح؟ أستطيع تحضير دليل خطوة‑بـ‑خطوة مع ملفات جاهزة للتحميل.