update app

app.py

@@ -902,46 +902,50 @@ def _run_with_timeout(func, timeout: int, *args, **kwargs):
         executor.shutdown(wait=False, cancel_futures=True)
 
 
+import time # 确保开头导入了 time
+
 def _render_progress_html(current_step: int, error: bool = False, detail_msg: str = "", est_time: int = 0) -> str:
-    """
-    current_step: 0=Preview, 1=Plan, 2=Code Gen, 3=Execution, 4=Done
-    est_time: Estimated seconds for the current step animation
-    """
     steps = ["Data Preview", "Processing Plan", "Code Generation", "Code Execution"]
     icons_html = '<div class="step-row">'
     
-    # 当前正在进行的步骤的进度条 HTML
     active_progress_html = ""
     
+    # 生成一个唯一的 ID 和 动画名，确保每次切换步骤时浏览器都会重置动画
+    unique_id = f"step_bar_{current_step}_{int(time.time())}"
+    anim_name = f"fill_{unique_id}"
+
     for idx, name in enumerate(steps):
         is_active = (idx == current_step)
-        
         if idx < current_step:
-            status_class = "done"
-            icon = "✓"
+            status_class, icon = "done", "✓"
         elif is_active:
             if error:
-                status_class = "error"
-                icon = "✕"
-            elif current_step == 4: # All done
-                 status_class = "done"
-                 icon = "✓"
+                status_class, icon = "error", "✕"
+            elif current_step == 4:
+                 status_class, icon = "done", "✓"
             else:
-                status_class = "active"
-                icon = "⋯"
-                # 如果是当前活跃状态且没有错误，生成进度条
+                status_class, icon = "active", "⋯"
                 if est_time > 0:
+                    # 通过内联 style 定义一个新的 keyframes 动画
                     active_progress_html = f"""
+                    <style>
+                        @keyframes {anim_name} {{
+                            0% {{ width: 0%; }}
+                            100% {{ width: 98%; }}
+                        }}
+                        #{unique_id} {{
+                            animation: {anim_name} {est_time}s linear forwards;
+                        }}
+                    </style>
                     <div style="margin-top: 10px; padding: 0 10%;">
                         <div class="progress-bar-container">
-                            <div class="progress-bar-fill" style="animation-duration: {est_time}s;"></div>
+                            <div id="{unique_id}" class="progress-bar-fill"></div>
                         </div>
                         <div class="est-time-text">Est. time: ~{est_time}s</div>
                     </div>
                     """
         else:
-            status_class = ""
-            icon = str(idx + 1)
+            status_class, icon = "", str(idx + 1)
             
         icons_html += f"""
         <div class="step-item {status_class}">
@@ -953,10 +957,7 @@ def _render_progress_html(current_step: int, error: bool = False, detail_msg: st
             icons_html += '<div class="step-arrow">➜</div>'
             
     icons_html += '</div>'
-    
     text_html = f'<div class="step-status-text">{detail_msg}</div>'
-    
-    # 将进度条插入到底部
     return f'<div class="step-container">{icons_html}{active_progress_html}{text_html}</div>'
 
 
@@ -1948,53 +1949,40 @@ _CUSTOM_CSS = """
 .control-panel .gradio-dataframe { margin-top: 0 !important; margin-bottom: 0 !important; }
 .btn-row { display: flex; flex-direction: row; align-items: center; }
 
-.info-box {
-    background: #f0f9ff;
-    border: 1px solid #bae6fd;
-    color: #0369a1;
-    padding: 12px 16px;
-    border-radius: 8px;
-    font-size: 0.85rem;
-    line-height: 1.5;
-    margin-bottom: 16px;
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-.info-box ul {
-    margin: 4px 0 0 18px;
-    padding: 0;
-}
-.info-box li {
-    margin-bottom: 4px;
-}
-
-/* === 新增: 进度条动画样式 === */
 .progress-bar-container {
     width: 100%;
     background-color: #f1f5f9;
-    border-radius: 4px;
-    height: 6px;
+    border-radius: 10px; /* 圆角稍微大一点更好看 */
+    height: 8px;
     margin-top: 8px;
     overflow: hidden;
-    position: relative;
+    border: 1px solid #e2e8f0;
 }
 
 .progress-bar-fill {
     height: 100%;
-    background-color: #0ea5e9;
+    background: linear-gradient(90deg, #0ea5e9, #22c55e); /* 增加渐变效果 */
     width: 0%;
-    border-radius: 4px;
-    /* 动画名称，时长由内联样式控制 */
-    animation-name: progressFill; 
-    animation-timing-function: linear;
-    animation-fill-mode: forwards;
 }
 
 .est-time-text {
-    font-size: 0.75rem;
-    color: #64748b;
+    font-size: 0.7rem;
+    color: #94a3b8;
     margin-top: 4px;
-    text-align: right;
-    font-style: italic;
+    text-align: center;
+    font-family: 'JetBrains Mono', monospace;
+}
+
+/* === 新增: 用户指南样式 (保持不变) === */
+.info-box {
+    background: #f0f9ff;
+    border: 1px solid #bae6fd;
+    color: #0369a1;
+    padding: 12px 16px;
+    border-radius: 8px;
+    font-size: 0.85rem;
+    line-height: 1.5;
+    margin-bottom: 16px;
 }
 
 @keyframes progressFill {