Tarayıcıda İki OCR Motoru ve Bir BERT Modeli Çalıştırdım — İşte Öğrendiklerim

Her gün birileri Slack'e, Jira biletlerine veya sunumlara müşteri adları, e-postalar ve gelir rakamları açıkça okunabilen ekran görüntüleri yapıştırıyor. Standart çözüm bir sansürleme aracı kullanmaktır; ancak bu araçların neredeyse tamamı ekran görüntünüzü bir sunucuya yükler. Bu da tam olarak kaçınmaya çalıştığınız veri sızıntısı riskini doğurur.

Bu sorunu çözmek için VaultSnip adında, ekran görüntülerindeki hassas metinleri bulanıklaştıran ücretsiz ve açık kaynaklı bir araç geliştirildi. Temel kısıtlama netti: Her şey kullanıcının cihazında çalışmalı. Backend yok, hesap açmak yok, dosya yüklemek yok. Uygulama tamamen Cloudflare Pages üzerinde statik dosyalardan oluşuyor ve görseliniz tarayıcı sekmesinden dışarı çıkmıyor. Bu kısıtlama, tam kapsamlı bir makine öğrenmesi (ML) hattını istemci tarafında (client-side) çalıştırmayı zorunlu kıldı.

Mimari Hat: Tek Sekmede İki OCR Motoru ve Bir PII Modeli#

Neyin bulanıklaştırılacağına karar vermek için önce görseldeki metnin ne olduğunu ve nerede bulunduğunu bilmeniz gerekir. VaultSnip, her biri ayrı bir Web Worker içinde çalışan üç motoru katmanlı olarak kullanır:

• Tesseract.js: Hızlı ilk geçişi yapar. Maskeler birkaç saniye içinde uygulanır, böylece kullanıcı anında sonuç görür.
• PP-OCRv5 (ONNX olarak PaddleOCR mobil tespit ve tanıma modelleri): Tesseract'ın kaçırdığı küçük yazıları, düşük kontrastlı etiketleri ve grafik içi metinleri yakalar. Resmi ONNX çıktıları ONNX Runtime Web üzerinden çalıştırılır; DB son işleme (post-processing) ve CTC çözümleme (decoding) adımları TypeScript ile özel olarak yazılmıştır.
• BERT-small PII Modeli (Transformers.js üzerinden int8-quantized ONNX): Tanınan metni sınıflandırır. Bunun bir kişi adı, e-posta, kimlik numarası veya şirket adı olup olmadığına karar vererek neyin maskeleneceğini belirler.

Burada model seçiminden daha önemli olan kritik bir tasarım kuralı uygulanmıştır: Sonraki geçişler yalnızca yeni maskeler ekler, mevcut olanları asla kaldırmaz. Böylece motorlar arası uyuşmazlıklar gizlenmiş bir veriyi tekrar açığa çıkarmaz ve görüntü aşamalı olarak daha güvenli hale gelir.

Ders 1: Cross-Origin Isolation, Girişin Gerçek Bedelidir#

ONNX Runtime Web'in çok iş parçacıklı (threaded) SIMD derlemesi SharedArrayBuffer gerektirir. Tarayıcılar buna yalnızca sayfa cross-origin isolated olduğunda izin verir; yani her şeyde Cross-Origin-Opener-Policy: same-origin ve Cross-Origin-Embedder-Policy: require-corp başlıkları bulunmalıdır. Kağıt üzerinde iki satırlık bir yapılandırma gibi görünse de pratikte yüklenen her betiğin, wasm dosyasının ve model ağırlığının aynı kökenden (same-origin) gelmesini zorunlu kılar. Bu durum tüm mimariyi şekillendirmiştir: Çalışma zamanında CDN'den hiçbir şey çekilmez, tüm modeller aynı kökenden sunulur. Bu mimari zorunluluk, "üçüncü taraf sunuculara istek atılmaz" vaadini tarayıcının Network sekmesinden kanıtlanabilir bir özelliğe dönüştürmüştür.

Ders 2: Model Boyutu Bir Bant Genişliği Değil, UX Sorunudur#

Int8-quantized BERT modeli ve sıkıştırılmış birkaç megabaytlık PP-OCRv5 modelleri ML standartlarına göre küçüktür. Kullanıcılar, uygulama dürüst olduğu ve indirme bitmeden önce bile fayda sağladığı sürece bu yüklemeyi bir kez beklemeye razı olur. Katmanlı mimarinin (layering) önemi buradadır: Oldukça küçük olan Tesseract.js saniyeler içinde ilk maskeleri teslim ederken, ağır modeller arka planda ısınır. Yavaş kısım çalışırken kullanıcı halihazırda değer elde etmeye başlamıştır.

Ders 3: Kaçırdıklarınızı Ölçün ve Yayınlayın#

Her tespit hattı bazı şeyleri kaçırır; çoğu araç bundan hiç bahsetmez. VaultSnip ise tam tersi bir yaklaşım sergiler: Depoda kurgusal panolar oluşturan, tüm hattı çalıştıran ve maskelenmeden kalan okunabilir metin alanını ölçen otomatik bir kıyaslama (benchmark) testi bulunur. Şu anda bu oran okunabilir alanın yaklaşık %0.25'i kadardır. Yazılım geliştirmede kusurları şeffafça ölçümlemek ve otomatik regresyon testlerine bağlamak, güvenilir AI ürünleri inşa etmenin en sağlam yoludur.