New: SVG as python

app.py

@@ -22,6 +22,9 @@ from safetensors.torch import load_file      # Sicheres & schnelles Laden von We
 # UI / Serving
 import gradio as gr               # Web-UI für Demo/Spaces
 
+import math
+from typing import List, Tuple
+
 # Projektspezifische Module
 from lib.bert_regressor import BertMultiHeadRegressor
 from lib.bert_regressor_utils import (
@@ -111,6 +114,90 @@ def is_eng(review: str):
 
     return lang_label[1] == "__label__en", lang_prob
 
+### Wheel ##################################
+
+# ---------- Geometrie: JS -> Python ----------
+def compute_wheel_points(
+    vals: List[float],
+    segments: int = 8,
+    offset_angle_deg: float = 0.0,
+    inner_radius: float = 40.0,
+    center: float = 250.0,
+    input_ratio: float = 16.0,
+) -> List[Tuple[float, float]]:
+    """
+    Repliziert die JS-Logik:
+      angle = (360/segments*i + offsetAngle - 90) * (π*2/360)
+      r = vals[i] * inputRatio + innerRadius
+      x = cos(angle) * r + center
+      y = sin(angle) * r + center
+    """
+    pts = []
+    for i, v in enumerate(vals):
+        angle_deg = (360.0 / segments) * i + offset_angle_deg - 90.0
+        angle = angle_deg * (math.pi * 2.0 / 360.0)
+        r = v * input_ratio + inner_radius
+        x = math.cos(angle) * r + center
+        y = math.sin(angle) * r + center
+        pts.append((x, y))
+    return pts
+
+# ---------- SVG-Bau ----------
+SVG_BASE = """<svg id="wheel" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
+  <!-- Ringe -->
+  <circle class="circle" r="40"  cx="250" cy="250" style="stroke:black; fill:none" />
+  <circle class="circle" r="80"  cx="250" cy="250" style="stroke:black; fill:none" />
+  <circle class="circle" r="120" cx="250" cy="250" style="stroke:black; fill:none" />
+  <circle class="circle" r="160" cx="250" cy="250" style="stroke:black; fill:none" />
+  <circle class="circle" r="200" cx="250" cy="250" style="stroke:black; fill:none" />
+
+  <!-- Achsen -->
+  <line class="line" x1="250" y1="210" x2="250" y2="50" style="stroke:black" />
+  <line class="line" x1="278.28427124746" y1="221.71572875254" x2="391.42135623731" y2="108.57864376269" style="stroke:black" />
+  <line class="line" x1="290" y1="250" x2="450" y2="250" style="stroke:black" />
+  <line class="line" x1="278.28427124746" y1="278.28427124746" x2="391.42135623731" y2="391.42135623731" style="stroke:black" />
+  <line class="line" x1="250" y1="290" x2="250" y2="450" style="stroke:black" />
+  <line class="line" x1="221.71572875254" y1="278.28427124746" x2="108.57864376269" y2="391.42135623731" style="stroke:black" />
+  <line class="line" x1="210" y1="250" x2="50"  y2="250" style="stroke:black" />
+  <line class="line" x1="221.71572875254" y1="221.71572875254" x2="108.57864376269" y2="108.57864376269" style="stroke:black" />
+
+  <!-- Textpfade & Labels (dein Original kannst du hier einfügen) -->
+  {LABELS}
+
+  <!-- Fläche -->
+  <polyline class="graph" points="{POINTS}" style="fill:rgb(250,208,72); fill-opacity:0.9" />
+
+  <!-- Punkte -->
+  {POINT_CIRCLES}
+</svg>"""
+
+def build_point_circles(points: List[Tuple[float, float]]) -> str:
+    return "\n  ".join(
+        f'<circle class="point" style="stroke:black; fill:white" cx="{x:.2f}" cy="{y:.2f}" r="3.5" />'
+        for x, y in points
+    )
+
+def build_svg_with_values(
+    vals: List[float],
+    labels_svg: str = "",
+    segments: int = 8,
+    offset_angle_deg: float = 0.0,
+    inner_radius: float = 40.0,
+    center: float = 250.0,
+    input_ratio: float = 16.0,
+) -> str:
+    pts = compute_wheel_points(
+        vals,
+        segments=segments,
+        offset_angle_deg=offset_angle_deg,
+        inner_radius=inner_radius,
+        center=center,
+        input_ratio=input_ratio,
+    )
+    points_attr = " ".join(f"{x:.2f},{y:.2f}" for x, y in pts)
+    circles = build_point_circles(pts)
+    return SVG_BASE.format(LABELS=labels_svg, POINTS=points_attr, POINT_CIRCLES=circles)
+
 ### Do actual prediction #########################################################
 @spaces.GPU(duration=10)  # Sekunden GPU-Zeit pro Call
 def predict(review: str):
@@ -133,90 +220,12 @@ def predict(review: str):
 
     #html_out = f"<b>{html.escape(review)}</b>"
 
-    html_out = '''
-        <svg id="wheel" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-            
-            <defs>
-                <path id="textPathU-68cfc5fd8ae1e" d="M 250, 250 m 0, 220 a -220,-220 0 1,1 0,-440 a -220,-220 0 1,1 0,440" style="stroke: red; fill: none;" />
-                <path id="textPathL-68cfc5fd8ae1e" d="M 250, 250 m 0, -220 a 220,220 0 1,0 0,440 a 220,220 0 1,0 0,-440" style="stroke: red; fill: none;" />
-            </defs>
-
-            <circle class="circle" r="40" cx="250" cy="250" style="stroke: black; fill: none;" />
-            <circle class="circle" r="80" cx="250" cy="250" style="stroke: black; fill: none;" />
-            <circle class="circle" r="120" cx="250" cy="250" style="stroke: black; fill: none;" />
-            <circle class="circle" r="160" cx="250" cy="250" style="stroke: black; fill: none;" />
-            <circle class="circle" r="200" cx="250" cy="250" style="stroke: black; fill: none;" />
-    
-            <line class="line" x1="250" y1="210" x2="250" y2="50" style="stroke: black;" />
-            <line class="line" x1="278.28427124746" y1="221.71572875254" x2="391.42135623731" y2="108.57864376269" style="stroke: black;" />
-            <line class="line" x1="290" y1="250" x2="450" y2="250" style="stroke: black;" />
-            <line class="line" x1="278.28427124746" y1="278.28427124746" x2="391.42135623731" y2="391.42135623731" style="stroke: black;" />
-            <line class="line" x1="250" y1="290" x2="250" y2="450" style="stroke: black;" />
-            <line class="line" x1="221.71572875254" y1="278.28427124746" x2="108.57864376269" y2="391.42135623731" style="stroke: black;" />
-            <line class="line" x1="210" y1="250" x2="50" y2="250" style="stroke: black;" />
-            <line class="line" x1="221.71572875254" y1="221.71572875254" x2="108.57864376269" y2="108.57864376269" style="stroke: black;" />
-            
-            <text text-anchor="middle" dy="0">
-                <textPath xlink:href="#textPathU-68cfc5fd8ae1e" startOffset="50%">
-                    Grainy
-                </textPath>
-            </text>
-
-            <text text-anchor="middle" dy="0">
-                <textPath xlink:href="#textPathU-68cfc5fd8ae1e" startOffset="62.5%">
-                    Grassy
-                </textPath>
-            </text>
-
-            <text text-anchor="middle" dy="0">
-                <textPath xlink:href="#textPathU-68cfc5fd8ae1e" startOffset="75%">
-                    Fragrant
-                </textPath>
-            </text>
-
-            <text text-anchor="middle" dy="9px">
-                <textPath xlink:href="#textPathL-68cfc5fd8ae1e" startOffset="62.5%">
-                    Fruity
-                </textPath>
-            </text>
-
-            <text text-anchor="middle" dy="9px">
-                <textPath xlink:href="#textPathL-68cfc5fd8ae1e" startOffset="50%">
-                    Peaty
-                </textPath>
-            </text>
-
-            <text text-anchor="middle" dy="9px">
-                <textPath xlink:href="#textPathL-68cfc5fd8ae1e" startOffset="37.5%">
-                    Woody
-                </textPath>
-            </text>
-
-            <text text-anchor="middle" dy="0">
-                <textPath xlink:href="#textPathU-68cfc5fd8ae1e" startOffset="25%">
-                    Winey
-                </textPath>
-            </text>
-
-            <text text-anchor="middle" dy="0">
-                <textPath xlink:href="#textPathU-68cfc5fd8ae1e" startOffset="37.5%">
-                    Off-Notes
-                </textPath>
-            </text>
-            
-            <polyline class="graph" points></polyline>
-
-            <circle class="point" style="stroke: black; fill: white;" cx="250" cy="250" r="3.5" />
-            <circle class="point" style="stroke: black; fill: white;" cx="250" cy="250" r="3.5" />
-            <circle class="point" style="stroke: black; fill: white;" cx="250" cy="250" r="3.5" />
-            <circle class="point" style="stroke: black; fill: white;" cx="250" cy="250" r="3.5" />
-            <circle class="point" style="stroke: black; fill: white;" cx="250" cy="250" r="3.5" />
-            <circle class="point" style="stroke: black; fill: white;" cx="250" cy="250" r="3.5" />
-            <circle class="point" style="stroke: black; fill: white;" cx="250" cy="250" r="3.5" />
-            <circle class="point" style="stroke: black; fill: white;" cx="250" cy="250" r="3.5" />
-                        
-        </svg>
+    values = [0, 1, 1.5, 0, 2, 0, 3.4, 2]  # deine 8 Werte
 
+    svg = build_svg_with_values(values, labels_svg="")
+
+    html_out = """
+        {svg}
         <style>
             svg#wheel > .circle,
             svg#wheel > .line {
@@ -231,56 +240,14 @@ def predict(review: str):
                 fill-opacity: 0.9;
             }
             svg#wheel > text {
-                font-family: 'Roboto Condensed', sans-serif;
+                font-family: "Source Sans Pro", ui-sans-serif, system-ui, sans-serif;
                 font-style: normal;
                 font-weight: 400;
                 font-size: 18px;
                 // text-transform: uppercase;
-                &.scale {
-                    fill: rgb(180, 180, 180);
-                }
             }
         </style>
-
-        <script>
-            const setPoints = function (vals) {
-
-                const elemsPoint = document.querySelectorAll('.point');
-                const elemGraph = document.querySelector('.graph');
-
-                const points = [];
-
-                elemsPoint.forEach(function(elemPoint, i) {
-                    //            steps                        offset                     convert to bogenmass
-                    const angle = (360 / config.segments * i + config.offsetAngle - 90) * (Math.PI * 2 / 360);
-
-                    const val = vals[i];
-
-                    const c = {
-                        x: Math.cos(angle) * (val * config.inputRatio + config.innerRadius) + config.offsetCenter,
-                        y: Math.sin(angle) * (val * config.inputRatio + config.innerRadius) + config.offsetCenter
-                    }
-
-                    points.push(`${c.x},${c.y}`);
-
-                    elemGraph.setAttribute('points', points.join(' '));
-
-                    elemPoint.setAttribute('cx', `${c.x}`);
-                    elemPoint.setAttribute('cy', `${c.y}`);
-                });
-            }
-
-            const config = {
-                segments: 8,
-                offsetAngle: 0,
-                innerRadius: 40,
-                offsetCenter: 250,
-                inputRatio: 16
-            };
-
-            setPoints([0, 1, 1.5, 0, 2, 0, 3.4, 2])
-        </script>
-        '''
+        """
 
     json_out = {
         "review": review,
@@ -302,7 +269,7 @@ def predict(review: str):
     }
 
     return html_out, json_out
-    
+
 ### Create Form interface with Gradio Framework ##################################
 iface = gr.Interface(
     fn=predict,