commit
337f64bde9
1 changed files with 200 additions and 0 deletions
-
200ai_chat.html
@ -0,0 +1,200 @@ |
|||||
|
<!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/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video> |
||||
|
<div class="ai-header-wrapper"> |
||||
|
<div class="ai-header"> |
||||
|
<div class="header-btn header-home" onclick="history.go(-1); return false;"><span></span><p>首页</p></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"></textarea> |
||||
|
<!-- <div class="send-button">send</div> --> |
||||
|
<div class="send-button-container"> |
||||
|
<input type="button" value="发送" class="send-button"> |
||||
|
</div> |
||||
|
</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> |
||||
|
$(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/other/loading.png" alt="loading"></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> |
||||
|
`; |
||||
|
$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> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue