updated loading

demo/flip_image.py

@@ -11,12 +11,12 @@ def flip(image):
 
 def flip2(image):
     start = time()
-    return np.fliplr(image), time() - start
+    return np.fliplr(image), "stuff"
 
 
-gr.Interface(flip2, 
+gr.Interface([flip, flip2], 
              gr.inputs.Image(shape=(50, 50, 3)), 
-             ["image", "text"],
+             ["image", "label"],
              examples=[
                  ["images/cheetah1.jpg"],
                  ["images/cheetah2.jpg"],

gradio.egg-info/requires.txt

@@ -4,7 +4,4 @@ paramiko
 scipy
 IPython
 scikit-image
-<<<<<<< HEAD
-=======
 analytics-python
->>>>>>> 64fd79682b1939bca6d2efe2556fc7a7b43b1d9d

gradio/static/css/gradio.css

@@ -31,10 +31,18 @@
   display: flex;
   flex-flow: column;
 }
+.output_panel {
+  position: relative;
+}
 .loading {
+  position: absolute;
+  top: 10px;
+  left: 10px;
   margin-left: auto;
+  z-index: 1;
 }
 .loading img {
+  width: 50px;
   display: none;
 }
 .panel_buttons {

gradio/static/css/interfaces/output/textbox.css

@@ -9,4 +9,7 @@
   padding: 4px;
   min-height: 30px;
   font-family: monospace;
+  white-space: pre-wrap;      /* CSS3 */   
+  white-space: -moz-pre-wrap; /* Firefox */    
+  word-wrap: break-word;      /* IE */
 }

gradio/static/js/all_io.js

@@ -22,8 +22,7 @@ var io_master_template = {
       this.target.find(".loading").removeClass("invisible");
       this.target.find(".loading_in_progress").show();
       this.target.find(".loading_failed").hide();
-      this.target.find(".output_interface").addClass("invisible");
-      this.target.find(".output_interfaces .panel_header").addClass("invisible");
+      this.target.find(".output_interfaces").css("opacity", 0.5);
     }
     this.fn(this.last_input).then((output) => {
       io.output(output);
@@ -54,8 +53,7 @@ var io_master_template = {
       }, refresh_lag);
     } else {
       this.target.find(".loading").addClass("invisible");
-      this.target.find(".output_interface").removeClass("invisible");
-      this.target.find(".output_interfaces .panel_header").removeClass("invisible");
+      this.target.find(".output_interfaces").css("opacity", 1);
     }
   },
   flag: function(message) {

gradio/static/js/all_io.js.bak

@@ -1,73 +0,0 @@
-var io_master_template = {
-  gather: function() {
-    this.clear();
-    for (let iface of this.input_interfaces) {
-      iface.submit();
-    }
-  },
-  clear: function() {
-    this.last_input = new Array(this.input_interfaces.length);
-    this.input_count = 0;
-  },
-  input: function(interface_id, data) {
-    this.last_input[interface_id] = data;
-    this.input_count += 1;
-    if (this.input_count == this.input_interfaces.length) {
-      this.submit();
-    }
-  },
-  submit: function() {
-    let io = this;
-    if (!this.config.live) {
-      this.target.find(".loading").removeClass("invisible");
-      this.target.find(".loading_in_progress").show();
-      this.target.find(".loading_failed").hide();
-      this.target.find(".output_interface").addClass("invisible");
-      this.target.find(".output_interfaces .panel_header").addClass("invisible");
-    }
-    this.fn(this.last_input).then((output) => {
-      io.output(output);
-    }).catch((error) => {
-      console.error(error);
-      this.target.find(".loading_in_progress").hide();
-      this.target.find(".loading_failed").show();
-    })
-  },
-  output: function(data) {
-    this.last_output = data["data"];
-
-    for (let i = 0; i < this.output_interfaces.length; i++) {
-      this.output_interfaces[i].output(data["data"][i]);
-    }
-    if (data["durations"]) {
-      let ratio = this.output_interfaces.length / data["durations"].length;
-      for (let i = 0; i < this.output_interfaces.length; i = i + ratio) {
-        this.output_interfaces[i].target.parent().find(`.loading_time[interface="${i + ratio - 1}"]`).text("Latency: " + ((data["durations"][i / ratio])).toFixed(2) + "s");
-      }
-    }
-
-    if (this.config.live) {
-      this.gather();
-    } else {
-      this.target.find(".loading").addClass("invisible");
-      this.target.find(".output_interface").removeClass("invisible");
-      this.target.find(".output_interfaces .panel_header").removeClass("invisible");
-    }
-  },
-  flag: function(message) {
-    var post_data = {
-      'data': {
-        'input_data' : toStringIfObject(this.last_input) ,
-        'output_data' : toStringIfObject(this.last_output),
-        'message' : message
-      }
-    }
-    $.ajax({type: "POST",
-        url: "/api/flag/",
-        data: JSON.stringify(post_data),
-        success: function(output){
-            console.log("Flagging successful")
-        },
-    });
-  }
-};

gradio/static/js/gradio.js

@@ -11,7 +11,7 @@ function gradio(config, fn, target) {
         </div>
       </div>
       <div class="panel output_panel">
-        <div class="loading interface invisible">
+        <div class="loading invisible">
           <img class="loading_in_progress" src="static/img/logo_loading.gif">
           <img class="loading_failed" src="static/img/logo_error.png">
         </div>
@@ -114,7 +114,7 @@ function gradio(config, fn, target) {
       target.find(".flag_message").empty();
       target.find(".loading").addClass("invisible");
       target.find(".loading_time").text("");
-      target.find(".output_interface").removeClass("invisible");
+      target.find(".output_interfaces").css("opacity", 1);
       io_master.last_input = null;
       io_master.last_output = null;
     });