實戰：30 行程式碼做一個網頁端的 AI 聊天助手

董董灿是个攻城狮發表於2024-11-20
行程網頁AI

大家好啊，我是董董燦。

今天用不到 30 行程式碼，帶你呼叫 OpenAI 的模型，同時在網頁端部署一個可以用來聊天的聊天助手。

下面是我做成之後的助手截圖：

我們話不多說，直接開始。

1、搞定 OpenAI 模型的介面呼叫

OpenAI 的模型介面的呼叫可以透過 from openai import OpenAI 這種匯入 python 庫的方式完成，但是在使用之前，你需要配置可用的 OPENAI_API_KEY。

關於如何配置 OPENAI_API_KEY，在我之前寫的這篇文章中有詳細的說明，你可以參考下。

當然，想做一個聊天助手不一定要使用 OpenAI 的模型。

你可以使用任何你熟悉的模型來完成對話功能，甚至可以使用本地下載好的模型，只要可以完成對話功能就行。

2、定義模型問答介面

本任務最重要且核心的內容，是你需要定義一個函式（介面），這個函式的作用是呼叫大模型來完成對話功能。

如下面程式碼中的第 13 行定義的 generate_response 函式，呼叫的是 OpenAI 的 gpt-4o-mini 模型。

import gradio as gr
import os
from openai import OpenAI

def check_key():
    open_api_key = os.getenv("OPENAI_API_KEY")
    if open_api_key is None:
        print("Error: Environment variable 'OPENAI_API_KEY' is not set. Exiting the program.")
        return False
    return True


def generate_response(usr_input: str):
    if check_key() == False:
        return "You should set OPENAI_API_KEY first."
    client = OpenAI()
    completion = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=[
            {"role": "system", "content": "You are a helpful assistant."},
            {"role": "user", "content": usr_input},
        ],
    )
    response = completion.choices[0].message.content
    return response

generate_response 函式的功能，便是輸入你的問題(user_input)，然後呼叫大模型完成對話，返回大模型的回答(response)。

注意，對於這個函式而言，輸入和輸出的型別都是字串型別。

很多大模型原始的輸出可能是一些自定義的類，類中包含了回答的字串，這個時候你需要將回答字串提取出來，作為 generate_response 的返回值。

比如，上面程式碼中的 24 行便是提取回答字串的邏輯。

3、將問答介面部署到網頁前端

介面部署邏輯我們採用 gradio 這個庫。

gradio 是一個非常好用的、輕量級的機器學習 App 構建庫。

關於這個庫的介紹，你可以來官網(https://www.gradio.app/)學習使用。

對於本文中的聊天助手而言，我們只需要以下幾行程式碼就可以完成，如下：

# 建立 Gradio 介面
UI = gr.Interface(
    fn=generate_response,
    inputs=gr.Textbox(lines=5, placeholder="請輸入您的問題"),
    outputs="text",
    title="聊天助手 Via OpenAI (@董董燦)",
    description="在對話方塊輸入資訊和模型進行對話",
    examples=[
        ["簡單介紹下什麼是大模型？"],
        ["法國的首都是什麼?"],
        ["解釋一下相對論."],
    ],
)
# 啟動介面
UI.launch()

上面程式碼中，最重要的就是將我們在第二步定義好的問答介面 generate_response 作為引數傳遞給 fn，其他引數不是很重要，你可以照抄，也可以自己來定義修改。

有了上面兩段程式碼後，就可以直接執行程式碼了。

當程式碼執行後，gradio 庫會提示網頁部署的本地連結資訊，如下：

這個時候，你只需要把給出的連結（比如上圖中的 http://127.0.0.1：7860）複製到瀏覽器中訪問，就可以跳出前端頁面。

在跳出的前端頁面左側空白對話方塊中，輸入你的問題（如上圖中的“介紹下李白”）。

然後點選黃色按鈕 Submit，就會呼叫 generate_response 介面進行對話，並將對話結果返回到右側的回答區域。

至此，一個簡單高效的聊天助手就製作完成了。

本文只是給出了一個示例，你可以在本文給出示例的基礎上，開發更多有用好玩的大模型 App 出來。

我是一名 AI 攻城獅，如果你也想學習 AI ，歡迎你關注我的公眾號，會有非常多好玩的AI技術分享。歡迎檢視我的專欄 >>1. 專欄：計算機視覺入門與調優 , 2. 專欄：Transformer 通關秘籍

相關文章