Gradio-Lite：完全在瀏覽器中執行的無伺服器 Gradio
Gradio 是一個用於建立互動式機器學習應用的流行 Python 庫。傳統上，Gradio 應用依賴於伺服器端基礎設施來執行，這對於需要託管其應用的開發者來說可能是一個障礙。
現在有了 Gradio-lite（@gradio/lite）：一個利用 Pyodide 將 Gradio 直接帶到您的瀏覽器的庫。在這篇部落格文章中，我們將探討 @gradio/lite 是什麼，回顧示例程式碼，並討論它在執行 Gradio 應用方面提供的優勢。
什麼是 @gradio/lite？
@gradio/lite 是一個 JavaScript 庫，它使您能夠直接在 Web 瀏覽器中執行 Gradio 應用程式。它透過使用 Pyodide（一個用於 WebAssembly 的 Python 執行時）來實現這一點，Pyodide 允許 Python 程式碼在瀏覽器環境中執行。藉助 @gradio/lite，您可以為 Gradio 應用程式編寫常規 Python 程式碼，並且它們將在瀏覽器中無縫執行，無需伺服器端基礎設施。
開始使用
讓我們用 @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 頁面的主體中（您希望 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>
注意：您可以向 <gradio-lite> 標籤新增 theme 屬性，以強制主題為深色或淺色（預設情況下，它會遵循系統主題）。例如：
<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 應用已渲染！請注意，Gradio 應用首次載入可能需要一些時間（通常為 5-15 秒），因為 Pyodide 可能需要一些時間才能在瀏覽器中安裝。
除錯注意事項：要檢視 Gradio-lite 應用程式中的任何錯誤，請在您的 Web 瀏覽器中開啟檢查器。所有錯誤（包括 Python 錯誤）都將列印在那裡。
更多示例：新增額外檔案和要求
如果您想建立一個跨多個檔案或具有自定義 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 靜態空間中看到此示例正在執行，該空間允許您免費託管靜態（無伺服器）Web 應用程式。訪問該頁面，您將能夠執行機器學習模型而無需網際網路訪問！
使用 @gradio/lite 的優點
1. 無伺服器部署
@gradio/lite 的主要優勢在於它消除了對伺服器基礎設施的需求。這簡化了部署，降低了與伺服器相關的成本，並使與他人共享 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 網站上建立了一個遊樂場，讓您可以互動式地編輯程式碼並立即檢視結果！
