525 lines
16 KiB
HTML
525 lines
16 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>语音对话</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 600px;
|
|
width: 100%;
|
|
background: white;
|
|
border-radius: 20px;
|
|
padding: 30px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.header h1 {
|
|
color: #333;
|
|
font-size: 28px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: #ccc;
|
|
}
|
|
|
|
.status-dot.online {
|
|
background: #4CAF50;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.status-dot.offline {
|
|
background: #f44336;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.record-section {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.record-btn {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.record-btn:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 10px 30px rgba(102,126,234,0.4);
|
|
}
|
|
|
|
.record-btn.recording {
|
|
background: linear-gradient(135deg, #f44336 0%, #e53935 100%);
|
|
animation: recording-pulse 1s infinite;
|
|
}
|
|
|
|
@keyframes recording-pulse {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.1); }
|
|
}
|
|
|
|
.record-btn .icon {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.record-btn .text {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.record-status {
|
|
margin-top: 15px;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.record-status.recording {
|
|
color: #f44336;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.waveform {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 3px;
|
|
margin-top: 15px;
|
|
height: 30px;
|
|
}
|
|
|
|
.wave-bar {
|
|
width: 4px;
|
|
height: 10px;
|
|
background: #667eea;
|
|
border-radius: 2px;
|
|
animation: wave 0.5s infinite ease-in-out;
|
|
}
|
|
|
|
.wave-bar:nth-child(odd) {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.wave-bar:nth-child(3n) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
@keyframes wave {
|
|
0%, 100% { height: 10px; }
|
|
50% { height: 25px; }
|
|
}
|
|
|
|
.chat-section {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
border: 1px solid #eee;
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
background: #f9f9f9;
|
|
}
|
|
|
|
.message {
|
|
margin-bottom: 15px;
|
|
padding: 12px 15px;
|
|
border-radius: 10px;
|
|
max-width: 80%;
|
|
}
|
|
|
|
.message.user {
|
|
background: #667eea;
|
|
color: white;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.message.assistant {
|
|
background: white;
|
|
color: #333;
|
|
border: 1px solid #eee;
|
|
}
|
|
|
|
.message .role {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.message .content {
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.loading {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.loading-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: #667eea;
|
|
animation: loading-bounce 0.6s infinite ease-in-out;
|
|
}
|
|
|
|
.loading-dot:nth-child(1) { animation-delay: 0s; }
|
|
.loading-dot:nth-child(2) { animation-delay: 0.1s; }
|
|
.loading-dot:nth-child(3) { animation-delay: 0.2s; }
|
|
|
|
@keyframes loading-bounce {
|
|
0%, 80%, 100% { transform: scale(0); }
|
|
40% { transform: scale(1); }
|
|
}
|
|
|
|
.actions {
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.clear-btn {
|
|
padding: 10px 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
background: white;
|
|
color: #666;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.clear-btn:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.error-message {
|
|
background: #ffebee;
|
|
color: #c62828;
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.hint {
|
|
margin-top: 15px;
|
|
font-size: 13px;
|
|
color: #999;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🎤 语音对话</h1>
|
|
<div class="status-indicator">
|
|
<span class="status-dot" id="statusDot"></span>
|
|
<span id="statusText">检测连接...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="record-section">
|
|
<button class="record-btn" id="recordBtn">
|
|
<span class="icon">🎤</span>
|
|
<span class="text">点击录音</span>
|
|
</button>
|
|
<div class="record-status" id="recordStatus">点击按钮开始录音</div>
|
|
<div class="waveform" id="waveform" style="display: none;">
|
|
<div class="wave-bar"></div>
|
|
<div class="wave-bar"></div>
|
|
<div class="wave-bar"></div>
|
|
<div class="wave-bar"></div>
|
|
<div class="wave-bar"></div>
|
|
<div class="wave-bar"></div>
|
|
<div class="wave-bar"></div>
|
|
<div class="wave-bar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-section" id="chatSection">
|
|
<div class="hint">开始你的第一次语音对话吧！</div>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button class="clear-btn" id="clearBtn">清除对话</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 配置
|
|
const API_URL = '/api';
|
|
|
|
// 状态
|
|
let isRecording = false;
|
|
let mediaRecorder = null;
|
|
let audioChunks = [];
|
|
let conversationId = null;
|
|
let audioContext = null;
|
|
|
|
// 元素
|
|
const recordBtn = document.getElementById('recordBtn');
|
|
const recordStatus = document.getElementById('recordStatus');
|
|
const waveform = document.getElementById('waveform');
|
|
const chatSection = document.getElementById('chatSection');
|
|
const clearBtn = document.getElementById('clearBtn');
|
|
const statusDot = document.getElementById('statusDot');
|
|
const statusText = document.getElementById('statusText');
|
|
|
|
// 检查服务状态
|
|
async function checkStatus() {
|
|
try {
|
|
const resp = await fetch(`${API_URL}/status`);
|
|
const data = await resp.json();
|
|
|
|
if (data.model_online) {
|
|
statusDot.className = 'status-dot online';
|
|
statusText.textContent = '模型服务已连接';
|
|
} else {
|
|
statusDot.className = 'status-dot offline';
|
|
statusText.textContent = '模型服务离线';
|
|
}
|
|
} catch (e) {
|
|
statusDot.className = 'status-dot offline';
|
|
statusText.textContent = '服务连接失败';
|
|
}
|
|
}
|
|
|
|
// 初始化录音
|
|
async function initAudio() {
|
|
try {
|
|
const stream = await navigator.mediaDevices.getUserMedia({
|
|
audio: {
|
|
echoCancellation: true,
|
|
noiseSuppression: true,
|
|
sampleRate: 16000
|
|
}
|
|
});
|
|
|
|
audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
|
|
|
// 创建 MediaRecorder
|
|
mediaRecorder = new MediaRecorder(stream, {
|
|
mimeType: 'audio/webm'
|
|
});
|
|
|
|
mediaRecorder.ondataavailable = (e) => {
|
|
audioChunks.push(e.data);
|
|
};
|
|
|
|
mediaRecorder.onstop = async () => {
|
|
const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
|
|
audioChunks = [];
|
|
await sendAudio(audioBlob);
|
|
};
|
|
|
|
return true;
|
|
} catch (e) {
|
|
console.error('获取麦克风失败:', e);
|
|
showError('无法访问麦克风，请检查权限设置');
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// 开始录音
|
|
async function startRecording() {
|
|
if (!mediaRecorder) {
|
|
const success = await initAudio();
|
|
if (!success) return;
|
|
}
|
|
|
|
audioChunks = [];
|
|
mediaRecorder.start();
|
|
isRecording = true;
|
|
|
|
recordBtn.classList.add('recording');
|
|
recordBtn.querySelector('.icon').textContent = '⏹️';
|
|
recordBtn.querySelector('.text').textContent = '停止录音';
|
|
recordStatus.textContent = '正在录音...';
|
|
recordStatus.classList.add('recording');
|
|
waveform.style.display = 'flex';
|
|
}
|
|
|
|
// 停止录音
|
|
function stopRecording() {
|
|
if (mediaRecorder && isRecording) {
|
|
mediaRecorder.stop();
|
|
isRecording = false;
|
|
|
|
recordBtn.classList.remove('recording');
|
|
recordBtn.querySelector('.icon').textContent = '🎤';
|
|
recordBtn.querySelector('.text').textContent = '点击录音';
|
|
recordStatus.textContent = '处理中...';
|
|
recordStatus.classList.remove('recording');
|
|
waveform.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// 发送音频
|
|
async function sendAudio(audioBlob) {
|
|
try {
|
|
showLoading();
|
|
|
|
const formData = new FormData();
|
|
formData.append('audio', audioBlob, 'recording.webm');
|
|
if (conversationId) {
|
|
formData.append('conversation_id', conversationId);
|
|
}
|
|
|
|
const resp = await fetch(`${API_URL}/voice/chat`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (!resp.ok) {
|
|
const error = await resp.text();
|
|
throw new Error(error);
|
|
}
|
|
|
|
const data = await resp.json();
|
|
conversationId = data.conversation_id;
|
|
|
|
// 显示消息
|
|
addMessage('user', '🎵 语音消息');
|
|
addMessage('assistant', data.reply);
|
|
|
|
recordStatus.textContent = '点击按钮开始录音';
|
|
|
|
} catch (e) {
|
|
console.error('发送失败:', e);
|
|
showError('发送失败: ' + e.message);
|
|
recordStatus.textContent = '发送失败，点击重试';
|
|
}
|
|
}
|
|
|
|
// 添加消息
|
|
function addMessage(role, content) {
|
|
// 移除提示
|
|
const hint = chatSection.querySelector('.hint');
|
|
if (hint) hint.remove();
|
|
|
|
// 移除加载
|
|
const loading = chatSection.querySelector('.loading');
|
|
if (loading) loading.remove();
|
|
|
|
const msg = document.createElement('div');
|
|
msg.className = `message ${role}`;
|
|
msg.innerHTML = `
|
|
<div class="role">${role === 'user' ? '我' : 'AI'}</div>
|
|
<div class="content">${content}</div>
|
|
`;
|
|
chatSection.appendChild(msg);
|
|
|
|
// 滚动到底部
|
|
chatSection.scrollTop = chatSection.scrollHeight;
|
|
}
|
|
|
|
// 显示加载
|
|
function showLoading() {
|
|
const hint = chatSection.querySelector('.hint');
|
|
if (hint) hint.remove();
|
|
|
|
const loading = document.createElement('div');
|
|
loading.className = 'loading';
|
|
loading.innerHTML = `
|
|
<div class="loading-dot"></div>
|
|
<div class="loading-dot"></div>
|
|
<div class="loading-dot"></div>
|
|
`;
|
|
chatSection.appendChild(loading);
|
|
chatSection.scrollTop = chatSection.scrollHeight;
|
|
}
|
|
|
|
// 显示错误
|
|
function showError(message) {
|
|
const loading = chatSection.querySelector('.loading');
|
|
if (loading) loading.remove();
|
|
|
|
const error = document.createElement('div');
|
|
error.className = 'error-message';
|
|
error.textContent = message;
|
|
chatSection.appendChild(error);
|
|
|
|
// 3秒后移除
|
|
setTimeout(() => error.remove(), 3000);
|
|
}
|
|
|
|
// 清除对话
|
|
async function clearChat() {
|
|
if (conversationId) {
|
|
try {
|
|
await fetch(`${API_URL}/conversation/${conversationId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
} catch (e) {}
|
|
}
|
|
|
|
conversationId = null;
|
|
chatSection.innerHTML = '<div class="hint">开始你的第一次语音对话吧！</div>';
|
|
}
|
|
|
|
// 事件绑定
|
|
recordBtn.addEventListener('click', () => {
|
|
if (isRecording) {
|
|
stopRecording();
|
|
} else {
|
|
startRecording();
|
|
}
|
|
});
|
|
|
|
clearBtn.addEventListener('click', clearChat);
|
|
|
|
// 初始化
|
|
checkStatus();
|
|
setInterval(checkStatus, 10000); // 每10秒检查状态
|
|
</script>
|
|
</body>
|
|
</html> |