|
|
<!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>
|
