我創(chuàng)建了一個由 ChatGPT API 提供支持的語音聊天機器人，方法請收下

2023-03-31 17:21:42來源：web前端開發(fā)

今天這篇文章的重點是使用 ChatGPT API 創(chuàng)建私人語音 Chatbot Web 應(yīng)用程序。目的是探索和發(fā)現(xiàn)人工智能的更多潛在用例和商業(yè)機會。我將逐步指導(dǎo)您完成開發(fā)過程，以確保您理解并可以復(fù)制自己的過程。

為什么需要不是每個人都?xì)g迎基于打字的服務(wù)，想象一下仍在學(xué)習(xí)寫作技巧的孩子或無法在屏幕上正確看到單詞的老年人。基于語音的 AI Chatbot 是解決這個問題的方法，就像它如何幫助我的孩子要求他的語音 Chatbot 給他讀睡前故事一樣。鑒于現(xiàn)有可用的助手選項，例如，蘋果的 Siri 和亞馬遜的 Alexa，在 GPT 模型中加入語音交互可以開辟更廣泛的可能性。ChatGPT API 具有創(chuàng)建連貫且與上下文相關(guān)的響應(yīng)的卓越能力的優(yōu)勢，結(jié)合基于語音的智能家居連接的想法，可能會提供大量的商機。我們在本文中創(chuàng)建的語音助手將作為入口。

足夠的理論，讓我們開始吧。

1.框圖

在這個應(yīng)用程序中，我們按處理順序分為三個關(guān)鍵模塊：

(相關(guān)資料圖)

Bokeh 和 Web Speech API 的語音轉(zhuǎn)文本通過 OpenAI GPT-3.5 API 完成聊天gTTS 文本轉(zhuǎn)語音

Web框架由Streamlit構(gòu)建。

如果您已經(jīng)知道如何使用 GPT 3.5 模型下的 OpenAI API 以及如何使用 Streamlit 設(shè)計 Web 應(yīng)用程序，建議您跳過第 1 部分和第 2 部分以節(jié)省閱讀時間。

2. OpenAI GPT API獲取您的 API 密鑰

如果您已經(jīng)擁有一個 OpenAI API 密鑰，請堅持使用它而不是創(chuàng)建一個新密鑰。但是，如果您是 OpenAI 新手，請注冊一個新帳戶并在您的帳戶菜單中找到以下頁面：

生成 API 密鑰后，請記住它只會顯示一次，因此請確保將其復(fù)制到安全的地方以備將來使用。

ChatCompletion API 的使用

目前GPT-4.0剛剛發(fā)布，該模型的API還沒有完全發(fā)布，所以我將介紹開發(fā)仍然是GPT 3.5模型，它足以完成我們的AI語音Chatbot演示。

現(xiàn)在讓我們看一下來自 OpenAI 的最簡單的演示，以了解 ChatCompletion API（或稱為 gpt-3.5 API 或 ChatGPT API）的基本定義：

安裝包：

!pip install opena

如果您之前從 OpenAI 開發(fā)了一些遺留 GPT 模型，您可能必須通過 pip 升級您的包：

!pip install --upgrade openai

創(chuàng)建并發(fā)送提示：

import openaicomplete = openai.ChatCompletion.create(  model="gpt-3.5-turbo",  messages=[        {"role": "system", "content": "You are a helpful assistant."},        {"role": "user", "content": "Who won the world series in 2020?"},        {"role": "assistant", "content": "The Los Angeles Dodgers won the World Series in 2020."},        {"role": "user", "content": "Where was it played?"}    ])

接收文本響應(yīng)：

message=complete.choices[0].message.content

因為 GPT 3.5 API 是基于聊天的文本完成 API，所以請確保 ChatCompletion 請求的消息正文包含對話歷史記錄作為上下文，您希望模型參考更上下文相關(guān)的響應(yīng)來響應(yīng)您的當(dāng)前請求。

為了實現(xiàn)此功能，消息體的列表對象應(yīng)按以下順序組織：

系統(tǒng)消息定義為通過在消息列表頂部的內(nèi)容中添加指令來設(shè)置聊天機器人的行為。如介紹中所述，目前此功能尚未在 gpt-3.5-turbo-0301 中完全釋放。用戶消息表示用戶的輸入或查詢，而助手消息是指來自 GPT-3.5 API 的相應(yīng)響應(yīng)。這樣的成對對話為有關(guān)上下文的模型提供了參考。最后一條用戶消息是指當(dāng)前時刻請求的提示。3. 網(wǎng)頁開發(fā)

我們將繼續(xù)使用強大的 Streamlit 庫來構(gòu)建 Web 應(yīng)用程序。

Streamlit 是一個開源框架，它使數(shù)據(jù)科學(xué)家和開發(fā)人員能夠快速構(gòu)建和共享用于機器學(xué)習(xí)和數(shù)據(jù)科學(xué)項目的交互式 Web 應(yīng)用程序。它還提供了一堆小部件，只需要一行 python 代碼即可創(chuàng)建，如 st.table(...)。

如果您不太擅長 Web 開發(fā)并且不愿意像我一樣構(gòu)建大型商業(yè)應(yīng)用程序，Streamlit 始終是您的最佳選擇之一，因為它幾乎不需要 HTML 方面的專業(yè)知識。

讓我們看一個構(gòu)建 Streamlit Web 應(yīng)用程序的快速示例：

安裝包：

!pip install streamlit

創(chuàng)建一個 Python 文件“demo.py”：

import streamlit as stst.write("""# My First AppHello *world!*""")

在本地機器或遠(yuǎn)程服務(wù)器上運行：

!python -m streamlit run demo.py

打印此輸出后，您可以通過列出的地址和端口訪問您的網(wǎng)站：

You can now view your Streamlit app in your browser.  Network URL: http://xxx.xxx.xxx.xxx:8501  External URL: http://xxx.xxx.xxx.xxx:8501

Streamlit 提供的所有小部件的用法可以在其文檔頁面中找到：https://docs.streamlit.io/library/api-reference

4.語音轉(zhuǎn)文字的實現(xiàn)

此 AI 語音聊天機器人的主要功能之一是它能夠識別用戶語音并生成我們的 ChatCompletion API 可用作輸入的適當(dāng)文本。

OpenAI 的 Whisper API 提供的高質(zhì)量語音識別是一個很好的選擇，但它是有代價的?；蛘撸瑏碜?Javascript 的免費 Web Speech API 提供可靠的多語言支持和令人印象深刻的性能。

雖然開發(fā) Python 項目似乎與定制的 Javascript 不兼容，但不要害怕！在下一部分中，我將介紹一種在 Python 程序中調(diào)用 Javascript 代碼的簡單技術(shù)。

不管怎樣，讓我們看看如何使用 Web Speech API 快速開發(fā)語音轉(zhuǎn)文本演示。您可以找到它的文檔（地址：https://wicg.github.io/speech-api/）。

語音識別的實現(xiàn)可以很容易地完成，如下所示。

var recognition = new webkitSpeechRecognition();recognition.continuous = false;recognition.interimResults = true;recognition.lang = "en";recognition.start();

通過方法 webkitSpeechRecognition() 初始化識別對象后，需要定義一些有用的屬性。continuous 屬性表示您是否希望 SpeechRecognition 函數(shù)在語音輸入的一種模式處理成功完成后繼續(xù)工作。

我將其設(shè)置為 false，因為我希望語音聊天機器人能夠以穩(wěn)定的速度根據(jù)用戶語音輸入生成每個答案。

設(shè)置為 true 的 interimResults 屬性將在用戶語音期間生成一些中間結(jié)果，以便用戶可以看到從他們的語音輸入輸出的動態(tài)消息。

lang 屬性將設(shè)置請求識別的語言。請注意，如果它在代碼中是未設(shè)置，則默認(rèn)語言將來自 HTML 文檔根元素和關(guān)聯(lián)的層次結(jié)構(gòu)，因此在其系統(tǒng)中使用不同語言設(shè)置的用戶可能會有不同的體驗。

識別對象有多個事件，我們使用 .onresult 回調(diào)來處理來自中間結(jié)果和最終結(jié)果的文本生成結(jié)果。

recognition.onresult = function (e) {    var value, value2 = "";    for (var i = e.resultIndex; i < e.results.length; ++i) {        if (e.results[i].isFinal) {            value += e.results[i][0].transcript;            rand = Math.random();        } else {            value2 += e.results[i][0].transcript;        }    }}

5.引入Bokeh庫

從用戶界面的定義來看，我們想設(shè)計一個按鈕來啟動我們在上一節(jié)中已經(jīng)用 Javascript 實現(xiàn)的語音識別。

Streamlit 庫不支持自定義 JS 代碼，所以我們引入了 Bokeh。Bokeh 庫是另一個強大的 Python 數(shù)據(jù)可視化工具?？梢灾С治覀兊难菔镜淖罴巡糠种皇乔度胱远x Javascript 代碼，這意味著我們可以在 Bokeh 的按鈕小部件下運行我們的語音識別腳本。

為此，我們應(yīng)該安裝 Bokeh 包。為了兼容后面會提到的streamlit-bokeh-events庫，Bokeh的版本應(yīng)該是2.4.2：

!pip install bokeh==2.4.2

導(dǎo)入按鈕和 CustomJS：

from bokeh.models.widgets import Buttonfrom bokeh.models import CustomJS

創(chuàng)建按鈕小部件：

spk_button = Button(label="SPEAK", button_type="success")

定義按鈕點擊事件：

spk_button.js_on_event("button_click", CustomJS(code="""    ...js code..."""))

定義了.js_on_event()方法來注冊spk_button的事件。

在這種情況下，我們注冊了“button_click”事件，該事件將在用戶單擊后觸發(fā)由 CustomJS() 方法嵌入的 JS 代碼塊…js 代碼…的執(zhí)行。

Streamlit_bokeh_event

speak 按鈕及其回調(diào)方法實現(xiàn)后，下一步是將 Bokeh 事件輸出（識別的文本）連接到其他功能塊，以便將提示文本發(fā)送到 ChatGPT API。

幸運的是，有一個名為“Streamlit Bokeh Events”的開源項目專為此目的而設(shè)計，它提供與 Bokeh 小部件的雙向通信。你可以在??這里??找到它的 GitHub 頁面。

這個庫的使用非常簡單。首先安裝包：

!pip install streamlit-bokeh-events

通過 streamlit_bokeh_events 方法創(chuàng)建結(jié)果對象。

result = streamlit_bokeh_events(    bokeh_plot = spk_button,    events="GET_TEXT,GET_ONREC,GET_INTRM",    key="listen",    refresh_on_update=False,    override_height=75,    debounce_time=0)

使用 bokeh_plot 屬性來注冊我們在上一節(jié)中創(chuàng)建的 spk_button。使用 events 屬性來標(biāo)記多個自定義的 HTML 文檔事件

GET_TEXT 接收最終識別文本GET_INTRM 接收臨時識別文本GET_ONREC 接收語音處理階段

我們可以使用 JS 函數(shù) document.dispatchEvent(new CustomEvent(…)) 來生成事件，例如 GET_TEXT 和 GET_INTRM 事件：

spk_button.js_on_event("button_click", CustomJS(code="""    var recognition = new webkitSpeechRecognition();    recognition.continuous = false;    recognition.interimResults = true;    recognition.lang = "en";    var value, value2 = "";    for (var i = e.resultIndex; i < e.results.length; ++i) {        if (e.results[i].isFinal) {            value += e.results[i][0].transcript;            rand = Math.random();        } else {            value2 += e.results[i][0].transcript;        }    }    document.dispatchEvent(new CustomEvent("GET_TEXT", {detail: {t:value, s:rand}}));    document.dispatchEvent(new CustomEvent("GET_INTRM", {detail: value2}));    recognition.start();    }"""))

并且，檢查事件 GET_INTRM 處理的 result.get() 方法，例如：

tr = st.empty()if result:    if "GET_INTRM" in result:        if result.get("GET_INTRM") != "":            tr.text_area("**Your input**", result.get("GET_INTRM"))

這兩個代碼片段表明，當(dāng)用戶正在講話時，任何臨時識別文本都將顯示在 Streamlit text_area 小部件上：

6. 文字轉(zhuǎn)語音實現(xiàn)

提示請求完成，GPT-3.5模型通過ChatGPT API生成響應(yīng)后，我們通過Streamlit st.write()方法將響應(yīng)文本直接顯示在網(wǎng)頁上。

但是，我們需要將文本轉(zhuǎn)換為語音，這樣我們的 AI 語音 Chatbot 的雙向功能才能完全完成。

有一個名為“gTTS”的流行 Python 庫能夠完美地完成這項工作。在與谷歌翻譯的文本轉(zhuǎn)語音 API 接口后，它支持多種格式的語音數(shù)據(jù)輸出，包括 mp3 或 stdout。你可以在??這里??找到它的 GitHub 頁面。

只需幾行代碼即可完成轉(zhuǎn)換。首先安裝包：

!pip install gTTS

在這個演示中，我們不想將語音數(shù)據(jù)保存到文件中，所以我們可以調(diào)用 BytesIO() 來臨時存儲語音數(shù)據(jù)：

sound = BytesIO()tts = gTTS(output, lang="en", tld="com")tts.write_to_fp(sound)

輸出的是要轉(zhuǎn)換的文本字符串，你可以根據(jù)自己的喜好，通過tld從不同的google域中選擇不同的語言by lang。例如，您可以設(shè)置 tld="co.uk" 以生成英式英語口音。

然后，通過 Streamlit 小部件創(chuàng)建一個像樣的音頻播放器：

st.audio(sound)

全語音聊天機器人

要整合上述所有模塊，我們應(yīng)該完成完整的功能：

已完成與 ChatCompletion API 的交互，并在用戶和助手消息塊中定義了附加的歷史對話。使用 Streamlit 的 st.session_state 來存儲運行變量?？紤]到 .onspeechstart()、.onsoundend() 和 .onerror() 等多個事件以及識別過程，在 SPEAK 按鈕的 CustomJS 中完成了事件生成。完成事件“GET_TEXT、GET_ONREC、GET_INTRM”的事件處理，以在網(wǎng)絡(luò)界面上顯示適當(dāng)?shù)男畔?，并管理用戶講話時的文本顯示和組裝。所有必要的 Streamit 小部件

請找到完整的演示代碼供您參考：

import streamlit as stfrom bokeh.models.widgets import Buttonfrom bokeh.models import CustomJSfrom streamlit_bokeh_events import streamlit_bokeh_eventsfrom gtts import gTTSfrom io import BytesIOimport openaiopenai.api_key = "{Your API Key}"if "prompts" not in st.session_state:    st.session_state["prompts"] = [{"role": "system", "content": "You are a helpful assistant. Answer as concisely as possible with a little humor expression."}]def generate_response(prompt):    st.session_state["prompts"].append({"role": "user", "content":prompt})    completinotallow=openai.ChatCompletion.create(        model="gpt-3.5-turbo",        messages = st.session_state["prompts"]    )    message=completion.choices[0].message.content    return messagesound = BytesIO()placeholder = st.container()placeholder.title("Yeyu"s Voice ChatBot")stt_button = Button(label="SPEAK", button_type="success", margin = (5, 5, 5, 5), width=200)stt_button.js_on_event("button_click", CustomJS(code="""    var value = "";    var rand = 0;    var recognition = new webkitSpeechRecognition();    recognition.continuous = false;    recognition.interimResults = true;    recognition.lang = "en";    document.dispatchEvent(new CustomEvent("GET_ONREC", {detail: "start"}));    recognition.onspeechstart = function () {        document.dispatchEvent(new CustomEvent("GET_ONREC", {detail: "running"}));    }    recognition.onsoundend = function () {        document.dispatchEvent(new CustomEvent("GET_ONREC", {detail: "stop"}));    }    recognition.onresult = function (e) {        var value2 = "";        for (var i = e.resultIndex; i < e.results.length; ++i) {            if (e.results[i].isFinal) {                value += e.results[i][0].transcript;                rand = Math.random();            } else {                value2 += e.results[i][0].transcript;            }        }        document.dispatchEvent(new CustomEvent("GET_TEXT", {detail: {t:value, s:rand}}));        document.dispatchEvent(new CustomEvent("GET_INTRM", {detail: value2}));    }    recognition.onerror = function(e) {        document.dispatchEvent(new CustomEvent("GET_ONREC", {detail: "stop"}));    }    recognition.start();    """))result = streamlit_bokeh_events(    bokeh_plot = stt_button,    events="GET_TEXT,GET_ONREC,GET_INTRM",    key="listen",    refresh_on_update=False,    override_height=75,    debounce_time=0)tr = st.empty()if "input" not in st.session_state:    st.session_state["input"] = dict(text="", sessinotallow=0)tr.text_area("**Your input**", value=st.session_state["input"]["text"])if result:    if "GET_TEXT" in result:        if result.get("GET_TEXT")["t"] != "" and result.get("GET_TEXT")["s"] != st.session_state["input"]["session"] :            st.session_state["input"]["text"] = result.get("GET_TEXT")["t"]            tr.text_area("**Your input**", value=st.session_state["input"]["text"])            st.session_state["input"]["session"] = result.get("GET_TEXT")["s"]    if "GET_INTRM" in result:        if result.get("GET_INTRM") != "":            tr.text_area("**Your input**", value=st.session_state["input"]["text"]+" "+result.get("GET_INTRM"))    if "GET_ONREC" in result:        if result.get("GET_ONREC") == "start":            placeholder.image("recon.gif")            st.session_state["input"]["text"] = ""        elif result.get("GET_ONREC") == "running":            placeholder.image("recon.gif")        elif result.get("GET_ONREC") == "stop":            placeholder.image("recon.jpg")            if st.session_state["input"]["text"] != "":                input = st.session_state["input"]["text"]                output = generate_response(input)                st.write("**ChatBot:**")                st.write(output)                st.session_state["input"]["text"] = ""                tts = gTTS(output, lang="en", tld="com")                tts.write_to_fp(sound)                st.audio(sound)                st.session_state["prompts"].append({"role": "user", "content":input})                st.session_state["prompts"].append({"role": "assistant", "content":output})

輸入后：