changes

build/lib/gradio/templates/index.html

@@ -31,7 +31,7 @@
       <a href="https://gradio.app"><img src="../static/img/logo_inline.png" /></a>
     </nav>
     <div id="share" class="invisible">
-      Live at <a id="share-link"></a>.
+      Live at <a id="share-link" target="_blank"></a>.
       <button id="share-copy">Copy Link</button>
     </div>
     <div class="container">
@@ -40,7 +40,7 @@
     </div>
     <div id="interface_target" class="container"></div>
     <div id="examples" class="container invisible">
-      <h3>Examples</h3>
+      <h3>Examples <small>(click to load)</small></h3>
       <table>
       </table>
     </div>

gradio/static/js/all_io.js

@@ -47,7 +47,11 @@ var io_master_template = {
     }
 
     if (this.config.live) {
-      this.gather();
+      var io = this;
+      var refresh_lag = this.config.refresh_lag || 0;
+      window.setTimeout(function() {
+        io.gather();
+      }, refresh_lag);
     } else {
       this.target.find(".loading").addClass("invisible");
       this.target.find(".output_interface").removeClass("invisible");

gradio/static/js/all_io.js.bak

@@ -0,0 +1,73 @@
+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/templates/index.html

@@ -31,7 +31,7 @@
       <a href="https://gradio.app"><img src="../static/img/logo_inline.png" /></a>
     </nav>
     <div id="share" class="invisible">
-      Live at <a id="share-link"></a>.
+      Live at <a id="share-link" target="_blank"></a>.
       <button id="share-copy">Copy Link</button>
     </div>
     <div class="container">
@@ -40,7 +40,7 @@
     </div>
     <div id="interface_target" class="container"></div>
     <div id="examples" class="container invisible">
-      <h3>Examples</h3>
+      <h3>Examples <small>(click to load)</small></h3>
       <table>
       </table>
     </div>