diff --git a/web/static/js/app.js b/web/static/js/app.js
index 0be377f..8501e35 100644
--- a/web/static/js/app.js
+++ b/web/static/js/app.js
@@ -26,7 +26,7 @@ function saveApiKey() {
}
}
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
// 获取DOM元素
const textInput = document.getElementById('text');
const voiceSelect = document.getElementById('voice');
@@ -37,7 +37,6 @@ document.addEventListener('DOMContentLoaded', function() {
const pitchValue = document.getElementById('pitchValue');
const apiKeyInput = document.getElementById('api-key');
const apiKeyGroup = document.getElementById('api-key-group');
- const apiKeyButtons = document.getElementById('api-key-buttons');
const speakButton = document.getElementById('speak');
const downloadButton = document.getElementById('download');
const copyLinkButton = document.getElementById('copyLink');
@@ -47,11 +46,8 @@ document.addEventListener('DOMContentLoaded', function() {
const charCount = document.getElementById('charCount');
const toggleApiKeyButton = document.getElementById('toggle-api-key');
const apiKeyStatus = document.getElementById('api-key-status');
- const apiKeySaveButton = document.getElementById('api-key-save');
- const apiKeyClearButton = document.getElementById('api-key-clear');
- const apiKeyTestButton = document.getElementById('api-key-test');
+ const apiKeySaveButton = document.getElementById('apvi-key-save');
const togglePasswordButton = document.getElementById('toggle-password');
- const apiKeyHelp = document.getElementById('api-key-help');
// 保存最后一个音频URL
let lastAudioUrl = '';
@@ -64,24 +60,24 @@ document.addEventListener('DOMContentLoaded', function() {
loadApiKeyFromLocalStorage(); // 加载API Key
// 更新字符计数
- textInput.addEventListener('input', function() {
+ textInput.addEventListener('input', function () {
charCount.textContent = this.value.length;
});
// 更新语速值显示
- rateInput.addEventListener('input', function() {
+ rateInput.addEventListener('input', function () {
const value = this.value;
rateValue.textContent = value + '%';
});
// 更新语调值显示
- pitchInput.addEventListener('input', function() {
+ pitchInput.addEventListener('input', function () {
const value = this.value;
pitchValue.textContent = value + '%';
});
// 语音选择变化时更新可用风格
- voiceSelect.addEventListener('change', function() {
+ voiceSelect.addEventListener('change', function () {
updateStyleOptions();
});
@@ -185,7 +181,7 @@ document.addEventListener('DOMContentLoaded', function() {
speakButton.addEventListener('click', generateSpeech);
// 下载按钮点击事件
- downloadButton.addEventListener('click', function() {
+ downloadButton.addEventListener('click', function () {
if (lastAudioUrl) {
const a = document.createElement('a');
a.href = lastAudioUrl;
@@ -197,7 +193,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
// 复制链接按钮点击事件
- copyLinkButton.addEventListener('click', function() {
+ copyLinkButton.addEventListener('click', function () {
if (lastAudioUrl) {
// 获取完整的URL，包括域名部分
const fullUrl = new URL(lastAudioUrl, window.location.origin).href;
@@ -206,7 +202,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
// 复制HttpTTS链接按钮点击事件
- copyHttpTtsLinkButton.addEventListener('click', function() {
+ copyHttpTtsLinkButton.addEventListener('click', function () {
const text = textInput.value.trim();
if (!text) {
showCustomAlert('请输入要转换的文本', 'warning');
@@ -232,8 +228,7 @@ document.addEventListener('DOMContentLoaded', function() {
// 显示/隐藏API Key区域的按钮事件
if (toggleApiKeyButton) {
- toggleApiKeyButton.addEventListener('click', function() {
- console.log('API Key button clicked'); // 添加调试日志
+ toggleApiKeyButton.addEventListener('click', function () {
if (apiKeyGroup) {
apiKeyGroup.classList.toggle('hidden');
@@ -247,7 +242,7 @@ document.addEventListener('DOMContentLoaded', function() {
// API Key显示/隐藏功能
if (togglePasswordButton) {
- togglePasswordButton.addEventListener('click', function() {
+ togglePasswordButton.addEventListener('click', function () {
const type = apiKeyInput.getAttribute('type') === 'password' ? 'text' : 'password';
apiKeyInput.setAttribute('type', type);
@@ -265,11 +260,9 @@ document.addEventListener('DOMContentLoaded', function() {
});
}
- // 删除原有的保存API Key事件绑定，使用HTML onclick
-
// 按Enter键保存API Key
if (apiKeyInput) {
- apiKeyInput.addEventListener('keydown', function(event) {
+ apiKeyInput.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
event.preventDefault();
saveApiKey(); // 直接调用全局保存函数
@@ -277,72 +270,6 @@ document.addEventListener('DOMContentLoaded', function() {
});
}
- // 清除API Key
- if (apiKeyClearButton) {
- apiKeyClearButton.addEventListener('click', function() {
- apiKeyInput.value = '';
- localStorage.removeItem('apiKey');
- showNotification('API Key 已清除', 'success');
-
- // 更新状态提示
- apiKeyStatus.textContent = '';
- apiKeyStatus.className = 'api-key-status hidden';
- });
- }
-
- // 测试API Key
- if (apiKeyTestButton) {
- apiKeyTestButton.addEventListener('click', function() {
- const apiKey = apiKeyInput.value.trim();
- if (!apiKey) {
- showNotification('请先输入API Key再测试', 'warning');
- apiKeyInput.focus();
- return;
- }
-
- apiKeyTestButton.disabled = true;
- apiKeyTestButton.innerHTML = ' 测试中...';
-
- // 使用一个简单请求测试API Key
- fetch(`${config.basePath}/voices?limit=1`, {
- headers: {
- 'Authorization': `Bearer ${apiKey}`
- }
- })
- .then(response => {
- if (response.ok) {
- apiKeyStatus.textContent = 'API Key 有效';
- apiKeyStatus.className = 'api-key-status valid';
- apiKeyStatus.classList.remove('hidden');
- showNotification('API Key 验证成功', 'success');
- } else {
- apiKeyStatus.textContent = 'API Key 无效';
- apiKeyStatus.className = 'api-key-status invalid';
- apiKeyStatus.classList.remove('hidden');
- showNotification('API Key 验证失败', 'error');
- }
- })
- .catch(error => {
- console.error('测试API Key时出错:', error);
- apiKeyStatus.textContent = '测试失败，请检查网络';
- apiKeyStatus.className = 'api-key-status invalid';
- apiKeyStatus.classList.remove('hidden');
- showNotification('无法完成API Key测试', 'error');
- })
- .finally(() => {
- apiKeyTestButton.disabled = false;
- apiKeyTestButton.innerHTML = ' 测试';
- });
- });
- }
-
- // 显示帮助信息
- if (apiKeyHelp) {
- apiKeyHelp.addEventListener('click', function() {
- showNotification('Azure API Key 可在Microsoft Azure门户中的认知服务资源下找到。更多信息请访问帮助文档。', 'info', 8000);
- });
- }
-
// 增强音频播放器
enhanceAudioPlayer();
}
@@ -479,7 +406,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
// 开始观察DOM变化
- observer.observe(document.body, { childList: true, subtree: true });
+ observer.observe(document.body, {childList: true, subtree: true});
}
// 复制内容到剪贴板的通用函数
@@ -520,7 +447,7 @@ document.addEventListener('DOMContentLoaded', function() {
// 添加图标
let icon = '';
- switch(type) {
+ switch (type) {
case 'success':
icon = '';
break;
@@ -554,38 +481,6 @@ document.addEventListener('DOMContentLoaded', function() {
}, 300);
}, duration);
}
-
- // 添加特定的初始化函数来确保API Key按钮功能正常
- function ensureApiKeyFunctionality() {
- const saveApiKeyBtn = document.getElementById('api-key-save');
- if (saveApiKeyBtn && !saveApiKeyBtn.hasEventListener) {
- saveApiKeyBtn.hasEventListener = true;
- saveApiKeyBtn.addEventListener('click', function() {
- console.log('Save API Key button clicked (fallback)');
-
- const apiKeyInput = document.getElementById('api-key');
- if (apiKeyInput) {
- const apiKey = apiKeyInput.value.trim();
- if (apiKey) {
- localStorage.setItem('apiKey', apiKey);
- showCustomAlert('API Key 已成功保存', 'success');
-
- const apiKeyGroup = document.getElementById('api-key-group');
- if (apiKeyGroup) {
- apiKeyGroup.classList.add('hidden');
- }
- } else {
- showCustomAlert('请输入有效的API Key', 'warning');
- apiKeyInput.focus();
- }
- }
- });
- }
- }
-
- // 确保API Key功能在DOM加载后初始化
- setTimeout(ensureApiKeyFunctionality, 500);
-
// 添加自定义alert函数到全局范围
window.showCustomAlert = showCustomAlert;
});
@@ -683,6 +578,6 @@ function showCustomAlert(message, type = 'info', title = '', duration = 3000) {
// 替换全局的alert函数（可选，谨慎使用）
const originalAlert = window.alert;
-window.alert = function(message) {
+window.alert = function (message) {
showCustomAlert(message, 'info');
};
diff --git a/web/templates/index.html b/web/templates/index.html
index 6a2935d..deff643 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -615,28 +615,6 @@
transition: all 0.3s ease;
}
- .api-key-container::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- border-radius: 12px;
- padding: 1px;
- background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.3));
- -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
- -webkit-mask-composite: xor;
- mask-composite: exclude;
- z-index: 0;
- opacity: 0.7;
- }
-
- .api-key-container:hover::before {
- opacity: 1;
- background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(37, 99, 235, 0.2), rgba(59, 130, 246, 0.4));
- }
-
.api-key-header {
display: flex;
justify-content: space-between;
@@ -808,20 +786,19 @@
/* 管理API按钮增强 */
.manage-api-btn {
- background: rgba(59, 130, 246, 0.08);
+ background: rgba(59, 130, 246, 0);
color: #3b82f6;
padding: 0.35rem 0.75rem;
border-radius: 6px;
- font-size: 0.85rem;
+ font-size: 1rem;
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: all 0.2s ease;
- border: 1px solid rgba(59, 130, 246, 0.15);
}
.manage-api-btn:hover {
- background: rgba(59, 130, 246, 0.15);
+ background: rgba(59, 130, 246, 0);
color: #2563eb;
transform: translateY(-1px);
}
@@ -1031,14 +1008,14 @@
-
@@ -1070,6 +1047,10 @@
+
+
+
+
输入文本
@@ -1127,7 +1108,8 @@