125 lines
6.0 KiB
HTML
125 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Ai-Teacher - AI教学助手</title>
|
||
|
||
<!-- 引入Bootstrap CSS -->
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
||
<!-- 引入PDF.js -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
|
||
|
||
<!-- 引入Live2D相关库 -->
|
||
<script src="src/live2d.min.js"></script>
|
||
<script src="src/live2dcubismcore.min.js"></script>
|
||
|
||
<link rel="stylesheet" href="./css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<!-- <h1>Ai-Teacher</h1> -->
|
||
<p>AI教学助手 - 交互式PDF学习体验</p>
|
||
</div>
|
||
|
||
<div class="main-content">
|
||
<div class="pdf-container">
|
||
<div class="controls">
|
||
<div class="page-controls">
|
||
<button id="prev-page" class="btn btn-sm btn-outline-primary">上一页</button>
|
||
<input type="number" id="page-num" class="form-control form-control-sm" style="width: 60px;" value="1" min="1">
|
||
<span> / </span>
|
||
<span id="page-count">0</span>
|
||
<button id="next-page" class="btn btn-sm btn-outline-primary">下一页</button>
|
||
</div>
|
||
<div class="zoom-controls">
|
||
<button id="zoom-out" class="btn btn-sm btn-outline-secondary">-</button>
|
||
<button id="zoom-reset" class="btn btn-sm btn-outline-secondary">100%</button>
|
||
<button id="zoom-in" class="btn btn-sm btn-outline-secondary">+</button>
|
||
</div>
|
||
<div>
|
||
<label for="pdf-upload" class="btn btn-sm btn-outline-primary">选择PDF</label>
|
||
<input type="file" id="pdf-upload" accept="application/pdf" style="display: none;">
|
||
</div>
|
||
</div>
|
||
<canvas id="pdf-canvas"></canvas>
|
||
<div id="subtitle-container" class="subtitle-container">
|
||
<p id="subtitle-text">字幕将在播放讲解时显示在这里</p>
|
||
</div>
|
||
<div id="live2d-container" class="live2d-container"></div>
|
||
</div>
|
||
|
||
<div class="sidebar">
|
||
|
||
<div class="explanation-container">
|
||
<div class="explanation-header">
|
||
<h5>AI讲解</h5>
|
||
<div class="d-flex gap-2">
|
||
<button id="explain-btn" class="btn btn-sm btn-primary">生成讲解</button>
|
||
<button id="play-btn" class="btn btn-sm btn-success" disabled>
|
||
<i class="bi bi-play-fill"></i> 播放
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="voice-selector">
|
||
<label for="voice-selector">选择语音：</label>
|
||
<select id="voice-selector" class="form-select form-select-sm">
|
||
<option value="zf_xiaoxiao">小小</option>
|
||
<option value="zf_xiaoyun">小妮</option>
|
||
<option value="zf_xiaogang">小贝</option>
|
||
<option value="zf_xiaole">Heart</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="voice-selector">
|
||
<label for="model-select">选择模型：</label>
|
||
<select id="model-select" class="form-select form-select-sm">
|
||
<option value="Mao">Mao</option>
|
||
<option value="Haru">Haru</option>
|
||
<option value="Hiyori">Hiyori</option>
|
||
<option value="Mark">Mark</option>
|
||
<option value="Natori">Natori</option>
|
||
<option value="Rice">Rice</option>
|
||
<option value="Wanko">Wanko</option>
|
||
<option value="狐狸2.00">Fox</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="voice-selector">
|
||
<div class="d-flex align-items-center">
|
||
<label for="speed-range" class="form-label mb-0 me-2">语速:</label>
|
||
<input type="range" class="form-range me-2" id="speed-range" min="0.5" max="2.0" step="0.1" value="1.5" style="width: 120px;">
|
||
<span id="speed-value" class="badge bg-primary">1.5x</span>
|
||
</div>
|
||
</div>
|
||
<div class="voice-selector mb-3">
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" id="auto-nav-checkbox" checked>
|
||
<label class="form-check-label" for="auto-nav-checkbox">
|
||
自动翻页
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="explanation-text" class="p-3">
|
||
点击"生成讲解"按钮，AI将为您讲解当前页面的内容。
|
||
</div>
|
||
|
||
<audio id="audio-player" controls style="display: none;"></audio>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div id="status-message"></div>
|
||
|
||
<!-- 引入Bootstrap JS 和 Icons -->
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
||
<script type="module" src="js/main.js"></script>
|
||
</body>
|
||
</html> |