ellipses to labels

gradio/static/css/gradio.css

@@ -99,6 +99,6 @@
   top: 0;
   left: 0;
 }
-.flagged {
-
+.flag.flagged {
+  background-color: pink !important;
 }

gradio/static/css/interfaces/output/label.css

@@ -1,32 +1,34 @@
 .confidence_intervals {
-  font-size: 16px;
+  display: flex;
+  font-size: 20px;
+}
+.confidences {
+  flex-grow: 1;
 }
 .confidence {
-  padding: 3px;
-  display: flex;
+  background-color: #888888;
+  color: white;
+  text-align: right;
 }
-.level, .label  {
-  display: inline-block;
+.labels {
+  max-width: 120px;
+  margin-right: 4px;
+}
+.label, .confidence {
+  overflow: hidden;
+  white-space: nowrap;
+  height: 27px;
+  margin-bottom: 4px;
+  padding: 2px;
 }
 .label {
-  width: 60px;
-}
-.confidence_intervals .level {
-  font-size: 14px;
-  margin-left: 8px;
-  margin-right: 8px;
-  background-color: #AAA;
-  padding: 2px 4px;
+  text-overflow: ellipsis;
   text-align: right;
-  font-family: monospace;
-  color: white;
-  font-weight: bold;
 }
-.confidence_intervals > * {
-  vertical-align: bottom;
-}
-.flag.flagged {
-  background-color: pink !important;
+.confidence {
+  text-overflow: clip;
+  padding-left: 6px;
+  padding-right: 6px;
 }
 .output_class {
   font-weight: bold;

gradio/static/js/interfaces/output/label.js

@@ -1,21 +1,47 @@
 const label_output = {
   html: `
     <div class="output_class"></div>
-    <div class="confidence_intervals"></div>
+    <div class="confidence_intervals">
+      <div class="labels"></div>
+      <div class="confidences"></div>
+    </div>
     `,
   init: function() {},
   output: function(data) {
     data = JSON.parse(data)
+    data = {
+      label: "happy, happy, happy",
+      confidences: [
+        {
+          label: "happy, happy, happy",
+          confidence: 0.5064
+        },
+        {
+          label: "sad",
+          confidence: 0.2111
+        },
+        {
+          label: "angry, angry, angry",
+          confidence: 0.0757
+        },
+        {
+          label: "happy, happy, happy",
+          confidence: 0.03064
+        }
+      ]
+
+    }
     this.target.find(".output_class").html(data["label"])
-    this.target.find(".confidence_intervals").empty()
+    this.target.find(".confidence_intervals > div").empty()
     if (data.confidences) {
       for (var i = 0; i < data.confidences.length; i++)
       {
         let c = data.confidences[i]
-        let confidence = c["confidence"]
-        this.target.find(".confidence_intervals").append(`<div class="confidence"><div class=
-            "label">${c["label"]}</div><div class="level" style="flex-grow:
-              ${confidence}">${Math.round(confidence * 100)}%</div></div>`)
+        let label = c["label"]
+        let confidence = (c["confidence"] * 100).toFixed(1) + "%";
+        this.target.find(".labels").append(`<div class="label" title="${label}">${label}</div>`);
+        this.target.find(".confidences").append(`
+          <div class="confidence" style="width: ${confidence}" title="${confidence}">${confidence}</div>`);
       }
     }
   },
@@ -24,6 +50,6 @@ const label_output = {
   },
   clear: function() {
     this.target.find(".output_class").empty();
-    this.target.find(".confidence_intervals").empty();
+    this.target.find(".confidence_intervals > div").empty();
   }
 }