当前位置:   article > 正文

百度大模型调用+语音对话_怎么在线使用百度大模型

怎么在线使用百度大模型

尝试了一下调用、调试文心一言大模型,挺简单的。以下是从零开始的调用流程

1.前期准备

1创建百度智能云账号

网址:百度智能云-云智一体深入产业 (baidu.com)

进入网址后,按官网提示正常进行就行,这个应该不算难

737f089e305e4b81ad1ad197725f6f54.png

2.实名认证

网址:百度智能云-云智一体深入产业 (baidu.com)

进入用户中心处,找到实名认证进行认证,上传身份证信息与照片即可,其余邮箱、电话等账号绑定依据个人口味添加

db728b4fd64c41fbb740cea914c69a95.png64331c2011424182b3abb01181fa9bda.png

3 服务开通

在申请使用权限确认后,进入服务开通界面,点击立即使用

3a9a963f8d4d44a68f46ef5165a09bf3.png
点击下一步确认订单

e2a6f860bdba42b9a9e4330c271b9930.png
公测账号都有测试代金券,不必担心产生额外费用,服务开通成功页面如下所示26a952fc6d994302bb703019c9beed56.png

2.调用官方大模型

在创建自己的模型前要先学会调用官方的大模型

网址:百度智能云控制台 (baidu.com)

1.创建应用接入

 

进入应用接入模块,点击创建应用

761cce6fb8314f62b8869d9284266819.png

按顺序输入信息即可,这里推荐服务配置全选,如果第一次使用,应该是没有在线服务的,这点不需要担心

54e00c6158ed422a9e25c2751c101ccd.png

创建完成之后会生成AK(API Key)与SK(Secret Key),后续会使用

9db3b37b77d44cd5837f88f60a0582ee.png

2.平台调用模型

网址:百度智能云控制台 (baidu.com)

根据自己需求在模型广场自行选择模型即可。在本文例子中我尝试ERNIE-Bot 4.0模型

c8fd6b3a6f3045c7857a603239c3d8a0.png

选择模型后点击即可,进入界面后点击体验即可

这个时候会出现两种情况.1. 已开通付费     2.未开通付费

未开通付费

已开通后通过对话框可直接使用,未开通会受到界面提示点击开通即可

00d51945a0304a4583482bc88cc73646.png

这里说明一下,不同模型收费标准不一样,根据需要购买即可

我开通的是ERNIE-Bot大模型公有云在线调用服务和ERNIE-Bot-turbo-0922大模型公有云在线调用服务和ChatGLM2-6B-32K大模型公有云训练服务-SFT-全量更新。后续如果出现对应服务未开通情况自行按需求开通即可

40a530b001de41208db9a57ced2758fe.png

开通完成后

直接进行对话即可

26cd8e65f9244957881c59209107e710.png

3.本地代码调用

在确定好在官网可以正常使用,即可在本地环境(安装好对应包)进行尝试

准备阶段

这个时候就需要两样东西:AK(API Key)与SK(Secret Key)

e3dcba47e3664602827c19232dd0eef6.png

在官方文档中,可以使用不同语言调用不同模型

网址:API列表 - 千帆大模型平台 | 百度智能云文档 (baidu.com)

a29cb76657cd44e6b3504e66bbccce11.png

python示例

以下是python示例(作者主修python)

目前我发现用户可修改三处地方

1.AK     2.SK       3.url

AK与SK均在应用接入时生成,直接更换即可。指向用户自己,调用密钥,将“xxxx”更换为自己的AK与SK即可

url决定调用模型种类,获取方法如下

网址:百度智能云控制台 (baidu.com)

按图中顺序依次选择。在自己创建的应用最右侧点击移动端测试,选择自己要进行的服务(及大模型),之后官网会自动生成对应的API信息:二维码、请求地址、API Key、Secret Key、模型名称、应用名称。我们需要的即是请求地址,复制请求地址

在下面代码中第十行,main()第一行中的”https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/om82aolq_kubila“部分修改为自己的请求地址即可

url = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/om82aolq_kubila?access_token=" + get_access_token()

445305cb121849e6ba5ff90a5b7d25d9.png83ba924532564413b8a21948533e4a14.png

  1. import requests
  2. import json
  3. API_KEY = "xxxx"
  4. # API_KEY
  5. SECRET_KEY = "xxxx"
  6. # SECRET_KEY
  7. def main():
  8. url = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions?access_token=" + get_access_token()
  9. payload = json.dumps({
  10. "messages": [
  11. {
  12. "role": "user",
  13. "content": "介绍一下你自己"
  14. }
  15. ]
  16. })
  17. headers = {
  18. 'Content-Type': 'application/json'
  19. }
  20. response = requests.request("POST", url, headers=headers, data=payload)
  21. print(response.json()["result"])
  22. def get_access_token():
  23. url = "https://aip.baidubce.com/oauth/2.0/token"
  24. params = {"grant_type": "client_credentials", "client_id": API_KEY, "client_secret": SECRET_KEY}
  25. return str(requests.post(url, params=params).json().get("access_token"))
  26. if __name__ == '__main__':
  27. main()

本地调用

在本地环境进行运行即可调用,可根据需求进行修改问题与界面

f3f43577ad314fdb8060fb2a8ad5e937.png

修改代码

比如修改代码后在新的命令窗口或网页调用(自行修改代码即可)

34a32f493bcc428089861c087ca812db.pngc0af1d1c97394db2992218afb6273c35.png

  1. from flask import Flask, render_template, request
  2. import requests
  3. import json
  4. from PyQt5.QtCore import Qt
  5. from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QLabel, QTextEdit, QPushButton, QHBoxLayout, \
  6. QScrollArea
  7. app = Flask(__name__)
  8. API_KEY = "xxxx"
  9. SECRET_KEY = "xxxx"
  10. class ChatWindow(QWidget):
  11. def __init__(self):
  12. super().__init__()
  13. self.setWindowTitle('Chat')
  14. self.setStyleSheet("""
  15. background-color: lightblue;
  16. font-family: Arial, sans-serif;
  17. """)
  18. self.init_ui()
  19. def init_ui(self):
  20. main_layout = QVBoxLayout()
  21. chat_window = QScrollArea()
  22. chat_window.setWidgetResizable(True)
  23. chat_window.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOn)
  24. chat_window.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
  25. chat_container = QWidget()
  26. chat_layout = QVBoxLayout(chat_container)
  27. chat_window.setWidget(chat_container)
  28. main_layout.addWidget(QLabel('<h1>糖患卫士</h1>'))
  29. main_layout.addWidget(chat_window)
  30. input_layout = QHBoxLayout()
  31. prompt_input = QTextEdit()
  32. prompt_input.setPlaceholderText("输入消息")
  33. input_layout.addWidget(prompt_input)
  34. send_button = QPushButton("发送")
  35. input_layout.addWidget(send_button)
  36. main_layout.addLayout(input_layout)
  37. self.setLayout(main_layout)
  38. send_button.clicked.connect(lambda: self.add_message('user', prompt_input.toPlainText()))
  39. prompt_input.returnPressed.connect(send_button.click)
  40. def add_message(self, role, content):
  41. message_box = QTextEdit(content)
  42. message_box.setReadOnly(True)
  43. message_box.setStyleSheet("""
  44. background-color: white;
  45. padding: 20px;
  46. border-radius: 5px;
  47. margin-bottom: 20px;
  48. """)
  49. if role == 'user':
  50. message_box.setAlignment(Qt.AlignLeft)
  51. else:
  52. message_box.setAlignment(Qt.AlignRight)
  53. chat_container = self.findChild(QWidget, 'chat_container')
  54. chat_layout = chat_container.layout()
  55. chat_layout.addWidget(message_box)
  56. scroll_bar = self.findChild(QScrollArea).verticalScrollBar()
  57. scroll_bar.setValue(scroll_bar.maximum())
  58. def main(prompt):
  59. url = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/om82aolq_kubila?access_token=" + get_access_token()
  60. payload = json.dumps({
  61. "messages": [
  62. {
  63. "role": "user",
  64. "content": prompt
  65. }
  66. ]
  67. })
  68. headers = {
  69. 'Content-Type': 'application/json'
  70. }
  71. response = requests.request("POST", url, headers=headers, data=payload)
  72. return eval(response.text.replace('false','"false"'))['result']
  73. def get_access_token():
  74. url = "https://aip.baidubce.com/oauth/2.0/token"
  75. params = {"grant_type": "client_credentials", "client_id": API_KEY, "client_secret": SECRET_KEY}
  76. return str(requests.post(url, params=params).json().get("access_token"))
  77. @app.route('/')
  78. def index():
  79. return render_template('index.html')
  80. @app.route('/submit', methods=['POST'])
  81. def submit():
  82. prompt = request.form['prompt']
  83. content = main(prompt)
  84. return {'role': 'bot', 'content': content}
  85. if __name__ == '__main__':
  86. chat_window = ChatWindow()
  87. app = QApplication([])
  88. chat_window.show()
  89. app.run()

C++语言示例

准备与修改内容同上

  1. #include <stdio.h>
  2. #include <iostream>
  3. #include <string.h>
  4. #include <curl/curl.h>
  5. #include <json/json.h>
  6. #include <fstream>
  7. #include <memory>
  8. std::string client_id = "xxx";
  9. std::string client_secret = "xxx";
  10. inline size_t onWriteData(void * buffer, size_t size, size_t nmemb, void * userp)
  11. {
  12. std::string * str = dynamic_cast<std::string *>((std::string *)userp);
  13. str->append((char *)buffer, size * nmemb);
  14. return nmemb;
  15. }
  16. std::string getAccessToken()
  17. {
  18. std::string result;
  19. CURL *curl;
  20. CURLcode res;
  21. curl = curl_easy_init();
  22. if(curl)
  23. {
  24. curl_easy_setopt(curl, CURLOPT_CUSTOMREQUEST, "POST");
  25. curl_easy_setopt(curl, CURLOPT_URL, "https://aip.baidubce.com/oauth/2.0/token");
  26. curl_easy_setopt(curl, CURLOPT_FOLLOWLOCATION, 1L);
  27. curl_easy_setopt(curl, CURLOPT_DEFAULT_PROTOCOL, "https");
  28. struct curl_slist *headers = NULL;
  29. headers = curl_slist_append(headers, "Content-Type: application/x-www-form-urlencoded");
  30. headers = curl_slist_append(headers, "Accept: application/json");
  31. curl_easy_setopt(curl, CURLOPT_HTTPHEADER, headers);
  32. std::string data = "grant_type=client_credentials&client_id="+client_id+"&client_secret="+client_secret;
  33. curl_easy_setopt(curl, CURLOPT_POSTFIELDS, data.c_str());
  34. curl_easy_setopt(curl, CURLOPT_WRITEDATA, &result);
  35. curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, onWriteData);
  36. res = curl_easy_perform(curl);
  37. }
  38. curl_easy_cleanup(curl);
  39. Json::Value obj;
  40. std::string error;
  41. Json::CharReaderBuilder crbuilder;
  42. std::unique_ptr<Json::CharReader> reader(crbuilder.newCharReader());
  43. reader->parse(result.data(), result.data() + result.size(), &obj, &error);
  44. return obj["access_token"].asString();
  45. }
  46. int main(int argc, char *argv[])
  47. {
  48. std::string result;
  49. CURL *curl;
  50. CURLcode res;
  51. curl = curl_easy_init();
  52. if(curl) {
  53. curl_easy_setopt(curl, CURLOPT_CUSTOMREQUEST, "POST");
  54. curl_easy_setopt(curl, CURLOPT_URL, ("https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions?access_token=" + getAccessToken()).c_str());
  55. curl_easy_setopt(curl, CURLOPT_FOLLOWLOCATION, 1L);
  56. curl_easy_setopt(curl, CURLOPT_DEFAULT_PROTOCOL, "https");
  57. struct curl_slist *headers = NULL;
  58. headers = curl_slist_append(headers, "Content-Type: application/json");
  59. curl_easy_setopt(curl, CURLOPT_HTTPHEADER, headers);
  60. const char *data = "{\"messages\":[{\"role\":\"user\",\"content\":\"介绍一下你自己\"},{\"role\":\"assistant\",\"content\":\"您好,我是文心一言,英文名是ERNIE Bot。我能够与人对话互动,回答问题,协助创作,高效便捷地帮助人们获取信息、知识和灵感。\"}]}";
  61. curl_easy_setopt(curl, CURLOPT_POSTFIELDS, data);
  62. curl_easy_setopt(curl, CURLOPT_WRITEDATA, &result);
  63. curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, onWriteData);
  64. res = curl_easy_perform(curl);
  65. std::cout<<result;
  66. }
  67. curl_easy_cleanup(curl);
  68. return (int)res;
  69. }

GO示例

  1. package main
  2. import (
  3. "encoding/json"
  4. "fmt"
  5. "io/ioutil"
  6. "net/http"
  7. "strings"
  8. )
  9. const API_KEY = "RgAq3HSxxxxDlvXOoLy"
  10. const SECRET_KEY = "zWSdXWxxxxKmkRWi8YORj"
  11. func main() {
  12. url := "<https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions?access_token=>" + GetAccessToken()
  13. payload := strings.NewReader(``)
  14. client := &http.Client {}
  15. req, err := http.NewRequest("POST", url, payload)
  16. if err != nil {
  17. fmt.Println(err)
  18. return
  19. }
  20. req.Header.Add("Content-Type", "application/json")
  21. res, err := client.Do(req)
  22. if err != nil {
  23. fmt.Println(err)
  24. return
  25. }
  26. defer res.Body.Close()
  27. body, err := ioutil.ReadAll(res.Body)
  28. if err != nil {
  29. fmt.Println(err)
  30. return
  31. }
  32. fmt.Println(string(body))
  33. }
  34. /**
  35. * 使用 AK,SK 生成鉴权签名(Access Token)
  36. * @return string 鉴权签名信息(Access Token)
  37. */
  38. func GetAccessToken() string {
  39. url := "<https://aip.baidubce.com/oauth/2.0/token>"
  40. postData := fmt.Sprintf("grant_type=client_credentials&client_id=%s&client_secret=%s", API_KEY, SECRET_KEY)
  41. resp, err := http.Post(url, "application/x-www-form-urlencoded", strings.NewReader(postData))
  42. if err != nil {
  43. fmt.Println(err)
  44. return ""
  45. }
  46. defer resp.Body.Close()
  47. body, err := ioutil.ReadAll(resp.Body)
  48. if err != nil {
  49. fmt.Println(err)
  50. return ""
  51. }
  52. accessTokenObj := map[string]string{}
  53. json.Unmarshal([]byte(body), &accessTokenObj)
  54. return accessTokenObj["access_token"]
  55. }

其它

错误码

如果请求错误,服务器返回的JSON文本包含以下参数。

名称描述
error_code错误码
error_msg错误描述信息,帮助理解和解决发生的错误

例如Access Token失效返回以下内容,需要重新获取新的Access Token再次请求。

  1. {
  2. "error_code": 110,
  3. "error_msg": "Access token invalid or no longer valid"
  4. }

千帆大模型平台相关错误码,请查看错误码说明

4.自己微调大模型

网址:百度智能云控制台 (baidu.com)

1.数据集准备

网址:百度智能云控制台 (baidu.com)

在微调大模型前需要准备好自己的数据集json文件、txt文件、csv文件、xlsx文件、压缩包文件(本文已json文件为例

进入网址后,点击图中创建数据集按钮

92deb72187c94e0faa1c6fcd7a370d7c.png
根据个人要求进行命名,选择数据类型、标注类型、标注模板、保存位置等等,完成后点击创建并导入即可

ef0b7500f987421399713d4c14952b1f.png

构建方式、数据标注状态、导入方式、导入格式后直接上传即可,这里采取有标注信息的json文件采取本地导入的方式。

755efc225acc43f5864ca9cc65f4aab3.png

json文件格式数据要求如下

1. 文件内单条数据格式要求为[{"prompt" : "prompt内容", "response": [["response内容"]]}], 下载数据样例
2. 每一行表示一组数据,每组数据中的prompt和response加起来之和字符数不超过32000Token(包括中英文、数字、符号等),超出部分将被截断。
3. 支持文本文件类型为jsonl,编码仅支持UTF-8,单次上传限制100个文本文件,单个文件不超过100M

  1. [{"prompt": "xxxx", "response": [["xxxx"]]}]
  2. [{"prompt": "xxxx", "response": [["xxxx"]]}]
  3. [{"prompt": "xxxx", "response": [["xxxx"]]}]
  4. [{"prompt": "xxxx", "response": [["xxxx"]]}]
  5. [{"prompt": "xxxx", "response": [["xxxx"]]}]

按照上述方式上传后,等待一分钟左右数据导入完成。如若无需修改,选择发布即可,发布完成后,数据集上传已完成,进入下一步模型训练。

7c4e2031a8614862ab58fb44a4ceb3ad.pngdfc5c035485f487499d12a5af8c3d8ab.png

2.模型训练

网址:百度智能云控制台 (baidu.com)

导入数据及后开始将新数据进行模型训练,按下图选择任务名称、任务类型任务描述、选择基础模型、模型版本(这里模型要选择自己开通过的,否则要从新开通)

训练配置可选择增量训练(仅支持选择2023年9月22日后训练的模型。同时由于大模型权重占用较大存储,只能选择三个月内训练的模型发起增量训练),

训练方法分为两种:1.全量更新(全量更新在训练过程中对大模型的全部参数进行更新)2.

LoRA(LoRA在固定预训练大模型本身的参数的基础上,在保留自注意力模块中原始权重矩阵的基础上,对权重矩阵进行低秩分解,训练过程中只更新低秩部分的参数。)建议选择LoRA)

8f35ff956a874b11af3befa8758ab8d9.png

其余数据配置按需要选择,数据集这是可选择第一步构造的“我的数据集”,选择完之后进行付费训练即可。这里注意是否开通对应服务,若未开通,在确定按钮右侧选择“前往开通“即可。

b0492b51728a48aab2c3644887fbdeaf.png

点击确定并付费后会进行训练,这里时间可能会较长,训练完成后即可进入下一步

9a75e06d5fbd41ffb2a76b62fa16fab9.png

等待模型训练完成后,将模型发布,即可开启大模型服务

c06b995586db442792b852beb8ad06a3.png

创建的大模型可在我的模型处查看并编辑

网址:百度智能云控制台 (baidu.com)

d7d1faf05c534705b9ba7c3b275c6b39.png

3.开启大模型服务

在模型创建并发布成功后,即可开启大模型服务

网址:百度智能云控制台 (baidu.com)

进入在线服务界面选择我的服务后点击创建服务即可

147f3480c86745ee8b2f691ab05ae07c.png

进入创建界面后,1.输入服务名称(任意、支持中文、英文、数字、中划线(-)、下划线(_),1-20个字符以内),2.选择模型,3.这里选择我的模型,在这里会看到我们上一步发布的模型,4.输入API地址(这里按格式要求命名即可),5.选择资源池,这里选择私人资源池,6.随后选择开通的时间(这里我感觉这个消费还是比较贵的,哎),可以选的对应天数与小时,最低一个小时,我这里28元。7.点击确定后付费即可(注册时的20元代金卷可以使用)

82c6c7ed85154aa7a6ef329e7a69b156.pngba98b3744952429094086d0f209d0abb.png

模型服务发布需要等待几分钟

fa31c862615f4b7db37d30b02c3f0419.png

点击服务详情后复制标注出的服务地址,下一步会使用。

45007c5893f64346878c644feb624592.png

到这里模型已经发布

4.调用大模型服务

这里直接参考上述本地代码调用即可

 在下面代码中第十行,main()第一行中的”https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/om82aolq_kubila“部分修改为自己的请求地址即可(及上一步复制信息)

url = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/om82aolq_kubila?access_token=" + get_access_token()

在调用前要保证应用接入AK与SK的服务要包含自己新开通的服务即可调用

2f27c1f3d7ab42bdb8e5cd36fc5e3085.png

5.扩展

1.web网页+语音输入+语音输出

代码展示

  1. from flask import Flask, render_template, request
  2. import requests
  3. import json
  4. app = Flask(__name__)
  5. API_KEY = "xxxx"
  6. SECRET_KEY = "xxxxxxx"
  7. # 用户头像路径
  8. USER_AVATAR_PATH = "./图片.png"
  9. # 机器人头像路径
  10. BOT_AVATAR_PATH = "./图片.png"
  11. def main(prompt):
  12. url = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions?access_token=" + get_access_token()
  13. payload = json.dumps({
  14. "messages": [
  15. {
  16. "role": "user",
  17. "content": prompt
  18. }
  19. ]
  20. })
  21. headers = {
  22. 'Content-Type': 'application/json'
  23. }
  24. response = requests.request("POST", url, headers=headers, data=payload)
  25. bot_response = eval(response.text.replace('false','"false"'))['result']
  26. def get_access_token():
  27. url = "https://aip.baidubce.com/oauth/2.0/token"
  28. params = {"grant_type": "client_credentials", "client_id": API_KEY, "client_secret": SECRET_KEY}
  29. return str(requests.post(url, params=params).json().get("access_token"))
  30. @app.route('/')
  31. def index():
  32. return render_template('index.html')
  33. @app.route('/submit', methods=['POST'])
  34. def submit():
  35. prompt = request.form['prompt']
  36. content = main(prompt)
  37. return {'role': 'bot', 'content': content}
  38. if __name__ == '__main__':
  39. app.run()
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>web</title>
  6. <style>
  7. body {
  8. background-color: lightblue;
  9. font-family: Arial, sans-serif;
  10. }
  11. .container {
  12. max-width: 800px;
  13. margin: 0 auto;
  14. padding: 20px;
  15. }
  16. .chat-window {
  17. background-color: white;
  18. padding: 20px;
  19. border-radius: 5px;
  20. margin-bottom: 20px;
  21. height: 400px;
  22. overflow-y: auto;
  23. }
  24. .chat-box {
  25. display: flex;
  26. align-items: center;
  27. margin-bottom: 10px;
  28. }
  29. .user-avatar, .bot-avatar {
  30. display: none;
  31. }
  32. .message {
  33. display: inline-block;
  34. max-width: 80%;
  35. word-wrap: break-word;
  36. overflow-wrap: break-word;
  37. text-align: left;
  38. }
  39. .user-message {
  40. text-align: left;
  41. }
  42. .bot-message {
  43. text-align: right;
  44. }
  45. .clear {
  46. clear: both;
  47. }
  48. #chat-form {
  49. display: flex;
  50. align-items: center;
  51. margin-top: 20px;
  52. }
  53. #prompt-input {
  54. flex-grow: 1;
  55. padding: 10px;
  56. font-size: 18px;
  57. background-color: #f5f5f5;
  58. border: none;
  59. border-radius: 5px;
  60. margin-right: 10px;
  61. }
  62. #send-button {
  63. padding: 10px 20px;
  64. font-size: 18px;
  65. background-color: #4CAF50;
  66. color: white;
  67. border: none;
  68. border-radius: 5px;
  69. cursor: pointer;
  70. }
  71. #send-button:hover {
  72. background-color: #45a049;
  73. }
  74. #voice-button {
  75. padding: 10px 20px;
  76. font-size: 18px;
  77. background-color: #4CAF50;
  78. color: white;
  79. border: none;
  80. border-radius: 5px;
  81. cursor: pointer;
  82. }
  83. #voice-button:hover {
  84. background-color: #4569a0;
  85. }
  86. .input-pattern::before {
  87. content: "";
  88. position: absolute;
  89. width: 100%;
  90. height: 100%;
  91. background-image: url("../img.png");
  92. opacity: 0.1;
  93. pointer-events: none;
  94. z-index: -1;
  95. }
  96. </style>
  97. </head>
  98. <body>
  99. <div class="container">
  100. <h1>标题</h1>
  101. <div class="chat-window">
  102. <div id="chat-container"></div>
  103. </div>
  104. <form id="chat-form">
  105. <div class="input-pattern">
  106. <input type="text" id="prompt-input" placeholder="输入消息">
  107. </div>
  108. <button type="button" id="voice-button">语音输入</button> <!-- 新增语音按钮 -->
  109. <button type="submit" id="send-button">发送</button>
  110. </form>
  111. </div>
  112. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  113. <script>
  114. $(document).ready(function () {
  115. var recognition;
  116. $('#chat-form').on('submit', function (e) {
  117. e.preventDefault();
  118. var prompt = $('#prompt-input').val();
  119. sendRequest(prompt);
  120. $('#prompt-input').val('');
  121. });
  122. $('#voice-button').on('mousedown', function () {
  123. startSpeechRecognition();
  124. });
  125. $('#voice-button').on('mouseup', function () {
  126. stopSpeechRecognition();
  127. });
  128. function startSpeechRecognition() {
  129. recognition = new webkitSpeechRecognition() || new speechRecognition();
  130. recognition.lang = 'zh-CN';
  131. recognition.start();
  132. recognition.onresult = function (event) {
  133. var result = event.results[0][0].transcript;
  134. $('#prompt-input').val(result);
  135. };
  136. }
  137. function stopSpeechRecognition() {
  138. if (recognition) {
  139. recognition.stop();
  140. }
  141. }
  142. function sendRequest(prompt) {
  143. addMessage('user', prompt);
  144. $.ajax({
  145. url: '/submit',
  146. method: 'POST',
  147. data: { prompt: prompt },
  148. success: function (response) {
  149. addMessage('bot', response.content);
  150. speak(response.content); // 将机器人回答进行语音输出
  151. }
  152. });
  153. }
  154. function speak(text) {
  155. var utterance = new SpeechSynthesisUtterance(text);
  156. utterance.lang = 'zh-CN';
  157. speechSynthesis.speak(utterance);
  158. }
  159. function addMessage(role, content) {
  160. var chatContainer = $('#chat-container');
  161. var messageDiv = $('<div>').addClass('chat-box');
  162. var message = $('<div>').addClass('message').text(content.trim()); // 清洁处理文本
  163. if (role === 'user') {
  164. messageDiv.addClass('user-message');
  165. messageDiv.append($('<div>').addClass('user-avatar'));
  166. messageDiv.append(message);
  167. } else {
  168. messageDiv.addClass('bot-message');
  169. messageDiv.append(message);
  170. messageDiv.append($('<div>').addClass('bot-avatar'));
  171. }
  172. messageDiv.append($('<div>').addClass('clear'));
  173. chatContainer.append(messageDiv);
  174. chatContainer.scrollTop(chatContainer[0].scrollHeight);
  175. }
  176. });
  177. </script>
  178. </body>
  179. </html>

 

作者新尝试调用大模型,如有错误拜托大家及时联系,希望能帮到大家

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/937328
推荐阅读
相关标签
  

闽ICP备14008679号