xuhuajiao
/
aiDigiPeople1080
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

first commit

master
xuhuajiao 3 months ago
parent
f5ec03be81
commit
8014c6ba80
1 changed files with 493 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 493
      index.html

493
index.html
View File

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