'commit'

dsLightRag/static/Suno/music_progress.html

@@ -22,6 +22,8 @@
         .audio-player { width: 100%; margin-top: 20px; }
         .back-button { display: block; margin: 30px auto 0; padding: 12px 30px; background-color: #3498db; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; transition: background 0.3s; text-align: center; text-decoration: none; max-width: 200px; }
         .back-button:hover { background-color: #2980b9; }
+        /* 添加按钮容器样式 */
+        .button-container { display: flex; justify-content: center; gap: 15px; margin-top: 30px; }
     </style>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
@@ -49,7 +51,9 @@
             </audio>
         </div>
 
-        <a href="index.html" class="back-button"><i class="fas fa-arrow-left"></i> 返回创作页</a>
+        <div class="button-container">
+            <a href="index.html" class="action-button back-button"><i class="fas fa-arrow-left"></i> 返回创作页</a>
+        </div>
     </div>
 
     <script>
@@ -63,14 +67,26 @@
                 return;
             }
 
-            // 轮询任务状态
-            let progressInterval;
+            // 轮询任务状态配置
+            const queryInterval = 3000;  // 3秒查询一次
+            const maxQueries = 120;      // 最多查询120次（6分钟）
+            let queryCount = 0;          // 当前查询次数
+            const startTime = new Date().getTime();  // 开始时间
             let progress = 0;
+            let timerId = null;  // 用于存储setTimeout的ID
 
             function checkTaskStatus() {
+                if (queryCount >= maxQueries) {
+                    const elapsedTime = Math.round((new Date().getTime() - startTime) / 1000);
+                    document.getElementById('statusMessage').innerHTML = `<i class="fas fa-exclamation-circle"></i> 音乐生成超时（已等待${elapsedTime}秒），您可以稍后在历史记录中查看，或重新生成。`;
+                    document.getElementById('progressText').textContent = '生成超时';
+                    return;
+                }
+
                 fetch(`/api/suno/check_task_status?task_id=${taskId}`)
                     .then(response => response.json())
                     .then(data => {
+                        queryCount++;
                         // 更新状态信息
                         const statusMessage = document.getElementById('statusMessage');
                         const progressFill = document.getElementById('progressFill');
@@ -80,7 +96,6 @@
                         const responseData = data.data || data;
 
                         if (responseData.status === 'error') {
-                            clearInterval(progressInterval);
                             statusMessage.innerHTML = `<i class="fas fa-exclamation-circle"></i> 生成失败: ${responseData.error || responseData.error_message || '未知错误'}`;
                             statusMessage.style.backgroundColor = '#ffebee';
                             statusMessage.style.borderColor = '#ef9a9a';
@@ -94,21 +109,22 @@
                             progress = Math.min(responseData.progress, 100);
                         } else if (responseData.status === 'completed') {
                             progress = 100;
-                        } else if (responseData.status === 'processing') {
-                            // 改进模拟进度增加逻辑
-                            if (progress < 95) {
-                                progress += 0.5;
-                            } else if (progress < 100) {
-                                progress += 0.1;
-                            }
+                        } else {
+                            // 扩展：任何非完成/非错误状态都更新模拟进度
+                            // 计算进度比例 (查询次数/最大查询次数)，限制在98%以内
+                            const progressRatio = Math.min(0.98, queryCount / maxQueries);
+                            // 使用平滑增长函数而不是线性增长
+                            progress = 100 * (1 - Math.exp(-3 * progressRatio));
                         }
 
+                        // 计算已等待时间
+                        const elapsedTime = Math.round((new Date().getTime() - startTime) / 1000);
                         progressFill.style.width = `${progress}%`;
                         progressText.textContent = `${Math.round(progress)}%`;
+                        statusMessage.innerHTML += ` (已等待${elapsedTime}秒)`;
 
                         // 任务完成
                         if (responseData.status === 'completed') {
-                            clearInterval(progressInterval);
                             statusMessage.innerHTML = '<i class="fas fa-check-circle"></i> 音乐生成完成！';
                             statusMessage.style.backgroundColor = '#e8f5e9';
                             statusMessage.style.borderColor = '#a5d6a7';
@@ -122,18 +138,26 @@
                             const audioSource = document.getElementById('audioSource');
                             audioSource.src = responseData.audio_url || '';
                             document.getElementById('audioPlayer').load();
+
+                            // 清除定时器，确保不会有更多请求
+                            if (timerId) {
+                                clearTimeout(timerId);
+                                timerId = null;
+                            }
+                        } else {
+                            // 继续查询
+                            timerId = setTimeout(checkTaskStatus, queryInterval);
                         }
                     })
                     .catch(error => {
                         console.error('检查任务状态失败:', error);
+                        // 出现错误时也继续查询
+                        timerId = setTimeout(checkTaskStatus, queryInterval);
                     });
             }
 
             // 立即检查一次
             checkTaskStatus();
-
-            // 然后每3秒检查一次
-            progressInterval = setInterval(checkTaskStatus, 3000);
         });
     </script>
 </body>