feat: add API Key input and authentication for TTS requests

web/static/css/style.css

@@ -116,6 +116,46 @@ textarea:focus {
     color: #7f8c8d;
 }
 
+/* API Key 输入框样式 */
+#api-key-group {
+    margin-bottom: 15px;
+    background-color: #f8f9fa;
+    padding: 12px 15px;
+    border-radius: 6px;
+    border-left: 4px solid #3498db;
+}
+
+.api-key-container {
+    display: flex;
+    align-items: center;
+}
+
+.api-key-container label {
+    width: 80px; /* 增加标签宽度 */
+    flex-shrink: 0; /* 防止标签被压缩 */
+    margin-bottom: 0; /* 覆盖默认的底部边距 */
+}
+
+#api-key {
+    width: 100%;
+    padding: 8px 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-family: inherit;
+    font-size: 1rem;
+}
+
+#api-key:focus {
+    outline: none;
+    border-color: #3498db;
+    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+}
+
+#api-key::placeholder {
+    color: #aaa;
+    font-size: 0.9rem;
+}
+
 /* 设置区域 */
 .settings {
     display: grid;
@@ -260,12 +300,24 @@ footer a:hover {
     .settings {
         grid-template-columns: 1fr;
     }
-    
+
     header h1 {
         font-size: 2rem;
     }
-    
+
     .card {
         padding: 15px;
     }
+}
+
+.settings-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 20px;
+    width: 100%;
+}
+
+.half-width {
+    width: 48%;
 }

web/static/js/app.js

@@ -7,6 +7,8 @@ document.addEventListener('DOMContentLoaded', function() {
     const rateValue = document.getElementById('rateValue');
     const pitchInput = document.getElementById('pitch');
     const pitchValue = document.getElementById('pitchValue');
+    const apiKeyInput = document.getElementById('api-key');
+    const apiKeyGroup = document.getElementById('api-key-group');
     const speakButton = document.getElementById('speak');
     const downloadButton = document.getElementById('download');
     const copyLinkButton = document.getElementById('copyLink');
@@ -168,9 +170,15 @@ document.addEventListener('DOMContentLoaded', function() {
             const style = styleSelect.value;
             const rate = rateInput.value;
             const pitch = pitchInput.value;
+            const apiKey = apiKeyInput.value.trim();
 
             // 构建HttpTTS链接
-            const httpTtsLink = `${window.location.origin}${config.basePath}/tts?t={{java.encodeURI(speakText)}}&v=${voice}&r={{speakSpeed*4}}&p=${pitch}&s=${style}`;
+            let httpTtsLink = `${window.location.origin}${config.basePath}/tts?t={{java.encodeURI(speakText)}}&v=${voice}&r={{speakSpeed*4}}&p=${pitch}&s=${style}`;
+
+            // 添加API Key参数（如果有）
+            if (apiKey) {
+                httpTtsLink += `&api_key=${apiKey}`;
+            }
 
             copyToClipboard(httpTtsLink);
         });
@@ -212,6 +220,7 @@ document.addEventListener('DOMContentLoaded', function() {
         const style = styleSelect.value;
         const rate = rateInput.value;
         const pitch = pitchInput.value;
+        const apiKey = apiKeyInput.value.trim();
         
         // 禁用按钮，显示加载状态
         speakButton.disabled = true;
@@ -227,11 +236,34 @@ document.addEventListener('DOMContentLoaded', function() {
                 p: pitch
             });
             
+            // 添加API Key参数（如果有）
+            if (apiKey) {
+                params.append('api_key', apiKey);
+            }
+
             const url = `${config.basePath}/tts?${params.toString()}`;
             
+            // 使用fetch发送请求以便捕获HTTP状态码
+            const response = await fetch(url);
+
+            if (response.status === 401) {
+                // 显示API Key输入框
+                apiKeyGroup.style.display = 'flex';
+                alert('请输入有效的API Key以继续操作');
+                throw new Error('需要API Key授权');
+            }
+
+            if (!response.ok) {
+                throw new Error(`HTTP错误: ${response.status}`);
+            }
+
+            // 获取音频blob
+            const blob = await response.blob();
+            const audioUrl = URL.createObjectURL(blob);
+
             // 更新音频播放器
-            audioPlayer.src = url;
-            lastAudioUrl = url;
+            audioPlayer.src = audioUrl;
+            lastAudioUrl = url; // 保存原始URL用于下载和复制链接
             
             // 显示结果区域
             resultSection.style.display = 'block';
@@ -240,7 +272,9 @@ document.addEventListener('DOMContentLoaded', function() {
             audioPlayer.play();
         } catch (error) {
             console.error('生成语音失败:', error);
-            alert('生成语音失败，请重试');
+            if (error.message !== '需要API Key授权') {
+                alert('生成语音失败，请重试');
+            }
         } finally {
             // 恢复按钮状态
             speakButton.disabled = false;