小狐狸事務所: Python 學習筆記 : 簡單好用的 Web app 套件 gradio (五)

2024年12月12日星期四

Python 學習筆記 : 簡單好用的 Web app 套件 gradio (五)

通過前四篇的測試我們已基本上掌握了 Gradio 的用法, 本篇要應用 Gradio 作為使用者介面來串接 OpenAI API, 模仿類似 ChatGPT 的聊天功能.

本系列之前的文章參考 :

# Python 學習筆記 : 簡單好用的 Web app 套件 gradio (一)

# Python 學習筆記 : 簡單好用的 Web app 套件 gradio (二)

# Python 學習筆記 : 簡單好用的 Web app 套件 gradio (三)

# Python 學習筆記 : 簡單好用的 Web app 套件 gradio (四)

八. 用 Gradio 串接語言模型 API :

使用 OpenAI API 需先註冊帳號並取得 API 金鑰, 做法參考 :

# OpenAI API 學習筆記 : 使用 openai 套件串接 GPT 語言模型 (一)

# OpenAI API 學習筆記 : 使用 openai 套件串接 GPT 語言模型 (二)

注意, OpenAI 已不再贈送 5 美元給初次的 API 註冊者, API key 在帳號註冊完成後即可取得, 但必須付費儲值 (Pay As You Go) 至少 5 美元後才能使用 API key 與 GPT 模型互動.

1. 在本機執行 OpenAI API 聊天機器人程式 :

簡易的無記憶性聊天機器人程式碼如下 :

import gradio as gr

from openai import OpenAI

def ask_gpt(api_key, prompt):

client=OpenAI(api_key=api_key)

chat_completion=client.chat.completions.create(

messages=[{'role': 'user', 'content': prompt}],

model='gpt-3.5-turbo'

)

return chat_completion.choices[0].message.content

api_key=gr.Textbox(label='輸入 OpenAI 金鑰', type='password')

prompt=gr.Textbox(label='您的詢問: ')

reply=gr.Textbox(label='OpenAI 回答: ')

iface=gr.Interface(

fn=ask_gpt,

inputs=[api_key, prompt],

outputs=reply,

title='OpenAI API 聊天機器人',

flagging_mode='never',

)

iface.launch()

此例有兩個 Textbox 輸入元件與一個 Textbox 輸出元件 : api_key 是一個指定 type='password' 的密碼文字欄位 Textbox 元件, 用來輸入自己的 OpenAI API key; 而 prompt 則是用來輸入提示詞的 Textbox 元件; reply 則是用來輸出 OpenAI API 的回應結果. 在本機的執行結果如下 :

2. 在 Hugging Face Spaces 佈署 OpenAI API 聊天機器人程式 :

由於執行上面的 App 程式碼需要安裝 openai 套件才能呼叫 OpenAI API, 但 Gradio Playground 上並沒有預載 openai 套件, 所以此 App 無法在 Gradio Playground 上測試, 當然也就無法一鍵佈署至 Hugging Face Spaces 空間, 須手動在 Hugging Face Spaces 上自行佈署 App 與安裝所需套件. 網址如下 :

# https://huggingface.co/spaces

首先需為 App 建立一個執行空間, 按右上角的 "Create new space" 鈕新增 Space :

輸入 Space name (網址的一部份, 不要有空格) 與 Short description (簡短的 App 描述), 勾選一種授權方式 (隨意),

點選 SDK (Gradio) 後按最底下的 "Create Space" 鈕即可 :

Space 建立完成頁面如下, 有附上 Gradio 應用程式 app.py 的範例與上傳程式檔案的 Git 指令 :

可以按右上角的 File 按鈕進入檔案管理頁面線上編輯 app.py, 如果沒有顯示 File 則要按右上角的三個點點小按鈕展開選單 :

在檔案管理頁面按 "+Add file" 鈕選擇 "Create a new file" 新增程式檔案 app.py :

在開啟的程式編輯器中, 上方輸入框固定要填入 app.py, 底下則貼入上面的程式碼 :

然後按最底下的 "Commit new file to main" 鈕存檔 :

存檔後若要繼續修改按 Edit 鈕, 刪除按 Delete 鈕 :

但在佈署之前還需要新增一個 requirement.txt 檔列出需安裝之套件 openai, 按 App 專案目錄超連結回到檔案列表, 按 "+ Add file" 新增 requirement.txt, 內容輸入 :

openai>=1.14.0

表示要安裝 v1.14.0 版以上的 openai 套件 :

同樣按最底下的 "Commit new file to main" 鈕存檔後按上方自己的帳號回 App 列表 :

這時可看到此 App 左上角顯示 "Building", 直接按此 App 執行佈署 :

佈署完成就會出現 App 網頁了 :

與上面在本機執行的頁面是一樣的. 此 Web App 網址如下 :

# https://huggingface.co/spaces/tony1966/gradio_openai_api_1

3. 在 Hugging Face Spaces 佈署 Gemini API 聊天機器人程式 :

在上面的測試中使用了一個 type='password' 的 Textbox 來儲存 OpenAPI 金鑰, 其實 Hugging Face Spaces 有提供 Secrets 資料表來儲存 API key 或 token 之類的隱密資訊 (每個 App 用到的 Secrets 是各自獨立不相關的), 以下將以串接 Google Gemini API 為例說明做法, 關於 Gemini 參考 :

# 申請 Google Gemini API Key

# Google Gemini API 文字聊天測試 (一)

首先先在本機測試 Gemini 聊天機器人, 程式碼如下 :

# gradio_gemini_api_1.py

import gradio as gr

import google.generativeai as genai

import os, time

from dotenv import load_dotenv

def ask_gemini(model_sel, prompt):

start_time=time.time()

model=genai.GenerativeModel(model_sel)

safety_settings={

'HATE': 'BLOCK_NONE',

'HARASSMENT': 'BLOCK_NONE',

'SEXUAL' : 'BLOCK_NONE',

'DANGEROUS' : 'BLOCK_NONE'

}

reply=model.generate_content(prompt, safety_settings=safety_settings)

elapsed_time=time.time()-start_time

return f'{reply.text}\n模型: {model_sel}\n耗時: {elapsed_time:.2f} 秒'

load_dotenv()

api_key=os.environ.get('GEMINI_API_KEY')

genai.configure(api_key=api_key)

model_sel=gr.Radio(label='選擇模型',

choices=['gemini-1.5-flash', 'gemini-1.5-pro'],

value='gemini-1.5-flash')

prompt=gr.Textbox(label='您的詢問: ')

reply=gr.Textbox(label='Gemini 的回答: ')

iface=gr.Interface(

fn=ask_gemini,

inputs=[model_sel, prompt],

outputs=reply,

title='Gemini API 聊天機器人',

flagging_mode='never',

)

iface.launch()

此例有兩個輸入元件 (用來選擇模型的 Radio 元件與輸入提示詞的 Textbox 元件) 與一個用來輸出 Gemini 回應的 Textbot 元件. 我已經將 Gemini API key 存放在目前工作目錄下的 .env 隱藏檔的 GEMINI_API_KEY 變數裡, 然後利用 dotenv 模組的 loadenv() 函式載入此隱藏檔, 再利用 os 模組的 os.environ.get() 函式取得 API key. 執行結果如下 :