huanghai/dsProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
31974d4e856c54adcd79d4fe00f675035f740a7f
dsProject/dsLightRag/static/XueBan.html

187 lines
8.7 KiB
HTML
Raw Normal View History

'commit'
2025-08-22 08:01:36 +08:00
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
'commit'
2025-08-22 11:24:40 +08:00
<title>学伴小智</title>
'commit'
2025-08-22 08:01:36 +08:00
<style>
.model-selector {
'commit'
2025-08-22 13:40:05 +08:00
position: fixed; top: 40px; left: 20px; z-index: 1000;
'commit'
2025-08-22 08:06:17 +08:00
padding: 10px; background-color: rgba(255, 255, 255, 0.8);
border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
'commit'
2025-08-22 08:23:08 +08:00
display: flex; flex-direction: column; gap: 15px;
'commit'
2025-08-22 08:01:36 +08:00
}
'commit'
2025-08-22 08:06:17 +08:00
select { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; background-color: white; font-size: 14px; }
.recording-controls {
'commit'
2025-08-22 08:23:08 +08:00
position: static;
'commit'
2025-08-22 08:06:17 +08:00
display: flex; flex-direction: column; gap: 10px;
'commit'
2025-08-22 08:23:08 +08:00
margin: 0;
'commit'
2025-08-22 08:01:36 +08:00
}
'commit'
2025-08-22 08:06:17 +08:00
.record-button {
width: 70px; height: 70px; border-radius: 50%;
background-color: #dc3545; border: none; color: white;
font-size: 16px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: flex; align-items: center; justify-content: center;
'commit'
2025-08-22 08:18:29 +08:00
/* 确保按钮始终可见 */
opacity: 1 !important;
visibility: visible !important;
'commit'
2025-08-22 08:01:36 +08:00
}
'commit'
2025-08-22 08:06:17 +08:00
.record-button:hover { background-color: #c82333; }
.stop-button {
width: 70px; height: 70px; border-radius: 50%;
background-color: #6c757d; border: none; color: white;
font-size: 16px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: flex; align-items: center; justify-content: center;
'commit'
2025-08-22 08:01:36 +08:00
display: none;
'commit'
2025-08-22 08:18:29 +08:00
/* 确保按钮始终可见 */
opacity: 1 !important;
visibility: visible !important;
'commit'
2025-08-22 08:01:36 +08:00
}
'commit'
2025-08-22 08:06:17 +08:00
.stop-button:hover { background-color: #5a6268; }
.recording-indicator {
position: fixed; bottom: 20px; left: 20px; z-index: 1000;
padding: 10px 15px; background-color: rgba(220, 53, 69, 0.9);
color: white; border-radius: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
display: none; align-items: center;
'commit'
2025-08-22 08:01:36 +08:00
}
'commit'
2025-08-22 08:06:17 +08:00
.recording-dot {
width: 10px; height: 10px; background-color: white;
border-radius: 50%; margin-right: 8px; animation: pulse 1.5s infinite;
'commit'
2025-08-22 08:01:36 +08:00
}
'commit'
2025-08-22 08:06:17 +08:00
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
'commit'
2025-08-22 10:22:27 +08:00
/* 添加思考中动画样式 */
.thinking-indicator {
position: fixed; bottom: 20px; right: 120px; z-index: 1000;
padding: 10px 15px; background-color: rgba(0, 123, 255, 0.9);
color: white; border-radius: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
display: none; align-items: center;
}
.thinking-dots {
display: flex; gap: 4px; margin-right: 8px;
}
.thinking-dot {
width: 8px; height: 8px; background-color: white;
border-radius: 50%;
}
.thinking-dot:nth-child(1) { animation: pulse 1.5s infinite 0s; }
.thinking-dot:nth-child(2) { animation: pulse 1.5s infinite 0.3s; }
.thinking-dot:nth-child(3) { animation: pulse 1.5s infinite 0.6s; }
/* 新增样式 */
.result-container {
position: fixed; bottom: 80px; left: 20px; z-index: 1000;
padding: 15px; background-color: rgba(255, 255, 255, 0.95);
border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
max-width: 400px; width: 90%;
display: none; flex-direction: column; gap: 10px;
}
.result-header {
font-weight: bold; color: #495057; margin-bottom: 5px;
display: flex; align-items: center; gap: 5px;
}
.result-header.asr { color: #007bff; }
.result-header.feedback { color: #28a745; }
.result-text {
color: #333; line-height: 1.5; max-height: 200px; overflow-y: auto;
padding-right: 5px; word-break: break-all;
}
.audio-player-container {
margin-top: 10px; display: flex; align-items: center; gap: 10px;
}
.play-button {
background-color: #28a745; color: white; border: none;
border-radius: 50%; width: 40px; height: 40px;
cursor: pointer; display: flex; align-items: center; justify-content: center;
display: flex; /* 始终显示播放按钮 */
}
.play-button:hover { background-color: #218838; }
.audio-progress {
flex-grow: 1; height: 6px; background-color: #e9ecef; border-radius: 3px;
overflow: hidden; cursor: pointer;
}
.progress-bar {
height: 100%; background-color: #28a745; width: 0%;
}
.audio-time {
font-size: 12px; color: #6c757d;
}
'commit'
2025-08-22 08:01:36 +08:00
</style>
</head>
<body>
<div class="recording-indicator" id="recordingIndicator">
<div class="recording-dot"></div>
<span>正在录音...</span>
</div>
'commit'
2025-08-22 10:22:27 +08:00
<!-- 添加思考中指示器 -->
<div class="thinking-indicator" id="thinkingIndicator">
<div class="thinking-dots">
<div class="thinking-dot"></div>
<div class="thinking-dot"></div>
<div class="thinking-dot"></div>
</div>
<span>学伴正在思考中...</span>
</div>
'commit'
2025-08-22 08:27:45 +08:00
<!-- 在看板娘附近添加录音按钮 -->
<div class="recording-controls" style="position: fixed; right:37px; bottom: 230px; z-index: 998;">
'commit'
2025-08-22 10:22:27 +08:00
<button class="record-button" id="startRecordBtn" style="font-size: 14px;">和我讲话</button>
<button class="stop-button" id="stopRecordBtn" style="font-size: 14px;">停止讲话</button>
</div>
<!-- 新增结果显示容器 -->
<div class="result-container" id="resultContainer">
<div>
<div class="result-header asr">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 1H4C2.89 1 2 1.9 2 3V13C2 14.1 2.89 15 4 15H12C13.11 15 14 14.1 14 13V3C14 1.9 13.11 1 12 1ZM12 13H4V3H12V13Z" fill="#007bff"/>
<path d="M8 4C6.34 4 5 5.34 5 7C5 8.66 6.34 10 8 10C9.66 10 11 8.66 11 7C11 5.34 9.66 4 8 4ZM8 8.5C7.17 8.5 6.5 7.83 6.5 7C6.5 6.17 7.17 5.5 8 5.5C8.83 5.5 9.5 6.17 9.5 7C9.5 7.83 8.83 8.5 8 8.5Z" fill="#007bff"/>
<path d="M8 11C5.79 11 4 12.79 4 15V16H12V15C12 12.79 10.21 11 8 11ZM8 13C9.1 13 10 13.9 10 15H6C6 13.9 6.9 13 8 13Z" fill="#007bff"/>
</svg>
你讲的话
</div>
<div class="result-text" id="asrResultText"></div>
</div>
<div>
<div class="result-header feedback">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 4C1 2.9 1.9 2 3 2H13C14.1 2 15 2.9 15 4V11C15 12.1 14.1 13 13 13H9L5 16V13H3C1.9 13 1 12.1 1 11V4Z" fill="#28a745"/>
<path d="M8 8H6V5H8V8ZM11 8H9V5H11V8ZM11 11H6V9H11V11Z" fill="#28a745"/>
</svg>
学伴回复
</div>
<div class="result-text" id="feedbackResultText"></div>
</div>
<div class="audio-player-container">
<button class="play-button" id="playAudioBtn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 5V19L19 12L8 5Z" fill="white"/>
</svg>
</button>
<div class="audio-progress" id="audioProgress">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="audio-time" id="audioTime">00:00 / 00:00</div>
</div>
'commit'
2025-08-22 08:27:45 +08:00
</div>
'commit'
2025-08-22 08:01:36 +08:00
'commit'
2025-08-22 13:04:16 +08:00
<div>
有权限问题的话，请点击<a href="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/11%E3%80%81%E5%AD%A6%E4%BC%B4Chrome%E5%BD%95%E9%9F%B3%E9%85%8D%E7%BD%AE%E4%BF%AE%E6%94%B9.pdf">这里</a>
</div>
'commit'
2025-08-22 08:01:36 +08:00
<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
'commit'
2025-08-28 15:35:54 +08:00
<!-- 移除内联看板娘代码，引用独立JS文件 -->
<script src="YunXiao/live2d_widget.js"></script>
<!-- 保留模型选择器HTML -->
<div class="model-selector">
<label for="model-select">选择学伴:</label>
<select id="model-select">
<option value="shizuku">小智</option>
<option value="koharu">小荷</option>
<option value="wanko">汪喵</option>
</select>
</div>
'commit'
2025-08-22 08:01:36 +08:00
</body>
</html>
Reference in New Issue Copy Permalink