在瀏覽器裡去掉照片背景:模型是什麼、顯示卡為什麼要緊、哪些照片它做不好

一個 44 MB 的神經網路在你自己的機器上把主體摳出來。筆記本顯示卡上不到一秒,CPU 上 15–25 秒。ISNet 是什麼、為什麼不用上傳,以及它會做錯的那幾類照片。

一句話

去背以前意味著把照片傳到一臺有顯示卡的伺服器上。現在不必了。一個小到可以一次性下載(44 MB)的分割模型可以在瀏覽器裡跑:機器支援 WebGPU 時,一張照片遠不到一秒;不支援時,同一個模型在 CPU 上跑 15–25 秒。兩種情況下照片都不離開裝置。這個模型對背景分明的人物、商品、動物效果好,對髮絲疊在髮絲上、玻璃,以及任何連攝影師都看不清邊緣的東西效果差。

模型是什麼

工具用的是 ISNet,來自論文 Highly Accurate Dichotomous Image Segmentation(Qin 等,ECCV 2022)。“Dichotomous”(二分)的意思是任務是二元的:每個畫素,是前景還是不是。ISNet 在 DIS5K 資料集上訓練——五千張高解析度圖片,配有極其精細的畫素級蒙版,物件是腳踏車、椅子、樹這類東西,選它們正因為細枝細杈會打敗早先的模型。對 1024 × 1024 的輸入,它輸出一張 1024 × 1024 的機率圖;工具對這張圖取閾值、羽化邊緣,作為 PNG 的 alpha 通道。

權重以 Apache-2.0 釋出。本站自己託管,切成三段以便斷點續傳,第一次用過之後快取在瀏覽器裡:第二張照片不再下載任何東西。

“在瀏覽器裡”為什麼現在做得到

兩樣東西得先存在。ONNX Runtime Web 在 JavaScript 裡執行訓練好的模型,算術運算要麼由 WebAssembly 在 CPU 上做,要麼——從 2023 年起——由 WebGPU 做,那是把顯示卡開放給通用計算的瀏覽器 API。一次分割前向傳播是幾千億次乘加,顯示卡就是為這個造的,單個 CPU 執行緒不是。

本站工具自己的數字,同樣是 1024 畫素輸入:

路徑 在哪跑 每張耗時
WebGPU Chrome / Edge 113+、Safari 26+,帶任何現代顯示卡的筆記本或桌上型電腦 不到 1 秒
WebAssembly 任何瀏覽器,單執行緒 15–25 秒

WebAssembly 路徑是故意單執行緒的。多執行緒 WASM 要求頁面處於跨源隔離狀態,那個響應頭會擋掉所有第三方指令碼——包括養活這個站的廣告程式碼。單執行緒慢,但頁面得以免費;活兒被挪進 Web Worker,所以它在磨的時候介面不卡。

記憶體是另一個約束:執行時加模型加中間啟用值需要大約 200 MB 空閒記憶體。4 GB 記憶體的手機在 CPU 路徑上撐得住;一些更老的手機根本分配不出這塊緩衝區,工具會直接說明,而不是讓分頁崩掉。

它做不好的,實話實說

  • 髮絲對著相近的背景。 深色頭髮對深色牆、金髮對米色窗簾。模型看不到邊緣,因為畫素里根本沒有邊緣。蒙版要麼吃掉頭髮,要麼留一圈牆。
  • 透明和反光的東西。 玻璃、水、主體前面的酒杯。分割是二元的;玻璃既不是前景也不是背景,結果是一條硬邊穿過它。
  • 運動模糊。 模糊的邊緣沒有唯一正確的分界線。
  • 多個主體。 模型保留它認為是“主體”的一切;兩個人通常都留,一個人和一條大狗可能只留一個。
  • 很小的主體。 輸入長邊 1024 px;一張遠景裡 60 px 高的人,變成蒙版裡的幾十個畫素,出來是一團。

乾淨的商品圖、素牆前的人像、地板上的寵物、紙上的 logo,它很可靠——訓練集裡裝滿的就是這些。

拿到結果之後

輸出是帶真實透明通道的 PNG。這是放進幻燈片、商品頁或另一張照片的正確格式,也是發郵件的錯誤格式——1200 萬畫素的 PNG 去背有 20–30 MB。目的地要小檔案又不需要透明,就轉成白底 JPEG;需要透明又要更小,帶 alpha 的 WebP 是 PNG 的三分之一。壓縮兩種都能處理。

本文用到的工具