Araluma 如何運作

每項工具運行何處、工作原理,以及你如何自行驗證。

簡短說明

Araluma 採用混合式架構:多數工具完全在你的瀏覽器內執行、零上傳, 少數工具則在瀏覽器無法比擬其品質時,把單一網路請求送往我們自己的 基礎設施,並且總是搭配一個隱形的用戶端退回方案。我們會在每個工具 以及本頁告訴你目前走的是哪條路徑。

下方表格是代表性的,並非詳盡列舉(這套工具持續成長)。 它各列出一種路徑類型的範例:

範例工具工作發生的位置
Circle Crop(瀏覽器專屬)100% 在你的瀏覽器內,使用 Canvas API。無需上傳,可離線運作。
Compress 預覽(瀏覽器專屬)100% 在你的瀏覽器內,使用 canvas.toBlob。無需上傳。滑桿保持即時。
Compress 下載(接觸伺服器)與我們位於 api.araluma.com 的服務(架設於德國 VPS 的 sharplibvips)進行一次往返,並有瀏覽器退回方案。
Remove Background(接觸伺服器)與一個在邊緣 GPU 上執行 BiRefNet 的 Cloudflare Worker 進行一次往返,並在你的瀏覽器內有 WebAssembly 退回方案。

裁切、縮放、PDF 以及格式轉換工具(AVIF 輸出路徑除外)都位於瀏覽器 專屬的這一側。壓縮下載、移除背景、AI 放大,以及 AVIF 輸出的轉換則 位於接觸伺服器的這一側,每一個都搭配一個本機退回方案。

你可以在大約 30 秒內驗證瀏覽器專屬的說明:開啟 DevTools,前往 Network 面板,清除記錄,然後使用任一個瀏覽器專屬的工具。你會看到 沒有任何帶有你圖片位元組的請求離開頁面。至於接觸伺服器的工具, 你每次操作會看到恰好一筆上傳,目的地即上述具名端點。

為什麼選擇混合式

大多數線上圖片工具落在某個極端:把所有東西上傳到伺服器(你得等待 往返,而業者保留你的檔案),或是全程在瀏覽器內(你在編碼與 AI 步驟 上付出品質與速度的代價)。沒有一個極端能在所有地方都勝出。

我們在瀏覽器已經出色的地方選擇用戶端。<canvas> 元素能處理裁切、 旋轉、縮放,以及 JPG 或 WebP 的失真預覽編碼,而現代瀏覽器原生解碼 每一種常見格式。我們只在瀏覽器仍可量測地落後的少數步驟選擇伺服器端:

  • 壓縮,在最終下載時。伺服器端的 sharplibvips 在相同視覺品質下逐位元組產生比瀏覽器編碼器小 10 到 15% 的檔案,並開放瀏覽器未提供的 AVIF 速度與色度調校。滑桿與預覽仍在你的瀏覽器內執行,讓每次調整保持即時。只有「下載」這一下才會經過我們的服務。
  • AI 移除背景,在預設路徑上。Cloudflare 圖片分割所執行的 BiRefNet 模型(與 remove.bg 相同的架構)需要一個真實的 GPU 才能在一兩秒內完成。瀏覽器內的退回方案(透過 ONNX Runtime 加 WebAssembly 的 ISNet)可以運作,但耗時長得多,且在頭髮、毛皮與細小邊緣上產生明顯較粗糙的去背結果。
  • AI 放大,在預設路徑上。雲端超解析度能還原瀏覽器端重採樣無法還原的細節,並在服務無法連線時搭配瀏覽器退回方案。

我們為了在那些路徑上採用伺服器端所接受的代價,是每次操作一次往返。 我們在其他所有地方堅持用戶端所避免的,正是同一筆代價,發生在工作 流程中迭代最快的部分。

處理流程,逐步拆解

1. 你選擇一個檔案

透過檔案選擇器、拖放或貼上,瀏覽器把一個 File 物件交給 JavaScript。 JavaScript 使用 FileReaderBlob.arrayBuffer() 讀取位元組。 在這個步驟中,無論你使用哪個工具,檔案都不會透過網路送出。

2. 瀏覽器解碼圖片

現代瀏覽器原生解碼 JPG、PNG、WebP、GIF 與 AVIF。我們使用 createImageBitmap() 在主執行緒之外,把原始位元組轉成 GPU 能處理 的點陣圖。對於不原生解碼 HEIC 的瀏覽器,我們退回到一個在你的瀏覽器 本地執行的 WebAssembly 解碼器。

3. 工具執行其任務,路徑在此分歧

  • 瀏覽器專屬工具(裁切、縮放、壓縮預覽與滑桿、PDF 組合,以及多數格式轉換)。這些以 Canvas 像素變換與 canvas.toBlob 重新編碼的形式,就在你的機器上執行。互動式裁切框使用 Cropper.js沒有任何東西離開頁面。
  • 壓縮下載。 當你點擊「下載」時,圖片會一次送往 api.araluma.com(一個架設於德國 Hostinger VPS 的 Fastify 服務,Node 加上 sharplibvips,與 Squoosh 在其伺服器路徑上使用的相同 C 函式庫)。它依你在預覽中設定的參數重新編碼,位元組再串流回來。該服務維護一個租戶隔離、以內容定址的快取(輸入位元組加參數的雜湊),因此以相同設定重新下載同一張圖片時會回放快取的位元組。那個快取不以你、你的 IP 或檔名建立索引。若服務無法連線,工具會退回瀏覽器內的預覽 blob。
  • 移除背景,預設雲端路徑。 圖片一次上傳到一個 Cloudflare Worker,暫存於一個私有 R2 儲存桶,由 Cloudflare 圖片分割在邊緣 GPU 上執行 BiRefNet 模型處理,去背結果再串流回來。暫存的物件無論結果如何,都會在一小時內由一條 R2 生命週期規則刪除。一張一般照片會在一兩秒內完成。每日的每 IP 與上傳大小上限讓免費層維持可持續。
  • 移除背景,WebAssembly 退回方案。 若 Worker 無法連線(你的網路中斷、嚴格的防火牆擋住它、每日配額已滿,或檔案超過雲端上限),工具會悄悄切換到透過 ONNX Runtime Web 與 WebAssembly 在本地執行的 ISNet 模型。首次執行會下載模型且耗時較長,之後的執行較快。這條路徑無需上傳,可在 DevTools 中驗證。
  • AI 放大。 預設路徑把圖片一次送往一個雲端超解析度服務,並把放大後的結果串流回來,在服務無法連線時搭配一個瀏覽器端的退回方案。

4. 你下載結果

輸出的點陣圖被編碼成一個 Blob,包裝進一個 object URL,再交給你的 瀏覽器標準的檔案儲存對話框。檔案落到你的磁碟上。

如何自行驗證

任選你偏好的方法:

方法 1. 觀察 Network 分頁

  1. 在一個全新分頁中開啟 Araluma,並開啟 DevTools,然後到 Network 面板。
  2. 使用一個瀏覽器專屬工具,例如 Circle Crop 或 Compress 預覽滑桿。你只會看到 HTML、CSS、JS 與字型的請求,以及首次使用時相關的 WebAssembly 模組。不會有任何請求帶有你圖片的位元組。
  3. 現在使用一個接觸伺服器的工具,例如 Compress 下載或 Remove Background。你會看到恰好一筆 POST 把你的圖片帶往那個具名端點,以及一筆帶著結果回來的回應。把游標停在任一請求上即可看到它的大小與時間。

「Initiator」欄告訴你哪個腳本觸發了每個請求,而「Type」欄告訴你 送出了什麼。這兩者我們都不隱藏。

方法 2. 離線使用工具

  1. 載入任一個 Araluma 工具頁面。對一張小圖片執行一次 Remove Background,讓瀏覽器內的 ISNet 模型完成快取。
  2. 開啟 DevTools,前往 Network,勾選 Offline(或關閉 Wi-Fi)。
  3. 重新載入頁面。靜態資源已快取,所以它仍會載入。
  4. 試用各工具:
    • 瀏覽器專屬工具持續運作。它們從不需要網路。
    • Compress 下載退回到瀏覽器內的預覽 blob(編碼效率略低,但仍可用)。
    • Remove Background退回到 ISNet WebAssembly 模型,無需任何對外請求即可運作。

如果那些工具在離線狀態下都能運作(有些效果略降,瀏覽器專屬的則完全 相同),那麼依定義就沒有任何伺服器看過你的圖片。

我們看得到什麼,以及看不到什麼

瀏覽器專屬的路徑上,我們對你的圖片一無所悉。沒有可看的請求、 沒有可儲存它的快取、沒有可搜尋的日誌行。

接觸伺服器的路徑上:

  • Compress 下載在編碼期間(通常是數百毫秒)看到圖片位元組,在其 TTL 期間保留一筆以內容定址的快取項目,僅此而已。那個快取不以使用者、IP、檔名,或任何我們能用來找出「你的」圖片的識別符建立索引。我們不記錄圖片內容。這個編碼服務由 v1 在切換前所服務的相同租戶共享,具備各租戶各自的 CORS、速率限制,以及以 HMAC 簽署的正規 URL。
  • Remove Background在暫存上傳與分割呼叫期間(通常是一兩秒)看到圖片,之後暫存副本由 R2 生命週期規則刪除。我們絕不把你的位元組交給任何第三方模型供應商。BiRefNet 模型在 Cloudflare 自己的基礎設施內執行,而非在某個外部的 remove.bg、fal.ai 或 Replicate 式的 API 上。
  • AI 放大在超解析度呼叫期間看到圖片,回傳結果,且不保留任何與你相關的東西。

在每一條路徑上,我們的分析服務商(Cloudflare Web Analytics) 記錄彙總的頁面瀏覽資料:URL、國家、瀏覽器家族、Core Web Vitals。 沒有 cookie、沒有持久識別符,沒有任何與個人綁定的東西。

對於首次使用時會下載一個 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,為 Remove Background 執行 ISNet WebAssembly 退回方案。
  • Cloudflare 代管這個靜態建構並從邊緣提供服務,也運行支撐預設 Remove Background 路徑的 Workers、R2 與圖片分割管線(BiRefNet)。
  • Node 上的 Fastify 搭配 sharplibvips,位於 api.araluma.com 的壓縮下載服務,架設於德國的 Hostinger VPS。
  • Cloudflare Web Analytics,彙總、無 cookie 的頁面瀏覽計數。

瀏覽器支援

每個工具都能在 Chrome、Firefox、Safari 與 Edge 的當前與前一個版本上 運作,桌機與行動端皆然。本站採用漸進增強:當瀏覽器支援較新的 API (例如 showSaveFilePickerOffscreenCanvas),我們就使用它。 不支援時,我們退回到較舊的等效方案。沒有「你的瀏覽器不受支援」的牆。

唯一的硬性需求是 JavaScript(任何工具都需要)以及網路連線(只在使用 一個接觸伺服器的路徑時才需要,瀏覽器專屬的工具在首次載入頁面後可 完全離線運作)。

問題

有什麼我們沒提到的嗎?請寄信至 support@araluma.com。歡迎技術問題。