ফ্রি এআই ভিডিও আপস্কেলার কীভাবে ওয়েবজিপিইউ + ওয়েবকোডেক ব্যবহার করে শূন্য সার্ভার খরচে ২৫০,০০০ এমএইউ পরিবেশন করে

Samrat Bhattacharyya

প্রকাশিত: ৫ মার্চ, ২০২৬

আমি, স্যাম ভট্টাচার্য , প্রাথমিকভাবে ২০২৩ সালে একটি ওপেন সোর্স শখ প্রকল্প হিসেবে ফ্রি এআই ভিডিও আপস্কেলার তৈরি করি। এটি অপ্রত্যাশিতভাবে এবং জৈবিকভাবে মাসিক সক্রিয় ব্যবহারকারীর সংখ্যা (এমএইউ) বৃদ্ধি পায় (ফেব্রুয়ারী ২০২৬ পর্যন্ত)। এটি সম্ভব হয়েছিল কারণ প্রকল্পটি ক্লায়েন্ট-সাইড এআই প্রক্রিয়াকরণের মাধ্যমে তৈরি করা হয়েছিল, যার কোনও সার্ভার প্রক্রিয়াকরণ খরচ নেই। আপনি সফ্টওয়্যার ইনস্টলেশন বা সাইন-ইন ছাড়াই ব্রাউজারে ভিডিও উন্নত করতে পারেন।

এই ডকুমেন্টটি ব্যাখ্যা করে যে কীভাবে আমি আমার অ্যাপ্লিকেশনে বিনামূল্যে, ক্লায়েন্ট-সাইড প্রক্রিয়াকরণ যোগ করার জন্য WebGPU এবং WebCodecs ব্যবহার করেছি।

সার্ভার খরচের চ্যালেঞ্জ

আগের ভূমিকায়, আমি লক্ষ লক্ষ ব্যবহারকারী এবং সার্ভার সাইডে ভিডিও প্রক্রিয়াকরণের জন্য উল্লেখযোগ্য বাজেট খরচ সহ একটি ব্রাউজার-ভিত্তিক লাইভ স্ট্রিমিং টুলের জন্য AI অবকাঠামো পরিচালনা করেছি।

সার্ভার-সাইড ভিডিও প্রসেসিং বাজেটের ২০% ছিল। এটি কোম্পানির জন্য একটি প্রধান পরিবর্তনশীল খরচ ছিল, বেতনের পরেই দ্বিতীয়। ট্রান্সক্রিপশন, অডিও বা ভিডিও বর্ধনের মতো প্রতিটি AI বৈশিষ্ট্যের জন্য, নতুন বাস্তবায়নের জন্য দলটিকে কঠোর বাজেটের প্রয়োজনীয়তার সম্মুখীন হতে হয়েছিল ($0.1 প্রতি ঘন্টা ভিডিও)।

ক্লায়েন্ট-সাইড এআই ছিল একমাত্র ব্যতিক্রম, যেখানে ভার্চুয়াল ব্যাকগ্রাউন্ড এবং ব্যাকগ্রাউন্ড নয়েজ রিমুভালের মতো বৈশিষ্ট্যগুলি একটি ইন-হাউস ক্লায়েন্ট-সাইড SDK ব্যবহার করে বাস্তবায়িত হয়েছিল। এই এআই বৈশিষ্ট্যগুলির জন্য কোনও সার্ভার প্রক্রিয়াকরণ খরচ হয়নি কারণ মডেল ইনফারেন্স এবং ভিডিও প্রক্রিয়াকরণ ব্যবহারকারীর ডিভাইসে ঘটেছিল।

ওয়েবকোডেক্সের মতো API ব্রাউজারে সম্পূর্ণ ভিডিও প্রসেসিং পাইপলাইন তৈরি করতে সক্ষম করে, যার মধ্যে পূর্ণাঙ্গ ভিডিও এডিটিং স্যুটও রয়েছে। ওয়েবজিপিইউ ক্লায়েন্ট-সাইড এআইকে অনেক বেশি দক্ষ করে তোলে।

ওয়েবকোডেক্স এবং ওয়েবজিপিইউ ব্যবহার করে ক্লায়েন্ট-সাইড প্রক্রিয়াকরণ

ফ্রি এআই ভিডিও আপস্কেলার ওপেন সোর্স ওয়েবএসআর এসডিকে ব্যবহার করে। এই এসডিকে একটি ছবি গ্রহণ করে, আপস্কেল করে এবং ফলাফলটি ক্যানভাসে রঙ করে।

একটি সুপার-রেজোলিউশন নিউরাল নেটওয়ার্ক একটি উৎস চিত্র থেকে চিত্র বৈশিষ্ট্যগুলি বের করার জন্য বারবার চিত্র কনভলিউশন (ম্যাট্রিক্স গুণন) প্রয়োগ করে আপস্কেলিং সম্পন্ন করে। চূড়ান্ত উচ্চ-মানের চিত্র পুনর্গঠনের জন্য এই চিত্র বৈশিষ্ট্যগুলিতে আরও কনভলিউশন প্রয়োগ করা হয়।

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);

See the WebSR SDK example on Codepen .

আপনি MediaPipe বা TensorflowJS এর ​​মতো ফ্রেমওয়ার্ক ব্যবহার করে যেকোনো মডেল দিয়ে WebSR SDK প্রতিস্থাপন করতে পারেন। ভিডিও প্রসেসিং পাইপলাইনটি WebCodecs ব্যবহার করে এবং একটি ট্রান্সকোডিং পাইপলাইন হিসেবে গঠন করা হয়েছে।

পাইপলাইনটি কয়েকটি পর্যায়ে বিভক্ত:

1. ডিমাক্সিং : একটি ফাইল অবজেক্ট থেকে এনকোড করা ভিডিও খণ্ডগুলি পড়ে।
2. ডিকোডিং : ভিডিওফ্রেম অবজেক্টে এনকোড করা অংশগুলিকে ডিকোড করে।
3. প্রক্রিয়াকরণ : ইনপুট ভিডিওফ্রেমকে একটি উন্নত ভিডিওফ্রেমে রূপান্তর করে।
4. এনকোডিং : আপস্কেল করা ভিডিওফ্রেম অবজেক্টগুলিকে নতুন এনকোডেড অংশগুলিতে এনকোড করে।
5. Muxing : আউটপুট ফাইলে আউটপুট এনকোডেড অংশগুলি লিখে।

পাইপলাইনটি Streams API ব্যবহার করে। এনকোডিং, ডিকোডিং এবং demuxing বা muxing স্ট্রিম হিসেবে প্রয়োগ করা হয়। একটি ডেমোর জন্য, প্রকল্পটি webcodecs-utils লাইব্রেরি থেকে muxing এবং stream ইউটিলিটি ব্যবহার করে। এই লাইব্রেরিটি 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();

কোডপেনে সম্পূর্ণ পাইপলাইনটি দেখুন।

ওয়েবকোডেক্সের ক্ষেত্রে স্ট্রিমস এপিআই বিশেষভাবে সহায়ক কারণ এটি ব্যাকপ্রেসার ব্যবহার করে আপস্ট্রিম স্টেজগুলিকে স্বয়ংক্রিয়ভাবে ধীর করে দেয়, যেমন ডিকোডিং, যদি এনকোডিংয়ের মতো একটি স্টেজ ওভারলোড হয়ে যায়। এটি মেমরির সমস্যা এড়ায় এবং দক্ষতা উন্নত করে।

এটি একটি সহজ ব্যবহারকারীর অভিজ্ঞতা তৈরি করে:

1. আপনি একটি ফাইল ইনপুট সহ একটি ভিডিও আপলোড করেন।
2. The system processes the video locally.
3. আপনি ফলাফলটি ব্লব হিসেবে ডাউনলোড করতে পারেন।

আপনি WebCodecs-এ ট্রান্সকোডিং পাইপলাইন তৈরি সম্পর্কে আরও জানতে পারবেন। আপনি GitHub-এ ফ্রি AI ভিডিও আপস্কেলারের সম্পূর্ণ প্রসেসিং পাইপলাইনও দেখতে পারবেন, যা 400 লাইনেরও কম কোড।

ফলাফল

ফ্রি এআই ভিডিও আপস্কেলারের একমাত্র প্রচারণা ছিল একটি রেডডিট পোস্ট । তা সত্ত্বেও, এটি স্বাভাবিকভাবেই মাসিক সক্রিয় ব্যবহারকারীর সংখ্যা ২৫০,০০০-এ উন্নীত হয়েছে, মাসিক বৃদ্ধির হার ৩২%, ফোরামে ব্যবহারকারীদের কাছ থেকে মুখের কথা শেয়ার করার জন্য ধন্যবাদ।

২৫০,০০০

মাসিক সক্রিয় ব্যবহারকারী

১০,০০০

প্রতিদিন প্রক্রিয়া করা ভিডিওর সংখ্যা

৩০,০০০

প্রতি মাসে ভিডিও প্রক্রিয়াকরণের ঘন্টা

০ _$

সার্ভার প্রক্রিয়াকরণ খরচ

এটি প্রতিদিন ১০,০০০ ভিডিও (প্রতি মাসে ৩০,০০০ ঘন্টা ভিডিও) প্রক্রিয়া করে, কোনও সার্ভার খরচ ছাড়াই।

ফ্রি এআই ভিডিও আপস্কেলার একটি পেইড এআই আপস্কেলিং পরিষেবার জন্য একটি লিড জেনারেশন টুল হিসেবে কাজ করে। আমি সার্ভার-সাইড চালিত আরও শক্তিশালী এআই মডেল ব্যবহার করে এই পরিষেবাটিও তৈরি করেছি। এই পদ্ধতিটি মার্কেটিং ছাড়াই লাভজনকতা তৈরি করে, যদিও প্রাথমিক অ্যাপ্লিকেশনটি বিনামূল্যে এবং ওপেন সোর্স থাকে।

সুপারিশ এবং সম্পদ

ওয়েবকোডেক্স এবং ওয়েবজিপিইউ-এর আগে, ভিডিও-প্রক্রিয়াকরণ নিবিড় অ্যাপ্লিকেশনগুলির জন্য হয় ডেস্কটপ সফ্টওয়্যারের প্রয়োজন হত, যা কষ্টকর হতে পারে, অথবা সার্ভার-সাইড প্রক্রিয়াকরণ ব্যয়বহুল হতে পারে। সার্ভার খরচ প্রায়শই একটি ভিডিও অ্যাপ্লিকেশনের অপারেটিং খরচের একটি উল্লেখযোগ্য অংশের জন্য দায়ী ছিল।

এই ব্রাউজার API গুলি আপনাকে দক্ষ ক্লায়েন্ট-সাইড ভিডিও-প্রসেসিং অ্যাপ্লিকেশন তৈরি করতে দেয়। এই অ্যাপ্লিকেশনগুলি আরও স্বজ্ঞাত এবং ডেস্কটপ সফ্টওয়্যারের তুলনায় কম ঘর্ষণ অফার করে এবং এগুলি সার্ভার-সাইড প্রক্রিয়াকরণের তুলনায় আরও সাশ্রয়ী এবং স্কেলেবল।

আপনি যদি WebCodecs সম্পর্কে আরও জানতে আগ্রহী হন এবং Free AI Video Upscaler অথবা Katana এর মতো ভিডিও অ্যাপ্লিকেশন কীভাবে তৈরি করবেন, তাহলে WebCodecsFundamentals পড়ুন। আপনি উৎপাদন এবং বাস্তবায়নের বিশদ বিবরণের উপর মনোযোগ দিয়ে উৎপাদন WebCodecs অ্যাপ্লিকেশন কীভাবে তৈরি করবেন তা শিখবেন।