feat: 重构项目以符合 Go 规范，添加 OpenAI 接口适配，优化长文本朗读功能（切割后合并）
This commit is contained in:
王锦强
271
web/static/css/style.css
Normal file
271
web/static/css/style.css
Normal file
@@ -0,0 +1,271 @@
|
||||
/* 基本样式重置 */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background-color: #f5f7fa;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 容器 */
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 页眉 */
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
header p {
|
||||
font-size: 1.2rem;
|
||||
color: #7f8c8d;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 导航 */
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
color: #3498db;
|
||||
margin: 0 15px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background-color: #3498db;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
nav a.active {
|
||||
background-color: #3498db;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
h2 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #ecf0f1;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #3498db;
|
||||
margin: 20px 0 10px;
|
||||
}
|
||||
|
||||
/* 输入区域 */
|
||||
.input-group {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
resize: none;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: #3498db;
|
||||
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
|
||||
}
|
||||
|
||||
.char-counter {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
font-size: 0.8rem;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
/* 设置区域 */
|
||||
.settings {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.setting-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
select, input[type="range"] {
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: #3498db;
|
||||
}
|
||||
|
||||
/* 按钮 */
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
background-color: #3498db;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.primary-button:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
background-color: #ecf0f1;
|
||||
color: #2c3e50;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.secondary-button:hover {
|
||||
background-color: #bdc3c7;
|
||||
}
|
||||
|
||||
/* 音频播放器 */
|
||||
.audio-player {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
audio {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.audio-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 表格 */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f8f9fa;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 代码 */
|
||||
code, pre {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 3px;
|
||||
padding: 2px 5px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 15px;
|
||||
overflow-x: auto;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* 页脚 */
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.settings {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
176
web/static/js/app.js
Normal file
176
web/static/js/app.js
Normal file
@@ -0,0 +1,176 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 获取DOM元素
|
||||
const textInput = document.getElementById('text');
|
||||
const voiceSelect = document.getElementById('voice');
|
||||
const rateInput = document.getElementById('rate');
|
||||
const rateValue = document.getElementById('rateValue');
|
||||
const pitchInput = document.getElementById('pitch');
|
||||
const pitchValue = document.getElementById('pitchValue');
|
||||
const speakButton = document.getElementById('speak');
|
||||
const downloadButton = document.getElementById('download');
|
||||
const copyLinkButton = document.getElementById('copyLink');
|
||||
const audioPlayer = document.getElementById('audioPlayer');
|
||||
const resultSection = document.getElementById('resultSection');
|
||||
const charCount = document.getElementById('charCount');
|
||||
|
||||
// 保存最后一个音频URL
|
||||
let lastAudioUrl = '';
|
||||
|
||||
// 初始化
|
||||
initVoicesList();
|
||||
initEventListeners();
|
||||
|
||||
// 更新字符计数
|
||||
textInput.addEventListener('input', function() {
|
||||
charCount.textContent = this.value.length;
|
||||
});
|
||||
|
||||
// 更新语速值显示
|
||||
rateInput.addEventListener('input', function() {
|
||||
const value = this.value;
|
||||
rateValue.textContent = value + '%';
|
||||
});
|
||||
|
||||
// 更新语调值显示
|
||||
pitchInput.addEventListener('input', function() {
|
||||
const value = this.value;
|
||||
pitchValue.textContent = value + '%';
|
||||
});
|
||||
|
||||
// 获取可用语音列表
|
||||
async function initVoicesList() {
|
||||
try {
|
||||
const response = await fetch(`${config.basePath}/voices`);
|
||||
if (!response.ok) throw new Error('获取语音列表失败');
|
||||
|
||||
const voices = await response.json();
|
||||
|
||||
// 清空并重建选项
|
||||
voiceSelect.innerHTML = '';
|
||||
|
||||
// 按语言和名称分组
|
||||
const voicesByLocale = {};
|
||||
|
||||
voices.forEach(voice => {
|
||||
if (!voicesByLocale[voice.locale]) {
|
||||
voicesByLocale[voice.locale] = [];
|
||||
}
|
||||
voicesByLocale[voice.locale].push(voice);
|
||||
});
|
||||
|
||||
// 创建选项组
|
||||
for (const locale in voicesByLocale) {
|
||||
const optgroup = document.createElement('optgroup');
|
||||
optgroup.label = voicesByLocale[locale][0].locale_name;
|
||||
|
||||
voicesByLocale[locale].forEach(voice => {
|
||||
const option = document.createElement('option');
|
||||
option.value = voice.short_name;
|
||||
option.textContent = `${voice.local_name || voice.display_name} (${voice.gender})`;
|
||||
|
||||
// 如果是默认语音则选中
|
||||
if (voice.short_name === config.defaultVoice) {
|
||||
option.selected = true;
|
||||
}
|
||||
|
||||
optgroup.appendChild(option);
|
||||
});
|
||||
|
||||
voiceSelect.appendChild(optgroup);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取语音列表失败:', error);
|
||||
voiceSelect.innerHTML = '<option value="">无法加载语音列表</option>';
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化事件监听器
|
||||
function initEventListeners() {
|
||||
// 转换按钮点击事件
|
||||
speakButton.addEventListener('click', generateSpeech);
|
||||
|
||||
// 下载按钮点击事件
|
||||
downloadButton.addEventListener('click', function() {
|
||||
if (lastAudioUrl) {
|
||||
const a = document.createElement('a');
|
||||
a.href = lastAudioUrl;
|
||||
a.download = 'speech.mp3';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
});
|
||||
|
||||
// 复制链接按钮点击事件
|
||||
copyLinkButton.addEventListener('click', function() {
|
||||
if (lastAudioUrl) {
|
||||
navigator.clipboard.writeText(lastAudioUrl).then(() => {
|
||||
alert('链接已复制到剪贴板');
|
||||
}).catch(err => {
|
||||
console.error('复制失败:', err);
|
||||
// 兼容处理
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = lastAudioUrl;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
alert('链接已复制到剪贴板');
|
||||
} catch (err) {
|
||||
console.error('复制失败:', err);
|
||||
}
|
||||
|
||||
document.body.removeChild(textArea);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 生成语音
|
||||
async function generateSpeech() {
|
||||
const text = textInput.value.trim();
|
||||
if (!text) {
|
||||
alert('请输入要转换的文本');
|
||||
return;
|
||||
}
|
||||
|
||||
const voice = voiceSelect.value;
|
||||
const rate = rateInput.value;
|
||||
const pitch = pitchInput.value;
|
||||
|
||||
// 禁用按钮，显示加载状态
|
||||
speakButton.disabled = true;
|
||||
speakButton.textContent = '生成中...';
|
||||
|
||||
try {
|
||||
// 构建URL参数
|
||||
const params = new URLSearchParams({
|
||||
t: text,
|
||||
v: voice,
|
||||
r: rate,
|
||||
p: pitch
|
||||
});
|
||||
|
||||
const url = `${config.basePath}/tts?${params.toString()}`;
|
||||
|
||||
// 更新音频播放器
|
||||
audioPlayer.src = url;
|
||||
lastAudioUrl = url;
|
||||
|
||||
// 显示结果区域
|
||||
resultSection.style.display = 'block';
|
||||
|
||||
// 播放音频
|
||||
audioPlayer.play();
|
||||
} catch (error) {
|
||||
console.error('生成语音失败:', error);
|
||||
alert('生成语音失败，请重试');
|
||||
} finally {
|
||||
// 恢复按钮状态
|
||||
speakButton.disabled = false;
|
||||
speakButton.textContent = '转换为语音';
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user