山東大學專案實訓-基於LLM的中文法律文書生成系統（八）- 前端（一） - gradio

H1S96發表於2024-05-31
前端

模型展示工具Gradio

安裝與配置

  • 環境要求：Gradio 需要Python 3.8 或更高版本的Python版本
  • 作業系統：Gradio可以在Windows、MacOS和Linux等主流作業系統上執行。
  • 安裝步驟：使用pip安裝，即開啟你的終端或命令提示符，輸入pip install gradio來安裝Gradio

1. 初識Gradio

  • Gradio簡介：Gradio是一個開源的Python庫，用於建立機器學習模型的互動式介面。它使得展示和測試模型變得簡單快捷，無需深入瞭解複雜的前端技術。
  • 使用場景：Gradio廣泛應用於資料科學、教育、研究和軟體開發領域，尤其適合於快速原型設計、模型驗證、演示和教學。

2. 核心元件

  • 介面（Interface）：Gradio的核心是Interface類，它允許使用者定義輸入和輸出型別，建立互動式的Web介面。
  • 輸入型別：Gradio支援多種輸入型別，如gr.Text用於文字輸入，gr.Image用於影像上傳，gr.Audio用於音訊輸入等。
  • 輸出型別：輸出型別與輸入型別相對應，包括gr.Text、gr.Image和gr.Audio等，用於展示模型的輸出結果。

3. 基本操作

  • 建立介面
import gradio as gr

def greet(name):
    return "Hello " + name + "!"
iface = gr.Interface(fn=greet, inputs=gr.Textbox(), outputs=gr.Textbox())
iface.launch()

建立Gradio應用：建立一個簡單的“Hello World”示例

在這個例子中，我們將建立一個簡單的Gradio應用，它接受使用者的名字作為輸入，並返回一個問候語。

  1. 設定開發環境： 首先，確保你的Python環境中已經安裝了Gradio。如果尚未安裝，可以透過以下命令安裝：
    pip install gradio
  2. 編寫Python指令碼： 開啟一個新的Python指令碼檔案，比如命名為gradio_hello_world.py。
  3. 匯入Gradio庫： 在指令碼的開始處匯入Gradio庫：
    import gradio as gr
  4. 定義處理函式： 接下來，定義一個處理使用者輸入的函式。這個函式將接收一個字串引數（使用者的名字），並返回一個問候語。
    def``greet(name): return``f"Hello {name}!"
  5. 建立Gradio介面： 使用Gradio的Interface類來建立一個互動式介面。這個介面將有一個文字輸入框和一個文字輸出框。
    iface = gr.Interface(fn=greet, inputs="text", outputs="text")
  6. 執行應用： 最後，使用launch()方法啟動你的應用。
    iface.launch()
  7. 嘗試你的應用： 執行指令碼後，你的預設Web瀏覽器會開啟一個新的頁面，顯示你的Gradio應用。在文字框中輸入你的名字，點選提交，你會看到問候語出現在下方。

介面元素介紹：詳解不同的輸入輸出元件

Gradio提供了多種輸入和輸出元件，適應不同的資料型別和展示需求。瞭解這些元件對於設計有效的Gradio介面至關重要。

輸入元件 (Inputs)

  1. Audio：允許使用者上傳音訊檔案或直接錄音。引數：source: 指定音訊來源（如麥克風）、type: 指定返回型別。 示例：gr.Audio(source="microphone", type="filepath")
  2. Checkbox：提供核取方塊，用於布林值輸入。引數：label: 顯示在核取方塊旁邊的文字標籤。 示例：gr.Checkbox(label="同意條款")
  3. CheckboxGroup：允許使用者從一組選項中選擇多個。引數：choices: 字串陣列，表示核取方塊的選項、label: 標籤文字。示例：gr.CheckboxGroup(["選項1", "選項2", "選項3"], label="選擇你的興趣")
  4. ColorPicker：用於選擇顏色，通常返回十六進位制顏色程式碼。引數：default: 預設顏色值。示例：gr.ColorPicker(default="#ff0000")
  5. Dataframe：允許使用者上傳CSV檔案或輸入DataFrame。引數：headers: 列標題陣列、row_count: 初始顯示的行數。示例：gr.Dataframe(headers=["列1", "列2"], row_count=5)
  6. Dropdown：下拉選單，使用者可以從中選擇一個選項。引數：choices: 字串陣列，表示下拉選單的選項、label: 標籤文字。示例：gr.Dropdown(["選項1", "選項2", "選項3"], label="選擇一個選項")
  7. File：用於上傳任意檔案，支援多種檔案格式。引數：file_count: 允許上傳的檔案數量，如"single"或"multiple"、type: 返回的資料型別，如"file"或"auto"。示例：gr.File(file_count="single", type="file")
  8. Image：用於上傳圖片，支援多種影像格式。引數：type影像型別，如pil。示例：gr.Image(type='pil')
  9. Number：數字輸入框，適用於整數和浮點數。引數：default: 預設數字、label: 標籤文字。示例：gr.Number(default=0, label="輸入一個數字")
  10. Radio：單選按鈕組，使用者從中選擇一個選項。引數：choices: 字串陣列，表示單選按鈕的選項、label: 標籤文字。示例：gr.Radio(["選項1", "選項2", "選項3"], label="選擇一個選項")
  11. Slider：滑動條，用於選擇一定範圍內的數值。引數：minimum: 最小值、maximum: 最大值、step: 步長、label: 標籤文字。示例：gr.Slider(minimum=0, maximum=10, step=1, label="調整數值")
  12. Textbox：單行文字輸入框，適用於簡短文字。引數：default: 預設文字、placeholder: 佔位符文字。示例：gr.Textbox(default="預設文字", placeholder="輸入文字")
  13. Textarea：多行文字輸入區域，適合較長的文字輸入。引數：lines: 顯示行數、placeholder: 佔位符文字。示例：gr.Textarea(lines=4, placeholder="輸入長文字")
  14. Time：用於輸入時間。引數：label: 標籤文字。示例：gr.Time(label="選擇時間")
  15. Video：影片上傳元件，支援多種影片格式。引數：label: 標籤文字。示例：gr.Video(label="上傳影片")
  16. Data：用於上傳二進位制資料，例如影像或音訊的原始位元組。引數：type: 資料型別，如"auto"自動推斷。示例：gr.Data(type="auto", label="上傳資料")

輸出元件 (Outputs)

  1. Audio：播放音訊檔案。引數：type 指定輸出格式。示例：gr.Audio(type="auto")
  2. Carousel：以輪播方式展示多個輸出，適用於影像集或多個資料點。引數：item_type 設定輪播專案型別。示例：gr.Carousel(item_type="image")
  3. Dataframe：展示Pandas DataFrame，適用於表格資料。引數：type 指定返回的DataFrame型別。示例：gr.Dataframe(type="pandas")
  4. Gallery：以畫廊形式展示一系列影像。
  5. HTML：展示HTML內容，適用於富文字或網頁佈局。
  6. Image：展示影像。引數：type 指定影像格式。 示例：gr.Image(type="pil")
  7. JSON：以JSON格式展示資料，便於檢視結構化資料。
  8. KeyValues：以鍵值對形式展示資料。
  9. Label：展示文字標籤，適用於簡單的文字輸出。
  10. Markdown：支援Markdown格式的文字展示。
  11. Plot：展示圖表，如matplotlib生成的圖表。
  12. Text：用於顯示文字，適合較長的輸出。
  13. Video：播放影片檔案。

官網地址：Gradio

一文搞懂模型展示工具Gradio的所有功能 - 知乎 (zhihu.com)

相關文章