Yapay Zeka Arka Plan Silici - İnteraktif Demo

Bu proje, MMDeploy ile ONNX formatına dönüştürülmüş RTMDet-Tiny instance segmentation modelini kullanarak tamamen tarayıcınızda çalışan bir arka plan kaldırma uygulaması sunuyor. Herhangi bir görsel yükleyin ve yapay zekanın gerçek zamanlı olarak arka planı nasıl kaldırdığını izleyin!

Model, doğru nesne tespiti yaparak nesneleri arka plandan ayıran hassas segmentasyon maskeleri oluşturur. Tüm işlemler optimum performans için WASM kullanılarak client-side gerçekleşir.

MMDetection ile Arka Plan Kaldırma: Tarayıcıda Instance Segmentation

Arka plan kaldırma, geleneksel olarak güçlü sunucular gerektiren yaygın bir bilgisayarlı görü görevidir. Ancak ONNX Runtime Web gibi modern web teknolojileri ve RTMDet-Tiny gibi optimize edilmiş modeller sayesinde, profesyonel kalitede arka plan kaldırma işlemini doğrudan tarayıcıda gerçekleştirebiliriz.

Proje Özeti

Hedef: Profesyonel kalitede arka plan kaldırma yapan, tamamen tarayıcıda çalışan bir web uygulaması.

Temel Özellikler:

• Sıfır Sunucu Maliyeti - Tüm işlemler client-side
• Instance Segmentation - Hassas nesne tespiti ve maskeleme
• Optimize Performans - CPU'da ~765ms inference süresi (512x512 çözünürlük)
• Gizlilik Öncelikli - Görseller cihazınızdan ayrılmaz
• Mobil Uyumlu - Telefon ve tabletlerde çalışır

Teknik Mimari

Model: RTMDet-Tiny

RTMDet (Real-Time Multi-object Detection), OpenMMLab'den son teknoloji bir nesne tespit modelidir. "Tiny" varyantı, doğruluk ve hız arasında mükemmel bir denge sunar:

Model Özellikleri:
├── Mimari: RTMDet-Tiny (Instance Segmentation)
├── Backbone: CSPNeXt-Tiny
├── Neck: CSPNeXtPAFPN
├── Head: RTMDetInsSepBNHead (Mask R-CNN tarzı)
├── Parametre Sayısı: ~4M
└── Model Boyutu: ~23 MB (ONNX)

Export Pipeline: MMDeploy

MMDeploy, MMDetection modellerini çeşitli deployment formatlarına export etmek için optimize edilmiş bir pipeline sunar. Tarayıcı deployment'ı için ONNX Runtime ile SDK formatını kullandım:

# MMDeploy export konfigürasyonu
config = "configs/mmdet/instance-seg/instance-seg_onnxruntime_dynamic.py"
model_cfg = "rtmdet-ins_tiny_8xb32-300e_coco.py"
checkpoint = "rtmdet-ins_tiny_8xb32-300e_coco_20221130_151727-ec670f7e.pth"
 
# Export komutu
python tools/deploy.py \
    {config} \
    {model_cfg} \
    {checkpoint} \
    test_image.jpg \
    --work-dir output \
    --device cpu \
    --dump-info

SDK Format Avantajları:

• Uçtan uca işleme (preprocessing + inference + NMS + mask generation)
• Değişken tespit sayıları için dinamik şekiller
• Inference için optimize edilmiş (eğitim bileşenleri yok)
• Çıktı formatı: dets, labels, masks

Tarayıcı Optimizasyonu

Tarayıcıda sorunsuz performans elde etmek için birkaç optimizasyon uygulandı:

1. Çözünürlük Optimizasyonu

// %6 hız artışı için 640x640'dan 512x512'ye düşürüldü
const TARGET_SIZE = 512;

2. WASM SIMD Hızlandırma

ort.env.wasm.numThreads = 1;
ort.env.wasm.simd = true;  // Daha hızlı hesaplama için SIMD aktif

3. Preprocessing Pipeline

function preprocess(img, targetSize) {
    // Letterbox yeniden boyutlandırma (en-boy oranını koru)
    const scale = Math.min(targetSize / img.width, targetSize / img.height);
    const newW = Math.round(img.width * scale);
    const newH = Math.round(img.height * scale);
    
    // Gri ile hedef boyuta doldur (114, 114, 114)
    // Normalize et: (pixel - mean) / std
    const mean = [103.53, 116.28, 123.675];
    const std = [57.375, 57.12, 58.395];
    
    // CHW formatına dönüştür (channels-first)
    // Çıktı şekli: [1, 3, 512, 512]
}

Performans

Farklı görsel türlerinde test edildi:

Test Sonuçları:

• Portre Fotoğrafları - Hassas kenarlarla doğru insan tespiti
• Araçlar - Temiz araç/otomobil segmentasyonu
• Hayvanlar - Tüy dokusunun hassas şekilde korunması
• Karmaşık Sahneler - Çoklu nesneler ve örtüşen öğelerle başa çıkma

Implementasyon Detayları

Model Yükleme

async function loadModel() {
    const response = await fetch('rtmdet_tiny_sdk.onnx');
    const buffer = await response.arrayBuffer();
    
    const session = await ort.InferenceSession.create(buffer, {
        executionProviders: ['wasm'],
        graphOptimizationLevel: 'all'
    });
    
    return session;
}

Inference Pipeline

async function runInference(session, imageElement) {
    // 1. Preprocessing
    const { tensor, scale, padW, padH } = preprocess(imageElement, 512);
    
    // 2. Inference çalıştır
    const feeds = { [session.inputNames[0]]: tensor };
    const results = await session.run(feeds);
    
    // 3. Çıktıları parse et (SDK format)
    const dets = results.dets.data;      // [N, 5] - bboxes + scores
    const labels = results.labels.data;  // [N] - sınıf etiketleri
    const masks = results.masks.data;    // [N, H, W] - segmentasyon maskeleri
    
    // 4. Postprocess ve görselleştir
    return { dets, labels, masks, scale, padW, padH };
}

Maske Uygulama

function applyMask(originalImage, mask, scale, padW, padH) {
    const canvas = document.createElement('canvas');
    canvas.width = originalImage.width;
    canvas.height = originalImage.height;
    const ctx = canvas.getContext('2d');
    
    // Orijinal görseli çiz
    ctx.drawImage(originalImage, 0, 0);
    
    // Görsel verisini al
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const pixels = imageData.data;
    
    // Maskeyi alpha kanalına uygula
    for (let y = 0; y < canvas.height; y++) {
        for (let x = 0; x < canvas.width; x++) {
            const maskValue = getMaskValue(mask, x, y, scale, padW, padH);
            const pixelIndex = (y * canvas.width + x) * 4;
            pixels[pixelIndex + 3] = maskValue > 0.5 ? 255 : 0;
        }
    }
    
    ctx.putImageData(imageData, 0, 0);
    return canvas;
}

Kullanım Alanları

Bu teknoloji çeşitli uygulamaları mümkün kılar:

1. Fotoğrafçılık - Portrelerden dikkat dağıtan arka planları kaldırın
2. E-ticaret - Temiz beyaz arka planlı ürün görselleri oluşturun
3. Sosyal Medya - Profil resimleri ve stickerlar üretin
4. Sunumlar - Slaytlar ve dokümanlar için konuları ayıklayın
5. Yaratıcı Projeler - Kompozit görseller ve sanatsal efektler

Zorluklar ve Çözümler

Zorluk 1: Model Boyutu

Problem: Orijinal model web deployment için çok büyük
Çözüm: RTMDet-Tiny varyantı kullanıldı (23 MB), web için kabul edilebilir

Zorluk 2: Inference Hızı

Problem: İlk 640x640 çözünürlük çok yavaş
Çözüm: Minimal kalite kaybıyla 512x512'ye optimize edildi (%6 hızlanma)

Zorluk 3: Mobil Uyumluluk

Problem: WebGL evrensel olarak desteklenmiyor
Çözüm: Daha geniş uyumluluk için WASM backend kullanıldı

Zorluk 4: Bellek Yönetimi

Problem: Büyük görseller tarayıcı çökmelerine neden oluyor
Çözüm: İşlemden önce input görsellerini yeniden boyutlandır, maksimum çözünürlük sınırla

Gelecek İyileştirmeler

Bu proje için potansiyel geliştirmeler:

1. Çoklu Çözünürlük Desteği - Cihaz yeteneklerine göre adaptif çözünürlük
2. Toplu İşleme - Birden fazla görseli sırayla işle
3. Kenar İyileştirme - Daha yumuşak kenarlar için post-processing
4. Arka Plan Değiştirme - Sadece kaldırma değil, özel arka planlarla değiştirme
5. Video Desteği - Video akışları için gerçek zamanlı arka plan kaldırma
6. Model Seçimi - Hız/kalite dengesi için birden fazla model boyutu

Deployment Değerlendirmeleri

Web Hosting

Bu proje sadece statik dosya hosting gerektirir:

• GitHub Pages (ücretsiz)
• Netlify / Vercel (ücretsiz tier)
• Cloudflare Pages (ücretsiz)
• S3 + CloudFront

CORS Konfigürasyonu

ONNX model yüklemesi için uygun CORS headerları gereklidir:

// Sunucu konfigürasyonu
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET

Caching Stratejisi

ONNX modeli büyük olduğu için agresif caching faydalıdır:

// Service Worker caching
cache.addAll([
    '/demos/background-remover/model.onnx',
    '/demos/background-remover/demo.js'
]);

Test Sonuçları Galerisi

Model, çeşitli görsel türleriyle kapsamlı şekilde test edilmiştir. Aşağıda her test durumu için orijinal görsel, segmentasyon maskesi ve nihai arka plan kaldırılmış sonucu gösteren görsel karşılaştırmalar bulunmaktadır:

Araç Segmentasyonu

Hassas kenar tespiti ile aracın temiz segmentasyonu. Model, arabayı arka plan elementlerinden başarıyla ayırıyor.

Portre Segmentasyonu

Saç ve vücut hatları dahil detaylı maskelerle doğru insan tespiti. Farklı pozlar ve arka planlarla iyi çalışıyor.

Hayvan Segmentasyonu

Tüy dokusu gibi ince detayları yakalayan hassas hayvan tespiti. Model, hayvan segmentasyonunu insanlar ve araçlarla eşit seviyede gerçekleştiriyor.

Karmaşık Sahne

Modelin üst üste binen nesneleri ve karmaşık arka planları yönetebilme yeteneğini gösteren çoklu nesne sahnesi.

Kaynaklar ve Referanslar

• MMDetection - Nesne tespit framework'ü
• MMDeploy - Model deployment toolkit
• ONNX Runtime Web - Tarayıcı inference
• RTMDet Paper - Model mimari detayları
• GitHub Repository - Tam kaynak kodu ve test notebook'ları

Sonuç

Bu proje, instance segmentation ve arka plan kaldırma gibi sofistike bilgisayarlı görü görevlerinin web tarayıcılarında verimli şekilde çalışabileceğini gösteriyor. Optimize edilmiş modelleri (RTMDet-Tiny), verimli formatları (ONNX) ve modern web teknolojilerini (WASM) birleştirerek, kullanıcı gizliliğine saygı duyan, maliyetleri düşüren ve anında sonuç veren güçlü uygulamalar yaratabiliriz.

Yapay zekanın geleceği giderek edge'e doğru ilerliyor ve tarayıcılar makine öğrenimi modellerini çalıştırmak için yetenekli bir platform haline geliyor. Bu proje, bugün mümkün olanın sadece bir örneği.

Yukarıdaki demoyu kendi görsellerinizle deneyin ve tamamen cihazınızda çalışan yapay zeka destekli arka plan kaldırmayı deneyimleyin!