Gradio 是一個經(jīng)常用于創(chuàng)建交互式機器學習應用的 Python 庫。在以前按照傳統(tǒng)方法，如果想對外分享 Gradio 應用，就需要依賴服務器設備和相關資源，而這對于自己部署的開發(fā)人員來說并不友好。

歡迎 Gradio-lite (?@gradio/lite?): 一個通過 Pyodide 在瀏覽器中直接運行 Gradio 的庫。在本文中，我們會詳細介紹?@gradio/lite?是什么，然后瀏覽示例代碼，并與您討論使用 Gradio-lite 運行 Gradio 應用所帶來的優(yōu)勢。

@gradio/lite?是什么?

@gradio/lite?是一個 JavaScript 庫，可以使開發(fā)人員直接在 Web 瀏覽器中運行 Gradio 應用，它通過 Pyodide 來實現(xiàn)這一能力。Pyodide 是可以將 Python 代碼在瀏覽器環(huán)境中解釋執(zhí)行的 WebAssembly 專用 Python 運行時。有了?@gradio/lite?，你可以?使用常規(guī)的 Python 代碼編寫 Gradio 應用?，它將不再需要服務端基礎設施，可以?順暢地在瀏覽器中運行?。

開始使用

讓我們用?@gradio/lite?來構建一個 "Hello World" Gradio 應用。

1. 導入 JS 和 CSS

首先如果沒有現(xiàn)成的 HTML 文件，需要創(chuàng)建一個新的。添加以下代碼導入與?@gradio/lite?包對應的 JavaScript 和 CSS:

通常來說你應該使用最新版本的?@gradio/lite?，可以前往 查看可用版本信息。

2. 創(chuàng)建<gradio-lite>?標簽

在你的 HTML 頁面的?body?中某處 (你希望 Gradio 應用渲染顯示的地方)，創(chuàng)建開閉配對的?<gradio-lite>?標簽。

注意: 你可以將?theme?屬性添加到?<gradio-lite>?標簽中，從而強制使用深色或淺色主題 (默認情況下它遵循系統(tǒng)主題)。例如:

3. 在標簽內編寫 Gradio 應用

現(xiàn)在就可以像平常一樣用 Python 編寫 Gradio 應用了！但是一定要注意，由于這是 Python 所以空格和縮進很重要。

基本的流程就是這樣！現(xiàn)在你應該能夠在瀏覽器中打開 HTML 頁面，并看到剛才編寫的 Gradio 應用了！只不過由于 Pyodide 需要花一些時間在瀏覽器中安裝，初始加載 Gradio 應用可能需要一段時間。

調試提示: 所有錯誤 (包括 Python 錯誤) 都將打印到瀏覽器中的檢查器控制臺中，所以如果要查看 Gradio-lite 應用中的任何錯誤，請打開瀏覽器的檢查器工具 (inspector)。

更多例子: 添加額外的文件和依賴

如果想要創(chuàng)建一個跨多個文件或具有自定義 Python 依賴的 Gradio 應用怎么辦？通過?@gradio/lite?也可以實現(xiàn)!

多個文件

在?@gradio/lite?應用中添加多個文件非常簡單: 使用?<gradio-file>?標簽。你可以創(chuàng)建任意多個?<gradio-file>?標簽，但每個標簽都需要一個?name?屬性，Gradio 應用的入口點應添加?entrypoint?屬性。

下面是一個例子:

額外的依賴項

如果 Gradio 應用有其他依賴項，通常可以 使用 micropip 在瀏覽器中安裝它們。我們創(chuàng)建了一層封裝使得這個過程更加便捷了: 你只需用與?requirements.txt?相同的語法列出依賴信息，并用?<gradio-requirements>?標簽包圍它們即可。

在這里我們安裝?transformers_js_py?來嘗試直接在瀏覽器中運行文本分類模型！

試一試: 你可以在 這個 Hugging Face Static Space 中看到上述示例，它允許你免費托管靜態(tài) (無服務器) Web 應用。訪問此頁面，即使離線你也能運行機器學習模型!

使用?@gradio/lite?的優(yōu)勢

1. 無服務器部署

@gradio/lite?的主要優(yōu)勢在于它消除了對服務器基礎設施的需求。這簡化了 Gradio 應用的部署，減少了與服務器相關的成本，并且讓分享 Gradio 應用變得更加容易。

2. 低延遲

通過在瀏覽器中運行，@gradio/lite?能夠為用戶帶來低延遲的交互體驗。因為數(shù)據(jù)無需與服務器往復傳輸，這帶來了更快的響應和更流暢的用戶體驗。

3. 隱私和安全性

由于所有處理均在用戶的瀏覽器內進行，所以?@gradio/lite?增強了隱私和安全性，用戶數(shù)據(jù)保留在其個人設備上，讓大家處理數(shù)據(jù)更加放心~

限制

• 目前, 使用?@gradio/lite?的最大缺點在于 Gradio 應用通常需要更長時間 (通常是 5-15 秒) 在瀏覽器中初始化。這是因為瀏覽器需要先加載 Pyodide 運行時，隨后才能渲染 Python 代碼。

• 并非所有 Python 包都受 Pyodide 支持。雖然?gradio?和許多其他流行包 (包括?numpy?、?scikit-learn?和?transformers-js?) 都可以在 Pyodide 中安裝，但如果你的應用有許多依賴項，那么最好檢查一下它們是否包含在 Pyodide 中，或者 通過?micropip?安裝。

心動不如行動！

要想立刻嘗試?@gradio/lite?，您可以復制并粘貼此代碼到本地的?index.html?文件中，然后使用瀏覽器打開它:

我們還在 Gradio 網(wǎng)站上創(chuàng)建了一個 playground，你可以在那里交互式編輯代碼然后即時看到結果！

Playground 地址:
https://www.gradio.app/playground

英文原文:?https://hf.co/blog/gradio-lite

原文作者: Abubakar Abid, Yuichiro Tachibana, Ali Abdalla