2024-04-30 20:16:57 +08:00
<!DOCTYPE html>
< html >
< head >
2024-05-22 14:03:56 +08:00
< meta name = "renderer" content = "webkit" / >
< meta name = "force-rendering" content = "webkit" / >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" / >
< meta charset = "UTF-8" / >
< meta name = "viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover"/>
2024-05-21 17:20:01 +08:00
< title > AI 文本助手< / title >
2024-04-30 20:16:57 +08:00
< style >
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
}
.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 >
< / head >
< body >
< div class = "container" >
< div class = "left-panel" >
2024-05-21 17:18:47 +08:00
< h2 > AI文本助手< / h2 >
2024-04-30 20:16:57 +08:00
< h3 > 常用问题< / h3 >
2024-05-21 17:18:47 +08:00
< div class = "recommendation" > Java 21有什么新特性< / div >
2024-05-21 17:20:01 +08:00
< div class = "recommendation" > 红烧肉怎么做< / div >
2024-04-30 20:16:57 +08:00
< / 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()"
2024-05-21 17:18:47 +08:00
class="submit-button">clear
2024-04-30 20:16:57 +08:00
< / button >
< / div >
< / div >
< / div >
2024-05-20 10:53:40 +08:00
< script type = "text/javascript" src = "https://code.jquery.com/jquery-3.7.0.min.js" > < / script >
2024-05-22 14:03:56 +08:00
< 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 >
2024-04-30 20:16:57 +08:00
< script >
2024-05-21 17:18:47 +08:00
/*! @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 */
2024-04-30 20:16:57 +08:00
// 添加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
2024-05-20 10:19:46 +08:00
function chatApi(msg) {
2024-04-30 20:16:57 +08:00
slideBottom();
2024-05-20 10:19:46 +08:00
2024-05-20 11:18:28 +08:00
// messagesList.push({role: "user", content: msg});
2024-05-22 17:45:49 +08:00
const body = JSON.stringify({ "prompt": msg});
2024-05-20 10:19:46 +08:00
// alert(body)
2024-04-30 20:16:57 +08:00
$.ajax({
2024-05-20 10:19:46 +08:00
method: 'POST',
2024-05-22 17:45:49 +08:00
url: '/v1/ai/completionsTest',
2024-05-20 10:19:46 +08:00
headers: {
'Content-Type': 'application/json',
},
data: body,
2024-04-30 20:16:57 +08:00
success: function (res) {
2024-05-22 17:45:49 +08:00
// 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("服务接口调用错误。");
}
2024-04-30 20:16:57 +08:00
},
error: function (e) {
addAIMessage("服务接口调用异常。");
}
});
}
// 发送消息
function sendMessage() {
let userInput = $('#user-input');
let userMessage = userInput.val();
if (userMessage.trim() === '') {
return;
}
userInput.val("");
addUserMessage(userMessage);
chatApi(userMessage);
}
// 清空聊天记录
function clearChat() {
$("#chat-log").empty();
addAIMessage("你好，请输入你想问的问题。");
}
// 初始化
function init() {
addAIMessage("你好，请输入你想问的问题。");
2024-05-21 18:31:32 +08:00
let submit = $("#submit");
let userInput = $("#user-input");
let focus = false;
2024-04-30 20:16:57 +08:00
// 监听输入框焦点
userInput.focus(function () {
focus = true;
}).blur(function () {
focus = false;
});
// 回车监听事件
document.addEventListener("keydown", function (event) {
2024-05-20 11:18:28 +08:00
if (event.key === 'Enter') {
2024-04-30 20:16:57 +08:00
console.log(focus);
if (focus) {
submit.click();
}
}
});
}
init();
< / script >
< / body >
< / html >
