Jak działa Araluma

Szczegóły techniczne na temat tego, co robią narzędzia, gdzie działają i jak możesz to zweryfikować samodzielnie.

Krótka odpowiedź

Araluma stosuje architekturę hybrydową: większość narzędzi działa w całości w Twojej przeglądarce, z zerowym przesyłaniem, a garstka kieruje pojedyncze żądanie sieciowe przez naszą własną infrastrukturę, gdy przeglądarka nie potrafi dorównać jakości, zawsze z niewidocznym zapasowym rozwiązaniem po stronie klienta. Mówimy, na której ścieżce jesteś, w każdym narzędziu i na tej stronie.

Poniższa tabela jest reprezentatywna, nie wyczerpująca (katalog wciąż rośnie). Pokazuje po jednym przykładzie każdego rodzaju ścieżki:

Przykładowe narzędzieGdzie odbywa się praca
Circle Crop (tylko przeglądarka)100% w Twojej przeglądarce, Canvas API. Bez przesyłania, działa offline.
Podgląd kompresji (tylko przeglądarka)100% w Twojej przeglądarce, canvas.toBlob. Bez przesyłania. Suwak pozostaje natychmiastowy.
Pobranie kompresji (dotyka serwera)Jeden obieg do naszej usługi pod api.araluma.com (sharp plus libvips na VPS w Niemczech), z zapasem w przeglądarce.
Usuwanie tła (dotyka serwera)Jeden obieg do Cloudflare Worker uruchamiającego BiRefNet na brzegowych GPU, z zapasem w WebAssembly w Twojej przeglądarce.

Narzędzia do przycinania, zmiany rozmiaru, PDF i konwersji formatów (poza ścieżką wyjścia AVIF) znajdują się po stronie tylko przeglądarki. Pobranie kompresji, usuwanie tła, powiększanie z pomocą SI i konwersje z wyjściem AVIF znajdują się po stronie dotykającej serwera, każde z lokalnym zapasem.

Możesz sprawdzić twierdzenia o pracy tylko w przeglądarce w około 30 sekund: otwórz DevTools, przejdź do panelu Network, wyczyść dziennik, a następnie użyj dowolnego narzędzia działającego tylko w przeglądarce. Zobaczysz zero żądań wynoszących bajty Twojego obrazu poza stronę. Dla narzędzi dotykających serwera zobaczysz dokładnie jedno przesłanie na operację, do nazwanych punktów końcowych powyżej.

Dlaczego hybryda

Większość internetowych narzędzi do obrazów stoi w jednej ze skrajności: prześlij-wszystko-na-serwer (czekasz na obiegi, a operator zatrzymuje Twój plik) albo wszystko-w-przeglądarce (płacisz jakością i szybkością na etapach kodowania i SI). Żadna skrajność nie wygrywa wszędzie.

Wybraliśmy stronę klienta wszędzie tam, gdzie przeglądarki są już znakomite. Element <canvas> obsługuje przycinanie, obracanie, zmianę rozmiaru i stratne kodowanie podglądu w JPG lub WebP, a nowoczesne przeglądarki natywnie dekodują każdy powszechny format. Wybraliśmy stronę serwera tylko dla tych nielicznych kroków, w których przeglądarka wciąż mierzalnie przegrywa:

  • Kompresja, przy końcowym pobraniu. Serwerowe sharp plus libvips daje pliki o 10 do 15% mniejsze bajt w bajt niż kodery przeglądarki przy tej samej jakości wizualnej i udostępnia strojenie szybkości oraz chromy AVIF, którego przeglądarka nie daje. Suwak i podgląd wciąż działają w Twojej przeglądarce, dzięki czemu iteracja pozostaje natychmiastowa. Tylko dotknięcie “Pobierz” przechodzi przez naszą usługę.
  • Usuwanie tła SI, na ścieżce domyślnej. Model BiRefNet, który uruchamia segmentacja obrazów Cloudflare (ta sama architektura co remove.bg), potrzebuje prawdziwego GPU, by skończyć w sekundę lub dwie. Zapasowe rozwiązanie w przeglądarce (ISNet poprzez ONNX Runtime plus WebAssembly) działa, ale trwa znacznie dłużej i daje zauważalnie surowsze wycięcie na włosach, futrze i cienkich krawędziach.
  • Powiększanie z pomocą SI, na ścieżce domyślnej. Chmurowa superrozdzielczość odzyskuje detal, którego ponowne próbkowanie w przeglądarce nie potrafi, z zapasem w przeglądarce, gdy usługa jest nieosiągalna.

Koszt, który przyjmujemy za bycie po stronie serwera na tych ścieżkach, to jeden obieg na operację. Koszt, którego unikamy, pozostając po stronie klienta we wszystkim innym, to ta sama opłata na tych częściach przepływu pracy, które iterują najszybciej.

Potok, krok po kroku

1. Wybierasz plik

Poprzez wybór pliku, przeciągnięcie i upuszczenie albo wklejenie, przeglądarka przekazuje JavaScriptowi obiekt File. JavaScript czyta bajty za pomocą FileReader lub Blob.arrayBuffer(). Na żadnym etapie tutaj plik nie jest wysyłany przez sieć, niezależnie od używanego narzędzia.

2. Przeglądarka dekoduje obraz

Nowoczesne przeglądarki natywnie dekodują JPG, PNG, WebP, GIF i AVIF. Używamy createImageBitmap(), by zamienić surowe bajty w bitmapę, z którą GPU może pracować, poza głównym wątkiem. Dla HEIC w przeglądarkach, które go nie dekodują natywnie, przechodzimy do dekodera w WebAssembly działającego lokalnie w Twojej przeglądarce.

3. Narzędzie robi swoje, gdzie ścieżki się rozchodzą

  • Narzędzia tylko dla przeglądarki (przycinanie, zmiana rozmiaru, podgląd i suwak kompresji, składanie PDF i większość konwersji formatów). Działają jako pikselowe przekształcenia Canvas i ponowne kodowania canvas.toBlob wprost na Twojej maszynie. Interaktywna ramka przycięcia używa Cropper.js. Nic nie opuszcza strony.
  • Pobranie kompresji. Gdy dotykasz “Pobierz”, obraz idzie raz do api.araluma.com (usługa Fastify na VPS Hostinger w Niemczech, Node plus sharp i libvips, te same biblioteki C, których Squoosh używa na swojej ścieżce serwerowej). Zostaje ponownie zakodowany z parametrami ustawionymi przez Ciebie w podglądzie, a bajty wracają strumieniem. Usługa trzyma izolowaną względem najemców, adresowaną treścią pamięć podręczną (skrót bajtów wejściowych plus parametry), więc ponowne pobranie tego samego obrazu z tymi samymi ustawieniami odtwarza bajty z pamięci podręcznej. Ta pamięć nie jest indeksowana po Tobie, Twoim IP ani nazwie pliku. Jeśli usługa jest nieosiągalna, narzędzie wraca do bloba podglądu w przeglądarce.
  • Usuwanie tła, domyślna ścieżka chmurowa. Obraz raz przesyła się do Cloudflare Worker, zostaje umieszczony w prywatnym kubełku R2, przetworzony przez segmentację obrazów Cloudflare uruchamiającą model BiRefNet na brzegowych GPU, a wycięcie wraca strumieniem. Umieszczony obiekt zostaje usunięty w ciągu godziny przez regułę cyklu życia R2, niezależnie od wyniku. Typowe zdjęcie kończy się w sekundę lub dwie. Dzienne limity na IP i rozmiar przesyłania utrzymują bezpłatny poziom w równowadze.
  • Usuwanie tła, zapas w WebAssembly. Jeśli Worker jest nieosiągalny (Twoja sieć padła, surowa zapora go blokuje, dzienny limit jest pełny albo plik jest zbyt duży dla limitu chmury), narzędzie po cichu przełącza się na model ISNet działający lokalnie poprzez ONNX Runtime Web i WebAssembly. Pierwsze uruchomienie pobiera model i trwa dłużej, kolejne uruchomienia są szybsze. Bez przesyłania na tej ścieżce, weryfikowalne w DevTools.
  • Powiększanie z pomocą SI. Ścieżka domyślna raz wysyła obraz do chmurowej usługi superrozdzielczości i zwraca powiększony wynik strumieniem, z zapasem w przeglądarce, jeśli usługa jest nieosiągalna.

4. Pobierasz wynik

Wyjściowa bitmapa zostaje zakodowana w Blob, opakowana w adres URL obiektu i przekazana standardowemu oknu zapisu pliku Twojej przeglądarki. Plik ląduje na Twoim dysku.

Jak sprawdzić to samodzielnie

Wybierz, co wolisz:

Metoda 1. Obserwuj kartę Network

  1. Otwórz Araluma w nowej karcie i otwórz DevTools, potem panel Network.
  2. Użyj narzędzia tylko dla przeglądarki, jak Circle Crop albo suwak podglądu kompresji. Zobaczysz żądania jedynie do HTML, CSS, JS i czcionek, a do tego odpowiednie moduły WebAssembly przy pierwszym użyciu. Żadne żądanie nie wyniesie bajtów Twojego obrazu.
  3. Teraz użyj narzędzia dotykającego serwera, jak Pobranie kompresji albo Usuwanie tła. Zobaczysz dokładnie jedno POST niosące Twój obraz do nazwanego punktu końcowego oraz jedną odpowiedź wracającą z wynikiem. Najedź na dowolne żądanie, by odczytać jego rozmiar i czas.

Kolumna “Initiator” mówi, który skrypt wywołał każde żądanie, a kolumna “Type” mówi, co zostało wysłane. Nie ukrywamy żadnej z nich.

Metoda 2. Użyj narzędzi offline

  1. Wczytaj dowolną stronę narzędzia Araluma. Uruchom Usuwanie tła raz na małym obrazie, by model ISNet w przeglądarce trafił do pamięci podręcznej.
  2. Otwórz DevTools, przejdź do Network i zaznacz Offline (albo wyłącz Wi-Fi).
  3. Przeładuj stronę. Zasoby statyczne są w pamięci podręcznej, więc nadal się wczytuje.
  4. Wypróbuj narzędzia:
    • Narzędzia tylko dla przeglądarki działają dalej. Nigdy nie potrzebowały sieci.
    • Pobranie kompresji wraca do bloba podglądu w przeglądarce (nieco mniej wydajne kodowanie, ale działające).
    • Usuwanie tła wraca do modelu ISNet w WebAssembly i działa bez żadnego żądania wychodzącego.

Jeśli te narzędzia zadziałały offline (niektóre z gorszą jakością, te tylko dla przeglądarki identycznie), to z definicji żaden serwer nie zobaczył Twojego obrazu.

Co widzimy, a czego nie

Na ścieżkach tylko dla przeglądarki nie widzimy niczego o Twoim obrazie. Nie ma żądania, na które można spojrzeć, nie ma pamięci podręcznej, by go przechować, nie ma linii dziennika, by ją przeszukać.

Na ścieżkach dotykających serwera:

  • Pobranie kompresji widzi bajty obrazu przez czas kodowania (zwykle kilkaset milisekund), trzyma wpis pamięci podręcznej adresowany treścią przez jego TTL, i tyle. Pamięć podręczna nie jest indeksowana po użytkowniku, IP, nazwie pliku ani żadnym identyfikatorze, którego moglibyśmy użyć, by znaleźć “Twoje” obrazy. Nie zapisujemy treści obrazu. Usługa kodowania jest współdzielona między tymi samymi najemcami, których v1 obsługiwała przed przejściem, z CORS na najemcę, limitami częstotliwości i kanonicznymi adresami URL podpisanymi HMAC.
  • Usuwanie tła widzi obraz przez czas przesyłania do tymczasowego magazynu i wywołania segmentacji (zwykle sekunda lub dwie), po czym kopia tymczasowa zostaje usunięta przez regułę cyklu życia R2. Nigdy nie oddajemy Twoich bajtów zewnętrznemu dostawcy modelu. Model BiRefNet działa wewnątrz własnej infrastruktury Cloudflare, a nie na zewnętrznym API w stylu remove.bg, fal.ai czy Replicate.
  • Powiększanie z pomocą SI widzi obraz przez czas wywołania superrozdzielczości, zwraca wynik i nie zachowuje niczego powiązanego z Tobą.

Na każdej ścieżce nasz dostawca analityki (Cloudflare Web Analytics) zapisuje zbiorcze dane odsłon stron: URL, kraj, rodzina przeglądarki, Core Web Vitals. Bez plików cookie, bez trwałych identyfikatorów, bez niczego powiązanego z osobą.

Dla narzędzi, które pobierają moduł WebAssembly przy pierwszym użyciu (dekoder HEIC, model ISNet ONNX), nasz dostawca hostingu widzi, że ktoś pobrał moduł, tak samo jak widzi pobranie pliku CSS. Sam moduł nie niesie żadnej informacji o Twoim obrazie.

Pełny spis danych znajduje się w naszej polityce prywatności.

Stos technologiczny

Dla ciekawych:

  • Astro, generator statycznych witryn. Każda strona jest dostarczana jako czysty HTML z progresywnie ulepszanymi “wyspami” JavaScriptu tylko tam, gdzie żyją interaktywne narzędzia.
  • Czysty CSS z właściwościami niestandardowymi, bez Tailwinda, bez CSS-in-JS. Cały system projektowy to jeden plik tokens.css.
  • canvas.toBlob i <canvas>, kodowanie JPEG, PNG, WebP i AVIF dla narzędzi i podglądów po stronie przeglądarki.
  • Cropper.js, warstwa interakcji z prostokątem przycięcia.
  • ONNX Runtime Web, który uruchamia zapasowy ISNet w WebAssembly dla Usuwania tła.
  • Cloudflare hostuje statyczną kompilację i serwuje ją z brzegu sieci oraz uruchamia Workers, R2 i potok segmentacji obrazów (BiRefNet) za domyślną ścieżką Usuwania tła.
  • Fastify z sharp i libvips na Node, usługa pobrania kompresji pod api.araluma.com, na VPS Hostinger w Niemczech.
  • Cloudflare Web Analytics, zbiorcze, pozbawione plików cookie liczenie odsłon stron.

Wsparcie przeglądarek

Każde narzędzie działa w bieżącej i poprzedniej wersji Chrome, Firefoksa, Safari i Edge, na komputerze i na telefonie. Witryna stosuje progresywne ulepszanie: gdzie przeglądarka wspiera nowsze API (na przykład showSaveFilePicker lub OffscreenCanvas), używamy go, a gdzie nie wspiera, wracamy do starszego odpowiednika. Nie ma żadnej ściany “Twoja przeglądarka nie jest wspierana”.

Jedyne twarde wymagania to JavaScript (dla dowolnego narzędzia) i połączenie sieciowe (tylko przy korzystaniu ze ścieżki dotykającej serwera, narzędzia tylko dla przeglądarki działają w pełni offline po pierwszym wczytaniu strony).

Pytania

Coś, czego nie omówiliśmy? Napisz na support@araluma.com. Pytania techniczne mile widziane.