תאריך פרסום: 5 במרץ 2026
אני, Sam Bhattacharyya, יצרתי את Free AI Video Upscaler כפרויקט חובבים בקוד פתוח בשנת 2023. המספר הזה גדל באופן לא צפוי ואורגני ל-250,000 משתמשים פעילים בחודש (MAU) (נכון לפברואר 2026). הדבר היה אפשרי כי הפרויקט נבנה עם עיבוד באמצעות AI בצד הלקוח, שלא כרוך בעלויות עיבוד בשרת. אתם יכולים לשפר את איכות הסרטון בדפדפן, בלי להתקין תוכנה או להיכנס לחשבון.
במסמך הזה מוסבר איך השתמשתי ב-WebGPU וב-WebCodecs כדי להוסיף לאפליקציה שלי עיבוד חינמי בצד הלקוח.
אתגרים שקשורים לעלויות של שרתים
בתפקיד קודם ניהלתי תשתית AI לכלי לשידור חי מבוסס-דפדפן עם מיליוני משתמשים ועלויות תקציב משמעותיות לעיבוד סרטונים בצד השרת.
עיבוד סרטונים בצד השרת היווה 20% מהתקציב. זו הייתה עלות משתנה משמעותית לחברה, שנייה רק לעלויות השכר. לכל תכונת AI, כמו תמלול, אודיו או שיפור סרטונים, הצוות נדרש לעמוד בדרישות תקציב מחמירות (0.1$ לשעה של סרטון) להטמעות חדשות.
החריג היחיד היה AI בצד הלקוח, עם תכונות כמו רקעים וירטואליים והסרת רעשי רקע שהוטמעו באמצעות SDK פנימי בצד הלקוח. לא היו עלויות עיבוד בשרת על התכונות האלה מבוססות ה-AI, כי ההסקה של המודל ועיבוד הסרטון התבצעו במכשיר של המשתמש.
ממשקי API כמו WebCodecs מאפשרים ליצור צינורות מלאים לעיבוד וידאו, כולל חבילות מלאות לעריכת וידאו, בדפדפן. WebGPU משפרת מאוד את היעילות של AI בצד הלקוח.
עיבוד בצד הלקוח באמצעות WebCodecs ו-WebGPU
הכלי 'שיפור איכות סרטונים באמצעות AI' משתמש ב-WebSR SDK, שהוא קוד פתוח. ה-SDK הזה מקבל תמונה, מגדיל אותה ומצייר את התוצאה על קנבס.
רשת נוירונים בסופר-רזולוציה מבצעת הגדלה על ידי החלת קונבולוציות חוזרות של תמונות (מכפלות מטריצות) כדי לחלץ תכונות של תמונה מתמונת מקור. לאחר מכן מוחלים עוד קונבולוציות על תכונות התמונה האלה כדי לשחזר את התמונה הסופית באיכות גבוהה יותר.
ב-WebSR, שכבות הקונבולוציה של רשת הנוירונים מיושמות כשיידרים של WebGPU compute. לדוגמה, אפשר לראות שכבה לדוגמה ורשת מלאה. כשמפעילים את שיטת הרינדור, ה-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 בכל מודל, באמצעות מסגרות כמו MediaPipe או TensorflowJS. צינור העיבוד של הסרטון משתמש ב-WebCodecs ומובנה כצינור טרנסקוד.
הצינור מחולק לכמה שלבים:
- פירוק (Demuxing): קריאת נתחי וידאו מקודדים מאובייקט File.
- פענוח: פענוח של נתחים מקודדים לאובייקטים מסוג VideoFrame.
- Processing: ממירה את קלט VideoFrame ל-VideoFrame שעבר הגדלה.
- קידוד: קידוד של אובייקטים מסוג VideoFrame שעברו הגדלה לחלקים מקודדים חדשים.
- Muxing: כתיבת נתחי הפלט המקודדים לקובץ הפלט.
צינור עיבוד הנתונים משתמש ב-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();
ממשק ה-API של Streams שימושי במיוחד עם WebCodecs כי הוא משתמש בלחץ חוזר כדי להאט באופן אוטומטי שלבים במעלה הזרם, כמו פענוח, אם שלב אחד, כמו קידוד, עמוס מדי. כך נמנעות בעיות בזיכרון ומשתפרת היעילות.
כך נוצרת חוויית משתמש פשוטה:
- אתם מעלים סרטון עם קלט קובץ.
- המערכת מעבדת את הסרטון באופן מקומי.
- אפשר להוריד את התוצאה כ-Blob.
מידע נוסף על בניית צינור להמרת קידוד ב-WebCodecs ב-GitHub אפשר גם לראות את צינור העיבוד המלא של Free AI Video Upscaler, שכולל פחות מ-400 שורות קוד.
תוצאות
הקידום היחיד של Free AI Video Upscaler היה פוסט אחד ב-Reddit. למרות זאת, מספר המשתמשים הפעילים בחודש גדל באופן אורגני ל-250,000, עם שיעור צמיחה של 32% מחודש לחודש, הודות להמלצות מפה לאוזן של משתמשים ששיתפו את הכלי בפורומים.
250,000
משתמשים פעילים בחודש
10,000
סרטונים שעברו עיבוד ביום
30,000
שעות של סרטונים שעברו עיבוד בחודש
0 $
עלויות עיבוד בשרת
הוא מעבד 10,000 סרטונים ביום (30,000 שעות של סרטונים בחודש) ללא עלויות שרת.
הכלי החינמי לשיפור איכות סרטונים מבוסס-AI משמש ככלי ליצירת לידים עבור שירות בתשלום לשיפור איכות סרטונים מבוסס-AI. גם את השירות הזה בניתי באמצעות מודלים מתקדמים יותר של AI שפועלים בצד השרת. הגישה הזו מייצרת רווחיות בלי שיווק, בעוד שהאפליקציה הראשונית נשארת בחינם ובקוד פתוח.
המלצות ומשאבים
לפני WebCodecs ו-WebGPU, אפליקציות שדורשות עיבוד וידאו אינטנסיבי דרשו תוכנה למחשב, שיכולה להיות מסורבלת, או עיבוד יקר בצד השרת. עלויות השרתים היוו לעיתים קרובות חלק משמעותי מעלויות התפעול של אפליקציות וידאו.
ממשקי ה-API האלה של הדפדפן מאפשרים לכם ליצור אפליקציות יעילות לעיבוד וידאו בצד הלקוח. האפליקציות האלה אינטואיטיביות יותר ופחות מסורבלות מתוכנות למחשב, והן גם זולות יותר וניתנות להרחבה יותר מעיבוד בצד השרת.
אם אתם רוצים לקבל מידע נוסף על WebCodecs ועל האופן שבו אפשר ליצור אפליקציות וידאו כמו Free AI Video Upscaler או Katana, כדאי לקרוא את המאמר WebCodecsFundamentals. במאמר הזה נסביר איך ליצור אפליקציות WebCodecs לייצור, תוך התמקדות בפרטים של הייצור וההטמעה.