چگونه نرم‌افزار رایگان هوش مصنوعی ارتقادهنده‌ی کیفیت ویدیو با استفاده از WebGPU + WebCodecs، بدون هیچ هزینه‌ی سروری، به ۲۵۰ هزار کاربر فعال ماهانه خدمات ارائه می‌دهد؟

Samrat Bhattacharyya

منتشر شده: ۵ مارس ۲۰۲۶

من، سام باتاچاریا ، در ابتدا Free AI Video Upscaler را به عنوان یک پروژه سرگرمی متن‌باز در سال ۲۰۲۳ ساختم. این پروژه به طور غیرمنتظره و ارگانیک به ۲۵۰،۰۰۰ کاربر فعال ماهانه (MAU) (تا فوریه ۲۰۲۶) افزایش یافت. این امر به این دلیل امکان‌پذیر شد که این پروژه با پردازش هوش مصنوعی سمت کلاینت ساخته شده است که هیچ هزینه پردازش سروری ندارد. می‌توانید ویدیو را در مرورگر، بدون نیاز به نصب نرم‌افزار یا ورود به سیستم، بهبود دهید.

این سند توضیح می‌دهد که چگونه من از WebGPU و WebCodecs برای افزودن پردازش رایگان سمت کلاینت به برنامه‌ام استفاده کردم.

بررسی اجمالی نرم‌افزار رایگان افزایش‌دهنده کیفیت تصویر با هوش مصنوعی.

چالش‌های مربوط به هزینه سرور

در نقش قبلی، من زیرساخت هوش مصنوعی را برای یک ابزار پخش زنده مبتنی بر مرورگر با میلیون‌ها کاربر و هزینه‌های بودجه قابل توجه برای پردازش ویدیوها در سمت سرور مدیریت می‌کردم.

پردازش ویدیوی سمت سرور ۲۰٪ از بودجه را تشکیل می‌داد. این یک هزینه متغیر عمده برای شرکت بود، که پس از حقوق، در رتبه دوم قرار می‌گرفت. برای هر ویژگی هوش مصنوعی، مانند رونویسی، بهبود صدا یا تصویر، تیم با الزامات بودجه‌ای سختگیرانه‌ای (۰.۱ دلار برای هر ساعت ویدیو) برای پیاده‌سازی‌های جدید مواجه بود.

هوش مصنوعی سمت کلاینت تنها استثنا بود، با ویژگی‌هایی مانند پس‌زمینه‌های مجازی و حذف نویز پس‌زمینه که با استفاده از یک SDK سمت کلاینت داخلی پیاده‌سازی شده بود. این ویژگی‌های هوش مصنوعی هیچ هزینه پردازش سروری را متحمل نشدند زیرا استنتاج مدل و پردازش ویدیو در دستگاه کاربر رخ داد.

رابط‌های برنامه‌نویسی کاربردی (API) مانند WebCodecs امکان ساخت خطوط لوله کامل پردازش ویدیو، از جمله مجموعه‌های کامل ویرایش ویدیو، را در مرورگر فراهم می‌کنند. WebGPU هوش مصنوعی سمت کلاینت را بسیار کارآمدتر می‌کند.

پردازش سمت کلاینت با WebCodecs و WebGPU

ابزار رایگان ارتقاء کیفیت تصویر با هوش مصنوعی (AI Video Upscaler) از کیت توسعه نرم‌افزار متن‌باز WebSR استفاده می‌کند. این کیت، تصویر را دریافت، آن را ارتقاء داده و نتیجه را روی بوم نقاشی نمایش می‌دهد.

یک شبکه عصبی با وضوح فوق‌العاده، با اعمال پیچش‌های مکرر تصویر (ضرب‌های ماتریسی) برای استخراج ویژگی‌های تصویر از یک تصویر منبع، ارتقاء مقیاس را انجام می‌دهد. سپس پیچش‌های بیشتری بر روی این ویژگی‌های تصویر اعمال می‌شود تا تصویر نهایی با کیفیت بالاتر بازسازی شود.

نموداری که فرآیند فوق تفکیک‌پذیری را نشان می‌دهد.

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 SDK را با هر مدلی جایگزین کنید، با استفاده از چارچوب‌هایی مانند MediaPipe یا TensorflowJS. خط لوله پردازش ویدیو از WebCodecs استفاده می‌کند و به عنوان یک خط لوله تبدیل کد ساختار یافته است.

فلوچارتی که خط لوله‌ی تبدیل کد را نشان می‌دهد.

خط لوله به چند مرحله تقسیم می شود:

Demuxing : تکه‌های ویدیویی کدگذاری شده را از یک شیء File می‌خواند.
رمزگشایی : تکه‌های کدگذاری شده را به اشیاء VideoFrame رمزگشایی می‌کند.
پردازش : ویدئوفریم ورودی را به یک ویدئوفریم ارتقا یافته تبدیل می‌کند.
رمزگذاری : اشیاء VideoFrame ارتقا یافته را به قطعات رمزگذاری شده جدید رمزگذاری می‌کند.
Muxing : تکه‌های کدگذاری شده خروجی را در فایل خروجی می‌نویسد.

این خط لوله از API Streams استفاده می‌کند. رمزگذاری، رمزگشایی و demuxing یا muxing به صورت جریان‌هایی پیاده‌سازی می‌شوند. برای نمایش، این پروژه از ابزارهای muxing و stream از کتابخانه 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 مراجعه کنید.

API استریم‌ها به ویژه برای WebCodecs مفید است زیرا در صورت بارگذاری بیش از حد یک مرحله، مانند رمزگذاری، از فشار معکوس برای کاهش خودکار سرعت مراحل بالادستی، مانند رمزگشایی، استفاده می‌کند. این امر از مشکلات حافظه جلوگیری کرده و کارایی را بهبود می‌بخشد.

این یک تجربه کاربری ساده ایجاد می‌کند:

شما یک ویدیو را با ورودی فایل آپلود می‌کنید.
سیستم، ویدیو را به صورت محلی پردازش می‌کند.
می‌توانید نتیجه را به صورت یک Blob دانلود کنید.

می‌توانید اطلاعات بیشتری در مورد ساخت یک خط لوله تبدیل کد را در WebCodecs بیابید. همچنین می‌توانید خط لوله پردازش کامل برای Free AI Video Upscaler را که کمتر از ۴۰۰ خط کد است، در GitHub مشاهده کنید.

نتایج

تنها تبلیغ Free AI Video Upscaler یک پست در ردیت بود. با وجود این، به لطف تبلیغات دهان به دهان کاربرانی که این ابزار را در انجمن‌ها به اشتراک می‌گذارند، تعداد کاربران فعال ماهانه آن به ۲۵۰،۰۰۰ نفر رسیده است که نرخ رشد ماهانه ۳۲٪ را نشان می‌دهد.

۲۵۰،۰۰۰

کاربران فعال ماهانه

۱۰۰۰۰

ویدیوهای پردازش‌شده در روز

۳۰۰۰۰

ساعت‌های پردازش ویدیو در هر ماه

0 _دلار

هزینه‌های پردازش سرور

این سرویس روزانه ۱۰،۰۰۰ ویدیو (۳۰،۰۰۰ ساعت ویدیو در ماه) را بدون هیچ هزینه سروری پردازش می‌کند.

ابزار رایگان ارتقاء کیفیت ویدیوی هوش مصنوعی (AI Video Upscaler) به عنوان ابزاری برای جذب مشتری برای سرویس‌های ارتقاء کیفیت هوش مصنوعی پولی عمل می‌کند. من این سرویس را نیز با استفاده از مدل‌های قدرتمندتر هوش مصنوعی که در سمت سرور اجرا می‌شوند، ساختم. این رویکرد بدون بازاریابی سودآوری ایجاد می‌کند، در حالی که برنامه اولیه رایگان و متن‌باز باقی می‌ماند.

توصیه‌ها و منابع

قبل از WebCodecs و WebGPU، برنامه‌های کاربردی با پردازش فشرده ویدیو یا به نرم‌افزار دسکتاپ نیاز داشتند که می‌توانست دست و پا گیر باشد، یا به پردازش پرهزینه سمت سرور. هزینه‌های سرور اغلب بخش قابل توجهی از هزینه‌های عملیاتی یک برنامه ویدیویی را تشکیل می‌داد.

این APIهای مرورگر به شما امکان می‌دهند برنامه‌های پردازش ویدیوی سمت کلاینت کارآمدی بسازید. این برنامه‌ها نسبت به نرم‌افزارهای دسکتاپ، کاربرپسندتر و با اصطکاک کمتری هستند و همچنین نسبت به پردازش سمت سرور، مقرون‌به‌صرفه‌تر و مقیاس‌پذیرتر هستند.

اگر علاقه‌مند به کسب اطلاعات بیشتر در مورد WebCodecs و نحوه ساخت برنامه‌های ویدیویی مانند Free AI Video Upscaler یا Katana هستید، WebCodecsFundamentals را مطالعه کنید. در این کتاب یاد خواهید گرفت که چگونه برنامه‌های WebCodecs تولیدی را با تمرکز بر جزئیات تولید و پیاده‌سازی بسازید.