كيف تستخدم أداة Free AI Video Upscaler واجهتَي WebGPU وWebCodecs لتقديم الخدمة إلى 250 ألف مستخدم نشط شهريًا بدون أي تكاليف على الخادم؟

Samrat Bhattacharyya

تاريخ النشر: 5 مارس 2026

أنا سام باتاتشاريا، وقد أنشأت في البداية أداة Free AI Video Upscaler كمشروع هواية مفتوح المصدر في عام 2023. وقد نما بشكل غير متوقّع وعضوي إلى 250,000 مستخدم نشط شهريًا (MAU) (اعتبارًا من فبراير 2026). كان ذلك ممكنًا لأنّ المشروع تم إنشاؤه باستخدام معالجة الذكاء الاصطناعي من جهة العميل، ما يعني عدم تكبّد أي تكاليف لمعالجة البيانات على الخادم. يمكنك تحسين الفيديو في المتصفّح بدون الحاجة إلى تثبيت برامج أو تسجيل الدخول.

يوضّح هذا المستند كيف استخدمت WebGPU وWebCodecs لإضافة معالجة مجانية من جهة العميل إلى تطبيقي.

نظرة عامة على أداة Free AI Video Upscaler
نظرة عامة على أداة "تحسين جودة الفيديو باستخدام الذكاء الاصطناعي" المجانية

تحديات متعلّقة بتكلفة الخادم

في وظيفة سابقة، أدرتُ البنية الأساسية للذكاء الاصطناعي في أداة للبث المباشر مستندة إلى المتصفح يستخدمها الملايين، وكانت تتطلّب ميزانية كبيرة لمعالجة الفيديوهات من جهة الخادم.

شكّلت معالجة الفيديو من جهة الخادم% 20 من الميزانية. كانت هذه التكاليف المتغيرة من أهم التكاليف التي تتحمّلها الشركة، إذ كانت تأتي في المرتبة الثانية بعد الرواتب. بالنسبة إلى كل ميزة من ميزات الذكاء الاصطناعي، مثل ميزة تحويل الصوت إلى نص أو ميزة تحسين الصوت أو الفيديو، كان على الفريق الالتزام بمتطلبات صارمة بشأن الميزانية (0.1 دولار أمريكي لكل ساعة من الفيديو) عند تنفيذ الميزات الجديدة.

كان الذكاء الاصطناعي من جهة العميل هو الاستثناء الوحيد، حيث تم تنفيذ ميزات مثل الخلفيات الافتراضية وإزالة الضوضاء في الخلفية باستخدام حزمة تطوير برامج (SDK) داخلية من جهة العميل. لم تتكبّد هذه الميزات المستندة إلى الذكاء الاصطناعي أي تكاليف لمعالجة البيانات على الخادم لأنّ استنتاج النموذج ومعالجة الفيديو تمّا على جهاز المستخدم.

تتيح واجهات برمجة التطبيقات، مثل WebCodecs، إنشاء مسارات كاملة لمعالجة الفيديو، بما في ذلك حِزم كاملة لتحرير الفيديو، في المتصفّح. تساهم واجهة برمجة التطبيقات WebGPU في زيادة كفاءة الذكاء الاصطناعي من جهة العميل بشكل كبير.

المعالجة من جهة العميل باستخدام WebCodecs وWebGPU

يستخدم تطبيق Free AI Video Upscaler حزمة WebSR SDK المفتوحة المصدر. تقبل حزمة تطوير البرامج (SDK) هذه صورة، وتزيد دقتها، ثم ترسم النتيجة على لوحة.

تُجري الشبكة العصبية الفائقة الدقة عملية التكبير من خلال تطبيق عمليات التفاف متكررة للصور (عمليات ضرب المصفوفات) لاستخراج ميزات الصورة من صورة مصدر. بعد ذلك، يتم تطبيق المزيد من الالتفافات على ميزات الصورة هذه لإعادة إنشاء الصورة النهائية بجودة أعلى.

مخطّط يوضّح عملية تحسين الدقة الفائقة
مخطّط بياني يوضّح عملية الدقة سوبر.

تنفّذ WebSR طبقات الالتفاف الخاصة بالشبكة العصبونية هذه كبرامج تظليل حسابية في WebGPU. على سبيل المثال، يمكنك الاطّلاع على مثال للطبقة والشبكة الكاملة. عند استدعاء طريقة العرض، تشغّل حزمة SDK كل طبقة من شبكة تحسين الدقة وتعرض الصورة النهائية على لوحة عرض. يمكنك الاطّلاع على مزيد من المعلومات حول تنفيذ الشبكة العصبونية.

import WebSR from "https://esm.sh/@websr/websr@0.0.15";

const gpu = await WebSR.initWebGPU();
const canvas = document.getElementById("canvas");

const websr = new WebSR({
  network_name: "anime4k/cnn-2x-l",
  weights: await (
    await fetch("https://katana.video/files/cnn-2x-lg-2d-animation.json")
  ).json(),
  gpu,
  canvas,
});

const img = document.getElementById("source");
const bitmap = await createImageBitmap(img);

await websr.render(bitmap);

يمكنك الاطّلاع على مثال WebSR SDK على Codepen.

يمكنك استبدال حزمة تطوير البرامج WebSR بأي نموذج باستخدام أُطر عمل مثل MediaPipe أو TensorflowJS. تستخدم عملية معالجة الفيديو WebCodecs ويتم تنظيمها كعملية تحويل ترميز.

مخطط انسيابي يعرض مسار تحويل الترميز
مخطط انسيابي يعرض مسار تحويل الترميز

يتم تقسيم خط الإنتاج إلى عدة مراحل:

  1. إزالة التداخل: قراءة أجزاء الفيديو المشفرة من عنصر File
  2. فك الترميز: يتم فك ترميز الأجزاء المرمّزة إلى عناصر VideoFrame.
  3. المعالجة: تحويل VideoFrame المدخل إلى VideoFrame تم تحسين دقتها.
  4. الترميز: يرمّز عناصر VideoFrame التي تمّت زيادة حجمها إلى أجزاء مرمّزة جديدة.
  5. الدمج: يكتب هذا الخيار مقاطع الإخراج المشفّرة في ملف الإخراج.

تستخدم عملية النقل Streams API. يتم تنفيذ عمليات التشفير وفك التشفير وإزالة التداخل أو إضافة التداخل كتدفقات. للعرض التوضيحي، يستخدم المشروع أدوات دمج البث وتدفقه من مكتبة webcodecs-utils. توفّر هذه المكتبة برامج تضمين البث لكل من VideoEncoder وVideoDecoder.

import {
  SimpleDemuxer,
  VideoDecodeStream,
  VideoProcessStream,
  VideoEncodeStream,
  SimpleMuxer,
} from "https://esm.sh/webcodecs-utils";

import WebSR from "https://esm.sh/@websr/websr@0.0.15";

// Fetch demo video
const arrayBuffer = await (
  await fetch("https://katana.video/files/hero-small.mp4")
).arrayBuffer();
const videoFile = new File([arrayBuffer], "hero-small.mp4", {
  type: "video/mp4",
});

// Initialize WebGPU and WebSR
const gpu = await WebSR.initWebGPU();
const weights = await (
  await fetch("https://katana.video/files/cnn-2x-lg-2d-animation.json")
).json();
const websr = new WebSR({
  network_name: "anime4k/cnn-2x-l",
  weights,
  gpu,
  canvas,
});

// Set up demuxer
const demuxer = new SimpleDemuxer(videoFile);
await demuxer.load();
const decoderConfig = await demuxer.getVideoDecoderConfig();

const encoderConfig = {
  codec: "avc1.4d0034", // https://webcodecsfundamentals.org/codecs/avc1.4d0034.html
  width: 640,
  height: 360,
  bitrate: 1000000,
  framerate: 30,
};

// Set up muxer
const muxer = new SimpleMuxer({ video: "avc" });

// Build the upscaling pipeline
await demuxer
  .videoStream()
  .pipeThrough(new VideoDecodeStream(decoderConfig))
  .pipeThrough(
    new VideoProcessStream(async (frame) => {
      // AI upscale with WebSR
      await websr.render(frame);
      const upscaledFrame = new VideoFrame(canvas, {
        timestamp: frame.timestamp,
        duration: frame.duration,
      });

      return upscaledFrame;
    }),
  )
  .pipeThrough(new VideoEncodeStream(encoderConfig))
  .pipeTo(muxer.videoSink());

// Get output
const blob = await muxer.finalize();

يمكنك الاطّلاع على المخطط الكامل على Codepen.

تكون واجهة برمجة التطبيقات Streams API مفيدة بشكل خاص مع WebCodecs لأنّها تستخدم التحكّم في معدّل نقل البيانات لإبطاء المراحل الأولية تلقائيًا، مثل فك الترميز، إذا تم التحميل الزائد على إحدى المراحل، مثل الترميز. يساعد ذلك في تجنُّب مشاكل الذاكرة وتحسين الكفاءة.

يؤدي ذلك إلى توفير تجربة مستخدم مباشرة:

  1. تحميل فيديو باستخدام إدخال ملف
  2. يعالج النظام الفيديو محليًا.
  3. يمكنك تنزيل النتيجة ككائن ثنائي كبير (Blob).

يمكنك الاطّلاع على مزيد من المعلومات حول إنشاء مسار ترميز وتحويل في WebCodecs. يمكنك أيضًا الاطّلاع على مسار المعالجة الكامل لأداة "تحسين جودة الفيديو بالذكاء الاصطناعي مجانًا"، والذي يتضمّن أقل من 400 سطر من الرمز، على GitHub.

النتائج

كان الترويج الوحيد لخدمة Free AI Video Upscaler عبارة عن منشور واحد على Reddit. وعلى الرغم من ذلك، نما التطبيق بشكل طبيعي ليصل إلى 250,000 مستخدم نشط شهريًا، مع معدّل نمو شهري يبلغ% 32، وذلك بفضل التوصيات الشفهية من المستخدمين الذين شاركوا الأداة على المنتديات.

    250000

    المستخدمون النشطون شهريًا

    10,000

    الفيديوهات التي تتم معالجتها يوميًا

    30,000

    عدد ساعات الفيديو التي تتم معالجتها شهريًا

    0 $

    تكاليف معالجة الخادم

ويعالج 10,000 فيديو يوميًا (30,000 ساعة من الفيديو شهريًا) بدون أي تكاليف للخادم.

تعمل أداة Free AI Video Upscaler كأداة لجذب العملاء المحتملين لخدمة AI Upscaling المدفوعة. لقد أنشأتُ هذه الخدمة أيضًا باستخدام نماذج ذكاء اصطناعي أكثر فعالية تعمل على جهة الخادم. ويحقق هذا الأسلوب الربحية بدون تسويق، بينما يظل التطبيق الأولي مجانيًا ومفتوح المصدر.

الاقتراحات والمراجع

قبل توفّر واجهتَي WebCodecs وWebGPU، كانت التطبيقات التي تتطلّب معالجة مكثّفة للفيديو تحتاج إلى برامج على أجهزة الكمبيوتر، ما قد يكون أمرًا مرهقًا، أو إلى معالجة مكلفة من جهة الخادم. غالبًا ما تمثّل تكاليف الخادم جزءًا كبيرًا من تكاليف التشغيل لتطبيقات الفيديو.

تتيح لك واجهات برمجة التطبيقات هذه إنشاء تطبيقات فعّالة لمعالجة الفيديو من جهة العميل. تتميّز هذه التطبيقات بسهولة الاستخدام وتتطلّب جهدًا أقل من برامج الكمبيوتر، كما أنّها أكثر فعالية من حيث التكلفة وأكثر قابلية للتوسّع من المعالجة من جهة الخادم.

إذا كنت مهتمًا بمعرفة المزيد عن WebCodecs وكيفية إنشاء تطبيقات فيديو مثل Free AI Video Upscaler أو Katana، يمكنك الاطّلاع على WebCodecsFundamentals. ستتعرّف على كيفية إنشاء تطبيقات WebCodecs جاهزة للنشر مع التركيز على تفاصيل النشر والتنفيذ.