267 lines
8.9 KiB
HTML
267 lines
8.9 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>
|
||
|
||
<style>
|
||
body {
|
||
font-family: 'Arial', sans-serif;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
padding: 20px;
|
||
}
|
||
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.main-content {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
}
|
||
|
||
.pdf-container {
|
||
flex: 2;
|
||
min-width: 300px;
|
||
background-color: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
padding: 15px;
|
||
}
|
||
|
||
.controls {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.page-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.zoom-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
#pdf-canvas {
|
||
width: 100%;
|
||
border: 1px solid #ddd;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.sidebar {
|
||
flex: 1;
|
||
min-width: 250px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.live2d-area {
|
||
background-color: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
padding: 15px;
|
||
height: 300px;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.live2d-area > div {
|
||
flex: 1;
|
||
}
|
||
|
||
#live2d-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.explanation-container {
|
||
background-color: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
padding: 15px;
|
||
}
|
||
|
||
.explanation-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
#explanation-text {
|
||
min-height: 200px;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
padding: 10px;
|
||
background-color: #f9f9f9;
|
||
border-radius: 5px;
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
.btn-primary {
|
||
background-color: #4a6bdf;
|
||
border-color: #4a6bdf;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-color: #3a5bcf;
|
||
border-color: #3a5bcf;
|
||
}
|
||
|
||
#status-message {
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
padding: 10px 15px;
|
||
border-radius: 5px;
|
||
display: none;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.success {
|
||
background-color: #d4edda;
|
||
color: #155724;
|
||
border: 1px solid #c3e6cb;
|
||
}
|
||
|
||
.error {
|
||
background-color: #f8d7da;
|
||
color: #721c24;
|
||
border: 1px solid #f5c6cb;
|
||
}
|
||
|
||
.audio-controls {
|
||
margin-top: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.voice-selector {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
#audio-player {
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|
||
</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>
|
||
|
||
<div class="sidebar">
|
||
<div class="live2d-area">
|
||
<div class="mb-2">
|
||
<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>
|
||
</select>
|
||
</div>
|
||
<div id="live2d-container"></div>
|
||
</div>
|
||
|
||
<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-select" class="form-label mb-0">语音:</label>
|
||
<select id="voice-select" class="form-select form-select-sm">
|
||
<option value="zf_xiaoxiao">小小 (女)</option>
|
||
<option value="zf_xiaoni">小妮 (女)</option>
|
||
<option value="zf_xiaoyi">小怡 (女)</option>
|
||
<option value="zf_xiaobei">小贝 (女)</option>
|
||
<option value="zm_yunxi">云熙 (男)</option>
|
||
<option value="zm_yunyang">云扬 (男)</option>
|
||
</select>
|
||
|
||
<label for="speed-range" class="form-label mb-0 ms-2">语速:</label>
|
||
<input type="range" class="form-range" id="speed-range" min="0.5" max="2.0" step="0.1" value="1.0" style="width: 80px;">
|
||
<span id="speed-value">1.0</span>
|
||
</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> |