to:sync
This commit is contained in:
shaoyongjun
parent
b7bca018e3
commit
9ee3c97bb3
@ -98,6 +98,36 @@
|
|||||||
.myheader-item {
|
.myheader-item {
|
||||||
margin: 1rem 2rem;
|
margin: 1rem 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cha {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin: auto;
|
||||||
|
position: relative;
|
||||||
|
left: calc(50% - 2.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cha::before,
|
||||||
|
.cha::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
/*方便进行定位*/
|
||||||
|
height: 20px;
|
||||||
|
width: 1.5px;
|
||||||
|
top: 2px;
|
||||||
|
right: 9px;
|
||||||
|
/*设置top和right使图像在20*20框中居中*/
|
||||||
|
background: #10100f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cha::before {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
/*进行旋转*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.cha::after {
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -108,6 +138,9 @@
|
|||||||
<div id="myMaskContent" style="display: none;">
|
<div id="myMaskContent" style="display: none;">
|
||||||
<div id="myMask"><!-- 这是遮罩层 --></div>
|
<div id="myMask"><!-- 这是遮罩层 --></div>
|
||||||
<div class="myPopWindow4Login">
|
<div class="myPopWindow4Login">
|
||||||
|
<p>
|
||||||
|
<div class="cha" style="align-self: flex-end;" onclick="exitToMyLogin()"></div>
|
||||||
|
</p>
|
||||||
<h1>账号登录</h1>
|
<h1>账号登录</h1>
|
||||||
<form method="post" autocomplete="off" onsubmit="return false">
|
<form method="post" autocomplete="off" onsubmit="return false">
|
||||||
<p>
|
<p>
|
||||||
@ -189,7 +222,261 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section style="min-height: 800px; background-color: #f8f7fa;">
|
<section style="min-height: 800px; background-color: #f8f7fa;">
|
||||||
<iframe src="ai-chat1.html"></iframe>
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
height: 90vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-panel {
|
||||||
|
flex: 15%;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-panel {
|
||||||
|
flex: 85%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-log {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-bubble {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-bubble {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-content {
|
||||||
|
padding: 10px 15px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-bubble .bubble-content {
|
||||||
|
background-color: #d6eaff;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-bubble .bubble-content {
|
||||||
|
background-color: #e5ece7;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-area {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-text {
|
||||||
|
flex: 1;
|
||||||
|
padding: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-button {
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #2196f3;
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border: 1px solid #000;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
table td, table th {
|
||||||
|
border: 1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
table td, table th {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-sql {
|
||||||
|
width: 95%;
|
||||||
|
background-color: #F6F6F6;
|
||||||
|
padding: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 5px;
|
||||||
|
word-wrap: break-word;
|
||||||
|
white-space: pre-line;
|
||||||
|
/* overflow-wrap: break-word; */
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
border: 2px solid #6089a4;
|
||||||
|
font-size: 15px;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.recommendation{
|
||||||
|
color: #1c4cf3;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<div class="container">
|
||||||
|
<!-- <div class="left-panel">-->
|
||||||
|
<!-- <h2>AI文本助手</h2>-->
|
||||||
|
<!-- <h3>常用问题</h3>-->
|
||||||
|
<!-- <div class="recommendation">Java 21有什么新特性</div>-->
|
||||||
|
<!-- <div class="recommendation">红烧肉怎么做</div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<div class="right-panel">
|
||||||
|
<div class="chat-log" id="chat-log">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="input-area">
|
||||||
|
<input type="text" id="user-input" class="input-text" placeholder="请输入您的问题,回车或点击发送确定。">
|
||||||
|
<button id="submit" style="margin-left: 10px;width: 100px" onclick="sendMessage()" class="submit-button">
|
||||||
|
发送
|
||||||
|
</button>
|
||||||
|
<button style="margin-left: 20px;width: 100px;background-color: red" onclick="clearChat()"
|
||||||
|
class="submit-button">clear
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
|
||||||
|
<script>
|
||||||
|
/*! @license DOMPurify 3.0.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.5/LICENSE */
|
||||||
|
|
||||||
|
// 添加AI信息
|
||||||
|
function addAIMessage(message) {
|
||||||
|
$("#chat-log").append(
|
||||||
|
"<div class=\"chat-bubble ai-bubble\">\n" +
|
||||||
|
" <div class=\"bubble-content\">" + message + "</div>\n" +
|
||||||
|
"</div>"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加人类信息
|
||||||
|
function addUserMessage(message) {
|
||||||
|
$("#chat-log").append(
|
||||||
|
"<div class=\"chat-bubble user-bubble\">\n" +
|
||||||
|
" <div class=\"bubble-content\">" + message + "</div>\n" +
|
||||||
|
"</div>"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 滑动到底部
|
||||||
|
function slideBottom() {
|
||||||
|
let chatlog = document.getElementById("chat-log");
|
||||||
|
chatlog.scrollTop = chatlog.scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调用api
|
||||||
|
function chatApi(msg) {
|
||||||
|
slideBottom();
|
||||||
|
|
||||||
|
// messagesList.push({role: "user", content: msg});
|
||||||
|
const body = JSON.stringify({ "prompt": msg});
|
||||||
|
// alert(body)
|
||||||
|
$.ajax({
|
||||||
|
method: 'POST',
|
||||||
|
url: '/v1/ai/completionsTest',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
data: body,
|
||||||
|
success: function (res) {
|
||||||
|
// let res1=res?.choices[0]?.message?.content;
|
||||||
|
// res1 = DOMPurify.sanitize(marked.parse(res1));
|
||||||
|
// addAIMessage(res1);
|
||||||
|
|
||||||
|
if (res.code === 0) {
|
||||||
|
let answer = res.data;
|
||||||
|
// answer = marked.parse(answer);
|
||||||
|
answer = DOMPurify.sanitize(marked.parse(answer));
|
||||||
|
addAIMessage(answer);
|
||||||
|
// messageHistory = res.history;
|
||||||
|
} else {
|
||||||
|
addAIMessage("服务接口调用错误。");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: function (e) {
|
||||||
|
addAIMessage("服务接口调用异常。");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 发送消息
|
||||||
|
function sendMessage() {
|
||||||
|
let userInput = $('#user-input');
|
||||||
|
let userMessage = userInput.val();
|
||||||
|
if (userMessage.trim() === '') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
userInput.val("");
|
||||||
|
|
||||||
|
// answer = DOMPurify.sanitize(marked.parse(userMessage));
|
||||||
|
|
||||||
|
addUserMessage(DOMPurify.sanitize(marked.parse(userMessage)));
|
||||||
|
chatApi(userMessage);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清空聊天记录
|
||||||
|
function clearChat() {
|
||||||
|
$("#chat-log").empty();
|
||||||
|
addAIMessage("你好，请输入你想问的问题。");
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
function init() {
|
||||||
|
addAIMessage("你好，请输入你想问的问题。");
|
||||||
|
let submit = $("#submit");
|
||||||
|
let userInput = $("#user-input");
|
||||||
|
let focus = false;
|
||||||
|
// 监听输入框焦点
|
||||||
|
userInput.focus(function () {
|
||||||
|
focus = true;
|
||||||
|
}).blur(function () {
|
||||||
|
focus = false;
|
||||||
|
});
|
||||||
|
// 回车监听事件
|
||||||
|
document.addEventListener("keydown", function (event) {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
console.log(focus);
|
||||||
|
if (focus) {
|
||||||
|
submit.click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
init();
|
||||||
|
</script>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer style="display: flex; justify-content:center; height: 80%; font-size: 1.5rem; background-color:black;">
|
<footer style="display: flex; justify-content:center; height: 80%; font-size: 1.5rem; background-color:black;">
|
||||||
@ -232,6 +519,10 @@
|
|||||||
document.getElementById("myMaskContent").style.display = "block"
|
document.getElementById("myMaskContent").style.display = "block"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function exitToMyLogin(){
|
||||||
|
document.getElementById("myMaskContent").style.display = "none"
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
function goToMyLogout() {
|
function goToMyLogout() {
|
||||||
let myTag4show = document.getElementById("myInfo").getAttribute('myTag4show')
|
let myTag4show = document.getElementById("myInfo").getAttribute('myTag4show')
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user