confidence intervals, img upload bug fix

build-interface.py

@@ -1,5 +1,6 @@
 from argparse import ArgumentParser
 import gradio
+import numpy as np
 
 parser = ArgumentParser(description='Arguments for Building Interface')
 parser.add_argument('-i', '--inputs', type=str, help="name of input interface")
@@ -12,7 +13,7 @@ args = parser.parse_args()
 
 
 def launch_interface(args):
-    io = gradio.Interface(inputs=args.inputs, outputs=args.outputs, model=lambda x:x, model_type='function')
+    io = gradio.Interface(inputs=args.inputs, outputs=args.outputs, model=lambda x:np.array(1), model_type='function')
     io.launch(share=args.share)
     # input_interface = gradio.inputs.registry[args.inputs.lower()]()
     # output_interface = gradio.outputs.registry[args.outputs.lower()]()

gradio/static/css/gradio.css

@@ -103,6 +103,7 @@
 }
 .confidence {
   padding: 3px;
+  display: flex;
 }
 .level, .label  {
   display: inline-block;
@@ -112,12 +113,13 @@
   text-align: right;
 }
 .confidence_intervals .level {
-  font-size: 12px;
+  font-size: 14px;
   margin-left: 8px;
   margin-right: 8px;
   background-color: #AAA;
   padding: 2px 4px;
   text-align: right;
+  font-family: monospace;
   color: white;
   font-weight: bold;
 }

gradio/static/js/all-io.js

@@ -25,4 +25,4 @@ try {
 
 const sleep = (milliseconds) => {
   return new Promise(resolve => setTimeout(resolve, milliseconds))
-}
+}

gradio/static/js/class-output.js

@@ -24,12 +24,19 @@ try {
   };
 
   ws.onmessage = function (event) {
-    console.log(event.data);
     sleep(300).then(() => {
-      if (event.data.length == 1) {
-        $(".output_class").css({ 'font-size':'300px'});
+//      $(".output_class").text(event.data);
+      var data = event.data
+      $(".output_class").text(data["label"])
+      $(".confidence_intervals").empty()
+      if ("confidences" in data) {
+        data["confidences"].forEach(function (c) {
+          var confidence = c["confidence"]
+          $(".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>`)
+        })
       }
-      $(".output_class").text(event.data);
     })
 
   }
@@ -39,5 +46,5 @@ try {
 
 $('body').on('click', '.clear', function(e) {
   $(".output_class").text("")
+  $(".confidence_intervals").empty()
 })
-

gradio/static/js/image-upload-input.js

@@ -36,6 +36,7 @@ $(".hidden_upload").on("change", function() {
 
 $('body').on('click', '.submit', function(e) {
   var src = $('.input_image img').attr('src');
+  src = resizeImage(src)
   ws.send(src, function(e) {
     notifyError(e)
   })

gradio/static/js/utils.js

@@ -0,0 +1,27 @@
+function resizeImage(base64Str) {
+
+    var img = new Image();
+    img.src = base64Str;
+    var canvas = document.createElement('canvas');
+    var MAX_WIDTH = 360;
+    var MAX_HEIGHT = 360;
+    var width = img.width;
+    var height = img.height;
+
+    if (width > height) {
+      if (width > MAX_WIDTH) {
+        height *= MAX_WIDTH / width;
+        width = MAX_WIDTH;
+      }
+    } else {
+      if (height > MAX_HEIGHT) {
+        width *= MAX_HEIGHT / height;
+        height = MAX_HEIGHT;
+      }
+    }
+    canvas.width = width;
+    canvas.height = height;
+    var ctx = canvas.getContext('2d');
+    ctx.drawImage(img, 0, 0, width, height);
+    return canvas.toDataURL();
+  }

gradio/templates/base_template.html

@@ -5,6 +5,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="../static/css/style.css">
     <link rel="stylesheet" href="../static/css/gradio.css">
+    <script src="../static/js/utils.js"></script>
     <script src="../static/js/all-io.js"></script>
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   </head>
@@ -18,10 +19,10 @@
         <div id="input"></div>
         <input class="submit" type="submit" value="Submit"/><!--
      --><input class="clear" type="reset" value="Clear">
-      </div>   
+      </div>
       <div class="panel">
         <div id="output"></div>
-      </div>   
-    </div>   
+      </div>
+    </div>
   </body>
 </html>

gradio/templates/image_upload_input.html

@@ -6,6 +6,4 @@
   </div>
   <input class="hidden_upload" type="file" accept="image/x-png,image/gif,image/jpeg" />
 </div>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.0.0/cropper.min.css">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.0.0/cropper.min.js" type="module"></script>
 <script src="../static/js/image-upload-input.js"></script>

gradio/templates/label_output.html

@@ -1,5 +1,7 @@
 <div class="gradio output classifier">
   <div class="role">Output</div>
   <div class="output_class"></div>
+  <div class="confidence_intervals">
+  </div>
 </div>
 <script src="../static/js/class-output.js"></script>