image output and loader

build-interface.py

@@ -21,7 +21,7 @@ def mdl(input):
 
 
 def launch_interface(args):
-    io = gradio.Interface(inputs=args.inputs, outputs=args.outputs, model=lambda x:np.array(1), model_type='function')
+    io = gradio.Interface(inputs=args.inputs, outputs=args.outputs, model=mdl, model_type='function')
     httpd, _, _ = io.launch(share=args.share)
 
     class ServiceExit(Exception):

gradio/outputs.py

@@ -101,5 +101,15 @@ class Textbox(AbstractOutput):
         """
         return prediction
 
+class Image(AbstractOutput):
+
+    def get_template_path(self):
+        return 'templates/output/image.html'
+
+    def postprocess(self, prediction):
+        """
+        """
+        return prediction
+
 
 registry = {cls.__name__.lower(): cls for cls in AbstractOutput.__subclasses__()}

gradio/static/css/gradio.css

@@ -21,6 +21,16 @@
   display: flex;
   flex-flow: column;
 }
+.loading {
+  margin-left: auto;
+}
+.loading img {
+  display: none;
+  height: 22px;
+}
+.panel_head {
+  display: flex
+}
 .role {
   text-transform: uppercase;
   font-family: Arial;
@@ -182,6 +192,14 @@ canvas {
   border: solid 1px black;
 }
 
-textarea {
+.text textarea {
   resize: none;
+  background-color: white;
+  border: none;
+  box-sizing: border-box;
+  padding: 4px;
+}
+
+.output_image img {
+  display: none
 }

gradio/static/js/all-io.js

@@ -45,3 +45,24 @@ try {
 const sleep = (milliseconds) => {
   return new Promise(resolve => setTimeout(resolve, milliseconds))
 }
+
+$('body').on('click', '.flag', function(e) {
+  if ($(".flag").hasClass("flagged")) {
+    $(".flag").removeClass("flagged").attr("value", "flag");
+  } else {
+    $(".flag").addClass("flagged").attr("value", "flagged");
+  }
+})
+
+var start_time;
+function loadStart() {
+  $(".loading img").show();
+  $(".loading_time").text("");
+  start_time = new Date().getTime()
+}
+
+function loadEnd() {
+  $(".loading img").hide();
+  end_time = new Date().getTime()
+  $(".loading_time").text(((end_time - start_time) / 1000).toFixed(2) + "s");
+}

gradio/static/js/interfaces/input/image_upload.js

@@ -44,17 +44,6 @@ $(".hidden_upload").on("change", function() {
   }
 })
 
-$('body').on('click', '.submit', function(e) {
-  src = cropper.getCroppedCanvas({
-    maxWidth: 360,
-    maxHeight: 360,
-    fillColor: "white"
-  }).toDataURL();
-  ws.send(src, function(e) {
-    notifyError(e)
-  })
-})
-
 $('body').on('click', '.clear', function(e) {
   if (cropper) {
     cropper.destroy();
@@ -67,3 +56,14 @@ $('body').on('click', '.clear', function(e) {
   $(".input_image img").removeAttr("src");
   $(".input_image").addClass("drop_mode")
 })
+$('body').on('click', '.submit', function(e) {
+  loadStart();
+  src = cropper.getCroppedCanvas({
+    maxWidth: 360,
+    maxHeight: 360,
+    fillColor: "white"
+  }).toDataURL();
+  ws.send(src, function(e) {
+    notifyError(e)
+  })
+})

gradio/static/js/interfaces/input/sketchpad.js

@@ -18,6 +18,7 @@ $('body').on('click', '.clear', function(e) {
     context.clearRect(0, 0, context.canvas.width, context.canvas.height);
 })
 $('body').on('click', '.submit', function(e) {
+    loadStart();
     var dataURL = canvas.toDataURL("image/png");
     ws.send(dataURL, function(e){
       notifyError(e)

gradio/static/js/interfaces/input/textbox.js

@@ -2,6 +2,7 @@ $('body').on('click', '.clear', function(e) {
   $(".input_text").val("");
 })
 $('body').on('click', '.submit', function(e) {
+  loadStart();
   text = $(".input_text").val();
   ws.send(text, function(e){
     notifyError(e)

gradio/static/js/interfaces/output/image.js

@@ -0,0 +1,10 @@
+ws.onmessage = function (event) {
+  loadEnd();
+  $(".output_image img").attr("src", event.data);
+  $(".output_image img").show();
+}
+
+$('body').on('click', '.clear', function(e) {
+  $(".output_image img").removeAttr("src");
+  $(".output_image img").hide();
+})

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

@@ -1,4 +1,5 @@
 ws.onmessage = function (event) {
+  loadEnd();
   var data = JSON.parse(event.data)
   // data = {
   //   label: "happy",
@@ -29,11 +30,3 @@ $('body').on('click', '.clear', function(e) {
   $(".output_class").text("")
   $(".confidence_intervals").empty()
 })
-
-$('body').on('click', '.flag', function(e) {
-  if ($(".flag").hasClass("flagged")) {
-    $(".flag").removeClass("flagged").attr("value", "flag");
-  } else {
-    $(".flag").addClass("flagged").attr("value", "flagged");
-  }
-})

gradio/static/js/interfaces/output/textbox.js

@@ -1,6 +1,8 @@
+ws.onmessage = function (event) {
+  loadEnd();
+ 	$(".output_text").val(event.data);
+}
+
 $('body').on('click', '.clear', function(e) {
   $(".output_text").val("");
 })
-ws.onmessage = function (event) {
- 	$(".output_text").val(event.data);
-}

gradio/templates/base_template.html

@@ -5,9 +5,10 @@
     <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">
+    <link rel="stylesheet" type="text/css" href="https://loading.io/css/loading.css"/>    
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
     <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>
 
   <body>

gradio/templates/output/image.html

@@ -0,0 +1,12 @@
+<div class="gradio output image">
+  <div class="panel_head">
+    <div class="role">Output</div>
+    <div class="loading">
+      <img src="../static/img/logo_mini.png" class="ld ld-skew"/>
+      <span class="loading_time"></span>
+    </div>
+  </div>
+  <div class="output_image"><img /></div>
+</div>
+
+<script src="../static/js/interfaces/output/image.js"></script>

gradio/templates/output/label.html

@@ -1,5 +1,11 @@
 <div class="gradio output classifier">
-  <div class="role">Output</div>
+  <div class="panel_head">
+    <div class="role">Output</div>
+    <div class="loading">
+      <img src="../static/img/logo_mini.png" class="ld ld-skew"/>
+      <span class="loading_time"></span>
+    </div>
+  </div>
   <div class="output_class"></div>
   <div class="confidence_intervals">
   </div>

gradio/templates/output/textbox.html

@@ -1,5 +1,11 @@
 <div class="gradio output text">
-  <div class="role">Output</div>
+  <div class="panel_head">
+    <div class="role">Output</div>
+    <div class="loading">
+      <img src="../static/img/logo_mini.png" class="ld ld-skew"/>
+      <span class="loading_time"></span>
+    </div>
+  </div>
   <textarea readonly class="output_text"></textarea>
 </div>