摳圖的場(chǎng)景大家應(yīng)該很熟悉了，使用大模型來?yè)笀D也屬于很常見的功能了，但是在操作一些相對(duì)隱私的圖片總會(huì)有一點(diǎn)點(diǎn)擔(dān)心。那么在自己的電腦上跑一個(gè)大模型？ 電腦的性能夠嗆！ 難道就沒有什么離線的大模型可以用嘛？

相信很多小伙伴都聽過Transformers.js，一個(gè)JavaScript庫(kù)，它允許開發(fā)者在瀏覽器或Node.js環(huán)境中使用Hugging Face的預(yù)訓(xùn)練機(jī)器學(xué)習(xí)模型，無需服務(wù)器支持

最近花了一點(diǎn)時(shí)間（主要是借助豆包）來寫了一個(gè)網(wǎng)頁(yè)，支持在瀏覽器本地直接跑RMBG V1.4模型，實(shí)現(xiàn)離線的智能摳圖功能。 下來看看整體的表現(xiàn)情況

支持本地上傳圖片、粘貼上傳圖片、拖拽上傳圖片三種方式；首次訪問網(wǎng)頁(yè)時(shí)，會(huì)自動(dòng)下載大模型(約40M)，下載成功之后會(huì)在提示區(qū)域顯示“模型已加載完成”，之后所有的操作將基于用戶的瀏覽器進(jìn)行操作，無后端交互，隱私無憂

實(shí)際體驗(yàn)

有興趣的小伙伴可以實(shí)際體驗(yàn)，訪問地址：https://ai.hhui.top/app/rmBg.html

它的核心玩法很簡(jiǎn)單粗暴：

1.打開網(wǎng)頁(yè)。2.選擇本地圖片（或拖拽或粘貼一個(gè)圖片）。3.點(diǎn)擊開始處理圖片4.幾秒后（看圖片大小和機(jī)器性能），摳好的圖直接顯示/下載。

這體驗(yàn)就絲滑了：

?速度起飛：?省了上傳下載的大頭時(shí)間，處理速度就看用戶本機(jī)CPU/GPU了。?隱私拉滿：?用戶數(shù)據(jù)本地處理，安全感爆棚，合規(guī)風(fēng)險(xiǎn)驟降。?零成本調(diào)用：?對(duì)開發(fā)者/服務(wù)提供方來說，沒有圖片傳輸?shù)膸挸杀荆瑳]有按次調(diào)用的API費(fèi)用，服務(wù)器壓力？不存在的！?開箱即用：?用戶不用裝軟件，不用注冊(cè)，打開就用，用完就走。

關(guān)鍵技術(shù)說明

怎么做到的？關(guān)鍵點(diǎn)在這兒（技術(shù)老鐵們看過來）：

1.模型本地化：?這個(gè)網(wǎng)頁(yè)背后，在首次加載時(shí)（或按需），把訓(xùn)練好的摳圖模型（onnx）直接下載到了用戶的瀏覽器緩存里。模型大小約40M，百兆網(wǎng)速的小伙伴也就是幾秒的加載時(shí)間。2.瀏覽器內(nèi)推理引擎：?依靠的是強(qiáng)大的?transformers.js?。它們提供了在瀏覽器JavaScript環(huán)境中直接加載和運(yùn)行AI模型的能力。

對(duì)咱們開發(fā)者有啥啟發(fā)？

1.邊緣計(jì)算的魅力：?這就是“邊緣計(jì)算”在Web端的生動(dòng)體現(xiàn)??！把計(jì)算負(fù)載從中心服務(wù)器下放到終端設(shè)備（瀏覽器），解決延遲、隱私、成本問題。想想看，除了摳圖，像簡(jiǎn)單的圖像分類、風(fēng)格遷移、文本摘要、甚至輕量級(jí)的語音識(shí)別，是不是都有可能搬到瀏覽器里？2.Web ML 生態(tài)成熟：?transformers.js、ONNX Runtime Web、TensorFlow.js 這些工具鏈越來越成熟，讓在Web端部署和運(yùn)行（尤其是優(yōu)化后的）模型不再是天方夜譚。前端工程師的武器庫(kù)又豐富了！3.用戶體驗(yàn)新思路：?對(duì)于需要處理用戶本地?cái)?shù)據(jù)的應(yīng)用（圖片、文檔、音視頻片段），“本地優(yōu)先”?的處理策略能極大提升用戶體驗(yàn)和信任度。這個(gè)摳圖工具就是個(gè)很好的樣板。4.模型優(yōu)化是王道：?瀏覽器環(huán)境資源有限（內(nèi)存、算力），模型必須輕量化、高效化。這倒逼我們?cè)谀Ｐ驮O(shè)計(jì)、剪枝、量化、格式轉(zhuǎn)換上做更多優(yōu)化工作。

值得一試嗎？

當(dāng)然！無論你是：

?好奇寶寶：?想看看瀏覽器里跑模型到底啥感覺？?前端攻城獅：?想探索Web ML的可能性邊界？?后端/全棧：?在琢磨如何降低服務(wù)端負(fù)載、優(yōu)化成本結(jié)構(gòu)？?產(chǎn)品經(jīng)理：?在尋找提升用戶體驗(yàn)、增強(qiáng)隱私賣點(diǎn)的方案？

這個(gè)網(wǎng)頁(yè)都值得你點(diǎn)開玩一玩：https://ai.hhui.top/app/rmBg.html

實(shí)際體驗(yàn)感受：

?首次加載可能需要下載模型（40MB級(jí)別），有點(diǎn)耐心。?摳圖速度取決于你電腦性能，實(shí)測(cè)普通照片幾秒到十幾秒搞定，效果在瀏覽器里跑成這樣相當(dāng)不錯(cuò)了（當(dāng)然不能和頂級(jí)桌面軟件比）。?最大的爽點(diǎn)：圖片真的沒上傳！打開瀏覽器開發(fā)者工具 - 網(wǎng)絡(luò)（Network）標(biāo)簽頁(yè)，你會(huì)看到除了加載網(wǎng)頁(yè)本身和模型文件，處理過程中沒有任何圖片上傳的請(qǐng)求！?這感覺，踏實(shí)。

最后叨叨：

這個(gè)網(wǎng)頁(yè)雖然是個(gè)工具，但它展示的思路非常有價(jià)值。隨著Web ML技術(shù)的進(jìn)步和終端設(shè)備算力的提升，把更多AI能力“沉”到瀏覽器端，會(huì)是優(yōu)化用戶體驗(yàn)、降低成本、保護(hù)隱私的一個(gè)重要方向。對(duì)于隱私優(yōu)先的小伙伴，不妨收藏一波

鏈接再放一次，動(dòng)手試試吧：?https://ai.hhui.top/app/rmBg.html

[超站]友情鏈接：

四季很好，只要有你，文娛排行榜：https://www.yaopaiming.com/
關(guān)注數(shù)據(jù)與安全，洞悉企業(yè)級(jí)服務(wù)市場(chǎng)：https://www.ijiandao.com/