2025-03-06 20:11:54 +08:00
|
|
|
|
<!DOCTYPE html>
|
2025-03-07 00:00:11 +08:00
|
|
|
|
<html lang="zh-CN">
|
2025-03-06 20:11:54 +08:00
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
2025-03-07 00:00:11 +08:00
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>Neuron Sparkle Waifu - 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相关库 -->
|
|
|
|
|
|
<!-- Cubism Core -->
|
|
|
|
|
|
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
|
|
|
|
|
|
<!-- PIXI.js -->
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/pixi.js@5.3.3/dist/pixi.min.js"></script>
|
|
|
|
|
|
<!-- PIXI Live2D Display -->
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@pixi/live2d-display@1.0.5/dist/index.min.js"></script>
|
|
|
|
|
|
|
2025-03-06 20:11:54 +08:00
|
|
|
|
<style>
|
2025-03-07 00:00:11 +08:00
|
|
|
|
body {
|
|
|
|
|
|
font-family: 'Arial', sans-serif;
|
|
|
|
|
|
background-color: #f5f5f5;
|
2025-03-06 20:11:54 +08:00
|
|
|
|
}
|
2025-03-07 00:00:11 +08:00
|
|
|
|
|
|
|
|
|
|
.container {
|
|
|
|
|
|
max-width: 1200px;
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.header {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.main-content {
|
2025-03-06 20:11:54 +08:00
|
|
|
|
display: flex;
|
2025-03-07 00:00:11 +08:00
|
|
|
|
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;
|
2025-03-06 20:11:54 +08:00
|
|
|
|
gap: 10px;
|
|
|
|
|
|
}
|
2025-03-07 00:00:11 +08:00
|
|
|
|
|
|
|
|
|
|
.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-container {
|
|
|
|
|
|
background-color: white;
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
padding: 15px;
|
|
|
|
|
|
height: 300px;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#live2d-container {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.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;
|
2025-03-06 20:11:54 +08:00
|
|
|
|
padding: 10px;
|
2025-03-07 00:00:11 +08:00
|
|
|
|
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;
|
2025-03-06 20:11:54 +08:00
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
2025-03-07 00:00:11 +08:00
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="header">
|
|
|
|
|
|
<h1>Neuron Sparkle Waifu</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-container">
|
|
|
|
|
|
<div class="mb-2">
|
|
|
|
|
|
<select id="model-select" class="form-select form-select-sm">
|
|
|
|
|
|
<option value="Haru">Haru</option>
|
|
|
|
|
|
<option value="Mao">Mao</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button id="load-model-btn" class="btn btn-sm btn-primary mb-2">加载模型</button>
|
|
|
|
|
|
<div id="live2d-container"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="explanation-container">
|
|
|
|
|
|
<div class="explanation-header">
|
|
|
|
|
|
<h5>AI讲解</h5>
|
|
|
|
|
|
<button id="explain-btn" class="btn btn-sm btn-primary">生成讲解</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="explanation-text" class="p-3">
|
|
|
|
|
|
点击"生成讲解"按钮，AI将为您讲解当前页面的内容。
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-03-06 20:11:54 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-03-07 00:00:11 +08:00
|
|
|
|
<div id="status-message"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 引入Bootstrap JS -->
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 添加调试脚本 -->
|
2025-03-06 20:11:54 +08:00
|
|
|
|
<script>
|
2025-03-07 00:00:11 +08:00
|
|
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
|
|
|
|
console.log('DOM加载完成，检查Live2D库状态...');
|
|
|
|
|
|
|
|
|
|
|
|
// 检查PIXI是否已加载
|
|
|
|
|
|
if (window.PIXI) {
|
|
|
|
|
|
console.log('PIXI.js已加载，版本:', window.PIXI.VERSION);
|
|
|
|
|
|
|
|
|
|
|
|
// 检查Live2D是否已加载
|
|
|
|
|
|
if (window.PIXI.live2d) {
|
|
|
|
|
|
console.log('PIXI.live2d已加载，结构:', Object.keys(window.PIXI.live2d));
|
|
|
|
|
|
|
|
|
|
|
|
// 检查Live2DModel是否存在
|
|
|
|
|
|
if (window.PIXI.live2d.Live2DModel) {
|
|
|
|
|
|
console.log('Live2DModel存在，方法:', Object.getOwnPropertyNames(window.PIXI.live2d.Live2DModel));
|
|
|
|
|
|
console.log('Live2DModel.from方法存在:', typeof window.PIXI.live2d.Live2DModel.from === 'function');
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.log('Live2DModel不存在，查找其他可能的模型类');
|
|
|
|
|
|
for (const key in window.PIXI.live2d) {
|
|
|
|
|
|
console.log(`- ${key}:`, typeof window.PIXI.live2d[key]);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.error('PIXI.live2d未加载');
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.error('PIXI.js未加载');
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
2025-03-06 20:11:54 +08:00
|
|
|
|
</script>
|
2025-03-07 00:00:11 +08:00
|
|
|
|
|
|
|
|
|
|
<!-- 引入应用脚本 -->
|
|
|
|
|
|
<script type="module" src="js/main.js"></script>
|
2025-03-06 20:11:54 +08:00
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
