|
|
<!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/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"> <div class="hot-word"> <span>什么是“人工智能”？</span> <span>什么是“AI大模型”？</span> </div> <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="请输入账号" value="admin" /> </li> <li> <p>密码</p> <input type="password" placeholder="请输入密码" value="83560792" /> </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="config.js"></script><script type="text/javascript" src="js/index.js"></script><script> $(document).ready(function() { $('.ai-wrapper').append('<iframe id="myIframe" style="position: absolute; top: 0; left: -34%; border: none; z-index: 9;" width="100%" height="100%" src="'+config.chatUrl+'"></iframe>')
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: config.apiUrl+'/api/v1/workspace/dxhtsg/chat', type: 'POST', headers: { 'Authorization': config.apiKey }, 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); layer.msg('因网络原因，您的问题暂时无法解答，请稍后再试！', { offset: [$(window).height()/2-100, $(window).width() /2 + 100], anim: 5 }); $('.loading').parent().remove(); isBotTyping = false; isBotReplying = false; } }); } } else if (isBotTyping) { console.log('isBotTyping',isBotTyping) // 输入中 layer.msg('请等待当前对话完成，稍后再试。', { offset: [$(window).height()/2-100, $(window).width() /2 + 100], anim: 6 }); } else if (isBotReplying) { // loading中 layer.msg('请等待当前对话完成，稍后再试。', { offset: [$(window).height()/2-100, $(window).width() /2 + 100], anim: 6 }); } });
// 回车键发送消息 $textArea.keypress(function(event) { if (event.which === 13) { event.preventDefault(); // 防止默认换行行为 $sendButton.click(); } });
// 热搜词提问 $('.hot-word span').click(function() { const hotMessage = $(this).html() $textArea.val(hotMessage) $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>
|
