|
|
<!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"> <!-- <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> <!-- 3D内容页 --> <div class="layer-content layer-img3-box animate__animated animate__bounceInUp"> <div class="layer-closed layer-place-closed"></div> <div class="threeImg-content"> </div> <div class="threeImg-info"> </div> </div>
<div class="test" style="position: fixed; right: 0; top: 0;"></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(); })
// 3D图片弹框 $('.layer-img3-box .layer-place-closed').on("click",function(){ $('.threeImg-content').html(''); $('.layer-img3-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(); }
// 3D图片弹框 const json = { 'url': 'https://f.3dman.cn/art/9fM6sgHv/fbx/YwU35Vn8/index.html', 'name': '景泰蓝珐琅景泰蓝珐琅景泰蓝珐琅景泰', 'date': '清乾隆清乾隆清乾隆清乾隆22222', 'size': '6.8*9.8*25.8cm', } // threeDieImg(json) function threeDieImg(json){ $('.threeImg-content').html('<iframe id="myIframe" style="border: none;" width="100%" height="100%" src="'+json.url+'"></iframe>'); // 首先展示name // $('.threeImg-info').html(json.name).addClass('animate__animated animate__fadeIn');
const sizeParts = json.size.split('*').map((size, index) => { const dimension = size.replace('cm', '').trim(); const prefixes = ['长', '宽', '高']; return `<span class="three-dimension">${prefixes[index]}：${dimension}</span>`; }).join(' '); const sizeWithUnit = `${sizeParts} <span class="three-unit">单位：cm</span>`;
$('.threeImg-info').html(` <p class="three-name">${json.name}</p> <p class="three-size">${sizeWithUnit}</p> <p class="three-date">${json.date}</p> `).addClass('animate__animated animate__fadeIn');
// // 等待一段时间后隐藏name，展示date // setTimeout(function() { // $('.threeImg-info').hide().removeClass('animate__animated animate__fadeIn'); // $('.threeImg-info').html(json.date); // $('.threeImg-info').show().addClass('animate__animated animate__fadeIn'); // }, 4000); // 延迟4秒，可以根据需要调整时间
// // 再等待一段时间后隐藏date，展示size // setTimeout(function() { // $('.threeImg-info').hide().removeClass('animate__animated animate__fadeIn'); // $('.threeImg-info').html(json.size); // $('.threeImg-info').show().addClass('animate__animated animate__fadeIn'); // }, 8000); // 延迟8秒，即在展示date后2秒展示size
// // 全部展示完之后 // setTimeout(function() { // $('.threeImg-info').html(''); // $('.threeImg-info').hide(); // }, 12000);
$('.layer-img3-box').show(); }
function handleThreeImg(value1, value2, value3) { document.getElementById('myIframe').contentWindow.postMessage({ action: 'setModelRotation', data: [value1, value2, value3] }, '*'); }
// 获取视频播放 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(1,'测试一下') // // 模拟机器人的回答 // 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() // })
// $(document).on('click', '.nav-home', function() { // setTimeout(()=>{ // // 检测发送用户提问内容 // userQuestion(2,'文物介绍') // $('.layer-help-box').hide(); // $('.layer-content').hide() // },4000) // })
// 提问 - 录音 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(chatType, 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();
if(chatType===1){ // 常规提问 居中 $('.chat-container').removeClass('three-chat-container') }else{ // 非常规提问 顶部 $('.chat-container').addClass('three-chat-container') }
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>
|
