|
<!DOCTYPE html> |
|
<html lang="zh-CN"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>智言视寻 - 演示文稿</title> |
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"> |
|
<style> |
|
* { |
|
margin: 0; |
|
padding: 0; |
|
box-sizing: border-box; |
|
} |
|
|
|
body { |
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; |
|
background: linear-gradient(135deg, #f6f8fc 0%, #e9f0f8 100%); |
|
color: #2d3748; |
|
overflow: hidden; |
|
} |
|
|
|
.slide { |
|
display: none; |
|
height: 100vh; |
|
padding: 2% 5%; |
|
animation: fadeIn 0.8s ease-out; |
|
background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(249,250,251,0.95) 100%); |
|
} |
|
|
|
.slide.active { |
|
display: block; |
|
} |
|
|
|
@keyframes fadeIn { |
|
from { |
|
opacity: 0; |
|
transform: translateY(20px); |
|
} |
|
to { |
|
opacity: 1; |
|
transform: translateY(0); |
|
} |
|
} |
|
|
|
.title { |
|
font-size: 4.5rem; |
|
font-weight: 800; |
|
background: linear-gradient(45deg, #1a365d 0%, #2b6cb0 100%); |
|
-webkit-background-clip: text; |
|
-webkit-text-fill-color: transparent; |
|
margin-bottom: 1rem; |
|
line-height: 1.2; |
|
text-align: center; |
|
} |
|
|
|
.subtitle { |
|
font-size: 2.5rem; |
|
color: #4a5568; |
|
font-weight: 600; |
|
margin-bottom: 2rem; |
|
text-align: center; |
|
} |
|
|
|
.section-title { |
|
font-size: 3.5rem; |
|
font-weight: 700; |
|
color: #2c5282; |
|
margin-bottom: 2rem; |
|
position: relative; |
|
padding-bottom: 1rem; |
|
} |
|
|
|
.section-title::after { |
|
content: ''; |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
width: 100px; |
|
height: 4px; |
|
background: linear-gradient(90deg, #4299e1 0%, #90cdf4 100%); |
|
} |
|
|
|
.feature-card { |
|
background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%); |
|
padding: 2rem; |
|
border-radius: 1rem; |
|
box-shadow: 0 10px 25px rgba(0,0,0,0.05); |
|
transition: all 0.3s ease; |
|
height: 100%; |
|
} |
|
|
|
.feature-card:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 15px 35px rgba(0,0,0,0.1); |
|
} |
|
|
|
.feature-title { |
|
font-size: 2rem; |
|
font-weight: 600; |
|
color: #2b6cb0; |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.feature-content { |
|
font-size: 1.5rem; |
|
line-height: 1.6; |
|
color: #4a5568; |
|
} |
|
|
|
.nav-button { |
|
position: fixed; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
background: rgba(66, 153, 225, 0.9); |
|
color: white; |
|
width: 60px; |
|
height: 60px; |
|
border-radius: 50%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
cursor: pointer; |
|
font-size: 1.5rem; |
|
transition: all 0.3s ease; |
|
border: none; |
|
z-index: 100; |
|
} |
|
|
|
.nav-button:hover { |
|
background: rgba(66, 153, 225, 1); |
|
transform: translateY(-50%) scale(1.1); |
|
} |
|
|
|
.nav-button.prev { |
|
left: 40px; |
|
} |
|
|
|
.nav-button.next { |
|
right: 40px; |
|
} |
|
|
|
.slide-number { |
|
position: fixed; |
|
bottom: 40px; |
|
right: 40px; |
|
background: rgba(66, 153, 225, 0.9); |
|
color: white; |
|
padding: 0.8rem 1.5rem; |
|
border-radius: 2rem; |
|
font-size: 1.2rem; |
|
font-weight: 500; |
|
z-index: 100; |
|
} |
|
|
|
.grid-container { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
gap: 2rem; |
|
margin-top: 2rem; |
|
} |
|
|
|
.content-container { |
|
height: calc(100vh - 200px); |
|
overflow-y: auto; |
|
padding-right: 20px; |
|
} |
|
|
|
.slide-image { |
|
width: 100%; |
|
height: auto; |
|
border-radius: 20px; |
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1); |
|
transition: transform 0.3s ease, width 0.3s ease; |
|
} |
|
|
|
.slide-image:hover { |
|
transform: scale(1.02); |
|
} |
|
|
|
.slide-image.large { |
|
max-width: 90%; |
|
margin: 2rem auto; |
|
} |
|
|
|
.slide-image.full { |
|
height: 100%; |
|
object-fit: contain; |
|
} |
|
|
|
.image-container { |
|
position: relative; |
|
width: 100%; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
margin: 2rem 0; |
|
} |
|
|
|
.image-controls { |
|
position: absolute; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
background: rgba(66, 153, 225, 0.9); |
|
padding: 10px 20px; |
|
border-radius: 20px; |
|
display: flex; |
|
align-items: center; |
|
gap: 10px; |
|
z-index: 100; |
|
} |
|
|
|
#slide2 .image-controls { |
|
bottom: -60px; |
|
} |
|
|
|
#slide3 .image-controls, |
|
#slide4 .image-controls { |
|
bottom: 20px; |
|
} |
|
|
|
#slide2 .image-container { |
|
margin-bottom: 4rem; |
|
} |
|
|
|
.size-slider { |
|
width: 200px; |
|
height: 6px; |
|
background: #fff; |
|
border-radius: 3px; |
|
outline: none; |
|
-webkit-appearance: none; |
|
} |
|
|
|
.size-slider::-webkit-slider-thumb { |
|
-webkit-appearance: none; |
|
width: 16px; |
|
height: 16px; |
|
background: #fff; |
|
border-radius: 50%; |
|
cursor: pointer; |
|
} |
|
|
|
.size-label { |
|
color: white; |
|
font-size: 14px; |
|
min-width: 40px; |
|
text-align: center; |
|
} |
|
|
|
.two-column-layout { |
|
display: grid; |
|
grid-template-columns: 1fr 1.5fr; |
|
gap: 2rem; |
|
height: calc(100vh - 300px); |
|
align-items: center; |
|
} |
|
|
|
.left-column { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 2rem; |
|
} |
|
|
|
.right-column { |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.fullscreen-button { |
|
position: fixed; |
|
bottom: 40px; |
|
left: 40px; |
|
background: rgba(66, 153, 225, 0.9); |
|
color: white; |
|
padding: 0.8rem; |
|
border-radius: 50%; |
|
font-size: 1.2rem; |
|
cursor: pointer; |
|
z-index: 100; |
|
border: none; |
|
width: 50px; |
|
height: 50px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.fullscreen-button:hover { |
|
background: rgba(66, 153, 225, 1); |
|
transform: scale(1.1); |
|
} |
|
|
|
|
|
:fullscreen { |
|
background: linear-gradient(135deg, #f6f8fc 0%, #e9f0f8 100%); |
|
} |
|
|
|
:-webkit-full-screen { |
|
background: linear-gradient(135deg, #f6f8fc 0%, #e9f0f8 100%); |
|
} |
|
|
|
:-moz-full-screen { |
|
background: linear-gradient(135deg, #f6f8fc 0%, #e9f0f8 100%); |
|
} |
|
|
|
:-ms-fullscreen { |
|
background: linear-gradient(135deg, #f6f8fc 0%, #e9f0f8 100%); |
|
} |
|
|
|
|
|
.video-container { |
|
background: rgba(255, 255, 255, 0.1); |
|
padding: 1rem; |
|
border-radius: 1rem; |
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
video { |
|
border-radius: 0.5rem; |
|
background: #000; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div class="slide active" id="slide1"> |
|
<div class="flex flex-col items-center justify-center h-full"> |
|
<h1 class="title">智言视寻</h1> |
|
<h2 class="subtitle">融合视觉智能与语言认知的辅助交互系统</h2> |
|
<div class="feature-content text-center mt-16"> |
|
<p class="mb-2">团队：寻言智探团队</p> |
|
<p>指导教师：李志刚</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="slide" id="slide2"> |
|
<h2 class="section-title">深度融合的智能认知架构</h2> |
|
<div class="content-container"> |
|
<div class="image-container"> |
|
<img src="./architecture.jpg" alt="深度融合的智能认知架构" class="slide-image large" style="width: 50%;"> |
|
<div class="image-controls"> |
|
<span class="size-label">50%</span> |
|
<input type="range" min="20" max="100" value="50" class="size-slider" onInput="adjustImageSize(this, 2)"> |
|
</div> |
|
</div> |
|
<div class="grid-container"> |
|
<div class="feature-card"> |
|
<h3 class="feature-title">视觉感知</h3> |
|
<p class="feature-content">通过先进的目标检测模型获取视觉原始信息，实现精准识别</p> |
|
</div> |
|
<div class="feature-card"> |
|
<h3 class="feature-title">语言理解</h3> |
|
<p class="feature-content">由大语言模型进行深度场景理解和语境分析，提供智能化解读</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="slide" id="slide3"> |
|
<h2 class="section-title">自适应智能交互系统</h2> |
|
<div class="content-container"> |
|
<div class="two-column-layout"> |
|
<div class="left-column"> |
|
<div class="feature-card"> |
|
<h3 class="feature-title">自动巡航模式</h3> |
|
<p class="feature-content">主动观察环境变化，实时预警潜在风险，提供全方位保护</p> |
|
</div> |
|
<div class="feature-card"> |
|
<h3 class="feature-title">多模态交互</h3> |
|
<p class="feature-content">支持语音、文字等多种自然交互方式，操作便捷直观</p> |
|
</div> |
|
</div> |
|
<div class="right-column"> |
|
<div class="image-container"> |
|
<img src="./interaction.jpg" alt="自适应智能交互系统" class="slide-image full" style="width: 90%;"> |
|
<div class="image-controls"> |
|
<span class="size-label">90%</span> |
|
<input type="range" min="20" max="100" value="90" class="size-slider" onInput="adjustImageSize(this, 3)"> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="slide" id="slide4"> |
|
<h2 class="section-title">场景理解与推理能力</h2> |
|
<div class="content-container"> |
|
<div class="image-container"> |
|
<img src="./understanding.jpg" alt="场景理解与推理能力" class="slide-image large" style="width: 50%;"> |
|
<div class="image-controls"> |
|
<span class="size-label">50%</span> |
|
<input type="range" min="20" max="100" value="50" class="size-slider" onInput="adjustImageSize(this, 4)"> |
|
</div> |
|
</div> |
|
<div class="grid-container"> |
|
<div class="feature-card"> |
|
<h3 class="feature-title">空间关系理解</h3> |
|
<p class="feature-content">深度识别物体之间的位置和互动关系，构建完整场景认知</p> |
|
</div> |
|
<div class="feature-card"> |
|
<h3 class="feature-title">危险预测</h3> |
|
<p class="feature-content">基于大语言模型的推理能力，提前预判潜在风险，确保安全</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="slide" id="slide5"> |
|
<h2 class="section-title">社会价值</h2> |
|
<div class="content-container"> |
|
<div class="grid-container"> |
|
<div class="feature-card"> |
|
<h3 class="feature-title">助力无障碍社会建设</h3> |
|
<p class="feature-content">为视障人士提供"智能眼睛"，创造平等的信息获取机会</p> |
|
</div> |
|
<div class="feature-card"> |
|
<h3 class="feature-title">推动普惠科技发展</h3> |
|
<p class="feature-content">让先进技术服务更广泛的人群，促进社会进步</p> |
|
</div> |
|
<div class="feature-card"> |
|
<h3 class="feature-title">促进社会包容性</h3> |
|
<p class="feature-content">帮助特殊群体更好地融入社会生活，创造共融环境</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="slide" id="slide6"> |
|
<h2 class="section-title">未来展望</h2> |
|
<div class="content-container"> |
|
<div class="grid-container"> |
|
<div class="feature-card"> |
|
<h3 class="feature-title">技术层面</h3> |
|
<ul class="feature-content list-disc list-inside"> |
|
<li>持续优化算法性能</li> |
|
<li>扩展系统认知范围</li> |
|
<li>深化多模态融合技术</li> |
|
</ul> |
|
</div> |
|
<div class="feature-card"> |
|
<h3 class="feature-title">应用层面</h3> |
|
<ul class="feature-content list-disc list-inside"> |
|
<li>拓展应用场景</li> |
|
<li>开发个性化功能</li> |
|
<li>探索产业化路径</li> |
|
</ul> |
|
</div> |
|
<div class="feature-card"> |
|
<h3 class="feature-title">社会价值</h3> |
|
<ul class="feature-content list-disc list-inside"> |
|
<li>推动无障碍建设</li> |
|
<li>促进科技普惠</li> |
|
<li>建设包容性社会</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="slide" id="slide7"> |
|
<h2 class="section-title">项目演示</h2> |
|
<div class="content-container flex justify-center items-center"> |
|
<div class="video-container w-full max-w-4xl"> |
|
<video |
|
controls |
|
class="w-full rounded-lg shadow-lg" |
|
style="max-height: 70vh;" |
|
> |
|
<source src="WeChat_20241023122858.mp4" type="video/mp4"> |
|
您的浏览器不支持 video 标签。 |
|
</video> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="slide" id="slide8"> |
|
<div class="flex flex-col items-center justify-center h-full"> |
|
<h2 class="title">谢谢聆听</h2> |
|
<p class="subtitle">用科技照亮每个人的世界</p> |
|
<div class="feature-content text-center mt-16"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<button class="nav-button prev" onclick="prevSlide()">←</button> |
|
<button class="nav-button next" onclick="nextSlide()">→</button> |
|
<div class="slide-number">1 / 8</div> |
|
|
|
|
|
<button class="fullscreen-button" onclick="toggleFullScreen()"> |
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path> |
|
</svg> |
|
</button> |
|
|
|
<script> |
|
let currentSlide = 1; |
|
const totalSlides = 8; |
|
|
|
function showSlide(n) { |
|
|
|
const videos = document.querySelectorAll('video'); |
|
videos.forEach(video => { |
|
video.pause(); |
|
}); |
|
|
|
document.querySelectorAll('.slide').forEach(slide => { |
|
slide.classList.remove('active'); |
|
}); |
|
|
|
document.getElementById('slide' + n).classList.add('active'); |
|
document.querySelector('.slide-number').textContent = n + ' / ' + totalSlides; |
|
} |
|
|
|
function nextSlide() { |
|
if (currentSlide < totalSlides) { |
|
currentSlide++; |
|
showSlide(currentSlide); |
|
} |
|
} |
|
|
|
function prevSlide() { |
|
if (currentSlide > 1) { |
|
currentSlide--; |
|
showSlide(currentSlide); |
|
} |
|
} |
|
|
|
function adjustImageSize(slider, slideNumber) { |
|
const size = slider.value; |
|
const slide = document.getElementById('slide' + slideNumber); |
|
const image = slide.querySelector('.slide-image'); |
|
const label = slider.parentElement.querySelector('.size-label'); |
|
|
|
image.style.width = size + '%'; |
|
label.textContent = size + '%'; |
|
} |
|
|
|
|
|
document.addEventListener('keydown', function(event) { |
|
switch(event.key) { |
|
case 'ArrowRight': |
|
case 'ArrowDown': |
|
nextSlide(); |
|
break; |
|
case 'ArrowLeft': |
|
case 'ArrowUp': |
|
prevSlide(); |
|
break; |
|
case 'f': |
|
toggleFullScreen(); |
|
break; |
|
} |
|
}); |
|
|
|
|
|
function toggleFullScreen() { |
|
if (!document.fullscreenElement && |
|
!document.mozFullScreenElement && |
|
!document.webkitFullscreenElement && |
|
!document.msFullscreenElement) { |
|
|
|
if (document.documentElement.requestFullscreen) { |
|
document.documentElement.requestFullscreen(); |
|
} else if (document.documentElement.msRequestFullscreen) { |
|
document.documentElement.msRequestFullscreen(); |
|
} else if (document.documentElement.mozRequestFullScreen) { |
|
document.documentElement.mozRequestFullScreen(); |
|
} else if (document.documentElement.webkitRequestFullscreen) { |
|
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); |
|
} |
|
} else { |
|
|
|
if (document.exitFullscreen) { |
|
document.exitFullscreen(); |
|
} else if (document.msExitFullscreen) { |
|
document.msExitFullscreen(); |
|
} else if (document.mozCancelFullScreen) { |
|
document.mozCancelFullScreen(); |
|
} else if (document.webkitExitFullscreen) { |
|
document.webkitExitFullscreen(); |
|
} |
|
} |
|
} |
|
</script> |
|
</body> |
|
</html> |
