Yayınlanma tarihi: 5 Mart 2026
Sam Bhattacharyya olarak, Free AI Video Upscaler'ı 2023'te açık kaynak hobi projesi olarak geliştirdim. Beklenmedik bir şekilde ve organik olarak aylık etkin kullanıcı sayısı 250.000'e ulaştı (Şubat 2026 itibarıyla). Bu, projenin sunucu işleme maliyeti olmayan istemci tarafı yapay zeka işleme ile oluşturulması sayesinde mümkün oldu. Yazılım yüklemeniz veya oturum açmanız gerekmeden tarayıcıda videoları iyileştirebilirsiniz.
Bu belgede, uygulamama ücretsiz ve istemci tarafı işleme eklemek için WebGPU ve WebCodecs'i nasıl kullandığım açıklanmaktadır.
Sunucu maliyetiyle ilgili zorluklar
Önceki görevimde, milyonlarca kullanıcısı olan ve sunucu tarafında videoları işlemek için önemli bütçe maliyetleri olan tarayıcı tabanlı bir canlı yayın aracının yapay zeka altyapısını yönettim.
Sunucu tarafı video işleme, bütçenin% 20'sini oluşturuyordu. Bu, şirketin maaşlardan sonraki en büyük değişken maliyetiydi. Ekip, metne dönüştürme, ses veya video iyileştirme gibi her yapay zeka özelliği için yeni uygulamalarda katı bütçe şartlarıyla (saatlik 0,1 ABD doları) karşılaştı.
Tek istisna, sanal arka planlar ve arka plan gürültüsünü kaldırma gibi özelliklerin şirket içi istemci tarafı SDK kullanılarak uygulandığı istemci tarafı yapay zeka oldu. Model çıkarımı ve video işleme kullanıcının cihazında gerçekleştiği için bu yapay zeka özellikleri sunucu işleme maliyetine neden olmadı.
WebCodecs gibi API'ler, tarayıcıda tam teşekküllü video düzenleme paketleri de dahil olmak üzere eksiksiz video işleme işlem hatları oluşturulmasını sağlar. WebGPU, istemci tarafı yapay zekayı çok daha verimli hale getirir.
WebCodecs ve WebGPU ile istemci tarafı işleme
Ücretsiz Yapay Zeka Video Ölçekleyici, açık kaynaklı WebSR SDK'yı kullanır. Bu SDK, bir resmi kabul eder, ölçeğini büyütür ve sonucu bir tuvale boyar.
Süper çözünürlüklü bir nöral ağ, kaynak görüntüden görüntü özelliklerini çıkarmak için tekrarlanan görüntü kıvrımları (matris çarpımları) uygulayarak ölçeklendirme işlemini gerçekleştirir. Ardından, son ve daha yüksek kaliteli görüntüyü yeniden oluşturmak için bu görüntü özelliklerine daha fazla kıvrım uygulanır.
WebSR, bu nöral ağ evrişim katmanlarını WebGPU hesaplama gölgelendiricileri olarak uygular. Örneğin, örnek katmana ve tam ağa bakın. Render yöntemini çağırdığınızda SDK, ölçek büyütme ağının her katmanını çalıştırır ve nihai resmi bir tuvale çıkarır. Nöral ağ uygulaması hakkında daha fazla bilgi edinebilirsiniz.
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'deki WebSR SDK örneğine bakın.
WebSR SDK'sını MediaPipe veya TensorFlowJS gibi çerçeveleri kullanarak herhangi bir modelle değiştirebilirsiniz. Video işleme ardışık düzeninde WebCodecs kullanılır ve kod dönüştürme ardışık düzeni olarak yapılandırılır.
İşlem hattı birkaç aşamaya ayrılır:
- Demuxing: Kodlanmış video parçalarını bir Dosya nesnesinden okur.
- Kod çözme: Kodlanmış parçaları VideoFrame nesnelerine dönüştürür.
- İşleme: Giriş VideoFrame'ini ölçeği büyütülmüş bir VideoFrame'e dönüştürür.
- Kodlama: Ölçeği büyütülmüş VideoFrame nesnelerini yeni kodlanmış parçalar halinde kodlar.
- Muxing: Kodlanmış çıkış parçalarını çıkış dosyasına yazar.
Ardışık düzende Streams API kullanılır. Kodlama, kod çözme ve demuxing veya muxing işlemleri akış olarak uygulanır. Proje, bir demo için webcodecs-utils
kitaplığındaki çoklama ve akış yardımcı programlarını kullanır. Bu kitaplık, VideoEncoder ve VideoDecoder için akış sarmalayıcıları sağlar.
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'deki ardışık düzenin tamamını inceleyin.
Streams API, bir aşama (ör. kodlama) aşırı yüklendiğinde kod çözme gibi yukarı akış aşamalarını otomatik olarak yavaşlatmak için geri basınç kullandığından WebCodecs ile birlikte kullanıldığında özellikle faydalıdır. Bu sayede bellek sorunları önlenir ve verimlilik artırılır.
Bu sayede basit bir kullanıcı deneyimi sunulur:
- Dosya girişiyle video yükleme
- Sistem, videoyu yerel olarak işler.
- Sonucu Blob olarak indirebilirsiniz.
WebCodecs'te kod dönüştürme işlem hattı oluşturma hakkında daha fazla bilgi edinebilirsiniz. Ayrıca, 400 satırdan az kod içeren Ücretsiz Yapay Zeka Video Ölçekleyici'nin tam işleme hattını GitHub'da görebilirsiniz.
Sonuçlar
Free AI Video Upscaler'ın tek tanıtımı Reddit'te tek bir gönderi oldu. Buna rağmen, kullanıcıların forumlarda aracı paylaşması sayesinde ağızdan ağıza yayılarak aylık etkin kullanıcı sayısı 250.000'e ulaştı ve aydan aya% 32 büyüme oranı elde etti.
250.000
Aylık etkin kullanıcı sayısı
10.000
Günlük işlenen video sayısı
30.000
Ayda işlenen video saati
0 $
Sunucu işleme maliyetleri
Sunucu maliyeti olmadan günde 10.000 video (ayda 30.000 saat video) işler.
Ücretsiz Yapay Zeka ile Video Ölçeğini Artırma Aracı, ücretli yapay zeka ile ölçek artırma hizmeti için potansiyel müşteri kazanma aracı olarak kullanılır. Bu hizmeti de sunucu tarafında çalışan daha güçlü yapay zeka modellerini kullanarak oluşturdum. Bu yaklaşım, ilk uygulama ücretsiz ve açık kaynaklı kalırken pazarlama olmadan karlılık sağlar.
Öneriler ve kaynaklar
WebCodecs ve WebGPU'dan önce, video işleme yoğun uygulamalar için ya masaüstü yazılımı (bu da zahmetli olabilirdi) ya da maliyetli sunucu tarafı işleme gerekiyordu. Sunucu maliyetleri genellikle bir video uygulamasının işletme maliyetlerinin önemli bir bölümünü oluşturuyordu.
Bu tarayıcı API'leri, istemci tarafında verimli video işleme uygulamaları oluşturmanıza olanak tanır. Bu uygulamalar, masaüstü yazılımlarına kıyasla daha sezgiseldir ve daha az sorun çıkarır. Ayrıca, sunucu tarafı işlemeye kıyasla daha uygun fiyatlı ve ölçeklenebilirdir.
WebCodecs ve Yapay Zeka Videosu Yükseltici veya Katana gibi video uygulamaları oluşturma hakkında daha fazla bilgi edinmek istiyorsanız WebCodecsFundamentals'ı okuyun. Üretim ve uygulama ayrıntılarına odaklanarak üretim WebCodecs uygulamaları oluşturmayı öğreneceksiniz.