Jak bezpłatny program do zwiększania rozdzielczości filmów z użyciem AI wykorzystuje WebGPU i WebCodecs do obsługi 250 tys. AUM bezpłatnie serwera

Samrat Bhattacharyya

Opublikowano: 5 marca 2026 r.

Sam Bhattacharyya stworzył Free AI Video Upscaler jako projekt hobbystyczny o otwartym kodzie źródłowym w 2023 roku. Niespodziewanie i w sposób naturalny wzrosła do 250 tys. aktywnych użytkowników miesięcznie (MAU) (wg stanu na luty 2026 r.). Było to możliwe, ponieważ projekt został utworzony z wykorzystaniem przetwarzania AI po stronie klienta, które nie wiąże się z kosztami przetwarzania na serwerze. Możesz ulepszyć film w przeglądarce bez konieczności instalowania oprogramowania ani logowania się.

Z tego dokumentu dowiesz się, jak za pomocą WebGPU i WebCodecs dodałem do aplikacji bezpłatne przetwarzanie po stronie klienta.

Wyzwania związane z kosztami serwera

Na poprzednim stanowisku zarządzałem infrastrukturą AI dla narzędzia do transmisji na żywo w przeglądarce, z którego korzystały miliony użytkowników. Przetwarzanie filmów po stronie serwera wiązało się ze znacznymi kosztami.

Przetwarzanie wideo po stronie serwera stanowiło 20% budżetu. Był to dla firmy główny koszt zmienny, ustępujący jedynie wynagrodzeniom. W przypadku każdej funkcji AI, takiej jak transkrypcja, ulepszanie dźwięku czy wideo, zespół musiał spełnić rygorystyczne wymagania budżetowe (0, 10 USD za godzinę filmu) dotyczące nowych wdrożeń.

Jedynym wyjątkiem była AI po stronie klienta, która umożliwiała korzystanie z funkcji takich jak wirtualne tła czy usuwanie szumów w tle. Została ona zaimplementowana za pomocą wewnętrznego pakietu SDK po stronie klienta. Te funkcje AI nie generowały kosztów przetwarzania na serwerze, ponieważ wnioskowanie modelu i przetwarzanie wideo odbywało się na urządzeniu użytkownika.

Interfejsy API takie jak WebCodecs umożliwiają tworzenie w przeglądarce pełnych potoków przetwarzania wideo, w tym rozbudowanych pakietów do edycji wideo. WebGPU znacznie zwiększa wydajność AI po stronie klienta.

Przetwarzanie po stronie klienta za pomocą WebCodecs i WebGPU

Bezpłatne narzędzie AI Video Upscaler korzysta z pakietu SDK WebSR typu open source. Ten pakiet SDK przyjmuje obraz, powiększa go i umieszcza wynik na obszarze roboczym.

Sieć neuronowa o superrozdzielczości wykonuje skalowanie w górę, stosując wielokrotne konwolucje obrazu (mnożenie macierzy), aby wyodrębnić cechy obrazu ze źródłowego obrazu. Następnie do tych cech obrazu stosuje się więcej operacji splotu, aby zrekonstruować końcowy obraz o wyższej jakości.

WebSR implementuje te warstwy splotowe sieci neuronowej jako shadery obliczeniowe WebGPU. Zobacz na przykład przykładową warstwę i pełną sieć. Gdy wywołasz metodę renderowania, pakiet SDK uruchomi każdą warstwę sieci powiększającej i wyśle obraz końcowy do obszaru rysowania. Więcej informacji o wdrożeniu sieci neuronowej.

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

Zobacz przykład pakietu WebSR SDK w Codepen.

Pakiet WebSR SDK możesz zastąpić dowolnym modelem, korzystając z platform takich jak MediaPipe czy TensorflowJS. Potok przetwarzania wideo korzysta z WebCodecs i jest skonstruowany jako potok transkodowania.

Potok jest podzielony na kilka etapów:

1. Demuksowanie: odczytuje zakodowane fragmenty wideo z obiektu File.
2. Dekodowanie: dekoduje zakodowane fragmenty do obiektów VideoFrame.
3. Przetwarzanie: przekształca wejściowy obiekt VideoFrame w obiekt VideoFrame o wyższej rozdzielczości.
4. Kodowanie: koduje powiększone obiekty VideoFrame na nowe zakodowane fragmenty.
5. Muksowanie: zapisuje wyjściowe zakodowane fragmenty w pliku wyjściowym.

Potok korzysta z interfejsu Streams API. Kodowanie, dekodowanie oraz demultipleksowanie lub multipleksowanie są realizowane jako strumienie. W wersji demonstracyjnej projekt korzysta z narzędzi do multipleksowania i strumieniowania z webcodecs-utilsbiblioteki. Ta biblioteka udostępnia otoczki strumieniowania dla VideoEncoder i 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();

Zobacz pełny potok w Codepen.

Interfejs Streams API jest szczególnie przydatny w przypadku WebCodecs, ponieważ wykorzystuje mechanizm backpressure do automatycznego spowalniania etapów poprzedzających, takich jak dekodowanie, jeśli jeden z etapów, np. kodowanie, jest przeciążony. Pozwala to uniknąć problemów z pamięcią i zwiększyć wydajność.

Zapewnia to prostą obsługę:

1. Przesyłasz film za pomocą wejścia pliku.
2. System przetwarza film lokalnie.
3. Wynik możesz pobrać jako obiekt Blob.

Więcej informacji o tworzeniu potoku transkodowania w WebCodecs Na GitHubie możesz też zobaczyć pełną ścieżkę przetwarzania bezpłatnego narzędzia do zwiększania rozdzielczości filmów z użyciem AI, która ma mniej niż 400 wierszy kodu.

Wyniki

Jedyną promocją bezpłatnego narzędzia do zwiększania rozdzielczości filmów wygenerowanych przez AI był jeden post w Reddicie. Mimo to dzięki rekomendacjom użytkowników, którzy udostępniali to narzędzie na forach, liczba aktywnych użytkowników miesięcznie wzrosła do 250 tys. przy miesięcznym tempie wzrostu wynoszącym 32%.

250 000

Aktywni użytkownicy miesięcznie

10 000

Liczba filmów przetwarzanych dziennie

30 000

liczba godzin przetworzonych filmów miesięcznie;

0 _$

Koszty przetwarzania na serwerze

Przetwarza 10 tys. filmów dziennie (30 tys. godzin filmów miesięcznie) bezpłatnie serwera.

Bezpłatne narzędzie do zwiększania rozdzielczości filmów przy użyciu AI służy do zdobywania potencjalnych klientów płatnej usługi zwiększania rozdzielczości przy użyciu AI. Tę usługę też stworzyłem, korzystając z bardziej zaawansowanych modeli AI działających po stronie serwera. Takie podejście generuje zysk bez marketingu, a początkowa aplikacja pozostaje bezpłatna i ma otwarty kod źródłowy.

Rekomendacje i materiały

Przed wprowadzeniem WebCodecs i WebGPU aplikacje wymagające intensywnego przetwarzania wideo wymagały oprogramowania na komputery, co mogło być uciążliwe, lub kosztownego przetwarzania po stronie serwera. Koszty serwera często stanowiły znaczną część kosztów operacyjnych aplikacji wideo.

Te interfejsy API przeglądarki umożliwiają tworzenie wydajnych aplikacji do przetwarzania wideo po stronie klienta. Są one bardziej intuicyjne i wygodniejsze w użyciu niż oprogramowanie na komputery, a także bardziej przystępne cenowo i skalowalne niż przetwarzanie po stronie serwera.

Jeśli chcesz dowiedzieć się więcej o WebCodecs i tworzeniu aplikacji wideo, takich jak Free AI Video Upscaler czy Katana, przeczytaj WebCodecsFundamentals. Dowiesz się, jak tworzyć aplikacje WebCodecs do środowiska produkcyjnego, ze szczególnym uwzględnieniem szczegółów dotyczących produkcji i wdrażania.