Araluma nasıl çalışır

Kısa yanıt

Araluma bir hibrit mimari kullanır: çoğu araç sıfır yüklemeyle tamamen tarayıcınızda çalışır ve bir avuç araç, tarayıcı kaliteyi karşılayamadığında kendi altyapımız üzerinden tek bir ağ isteği yönlendirir, her zaman görünmez bir istemci tarafı geri dönüşle. Hangi yolda olduğunuzu size her araçta ve bu sayfada söyleriz.

Aşağıdaki tablo temsilîdir, kapsamlı değil (katalog büyümeye devam ediyor). Her tür yola bir örnek gösterir:

Örnek araç	İşin nerede olduğu
Daire Kırpma (yalnızca tarayıcı)	Yüzde 100 tarayıcınızda, Canvas API. Yükleme yok, çevrimdışı çalışır.
Sıkıştırma önizlemesi (yalnızca tarayıcı)	Yüzde 100 tarayıcınızda, canvas.toBlob. Yükleme yok. Kaydırıcı anında kalır.
Sıkıştırma indirmesi (sunucuya dokunan)	api.araluma.com adresindeki hizmetimize tek gidiş-dönüş (Almanya’daki bir VPS’te sharp artı libvips), tarayıcı geri dönüşüyle.
Arka Plan Kaldırma (sunucuya dokunan)	Uç GPU’larda BiRefNet çalıştıran bir Cloudflare Worker’ına tek gidiş-dönüş, tarayıcınızda bir WebAssembly geri dönüşüyle.

Kırpma, yeniden boyutlandırma, PDF ve biçim dönüştürme araçları (AVIF çıktı yolu hariç) yalnızca tarayıcı tarafında yer alır. Sıkıştırma indirmesi, arka plan kaldırma, yapay zekayla büyütme ve AVIF çıktı dönüştürmeleri, her biri bir yerel geri dönüşle, sunucuya dokunan tarafta yer alır.

Yalnızca tarayıcı iddialarını yaklaşık 30 saniyede doğrulayabilirsiniz: DevTools’u açın, Ağ paneline gidin, günlüğü temizleyin, sonra herhangi bir yalnızca tarayıcı aracı kullanın. Görüntü baytlarınızı taşıyan sıfır isteğin sayfadan ayrıldığını göreceksiniz. Sunucuya dokunan araçlar için yukarıdaki adı belli uç noktalara işlem başına tam olarak bir yükleme göreceksiniz.

Neden hibrit

Çoğu çevrimiçi görüntü aracı bir uçta durur: her şeyi sunucuya yükle (gidiş-dönüşleri beklersiniz ve işletici dosyanızı saklar) ya da tamamen tarayıcıda (kodlama ve yapay zeka adımlarında kalite ve hızdan ödün verirsiniz). Hiçbir uç her yerde kazanmaz.

Tarayıcıların zaten mükemmel olduğu her yerde istemci tarafını seçtik. <canvas> öğesi kırpmayı, döndürmeyi, yeniden boyutlandırmayı ve JPG ya da WebP’de kayıplı önizleme kodlamasını yönetir ve modern tarayıcılar her yaygın biçimi yerel olarak çözer. Sunucu tarafını yalnızca tarayıcının hala ölçülebilir biçimde kaybettiği birkaç adım için seçtik:

• Sıkıştırma, son indirmede. Sunucu tarafı sharp artı libvips, aynı görsel kalitede tarayıcı kodlayıcılarından bayt bayt yüzde 10 ila 15 daha küçük dosyalar üretir ve tarayıcının sunmadığı AVIF hız ve renk ayarlarını açığa çıkarır. Kaydırıcı ve önizleme yinelemenin anında kalması için yine tarayıcınızda çalışır. Yalnızca “İndir” dokunuşu hizmetimizden geçer.
• Yapay zeka arka plan kaldırma, varsayılan yolda. Cloudflare’in görüntü bölütlemesinin çalıştırdığı BiRefNet modeli (remove.bg ile aynı mimari) bir iki saniyede bitirmek için gerçek bir GPU gerektirir. Tarayıcı içi geri dönüş (ONNX Runtime artı WebAssembly üzerinden ISNet) çalışır, ama çok daha uzun sürer ve saç, kürk ve ince kenarlarda gözle görülür biçimde daha kaba bir kesim üretir.
• Yapay zekayla büyütme, varsayılan yolda. Bulut süper çözünürlük, tarayıcı tarafı bir yeniden örneklemenin yapamadığı ayrıntıyı geri kazanır, hizmete erişilemediğinde bir tarayıcı geri dönüşüyle.

Bu yollarda sunucu tarafında olmak için kabul ettiğimiz maliyet, işlem başına bir gidiş-dönüştür. Geri kalan her yerde istemci tarafında kalarak kaçındığımız maliyet, en hızlı yinelenen iş akışı parçalarında aynı ücrettir.

Boru hattı, adım adım

1. Bir dosya seçersiniz

Dosya seçici, sürükle-bırak ya da yapıştırma yoluyla tarayıcı, JavaScript’e bir File nesnesi verir. JavaScript baytları FileReader ya da Blob.arrayBuffer() kullanarak okur. Bu adımın hiçbir noktasında dosya ağ üzerinden gönderilmez, hangi aracı kullanırsanız kullanın.

2. Tarayıcı görüntüyü çözer

Modern tarayıcılar JPG, PNG, WebP, GIF ve AVIF’i yerel olarak çözer. Ham baytları ana iş parçacığı dışında GPU’nun çalışabileceği bir bit eşleme dönüştürmek için createImageBitmap() kullanırız. Yerel olarak çözmeyen tarayıcılarda HEIC için, tarayıcınızda yerel çalışan bir WebAssembly çözücüye geri döneriz.

3. Araç işini yapar, yolların ayrıldığı yer

• Yalnızca tarayıcı araçları (kırpma, yeniden boyutlandırma, sıkıştırma önizlemesi ve kaydırıcısı, PDF birleştirme ve çoğu biçim dönüştürme). Bunlar makinenizde Canvas piksel dönüşümleri ve canvas.toBlob yeniden kodlamaları olarak çalışır. Etkileşimli kırpma çerçevesi Cropper.js kullanır. Hiçbir şey sayfadan ayrılmaz.
• Sıkıştırma indirmesi. “İndir”e dokunduğunuzda, görüntü bir kez api.araluma.com adresine gider (Almanya’daki bir Hostinger VPS’inde bir Fastify hizmeti, Node artı sharp ve libvips, Squoosh’un sunucu yolunda kullandığı aynı C kütüphaneleri). Önizlemede ayarladığınız parametrelerle yeniden kodlanır ve baytlar geri akar. Hizmet, kiracı yalıtımlı, içerik adresli bir önbellek tutar (giriş baytları artı parametrelerin bir karması), böylece aynı görüntüyü aynı ayarlarla yeniden indirmek önbelleğe alınmış baytları yeniden oynatır. O önbellek sizin, IP’nizin ya da dosya adınızın indeksiyle tutulmaz. Hizmet erişilemezse, araç tarayıcı içi önizleme blob’una geri döner.
• Arka plan kaldırma, varsayılan bulut yolu. Görüntü bir kez bir Cloudflare Worker’ına yüklenir, özel bir R2 paketinde sahneye konur, Cloudflare’in BiRefNet modelini uç GPU’larda çalıştıran görüntü bölütlemesi tarafından işlenir ve kesim geri akar. Sahnelenen nesne, sonuçtan bağımsız olarak bir R2 yaşam döngüsü kuralıyla bir saat içinde silinir. Tipik bir fotoğraf bir iki saniyede biter. Günlük IP başına ve yükleme boyutu sınırları ücretsiz katmanı sürdürülebilir tutar.
• Arka plan kaldırma, WebAssembly geri dönüşü. Worker erişilemezse (ağınız düşer, katı bir güvenlik duvarı engeller, günlük kota dolar ya da dosya bulut sınırı için çok büyükse), araç sessizce yerel olarak ONNX Runtime Web ve WebAssembly üzerinden çalışan ISNet modeline geçer. İlk çalıştırma modeli indirir ve daha uzun sürer, sonraki çalıştırmalar daha hızlıdır. Bu yolda yükleme yok, DevTools’ta doğrulanabilir.
• Yapay zekayla büyütme. Varsayılan yol görüntüyü bir kez bir bulut süper çözünürlük hizmetine gönderir ve büyütülmüş sonucu geri akıtır, hizmete erişilemezse bir tarayıcı tarafı geri dönüşle.

4. Sonucu indirirsiniz

Çıktı bit eşlemi bir Blob içine kodlanır, bir nesne URL’sine sarılır ve tarayıcınızın standart dosya kaydetme iletişim kutusuna verilir. Dosya diskinize iner.

Kendiniz nasıl doğrularsınız

Hangisini tercih ederseniz onu seçin:

Yöntem 1. Ağ sekmesini izleyin

1. Araluma’yı yeni bir sekmede açın ve DevTools’u, ardından Ağ panelini açın.
2. Daire Kırpma ya da Sıkıştırma önizleme kaydırıcısı gibi bir yalnızca tarayıcı aracı kullanın. Yalnızca HTML, CSS, JS ve yazı tipleri için istekler ve ilk kullanımda ilgili WebAssembly modüllerini göreceksiniz. Hiçbir istek görüntü baytlarınızı taşımayacak.
3. Şimdi Sıkıştırma İndirmesi ya da Arka Plan Kaldırma gibi bir sunucuya dokunan araç kullanın. Görüntünüzü adı belli uç noktaya taşıyan tam olarak bir POST ve sonucu geri getiren bir yanıt göreceksiniz. Boyutunu ve zamanlamasını okumak için herhangi bir isteğin üzerine gelin.

“Initiator” sütunu her isteği hangi betiğin tetiklediğini söyler ve “Type” sütunu ne gönderildiğini söyler. İkisini de gizlemeyiz.

Yöntem 2. Araçları çevrimdışı kullanın

1. Herhangi bir Araluma araç sayfasını yükleyin. Tarayıcı içi ISNet modelinin önbelleğe alınması için küçük bir görüntüde bir kez Arka Plan Kaldırma çalıştırın.
2. DevTools’u açın, Ağ’a gidin ve Çevrimdışı’yı işaretleyin (ya da Wi-Fi’yi kapatın).
3. Sayfayı yeniden yükleyin. Statik kaynaklar önbelleğe alınmıştır, bu yüzden yine yüklenir.
4. Araçları deneyin:
   • Yalnızca tarayıcı araçları çalışmaya devam eder. Ağa hiç ihtiyaçları yoktu.
   • Sıkıştırma İndirmesi tarayıcı içi önizleme blob’una geri döner (biraz daha az verimli bir kodlama, ama işlevsel).
   • Arka Plan Kaldırma ISNet WebAssembly modeline geri döner ve hiçbir giden istek olmadan çalışır.

Bu araçlar çevrimdışı çalıştıysa (bazıları azalmış, yalnızca tarayıcı olanlar aynı), o zaman tanım gereği hiçbir sunucu görüntünüzü görmemiştir.

Ne görürüz, ne görmeyiz

Yalnızca tarayıcı yollarında, görüntünüz hakkında hiçbir şey görmeyiz. Bakılacak bir istek, saklanacak bir önbellek, grep’lenecek bir günlük satırı yoktur.

Sunucuya dokunan yollarda:

• Sıkıştırma İndirmesi görüntü baytlarını kodlamanın süresi boyunca görür (genellikle birkaç yüz milisaniye), TTL’si boyunca içerik adresli bir önbellek girişi tutar ve hepsi bu. Önbellek, “sizin” görüntülerinizi bulmak için kullanabileceğimiz bir kullanıcı, IP, dosya adı ya da herhangi bir tanımlayıcıyla indekslenmez. Görüntü içeriğini günlüğe almayız. Kodlama hizmeti, v1’in geçişten önce hizmet verdiği aynı kiracılar arasında paylaşılır, kiracı başına CORS, hız sınırları ve HMAC imzalı kanonik URL’lerle.
• Arka Plan Kaldırma görüntüyü sahneleme yüklemesi ve bölütleme çağrısının süresi boyunca görür (tipik olarak bir iki saniye), ardından sahnelenen kopya R2 yaşam döngüsü kuralıyla silinir. Baytlarınızı asla üçüncü taraf bir model sağlayıcısına vermeyiz. BiRefNet modeli, harici bir remove.bg, fal.ai ya da Replicate tarzı bir API’de değil, Cloudflare’in kendi altyapısında çalışır.
• Yapay zekayla büyütme görüntüyü süper çözünürlük çağrısının süresi boyunca görür, sonucu döndürür ve size bağlı hiçbir şey saklamaz.

Her yolda, analiz sağlayıcımız (Cloudflare Web Analytics) toplu sayfa görüntüleme verilerini kaydeder: URL, ülke, tarayıcı ailesi, Core Web Vitals. Çerez yok, kalıcı tanımlayıcı yok, bir kişiye bağlı hiçbir şey yok.

İlk kullanımda bir WebAssembly modülü indiren araçlar için (HEIC çözücüsü, ISNet ONNX modeli), barındırma sağlayıcımız birinin modülü getirdiğini görür, tıpkı bir CSS dosyasının getirildiğini gördüğü gibi. Modülün kendisi görüntünüz hakkında hiçbir bilgi taşımaz.

Tam veri envanteri gizlilik politikamızdadır.

Teknoloji yığını

Meraklılar için:

• Astro, statik site oluşturucu. Her sayfa, etkileşimli araçların olduğu yerlerde yalnızca aşamalı olarak geliştirilmiş JavaScript “adacıkları” ile düz HTML olarak gönderilir.
• Özel özelliklerle vanilya CSS, Tailwind yok, CSS-in-JS yok. Tüm tasarım sistemi tek bir tokens.css dosyasıdır.
• canvas.toBlob ve <canvas>, tarayıcı tarafı araçlar ve önizlemeler için JPEG, PNG, WebP ve AVIF kodlaması.
• Cropper.js, kırpma dikdörtgeni etkileşim katmanı.
• ONNX Runtime Web, Arka Plan Kaldırma için ISNet WebAssembly geri dönüşünü çalıştırır.
• Cloudflare statik yapıyı barındırır ve uçtan sunar, ve varsayılan Arka Plan Kaldırma yolunun arkasındaki Workers, R2 ve görüntü bölütleme boru hattını (BiRefNet) çalıştırır.
• Node üzerinde sharp ve libvips ile Fastify, Almanya’daki bir Hostinger VPS’inde, api.araluma.com adresindeki Sıkıştırma indirme hizmeti.
• Cloudflare Web Analytics, toplu, çerezsiz sayfa görüntüleme sayıları.

Tarayıcı desteği

Her araç Chrome, Firefox, Safari ve Edge’in geçerli ve önceki sürümünde, masaüstü ve mobilde çalışır. Site aşamalı geliştirme kullanır: bir tarayıcı daha yeni bir API’yi (örneğin showSaveFilePicker ya da OffscreenCanvas) desteklediğinde onu kullanırız ve desteklemediğinde eski eşdeğerine geri döneriz. “Tarayıcınız desteklenmiyor” duvarı yoktur.

Tek katı gereklilikler JavaScript (herhangi bir araç için) ve bir ağ bağlantısıdır (yalnızca sunucuya dokunan bir yol kullanılırken, yalnızca tarayıcı araçları ilk sayfa yüklemesinden sonra tamamen çevrimdışı çalışır).

Sorular

Değinmediğimiz bir şey mi var? support@araluma.com adresine e-posta gönderin. Teknik sorular hoş karşılanır.