New: Add Wheel

app.py

@@ -112,7 +112,7 @@ def is_eng(review: str):
     return lang_label[1] == "__label__en", lang_prob
 
 ### Do actual prediction #########################################################
-@spaces.GPU(duration=120)  # Sekunden GPU-Zeit pro Call
+@spaces.GPU(duration=10)  # Sekunden GPU-Zeit pro Call
 def predict(review: str):
 
     review = (review or "").strip()
@@ -131,11 +131,134 @@ def predict(review: str):
         prediction_flavours = predict_flavours(review, model_flavours, tokenizer_flavours, device)
         t_end_flavours = time.time()
 
-    html_out = f"<b>{html.escape(review)}</b>"
+    #html_out = f"<b>{html.escape(review)}</b>"
+
+    html_out = '''
+        <svg 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>
+
+        <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])
+        '''
 
     json_out = {
         "review": review,
-        'model': FILENAME,
+        "model": FILENAME,
         "device": device,
         "duration": round((t_end_flavours - t_start_flavours), 3),
         "is_en": {
@@ -143,9 +266,9 @@ def predict(review: str):
             "prob": review_is_eng_prob
         },
         "results": [{
-                'icon': ICONS[name],
-                'name': name,
-                'score': score,
+                #'icon': ICONS[name],
+                "name": name,
+                "score": score,
                 #'level': get_level(score)
             }
             for name, score in prediction_flavours.items()