पब्लिश होने की तारीख: 5 मार्च, 2026
मैंने, सैम भट्टाचार्य ने 2023 में Free AI Video Upscaler को ओपन सोर्स हॉबी प्रोजेक्ट के तौर पर बनाया था. साल 2026 के फ़रवरी महीने तक, इसके हर महीने के सक्रिय उपयोगकर्ताओं (एमएयू) की संख्या अचानक और अपने-आप बढ़कर 2,50,000 हो गई. ऐसा इसलिए हो सका, क्योंकि प्रोजेक्ट को क्लाइंट-साइड एआई प्रोसेसिंग की मदद से बनाया गया था. इसमें सर्वर प्रोसेसिंग का कोई शुल्क नहीं लगता. ब्राउज़र में वीडियो की क्वालिटी को बेहतर बनाया जा सकता है. इसके लिए, सॉफ़्टवेयर इंस्टॉल करने या साइन-इन करने की ज़रूरत नहीं है.
इस दस्तावेज़ में बताया गया है कि मैंने अपने ऐप्लिकेशन में WebGPU और WebCodecs का इस्तेमाल करके, क्लाइंट-साइड प्रोसेसिंग को बिना किसी शुल्क के कैसे जोड़ा.
सर्वर के खर्च से जुड़ी समस्याएं
पिछली भूमिका में, मैंने ब्राउज़र पर काम करने वाले लाइव स्ट्रीमिंग टूल के लिए एआई इन्फ़्रास्ट्रक्चर को मैनेज किया था. इस टूल का इस्तेमाल लाखों लोग करते थे. साथ ही, सर्वर साइड पर वीडियो प्रोसेस करने के लिए, काफ़ी बजट की ज़रूरत होती थी.
सर्वर-साइड पर वीडियो प्रोसेस करने के लिए, बजट का 20% हिस्सा खर्च किया गया. यह कंपनी के लिए एक बड़ी वैरिएबल कॉस्ट थी. यह सैलरी के बाद दूसरी सबसे बड़ी कॉस्ट थी. एआई की हर सुविधा के लिए, टीम को बजट से जुड़ी सख्त शर्तों का सामना करना पड़ा. जैसे, ट्रांसक्रिप्शन, ऑडियो या वीडियो को बेहतर बनाने की सुविधा. नई सुविधाओं को लागू करने के लिए, टीम को हर घंटे के वीडियो के लिए 0.1 डॉलर का बजट तय करना पड़ा.
क्लाइंट-साइड एआई (AI) का इस्तेमाल सिर्फ़ एक मामले में किया गया था. जैसे, वर्चुअल बैकग्राउंड और बैकग्राउंड के शोर को हटाने जैसी सुविधाओं को लागू करने के लिए, क्लाइंट-साइड SDK टूल का इस्तेमाल किया गया था. इन एआई सुविधाओं के लिए, सर्वर प्रोसेसिंग का कोई शुल्क नहीं लिया गया. ऐसा इसलिए, क्योंकि मॉडल इन्फ़रेंस और वीडियो प्रोसेसिंग, उपयोगकर्ता के डिवाइस पर हुई थी.
WebCodecs जैसे एपीआई, ब्राउज़र में वीडियो प्रोसेसिंग की पूरी पाइपलाइन बनाने की सुविधा देते हैं. इनमें वीडियो एडिटिंग के पूरे सुइट भी शामिल हैं. WebGPU की मदद से, क्लाइंट-साइड एआई को ज़्यादा असरदार बनाया जा सकता है.
WebCodecs और WebGPU की मदद से क्लाइंट-साइड प्रोसेसिंग
मुफ़्त में उपलब्ध एआई वीडियो अपस्केलर, ओपन सोर्स WebSR SDK का इस्तेमाल करता है. यह SDK, इमेज को स्वीकार करता है, उसे बड़ा करता है, और नतीजे को कैनवस पर पेंट करता है.
सुपर-रिज़ॉल्यूशन न्यूरल नेटवर्क, इमेज को बड़ा करने के लिए, सोर्स इमेज से इमेज की सुविधाओं को निकालता है. इसके लिए, वह इमेज के कनवोल्यूशन (मैट्रिक्स मल्टिप्लिकेशन) को बार-बार लागू करता है. इसके बाद, इन इमेज फ़ीचर पर ज़्यादा कनवोल्यूशन लागू किए जाते हैं, ताकि बेहतर क्वालिटी वाली फ़ाइनल इमेज को फिर से बनाया जा सके.
WebSR, इन न्यूरल नेटवर्क कनवोल्यूशन लेयर को WebGPU कंप्यूट शेडर के तौर पर लागू करता है. उदाहरण के लिए, उदाहरण लेयर और पूरा नेटवर्क देखें. रेंडर करने के तरीके को कॉल करने पर, एसडीके अपस्केलिंग नेटवर्क की हर लेयर को चलाता है और फ़ाइनल इमेज को कैनवस पर आउटपुट करता है. न्यूरल नेटवर्क लागू करने के बारे में ज़्यादा जानें.
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);
Codepen पर WebSR SDK टूल का उदाहरण देखें.
MediaPipe या TensorflowJS जैसे फ़्रेमवर्क का इस्तेमाल करके, WebSR SDK को किसी भी मॉडल से बदला जा सकता है. वीडियो प्रोसेसिंग पाइपलाइन, WebCodecs का इस्तेमाल करती है. इसे ट्रांसकोडिंग पाइपलाइन के तौर पर बनाया गया है.
पाइपलाइन को कई चरणों में बांटा गया है:
- डेमक्सिंग: यह फ़ाइल ऑब्जेक्ट से एन्कोड किए गए वीडियो के हिस्सों को पढ़ता है.
- डिकोडिंग: एन्कोड किए गए चंक को VideoFrame ऑब्जेक्ट में डिकोड करता है.
- प्रोसेसिंग: यह इनपुट VideoFrame को अपस्केल किए गए VideoFrame में बदलता है.
- एन्कोडिंग: अपस्केल किए गए VideoFrame ऑब्जेक्ट को एन्कोड किए गए नए हिस्सों में एन्कोड करता है.
- मक्सिंग: यह प्रोसेस, आउटपुट फ़ाइल में एन्कोड किए गए आउटपुट के हिस्सों को लिखती है.
पाइपलाइन, 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 के साथ काम करने में खास तौर पर मददगार होता है. इसकी वजह यह है कि यह बैकप्रेशर का इस्तेमाल करता है. इससे, अगर एन्कोडिंग जैसे किसी एक स्टेज पर ज़्यादा लोड पड़ता है, तो डिकोडिंग जैसे अपस्ट्रीम स्टेज अपने-आप धीमे हो जाते हैं. इससे मेमोरी से जुड़ी समस्याएं नहीं होती हैं और परफ़ॉर्मेंस बेहतर होती है.
इससे उपयोगकर्ताओं को आसानी से समझ आने वाला अनुभव मिलता है:
- आपने फ़ाइल इनपुट के साथ कोई वीडियो अपलोड किया हो.
- सिस्टम, वीडियो को डिवाइस पर ही प्रोसेस करता है.
- नतीजे को Blob के तौर पर डाउनलोड किया जा सकता है.
WebCodecs में ट्रांसकोडिंग पाइपलाइन बनाने के बारे में ज़्यादा जानें. GitHub पर, Free AI Video Upscaler के लिए पूरी प्रोसेसिंग पाइपलाइन भी देखी जा सकती है. इसमें 400 से भी कम लाइनों का कोड है.
नतीजे
Free AI Video Upscaler का प्रमोशन सिर्फ़ एक Reddit पोस्ट के ज़रिए किया गया था. इसके बावजूद, इस टूल का इस्तेमाल करने वाले लोगों की संख्या में बढ़ोतरी हुई है. अब हर महीने 2,50,000 सक्रिय उपयोगकर्ता इसका इस्तेमाल करते हैं. साथ ही, हर महीने 32% की बढ़ोतरी हो रही है. ऐसा इसलिए हो रहा है, क्योंकि उपयोगकर्ता फ़ोरम पर इस टूल के बारे में बता रहे हैं.
250,000
महीने के हिसाब से सक्रिय उपयोगकर्ता
10,000
हर दिन प्रोसेस किए गए वीडियो
30,000
हर महीने प्रोसेस किए गए वीडियो का समय
0 $
सर्वर प्रोसेसिंग की लागत
यह हर दिन 10,000 वीडियो (हर महीने 30,000 घंटे के वीडियो) प्रोसेस करता है. इसके लिए, सर्वर का कोई शुल्क नहीं लिया जाता.
एआई की मदद से वीडियो की क्वालिटी बढ़ाने वाला मुफ़्त टूल, एआई की मदद से वीडियो की क्वालिटी बढ़ाने वाली सशुल्क सेवा के लिए लीड जनरेट करने वाले टूल के तौर पर काम करता है. मैंने इस सेवा को भी बनाया है. इसके लिए, मैंने सर्वर-साइड पर काम करने वाले ज़्यादा बेहतर एआई मॉडल का इस्तेमाल किया है. इस तरीके से, मार्केटिंग के बिना भी फ़ायदा मिलता है. साथ ही, शुरुआती ऐप्लिकेशन मुफ़्त और ओपन सोर्स बना रहता है.
सुझाव और संसाधन
WebCodecs और WebGPU से पहले, वीडियो प्रोसेसिंग वाले ऐप्लिकेशन के लिए डेस्कटॉप सॉफ़्टवेयर की ज़रूरत होती थी. हालांकि, यह मुश्किल हो सकता था. इसके अलावा, सर्वर-साइड प्रोसेसिंग का इस्तेमाल किया जा सकता था, लेकिन यह महंगा होता था. सर्वर की लागत, अक्सर वीडियो ऐप्लिकेशन को चलाने की लागत का एक बड़ा हिस्सा होती है.
इन ब्राउज़र एपीआई की मदद से, क्लाइंट-साइड पर वीडियो प्रोसेस करने वाले असरदार ऐप्लिकेशन बनाए जा सकते हैं. ये ऐप्लिकेशन, डेस्कटॉप सॉफ़्टवेयर की तुलना में ज़्यादा आसान होते हैं. साथ ही, इनमें सर्वर-साइड प्रोसेसिंग की तुलना में कम खर्च आता है और इन्हें आसानी से बढ़ाया जा सकता है.
अगर आपको WebCodecs के बारे में ज़्यादा जानना है और Free AI Video Upscaler या Katana जैसे वीडियो ऐप्लिकेशन बनाने का तरीका जानना है, तो WebCodecsFundamentals पढ़ें. आपको प्रोडक्शन और लागू करने से जुड़ी जानकारी पर फ़ोकस करके, प्रोडक्शन WebCodecs ऐप्लिकेशन बनाने का तरीका पता चलेगा.