Как бесплатный ИИ-апскейлер видео использует WebGPU + WebCodecs для обслуживания 250 000 активных пользователей в месяц без затрат на сервер.

Samrat Bhattacharyya

Опубликовано: 5 марта 2026 г.

Я, Сэм Бхаттачарья , изначально создал Free AI Video Upscaler как хобби-проект с открытым исходным кодом в 2023 году. Он неожиданно и органично вырос до 250 000 ежемесячно активных пользователей (по состоянию на февраль 2026 года). Это стало возможным благодаря тому, что проект был построен с использованием обработки ИИ на стороне клиента, что не требует затрат на серверную обработку. Вы можете улучшать видео в браузере, без необходимости установки программного обеспечения или входа в систему.

В этом документе объясняется, как я использовал WebGPU и WebCodecs для добавления бесплатной обработки данных на стороне клиента в мое приложение.

Обзор бесплатного ИИ-апскейлера для видео.

Проблемы со стоимостью серверов

На предыдущей должности я руководил инфраструктурой искусственного интеллекта для браузерного инструмента потоковой трансляции в реальном времени, который обслуживал миллионы пользователей и требовал значительных бюджетных средств на обработку видео на стороне сервера.

На обработку видео на стороне сервера приходилось 20% бюджета. Это была одна из основных переменных статей расходов компании, уступающая по значимости только заработной плате. Для каждой функции ИИ, такой как транскрипция, улучшение аудио или видео, команда сталкивалась со строгими бюджетными ограничениями (0,1 доллара за час видео) для новых внедрений.

Единственным исключением был клиентский ИИ, где такие функции, как виртуальные фоны и удаление фонового шума, были реализованы с помощью собственного клиентского SDK. Эти функции ИИ не требовали затрат на серверную обработку, поскольку вывод модели и обработка видео происходили на устройстве пользователя.

API, такие как WebCodecs, позволяют создавать полноценные конвейеры обработки видео, включая полноценные пакеты для видеомонтажа, прямо в браузере. WebGPU значительно повышает эффективность клиентского ИИ.

Обработка на стороне клиента с использованием WebCodecs и WebGPU

Бесплатный инструмент для масштабирования видео с помощью ИИ использует открытый исходный код WebSR SDK . Этот SDK принимает изображение, масштабирует его и отображает результат на холсте.

Нейронная сеть сверхвысокого разрешения выполняет масштабирование путем многократного применения сверток изображения (умножения матриц) для извлечения признаков изображения из исходного изображения. Затем к этим признакам изображения применяются дополнительные свертки для восстановления окончательного изображения более высокого качества.

Диаграмма, иллюстрирующая процесс сверхвысокого разрешения.

WebSR реализует эти сверточные слои нейронной сети в виде вычислительных шейдеров WebGPU. Например, см. пример слоя и полную сеть . При вызове метода render 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 можно посмотреть на Codepen .

Вы можете заменить SDK WebSR любой другой моделью, используя такие фреймворки, как MediaPipe или TensorflowJS. Конвейер обработки видео использует WebCodecs и структурирован как конвейер транскодирования.

Блок-схема, демонстрирующая конвейер транскодирования.

Процесс разбивается на несколько этапов:

Демультиплексирование : считывает закодированные фрагменты видео из объекта File.
Декодирование : Декодирует закодированные фрагменты в объекты VideoFrame.
Обработка : Преобразует входной видеокадр в увеличенный видеокадр.
Кодирование : кодирует увеличенные объекты VideoFrame в новые закодированные фрагменты.
Мультиплексирование : Записывает закодированные выходные фрагменты в выходной файл.

Конвейер обработки данных использует 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 .

API Streams особенно полезен при работе с WebCodecs, поскольку он использует механизм обратного давления для автоматического замедления вышестоящих этапов, таких как декодирование, если один из этапов, например, кодирование, перегружен. Это позволяет избежать проблем с памятью и повысить эффективность.

Это обеспечивает простой и понятный пользовательский интерфейс:

Вы загружаете видео, вводя имя файла.
Система обрабатывает видео локально.
Результат можно загрузить в формате Blob.

Подробнее о создании конвейера транскодирования можно узнать в WebCodecs . Полный конвейер обработки Free AI Video Upscaler , состоящий менее чем из 400 строк кода, также доступен на GitHub.

Результаты

Единственной рекламой Free AI Video Upscaler стал один пост на Reddit . Несмотря на это, благодаря сарафанному радио и распространению информации о инструменте на форумах, число активных пользователей органически выросло до 250 000 в месяц, демонстрируя 32% ежемесячный рост.

250 000

Ежемесячное количество активных пользователей

10 000

Видеоролики обрабатываются в день

30 000

Количество часов обработанного видео в месяц

0 _$

затраты на обработку данных на сервере

Она обрабатывает 10 000 видеороликов в день (30 000 часов видео в месяц) с нулевыми затратами на сервер.

Бесплатный инструмент для масштабирования видео с помощью ИИ служит инструментом генерации лидов для платной услуги масштабирования с использованием ИИ . Я также разработал эту услугу, используя более мощные модели ИИ, работающие на стороне сервера. Такой подход обеспечивает прибыльность без маркетинга, при этом первоначальное приложение остается бесплатным и с открытым исходным кодом.

Проблемы со стоимостью серверов

Обработка на стороне клиента с использованием WebCodecs и WebGPU

Результаты

Рекомендации и ресурсы