Araluma hoạt động như thế nào

Câu trả lời ngắn gọn

Araluma sử dụng kiến trúc lai: hầu hết các công cụ chạy hoàn toàn trong trình duyệt của bạn mà không tải lên gì, và một số ít định tuyến một yêu cầu mạng duy nhất qua hạ tầng riêng của chúng tôi khi trình duyệt không thể sánh được về chất lượng, luôn kèm theo một phương án dự phòng phía máy khách vô hình. Chúng tôi cho bạn biết bạn đang ở đường nào, trong mỗi công cụ và trên trang này.

Bảng dưới đây mang tính đại diện, không liệt kê đầy đủ (danh mục vẫn đang lớn lên). Nó nêu một ví dụ cho mỗi loại đường dẫn:

Công cụ ví dụ	Nơi công việc diễn ra
Circle Crop (chỉ trình duyệt)	100% trong trình duyệt của bạn, Canvas API. Không tải lên, hoạt động ngoại tuyến.
Compress xem trước (chỉ trình duyệt)	100% trong trình duyệt của bạn, canvas.toBlob. Không tải lên. Thanh trượt luôn tức thì.
Compress tải xuống (chạm máy chủ)	Một lượt khứ hồi đến dịch vụ của chúng tôi tại api.araluma.com (sharp cùng libvips trên một VPS ở Đức), với một phương án dự phòng trình duyệt.
Remove Background (chạm máy chủ)	Một lượt khứ hồi đến một Cloudflare Worker chạy BiRefNet trên GPU edge, với một phương án dự phòng WebAssembly trong trình duyệt của bạn.

Các công cụ cắt ảnh, đổi kích thước, PDF và chuyển đổi định dạng (ngoại trừ đường xuất ra AVIF) nằm ở phía chỉ trình duyệt. Tải nén, xóa nền, phóng to bằng AI, và các chuyển đổi xuất ra AVIF nằm ở phía chạm máy chủ, mỗi cái với một phương án dự phòng cục bộ.

Bạn có thể xác minh các tuyên bố chỉ-trình-duyệt trong khoảng 30 giây: mở DevTools, vào bảng Network, xóa nhật ký, rồi dùng bất kỳ công cụ chỉ-trình-duyệt nào. Bạn sẽ thấy không có yêu cầu nào mang byte ảnh của bạn rời khỏi trang. Với các công cụ chạm máy chủ, bạn sẽ thấy đúng một lần tải lên mỗi thao tác, đến các endpoint được nêu tên ở trên.

Tại sao kiến trúc lai

Hầu hết các công cụ ảnh trực tuyến nằm ở một thái cực: tải-mọi-thứ-lên-máy-chủ (bạn chờ các lượt khứ hồi và người vận hành giữ tệp của bạn), hoặc tất-cả-trong-trình-duyệt (bạn trả giá bằng chất lượng và tốc độ ở các bước mã hóa và AI). Không thái cực nào thắng ở mọi nơi.

Chúng tôi chọn phía máy khách ở những chỗ trình duyệt vốn đã xuất sắc. Phần tử <canvas> xử lý cắt, xoay, đổi kích thước, và mã hóa xem trước có mất mát ở JPG hoặc WebP, và các trình duyệt hiện đại giải mã tự nhiên mọi định dạng phổ biến. Chúng tôi chọn phía máy chủ chỉ cho vài bước mà trình duyệt vẫn thua kém đo lường được:

• Nén, ở lần tải xuống cuối cùng. sharp cùng libvips phía máy chủ tạo ra tệp nhỏ hơn 10 đến 15% byte-for-byte so với bộ mã hóa trình duyệt ở cùng chất lượng hiển thị, đồng thời mở ra việc tinh chỉnh tốc độ và chroma AVIF mà trình duyệt không cung cấp. Thanh trượt và xem trước vẫn chạy trong trình duyệt của bạn để việc lặp lại vẫn tức thì. Chỉ thao tác chạm “Tải xuống” mới đi qua dịch vụ của chúng tôi.
• Xóa nền bằng AI, ở đường mặc định. Mô hình BiRefNet mà phân đoạn ảnh của Cloudflare chạy (cùng kiến trúc với remove.bg) cần một GPU thật để hoàn thành trong một hai giây. Phương án dự phòng trong trình duyệt (ISNet qua ONNX Runtime cùng WebAssembly) hoạt động được, nhưng mất lâu hơn nhiều và cho ra kết quả cắt xén thô hơn rõ rệt ở tóc, lông và các cạnh mảnh.
• Phóng to bằng AI, ở đường mặc định. Siêu phân giải trên đám mây khôi phục chi tiết mà việc lấy mẫu lại phía trình duyệt không thể, với một phương án dự phòng trình duyệt khi dịch vụ không thể truy cập.

Cái giá chúng tôi chấp nhận khi đứng ở phía máy chủ trên các đường đó là một lượt khứ hồi mỗi thao tác. Cái giá chúng tôi tránh được bằng cách giữ phía máy khách ở mọi nơi khác chính là khoản phí ấy trên những phần của quy trình lặp lại nhanh nhất.

Quy trình xử lý, từng bước

1. Bạn chọn một tệp

Qua bộ chọn tệp, kéo và thả, hoặc dán, trình duyệt trao cho JavaScript một đối tượng File. JavaScript đọc các byte bằng FileReader hoặc Blob.arrayBuffer(). Tại không thời điểm nào trong bước này tệp được gửi qua mạng, bất kể bạn đang dùng công cụ nào.

2. Trình duyệt giải mã ảnh

Các trình duyệt hiện đại giải mã tự nhiên JPG, PNG, WebP, GIF và AVIF. Chúng tôi dùng createImageBitmap() để biến các byte thô thành một bitmap mà GPU có thể xử lý, bên ngoài luồng chính. Với HEIC trên các trình duyệt không giải mã nó tự nhiên, chúng tôi quay về một bộ giải mã WebAssembly chạy cục bộ trong trình duyệt của bạn.

3. Công cụ làm việc của nó, đây là nơi các đường phân nhánh

• Các công cụ chỉ trình duyệt (cắt ảnh, đổi kích thước, xem trước và thanh trượt nén, ghép PDF, và hầu hết chuyển đổi định dạng). Chúng chạy dưới dạng các biến đổi pixel Canvas và mã hóa lại canvas.toBlob ngay trên máy của bạn. Khung cắt tương tác dùng Cropper.js. Không gì rời khỏi trang.
• Tải nén. Khi bạn chạm “Tải xuống”, ảnh đi một lần đến api.araluma.com (một dịch vụ Fastify trên một VPS Hostinger ở Đức, Node cùng sharp và libvips, các thư viện C giống như Squoosh dùng trên đường máy chủ của nó). Nó được mã hóa lại với các tham số bạn đặt trong xem trước, và các byte được truyền trực tuyến về. Dịch vụ giữ một bộ nhớ đệm cô lập theo tenant, đánh địa chỉ theo nội dung (một hash của byte đầu vào cùng tham số) nên tải lại cùng ảnh với cùng cài đặt sẽ phát lại các byte đã lưu. Bộ đệm đó không được lập chỉ mục theo bạn, IP của bạn, hay tên tệp. Nếu dịch vụ không thể truy cập, công cụ quay về blob xem trước trong trình duyệt.
• Xóa nền, đường đám mây mặc định. Ảnh tải lên một lần đến một Cloudflare Worker, được dàn dựng trong một bucket R2 riêng tư, xử lý bởi phân đoạn ảnh của Cloudflare chạy mô hình BiRefNet trên GPU edge, và phần cắt được truyền trực tuyến về. Đối tượng đã dàn dựng bị xóa trong vòng một giờ bởi một quy tắc vòng đời R2, bất kể kết quả. Một bức ảnh điển hình hoàn thành trong một hai giây. Giới hạn theo IP mỗi ngày và giới hạn kích thước tải lên giữ cho bậc miễn phí bền vững.
• Xóa nền, dự phòng WebAssembly. Nếu Worker không thể truy cập (mạng của bạn rớt, một tường lửa nghiêm ngặt chặn nó, hạn ngạch hằng ngày đã đầy, hoặc tệp quá lớn so với giới hạn đám mây), công cụ lặng lẽ chuyển sang mô hình ISNet chạy cục bộ qua ONNX Runtime Web và WebAssembly. Lần chạy đầu tải mô hình về và mất lâu hơn, các lần sau nhanh hơn. Không tải lên trên đường này, có thể xác minh trong DevTools.
• Phóng to bằng AI. Đường mặc định gửi ảnh một lần đến một dịch vụ siêu phân giải trên đám mây và truyền trực tuyến kết quả phóng lớn về, với một phương án dự phòng phía trình duyệt nếu dịch vụ không thể truy cập.

4. Bạn tải xuống kết quả

Bitmap đầu ra được mã hóa thành một Blob, gói trong một object URL, và trao cho hộp thoại lưu tệp tiêu chuẩn của trình duyệt. Tệp xuất hiện trên đĩa của bạn.

Cách tự xác minh

Chọn cách nào bạn thích:

Phương pháp 1. Theo dõi tab Network

1. Mở Araluma trong một tab mới và mở DevTools, rồi bảng Network.
2. Dùng một công cụ chỉ trình duyệt như Circle Crop hoặc thanh trượt xem trước Compress. Bạn sẽ thấy các yêu cầu cho HTML, CSS, JS và phông chữ thôi, cùng các module WebAssembly liên quan ở lần dùng đầu. Không yêu cầu nào mang byte ảnh của bạn.
3. Bây giờ dùng một công cụ chạm máy chủ như Compress tải xuống hoặc Remove Background. Bạn sẽ thấy đúng một POST mang ảnh của bạn đến endpoint được nêu tên, và một phản hồi trả về với kết quả. Di chuột vào bất kỳ yêu cầu nào để đọc kích thước và thời gian của nó.

Cột “Initiator” cho bạn biết script nào kích hoạt mỗi yêu cầu, và cột “Type” cho bạn biết những gì đã được gửi. Chúng tôi không giấu cái nào.

Phương pháp 2. Dùng công cụ ngoại tuyến

1. Tải bất kỳ trang công cụ Araluma nào. Chạy Remove Background một lần trên một ảnh nhỏ để mô hình ISNet trong trình duyệt được lưu đệm.
2. Mở DevTools, vào Network, và tích Offline (hoặc tắt Wi-Fi).
3. Tải lại trang. Các tài sản tĩnh đã được lưu đệm, nên nó vẫn tải.
4. Thử các công cụ:
   • Các công cụ chỉ trình duyệt vẫn hoạt động. Chúng chưa bao giờ cần mạng.
   • Compress tải xuống quay về blob xem trước trong trình duyệt (một bản mã hóa kém hiệu quả hơn một chút, nhưng vẫn dùng được).
   • Remove Background quay về mô hình ISNet WebAssembly và hoạt động không cần bất kỳ yêu cầu ra ngoài nào.

Nếu các công cụ đó hoạt động ngoại tuyến (một số giảm cấp, các công cụ chỉ trình duyệt y hệt), thì theo định nghĩa không máy chủ nào nhìn thấy ảnh của bạn.

Những gì chúng tôi thấy, và những gì chúng tôi không thấy

Trên các đường chỉ trình duyệt, chúng tôi không thấy gì về ảnh của bạn. Không có yêu cầu nào để xem, không có bộ đệm nào để lưu nó, không có dòng nhật ký nào để grep.

Trên các đường chạm máy chủ:

• Compress tải xuống thấy các byte ảnh trong suốt thời gian mã hóa (thường vài trăm mili giây), giữ một mục bộ đệm đánh địa chỉ theo nội dung trong TTL của nó, và chỉ vậy thôi. Bộ đệm không được lập chỉ mục theo người dùng, IP, tên tệp, hay bất kỳ định danh nào chúng tôi có thể dùng để tìm ảnh “của bạn”. Chúng tôi không ghi nội dung ảnh. Dịch vụ mã hóa được dùng chung giữa các tenant giống như v1 phục vụ trước khi chuyển đổi, với CORS, giới hạn tốc độ và URL canonical ký HMAC theo từng tenant.
• Remove Background thấy ảnh trong suốt thời gian tải lên dàn dựng và lệnh gọi phân đoạn (thường một hai giây), sau đó bản sao đã dàn dựng bị xóa bởi quy tắc vòng đời R2. Chúng tôi không bao giờ trao byte của bạn cho một nhà cung cấp mô hình bên thứ ba. Mô hình BiRefNet chạy bên trong hạ tầng riêng của Cloudflare, không phải trên một API kiểu remove.bg, fal.ai hay Replicate bên ngoài.
• Phóng to bằng AI thấy ảnh trong suốt thời gian lệnh gọi siêu phân giải, trả về kết quả, và không giữ lại gì gắn với bạn.

Trên mọi đường, nhà cung cấp phân tích của chúng tôi (Cloudflare Web Analytics) ghi lại dữ liệu lượt xem trang tổng hợp: URL, quốc gia, họ trình duyệt, Core Web Vitals. Không cookie, không định danh liên tục, không gì gắn với một con người.

Với các công cụ tải về một module WebAssembly ở lần dùng đầu (bộ giải mã HEIC, mô hình ONNX ISNet), nhà cung cấp lưu trữ của chúng tôi thấy rằng ai đó đã lấy module ấy, y như cách nó thấy một tệp CSS được lấy về. Bản thân module không mang thông tin nào về ảnh của bạn.

Bản kê dữ liệu đầy đủ nằm trong chính sách quyền riêng tư của chúng tôi.

Ngăn xếp công nghệ

Dành cho người tò mò:

• Astro, bộ tạo trang web tĩnh. Mỗi trang được gửi dưới dạng HTML thuần với các “island” JavaScript cải tiến dần chỉ ở nơi có công cụ tương tác.
• CSS thuần với thuộc tính tùy chỉnh, không Tailwind, không CSS-in-JS. Toàn bộ hệ thống thiết kế là một tệp tokens.css.
• canvas.toBlob và <canvas>, phần mã hóa JPEG, PNG, WebP và AVIF cho các công cụ và bản xem trước phía trình duyệt.
• Cropper.js, lớp tương tác khung cắt.
• ONNX Runtime Web, chạy phương án dự phòng ISNet WebAssembly cho Remove Background.
• Cloudflare lưu trữ bản dựng tĩnh và phục vụ từ edge, đồng thời chạy Workers, R2 và quy trình phân đoạn ảnh (BiRefNet) phía sau đường Remove Background mặc định.
• Fastify cùng sharp và libvips trên Node, dịch vụ tải nén tại api.araluma.com, trên một VPS Hostinger ở Đức.
• Cloudflare Web Analytics, đếm lượt xem trang tổng hợp, không cookie.

Hỗ trợ trình duyệt

Mọi công cụ hoạt động trên phiên bản hiện tại và trước đó của Chrome, Firefox, Safari và Edge, máy tính để bàn và di động. Trang web dùng cải tiến dần: ở chỗ trình duyệt hỗ trợ một API mới hơn (ví dụ showSaveFilePicker hoặc OffscreenCanvas), chúng tôi dùng nó, và ở chỗ không, chúng tôi quay về tương đương cũ hơn. Không có bức tường “trình duyệt của bạn không được hỗ trợ”.

Yêu cầu cứng duy nhất là JavaScript (cho mọi công cụ) và một kết nối mạng (chỉ khi dùng một đường chạm máy chủ, các công cụ chỉ trình duyệt chạy hoàn toàn ngoại tuyến sau lần tải trang đầu tiên).

Câu hỏi

Có điều gì chúng tôi chưa đề cập? Gửi email cho chúng tôi tại support@araluma.com. Câu hỏi kỹ thuật được chào đón.