$ pip install gradio ipykernel

基本概念和術語

$ ipython kernel install --user --name=gradio_tutorial
$ jupyter lab  # Start the lab

：

import gradio as gr
print(gr.__version__)
4.37.1

def greet(name):
   return f"Hello, {name}!"
demo = gr.Interface(
   fn=greet,
   inputs=['text'],
   outputs="text",
)
demo.launch()

接口

組件
1. ：輸入和輸出元素，例如文本框，圖像和音頻。到目前為止，有30多個內置組件。 >函數
：python函數從輸入組件處理信息，並返回結果以輸出組件顯示。 >
2. 啟動：啟動您的Gradio應用的方法。
>
3. 上面的，我們創(chuàng)建了一個迎接文本輸入並返回文本輸入的問候功能。因此，輸入和輸出組件在接口類中指定為文本。 最後，我們調用啟動本地服務器的啟動方法。為了使任何人使用UI，您可以將共享參數設置為true。這將啟動SSH隧道並將Gradio應用程序部署到可公開共享的網頁：>
gradio組件
4. >您將花費大部分時間在不同的組件上修補不同的組件，以及如何在構建Gradio應用程序時將它們放在頁面上。因此，讓我們仔細看看您可以使用的東西。 >

   >輸入和輸出組件

   Gradio提供了各種各樣的組件，用於構建交互式接口。這些組件通常分為兩類：輸入和輸出。 >>

   >輸入組件允許用戶向基礎處理器提供數據（這可以是任何Python函數）。一些常見的輸入是：

   textbox
   • 圖像
   • 音頻
   • 滑塊
   • >下拉
   這是一個虛擬界面，使用上述某些組件：>
   在此示例中，process_inputs函數需要五個參數。因此，我們需要創(chuàng)建五個輸入組件並將其傳遞給輸入。雖然輸入組件的數量應匹配所需功能參數的數量，但這不是嚴格的規(guī)則。為避免錯誤和警告，請為不需要UI輸入的參數設置默認值。

   $ conda create -n gradio_tutorial python=3.9 -y
   $ conda activate gradio_tutorial

   >注意我們如何使用文本框類來指定輸入組件，而不是像第一個示例那樣的普通字符串文本。始終建議使用專用類指定輸入和輸出組件以使其可自定義。例如，所有組件類都有一個有用的標籤屬性，而滑塊和下拉列表都有指定範圍和可用選項的參數。

   > >許多輸入組件也可用於顯示輸出。以下是一些常見的情況：

   標籤：用於顯示文本或分類結果
   圖像：用於顯示已處理或生成的圖像
   • >音頻：用於播放處理或生成的音頻
   • 繪圖：用於顯示圖形或圖表
   >
   喜歡輸入，輸出組件的數量必須匹配從處理函數中返回值的數量。
   >自定義組件外觀

   Gradio允許您自定義組件的外觀以適應您的需求。這是一個使用自定義文本框的示例：

   >

   $ pip install gradio ipykernel

   在此示例中，我們通過指定行數，添加佔位符和信息文本，並包括輸出的副本按鈕來自定義文本框組件。 >

   >實驗不同的組件及其屬性，以創(chuàng)建最適合您AI應用程序要求的接口。要了解可以更改組件的哪種屬性，您可以訪問其文檔，或者更好的是使用？ jupyter實驗室的班級名稱之後：

   > llms

   的構建界面

   >讓我們通過創(chuàng)建由LLMS供電的兩個現實世界文本和基於圖像的界面來將所有學到的一切放在一起。 。

   首先，我們將構建從英語到土耳其語，西班牙語或中文的語言翻譯：

   $ conda create -n gradio_tutorial python=3.9 -y
   $ conda activate gradio_tutorial

   最初，我們定義一個translate_text函數。在其體內，我們設置了OpenAI API鍵並創(chuàng)建語言圖。然後，我們構建了翻譯的提示。然後，在一個try-except塊中，我們使用系統(tǒng)提示符將請求發(fā)送到聊天的端點。最後，我們返回首選。
   現在，我們可以構建接口：>
   代碼很簡單，就像早期接口的代碼一樣，但是我們介紹了幾個新屬性：

   $ pip install gradio ipykernel

   >文本框的類型參數將普通文本輸入字段更改為密碼輸入，隱藏文本。
   • >標題和描述界麵類的參數在頁面的頂部中心添加了H1標題和字幕。
   這是結果：

   >您可能想知道為什麼我們要詢問用戶的API密鑰作為應用程序的一部分，而不是自己提供。原因與Gradio如何部署UI有關。

   如果我們提供了自己的API密鑰作為環(huán)境變量（這是標準實踐），則公開共享的應用程序版本將無法使用，因為它無法訪問我們的環(huán)境變量。在部署部分中，我們將通過將應用程序部署到擁抱面空間來查看如何解決此問題。
   >讓我們構建另一個用戶界面以生成圖像：

   我們創(chuàng)建一個名為generate_surrealist_art的函數，該函數將請求發(fā)送到dall-e-3，並使用超現實主義提示返回生成的圖像URL。然後，我們將再次將此函數饋送到接口類中：

   >

   $ ipython kernel install --user --name=gradio_tutorial
   $ jupyter lab  # Start the lab

   >我們?yōu)锳PI密鑰指定了兩個輸入，以及要在超現實主義圖像中捕獲的概念。然後，我們使用圖像類創(chuàng)建一個生成圖像的輸出組件。如果將其值參數設置為str，則組件可以從URL下載和顯示圖像，這正是我們需要的。

   import gradio as gr
   print(gr.__version__)
   4.37.1

   ，這是結果：

   >構建經典ML模型的界面 現在，讓我們?yōu)榻浀浔砀窕貧w模型構建一個接口。我們將使用鑽石數據集，該數據集可在Seaborn中使用。

   首先創(chuàng)建一個新的工作目錄和一個名為app.py的新腳本。然後，將加載數據加載的GitHub Gist的代碼粘貼，使用Scikit-Learn管道處理並訓練RandomForestRegress模型。
   下一步是創(chuàng)建一個處理功能，該功能接受與鑽石數據集中有功能相同數量的輸入：

   $ conda create -n gradio_tutorial python=3.9 -y
   $ conda activate gradio_tutorial

   >該函數將這些輸入轉換為數據框，並將其傳遞到訓練有素的模型管道的.predict（）方法。最後，它返回一個帶有預測價格的字符串。

   現在，接口類必須匹配此函數的簽名：用於處理功能的九個輸入組件和一個用於顯示預測價格的輸出：

   $ pip install gradio ipykernel

   在班級內，我們?yōu)榉诸惞δ軇?chuàng)建了三個下拉列表。每個功能中的唯一類別都填充了這些選項。我們還創(chuàng)建了六個滑塊組件以接受數字功能?；瑝K的範圍取決於每個特徵的最小值和最大值。

   >我們現在要做的就是執(zhí)行腳本以運行和部署應用程序：>
   這是結果：

   $ ipython kernel install --user --name=gradio_tutorial
   $ jupyter lab  # Start the lab

   >有關最佳實踐和優(yōu)化提示，請?zhí)料旅娴淖罴褜嵺`部分。

   >部署Gradio應用
   >我們已經看到通過啟用一個參數來部署Gradio應用程序的容易。當然，這種方法的缺點是演示可以在72小時內到期。因此，推薦的部署Gradio的方法是通過擁抱面空間。 Huggingface於2021年獲得了Gradio，使兩個平臺之間的集成無縫。 因此，對於本教程或您使用Gradio創(chuàng)建的任何未來應用程序，請在huggingface.co上註冊一個免費帳戶，然後導航到設置＆gt;代幣生成訪問令牌：

   >

   令牌僅顯示一次，因此請確保將其存儲在安全的地方。

   >使用此令牌，您可以在空間上永久託管時盡可能多地部署想要的級別應用程序。例如，我們將從上一節(jié)中部署鑽石價格預測模型，您會發(fā)現它非常容易。

   > 您所要做的就是使用UI腳本導航到目錄，並在終端上調用Gradio部署：>

   >終端使您通過將腳本轉換為功能正常的擁抱面空間。它要求諸如：

   之類的詳細信息
   您生成的訪問令牌

   >空間標題：這將是部署後空間URL的一部分

   包含gradio ui代碼（app.py默認值）的腳本的名稱

   >
   >空間的硬件；空白以使用CPU（免費）
   任何腳本使用的任何環(huán)境變量（這是您安全存儲API密鑰和用戶秘密的位置）
   • >
   依賴項 - 通過按Enter 一個一個一個接一個地輸入
   >終端為您提供了部署的空間鏈接。這是它的外觀：
   關於這種部署方法的另一個好處是，Gradio會自動將演示轉換為工作的REST API。訪問和查詢的說明始終位於底部：

   >

   

   因此，一口氣，您既有用於非技術用戶申請的永久UI託管，又有為同事和開發(fā)人員朋友的REST API。

   >有關更多部署和共享選項，例如將演示嵌入網頁中，將Google Authentication添加到應用程序等，請訪問Gradio文檔的“共享您的應用程序”部分。

   gradio最佳實踐和技巧

   >

   在使用Gradio開髮用戶界面時，遵循最佳實踐可以顯著提高應用程序的用戶體驗和可維護性。以下是一些關鍵建議：
   1。將腳本用於組織和可維護性

   >

   >在Python腳本中組織Gradio應用程序，以進行更好的版本控制，協(xié)作和部署。

   >

   2。優(yōu)化組件的空間分配
   >使用適當的尺寸和佈局工具（例如，gr.column（），gr.row（））來確保平衡，響應式接口。

   3。提供全面的信息

   >利用“信息”和“標籤”屬性為每個組件提供清晰的說明和上下文。

   4。有效地處理大型功能集

   對於具有多個功能的模型，請使用文件輸入（CSV，JSON）啟用批處理預測並簡化接口。

   5。正確管理環(huán)境變量

   >使用python-dotenv進行本地開發(fā)，並將變量設置在擁抱面部空間以進行部署。

   6。實施錯誤處理和驗證
   >驗證輸入，提供明確的錯誤消息，並使用Try-Except塊進行正式錯誤處理。
   7。優(yōu)化性能
   >實現緩存，大型型號的懶惰加載，並使用Gr.LoadingStatus（）進行長期運行的任務。
   8?？稍L問性的設計

   確保高對比度，為圖像提供ALT文本，並為所有交互式元素啟用鍵盤導航。

   9。實施漸進披露

   >使用手風琴或選項卡來組織複雜的接口，根據需要揭示高級選項。 >

   10。定期更新並維護
   >保持依賴關係更新，監(jiān)視錯誤並根據用戶反饋不斷改進。
   11。利用擁抱面資源
   >利用擁抱面工具和資源與Gradio無縫集成，包括模型存儲庫和數據集。
   12。在擁抱面樞紐

   上託管大型型號

   >對於大型表格模型，上傳到擁抱面式集線器並直接在Gradio腳本中加載，以提高性能並減少本地存儲要求。

   13。利用擁抱面數據集

   對於大型數據集，上傳到HuggingFace Hub，然後直接在您的Gradio應用程序中訪問它們以簡化數據管理並改善加載時間。

   結論和進一步的資源

   在本文中，我們了解了使用Gradio為AI應用程序構建用戶界面的基礎知識。我們剛剛在表面下方傾斜，因為Gradio為構建複雜界面提供了更多功能。例如，接口狀態(tài)允許您的應用程序記住從一個函數調用到另一個函數的輸出。用戶輸入更改後，反應性接口會動態(tài)更改UI。使用塊，您可以構建具有自定義佈局和設計的應用程序。

   同樣，請查看這些相關資源以獲取更多內容：

   10個python軟件包添加到您的數據科學堆棧
   • 7個基本的生成AI工具，用於構建出色的AI應用程序
   5個項目，您可以使用Gen AI模型
   • 構建
   CI/CD用於機器學習課程