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