fix gauge: SVG transform attr instead of CSS style (Gradio strips style transforms)

app.py

@@ -468,14 +468,11 @@ TOTEM_CSS = """
 }
 
 .totem-signal-label {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -18px;
   text-align: center;
   font-family: var(--font-ui);
   font-size: 12px;
   color: rgba(174, 183, 204, 0.98);
+  margin-top: 6px;
 }
 
 .totem-status-row {
@@ -1326,46 +1323,31 @@ def render_signal_gauge(value: int) -> str:
     clamped = max(0, min(100, int(value or 0)))
     circ = 427.26
     filled = circ * (clamped / 100.0)
-    # Segment colours: violet, cyan, emerald, gold - each covers 25% of circumference
-    # We layer 4 coloured arcs masked by dasharray to fake a gradient
-    seg = circ / 4  # 106.815 per segment
-    segs = [
-        ("#8A4DFF", 0),
-        ("#39C9FF", 1),
-        ("#22B573", 2),
-        ("#F2C14E", 3),
-    ]
+    seg = circ / 4  # ~106.8 per quarter
+    seg_colors = ["#8A4DFF", "#39C9FF", "#22B573", "#F2C14E"]
     arc_elements = []
-    for color, idx in segs:
+    for idx, color in enumerate(seg_colors):
         seg_start = idx * seg
-        seg_end = (idx + 1) * seg
         if filled <= seg_start:
-            break  # nothing to draw for this segment
+            break
         seg_filled = min(filled - seg_start, seg)
-        # offset = circ - seg_filled, rotated so this segment starts at the right angle
+        # rotate_deg: start at top (-90deg) then add segment offset
         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:.2f}" '
-            f'stroke-dashoffset="0" '
-            f'style="transform:rotate({rotate_deg:.1f}deg);transform-origin:80px 80px;'
-            f'filter:drop-shadow(0 0 4px {color}88);" />'
+            f'transform="rotate({rotate_deg:.1f} 80 80)" />'
         )
     arcs_html = "\n        ".join(arc_elements)
     return f"""
     <div class="totem-signal-wrap">
       <svg class="totem-signal" viewBox="0 0 160 160" role="img" aria-label="TOTEM Signal {clamped} percent">
-        <!-- Outer decorative ring -->
         <circle class="signal-outer-ring" cx="80" cy="80" r="76"></circle>
-        <!-- Track -->
         <circle class="signal-track" cx="80" cy="80" r="68"></circle>
-        <!-- Gradient arc segments -->
         {arcs_html}
-        <!-- Inner radar rings -->
         <circle class="signal-inner-ring" cx="80" cy="80" r="52"></circle>
         <circle class="signal-inner-ring" cx="80" cy="80" r="40"></circle>
-        <!-- Center star compass -->
         <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>
       </svg>
       <div class="totem-signal-label">TOTEM Signal {clamped}%</div>