計(jì)算機(jī)視覺(jué)和圖像處理的算法具有直觀的實(shí)用性。作為算法研發(fā)人員，將自己的算法部署到網(wǎng)頁(yè)端的UI接口供大家使用是一件很妙的事。但這個(gè)簡(jiǎn)單的愿望涉及到前后端知識(shí)而且需要購(gòu)買(mǎi)域名，技術(shù)復(fù)雜且不免費(fèi)。這里我將介紹一種簡(jiǎn)單且免費(fèi)的方案供大家參考。
??樣例項(xiàng)目：可交互的上色Demo

Part 1: 界面設(shè)計(jì)庫(kù)Gradio

Gradio是MIT的開(kāi)源項(xiàng)目，使用時(shí)可理解為一個(gè)Python包，它的安裝命令：pip install gradio。使用Gradio，通過(guò)少量的幾行Python代碼就能自動(dòng)化生成交互式web頁(yè)面，并支持多種輸入輸出格式，圖像加載/顯示框、文本框、各類(lèi)按鈕等常見(jiàn)控件。同時(shí)，還支持生成能外部網(wǎng)絡(luò)訪(fǎng)問(wèn)的鏈接，能夠迅速讓非技術(shù)人員體驗(yàn)?zāi)愕乃惴ā?/p>

1. 小試牛刀: 彩圖灰度化算法

import gradio as gr
import cv2

def to_black(image):
    output = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
    return output

interface = gr.Interface(fn=to_black, inputs="image", outputs="image")
interface.launch(server_name='127.0.0.1',server_port=7788)

運(yùn)行這個(gè)簡(jiǎn)單的代碼文件，就能實(shí)現(xiàn)一個(gè)本地靜態(tài)交互頁(yè)面。在瀏覽器輸入http://127.0.0.1:7788/就能看到如下的頁(yè)面：

2. 高階用法

設(shè)計(jì)符合自己要求的界面需要了解各種控件的用法，建議參考Gradio官方文檔。相比高度封裝的Interface類(lèi)，Blocks類(lèi)更基礎(chǔ)一些，提供了更大的設(shè)計(jì)靈活性。Blocks類(lèi)具有多個(gè)數(shù)據(jù)流和樣式，可以控制組件在頁(yè)面上出現(xiàn)的位置，處理復(fù)雜的數(shù)據(jù)流，以及根據(jù)用戶(hù)交互更新組件的屬性或者組件可見(jiàn)性。

這里提供一個(gè)已成功部署的樣例項(xiàng)目：可交互的上色Demo，請(qǐng)參考其UI構(gòu)建文件app.py。

Part 2：在線(xiàn)托管平臺(tái)HuggingFace

在本地測(cè)試完成后，接下來(lái)就是考慮如何將程序發(fā)布到在線(xiàn)平臺(tái)的問(wèn)題了。HuggingFace提供了一個(gè)項(xiàng)目托管平臺(tái)，而且能免費(fèi)提供如Google Colab的在線(xiàn)計(jì)算資源。在使用以下服務(wù)前，請(qǐng)先注冊(cè)賬號(hào)（官網(wǎng)界面右上角"Sign Up"）。

1. 在線(xiàn)計(jì)算空間:Space

在HuggingFace官網(wǎng)登錄賬號(hào)后，切換到Spaces創(chuàng)建一個(gè)新的空間。記得選中"Gradio"和"Public"，以生成一個(gè)可公開(kāi)使用的Gradio在線(xiàn)應(yīng)用。每個(gè)項(xiàng)目空間免費(fèi)配備8個(gè)CPU核和16GB 運(yùn)行內(nèi)存，而GPU資源需要單獨(dú)付費(fèi)。更多關(guān)于Spaces的介紹請(qǐng)參考官方文檔。
創(chuàng)建完Space之后，我們需要把本地項(xiàng)目文件（UI構(gòu)建文件必須得命名成app.py且位于根目錄）上傳到該空間。具體方法與Github項(xiàng)目的上傳和版本維護(hù)方式完全一樣。

• 克隆space項(xiàng)目到本地：git clone https://huggingface.co/spaces/your_account/proj_name/tree/main
• 將本地已跑通的項(xiàng)目文件復(fù)制到剛才克隆的space項(xiàng)目文件夾。
• 新建描述運(yùn)行環(huán)境依賴(lài)的文件：requirements.txt指定Python依賴(lài)的包；packages.txt指定特殊的系統(tǒng)依賴(lài)配置。詳情參考。
• 將此更新同步到遠(yuǎn)程倉(cāng)庫(kù)：

  git add -A .
  git commit -m "add project files"
  git push
  

完成以上步驟后（等待1~2分鐘系統(tǒng)刷新），進(jìn)入Space項(xiàng)目的App選項(xiàng)卡即可查看部署到web端的應(yīng)用。

2. 模型托管倉(cāng)庫(kù):Models

如果我們運(yùn)行的程序是AI模型，那么一般需要提供一個(gè)訓(xùn)練好的checkpoint（一般上百兆）供在線(xiàn)加載。這時(shí)，我們可以在HuggingFace的Models頁(yè)面創(chuàng)建一個(gè)與Space項(xiàng)目同名的模型倉(cāng)庫(kù)，用于存儲(chǔ)需要的checkpoint等文件。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-416692.html

• 上傳文件：通過(guò)上文提到的git方式，或者直接點(diǎn)擊已創(chuàng)建的模型頁(yè)面的Add file。
• 獲取文件路徑：例如上傳到模型倉(cāng)庫(kù)的文件路徑是：https://huggingface.co/menghanxia/disco/tree/main/model.pth.tar，其對(duì)應(yīng)的下載路徑則需要將tree修改為resolve，即https://huggingface.co/menghanxia/disco/resolve/main/disco-beta.pth.tar
• 在Space項(xiàng)目的app.py文件中調(diào)用文件下載命令：

  os.system("wget https://huggingface.co/menghanxia/disco/resolve/main/disco-beta.pth.rar")
  

?參考資料

1. Gradio文檔：https://www.gradio.app/docs/
2. Spaces文檔：https://huggingface.co/docs/hub/spaces、
3. CSDN博文：https://blog.csdn.net/SoulmateY/article/details/117327898

到了這里，關(guān)于輕松部署算法到網(wǎng)頁(yè)端應(yīng)用：Gradio+HuggingFace的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！