شغّل نماذج الذكاء الاصطناعي فالمتصفح باستعمال WebGPU وTransformers.js

مقدمة

اليوم ولات إمكانية تشغيل نماذج الذكاء الاصطناعي مباشرة فالمتصفح بلا سيرفرات ولا Backends تقال. بفضل WebGPU، المتصفح كيقدر يستعمل كارت الشاشة (GPU) ديال الجهاز باش يسرّع الحسابات العميقة. فهاد المقال غادي نوريك خطوة بخطوة كيفاش تجرب نماذج جاهزة باستعمال مكتبة Transformers.js، وكيفاش تدوّرها على WebGPU مع FallBack إلى WASM إلا ما كانش الدعم.

شنو الفائدة؟

• خصوصية أقوى: البيانات كتّبقى محلياً عند المستخدم.
• تجربة أسرع ومنخفضة التكلفة: أقل Calls للسيرفر وأقل فواتير.
• سهل للنشر: مجرد ملفات ستاتيك على أي CDN/Hugo.

المتطلبات

• متصفح كيدعم WebGPU (Chrome 121+, Edge 121+, أو Safari Technology Preview).
• جهاز فيه GPU حديث نسبياً.
• مشروع Frontend بسيط (Hugo/Vanilla أو أي إطار).

نصيحة: جرّب أولاً على Chrome وأفعل WebGPU افتراضياً إذا كان مطفياً عندك.

إعداد المشروع

بما أن DigitalArabians كيعتمد Hugo، نقدروا نخدموا ب vanilla JS بسهولة. غادي نستعمل Transformers.js من CDN باش نبسطو البداية.

إضافة السكريبتات من CDN

<!-- index.html -->
<script type="module">
  import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@xenova/[email protected]/dist/transformers.min.js";

  // فعّل WebGPU إذا متاح، وإلا خليه يرجع لـ WASM
  // ملاحظة: بعض الأجهزة كتحتاج تفعيل WebGPU من chrome://flags
  env.backends.onnx.wasm.numThreads = navigator.hardwareConcurrency || 4;
  env.allowRemoteModels = true; // باش يحمل الموديلات تلقائياً من Hub

  // نحاولو نختارو WebGPU، وإذا فشل غادي يسقط تلقائياً على WASM
  env.backends.onnx.wasm.proxy = true;

  const status = document.getElementById('status');
  const output = document.getElementById('output');

  async function init() {
    status.textContent = 'كيحضّر النموذج...';

    // مثال 1: تصنيف مشاعر
    const sentiment = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english', {
      // backend: 'webgpu' // بعض الإصدارات كتدعم هذا الخيار مباشرة
    });

    const res = await sentiment("I love coding with WebGPU!");
    output.textContent = JSON.stringify(res, null, 2);

    // مثال 2: تحويل كلام -> نص (إن احتجت موديل صوتي خفيف)
    // const asr = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny.en');
    // const text = await asr("/path/to/audio.wav");
    // console.log(text);

    status.textContent = 'جاهز ✅';
  }

  init().catch(err => {
    console.error(err);
    status.textContent = 'وقع خطأ، جرّب تحديث المتصفح ولا تعطيل الإضافات.';
  });
  
</script>

<pre id="status">...</pre>
<pre id="output"></pre>

في هاد الكود، استعملنا pipeline ديال Transformers.js لتحميل موديل مصنف للمشاعر. إذا كان WebGPU مفعل، المكاتب اللي تحت من Transformers.js غادي تحاول تدير Execution على GPU (حسب الدعم)، وإلا غادي يرجع التنفيذ لـ WASM ب Threads متعددة.

دعم العربية داخل المتصفح

باش نخدمو العربية، نقدروا نستعْمِلو موديلات تدعم العربية للتصنيف أو للاستخراج. كمثال بسيط، تقدر تجرب موديلات multilingual:

import { pipeline } from "https://cdn.jsdelivr.net/npm/@xenova/[email protected]/dist/transformers.min.js";

const zeroShot = await pipeline('zero-shot-classification', 'Xenova/nli-deberta-v3-xsmall');

const labels = [
  'تقنية',
  'رياضة',
  'اقتصاد',
  'صحة'
];

const result = await zeroShot(
  'الذكاء الاصطناعي فالمتصفح كيوفّر أداء زوين وكيحافظ على الخصوصية',
  labels
);

console.log(result);

بالنسبة للتوليد (LLM)، كاين موديلات خفيفة كتخدم فالمتصفح ولكن الأداء كيتبدّل حسب الجهاز. إذا بغيتي نتائج أقوى، يمكن تستعمل Edge models (Nanollm/Qwen2.5-small) أو تخدم توليد على سيرفر خفيف وتخلي الاسترجاع والمعالجة الأولية محلياً.

أفضل الممارسات

• حافظ على حجم الموديل صغير: اختار نسخ tiny/base إلى حين التجربة.
• Cache محلي: اعتمد على browser cache و HTTP caching باش ما تعاودش تحميل الموديلات.
• Progressive enhancement: عطّل الميزات الثقيلة إلا كان الجهاز ضعيف (استعمل navigator.gpu للتأكد من الدعم).
• قياس الأداء: استعمل Performance API وسجل الزمن من التحميل لأول استدلال.

مثال واجهة بسيطة للتحقق من دعم WebGPU

const supported = !!navigator.gpu;
document.getElementById('gpu-check').textContent = supported ? 'WebGPU Supported ✅' : 'WebGPU Not Supported ❌';

<div id="gpu-check"></div>

مشاكل شائعة وحلول

• المتصفح ما كيدعمش WebGPU: فعلها من الإعدادات، أو استعمل Edge/Chrome محدث.
• تحميل الموديل بطيء: استعمل CDN قريب للمستخدمين، وفضّل موديلات أصغر.
• Crash بسبب الذاكرة: قصّر sequence length أو استعمل quantized models إذا متاحة.

خاتمة

WebGPU فالمتصفح كتحل الباب باش نبنيو تجارب AI سريعة، آمنة، وسهلة النشر. جرّب الأكواد اللي فوق، وشاركنا فالتعليقات شنو المشاريع اللي تبغي تدير: هل UI لتحليل المشاعر فالمقالات بالعربية؟ ولا تاغينغ تلقائي للمحتوى؟ وإذا بغيتي نسخة متقدمة تربط WebGPU مع RAG خفيف فالمتصفح، قولها لينا ونزيدو مقالات معمّقة.