WebGPU: تشغيل نماذج الذكاء الاصطناعي في المتصفح بدون خادم

لماذا تشغيل نموذج ذكاء اصطناعي في المتصفح؟

في عام 2026، أصبح إرسال كل طلب إلى خادم بعيد للحصول على استجابة ذكاء اصطناعي يبدو متقادمًا بشكل متزايد. تكاليف النطاق الترددي، وزمن الاستجابة الشبكي، ومخاوف الخصوصية تدفع المطورين نحو بديل جذري: تشغيل النماذج مباشرة في متصفح المستخدم.

WebGPU، واجهة برمجة التطبيقات القياسية الجديدة من W3C لحوسبة GPU المُسرّعة على الويب، تجعل هذا الوعد قابلًا للتحقيق. على عكس WebGL المصمم لعرض الرسومات، يوفر WebGPU وصولًا مباشرًا لحوسبة GPU ذات الأغراض العامة — وهو بالضبط ما تحتاجه نماذج تعلم الآلة.

WebGPU في 2026: منظومة ناضجة

توافق المتصفحات

تجاوز دعم WebGPU عتبة حرجة:

• Chrome وEdge: دعم أصلي منذ الإصدار 113 (Windows، macOS، ChromeOS)
• Firefox 147: WebGPU مُفعّل افتراضيًا على Windows وARM64 macOS
• Safari: مُضمّن افتراضيًا في iOS 26، iPadOS 26، وmacOS Tahoe

تغطية المتصفحات المتوافقة عالميًا تتجاوز الآن 70%، مما يجعل النشر في بيئة الإنتاج قابلًا للتطبيق لغالبية المستخدمين.

الأداء الفعلي

تُظهر المقاييس المرجعية الحديثة نتائج مبهرة:

• أسرع بـ 3 إلى 15 مرة من WebAssembly وحده لنماذج المحوّلات
• 20 إلى 60 رمزًا في الثانية لنماذج اللغة الصغيرة (SLM)
• زمن استدلال أقل من 30 مللي ثانية لمعظم المهام
• WebLLM يصل إلى 80% من الأداء الأصلي لبعض النماذج

التكميم بدقة INT-4 يقلل حجم الذاكرة بنسبة 75%، مما يمكّن نماذج مثل Llama-3.1-8B من العمل على أجهزة المستهلكين.

المكتبات التي تُبسّط كل شيء

Transformers.js (Hugging Face)

Transformers.js هو الجسر بين منظومة Hugging Face والمتصفح. في الإصدار 3، تدعم المكتبة WebGPU وONNX Runtime Web أصليًا.

import { pipeline } from "@huggingface/transformers";
 
// تحليل المشاعر — يعمل بالكامل في المتصفح
const classifier = await pipeline(
  "sentiment-analysis",
  "Xenova/distilbert-base-uncased-finetuned-sst-2-english",
  { device: "webgpu" }
);
 
const result = await classifier("WebGPU changes everything!");
// [{ label: 'POSITIVE', score: 0.9998 }]

Transformers.js يتعامل تلقائيًا مع تحميل النموذج، وتخزينه مؤقتًا في المتصفح، والتنفيذ عبر WebGPU عند توفره.

WebLLM (MLC-AI)

WebLLM متخصصة في نماذج اللغة الكبيرة. تقوم بتجميع النماذج عبر Apache TVM للتنفيذ الأمثل على WebGPU.

import { CreateMLCEngine } from "@mlc-ai/web-llm";
 
const engine = await CreateMLCEngine("Llama-3.1-8B-Instruct-q4f16_1-MLC");
 
const reply = await engine.chat.completions.create({
  messages: [{ role: "user", content: "اشرح WebGPU في جملة واحدة." }],
});
 
console.log(reply.choices[0].message.content);

واجهة البرمجة متوافقة مع OpenAI، مما يُسهّل الانتقال من بنية خلفية موجودة.

حالات استخدام عملية

1. الترجمة الخاصة

مترجم يعمل بنموذج متعدد اللغات ويعمل بدون اتصال. لا تغادر أي بيانات الجهاز — مثالي للوثائق الحساسة أو البيئات الخاضعة للتنظيم.

2. ترجمة الفيديو الفورية

أظهر Xenova (Hugging Face) ترجمة فيديو في الوقت الفعلي في المتصفح باستخدام نموذج LFM2-VL من Liquid AI. إرسال كل إطار إلى خادم سيكون غير عملي من حيث النطاق الترددي وزمن الاستجابة.

3. مساعدات ذكاء اصطناعي مضمّنة

روبوتات محادثة ومساعدات تعمل بدون خادم خلفي، مما يُخفّض تكاليف الخادم إلى الصفر مع ضمان أوقات استجابة فورية.

4. تحليل المستندات السرية

استخراج المعلومات، والتلخيص، وتصنيف المستندات مباشرة في المتصفح — مناسب بشكل خاص لقطاعات المالية والصحة والقانون.

القيود التي يجب معرفتها

الاستدلال في المتصفح ليس حلًا شاملًا:

• حجم النموذج: النماذج من 1 إلى 8 مليار معامل تعمل بشكل جيد؛ أما أكبر من ذلك فذاكرة GPU لدى العميل تصبح غير كافية
• التحميل الأول: تحميل النموذج لأول مرة قد يبلغ عدة غيغابايت (لكن يُخزّن مؤقتًا بعد ذلك)
• توافق الأجهزة: حوالي 45% من الأجهزة القديمة لا تدعم جميع ميزات WebGPU
• أخطاء تعريفات GPU: بعض تركيبات GPU/التعريف قد تسبب تشوهات أو أعطال

القاعدة: استخدم الاستدلال في المتصفح للمهام التي تكون فيها الخصوصية أو زمن الاستجابة أو تكلفة الخادم حرجة، واحتفظ بالخادم الخلفي للنماذج الثقيلة والمهام المعقدة.

كيف تبدأ

الخطوة 1: التحقق من دعم WebGPU

if (!navigator.gpu) {
  console.log("WebGPU غير مدعوم — الرجوع إلى WASM");
} else {
  const adapter = await navigator.gpu.requestAdapter();
  console.log("تم اكتشاف GPU:", adapter.name);
}

الخطوة 2: تثبيت Transformers.js

npm install @huggingface/transformers

الخطوة 3: تحميل وتشغيل نموذج

import { pipeline } from "@huggingface/transformers";
 
const generator = await pipeline(
  "text-generation",
  "onnx-community/Qwen2.5-0.5B-Instruct",
  { device: "webgpu" }
);
 
const output = await generator("مزايا WebGPU هي", {
  max_new_tokens: 100,
});

يتم تحميل النموذج مرة واحدة، ويُخزّن في IndexedDB، وتبدأ عمليات التشغيل اللاحقة فورًا.

ماذا يعني هذا لمطوري الويب

WebGPU ليس مجرد أداة تجريبية. في 2026، يُعيد تعريف ما هو ممكن على جانب العميل:

• تخفيض التكاليف: صفر استدعاءات API، صفر خوادم GPU للصيانة
• الخصوصية افتراضيًا: البيانات لا تغادر الجهاز أبدًا
• زمن استجابة أدنى: لا رحلة ذهاب وإياب عبر الشبكة
• قابلية توسع لا نهائية: كل مستخدم يجلب قوته الحوسبية الخاصة

للشركات الصغيرة والمتوسطة والناشئة التي تريد دمج الذكاء الاصطناعي دون تفجير ميزانية البنية التحتية، يمثل الاستدلال في المتصفح عبر WebGPU فرصة استراتيجية كبرى.

مكتبات مثل Transformers.js وWebLLM قامت بالعمل الثقيل في التجريد. كل ما تبقى هو اختيار النموذج المناسب لحالة الاستخدام المناسبة — وترك GPU المستخدمين يقوم بالباقي.