网站安全防护找谁做,都匀网站建设公司,电子商务网站建设课设心得体会,资源网站哪个好一、需求
公司想要在页面中加入AI智能对话功能#xff0c;故查找免费gpt接口#xff0c;最终决定百度千帆大模型#xff08;进入官网、官方文档中心#xff09;#xff1b;
二、主要功能列举
AI智能对话#xff1b;记录上下文回答环境#xff1b;折叠/展开窗口#…一、需求
公司想要在页面中加入AI智能对话功能故查找免费gpt接口最终决定百度千帆大模型进入官网、官方文档中心
二、主要功能列举
AI智能对话记录上下文回答环境折叠/展开窗口可提前中止回答回答内容逐字展示并语音播报
三、效果图 四、技术选型
1、前端环境
node14.21.3VueCli 2element-ui^2.15.14axiosnode-sass^4.14.1sass-loader^7.3.1js-md5^0.8.3
2、后端环境
JDK8springboot
五、声明
本文章以及源码纯粹自己写着玩等于是个demo有许多需要完善和优化的地方仅供大家参考有错误的地方欢迎大家批评指正~~由于作者其实是java所以前端代码中如果看到神奇的地方希望大家包涵哈哈哈哈
四、百度千帆大模型应用创建
1、访问官网注册账号并登录
2、选择“应用接入”-“创建应用” 进去填一个应用名及描述即可服务默认全勾选上
3、保存后返回应用列表获取api key和secret key PS
百度提供的大模型服务有好多种我此处是白嫖的其中一个免费的如下图 其中ERNIE开头的是百度自己的文心一言用的就是这种其他有些是三方大模型
具体不同服务之间有什么区别可以看官方介绍个人觉得免费的几个主要在于轻量等级、响应速度、回答内容复杂程度、可保存的上下文大小等几个方面
五、部分后台代码
1、官网下载java sdk或者引入百度千帆pom
官放文档地址https://cloud.baidu.com/doc/WENXINWORKSHOP/s/7ltgucw50 java SDK地址https://github.com/baidubce/bce-qianfan-sdk/tree/main/java maven仓库地址https://mvnrepository.com/artifact/com.baidubce/qianfan
POM
!-- https://mvnrepository.com/artifact/com.baidubce/qianfan --
dependencygroupIdcom.baidubce/groupIdartifactIdqianfan/artifactIdversion0.0.4/version
/dependency2、创建springboot项目并导入sdk或引入千帆pom
此处是把sdk导入到工程中
3、项目代码结构如下 pom.xml
project xmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersiongroupIdcom.baidu/groupIdartifactIdaichat/artifactIdversion0.0.1-SNAPSHOT/versionpackagingwar/packagingnameaichat/nameparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion2.5.9/version/parentdependencies!-- SpringBoot的依赖配置 --dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-dependencies/artifactIdversion2.2.13.RELEASE/versiontypepom/typescopeimport/scope/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdjunit/groupIdartifactIdjunit/artifactIdversion3.8.1/versionscopetest/scope/dependencydependencygroupIdorg.apache.commons/groupIdartifactIdcommons-lang3/artifactId/dependencydependencygroupIdcom.google.code.gson/groupIdartifactIdgson/artifactIdversion2.10.1/version/dependencydependencygroupIdorg.apache.httpcomponents.client5/groupIdartifactIdhttpclient5/artifactIdversion5.3.1/version/dependency/dependenciesbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactIdversion2.1.1.RELEASE/versionconfigurationforktrue/fork !-- 如果没有该配置devtools不会生效 --/configurationexecutionsexecutiongoalsgoalrepackage/goal/goals/execution/executions/pluginplugingroupIdorg.apache.maven.plugins/groupIdartifactIdmaven-war-plugin/artifactIdversion3.1.0/versionconfigurationfailOnMissingWebXmlfalse/failOnMissingWebXmlwarName${project.artifactId}/warName/configuration/plugin/pluginsfinalName${project.artifactId}/finalName/build/projectAiChatController.java
package com.baidubce.controller;import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;import org.apache.commons.lang3.StringUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;import com.baidubce.qianfan.Qianfan;
import com.baidubce.qianfan.core.builder.ChatBuilder;
import com.baidubce.qianfan.model.chat.ChatResponse;
import com.baidubce.qianfan.model.chat.Message;
import com.baidubce.utils.JsonUtils;
import com.baidubce.utils.SecUtils;RestController
public class AiChatController {private static final String accessKey 你创建的应用的API Key;private static final String secretKey 你创建的应用的Secret Key;private static Qianfan qianfan new Qianfan(OAuth, accessKey, secretKey);/*** 参数* messages: 对话记录roleuser是用户assistant是AI如[{role:user,content:1},{role:assistant,content:“1”是一个数字。},{role:user,content:你是},{role:assistant,content:}]* timestamp请求毫秒值1717742825695* signature: 签名4bc9c3b8dbe4de5bc924b6fa0506c606* author x轩* version 2024年6月7日 下午2:46:32*/PostMapping(/sendMsg)public String sendMsg(RequestBody MapString, Object params) {// 验签我自己加的防止恶意调用作用不大提高门槛而已if(!checkSign(params)) {return 签名不正确;}String result null;try {result chat(String.valueOf(params.get(messages)));} catch (Exception e) {e.printStackTrace();return 接口繁忙请稍后再试;}return result;}/*** 参数* messages: 业务参数* timestamp请求毫秒值* signature: 签名* * 加签规则* 要求1timestamp和当前系统时间不能超过5秒钟* 要求2MYCHAT|timestamp|messages拼接后MD53次加密** author x轩* version 2024年6月6日 下午4:13:03*/private boolean checkSign(MapString, Object params) {String timestamp String.valueOf(params.get(timestamp));String messages String.valueOf(params.get(messages));String signature String.valueOf(params.get(signature));if(StringUtils.isAnyBlank(timestamp, messages, signature)) {return false;}// 1.判断时间if((System.currentTimeMillis()- Long.valueOf(timestamp))5000) {// 过期return false;}// 2.验签String p MYCHAT|timestamp|messages;String md5of3 SecUtils.encoderByMd5With32Bit(SecUtils.encoderByMd5With32Bit(SecUtils.encoderByMd5With32Bit(p)));if(!signature.equalsIgnoreCase(md5of3)) {return false;}return true;}public static void main(String[] args) {
// chat(对于调休你怎么看);chatStream(介绍一下自己);}private static String chat(String messages) {ChatBuilder bulder qianfan.chatCompletion()
// .model(ERNIE-Speed-128K)
// .model(ERNIE-Speed-8K).model(ERNIE-Tiny-8K);ListMessage messageList JsonUtils.readValues(messages, Message.class);// 过滤一下去除空内容对象messageList messageList.stream().filter(m-{return StringUtils.isNotBlank(m.getContent());}).collect(Collectors.toList());for(Message m : messageList) {bulder.addMessage(m);}ChatResponse response bulder.execute();return response.getResult();}private static void chatStream(String message) {IteratorChatResponse stream qianfan.chatCompletion()
// .model(ERNIE-Speed-128K)
// .model(ERNIE-Speed-8K).model(ERNIE-Tiny-8K).addMessage(user, message).executeStream();while(stream.hasNext()) {System.out.println(stream.next().getResult());}}
}六、 Vue部分代码
1、vue.config.js
const port process.env.port || process.env.npm_config_port || 80 // 端口module.exports {lintOnSave: false,publicPath: /aichat-front,assetsDir: static,// 如果你不需要生产环境的 source map可以将其设置为 false 以加速生产环境构建。productionSourceMap: false,devServer: {host: 0.0.0.0,port: port,open: true,proxy: {[/aichat]: {target: http://127.0.0.1:8080/aichat,changeOrigin: true,pathRewrite: {[^/aichat]: }},},},
}2、App.vue
templatediv idappqian-fan-chat//div
/templatescript
import QianFanChat from ./components/QianFanChatexport default {name: App,components: {QianFanChat}
}
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style
3、/components/QianFanChat组件
templatediv classchat-divdiv v-showshowChatBox classchat-maindiv idmessagediv classmessagedivdiv classitemimg classavatar :srcaiAvatar div classanswerDivp我是AI智能小助手有问题请咨询我吧/p/div/divdiv v-for(item, index) in messageList classitemimg v-ifitem.roleassistant classavatar :srcaiAvatar img v-ifitem.roleuser classavatar :srcuserAvatar div classanswerDivp v-if!item.loading v-htmlitem.content/pp v-else思考中 i classel-icon-loading/i/pa v-ifindexmessageList.length-1 item.roleassistant (loading || speaking) href# clickstopAnswer停止回答/a/div/div/divdiv classsendDivel-input keyup.enter.nativegetAnswer v-modelquestion placeholder输入中医药相关内容搜一搜/el-inputel-button clickgetAnsweri classel-icon-s-promotion/i/el-button/div/divdiv v-showshowChatBox classclose-btn clickshowChatBoxfalsei classel-icon-close/i/divdiv v-show!showChatBox classsmall-window clickshowChatBoxtrueAI问答/div/div
/template
script
const msg new SpeechSynthesisUtterance();import { sendMsg } from /api/aichat;
import { sign } from /utils/securityUtil
import aiAvatar from /assets/images/ai-avatar.jpg;
import userAvatar from /assets/images/user-avatar.jpg;export default {name: QianFanChat,data(){return {showChatBox: false,loading: false,speaking: false,aiAvatar,userAvatar,question:,messageList:[],// 逐字输出 STARTtimer: null,length: 0,index: 0,// 逐字输出 END}},mounted(){},methods: {getAnswer(){if(this.loading){this.$message({type: warning, message:正在回答请耐心等待});return;}if(!this.question.trim()){this.$message({type: warning, message:请输入内容});return;}this.loading true;let tmpQustion this.question;this.question ;this.messageList.push({ role:user, content: tmpQustion, loading: false });this.messageList.push({ role:assistant, content: , loading: true});this.$nextTick((){this.scroll();})let params {messages: JSON.stringify(this.messageList)};params.timestamp new Date().getTime();params.signature sign(params);sendMsg(params).then(res{// 判断loading是否被中断停止回答可中断if(!this.loading){// 点击了“停止回答”return;}// 接口请求完毕替换最后一条内容this.messageList[this.messageList.length-1].loading false;this.index 0;this.length res.length;this.handleSpeak(res);// 一个字一个字给我蹦this.timer setInterval((){if(this.indexthis.length-1){let word res.charAt(this.index);if(word\n){word br}this.messageList[this.messageList.length-1].content word;this.index;}else{// 结束this.loading false;clearInterval(this.timer);}this.scroll();}, 30);})},scroll(){messagediv.scrollTo({top: messagediv.scrollHeight,})},stopAnswer(){this.handleStop();clearInterval(this.timer);this.length 0;this.index 0;this.loading false;// 判断最后一条内容是不是空是则给上默认输出let lastMsg this.messageList[this.messageList.length-1];if(!lastMsg.content){lastMsg.loading false;lastMsg.content 请继续向我提问吧;}},// 语音播报的函数handleSpeak(text) {this.handleStop();this.speaking true;// 处理多音字msg.text text; // 朗读内容msg.lang zh-CN; // 使用的语言:中文 msg.volume 0.5; // 声音音量1 设置将在其中发言的音量。区间范围是0到1默认是1msg.rate 1.6; // 语速1 设置说话的速度。默认值是1范围是0.1到10表示语速的倍数例如2表示正常语速的两倍msg.pitch 1.5; // 音高2 设置说话的音调(音高)。范围从0最小到2最大。默认值为1// msg.voiceURI Google 普通话中国大陆;msg.onstart (e){};msg.onend (e){this.speaking false;};msg.onboundary (e) {}speechSynthesis.speak(msg); // 播放},// 语音停止handleStop(e) {this.speaking false;msg.text e;msg.lang zh-CN;speechSynthesis.cancel(msg);},}
}
/script
style langscss scoped::v-deep {.el-input {width: 270px;input {background-color: rgba(0,0,0,.5);border: none;color: white;}}.el-button {background-color: rgba(0,0,0,.5);border: none;margin-left: 10px;padding: 0 20px;i {font-size: 20px;color: white;}:focus {background-color: rgba(0,0,0,.5);}:hover {background-color: white;i {color: black;}}}}.chat-div {position: absolute;top: 0;left: 0;display: flex;z-index: 99;cursor: pointer;.close-btn {margin-top: 18px;color: white;background-color: rgba(0, 0, 0, .6);height: 30px;width: 30px;text-align: center;line-height: 30px;border-radius: 50%;}.small-window {color: white;margin-top: 18px;padding: 10px;background-color: rgba(16, 168, 129, .8);width: 26px;font-size: 20px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;}}.chat-main {border-radius: 4px;margin: 10px 0;padding: .1rem .1rem;width: 374px;.messagediv {overflow: auto;max-height: 60vh;.item {display: flex;margin-bottom: .1rem;.avatar {width: 40px;height: 40px;}.answerDiv {p {color: white;background-color: rgba(0, 0, 0, .6);padding: 10px;margin: 0 10px;font-size: 16px;border-radius: 6px;text-align: left;}a {cursor: pointer;font-size: 15px;color: red;text-decoration: underline;margin-left: 10px;font-weight: bold;}}}::-webkit-scrollbar {width: 0;}}.sendDiv {display: flex;justify-content: end;margin: 10px 10px 0 0;}}
/style4、/utils/request.js
import axios from axios
import { Notification, MessageBox, Message } from element-uiaxios.defaults.headers[Content-Type] application/json;charsetutf-8
// 创建axios实例
const service axios.create({// axios中请求配置有baseURL选项表示请求URL公共部分baseURL: process.env.VUE_APP_BASE_API,// 超时timeout: 50000
})
// request拦截器
service.interceptors.request.use(config {// get请求映射params参数if (config.method get config.params) {let url config.url ?;for (const propName of Object.keys(config.params)) {const value config.params[propName];var part encodeURIComponent(propName) ;if (value ! null typeof (value) ! undefined) {if (typeof value object) {for (const key of Object.keys(value)) {if (value[key] ! null typeof (value[key]) ! undefined) {let params propName [ key ];let subPart encodeURIComponent(params) ;url subPart encodeURIComponent(value[key]) ;}}} else {url part encodeURIComponent(value) ;}}}url url.slice(0, -1);config.params {};config.url url;}return config
}, error {console.log(error)Promise.reject(error)
})// 响应拦截器
service.interceptors.response.use(res {return res.data;},error {console.log(err error)let { message } error;if (message Network Error) {message 后端接口连接异常;}else if (message.includes(timeout)) {message 系统接口请求超时;}else if (message.includes(Request failed with status code)) {message 系统接口 message.substr(message.length - 3) 异常;}Message({message: message,type: error,duration: 5 * 1000})return Promise.reject(error)}
)export default service
5、/utils/securityUtil.js
PS 由于这个项目不需要登录我又怕接口泄露导致别人恶意调用所以给接口加了个签名具体策略大家可以自定义讲真的没什么用前台加签别人打开调试模式照样可以看到加签策略。。。为了应对这个情况我把前台加签JS给做了个混淆算是增加一下门槛吧还可以禁止用户点击F12和右键事件【具体代码见此篇文章】
// 加签方法方法接收两个参数 timestamp和messages消息JSON字符串返回签名已混淆以下代码具体签名策略如下固定字符串MYCHAT、时间戳、消息体用|拼接后进行3次MD5加密如MYCHAT|1718181053994|[{role:user,content:1},{role:assistant,content:“1”是一个数字。}]
const _0x4e66[MYCHAT,timestamp];const _0x3524function(_0x4e6602,_0x35247b){_0x4e6602_0x4e6602-0x0;let _0x2ee47d_0x4e66[_0x4e6602];return _0x2ee47d;};import _0x50d0de fromjs-md5;export function sign(_0x5c789a){let _0x1bf721|_0x5c789a[_0x3524(0x1)];let _0x202f97|_0x5c789a[messages];let _0x74f806_0x3524(0x0)_0x1bf721_0x202f97;_0x74f806_0x50d0de(_0x74f806);_0x74f806_0x50d0de(_0x74f806);_0x74f806_0x50d0de(_0x74f806);return _0x74f806;}6、/api/aichat.js
import request from /utils/requestexport function sendMsg(data) {return request({url: /sendMsg,method: post,data: data})}有问题或者需要完整项目源码的话私聊吧关机下班底薪到手~
