Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 53db607b8d | |||
| c346418d68 | |||
| 7de13ffc6d | |||
| 60db170c0d | |||
| 336e3cd12f | |||
| f0d9ca09aa | |||
| 36801e9266 | |||
| 5acd9f08f1 | |||
| 31732a6303 |
@@ -4,7 +4,7 @@ AI Chat App - 后台管理服务
|
||||
端口: 19021 (与前端同一端口)
|
||||
"""
|
||||
|
||||
from flask import Flask, jsonify, request, send_from_directory
|
||||
from flask import Flask, jsonify, request, send_from_directory, Response
|
||||
from flask_cors import CORS
|
||||
import os
|
||||
import json
|
||||
@@ -12,6 +12,8 @@ import sqlite3
|
||||
from datetime import datetime
|
||||
import hashlib
|
||||
import base64
|
||||
import asyncio
|
||||
import edge_tts
|
||||
|
||||
app = Flask(__name__, static_folder='../www')
|
||||
CORS(app)
|
||||
@@ -273,9 +275,27 @@ def init_db():
|
||||
('app_description', '提供智能对话、多种智能体服务', '应用简介'),
|
||||
('privacy_policy_url', '', '隐私政策链接'),
|
||||
('user_agreement_url', '', '用户协议链接'),
|
||||
('tts_provider', 'edge', 'TTS方案'),
|
||||
('tts_voice', 'zh-CN-XiaoxiaoNeural', 'TTS语音'),
|
||||
]
|
||||
for key, value, desc in default_configs:
|
||||
cursor.execute('INSERT INTO system_configs (key, value, description) VALUES (?, ?, ?)', (key, value, desc))
|
||||
else:
|
||||
# 检查并添加缺失的配置项（兼容旧数据库）
|
||||
default_configs = [
|
||||
('app_developer', 'OpenClaw Team', '开发者'),
|
||||
('app_update_date', '2026-04-27', '更新日期'),
|
||||
('app_technology', '智谱 GLM-4.5-Air 大模型', '技术基础'),
|
||||
('app_description', '提供智能对话、多种智能体服务', '应用简介'),
|
||||
('privacy_policy_url', '', '隐私政策链接'),
|
||||
('user_agreement_url', '', '用户协议链接'),
|
||||
('tts_provider', 'edge', 'TTS方案'),
|
||||
('tts_voice', 'zh-CN-XiaoxiaoNeural', 'TTS语音'),
|
||||
]
|
||||
for key, value, desc in default_configs:
|
||||
cursor.execute('SELECT COUNT(*) FROM system_configs WHERE key=?', (key,))
|
||||
if cursor.fetchone()[0] == 0:
|
||||
cursor.execute('INSERT INTO system_configs (key, value, description) VALUES (?, ?, ?)', (key, value, desc))
|
||||
|
||||
# 初始化管理员账户
|
||||
cursor.execute('SELECT COUNT(*) FROM admin_users')
|
||||
@@ -487,8 +507,9 @@ def get_users():
|
||||
|
||||
|
||||
@app.route('/api/admin/users/<int:id>', methods=['GET'])
|
||||
@app.route('/api/user/<int:id>', methods=['GET'])
|
||||
def get_user(id):
|
||||
"""获取单个用户"""
|
||||
"""获取单个用户信息"""
|
||||
conn = get_db()
|
||||
cursor = conn.cursor()
|
||||
cursor.execute('SELECT * FROM users WHERE id = ?', (id,))
|
||||
@@ -1371,12 +1392,62 @@ def get_frontend_config():
|
||||
'description': system.get('app_description', '提供智能对话、多种智能体服务'),
|
||||
'privacyPolicyUrl': system.get('privacy_policy_url', ''),
|
||||
'userAgreementUrl': system.get('user_agreement_url', ''),
|
||||
'ttsProvider': system.get('tts_provider', 'edge'),
|
||||
'ttsVoice': system.get('tts_voice', 'zh-CN-XiaoxiaoNeural'),
|
||||
}
|
||||
}
|
||||
|
||||
return jsonify(config)
|
||||
|
||||
|
||||
# ==================== TTS 语音合成 ====================
|
||||
|
||||
@app.route('/api/tts', methods=['POST'])
|
||||
def generate_tts():
|
||||
"""使用 Edge TTS 生成语音"""
|
||||
data = request.json
|
||||
text = data.get('text', '')
|
||||
voice = data.get('voice', 'zh-CN-XiaoxiaoNeural') # 默认中文女声
|
||||
|
||||
if not text:
|
||||
return jsonify({'error': '缺少文本内容'}), 400
|
||||
|
||||
try:
|
||||
# 使用 asyncio 运行 edge_tts
|
||||
async def generate_audio():
|
||||
communicate = edge_tts.Communicate(text, voice)
|
||||
audio_data = b''
|
||||
for chunk in communicate.stream_sync():
|
||||
if chunk['type'] == 'audio':
|
||||
audio_data += chunk['data']
|
||||
return audio_data
|
||||
|
||||
audio_data = asyncio.run(generate_audio())
|
||||
|
||||
# 返回音频数据（MP3格式）
|
||||
return Response(audio_data, mimetype='audio/mpeg')
|
||||
|
||||
except Exception as e:
|
||||
return jsonify({'error': f'TTS生成失败: {str(e)}'}), 500
|
||||
|
||||
|
||||
@app.route('/api/tts/voices', methods=['GET'])
|
||||
def get_tts_voices():
|
||||
"""获取可用的 TTS 语音列表"""
|
||||
try:
|
||||
voices = asyncio.run(edge_tts.list_voices())
|
||||
# 过滤中文语音
|
||||
chinese_voices = [v for v in voices if v['Locale'].startswith('zh-')]
|
||||
voice_list = [{
|
||||
'name': v['ShortName'],
|
||||
'gender': v['Gender'],
|
||||
'locale': v['Locale']
|
||||
} for v in chinese_voices]
|
||||
return jsonify({'voices': voice_list})
|
||||
except Exception as e:
|
||||
return jsonify({'error': f'获取语音列表失败: {str(e)}'}), 500
|
||||
|
||||
|
||||
# ==================== 启动 ====================
|
||||
|
||||
if __name__ == '__main__':
|
||||
|
||||
35
www/admin.js
35
www/admin.js
@@ -1399,6 +1399,39 @@ async function loadSystemPage(content) {
|
||||
<input type="text" class="form-input" id="adminPassword" value="${systemConfigs.admin_password?.value || ''}" placeholder="修改管理员密码">
|
||||
</div>
|
||||
|
||||
<h3 style="margin: 24px 0 16px; padding-top: 16px; border-top: 1px solid #e2e8f0;">TTS语音配置</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">TTS方案</label>
|
||||
<select class="form-input" id="ttsProvider">
|
||||
<option value="edge" ${systemConfigs.tts_provider?.value === 'edge' ? 'selected' : ''}>Edge TTS（免费）</option>
|
||||
</select>
|
||||
<span style="color: #999; font-size: 12px;">目前仅支持 Edge TTS，后续将添加更多方案</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">TTS语音</label>
|
||||
<select class="form-input" id="ttsVoice">
|
||||
<option value="zh-CN-XiaoxiaoNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaoxiaoNeural' ? 'selected' : ''}>晓晓（女声）</option>
|
||||
<option value="zh-CN-YunxiNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-YunxiNeural' ? 'selected' : ''}>云希（男声）</option>
|
||||
<option value="zh-CN-YunjianNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-YunjianNeural' ? 'selected' : ''}>云健（男声）</option>
|
||||
<option value="zh-CN-XiaoyiNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaoyiNeural' ? 'selected' : ''}>晓伊（女声）</option>
|
||||
<option value="zh-CN-YunfengNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-YunfengNeural' ? 'selected' : ''}>云枫（男声）</option>
|
||||
<option value="zh-CN-XiaochenNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaochenNeural' ? 'selected' : ''}>晓辰（女声）</option>
|
||||
<option value="zh-CN-XiaohanNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaohanNeural' ? 'selected' : ''}>晓涵（女声）</option>
|
||||
<option value="zh-CN-XiaomengNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaomengNeural' ? 'selected' : ''}>晓梦（女声）</option>
|
||||
<option value="zh-CN-XiaomoNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaomoNeural' ? 'selected' : ''}>晓墨（女声）</option>
|
||||
<option value="zh-CN-XiaoruiNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaoruiNeural' ? 'selected' : ''}>晓睿（女声）</option>
|
||||
<option value="zh-CN-XiaoshuangNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaoshuangNeural' ? 'selected' : ''}>晓双（女声）</option>
|
||||
<option value="zh-CN-XiaoxuanNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaoxuanNeural' ? 'selected' : ''}>晓萱（女声）</option>
|
||||
<option value="zh-CN-XiaoyanNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaoyanNeural' ? 'selected' : ''}>晓颜（女声）</option>
|
||||
<option value="zh-CN-XiaoyouNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaoyouNeural' ? 'selected' : ''}>晓悠（女声）</option>
|
||||
<option value="zh-CN-YunyaNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-YunyaNeural' ? 'selected' : ''}>云雅（女声）</option>
|
||||
<option value="zh-CN-YunyangNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-YunyangNeural' ? 'selected' : ''}>云扬（男声）</option>
|
||||
</select>
|
||||
<span style="color: #999; font-size: 12px;">选择AI回复的朗读语音</span>
|
||||
</div>
|
||||
|
||||
<h3 style="margin: 24px 0 16px; padding-top: 16px; border-top: 1px solid #e2e8f0;">链接配置</h3>
|
||||
|
||||
<div class="form-group">
|
||||
@@ -1436,6 +1469,8 @@ async function saveSystemConfig() {
|
||||
admin_password: document.getElementById('adminPassword').value,
|
||||
privacy_policy_url: document.getElementById('privacyPolicyUrl').value,
|
||||
user_agreement_url: document.getElementById('userAgreementUrl').value,
|
||||
tts_provider: document.getElementById('ttsProvider').value,
|
||||
tts_voice: document.getElementById('ttsVoice').value,
|
||||
};
|
||||
|
||||
await fetchAPI('/api/admin/system', 'POST', data);
|
||||
|
||||
377
www/app.js
377
www/app.js
@@ -52,6 +52,13 @@ let backendConfig = null; // 从API获取的配置
|
||||
// 用户状态
|
||||
let currentUser = null; // 当前登录用户 { username, password, registeredAt }
|
||||
|
||||
// TTS 语音播放状态
|
||||
let enableTTS = false; // 是否启用语音播放（默认关闭）
|
||||
let currentPlayingAudio = null; // 当前播放的音频对象
|
||||
let ttsVoice = 'zh-CN-XiaoxiaoNeural'; // TTS 语音
|
||||
let ttsQueue = []; // TTS 待播放队列
|
||||
let isTTSPlaying = false; // 是否正在播放队列
|
||||
|
||||
// 每日使用统计（未登录用户）
|
||||
let dailyUsage = {
|
||||
date: null, // 日期 YYYY-MM-DD
|
||||
@@ -124,6 +131,21 @@ async function loadBackendConfig() {
|
||||
|
||||
// 不加载默认启用的工具，所有工具默认未启用
|
||||
|
||||
// 将后台系统配置赋值到 CONFIG
|
||||
if (backendConfig.system) {
|
||||
CONFIG.system = backendConfig.system;
|
||||
// 加载 TTS 配置
|
||||
ttsVoice = backendConfig.system.ttsVoice || 'zh-CN-XiaoxiaoNeural';
|
||||
}
|
||||
|
||||
// 将后台 LLM 配置赋值到 CONFIG
|
||||
if (backendConfig.llm) {
|
||||
CONFIG.apiUrl = backendConfig.llm.api_url;
|
||||
CONFIG.apiKey = backendConfig.llm.api_key;
|
||||
CONFIG.model = backendConfig.llm.model;
|
||||
CONFIG.maxTokens = backendConfig.llm.max_tokens || 2048;
|
||||
}
|
||||
|
||||
updateAgentsDisplay();
|
||||
console.log('后台配置已加载', backendConfig);
|
||||
} catch (e) {
|
||||
@@ -308,15 +330,41 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
// 初始化 appContainer
|
||||
appContainer = document.getElementById('app');
|
||||
|
||||
// 加载后台配置（包含 LLM、智能体等）
|
||||
await loadBackendConfig();
|
||||
|
||||
// 加载用户登录状态（优先检查）
|
||||
const savedUser = localStorage.getItem('currentUser');
|
||||
if (savedUser) {
|
||||
currentUser = JSON.parse(savedUser);
|
||||
}
|
||||
|
||||
// 如果用户已登录且有ID，从 backend 加载对话数据
|
||||
// 如果用户已登录且有ID，从 backend 加载最新用户信息和对话数据
|
||||
if (currentUser && currentUser.id) {
|
||||
try {
|
||||
// 从后台获取最新用户信息（包括头像）
|
||||
const userRes = await fetch(`/api/user/${currentUser.id}`);
|
||||
if (userRes.ok) {
|
||||
const userData = await userRes.json();
|
||||
if (userData && userData.id) {
|
||||
// 更新 currentUser 为后台最新数据
|
||||
currentUser = {
|
||||
id: userData.id,
|
||||
username: userData.username,
|
||||
phone: userData.phone || '',
|
||||
email: userData.email || '',
|
||||
avatar: userData.avatar || '👤',
|
||||
signature: userData.signature || '',
|
||||
gender: userData.gender || '',
|
||||
age: userData.age || '',
|
||||
region: userData.region || '',
|
||||
registeredAt: Date.now()
|
||||
};
|
||||
saveCurrentUser();
|
||||
}
|
||||
}
|
||||
|
||||
// 从 backend 加载对话数据
|
||||
const res = await fetch(`/api/user/${currentUser.id}/conversations`);
|
||||
const data = await res.json();
|
||||
if (Array.isArray(data) && data.length > 0) {
|
||||
@@ -424,13 +472,8 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
currentPage = savedPage;
|
||||
}
|
||||
|
||||
// 加载后台配置并显示主页
|
||||
loadBackendConfig().then(() => {
|
||||
showMainPage();
|
||||
}).catch(() => {
|
||||
// 即使加载失败也显示主页
|
||||
showMainPage();
|
||||
});
|
||||
// 显示主页
|
||||
showMainPage();
|
||||
});
|
||||
|
||||
// 根据用户配置更新显示的智能体
|
||||
@@ -789,10 +832,10 @@ function renderAgentsPage() {
|
||||
<div class="recent-agent-item" data-conv-id="${conv.id}">
|
||||
<div class="recent-agent-left">
|
||||
<span class="recent-agent-avatar">${conv.agent ? conv.agent.avatar : '🤖'}</span>
|
||||
<span class="recent-agent-name">${conv.agent ? conv.agent.name : '未知智能体'}</span>
|
||||
<span class="recent-agent-title">${conv.title}</span>
|
||||
</div>
|
||||
<div class="recent-agent-right">
|
||||
<span class="recent-agent-title">${conv.title}</span>
|
||||
<span class="recent-agent-agent-name">${conv.agent ? conv.agent.name : '未知智能体'}</span>
|
||||
<span class="recent-agent-time">${formatTime(conv.updatedAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1324,6 +1367,7 @@ function filterDiscoverAgents(keyword) {
|
||||
if (!keyword) {
|
||||
// 显示所有
|
||||
showDiscoverSection('hot', systemAgents.filter(a => a.category === 'hot'));
|
||||
showDiscoverSection('basic', systemAgents.filter(a => a.category === 'basic'));
|
||||
showDiscoverSection('work', systemAgents.filter(a => a.category === 'work'));
|
||||
showDiscoverSection('study', systemAgents.filter(a => a.category === 'study'));
|
||||
showDiscoverSection('life', systemAgents.filter(a => a.category === 'life'));
|
||||
@@ -1338,6 +1382,7 @@ function filterDiscoverAgents(keyword) {
|
||||
|
||||
// 显示搜索结果
|
||||
showDiscoverSection('hot', filtered.filter(a => a.category === 'hot'));
|
||||
showDiscoverSection('basic', filtered.filter(a => a.category === 'basic'));
|
||||
showDiscoverSection('work', filtered.filter(a => a.category === 'work'));
|
||||
showDiscoverSection('study', filtered.filter(a => a.category === 'study'));
|
||||
showDiscoverSection('life', filtered.filter(a => a.category === 'life'));
|
||||
@@ -2611,7 +2656,12 @@ function showAboutPage() {
|
||||
const privacyPolicyBtn = document.getElementById('privacyPolicyBtn');
|
||||
if (privacyPolicyBtn) {
|
||||
privacyPolicyBtn.addEventListener('click', () => {
|
||||
showToast('隐私政策页面待完善');
|
||||
const privacyUrl = CONFIG?.system?.privacyPolicyUrl;
|
||||
if (privacyUrl) {
|
||||
window.open(privacyUrl, '_blank');
|
||||
} else {
|
||||
showToast('隐私政策链接未配置');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -2619,7 +2669,12 @@ function showAboutPage() {
|
||||
const userAgreementBtn = document.getElementById('userAgreementBtn');
|
||||
if (userAgreementBtn) {
|
||||
userAgreementBtn.addEventListener('click', () => {
|
||||
showToast('用户协议页面待完善');
|
||||
const agreementUrl = CONFIG?.system?.userAgreementUrl;
|
||||
if (agreementUrl) {
|
||||
window.open(agreementUrl, '_blank');
|
||||
} else {
|
||||
showToast('用户协议链接未配置');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -3003,10 +3058,10 @@ function showAgentHistoryPage() {
|
||||
<div class="agent-history-item" data-conv-id="${conv.id}">
|
||||
<div class="agent-history-left">
|
||||
<span class="agent-history-avatar">${conv.agent ? conv.agent.avatar : '🤖'}</span>
|
||||
<span class="agent-history-agent-name">${conv.agent ? conv.agent.name : '未知智能体'}</span>
|
||||
<span class="agent-history-title">${conv.title}</span>
|
||||
</div>
|
||||
<div class="agent-history-right">
|
||||
<span class="agent-history-title">${conv.title}</span>
|
||||
<span class="agent-history-agent-name">${conv.agent ? conv.agent.name : '未知智能体'}</span>
|
||||
<span class="agent-history-time">${formatTime(conv.updatedAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3084,6 +3139,10 @@ async function openAgent(agentId) {
|
||||
}
|
||||
}
|
||||
|
||||
// 重置 TTS 状态（新对话默认关闭）
|
||||
enableTTS = false;
|
||||
stopTTSQueue();
|
||||
|
||||
// 创建新对话并设置智能体
|
||||
const newConv = {
|
||||
id: backendId || Date.now().toString(),
|
||||
@@ -3106,6 +3165,9 @@ async function openAgent(agentId) {
|
||||
function showAgentChatPage() {
|
||||
if (!currentAgent || !currentConversation) return;
|
||||
|
||||
// 停止之前的 TTS 播放
|
||||
stopTTSQueue();
|
||||
|
||||
const chatHtml = `
|
||||
<div class="chat-page">
|
||||
<header class="chat-header">
|
||||
@@ -3119,6 +3181,9 @@ function showAgentChatPage() {
|
||||
<p class="agent-desc-header">${currentAgent.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="feature-btn tts-btn ${enableTTS ? 'active' : ''}" id="ttsBtn" title="语音播放">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.54 7-8.77s-2.99-7.86-7-8.77z"/></svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="messages-container" id="messagesContainer">
|
||||
@@ -3211,6 +3276,21 @@ function showAgentChatPage() {
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定 TTS 开关按钮（智能体对话）
|
||||
const ttsBtn = document.getElementById('ttsBtn');
|
||||
if (ttsBtn) {
|
||||
ttsBtn.addEventListener('click', () => {
|
||||
enableTTS = !enableTTS;
|
||||
ttsBtn.classList.toggle('active', enableTTS);
|
||||
showToast(enableTTS ? '语音播放已开启' : '语音播放已关闭');
|
||||
// 如果关闭，停止当前播放
|
||||
if (!enableTTS && currentPlayingAudio) {
|
||||
currentPlayingAudio.pause();
|
||||
currentPlayingAudio = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定功能开关按钮事件
|
||||
if (thinkingBtn) {
|
||||
thinkingBtn.addEventListener('click', () => {
|
||||
@@ -3545,6 +3625,10 @@ async function createNewConversation() {
|
||||
return;
|
||||
}
|
||||
|
||||
// 重置 TTS 状态（新对话默认关闭）
|
||||
enableTTS = false;
|
||||
stopTTSQueue();
|
||||
|
||||
// 如果用户已登录，先在 backend 创建对话
|
||||
let backendId = null;
|
||||
if (currentUser && currentUser.id) {
|
||||
@@ -3582,6 +3666,9 @@ async function createNewConversation() {
|
||||
|
||||
// 打开对话
|
||||
function openConversation(id) {
|
||||
// 停止之前的 TTS 播放
|
||||
stopTTSQueue();
|
||||
|
||||
currentConversation = conversations.find(c => c.id === id);
|
||||
if (!currentConversation) {
|
||||
showConversationList();
|
||||
@@ -3603,8 +3690,8 @@ function openConversation(id) {
|
||||
<span class="logo">🤖</span>
|
||||
<h1>${escapeHtml(currentConversation.title)}</h1>
|
||||
</div>
|
||||
<button class="clear-btn" id="clearBtn" title="清空对话">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
|
||||
<button class="feature-btn tts-btn ${enableTTS ? 'active' : ''}" id="ttsBtn" title="语音播放">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.54 7-8.77s-2.99-7.86-7-8.77z"/></svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
@@ -3702,8 +3789,20 @@ function openConversation(id) {
|
||||
const backBtn = document.getElementById('backBtn');
|
||||
if (backBtn) backBtn.addEventListener('click', showConversationList);
|
||||
|
||||
const clearBtn = document.getElementById('clearBtn');
|
||||
if (clearBtn) clearBtn.addEventListener('click', clearCurrentChat);
|
||||
// 绑定 TTS 开关按钮
|
||||
const ttsBtn = document.getElementById('ttsBtn');
|
||||
if (ttsBtn) {
|
||||
ttsBtn.addEventListener('click', () => {
|
||||
enableTTS = !enableTTS;
|
||||
ttsBtn.classList.toggle('active', enableTTS);
|
||||
showToast(enableTTS ? '语音播放已开启' : '语音播放已关闭');
|
||||
// 如果关闭，停止当前播放
|
||||
if (!enableTTS && currentPlayingAudio) {
|
||||
currentPlayingAudio.pause();
|
||||
currentPlayingAudio = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定功能开关按钮事件
|
||||
if (thinkingBtn) {
|
||||
@@ -4005,6 +4104,8 @@ async function streamGenerate(userMsgIndex) {
|
||||
let buffer = '';
|
||||
let thinkingOutputStarted = false; // 正式内容是否开始输出
|
||||
let abortController = new AbortController(); // 用于中断流
|
||||
let ttsAccumulatedText = ''; // TTS 累计文本
|
||||
let ttsLastPlayedIndex = 0; // 上次播放的文本位置
|
||||
|
||||
// 绑定停止按钮事件
|
||||
const stopBtn = document.getElementById('stopGenerateBtn');
|
||||
@@ -4074,6 +4175,32 @@ async function streamGenerate(userMsgIndex) {
|
||||
|
||||
currentConversation.messages[aiMessageIndex].content += delta.content;
|
||||
contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content) + '<span class="streaming-cursor">▌</span>';
|
||||
|
||||
// 流式TTS播放：积累文本并播放
|
||||
if (enableTTS) {
|
||||
ttsAccumulatedText += delta.content;
|
||||
// 每80字符播放一段（避免太短频繁请求）
|
||||
if (ttsAccumulatedText.length >= 80) {
|
||||
// 找到合适的断句点（句子结束）
|
||||
const breakPoints = ['。', '！', '？', '；', '.', '!', '?', ';', '\n'];
|
||||
let breakIndex = -1;
|
||||
for (let i = ttsAccumulatedText.length - 1; i >= ttsLastPlayedIndex + 40; i--) {
|
||||
if (breakPoints.includes(ttsAccumulatedText[i])) {
|
||||
breakIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
// 如果找到断句点，或者积累超过120字符强制播放
|
||||
if (breakIndex >= 0 || ttsAccumulatedText.length - ttsLastPlayedIndex >= 120) {
|
||||
const textToPlay = ttsAccumulatedText.slice(ttsLastPlayedIndex, breakIndex >= 0 ? breakIndex + 1 : ttsAccumulatedText.length);
|
||||
if (textToPlay.trim()) {
|
||||
addToTTSQueue(textToPlay.trim());
|
||||
}
|
||||
ttsLastPlayedIndex = breakIndex >= 0 ? breakIndex + 1 : ttsAccumulatedText.length;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
scrollToBottom();
|
||||
}
|
||||
}
|
||||
@@ -4087,11 +4214,21 @@ async function streamGenerate(userMsgIndex) {
|
||||
thinkingEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].thinking);
|
||||
}
|
||||
contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content);
|
||||
|
||||
// 播放剩余未播放的文本（流式TTS）
|
||||
if (enableTTS && ttsAccumulatedText && ttsLastPlayedIndex < ttsAccumulatedText.length) {
|
||||
const remainingText = ttsAccumulatedText.slice(ttsLastPlayedIndex).trim();
|
||||
if (remainingText) {
|
||||
addToTTSQueue(remainingText);
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
currentConversation.messages[aiMessageIndex].content = `抱歉，出现了错误：${error.message}\n\n请检查网络连接后重试。`;
|
||||
contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content);
|
||||
// 出错时停止TTS队列
|
||||
stopTTSQueue();
|
||||
} finally {
|
||||
isLoading = false;
|
||||
sendBtn.disabled = false;
|
||||
@@ -4601,6 +4738,8 @@ function renderMessages() {
|
||||
|
||||
const copyIcon = `<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`;
|
||||
|
||||
const playIcon = `<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.54 7-8.77s-2.99-7.86-7-8.77z"/></svg>`;
|
||||
|
||||
const actions = isUser
|
||||
? `<div class="message-actions">
|
||||
<button class="action-btn copy-btn" data-index="${index}" title="复制">${copyIcon}</button>
|
||||
@@ -4609,6 +4748,7 @@ function renderMessages() {
|
||||
</button>
|
||||
</div>`
|
||||
: `<div class="message-actions">
|
||||
<button class="action-btn tts-btn" data-index="${index}" title="语音播放">${playIcon}</button>
|
||||
<button class="action-btn copy-btn" data-index="${index}" title="复制">${copyIcon}</button>
|
||||
<button class="action-btn regenerate-btn" data-index="${index}" title="重新生成">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
|
||||
@@ -4632,6 +4772,9 @@ function renderMessages() {
|
||||
}).join('');
|
||||
|
||||
// 绑定消息操作按钮事件（事件委托）
|
||||
messagesDiv.querySelectorAll('.tts-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => playTTS(parseInt(btn.dataset.index)));
|
||||
});
|
||||
messagesDiv.querySelectorAll('.copy-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => copyMessage(parseInt(btn.dataset.index)));
|
||||
});
|
||||
@@ -4645,6 +4788,204 @@ function renderMessages() {
|
||||
scrollToBottom();
|
||||
}
|
||||
|
||||
// ==================== TTS 队列播放 ====================
|
||||
|
||||
// 清理 TTS 文本（过滤Markdown特殊字符和表情）
|
||||
function cleanTTSText(text) {
|
||||
if (!text) return '';
|
||||
|
||||
let cleaned = text;
|
||||
|
||||
// 移除代码块（```code```）
|
||||
cleaned = cleaned.replace(/```[\s\S]*?```/g, '');
|
||||
|
||||
// 移除行内代码（`code`）
|
||||
cleaned = cleaned.replace(/`[^`]+`/g, '');
|
||||
|
||||
// 移除标题符号（#、##、###等）
|
||||
cleaned = cleaned.replace(/^#{1,6}\s*/gm, '');
|
||||
|
||||
// 移除列表符号（-、*、+）
|
||||
cleaned = cleaned.replace(/^[\-\*\+]\s+/gm, '');
|
||||
|
||||
// 移除数字列表（1.、2.等）
|
||||
cleaned = cleaned.replace(/^\d+\.\s+/gm, '');
|
||||
|
||||
// 处理链接 [text](url) -> 只保留text
|
||||
cleaned = cleaned.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
|
||||
|
||||
// 移除粗体/斜体符号（**text**、*text*、__text__、_text_）
|
||||
cleaned = cleaned.replace(/\*\*([^*]+)\*\*/g, '$1');
|
||||
cleaned = cleaned.replace(/\*([^*]+)\*/g, '$1');
|
||||
cleaned = cleaned.replace(/__([^_]+)__/g, '$1');
|
||||
cleaned = cleaned.replace(/_([^_]+)_/g, '$1');
|
||||
|
||||
// 移除引用符号（>）
|
||||
cleaned = cleaned.replace(/^>\s*/gm, '');
|
||||
|
||||
// 移除分割线（---、***）
|
||||
cleaned = cleaned.replace(/^[\-\*]{3,}$/gm, '');
|
||||
|
||||
// 移除表情符号（常见emoji范围）
|
||||
cleaned = cleaned.replace(/[\u{1F600}-\u{1F64F}]/gu, ''); // 表情
|
||||
cleaned = cleaned.replace(/[\u{1F300}-\u{1F5FF}]/gu, ''); // 符号和图形
|
||||
cleaned = cleaned.replace(/[\u{1F680}-\u{1F6FF}]/gu, ''); // 交通和地图
|
||||
cleaned = cleaned.replace(/[\u{1F700}-\u{1F77F}]/gu, ''); // 占星术
|
||||
cleaned = cleaned.replace(/[\u{1F780}-\u{1F7FF}]/gu, ''); // 几何图形
|
||||
cleaned = cleaned.replace(/[\u{1F800}-\u{1F8FF}]/gu, ''); // 补充箭头
|
||||
cleaned = cleaned.replace(/[\u{1F900}-\u{1F9FF}]/gu, ''); // 补充符号
|
||||
cleaned = cleaned.replace(/[\u{1FA00}-\u{1FA6F}]/gu, ''); // 游戏符号
|
||||
cleaned = cleaned.replace(/[\u{1FA70}-\u{1FAFF}]/gu, ''); // 补充符号B
|
||||
cleaned = cleaned.replace(/[\u{2600}-\u{26FF}]/gu, ''); // 杂项符号
|
||||
cleaned = cleaned.replace(/[\u{2700}-\u{27BF}]/gu, ''); // 装饰符号
|
||||
cleaned = cleaned.replace(/[\u{FE00}-\u{FE0F}]/gu, ''); // 变体选择符
|
||||
cleaned = cleaned.replace(/[\u{1F1E0}-\u{1F1FF}]/gu, ''); // 旗帜
|
||||
|
||||
// 移除HTML实体
|
||||
cleaned = cleaned.replace(/&[a-zA-Z]+;/g, '');
|
||||
|
||||
// 清理多余空白
|
||||
cleaned = cleaned.replace(/\s+/g, ' ').trim();
|
||||
|
||||
return cleaned;
|
||||
}
|
||||
|
||||
// 添加文本到 TTS 队列
|
||||
async function addToTTSQueue(text) {
|
||||
if (!text || !enableTTS) return;
|
||||
|
||||
ttsQueue.push(text);
|
||||
|
||||
// 如果没有在播放，开始播放队列
|
||||
if (!isTTSPlaying) {
|
||||
playTTSQueue();
|
||||
}
|
||||
}
|
||||
|
||||
// 播放 TTS 队列
|
||||
async function playTTSQueue() {
|
||||
if (ttsQueue.length === 0) {
|
||||
isTTSPlaying = false;
|
||||
return;
|
||||
}
|
||||
|
||||
isTTSPlaying = true;
|
||||
|
||||
while (ttsQueue.length > 0 && enableTTS) {
|
||||
const rawText = ttsQueue.shift();
|
||||
const text = cleanTTSText(rawText); // 清理文本
|
||||
|
||||
if (!text) continue; // 跳过空文本
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/tts', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ text, voice: ttsVoice })
|
||||
});
|
||||
|
||||
if (!response.ok || !enableTTS) break;
|
||||
|
||||
const audioBlob = await response.blob();
|
||||
const audioUrl = URL.createObjectURL(audioBlob);
|
||||
|
||||
// 播放音频
|
||||
currentPlayingAudio = new Audio(audioUrl);
|
||||
await currentPlayingAudio.play();
|
||||
|
||||
// 等待播放完成
|
||||
await new Promise(resolve => {
|
||||
currentPlayingAudio.onended = resolve;
|
||||
currentPlayingAudio.onerror = resolve;
|
||||
});
|
||||
|
||||
URL.revokeObjectURL(audioUrl);
|
||||
currentPlayingAudio = null;
|
||||
|
||||
} catch (e) {
|
||||
console.error('TTS播放失败:', e);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
isTTSPlaying = false;
|
||||
ttsQueue = []; // 清空队列
|
||||
}
|
||||
|
||||
// 停止 TTS 队列播放
|
||||
function stopTTSQueue() {
|
||||
ttsQueue = [];
|
||||
isTTSPlaying = false;
|
||||
if (currentPlayingAudio) {
|
||||
currentPlayingAudio.pause();
|
||||
currentPlayingAudio = null;
|
||||
}
|
||||
}
|
||||
|
||||
// TTS 手动播放（点击消息上的播放按钮）
|
||||
async function playTTS(index) {
|
||||
if (!currentConversation || index < 0) return;
|
||||
|
||||
const msg = currentConversation.messages[index];
|
||||
if (!msg || msg.role !== 'assistant') return;
|
||||
|
||||
const rawText = msg.content;
|
||||
if (!rawText) {
|
||||
showToast('没有可播放的内容');
|
||||
return;
|
||||
}
|
||||
|
||||
const text = cleanTTSText(rawText); // 清理文本
|
||||
if (!text) {
|
||||
showToast('没有可播放的内容');
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果正在播放或队列中有内容，停止
|
||||
if (currentPlayingAudio || isTTSPlaying) {
|
||||
stopTTSQueue();
|
||||
showToast('已停止播放');
|
||||
return;
|
||||
}
|
||||
|
||||
// 调用后端 TTS API
|
||||
try {
|
||||
showToast('正在生成语音...');
|
||||
|
||||
const response = await fetch('/api/tts', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ text, voice: ttsVoice })
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
showToast(error.error || '语音生成失败');
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取音频数据
|
||||
const audioBlob = await response.blob();
|
||||
const audioUrl = URL.createObjectURL(audioBlob);
|
||||
|
||||
// 播放音频
|
||||
currentPlayingAudio = new Audio(audioUrl);
|
||||
await currentPlayingAudio.play();
|
||||
|
||||
showToast('开始播放');
|
||||
|
||||
// 播放完成后释放资源
|
||||
currentPlayingAudio.onended = () => {
|
||||
URL.revokeObjectURL(audioUrl);
|
||||
currentPlayingAudio = null;
|
||||
};
|
||||
|
||||
} catch (e) {
|
||||
console.error('TTS播放失败:', e);
|
||||
showToast('语音播放失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 折叠/展开思考内容
|
||||
function toggleThinking(block) {
|
||||
block.classList.toggle('expanded');
|
||||
|
||||
@@ -1731,14 +1731,23 @@ body {
|
||||
}
|
||||
|
||||
.recent-agent-title {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.recent-agent-agent-name {
|
||||
font-size: 12px;
|
||||
color: var(--primary);
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 智能体历史页面 */
|
||||
.agent-history-page {
|
||||
display: flex;
|
||||
@@ -1809,8 +1818,9 @@ body {
|
||||
}
|
||||
|
||||
.agent-history-title {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -1818,9 +1828,11 @@ body {
|
||||
}
|
||||
|
||||
.agent-history-agent-name {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ==================== 我的页面 ==================== */
|
||||
@@ -2383,7 +2395,8 @@ body {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
/* TTS 语音播放按钮 */
|
||||
.tts-btn {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
@@ -2392,10 +2405,18 @@ body {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clear-btn:active {
|
||||
.tts-btn:hover {
|
||||
background: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.tts-btn.active {
|
||||
background: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
.tts-btn svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.messages-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
Reference in New Issue
Block a user