自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

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

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

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

為什么需要

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

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

1.框圖

在這個(gè)應(yīng)用程序中，我們按處理順序分為三個(gè)關(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è)計(jì) Web 應(yīng)用程序，建議您跳過第 1 部分和第 2 部分以節(jié)省閱讀時(shí)間。

2. OpenAI GPT API

獲取您的 API 密鑰

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

生成 API 密鑰后，請(qǐng)記住它只會(huì)顯示一次，因此請(qǐng)確保將其復(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 升級(jí)您的包：

!pip install --upgrade openai

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

import openai
complete = 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

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

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

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

3. 網(wǎng)頁開發(fā)

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

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

如果您不太擅長 Web 開發(fā)并且不愿意像我一樣構(gòu)建大型商業(yè)應(yīng)用程序，Streamlit 始終是您的最佳選擇之一，因?yàn)樗鼛缀醪恍枰?HTML 方面的專業(yè)知識(shí)。

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

安裝包：

!pip install streamlit

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

import streamlit as st


st.write("""
# My First App
Hello *world!*
""")

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

!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)文字的實(shí)現(xiàn)

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

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

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

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

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

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


recognition.start();

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

我將其設(shè)置為 false，因?yàn)槲蚁ＭZ音聊天機(jī)器人能夠以穩(wěn)定的速度根據(jù)用戶語音輸入生成每個(gè)答案。

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

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

識(shí)別對(duì)象有多個(gè)事件，我們使用 .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è)計(jì)一個(gè)按鈕來啟動(dòng)我們?cè)谏弦还?jié)中已經(jīng)用 Javascript 實(shí)現(xiàn)的語音識(shí)別。

圖片

Streamlit 庫不支持自定義 JS 代碼，所以我們引入了 Bokeh。Bokeh 庫是另一個(gè)強(qiáng)大的 Python 數(shù)據(jù)可視化工具。可以支持我們的演示的最佳部分之一是嵌入自定義 Javascript 代碼，這意味著我們可以在 Bokeh 的按鈕小部件下運(yùn)行我們的語音識(shí)別腳本。

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

!pip install bokeh==2.4.2

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

from bokeh.models.widgets import Button
from bokeh.models import CustomJS

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

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

定義按鈕點(diǎn)擊事件：

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

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

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

Streamlit_bokeh_event

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

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

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

!pip install streamlit-bokeh-events

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

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 屬性來注冊(cè)我們?cè)谏弦还?jié)中創(chuàng)建的 spk_button。使用 events 屬性來標(biāo)記多個(gè)自定義的 HTML 文檔事件

  • GET_TEXT 接收最終識(shí)別文本
  • GET_INTRM 接收臨時(shí)識(shí)別文本
  • 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"))

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

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

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

圖片

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

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

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

!pip install gTTS

在這個(gè)演示中，我們不想將語音數(shù)據(jù)保存到文件中，所以我們可以調(diào)用 BytesIO() 來臨時(shí)存儲(chǔ)語音數(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)建一個(gè)像樣的音頻播放器：

st.audio(sound)

全語音聊天機(jī)器人

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

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

請(qǐng)找到完整的演示代碼供您參考：

import streamlit as st
from bokeh.models.widgets import Button
from bokeh.models import CustomJS


from streamlit_bokeh_events import streamlit_bokeh_events


from gtts import gTTS
from io import BytesIO
import openai


openai.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 message


sound = 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})

輸入后：

!python -m streamlit run demo_voice.py

您最終會(huì)在網(wǎng)絡(luò)瀏覽器上看到一個(gè)簡單但智能的語音聊天機(jī)器人。

請(qǐng)注意：不要忘記在彈出請(qǐng)求時(shí)允許網(wǎng)頁訪問您的麥克風(fēng)和揚(yáng)聲器。

就是這樣，一個(gè)簡單聊天機(jī)器人就完成了。

最后，希望您能在本文中找到有用的東西，感謝您的閱讀！

責(zé)任編輯：華軒 來源： web前端開發(fā)
人工智能ChatGPT開發(fā)
相關(guān)推薦

2020-12-02 13:00:17

Recast.AI聊天機(jī)器人人工智能

2023-01-30 21:34:35

人工智能機(jī)器人ChatGPT

2023-10-13 09:00:00

2022-08-04 07:03:41

AnswersInfobip無代碼

2021-11-30 10:56:43

ChatterBot機(jī)器人人工智能

2021-10-28 22:46:13

Python機(jī)器人數(shù)據(jù)

2021-05-24 15:29:24

人工智能機(jī)器人聊天

2023-06-29 15:04:21

微軟ChatGPT

2022-09-30 13:55:46

Python機(jī)器人

2022-07-05 06:42:01

聊天機(jī)器人人工智能

2023-02-15 14:33:26

2023-12-18 19:05:34

2023-02-09 07:34:52

ChatGPT機(jī)器人人工智障

2023-06-16 07:17:10

ChatGPT智能汽車

2020-02-26 17:39:18

Python機(jī)器人Word

2017-06-08 10:07:53

機(jī)器人銀行微軟

2023-07-27 14:38:58

人工智能機(jī)器人開發(fā)

2023-05-31 13:28:45

2023-02-13 11:42:39

2020-02-20 09:00:00

網(wǎng)絡(luò)應(yīng)用數(shù)據(jù)技術(shù)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)