Free AI Video Upscaler ใช้ WebGPU + WebCodecs เพื่อให้บริการ MAU จำนวน 250,000 รายโดยไม่มีค่าใช้จ่ายเซิร์ฟเวอร์ได้อย่างไร

Samrat Bhattacharyya

เผยแพร่: 5 มีนาคม 2026

ผม Sam Bhattacharyya ได้สร้าง Free AI Video Upscaler ขึ้นมาเป็นโปรเจ็กต์งานอดิเรกโอเพนซอร์สในปี 2023 และเติบโตขึ้นอย่างไม่คาดคิดและเป็นธรรมชาติจนมีผู้ใช้ที่ใช้งานอยู่รายเดือน (MAU) 250,000 คน (ข้อมูล ณ เดือนกุมภาพันธ์ 2026) ซึ่งเป็นไปได้เนื่องจากโปรเจ็กต์สร้างขึ้นด้วยการประมวลผล AI ฝั่งไคลเอ็นต์ ซึ่งไม่มีค่าใช้จ่ายในการประมวลผลฝั่งเซิร์ฟเวอร์ คุณสามารถ ปรับปรุงวิดีโอในเบราว์เซอร์ได้โดยไม่ต้องติดตั้งซอฟต์แวร์หรือ ลงชื่อเข้าใช้

เอกสารนี้อธิบายวิธีที่ฉันใช้ WebGPU และ WebCodecs เพื่อเพิ่มการประมวลผลฝั่งไคลเอ็นต์ฟรี ลงในแอปพลิเคชัน

ความท้าทายเกี่ยวกับค่าใช้จ่ายของเซิร์ฟเวอร์

ในตำแหน่งก่อนหน้านี้ ฉันได้จัดการโครงสร้างพื้นฐานของ AI สำหรับเครื่องมือไลฟ์สดบนเบราว์เซอร์ที่มีผู้ใช้หลายล้านคนและมีงบประมาณจำนวนมากในการประมวลผลวิดีโอฝั่งเซิร์ฟเวอร์

การประมวลผลวิดีโอฝั่งเซิร์ฟเวอร์คิดเป็น 20% ของงบประมาณ ซึ่งเป็นต้นทุนแปรผันที่สำคัญของบริษัท รองจากเงินเดือน สำหรับฟีเจอร์ AI ทุกอย่าง เช่น การถอดเสียง การปรับปรุงเสียง หรือวิดีโอ ทีมต้องเผชิญกับข้อกำหนดด้านงบประมาณที่เข้มงวด ($0.1 ต่อชั่วโมงของวิดีโอ) สำหรับการใช้งานใหม่

AI ฝั่งไคลเอ็นต์เป็นข้อยกเว้นเพียงอย่างเดียว โดยมีฟีเจอร์ต่างๆ เช่น พื้นหลังเสมือน และการนำเสียงรบกวนพื้นหลังออก ซึ่งใช้ SDK ฝั่งไคลเอ็นต์ภายใน ฟีเจอร์ AI เหล่านี้ไม่มีค่าใช้จ่ายในการประมวลผลบนเซิร์ฟเวอร์เนื่องจากการอนุมานโมเดล และการประมวลผลวิดีโอเกิดขึ้นในอุปกรณ์ของผู้ใช้

API เช่น WebCodecs ช่วยให้สร้างไปป์ไลน์การประมวลผลวิดีโอแบบเต็มได้ ซึ่งรวมถึงชุดเครื่องมือแก้ไขวิดีโอ แบบเต็มรูปแบบในเบราว์เซอร์ WebGPU ช่วยให้ AI ฝั่งไคลเอ็นต์มีประสิทธิภาพมากขึ้น

การประมวลผลฝั่งไคลเอ็นต์ด้วย WebCodecs และ WebGPU

AI Video Upscaler ฟรีใช้ WebSR SDK แบบโอเพนซอร์ส SDK นี้รับรูปภาพ อัปสเกล และวาดผลลัพธ์ลงใน Canvas

โครงข่ายประสาทเทียมความละเอียดสูงพิเศษจะทำการเพิ่มขนาดโดยใช้ การสังวัตนาการของรูปภาพ (การคูณเมทริกซ์) ซ้ำๆ เพื่อดึงฟีเจอร์รูปภาพจาก รูปภาพต้นฉบับ จากนั้นจะใช้การสังวัตน์เพิ่มเติมกับฟีเจอร์รูปภาพเหล่านี้เพื่อ สร้างรูปภาพสุดท้ายที่มีคุณภาพสูงขึ้น

WebSR ใช้เลเยอร์การบิดของโครงข่ายประสาทเทียมเหล่านี้เป็น Compute Shader ของ WebGPU เช่น ดูเลเยอร์ตัวอย่าง และเครือข่าย ทั้งหมด เมื่อเรียกใช้เมธอดการแสดงผล SDK จะเรียกใช้แต่ละเลเยอร์ของเครือข่ายการอัปสเกล และเอาต์พุตเป็นรูปภาพสุดท้ายไปยัง Canvas ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้งานโครงข่ายประสาทเทียมได้

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 และมีโครงสร้าง เป็นไปป์ไลน์การแปลงรหัส

ไปป์ไลน์แบ่งออกเป็นหลายขั้นตอนดังนี้

1. การแยกมัลติเพล็กซ์: อ่านก้อนวิดีโอที่เข้ารหัสจากออบเจ็กต์ File
2. การถอดรหัส: ถอดรหัสก้อนข้อมูลที่เข้ารหัสเป็นออบเจ็กต์ VideoFrame
3. การประมวลผล: แปลง VideoFrame อินพุตเป็น VideoFrame ที่อัปสเกล
4. การเข้ารหัส: เข้ารหัสออบเจ็กต์ VideoFrame ที่อัปสเกลเป็นก้อนข้อมูลที่เข้ารหัสใหม่
5. การมัลติเพล็กซ์: เขียนก้อนข้อมูลที่เข้ารหัสเอาต์พุตไปยังไฟล์เอาต์พุต

ไปป์ไลน์ใช้ Streams API การเข้ารหัส การถอดรหัส และการแยกหรือการมัลติเพล็กซ์จะได้รับการติดตั้งใช้งานเป็นสตรีม สำหรับเดโม โปรเจ็กต์นี้ใช้ยูทิลิตีการมัลติเพล็กซ์และสตรีมจากwebcodecs-utils ไลบรารี ไลบรารีนี้มีสตรีมมิง Wrapper สำหรับ 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 นอกจากนี้ คุณยังดูไปป์ไลน์การประมวลผลทั้งหมดสำหรับ AI Video Upscaler ฟรี ซึ่งมีโค้ดไม่ถึง 400 บรรทัดได้ใน GitHub

ผลลัพธ์

การโปรโมตเพียงอย่างเดียวของ AI Video Upscaler ฟรีคือโพสต์เดียวใน Reddit อย่างไรก็ตาม เครื่องมือนี้เติบโตขึ้นโดยธรรมชาติจนมีผู้ใช้ที่ใช้งานอยู่รายเดือน 250,000 ราย โดยมี อัตราการเติบโตเดือนต่อเดือน 32% ซึ่งเป็นผลมาจากการบอกต่อของผู้ใช้ที่แชร์ เครื่องมือนี้ในฟอรัม

250,000

จำนวนผู้ใช้ที่ใช้งานรายเดือน

10,000

วิดีโอที่ประมวลผลต่อวัน

30,000

จำนวนชั่วโมงของวิดีโอที่ประมวลผลต่อเดือน

0 _$

ค่าใช้จ่ายในการประมวลผลของเซิร์ฟเวอร์

โดยประมวลผลวิดีโอวันละ 10,000 รายการ (วิดีโอ 30,000 ชั่วโมงต่อเดือน) โดยไม่มีค่าใช้จ่ายเซิร์ฟเวอร์

โปรแกรมเพิ่มคุณภาพวิดีโอ AI ฟรีทำหน้าที่เป็นเครื่องมือสร้างโอกาสในการขายสำหรับบริการเพิ่มคุณภาพ AI แบบชำระเงิน ฉันสร้างบริการนี้ด้วยโดยใช้ โมเดล AI ที่มีประสิทธิภาพมากขึ้นซึ่งทำงานฝั่งเซิร์ฟเวอร์ แนวทางนี้สร้าง ความสามารถในการทำกำไรได้โดยไม่ต้องทำการตลาด ในขณะที่แอปพลิเคชันเริ่มต้นยังคงฟรีและ โอเพนซอร์ส

คำแนะนำและแหล่งข้อมูล

ก่อนที่จะมี WebCodecs และ WebGPU แอปพลิเคชันที่ต้องประมวลผลวิดีโออย่างหนักจำเป็นต้องใช้ซอฟต์แวร์เดสก์ท็อป ซึ่งอาจยุ่งยาก หรือการประมวลผลฝั่งเซิร์ฟเวอร์ที่มีค่าใช้จ่ายสูง ค่าใช้จ่ายของเซิร์ฟเวอร์มักคิดเป็นสัดส่วนที่สำคัญของค่าใช้จ่ายในการดำเนินงานของแอปพลิเคชันวิดีโอ

Browser API เหล่านี้ช่วยให้คุณสร้างแอปพลิเคชันการประมวลผลวิดีโอฝั่งไคลเอ็นต์ที่มีประสิทธิภาพได้ แอปพลิเคชันเหล่านี้ใช้งานง่ายกว่าและมีอุปสรรคน้อยกว่าซอฟต์แวร์เดสก์ท็อป ทั้งยังมีราคาถูกกว่าและปรับขนาดได้มากกว่าการประมวลผลฝั่งเซิร์ฟเวอร์

หากสนใจดูข้อมูลเพิ่มเติมเกี่ยวกับ WebCodecs และวิธีสร้างแอปพลิเคชันวิดีโอ เช่น Free AI Video Upscaler หรือ Katana โปรดอ่าน WebCodecsFundamentals คุณจะได้เรียนรู้วิธี สร้างแอปพลิเคชัน WebCodecs สำหรับการใช้งานจริงโดยเน้นที่การใช้งานจริงและ รายละเอียดการติดตั้งใช้งาน