fix gauge: use SVG path arc commands instead of circle+dasharray (Gradio strips stroke attrs)

app.py

@@ -1320,34 +1320,42 @@ def render_topbar(state: dict) -> str:
 
 
 def render_signal_gauge(value: int) -> str:
+    import math
     clamped = max(0, min(100, int(value or 0)))
-    circ = 427.26
-    filled = circ * (clamped / 100.0)
-    seg = circ / 4  # ~106.8 per quarter
+    total_deg = clamped * 3.6  # 0-360
+
+    def arc_path(cx, cy, r, start_deg, end_deg):
+        sr = math.radians(start_deg)
+        er = math.radians(end_deg)
+        x1 = cx + r * math.cos(sr)
+        y1 = cy + r * math.sin(sr)
+        x2 = cx + r * math.cos(er)
+        y2 = cy + r * math.sin(er)
+        large = 1 if (end_deg - start_deg) > 180 else 0
+        return f"M {x1:.2f} {y1:.2f} A {r} {r} 0 {large} 1 {x2:.2f} {y2:.2f}"
+
     seg_colors = ["#8A4DFF", "#39C9FF", "#22B573", "#F2C14E"]
-    arc_elements = []
+    seg_deg = 90.0
+    paths = []
     for idx, color in enumerate(seg_colors):
-        seg_start = idx * seg
-        if filled <= seg_start:
+        seg_start = idx * seg_deg
+        if total_deg <= seg_start:
             break
-        seg_filled = min(filled - seg_start, seg)
-        # Each arc: dasharray shows seg_filled px, hides the rest
-        # rotate so this segment starts at top (-90deg) + offset for prior segments
-        rotate_deg = -90 + (seg_start / circ) * 360
-        arc_elements.append(
-            f'<circle cx="80" cy="80" r="68" fill="none" stroke="{color}" '
-            f'stroke-width="7" stroke-linecap="round" '
-            f'stroke-dasharray="{seg_filled:.2f} {(circ - seg_filled):.2f}" '
-            f'stroke-dashoffset="0" '
-            f'transform="rotate({rotate_deg:.1f} 80 80)" />'
-        )
-    arcs_html = "\n        ".join(arc_elements)
+        seg_filled = min(total_deg - seg_start, seg_deg)
+        if seg_filled < 0.5:
+            break
+        svg_start = seg_start - 90  # -90 = top of circle
+        svg_end = svg_start + seg_filled
+        d = arc_path(80, 80, 68, svg_start, svg_end)
+        paths.append(f'<path d="{d}" fill="none" stroke="{color}" stroke-width="7" stroke-linecap="round" />')
+
+    paths_html = "\n        ".join(paths)
     return f"""
     <div class="totem-signal-wrap">
       <svg class="totem-signal" viewBox="0 0 160 160" role="img" aria-label="TOTEM Signal {clamped} percent">
         <circle class="signal-outer-ring" cx="80" cy="80" r="76"></circle>
         <circle class="signal-track" cx="80" cy="80" r="68"></circle>
-        {arcs_html}
+        {paths_html}
         <circle class="signal-inner-ring" cx="80" cy="80" r="52"></circle>
         <circle class="signal-inner-ring" cx="80" cy="80" r="40"></circle>
         <path class="signal-star" d="M80 58 L84.7 73.5 L100.9 73.5 L87.8 82.9 L92.6 98.4 L80 89.1 L67.4 98.4 L72.2 82.9 L59.1 73.5 L75.3 73.5 Z"></path>