1 changed files with 493 additions and 0 deletions
-
493index.html
@ -0,0 +1,493 @@ |
|||||
|
<!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/libs/animate.min.css" /> |
||||
|
<link rel="stylesheet" type="text/css" href="css/plugins/swiper-bundle.min.css" /> |
||||
|
<link rel="stylesheet" type="text/css" href="css/index.css" /> |
||||
|
<!--[if lt IE 9]> |
||||
|
<script src="js/html5shiv.js"></script> |
||||
|
<script src="js/respond.min.js"></script> |
||||
|
<![endif]--> |
||||
|
<title>AI数字人</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="ai-wrapper"> |
||||
|
<video class="ai-bg" src="images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video> |
||||
|
<!-- <iframe style="position: absolute; top: 0; left: 0; border: none; z-index: 9;" width="100%" height="100%" src="https://f.3dman.cn/art/9fM6sgHv/avatars/GPBrJQBD/index.html"></iframe> --> |
||||
|
<!-- <iframe style="position: absolute; top: 0; left: 0; border: none; z-index: 9;" width="100%" height="100%" src="https://f.3dman.cn/art/sDpbYwwJ/fbx/CdYqVH95/index.html"></iframe> --> |
||||
|
|
||||
|
<div class="page-content"> |
||||
|
<!-- 菜单 --> |
||||
|
<ul class="ai-nav"> |
||||
|
<li class="nav-home"><p><span>主页</span></p></li> |
||||
|
<!-- nav-talk --> |
||||
|
<!-- talk-ing --> |
||||
|
<!-- talk-end --> |
||||
|
<li class="nav-talk"><p><span>提问</span></p></li> |
||||
|
<li class="nav-help"><p><span>帮助</span></p></li> |
||||
|
</ul> |
||||
|
|
||||
|
<!-- animate__swing / animate__tada / animate__wobble--> |
||||
|
<!-- animate__rollIn / animate__bounceInDown --> |
||||
|
<!-- animate__animated animate__tada --> |
||||
|
<div class="ai-tip">喊一声“晓菲晓菲”，可以跟我对话</div> |
||||
|
<div class="chat-container"> |
||||
|
<!-- <div class="chat-message user-message animate__animated animate__fadeInUp"> |
||||
|
<div class="message-content"> |
||||
|
<img src="images/1080_4.png" alt="" class="message-avatar" /> |
||||
|
<span class="message-text">你好！</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="chat-message ai-message animate__animated animate__flipInY"> |
||||
|
<div class="message-content"> |
||||
|
<img src="images/1080_5.png" alt="" class="message-avatar" /> |
||||
|
<span class="message-text" id="botReplyText">你好！请问有需要帮助的吗？</span> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
|
||||
|
<div class="other-content"> |
||||
|
<!-- animate__backInDown / animate__backInUp / animate__bounceIn / animate__bounceInDown /animate__bounceInUp --> |
||||
|
<!-- 图书列表 --> |
||||
|
<div class="book-box"> |
||||
|
<div class="layer-content layer-book-box animate__animated animate__bounceInUp"> |
||||
|
<div class="layer-header"> |
||||
|
<h3>图书列表</h3> |
||||
|
<div class="layer-closed layer-index-closed"></div> |
||||
|
</div> |
||||
|
<div class="swiper mySwiper"> |
||||
|
<div class="swiper-wrapper"> |
||||
|
</div> |
||||
|
<div class="book-last"> |
||||
|
<div class="book-result"></div> |
||||
|
<div class="swiper-button-prev"></div> |
||||
|
<div class="swiper-pagination"></div> |
||||
|
<div class="swiper-button-next"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 导航地址页 --> |
||||
|
<div class="layer-content layer-place-box animate__animated animate__bounceInUp"> |
||||
|
<div class="layer-header"> |
||||
|
<h3>导航</h3> |
||||
|
<div class="layer-closed layer-place-closed"></div> |
||||
|
</div> |
||||
|
<div class="map-content"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 导航地址页 --> |
||||
|
<div class="layer-content layer-place2-box animate__animated animate__bounceInUp"> |
||||
|
<div class="layer-header"> |
||||
|
<h3>导航</h3> |
||||
|
<div class="layer-closed layer-place-closed"></div> |
||||
|
</div> |
||||
|
<div class="map-content2"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 视频播放 --> |
||||
|
<div class="layer-content layer-video-box animate__animated animate__bounceInUp"> |
||||
|
<div class="layer-header"> |
||||
|
<h3>视频标题</h3> |
||||
|
<div class="layer-closed layer-index-closed"></div> |
||||
|
</div> |
||||
|
<div class="video-box"> |
||||
|
<!-- <video width="100%" height="100%" controls autoplay muted> |
||||
|
<source src="video/入门级开源机械臂ultraArm套装.mp4" type="video/mp4"> |
||||
|
</video> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 帮助 --> |
||||
|
<div class="layer-help-box animate__animated animate__fadeInLeft"> |
||||
|
<div class="layer-closed layer-help-closed"></div> |
||||
|
<h4>HI,您好！<br/> |
||||
|
我是您的AI助手晓菲！</h4> |
||||
|
<p class="help-top-text">我可以为您提供图书查询、导航定位、参考咨询、智能推荐等服务。让我们一起在知识的海洋中航行，发现新大陆！有什么问题想要探讨吗？</p> |
||||
|
<ul class="help-tip"> |
||||
|
<li class="animate__animated animate__bounceInUp"> |
||||
|
<span>图书查询</span> |
||||
|
<p>"请帮我查一下《斗罗大陆》这本书"</p> |
||||
|
</li> |
||||
|
<li class="animate__animated animate__bounceInUp"> |
||||
|
<span>图书推荐</span> |
||||
|
<p>"帮我推荐一下近期热门书籍"</p> |
||||
|
</li> |
||||
|
<li class="animate__animated animate__bounceInUp"> |
||||
|
<span>知识百科</span> |
||||
|
<p>"请问《红楼梦》里王熙凤和贾宝玉是什么关系？"</p> |
||||
|
</li> |
||||
|
<li class="animate__animated animate__bounceInUp"> |
||||
|
<span>大模型</span> |
||||
|
<p>"请帮我写一篇关于“日落”的300字文章"</p> |
||||
|
</li> |
||||
|
<li class="animate__animated animate__bounceInUp"> |
||||
|
<span>导航定位</span> |
||||
|
<p>"请问少儿借阅室怎么走"</p> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</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/flexible.js"></script> |
||||
|
<!-- 弹出框 --> |
||||
|
<script type="text/javascript" src="js/plugins/swiper-bundle.min.js"></script> |
||||
|
<script type="text/javascript" src="config.js"></script> |
||||
|
<script type="text/javascript" src="data.js"></script> |
||||
|
|
||||
|
<script> |
||||
|
var dataJson = data |
||||
|
var shouldStopTyping = false; // 停止打字标识 |
||||
|
var helpTimer; // 帮助的自动消失定时器 |
||||
|
var intervalText; // 打字定时器 |
||||
|
var swiper; |
||||
|
|
||||
|
function helpShowHide() { |
||||
|
clearTimeout(helpTimer); |
||||
|
$('.chat-message').remove(); |
||||
|
$('.layer-content').hide(); |
||||
|
|
||||
|
if ($('.layer-help-box').is(':visible')) { |
||||
|
// 如果帮助框是可见的，则隐藏它 |
||||
|
$('.layer-help-box').hide(); |
||||
|
} else { |
||||
|
// 如果帮助框是隐藏的，则显示它，并设置定时器 |
||||
|
$('.layer-help-box').show(); |
||||
|
helpTimer = setTimeout(() => { |
||||
|
$('.layer-help-box').hide(); |
||||
|
}, 7000); // 7秒后隐藏帮助框 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// animate__swing / animate__tada / animate__wobble |
||||
|
// animate__rollIn / animate__bounceInDown |
||||
|
$(function(){ |
||||
|
// 顶部提示语动画 |
||||
|
setInterval(function() { |
||||
|
$('.ai-tip').css('animation-duration', '1s').addClass('animate__animated animate__tada'); |
||||
|
setTimeout(function() { |
||||
|
$('.ai-tip').removeClass('animate__animated animate__tada'); |
||||
|
}, 1000); |
||||
|
}, 5000); |
||||
|
|
||||
|
// 禁用右键菜单 |
||||
|
document.addEventListener('contextmenu', function(event) { |
||||
|
event.preventDefault(); |
||||
|
}); |
||||
|
|
||||
|
// 帮助按钮点击事件 |
||||
|
$('.nav-help').on('click', function() { |
||||
|
helpShowHide(); |
||||
|
}); |
||||
|
|
||||
|
// 帮助的关闭按钮click |
||||
|
$(".layer-help-closed").on("click",function(){ |
||||
|
clearTimeout(helpTimer); // 清除之前的定时器 |
||||
|
$('.layer-help-box').hide() |
||||
|
}) |
||||
|
|
||||
|
// 图书列表 / 视频弹框的关闭按钮 |
||||
|
$(".layer-index-closed").on("click",function(){ |
||||
|
// 销毁 Swiper 实例 |
||||
|
if (swiper) { |
||||
|
swiper.destroy(); |
||||
|
} |
||||
|
$('.layer-content').hide() |
||||
|
$('.swiper-wrapper').html('') |
||||
|
}) |
||||
|
|
||||
|
// 新地址弹框 |
||||
|
$('.layer-place2-box .layer-place-closed').on("click",function(){ |
||||
|
$('.map-content2').html(''); |
||||
|
$('.layer-place2-box').hide(); |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
// 图书列表 |
||||
|
// getBookList(dataJson) |
||||
|
// getBookList([{"BookName":"陈氏太极拳图说：简体版","Author":"陈鑫","Isbn":"7537727279","Publish":null,"Sortmark":"G852.111.9-64/1","BookCover":"aba3eec6723f4cef8d2ae0661946862e","SrcUrl":"http://static1.showapi.com/app2/isbn/unk/8587da2ac70e4a41a4ce3a30cd5c1035.jpg","Books":[{"Barcode":"4201120100108481","PlaceName":null}]},{"BookName":"孟子译注：简体字本","Author":"杨伯峻译注","Isbn":"9787101063585","Publish":null,"Sortmark":"B222.52/1","BookCover":"85ebce648e24408db5095528e6534356","SrcUrl":"http://static1.showapi.com/app2/isbn/101/b16902a8ad4646ed8296f51a6c2c3483.jpg","Books":[{"Barcode":"4201120100237455","PlaceName":"三楼图书借阅区001排A面06架05层"}]},{"BookName":"章太炎家书：手稿与简体字对照版","Author":"章太炎等","Isbn":"9787512673069","Publish":null,"Sortmark":"B259.25/6","BookCover":"dd5948c5f9454e959b25220b86d57c7c","SrcUrl":"https://book-resource.dataesb.com/cover/p/20210730/eae5b39e98f14d388c8e18e5276b9451.jpeg","Books":[{"Barcode":"4201120100417226","PlaceName":"三楼图书借阅区001排A面07架04层"},{"Barcode":"4201120100417225","PlaceName":null}]},{"BookName":"论语译注：简体字本","Author":"杨伯峻译注","Isbn":"7101054196","Publish":null,"Sortmark":"B222.22/5","BookCover":"732e35c6e0914443b6c375456eb1e3b5","SrcUrl":"https://book-resource.dataesb.com/cover/p/20200516/775ed0e2d7a14163bbf872dd47f4d31b.jpeg","Books":[{"Barcode":"4201120100237456","PlaceName":"三楼图书借阅区001排A面05架07层"}]}]) |
||||
|
function handleImageError(imgElement) { |
||||
|
imgElement.src = 'images/dxh/default-img.png'; |
||||
|
if (!imgElement.classList.contains('dxh-class')) { |
||||
|
imgElement.classList.add('dxh-class'); |
||||
|
} |
||||
|
imgElement.onerror = null; |
||||
|
} |
||||
|
function getBookList(dataBook){ |
||||
|
var swiperHtml = ''; |
||||
|
var processedBooks = 0; |
||||
|
var promises = []; |
||||
|
|
||||
|
for (let i = 0; i < dataBook.length; i++) { |
||||
|
let book = dataBook[i]; |
||||
|
let places = book.books || book.Books || []; |
||||
|
|
||||
|
let placesHtml = places.map(function(place) { |
||||
|
let noDataClass = ( place.placeName === null || place.PlaceName === null) ? 'no-data' : ''; |
||||
|
return '<a class="' + noDataClass + '" href="javascript:;" data-id="'+ (place.barcode || place.Barcode) +'">' + ( ( place.placeName || place.PlaceName ) || '暂无架位信息') + '</a>'; |
||||
|
}).join(''); |
||||
|
|
||||
|
(function(book) { |
||||
|
promises.push($.ajax({ |
||||
|
url: config.apiUrl+'/dxhtsg/getCoverByISBN', |
||||
|
type: 'GET', |
||||
|
data: { |
||||
|
'isbn': book.isbn || book.Isbn |
||||
|
}, |
||||
|
success: function(res) { |
||||
|
console.log('res',res) |
||||
|
if (res) { |
||||
|
book.cover = res; |
||||
|
} |
||||
|
swiperHtml += createBookHtml(book, placesHtml); |
||||
|
processedBooks++; |
||||
|
}, |
||||
|
error: function(err) { |
||||
|
console.error(err); |
||||
|
} |
||||
|
})); |
||||
|
})(book); |
||||
|
} |
||||
|
|
||||
|
Promise.all(promises).then(function() { |
||||
|
$('.book-result').html('共有 ' + dataBook.length + ' 册图书符合您的检索结果'); |
||||
|
$('.swiper-wrapper').html(swiperHtml); |
||||
|
$('.layer-book-box').show(); |
||||
|
|
||||
|
// list轮播切换 |
||||
|
swiper = new Swiper(".mySwiper", { |
||||
|
spaceBetween: 30, |
||||
|
centeredSlides: true, |
||||
|
autoHeight: true, |
||||
|
autoplay: { |
||||
|
delay: 6000, |
||||
|
disableOnInteraction: false, |
||||
|
}, |
||||
|
pagination: { |
||||
|
el: ".swiper-pagination", |
||||
|
type: "fraction", |
||||
|
}, |
||||
|
navigation: { |
||||
|
nextEl: ".swiper-button-next", |
||||
|
prevEl: ".swiper-button-prev", |
||||
|
}, |
||||
|
on: { |
||||
|
init: function () { |
||||
|
// 轮播初始化后立即请求第一个图书的gist |
||||
|
requestBookGist(this.slides[0].dataset.isbn); |
||||
|
}, |
||||
|
touchStart: function(swiper,event){ |
||||
|
swiper.autoplay.stop(); |
||||
|
}, |
||||
|
touchEnd: function(swiper,event){ |
||||
|
swiper.autoplay.start(); |
||||
|
}, |
||||
|
slideChangeTransitionStart: function () { |
||||
|
let currentBook = this.slides[this.activeIndex].dataset.isbn |
||||
|
requestBookGist(currentBook); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 图书导航列表点击 |
||||
|
// http://58.49.77.70:8443/anchoring/goNavigation.do?libcode=1201&barcode=4201120100440912 |
||||
|
$('.place-book a').on("click",function(){ |
||||
|
var _thisBarcode = $(this).attr('data-id'); |
||||
|
var _thisNoData = $(this).hasClass('no-data') |
||||
|
if(!_thisNoData){ |
||||
|
// 点击时停止轮播 |
||||
|
swiper.autoplay.stop(); |
||||
|
$('.map-content').html('<iframe style="border: none;" width="100%" height="100%" src="'+config.apiUrl+'/anchoring/goNavigation.do?libcode='+config.libcode+'&barcode='+_thisBarcode+'"></iframe>'); |
||||
|
$('.layer-place-box').show(); |
||||
|
} |
||||
|
}) |
||||
|
// 图书导航关闭按钮 |
||||
|
$('.layer-place-closed').on("click",function(){ |
||||
|
$('.map-content').html(''); |
||||
|
$('.layer-place-box').hide(); |
||||
|
// 弹框关闭后恢复轮播 |
||||
|
swiper.autoplay.start(); |
||||
|
}) |
||||
|
}).catch(function(error) { |
||||
|
console.error(error); |
||||
|
}); |
||||
|
|
||||
|
function createBookHtml(book, placesHtml) { |
||||
|
var imgClass = book.cover.includes('dxh') ? 'dxh-class' : ''; |
||||
|
return '<div class="swiper-slide" data-isbn='+ (book.isbn || book.Isbn) +'>' + |
||||
|
'<div class="book-wrapper">' + |
||||
|
'<div class="book-info">' + |
||||
|
'<div class="info-img">' + |
||||
|
'<img src="' + book.cover + '" alt="" class="' + imgClass + '" onerror="handleImageError(this);" />' + |
||||
|
'</div>' + |
||||
|
'<div class="info-text">' + |
||||
|
'<p>' + ( book.bookName || book.BookName ) + '</p>' + |
||||
|
'<p><i>著者：</i><span>' + (book.author || book.Author || '-') + '</span></p>' + |
||||
|
'<p><i>出版社：</i><span>' + (book.publish || book.Publish || '-') + '</span></p>' + |
||||
|
'<p><i>ISBN：</i><span>' + (book.isbn || book.Isbn || '-') + '</span></p>' + |
||||
|
'<p class="gist-content"><span>' + (book.gist || book.Gist || '-') + '</span></p>' + |
||||
|
'</div>' + |
||||
|
'</div>' + |
||||
|
'<div class="place-book">' + placesHtml + '</div>' + |
||||
|
'</div>' + |
||||
|
'</div>'; |
||||
|
} |
||||
|
|
||||
|
// http://58.49.77.70:8443/dxhtsg/LibraryBookByBarcode 通过barcode获取一本图书 {"barcode":"4201000201648913"} |
||||
|
// http://58.49.77.70:8443/dxhtsg/LibraryBookByISBN 通过isbn获取第一本有简介的图书 {"isbn":"4201000201648913"} |
||||
|
// http://58.49.77.70:8443/dxhtsg/LibraryBookByISBNTop1 通过isbn获取图书集合 {"isbn":"4201000201648913"} |
||||
|
// http://58.49.77.70:19000/LibraryBookByBarcode |
||||
|
function requestBookGist(isbn) { |
||||
|
if (isbn) { |
||||
|
$.ajax({ |
||||
|
url: config.apiUrl + '/dxhtsg/LibraryBookByISBN', |
||||
|
type: 'POST', |
||||
|
contentType:'application/json', |
||||
|
dataType: "json", |
||||
|
data: JSON.stringify({ |
||||
|
'isbn': isbn |
||||
|
}), |
||||
|
success: function(res) { |
||||
|
console.log(res) |
||||
|
if(res.length !== 0){ |
||||
|
updateGist(res[0].gist); |
||||
|
}else{ |
||||
|
updateGist(''); |
||||
|
} |
||||
|
}, |
||||
|
error: function(err) { |
||||
|
console.error(err); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
function updateGist(gist) { |
||||
|
$('.gist-content span').text('') |
||||
|
$('.gist-content span').text(gist); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// newPlace('http://58.49.77.70:8443/anchoring/goNavigation.do?libcode=1201&barcode=4201120100331343') |
||||
|
function newPlace(url){ |
||||
|
$('.map-content2').html('<iframe style="border: none;" width="100%" height="100%" src="'+url+'"></iframe>'); |
||||
|
$('.layer-place2-box').show(); |
||||
|
} |
||||
|
|
||||
|
// 获取视频播放 |
||||
|
function getVideo(title,videoSrc){ |
||||
|
$('.layer-video-box').show(); |
||||
|
$('.layer-video-box').find('h3').html(title); |
||||
|
var html = '<video width="100%" height="100%" controls autoplay muted>'+ |
||||
|
'<source src="'+videoSrc+'" type="video/mp4">'+ |
||||
|
'</video>'; |
||||
|
$('.video-box').html(html); |
||||
|
} |
||||
|
|
||||
|
// $(document).on('click', '.nav-talk', function() { |
||||
|
// talkDefalutToIng() |
||||
|
// setTimeout(()=>{ |
||||
|
// // 检测发送用户提问内容 |
||||
|
// userQuestion('测试一下') |
||||
|
// // 模拟机器人的回答 |
||||
|
// setTimeout(function() { |
||||
|
// talkIngToEnd() |
||||
|
// var message = "所替代，万物复苏，生命在这个季节里得到了更新。在田野上，农民们忙碌地耕种，希望在秋天收获满满的果实。而在城市中，人们带着期待和希望迎接新的一年。孩子们在公园里欢笑玩耍，他们的笑声如同春天的风，温暖而清新。河边的柳树开始发芽，嫩绿的叶子在阳光下闪闪发光。花朵在春风的吹拂下慢慢绽放，她们像是一群群舞者，在舞台上展示着各自的美丽。春天是一首优美的诗，是一幅生动的画。它带给我们的不仅仅是美景，更是对生活的热爱和对未来的期待。让我们珍惜这个美丽的季节，感受大自然的魅力，享受生活的美好。" |
||||
|
// digiPeopleReply(message) |
||||
|
// getBookList(dataJson) |
||||
|
// }, 4000); |
||||
|
// $('.layer-help-box').hide(); |
||||
|
// $('.layer-content').hide() |
||||
|
// },4000) |
||||
|
// }) |
||||
|
|
||||
|
// $(document).on('click', '.talk-end', function() { |
||||
|
// talkEndToDefalut() |
||||
|
// }) |
||||
|
|
||||
|
// 提问 - 录音 |
||||
|
function talkDefalutToIng(){ |
||||
|
$('.nav-talk').html('<p><span>录音</span></p>').removeClass().addClass('talk-ing'); |
||||
|
$('.layer-help-box').hide(); |
||||
|
} |
||||
|
|
||||
|
// 录音 - 打断 |
||||
|
function talkIngToEnd(){ |
||||
|
$('.talk-ing').html('<p><span>打断</span></p>').removeClass().addClass('talk-end'); |
||||
|
} |
||||
|
|
||||
|
// 打断 - 提问 |
||||
|
function talkEndToDefalut(){ |
||||
|
$('.talk-end').html('<p><span>提问</span></p>').removeClass().addClass('nav-talk'); |
||||
|
shouldStopTyping = true; // 设置变量，指示应该停止打字 |
||||
|
clearInterval(intervalText); // 清除定时器 |
||||
|
} |
||||
|
|
||||
|
// 用户提问 |
||||
|
function userQuestion(message){ |
||||
|
if (swiper) { |
||||
|
swiper.destroy(); |
||||
|
} |
||||
|
$('.layer-help-box').hide(); |
||||
|
$('.layer-content').hide(); |
||||
|
$('.swiper-wrapper').html('') |
||||
|
|
||||
|
var $userMessageBox = $('<div class="chat-message user-message animate__animated animate__fadeInUp"></div>'); |
||||
|
$userMessageBox.html( |
||||
|
'<div class="message-content">' + |
||||
|
'<img src="images/1080_4.png" alt="" class="message-avatar" />' + |
||||
|
'<span class="message-text">' + message + '</span>' + |
||||
|
'</div>' |
||||
|
); |
||||
|
// 将用户的消息添加到聊天容器的最顶部 |
||||
|
$('.chat-container').prepend($userMessageBox); |
||||
|
// 清空旧的消息，只保留最新的一条问答 |
||||
|
$('.chat-container').children('.chat-message').slice(1).remove(); |
||||
|
|
||||
|
setTimeout(()=>{ |
||||
|
var $userMessageBox = $('.chat-container').children('.chat-message.user-message').last(); |
||||
|
var $botMessageBox = $('<div class="chat-message ai-message animate__animated animate__fadeInUp"></div>'); |
||||
|
$botMessageBox.html( |
||||
|
'<div class="message-content">' + |
||||
|
'<img src="images/1080_5.png" alt="" class="message-avatar" />' + |
||||
|
'<span class="message-text" id="botReplyText"><img class="loading" src="images/loading.webp" alt="" /></span>' + |
||||
|
'</div>' |
||||
|
); |
||||
|
$userMessageBox.after($botMessageBox); |
||||
|
},1000) |
||||
|
} |
||||
|
|
||||
|
// 数字人回答 |
||||
|
function digiPeopleReply(message) { |
||||
|
shouldStopTyping = false; |
||||
|
setTimeout(function() { |
||||
|
// 隐藏loading |
||||
|
$('.ai-message').find('.loading').hide(); |
||||
|
|
||||
|
// 数字人回复逐字敲打出来 |
||||
|
var index = 0; |
||||
|
intervalText = setInterval(function() { |
||||
|
if (!shouldStopTyping && index < message.length) { |
||||
|
$('#botReplyText').text(message.substring(0, index + 1)); |
||||
|
index++; |
||||
|
$('#botReplyText').scrollTop($('#botReplyText')[0].scrollHeight); |
||||
|
} else if (shouldStopTyping) { |
||||
|
clearInterval(intervalText); // 停止打字动画 |
||||
|
} |
||||
|
}, 100); // 100 打字速度，越小越快 |
||||
|
}, 1000); |
||||
|
} |
||||
|
</script> |
||||
|
</html> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue