Update app.py

app.py

@@ -421,9 +421,9 @@ def create_demo():
             current_score = 0.0
             
             empty_md = "*等待开始...*"
-            empty_html = "<p>等待开始...</p>"
+            empty_svg = '<svg width="400" height="250"><text x="200" y="130" text-anchor="middle" fill="#999">等待开始...</text></svg>'
             # 初始状态
-            yield "状态: 准备执行任务...", empty_html, empty_md, empty_md, empty_md, empty_md
+            yield "状态: 准备执行任务...", empty_svg, empty_md, empty_md, empty_md, empty_md
             
             for i in range(1, int(max_iter) + 1):
                 # 执行完整迭代
@@ -491,33 +491,54 @@ def create_demo():
                 # 更新数据
                 chart_data.append({"iteration": i, "score": round(current_score, 2)})
                 
-                # 生成 HTML 进度条 - 完全可控
-                bars_html = "<div style='display: flex; gap: 10px; align-items: flex-end; height: 200px; padding: 20px; background: #f9f9f9; border-radius: 8px;'>"
-                for item in chart_data:
-                    score_val = item["score"]
-                    iter_num = item["iteration"]
-                    # 颜色：低=红，中=黄，高=绿
-                    if score_val < 0.4:
-                        color = "#ef4444"
-                    elif score_val < 0.7:
-                        color = "#eab308"
-                    else:
-                        color = "#22c55e"
-                    bar_height = score_val * 100
-                    bars_html += f"""
-                    <div style='display: flex; flex-direction: column; align-items: center; flex: 1;'>
-                        <div style='font-weight: bold; margin-bottom: 5px;'>{score_val:.2f}</div>
-                        <div style='width: 100%; background: #e5e7eb; border-radius: 4px; height: 150px; position: relative;'>
-                            <div style='position: absolute; bottom: 0; width: 100%; background: {color}; border-radius: 4px; height: {bar_height}%; transition: height 0.3s;'></div>
-                        </div>
-                        <div style='margin-top: 5px;'>迭代{iter_num}</div>
-                    </div>
-                    """
-                bars_html += "</div>"
+                # 生成 HTML 折线图 - SVG 实现
+                if len(chart_data) == 1:
+                    # 只有一个点，画一个点
+                    svg = f'''
+                    <svg width="400" height="250" style="border:1px solid #ccc; background:white;">
+                        <text x="200" y="130" text-anchor="middle" fill="#666">分数: {chart_data[0]["score"]:.2f}</text>
+                        <circle cx="50" cy="{200 - chart_data[0]["score"]*180}" r="8" fill="#22c55e"/>
+                    </svg>
+                    '''
+                else:
+                    # 多个点，画折线
+                    width = 400
+                    height = 250
+                    padding = 40
+                    plot_width = width - padding * 2
+                    plot_height = height - padding * 2
+                    
+                    # 生成点和线的 SVG
+                    points_svg = ""
+                    lines_svg = ""
+                    for idx, item in enumerate(chart_data):
+                        x = padding + idx * (plot_width / (len(chart_data) - 1))
+                        y = padding + plot_height - item["score"] * plot_height
+                        points_svg += f'<circle cx="{x}" cy="{y}" r="6" fill="#22c55e" stroke="white" stroke-width="2"/>'
+                        points_svg += f'<text x="{x}" y="{y-15}" text-anchor="middle" font-size="12" fill="#333">{item["score"]:.2f}</text>'
+                        if idx > 0:
+                            prev_x = padding + (idx - 1) * (plot_width / (len(chart_data) - 1))
+                            prev_y = padding + plot_height - chart_data[idx-1]["score"] * plot_height
+                            lines_svg += f'<line x1="{prev_x}" y1="{prev_y}" x2="{x}" y2="{y}" stroke="#22c55e" stroke-width="3"/>'
+                    
+                    # 添加坐标轴
+                    svg = f'''
+                    <svg width="{width}" height="{height}" style="border:1px solid #ccc; background:white; border-radius:8px;">
+                        <!-- Y轴标签 -->
+                        <text x="15" y="50" font-size="12" fill="#666">1.0</text>
+                        <text x="15" y="{padding + plot_height/2}" font-size="12" fill="#666">0.5</text>
+                        <text x="15" y="{height-20}" font-size="12" fill="#666">0.0</text>
+                        <!-- X轴标签 -->
+                        <text x="{width/2}" y="{height-5}" font-size="12" fill="#666" text-anchor="middle">迭代次数</text>
+                        <!-- 折线 -->
+                        {lines_svg}
+                        {points_svg}
+                    </svg>
+                    '''
                 
                 # 每次迭代完成后更新 UI
                 status = f"状态: 第 {i}/{int(max_iter)} 次迭代完成 (分数: {current_score:.2f})"
-                yield status, bars_html, plan_md, exec1_md, exec2_md, summary_md
+                yield status, svg, plan_md, exec1_md, exec2_md, summary_md
                 
                 # 检查是否达到目标
                 if current_score >= target:
@@ -526,7 +547,7 @@ def create_demo():
                 time.sleep(0.3)
             
             final_status = f"状态: 任务完成\n最终分数: {current_score:.2f}\n总迭代次数: {len(chart_data)}"
-            yield final_status, bars_html, plan_md, exec1_md, exec2_md, summary_md
+            yield final_status, svg, plan_md, exec1_md, exec2_md, summary_md
         
         run_btn.click(
             fn=run_task,