update13

app.py

@@ -453,41 +453,58 @@ def ui_get_queue_info():
         </tr>
         """
     
+    # 如果没有任务历史，显示提示信息
+    if not tasks_html:
+        tasks_html = """
+        <tr>
+            <td colspan="3" style="text-align: center; padding: 20px;">暂无历史任务</td>
+        </tr>
+        """
+    
     # 添加平均处理时间显示
     avg_time_html = f"""<p><b>平均处理时间:</b> {format_time(queue_info.get('avg_process_time', 0))}</p>"""
     
     return f"""
-    <div class="queue-info-card">
-        <h3>队列状态</h3>
-        <div class="queue-stats">
-            <div class="stat-item">
-                <div class="stat-value">{queue_info['waiting_tasks']}</div>
-                <div class="stat-label">等待中</div>
-            </div>
-            <div class="stat-item">
-                <div class="stat-value">{queue_info['active_tasks']}</div>
-                <div class="stat-label">处理中</div>
+    <div class="dashboard">
+        <div class="queue-info-card main-card">
+            <h3 class="card-title">队列状态监控</h3>
+            <div class="queue-stats">
+                <div class="stat-item">
+                    <div class="stat-value">{queue_info['waiting_tasks']}</div>
+                    <div class="stat-label">等待中</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value">{queue_info['active_tasks']}</div>
+                    <div class="stat-label">处理中</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value">{queue_info['worker_threads']}</div>
+                    <div class="stat-label">工作线程</div>
+                </div>
             </div>
-            <div class="stat-item">
-                <div class="stat-value">{queue_info['worker_threads']}</div>
-                <div class="stat-label">工作线程</div>
+            
+            <div class="wait-time">
+                {avg_time_html}
+                <p><b>当前预计等待时间:</b> {format_time(queue_info['estimated_wait'])}</p>
+                <p class="last-update"><small>最后更新: {datetime.now().strftime('%H:%M:%S')}</small></p>
             </div>
         </div>
-        
-        <div class="wait-time">
-            {avg_time_html}
-            <p><b>当前预计等待时间:</b> {format_time(queue_info['estimated_wait'])}</p>
+            
+        <div class="queue-info-card history-card">
+            <h3 class="card-title">最近处理的任务</h3>
+            <table class="recent-tasks">
+                <thead>
+                    <tr>
+                        <th>任务ID</th>
+                        <th>请求时间</th>
+                        <th>处理时间</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {tasks_html}
+                </tbody>
+            </table>
         </div>
-        
-        <h4>最近处理的任务</h4>
-        <table class="recent-tasks">
-            <tr>
-                <th>任务ID</th>
-                <th>请求时间</th>
-                <th>处理时间</th>
-            </tr>
-            {tasks_html}
-        </table>
     </div>
     """
 
@@ -526,14 +543,36 @@ custom_css = """
 .container {
     max-width: 1200px;
     margin: 0 auto;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.dashboard {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.card-title {
+    color: #333;
+    border-bottom: 2px solid #ddd;
+    padding-bottom: 10px;
+    margin-top: 0;
 }
 
 .status-card, .queue-info-card {
-    background: #f7f7f7;
-    border-radius: 10px;
-    padding: 15px;
+    background: #fff;
+    border-radius: 12px;
+    padding: 20px;
     margin: 10px 0;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
+}
+
+.main-card {
+    border-top: 5px solid #4285f4;
+}
+
+.history-card {
+    border-top: 5px solid #34a853;
 }
 
 .status-card.success {
@@ -569,45 +608,88 @@ custom_css = """
 
 .stat-item {
     text-align: center;
+    padding: 15px;
+    background: #f8f9fa;
+    border-radius: 10px;
+    min-width: 120px;
+    transition: transform 0.3s ease;
+}
+
+.stat-item:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
 }
 
 .stat-value {
-    font-size: 24px;
+    font-size: 32px;
     font-weight: bold;
-    color: #007bff;
+    color: #4285f4;
+    margin-bottom: 5px;
 }
 
 .stat-label {
-    color: #6c757d;
+    color: #5f6368;
+    font-size: 16px;
 }
 
 .wait-time {
     text-align: center;
-    margin: 15px 0;
-    padding: 10px;
-    background: #e2e3e5;
-    border-radius: 5px;
+    margin: 20px 0;
+    padding: 15px;
+    background: #f1f3f4;
+    border-radius: 8px;
+    font-size: 18px;
+}
+
+.last-update {
+    color: #80868b;
+    margin-top: 10px;
+    margin-bottom: 0;
 }
 
 .recent-tasks {
     width: 100%;
     border-collapse: collapse;
-    margin-top: 10px;
+    margin-top: 15px;
+    background: white;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
 }
 
 .recent-tasks th, .recent-tasks td {
-    border: 1px solid #dee2e6;
-    padding: 8px;
+    border: 1px solid #e0e0e0;
+    padding: 12px 15px;
     text-align: center;
 }
 
 .recent-tasks th {
-    background-color: #e9ecef;
+    background-color: #f1f3f4;
+    color: #202124;
+    font-weight: 500;
+}
+
+.recent-tasks tbody tr:hover {
+    background-color: #f8f9fa;
 }
 
 .tabs {
     margin-top: 20px;
 }
+
+button.primary {
+    background-color: #4285f4;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: 500;
+    transition: background-color 0.3s;
+}
+
+button.primary:hover {
+    background-color: #3367d6;
+}
 """
 
 # 初始化并启动工作线程
@@ -618,41 +700,21 @@ with gr.Blocks(css=custom_css) as demo:
     gr.Markdown("# 代码评估服务")
     gr.Markdown("支持多种编程语言的代码评估服务，采用队列机制处理请求")
     
-    with gr.Tab("提交任务"):
-        with gr.Row():
-            with gr.Column(scale=2):
-                input_json = gr.JSON(label="输入数据")
-                submit_btn = gr.Button("提交任务", variant="primary")
-                task_id_output = gr.Textbox(label="任务ID", visible=True)
-                status_html = gr.HTML(label="状态")
-            
-            with gr.Column(scale=1):
-                queue_info_html = gr.HTML()
-                refresh_queue_btn = gr.Button("刷新队列状态")
-    
-    with gr.Tab("查询任务"):
-        with gr.Row():
-            with gr.Column(scale=1):
-                check_task_id = gr.Textbox(label="任务ID")
-                check_btn = gr.Button("查询状态", variant="primary")
-                get_result_btn = gr.Button("获取结果")
-            
-            with gr.Column(scale=2):
-                check_status_html = gr.HTML()
-                result_output = gr.JSON(label="任务结果")
+    with gr.Row():
+        with gr.Column(scale=3):
+            # 队列状态信息卡片
+            queue_info_html = gr.HTML()
+            refresh_queue_btn = gr.Button("刷新队列状态", variant="primary")
     
     # 定义更新函数
     def update_queue_info():
         return ui_get_queue_info()
     
     # 定时更新队列信息
-    demo.load(update_queue_info, None, queue_info_html, every=5)
+    demo.load(update_queue_info, None, queue_info_html, every=3)
     
-    # 事件处理
-    submit_btn.click(ui_submit, inputs=[input_json], outputs=[task_id_output, status_html])
+    # 刷新按钮事件
     refresh_queue_btn.click(update_queue_info, None, queue_info_html)
-    check_btn.click(ui_check_status, inputs=[check_task_id], outputs=[check_status_html])
-    get_result_btn.click(ui_get_result, inputs=[check_task_id], outputs=[result_output])
     
     # 添加兼容原有接口的评估端点
     demo.queue()