235 lines
7.3 KiB
HTML
235 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>控制面板</title>
|
|
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.13/theme-chalk/index.min.css">
|
|
<script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/element-ui/2.15.13/index.js"></script>
|
|
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
|
|
<style>
|
|
*{
|
|
margin:0px;
|
|
padding: 0px;
|
|
}
|
|
body{
|
|
font-size: 14px;
|
|
}
|
|
a{
|
|
color: #409EFF;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
#app{
|
|
height: 100vh;
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
.chatpdfBox{
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
background: linear-gradient(to bottom right,#dbe6fb, #f3f4f8);
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
}
|
|
.chatpdfHeader{
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
.chatpdfLine{
|
|
flex: 1;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
.chatpdfLine h1{
|
|
color: #111111;
|
|
text-align: center;
|
|
margin-top: 80px;
|
|
margin-bottom: 20px;
|
|
font-size: 36px;
|
|
}
|
|
.chatpdfLine h2{
|
|
color: #1e1e1e;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
}
|
|
.chatpdfLineScroll{
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
.chatpdfRow{
|
|
margin: 20px 10px;
|
|
display: flex;
|
|
}
|
|
.chatpdfAsk{
|
|
justify-content: flex-end;
|
|
}
|
|
.chatpdfContent{
|
|
line-height: 23px;
|
|
display: inline-block;
|
|
border-radius: 8px;
|
|
padding: 12px 15px;
|
|
max-width: 700px;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
font-size: 14px;
|
|
box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16);
|
|
}
|
|
.chatpdfAsk .chatpdfContent{
|
|
background: linear-gradient(90deg, #2870EA 10.79%, #1B4AEF 87.08%);;
|
|
color: #fff;
|
|
}
|
|
.chatpdfContent pre{
|
|
padding: 10px;
|
|
}
|
|
.chatpdfArea{
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
width: 98%;
|
|
margin-bottom: 15px;
|
|
transition: all 0.3s,height 0s;
|
|
|
|
}
|
|
.chatpdfArea textarea{
|
|
flex: 1;
|
|
border: none;
|
|
resize: none;
|
|
outline: none;
|
|
padding: 0px 5px;
|
|
height: 40px;
|
|
line-height: 35px;
|
|
color: #404040;
|
|
border-radius: 10px;
|
|
box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.08);
|
|
}
|
|
.chatpdfArea:hover{
|
|
border-color: #4096ff;
|
|
}
|
|
.chatpdfArea button{
|
|
height: 40px;
|
|
color: #fff;
|
|
background: linear-gradient(90deg, #1B4AEF 10.79%, #2870EA 87.08%);
|
|
box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
|
|
border: none;
|
|
padding: 0 20px;
|
|
border-radius: 15px;
|
|
cursor: pointer;
|
|
box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.08);
|
|
margin-right: 10px;
|
|
}
|
|
.chatpdfArea button:hover{
|
|
background-color: #388aff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<template>
|
|
|
|
<div class="chatpdfBox">
|
|
<div class="chatpdfLine">
|
|
<div class="chatpdfLineScroll">
|
|
<h1>欢迎使用知识库AI</h1>
|
|
<h2>由 AI 支持的知识库AI机器人</h2>
|
|
<div class="chatpdfRow " v-bind:class="{'chatpdfAsk': item.type=='ask'}" v-for="(item,index) in msgList">
|
|
<div class="chatpdfContent" v-html="item.content"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chatpdfArea">
|
|
<textarea @keydown.prevent.enter="sendAsk" v-model="askContent"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
const collectName="";
|
|
new Vue({
|
|
el: '#app',
|
|
delimiters:["<{","}>"],
|
|
data: {
|
|
points:[],
|
|
id:"",
|
|
text:"",
|
|
loading:null,
|
|
article:{
|
|
dialog:false,
|
|
id:"",
|
|
content:"",
|
|
},
|
|
fileList:[],
|
|
activeTab:"",
|
|
fileId:"",
|
|
askContent:"",
|
|
msgList:[
|
|
{type:"ask",content:"自建私有数据知识库 · 与知识库AI聊天"},
|
|
{type:"answer",content:"我是知识库机器人，一个专门响应人类指令的大模型"},
|
|
],
|
|
},
|
|
methods: {
|
|
|
|
trim(str, char) {
|
|
if (char) {
|
|
str=str.replace(new RegExp('^\\'+char+'+|\\'+char+'+$', 'g'), '');
|
|
}
|
|
return str.replace(/^\s+|\s+$/g, '');
|
|
},
|
|
sendAsk(){
|
|
if(this.askContent=="") return;
|
|
let msg={
|
|
'type':'ask',
|
|
'content':this.askContent,
|
|
}
|
|
this.msgList.push(msg);
|
|
let data=JSON.stringify(this.msgList);
|
|
localStorage.setItem("data_"+this.collect,data);
|
|
this.scrollBottom();
|
|
this.getReplyFromApi();
|
|
},
|
|
getReplyFromApi(){
|
|
let _this=this;
|
|
let msg={
|
|
'type':'answer',
|
|
'content':"正在为你生成答案...",
|
|
}
|
|
_this.msgList.push(msg);
|
|
let i=0;
|
|
var xhr = new XMLHttpRequest();
|
|
let system="假设你是一个文档，你必须根据提供的知识信息回答问题，对于与知识信息无关的问题，你应拒绝并告知用户\"对不起，没有查询到相关内容\"";
|
|
xhr.open("GET", collectName+"searchStream?keywords="+_this.askContent+"&system="+system);
|
|
xhr.setRequestHeader("Content-Type", "text/html");
|
|
xhr.onprogress = function(event) {
|
|
console.log(i,event.currentTarget.responseText);
|
|
_this.msgList[_this.msgList.length-1].content=event.currentTarget.responseText;
|
|
_this.scrollBottom();
|
|
};
|
|
xhr.onreadystatechange = () => {
|
|
};
|
|
xhr.send();
|
|
this.askContent="";
|
|
},
|
|
//滚动到底部
|
|
scrollBottom:function(){
|
|
var _this=this;
|
|
this.$nextTick(function(){
|
|
var container = _this.$el.querySelector(".chatpdfLine");
|
|
container.scrollTop = 999999999;
|
|
});
|
|
},
|
|
},
|
|
mounted:function(){
|
|
},
|
|
created: function () {
|
|
}
|
|
})
|
|
</script>
|
|
</html> |