to:sync
This commit is contained in:
shaoyongjun
parent
e618be29ca
commit
f39a7de179
260
static/ai-chat1.html
Normal file
260
static/ai-chat1.html
Normal file
@ -0,0 +1,260 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>AI 聊天对话</title>
|
||||
<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">
|
||||
<h2>智能问答助手</h2>
|
||||
<h3>常用问题</h3>
|
||||
<div class="recommendation">帮我写一个Java快速排序</div>
|
||||
<div class="recommendation">Java 8有什么新特性</div>
|
||||
<div class="recommendation">JVM优化建议</div>
|
||||
<div class="recommendation">内存占用高,如何优化</div>
|
||||
<div class="recommendation">MySQL优化建议</div>
|
||||
<div class="recommendation">MySQL如何查看执行计划</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">清除记录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<script>
|
||||
// 聊天历史记录
|
||||
var messageHistory = [];
|
||||
|
||||
// 添加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(message) {
|
||||
slideBottom();
|
||||
data = {
|
||||
questions: message,
|
||||
history: messageHistory
|
||||
};
|
||||
$.ajax({
|
||||
url: "http://127.0.0.1:8081/assistant",
|
||||
type: "POST",
|
||||
contentType: "application/json",
|
||||
dataType: "json",
|
||||
data: JSON.stringify(data),
|
||||
success: function (res) {
|
||||
if (res.code === 200) {
|
||||
let answer = res.answer;
|
||||
answer = 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("");
|
||||
addUserMessage(userMessage);
|
||||
chatApi(userMessage);
|
||||
}
|
||||
|
||||
// 清空聊天记录
|
||||
function clearChat() {
|
||||
$("#chat-log").empty();
|
||||
messageHistory = [];
|
||||
addAIMessage("你好，请输入你想问的问题。");
|
||||
}
|
||||
|
||||
// 初始化
|
||||
function init() {
|
||||
addAIMessage("你好，请输入你想问的问题。");
|
||||
var submit = $("#submit");
|
||||
var userInput = $("#user-input");
|
||||
var focus = false;
|
||||
// 监听输入框焦点
|
||||
userInput.focus(function () {
|
||||
focus = true;
|
||||
}).blur(function () {
|
||||
focus = false;
|
||||
});
|
||||
// 回车监听事件
|
||||
document.addEventListener("keydown", function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
console.log(focus);
|
||||
if (focus) {
|
||||
submit.click();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
init();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user