Πώς λειτουργεί το Araluma

Η σύντομη απάντηση

Το Araluma χρησιμοποιεί μια υβριδική αρχιτεκτονική: τα περισσότερα εργαλεία τρέχουν εξ ολοκλήρου στο πρόγραμμα περιήγησής σας με μηδενική αποστολή, και μια χούφτα δρομολογούν ένα μόνο αίτημα δικτύου μέσα από τη δική μας υποδομή όταν το πρόγραμμα περιήγησης δεν μπορεί να ισοφαρίσει την ποιότητα, πάντα με μια αόρατη εφεδρική λύση στην πλευρά του πελάτη. Σας λέμε σε ποια διαδρομή βρίσκεστε, σε κάθε εργαλείο και σε αυτή τη σελίδα.

Ο παρακάτω πίνακας είναι ενδεικτικός, όχι εξαντλητικός (ο κατάλογος συνεχίζει να μεγαλώνει). Δείχνει ένα παράδειγμα κάθε είδους διαδρομής:

Παράδειγμα εργαλείου	Πού γίνεται η εργασία
Κυκλική Περικοπή (μόνο στο πρόγραμμα περιήγησης)	100% στο πρόγραμμα περιήγησής σας, Canvas API. Καμία αποστολή, λειτουργεί εκτός σύνδεσης.
Προεπισκόπηση συμπίεσης (μόνο στο πρόγραμμα περιήγησης)	100% στο πρόγραμμα περιήγησής σας, canvas.toBlob. Καμία αποστολή. Το ρυθμιστικό παραμένει στιγμιαίο.
Λήψη συμπίεσης (αγγίζει τον διακομιστή)	Ένα ταξίδι μετ’ επιστροφής στην υπηρεσία μας στο api.araluma.com (sharp συν libvips σε ένα VPS στη Γερμανία), με εφεδρική λύση στο πρόγραμμα περιήγησης.
Αφαίρεση Φόντου (αγγίζει τον διακομιστή)	Ένα ταξίδι μετ’ επιστροφής σε έναν Cloudflare Worker που τρέχει BiRefNet σε GPU δικτύου, με εφεδρική λύση WebAssembly στο πρόγραμμα περιήγησής σας.

Τα εργαλεία περικοπής, αλλαγής μεγέθους, PDF και μετατροπής μορφής (εκτός από τη διαδρομή εξόδου AVIF) βρίσκονται στην πλευρά μόνο του προγράμματος περιήγησης. Η λήψη συμπίεσης, η αφαίρεση φόντου, η μεγέθυνση με τεχνητή νοημοσύνη και οι μετατροπές με έξοδο AVIF βρίσκονται στην πλευρά που αγγίζει τον διακομιστή, καθεμία με μια τοπική εφεδρική λύση.

Μπορείτε να επαληθεύσετε τους ισχυρισμούς μόνο για το πρόγραμμα περιήγησης σε περίπου 30 δευτερόλεπτα: ανοίξτε τα DevTools, πηγαίνετε στον πίνακα Δικτύου, καθαρίστε το αρχείο καταγραφής, έπειτα χρησιμοποιήστε οποιοδήποτε εργαλείο μόνο για το πρόγραμμα περιήγησης. Θα δείτε μηδέν αιτήματα που μεταφέρουν τα bytes της εικόνας σας να φεύγουν από τη σελίδα. Για τα εργαλεία που αγγίζουν τον διακομιστή θα δείτε ακριβώς μία αποστολή ανά λειτουργία, στα επώνυμα σημεία πρόσβασης παραπάνω.

Γιατί υβριδική

Τα περισσότερα διαδικτυακά εργαλεία εικόνας στέκονται σε ένα άκρο: ανέβασμα-των-πάντων-σε- διακομιστή (περιμένετε ταξίδια μετ’ επιστροφής και ο χειριστής κρατά το αρχείο σας) ή όλα-στο-πρόγραμμα-περιήγησης (πληρώνετε σε ποιότητα και ταχύτητα στα βήματα κωδικοποίησης και τεχνητής νοημοσύνης). Κανένα άκρο δεν κερδίζει παντού.

Επιλέξαμε την πλευρά του πελάτη όπου τα προγράμματα περιήγησης είναι ήδη εξαιρετικά. Το στοιχείο <canvas> χειρίζεται την περικοπή, την περιστροφή, την αλλαγή μεγέθους και την απωλεστική κωδικοποίηση προεπισκόπησης σε JPG ή WebP, και τα σύγχρονα προγράμματα περιήγησης αποκωδικοποιούν κάθε κοινή μορφή εγγενώς. Επιλέξαμε την πλευρά του διακομιστή μόνο για τα λίγα βήματα όπου το πρόγραμμα περιήγησης εξακολουθεί να χάνει μετρήσιμα:

• Συμπίεση, στην τελική λήψη. Το sharp συν libvips στην πλευρά του διακομιστή παράγει αρχεία 10 έως 15% μικρότερα byte προς byte από τους κωδικοποιητές του προγράμματος περιήγησης στην ίδια οπτική ποιότητα, και εκθέτει ρύθμιση ταχύτητας και χρώματος AVIF που το πρόγραμμα περιήγησης δεν προσφέρει. Το ρυθμιστικό και η προεπισκόπηση εξακολουθούν να τρέχουν στο πρόγραμμα περιήγησής σας ώστε η επανάληψη να παραμένει στιγμιαία. Μόνο το πάτημα «Λήψη» περνά από την υπηρεσία μας.
• Αφαίρεση φόντου με τεχνητή νοημοσύνη, στη διαδρομή προεπιλογής. Το μοντέλο BiRefNet που τρέχει η κατάτμηση εικόνας της Cloudflare (η ίδια αρχιτεκτονική με το remove.bg) χρειάζεται μια πραγματική GPU για να τελειώσει σε ένα ή δύο δευτερόλεπτα. Η εφεδρική λύση εντός του προγράμματος περιήγησης (ISNet μέσω ONNX Runtime συν WebAssembly) λειτουργεί, αλλά παίρνει πολύ περισσότερο και παράγει μια ορατά πιο χονδροειδή αποκοπή σε μαλλιά, γούνα και λεπτές άκρες.
• Μεγέθυνση με τεχνητή νοημοσύνη, στη διαδρομή προεπιλογής. Η υπερ-ανάλυση στο cloud ανακτά λεπτομέρεια που μια αναδειγματοληψία στην πλευρά του προγράμματος περιήγησης δεν μπορεί, με μια εφεδρική λύση στο πρόγραμμα περιήγησης όταν η υπηρεσία δεν είναι προσβάσιμη.

Το κόστος που δεχόμαστε για το ότι είμαστε στην πλευρά του διακομιστή σε αυτές τις διαδρομές είναι ένα ταξίδι μετ’ επιστροφής ανά λειτουργία. Το κόστος που αποφεύγουμε παραμένοντας στην πλευρά του πελάτη παντού αλλού είναι η ίδια αυτή χρέωση στα μέρη της ροής εργασίας που επαναλαμβάνονται πιο γρήγορα.

Η διοχέτευση, βήμα προς βήμα

1. Επιλέγετε ένα αρχείο

Μέσω του επιλογέα αρχείων, της μεταφοράς και απόθεσης ή της επικόλλησης, το πρόγραμμα περιήγησης παραδίδει στη JavaScript ένα αντικείμενο File. Η JavaScript διαβάζει τα bytes χρησιμοποιώντας FileReader ή Blob.arrayBuffer(). Σε κανένα σημείο αυτού του βήματος το αρχείο δεν αποστέλλεται μέσω του δικτύου, όποιο εργαλείο κι αν χρησιμοποιείτε.

2. Το πρόγραμμα περιήγησης αποκωδικοποιεί την εικόνα

Τα σύγχρονα προγράμματα περιήγησης αποκωδικοποιούν εγγενώς JPG, PNG, WebP, GIF και AVIF. Χρησιμοποιούμε το createImageBitmap() για να μετατρέψουμε τα ακατέργαστα bytes σε ένα bitmap με το οποίο μπορεί να δουλέψει η GPU, εκτός του κύριου νήματος. Για HEIC σε προγράμματα περιήγησης που δεν το αποκωδικοποιούν εγγενώς, καταφεύγουμε σε έναν αποκωδικοποιητή WebAssembly που τρέχει τοπικά στο πρόγραμμα περιήγησής σας.

3. Το εργαλείο κάνει τη δουλειά του, εκεί όπου οι διαδρομές αποκλίνουν

• Εργαλεία μόνο για το πρόγραμμα περιήγησης (περικοπή, αλλαγή μεγέθους, η προεπισκόπηση και το ρυθμιστικό συμπίεσης, η συναρμολόγηση PDF και οι περισσότερες μετατροπές μορφής). Αυτά τρέχουν ως μετασχηματισμοί pixel του Canvas και επανακωδικοποιήσεις canvas.toBlob ακριβώς στο μηχάνημά σας. Το διαδραστικό πλαίσιο περικοπής χρησιμοποιεί το Cropper.js. Τίποτα δεν φεύγει από τη σελίδα.
• Λήψη συμπίεσης. Όταν πατάτε «Λήψη», η εικόνα πηγαίνει μία φορά στο api.araluma.com (μια υπηρεσία Fastify σε ένα Hostinger VPS στη Γερμανία, Node συν sharp και libvips, οι ίδιες βιβλιοθήκες C που χρησιμοποιεί το Squoosh στη διαδρομή του διακομιστή του). Επανακωδικοποιείται με τις παραμέτρους που ορίσατε στην προεπισκόπηση, και τα bytes ρέουν πίσω. Η υπηρεσία διατηρεί μια απομονωμένη ανά μισθωτή, διευθυνσιοδοτημένη ανά περιεχόμενο προσωρινή μνήμη (έναν κατακερματισμό των bytes εισόδου συν τις παραμέτρους) ώστε η εκ νέου λήψη της ίδιας εικόνας με τις ίδιες ρυθμίσεις να αναπαράγει αποθηκευμένα bytes. Αυτή η προσωρινή μνήμη δεν ευρετηριάζεται με βάση εσάς, τη διεύθυνση IP σας ή το όνομα αρχείου. Αν η υπηρεσία δεν είναι προσβάσιμη, το εργαλείο καταφεύγει στο blob προεπισκόπησης εντός του προγράμματος περιήγησης.
• Αφαίρεση φόντου, διαδρομή cloud προεπιλογής. Η εικόνα ανεβαίνει μία φορά σε έναν Cloudflare Worker, σταδιοποιείται σε έναν ιδιωτικό κάδο R2, επεξεργάζεται από την κατάτμηση εικόνας της Cloudflare που τρέχει το μοντέλο BiRefNet σε GPU δικτύου, και η αποκοπή ρέει πίσω. Το σταδιοποιημένο αντικείμενο διαγράφεται εντός μίας ώρας από έναν κανόνα κύκλου ζωής R2, ανεξαρτήτως εκβάσεως. Μια τυπική φωτογραφία τελειώνει σε ένα ή δύο δευτερόλεπτα. Ημερήσια όρια ανά IP και ανά μέγεθος αποστολής κρατούν το δωρεάν επίπεδο βιώσιμο.
• Αφαίρεση φόντου, εφεδρική λύση WebAssembly. Αν ο Worker δεν είναι προσβάσιμος (πέφτει το δίκτυό σας, ένα αυστηρό τείχος προστασίας τον μπλοκάρει, η ημερήσια ποσόστωση είναι γεμάτη ή το αρχείο είναι πολύ μεγάλο για το όριο του cloud), το εργαλείο μεταβαίνει αθόρυβα στο μοντέλο ISNet που τρέχει τοπικά μέσω ONNX Runtime Web και WebAssembly. Η πρώτη εκτέλεση κατεβάζει το μοντέλο και παίρνει περισσότερο, οι μετέπειτα εκτελέσεις είναι ταχύτερες. Καμία αποστολή σε αυτή τη διαδρομή, επαληθεύσιμο στα DevTools.
• Μεγέθυνση με τεχνητή νοημοσύνη. Η διαδρομή προεπιλογής στέλνει την εικόνα μία φορά σε μια υπηρεσία υπερ-ανάλυσης στο cloud και ρέει πίσω το μεγεθυμένο αποτέλεσμα, με μια εφεδρική λύση στην πλευρά του προγράμματος περιήγησης αν η υπηρεσία δεν μπορεί να προσεγγιστεί.

4. Κατεβάζετε το αποτέλεσμα

Το bitmap εξόδου κωδικοποιείται σε ένα Blob, τυλίγεται σε ένα object URL και παραδίδεται στο τυπικό παράθυρο διαλόγου αποθήκευσης αρχείων του προγράμματος περιήγησής σας. Το αρχείο προσγειώνεται στον δίσκο σας.

Πώς να το επαληθεύσετε μόνοι σας

Διαλέξτε όποιο προτιμάτε:

Μέθοδος 1. Παρακολουθήστε την καρτέλα Δικτύου

1. Ανοίξτε το Araluma σε μια καινούργια καρτέλα και ανοίξτε τα DevTools, έπειτα τον πίνακα Δικτύου.
2. Χρησιμοποιήστε ένα εργαλείο μόνο για το πρόγραμμα περιήγησης όπως η Κυκλική Περικοπή ή το ρυθμιστικό προεπισκόπησης συμπίεσης. Θα δείτε αιτήματα μόνο για HTML, CSS, JS και γραμματοσειρές, μαζί με τις σχετικές μονάδες WebAssembly στην πρώτη χρήση. Κανένα αίτημα δεν θα μεταφέρει τα bytes της εικόνας σας.
3. Τώρα χρησιμοποιήστε ένα εργαλείο που αγγίζει τον διακομιστή όπως η Λήψη Συμπίεσης ή η Αφαίρεση Φόντου. Θα δείτε ακριβώς ένα POST που μεταφέρει την εικόνα σας στο επώνυμο σημείο πρόσβασης, και μία απόκριση να επιστρέφει με το αποτέλεσμα. Περάστε τον δείκτη πάνω από οποιοδήποτε αίτημα για να διαβάσετε το μέγεθος και τον χρόνο του.

Η στήλη «Initiator» σας λέει ποιο σενάριο πυροδότησε κάθε αίτημα, και η στήλη «Type» σας λέει τι στάλθηκε. Δεν κρύβουμε ούτε το ένα ούτε το άλλο.

Μέθοδος 2. Χρησιμοποιήστε τα εργαλεία εκτός σύνδεσης

1. Φορτώστε οποιαδήποτε σελίδα εργαλείου του Araluma. Τρέξτε την Αφαίρεση Φόντου μία φορά σε μια μικρή εικόνα ώστε να αποθηκευτεί στην προσωρινή μνήμη το μοντέλο ISNet εντός του προγράμματος περιήγησης.
2. Ανοίξτε τα DevTools, πηγαίνετε στο Δίκτυο και τσεκάρετε το Εκτός σύνδεσης (ή απενεργοποιήστε το Wi-Fi).
3. Επαναφορτώστε τη σελίδα. Τα στατικά στοιχεία είναι αποθηκευμένα, οπότε εξακολουθεί να φορτώνει.
4. Δοκιμάστε τα εργαλεία:
   • Τα εργαλεία μόνο για το πρόγραμμα περιήγησης συνεχίζουν να λειτουργούν. Ποτέ δεν χρειάστηκαν το δίκτυο.
   • Η Λήψη Συμπίεσης καταφεύγει στο blob προεπισκόπησης εντός του προγράμματος περιήγησης (μια ελαφρώς λιγότερο αποδοτική κωδικοποίηση, αλλά λειτουργική).
   • Η Αφαίρεση Φόντου καταφεύγει στο μοντέλο ISNet WebAssembly και λειτουργεί χωρίς κανένα εξερχόμενο αίτημα.

Αν αυτά τα εργαλεία λειτούργησαν εκτός σύνδεσης (κάποια υποβαθμισμένα, τα μόνο για το πρόγραμμα περιήγησης πανομοιότυπα), τότε εξ ορισμού κανένας διακομιστής δεν είδε την εικόνα σας.

Τι βλέπουμε, και τι όχι

Στις διαδρομές μόνο για το πρόγραμμα περιήγησης, δεν βλέπουμε τίποτα για την εικόνα σας. Δεν υπάρχει αίτημα να κοιτάξουμε, ούτε προσωρινή μνήμη να την αποθηκεύσει, ούτε γραμμή αρχείου καταγραφής να ψάξουμε με grep.

Στις διαδρομές που αγγίζουν τον διακομιστή:

• Η Λήψη Συμπίεσης βλέπει τα bytes της εικόνας για τη διάρκεια της κωδικοποίησης (συνήθως μερικές εκατοντάδες χιλιοστά του δευτερολέπτου), κρατά μια εγγραφή προσωρινής μνήμης διευθυνσιοδοτημένης ανά περιεχόμενο για το TTL της, και αυτό είναι όλο. Η προσωρινή μνήμη δεν ευρετηριάζεται ανά χρήστη, IP, όνομα αρχείου ή οποιοδήποτε αναγνωριστικό που θα μπορούσαμε να χρησιμοποιήσουμε για να βρούμε «τις» εικόνες σας. Δεν καταγράφουμε το περιεχόμενο της εικόνας. Η υπηρεσία κωδικοποίησης μοιράζεται μεταξύ των ίδιων μισθωτών που εξυπηρετούσε η v1 πριν από τη μετάβαση, με CORS ανά μισθωτή, όρια ρυθμού και κανονικές διευθύνσεις URL υπογεγραμμένες με HMAC.
• Η Αφαίρεση Φόντου βλέπει την εικόνα για τη διάρκεια της σταδιοποιημένης αποστολής και της κλήσης κατάτμησης (συνήθως ένα ή δύο δευτερόλεπτα), μετά την οποία το σταδιοποιημένο αντίγραφο διαγράφεται από τον κανόνα κύκλου ζωής R2. Ποτέ δεν παραδίδουμε τα bytes σας σε πάροχο μοντέλου τρίτου μέρους. Το μοντέλο BiRefNet τρέχει μέσα στην ίδια την υποδομή της Cloudflare, όχι σε ένα εξωτερικό API τύπου remove.bg, fal.ai ή Replicate.
• Η Μεγέθυνση με τεχνητή νοημοσύνη βλέπει την εικόνα για τη διάρκεια της κλήσης υπερ-ανάλυσης, επιστρέφει το αποτέλεσμα και δεν διατηρεί τίποτα συνδεδεμένο με εσάς.

Σε κάθε διαδρομή, ο πάροχος αναλυτικών μας (Cloudflare Web Analytics) καταγράφει συγκεντρωτικά δεδομένα προβολών σελίδων: URL, χώρα, οικογένεια προγράμματος περιήγησης, Core Web Vitals. Καθόλου cookies, καθόλου μόνιμα αναγνωριστικά, τίποτα συνδεδεμένο με ένα άτομο.

Για τα εργαλεία που κατεβάζουν μια μονάδα WebAssembly στην πρώτη χρήση (ο αποκωδικοποιητής HEIC, το μοντέλο ISNet ONNX), ο πάροχος φιλοξενίας μας βλέπει ότι κάποιος ανέκτησε τη μονάδα, με τον ίδιο τρόπο που βλέπει ένα αρχείο CSS να ανακτάται. Η ίδια η μονάδα δεν φέρει καμία πληροφορία για την εικόνα σας.

Η πλήρης απογραφή δεδομένων βρίσκεται στην πολιτική απορρήτου μας.

Η στοίβα τεχνολογίας

Για τους περίεργους:

• Astro, η γεννήτρια στατικών ιστοτόπων. Κάθε σελίδα αποστέλλεται ως απλό HTML με προοδευτικά εμπλουτισμένα «νησιά» JavaScript μόνο εκεί όπου ζουν τα διαδραστικά εργαλεία.
• Καθαρό CSS με προσαρμοσμένες ιδιότητες, χωρίς Tailwind, χωρίς CSS-in-JS. Όλο το σύστημα σχεδίασης είναι ένα μόνο αρχείο tokens.css.
• canvas.toBlob και <canvas>, η κωδικοποίηση JPEG, PNG, WebP και AVIF για τα εργαλεία και τις προεπισκοπήσεις στην πλευρά του προγράμματος περιήγησης.
• Cropper.js, το επίπεδο αλληλεπίδρασης του ορθογωνίου περικοπής.
• ONNX Runtime Web, που τρέχει την εφεδρική λύση ISNet WebAssembly για την Αφαίρεση Φόντου.
• Η Cloudflare φιλοξενεί τη στατική έκδοση και την εξυπηρετεί από το δίκτυο, και τρέχει τους Workers, το R2 και τη διοχέτευση κατάτμησης εικόνας (BiRefNet) πίσω από τη διαδρομή προεπιλογής της Αφαίρεσης Φόντου.
• Fastify με sharp και libvips σε Node, η υπηρεσία λήψης Συμπίεσης στο api.araluma.com, σε ένα Hostinger VPS στη Γερμανία.
• Cloudflare Web Analytics, συγκεντρωτικοί, χωρίς cookies μετρητές προβολών σελίδων.

Υποστήριξη προγραμμάτων περιήγησης

Κάθε εργαλείο λειτουργεί στην τρέχουσα και στην προηγούμενη έκδοση των Chrome, Firefox, Safari και Edge, σε υπολογιστή και κινητό. Ο ιστότοπος χρησιμοποιεί προοδευτικό εμπλουτισμό: όπου ένα πρόγραμμα περιήγησης υποστηρίζει ένα νεότερο API (για παράδειγμα showSaveFilePicker ή OffscreenCanvas), το χρησιμοποιούμε, και όπου δεν το υποστηρίζει, καταφεύγουμε στο παλαιότερο ισοδύναμο. Δεν υπάρχει τοίχος «το πρόγραμμα περιήγησής σας δεν υποστηρίζεται».

Οι μόνες αυστηρές απαιτήσεις είναι η JavaScript (για οποιοδήποτε εργαλείο) και μια σύνδεση δικτύου (μόνο όταν χρησιμοποιείτε μια διαδρομή που αγγίζει τον διακομιστή, τα εργαλεία μόνο για το πρόγραμμα περιήγησης τρέχουν πλήρως εκτός σύνδεσης μετά την πρώτη φόρτωση της σελίδας).

Ερωτήσεις

Κάτι που δεν καλύψαμε; Στείλτε email στο support@araluma.com. Οι τεχνικές ερωτήσεις είναι ευπρόσδεκτες.