Gradio-Lite: 完全在瀏覽器裡執行的無伺服器 Gradio

Gradio 是一個經常用於建立互動式機器學習應用的 Python 庫。在以前按照傳統方法，如果想對外分享 Gradio 應用，就需要依賴伺服器裝置和相關資源，而這對於自己部署的開發人員來說並不友好。

歡迎 Gradio-lite ( @gradio/lite ): 一個通過 Pyodide 在瀏覽器中直接執行 Gradio 的庫。在本文中，我們會詳細介紹 @gradio/lite 是什麼，然後瀏覽範例程式碼，並與您討論使用 Gradio-lite 執行 Gradio 應用所帶來的優勢。

`@gradio/lite` 是什麼?

@gradio/lite 是一個 JavaScript 庫，可以使開發人員直接在 Web 瀏覽器中執行 Gradio 應用，它通過 Pyodide 來實現這一能力。Pyodide 是可以將 Python 程式碼在瀏覽器環境中解釋執行的 WebAssembly 專用 Python 執行時。有了 @gradio/lite ，你可以 使用常規的 Python 程式碼編寫 Gradio 應用 ，它將不再需要伺服器端基礎設施，可以 順暢地在瀏覽器中執行 。

開始使用

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

1. 匯入 JS 和 CSS

首先如果沒有現成的 HTML 檔案，需要建立一個新的。新增以下程式碼匯入與 @gradio/lite 包對應的 JavaScript 和 CSS:

<html>
	<head>
		<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
	</head>
</html>

通常來說你應該使用最新版本的 @gradio/lite ，可以前往檢視可用版本資訊。

2. 建立`<gradio-lite>` 標籤

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

<html>
	<head>
		<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
	</head>
    
	<body>
		<gradio-lite>
		</gradio-lite>
	</body>
    
</html>

注意: 你可以將 theme 屬性新增到 <gradio-lite> 標籤中，從而強制使用深色或淺色主題 (預設情況下它遵循系統主題)。例如:

<gradio-lite theme="dark">
...
</gradio-lite>

3. 在標籤內編寫 Gradio 應用

現在就可以像平常一樣用 Python 編寫 Gradio 應用了！但是一定要注意，由於這是 Python 所以空格和縮排很重要。

<html>
	<head>
		<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
	</head>
	<body>
		<gradio-lite>
		import gradio as gr

		def greet(name):
			return "Hello, " + name + "!"
		
		gr.Interface(greet, "textbox"， "textbox").launch()
		</gradio-lite>
	</body>
</html>

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

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

更多例子: 新增額外的檔案和依賴

如果想要建立一個跨多個檔案或具有自定義 Python 依賴的 Gradio 應用怎麼辦？通過 @gradio/lite 也可以實現!

多個檔案

在 @gradio/lite 應用中新增多個檔案非常簡單: 使用 <gradio-file> 標籤。你可以建立任意多個 <gradio-file> 標籤，但每個標籤都需要一個 name 屬性，Gradio 應用的入口點應新增 entrypoint 屬性。

下面是一個例子:

<gradio-lite>

<gradio-file name="app.py" entrypoint>
import gradio as gr
from utils import add

demo = gr.Interface(fn=add, inputs=["number"， "number"]， outputs="number")

demo.launch()
</gradio-file>

<gradio-file name="utils.py" >
def add(a, b):
	return a + b
</gradio-file>

</gradio-lite>

額外的依賴項

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

在這裡我們安裝 transformers_js_py 來嘗試直接在瀏覽器中執行文字分類模型！

<gradio-lite>

<gradio-requirements>
transformers_js_py
</gradio-requirements>

<gradio-file name="app.py" entrypoint>
from transformers_js import import_transformers_js
import gradio as gr

transformers = await import_transformers_js()
pipeline = transformers.pipeline
pipe = await pipeline('sentiment-analysis')

async def classify(text):
	return await pipe(text)

demo = gr.Interface(classify, "textbox", "json")
demo.launch()
</gradio-file>

</gradio-lite>

試一試: 你可以在這個 Hugging Face Static Space 中看到上述範例，它允許你免費託管靜態 (無伺服器) Web 應用。存取此頁面，即使離線你也能執行機器學習模型!

使用 `@gradio/lite` 的優勢

1. 無伺服器部署

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

2. 低延遲

通過在瀏覽器中執行，@gradio/lite 能夠為使用者帶來低延遲的互動體驗。因為資料無需與伺服器往復傳輸，這帶來了更快的響應和更流暢的使用者體驗。

3. 隱私和安全性

由於所有處理均在使用者的瀏覽器內進行，所以 @gradio/lite 增強了隱私和安全性，使用者資料保留在其個人裝置上，讓大家處理資料更加放心~

限制

目前, 使用 @gradio/lite 的最大缺點在於 Gradio 應用通常需要更長時間 (通常是 5-15 秒) 在瀏覽器中初始化。這是因為瀏覽器需要先載入 Pyodide 執行時，隨後才能渲染 Python 程式碼。
並非所有 Python 包都受 Pyodide 支援。雖然 gradio 和許多其他流行包 (包括 numpy 、 scikit-learn 和 transformers-js ) 都可以在 Pyodide 中安裝，但如果你的應用有許多依賴項，那麼最好檢查一下它們是否包含在 Pyodide 中，或者通過 micropip 安裝。

心動不如行動！

要想立刻嘗試 @gradio/lite ，您可以複製並貼上此程式碼到原生的 index.html 檔案中，然後使用瀏覽器開啟它:

<html>
	<head>
		<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
	</head>
	<body>
		<gradio-lite>
		import gradio as gr

		def greet(name):
			return "Hello, " + name + "!"
		
		gr.Interface(greet, "textbox", "textbox").launch()
		</gradio-lite>
	</body>
</html>

我們還在 Gradio 網站上建立了一個 playground，你可以在那裡互動式編輯程式碼然後即時看到結果！

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

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

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