You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
256 lines
9.3 KiB
256 lines
9.3 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|
<meta http-equiv="Expires" content="0" />
|
|
<link rel="stylesheet" type="text/css" href="css/libs/reset.css">
|
|
<link rel="stylesheet" type="text/css" href="css/common.css">
|
|
<link rel="stylesheet" type="text/css" href="css/index.css">
|
|
<title>AI数字人</title>
|
|
<!--[if lt IE 9]>
|
|
<script src="js/html5shiv.js"></script>
|
|
<script src="js/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<div class="ai-wrapper">
|
|
<video class="ai-bg" src="images/bg2.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
|
|
<div class="ai-header-wrapper">
|
|
<div class="ai-header">
|
|
<div class="header-left">
|
|
<div class="header-btn header-home" onclick="window.location.href='index.html'; return false;"><span></span><p>首页</p></div>
|
|
</div>
|
|
<div class="header-title">
|
|
<h2>AI数字人</h2>
|
|
</div>
|
|
<div class="header-btn header-login"><span></span><p>登录</p></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-wrapper">
|
|
<div class="chat-content">
|
|
</div>
|
|
<div class="chat-send">
|
|
<textarea cols="50" rows="7" placeholder="请输入你想咨询的问题"></textarea>
|
|
<!-- <div class="send-button">send</div> -->
|
|
<div class="send-button-container">
|
|
<span class="send-button">发送</span>
|
|
<!-- <input type="button" value="发送" class="send-button"> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 账号：admin 密码：83560792 -->
|
|
<!-- 登录 -->
|
|
<div id="form-layer" class="layer-login" style="display: none;">
|
|
<h3>账号登录</h3>
|
|
<ul class="login-form">
|
|
<li>
|
|
<p>账号</p>
|
|
<input type="text" placeholder="请输入账号" />
|
|
</li>
|
|
<li>
|
|
<p>密码</p>
|
|
<input type="password" placeholder="请输入密码" />
|
|
</li>
|
|
</ul>
|
|
<button type="submit" class="login-submit" id="btn-submit-form">立即登录</button>
|
|
</div>
|
|
<!-- 用户信息 -->
|
|
<div id="user-layer" class="layer-login" style="display: none;">
|
|
<div class="user-info">
|
|
<img src="images/index-img2.png" alt="" />
|
|
<p class="user-name">Admin</p>
|
|
<ul class="user-other">
|
|
<li>
|
|
<p>8个</p>
|
|
<span>代码上传</span>
|
|
</li>
|
|
<li>
|
|
<p>100</p>
|
|
<span>积分</span>
|
|
</li>
|
|
<li>
|
|
<p>10</p>
|
|
<span>获赞</span>
|
|
</li>
|
|
</ul>
|
|
<div class="change-accout-btn">切换账号</div>
|
|
</div>
|
|
</div>
|
|
<!-- 微信登录 -->
|
|
<div id="wechat-layer" class="layer-login" style="display: none;">
|
|
<h3>账号登录</h3>
|
|
<div class="wechat-login">
|
|
<img src="images/wechat.png" alt="" />
|
|
<span>请使用微信扫描二维码登录</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript" src="js/libs/jquery-3.7.1.min.js"></script>
|
|
<!-- 弹出框 -->
|
|
<script type="text/javascript" src="js/libs/layer/layer.js"></script>
|
|
<script type="text/javascript" src="js/libs/flexible.js"></script>
|
|
<script type="text/javascript" src="js/index.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
const $sendButton = $('.send-button');
|
|
const $textArea = $('.chat-send textarea');
|
|
const $chatContent = $('.chat-content');
|
|
|
|
let isBotReplying = false;
|
|
let isBotTyping = false;
|
|
|
|
// 默认进来AI数字人发送欢迎消息
|
|
function sendWelcomeMessage() {
|
|
const welcomeMessage = '您好！请问有什么问题可以帮您解答吗？';
|
|
appendMessage(welcomeMessage, false, false, true);
|
|
}
|
|
sendWelcomeMessage();
|
|
|
|
// 初始化时检查按钮状态
|
|
updateSendButtonState();
|
|
function updateSendButtonState() {
|
|
const message = $textArea.val().trim();
|
|
// && !isBotReplying && !isBotTyping
|
|
if (message) {
|
|
$sendButton.prop('disabled', false).removeClass('send-disabled-button');
|
|
} else {
|
|
$sendButton.prop('disabled', true).addClass('send-disabled-button');
|
|
}
|
|
}
|
|
|
|
// 当 textarea 内容变化时更新按钮状态
|
|
$textArea.on('input', function() {
|
|
updateSendButtonState();
|
|
});
|
|
|
|
// 发送消息并接收机器人的回复
|
|
$sendButton.click(function() {
|
|
if (!isBotReplying && !isBotTyping) {
|
|
const message = $textArea.val().trim();
|
|
if (message) {
|
|
appendMessage(message, true, false);
|
|
$textArea.val('');
|
|
$sendButton.prop('disabled', true).addClass('send-disabled-button');
|
|
|
|
// loading
|
|
appendMessage('', false, true);
|
|
isBotReplying = true;
|
|
|
|
$.ajax({
|
|
url: 'http://192.168.99.86:3001/api/v1/workspace/dxhtsg/chat',
|
|
type: 'POST',
|
|
headers: {
|
|
'Authorization': 'Bearer XVSPT0T-6P54SZH-QP36QKJ-KK77TN6'
|
|
},
|
|
contentType:'application/json',
|
|
dataType: "json",
|
|
data: JSON.stringify({
|
|
'message': message,
|
|
'mode':'chat'
|
|
}),
|
|
success: function (res) {
|
|
$('.loading').parent().remove();
|
|
const botReply = res.textResponse.replace(/\【(\/)?SYS\】/gi, '飞天智能AI小助手');
|
|
// const botReply = res.textResponse.replace(/【(.*?)】/g, function(match, p1) {
|
|
// return '【飞天智能AI小助手】';
|
|
// });
|
|
console.log(botReply);
|
|
// 添加完整的机器人回复
|
|
appendMessage('', false, false);
|
|
isBotTyping = true;
|
|
let i = 0;
|
|
const speed = 50; // 每个字符的打字速度，单位：毫秒
|
|
|
|
typeWriter();
|
|
function typeWriter() {
|
|
if (!isBotTyping) {
|
|
// 如果isBotReplying为false，则停止打字
|
|
return;
|
|
}
|
|
if (i < botReply.length) {
|
|
$chatContent.find('.bot-message:last-child p').append(botReply.charAt(i));
|
|
i++;
|
|
setTimeout(typeWriter, speed);
|
|
$chatContent.scrollTop($chatContent[0].scrollHeight);
|
|
} else {
|
|
// 完成打字后更新状态
|
|
isBotTyping = false;
|
|
isBotReplying = false;
|
|
$('#stop-btn').remove()
|
|
}
|
|
}
|
|
},
|
|
error: function (err) {
|
|
console.log(err);
|
|
}
|
|
});
|
|
}
|
|
} else if (isBotTyping) {
|
|
console.log('isBotTyping',isBotTyping)
|
|
// 输入中
|
|
layer.msg('请等待当前对话完成，稍后再试。', {
|
|
offset: 50,
|
|
anim: 6
|
|
});
|
|
} else if (isBotReplying) {
|
|
// loading中
|
|
layer.msg('请等待当前对话完成，稍后再试。', {
|
|
offset: 50,
|
|
anim: 6
|
|
});
|
|
}
|
|
});
|
|
|
|
// 回车键发送消息
|
|
$textArea.keypress(function(event) {
|
|
if (event.which === 13) {
|
|
event.preventDefault(); // 防止默认换行行为
|
|
$sendButton.click();
|
|
}
|
|
});
|
|
|
|
function appendMessage(content, isUserMessage, isLoading, isWelcomeMessage) {
|
|
const className = isUserMessage ? 'user-message' : 'bot-message';
|
|
// const avatarSrc = isUserMessage ? 'images/other/pic1.jpg' : 'images/other/pic2.jpg';
|
|
let messageContent
|
|
|
|
if (isLoading) {
|
|
messageContent = '<p class="loading"><img src="images/loading.webp" alt="" /></p>';
|
|
} else {
|
|
// 当isUserMessage为false时，才添加<span>停止输出</span>
|
|
messageContent = isUserMessage
|
|
? `<p>${content}</p>`
|
|
: isWelcomeMessage
|
|
? `<p>${content}</p>` // 如果是欢迎消息，即使isUserMessage为false，也不添加<span>停止输出</span>
|
|
: `<p>${content}<span id="stop-btn">停止输出</span></p>`;
|
|
}
|
|
|
|
// const messageHtml = `
|
|
// <div class="chat-message ${className}">
|
|
// ${messageContent}
|
|
// <img src="${avatarSrc}" alt="${isUserMessage ? '用户' : 'AI数字人'}">
|
|
// </div>`;
|
|
|
|
const messageHtml = `
|
|
<div class="chat-message ${className}">
|
|
${messageContent}
|
|
</div>`;
|
|
$chatContent.append(messageHtml);
|
|
$chatContent.scrollTop($chatContent[0].scrollHeight);
|
|
|
|
$('#stop-btn').click(function() {
|
|
isBotTyping = false;
|
|
isBotReplying = false;
|
|
$(this).removeAttr('id').addClass('remove-btn').html('用户取消')
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</html>
|