style and js changes

build/lib/gradio/static/css/gradio.css

@@ -3,10 +3,15 @@
   flex: 1 1 0;
   display: inline-block;
   box-sizing: border-box;
-  margin: 0 30px 14px 0;
+}
+.panel:first-child {
+  margin-right: 24px;
+}
+.panel:last-child {
+  margin-left: 8px;
 }
 .panel_header, .interface {
-  background-color: #EEEEEE;
+  background-color: whitesmoke;
 }
 .panel_header {
   text-transform: uppercase;
@@ -31,7 +36,6 @@
 }
 .loading img {
   display: none;
-  height: 18px;
 }
 .panel_buttons {
   display: flex;
@@ -44,7 +48,7 @@
   display: none;
 }
 .submit, .clear, .panel_button {
-  background-color: #EEEEEE !important;
+  background-color: whitesmoke !important;
   flex-grow: 1;
   padding: 8px !important;
   box-sizing: border-box;
@@ -62,7 +66,7 @@
 }
 .flag_message {
   padding: 8px !important;
-  background-color: #EEEEEE !important;
+  background-color: whitesmoke !important;
 }
 
 .upload_zone {
@@ -111,7 +115,7 @@
 .flag.flagged {
   background-color: pink !important;
 }
-#loading {
+.loading {
   justify-content: center;
   align-items: center;
 }

build/lib/gradio/static/css/interfaces/input/csv.css

@@ -22,5 +22,5 @@
   padding: 2px 4px;
 }
 .csv_preview td:nth-child(even) {
-  background-color: #EEEEEE;
+  background-color: whitesmoke;
 }

build/lib/gradio/static/css/style.css

@@ -14,9 +14,6 @@ button, input[type="submit"], input[type="reset"], input[type="text"], input[typ
   -webkit-appearance: none;
   border-radius: 0;
 }
-nav, #panels, #share_row {
-  margin-left: 30px;
-}
 nav {
   text-align: center;
   padding: 16px 0 4px;
@@ -48,11 +45,14 @@ nav img {
 #share_row, #share_complete, #share_form {
   display: none;
 }
-#panels {
+.panels {
   display: flex;
   flex-flow: row;
   flex-wrap: wrap;
   justify-content: center;
+  max-width: 1028px;
+  width: 100%;
+  margin: 0 auto;  
 }
 button.primary {
   color: white;
@@ -67,7 +67,7 @@ button.secondary {
 }
 #featured_table {
   border-collapse: collapse;
-  border: solid 2px #EEEEEE;
+  border: solid 2px whitesmoke;
   margin-bottom: 20px;
   table-layout: fixed;
 }
@@ -81,7 +81,7 @@ button.secondary {
   overflow-y: auto;
 }
 #featured_table div:nth-child(even) {
-  background-color: #EEEEEE;
+  background-color: whitesmoke;
 }
 #featured_table div:hover {
   background-color: #EEA45D;

build/lib/gradio/static/js/all_io.js

@@ -1,4 +1,4 @@
-var io_master = {
+var io_master_template = {
   gather: function() {
     this.clear();
     for (let iface of this.input_interfaces) {
@@ -17,45 +17,32 @@ var io_master = {
     }
   },
   submit: function() {
-    var post_data = {
-      'data': this.last_input
-    };
-    if (!config.live) {
-      $("#loading").removeClass("invisible");
-      $("#loading_in_progress").show();
-      $("#loading_failed").hide();
-      $(".output_interface").addClass("invisible");
+    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");
     }
-    $.ajax({type: "POST",
-        url: "/api/predict/",
-        data: JSON.stringify(post_data),
-        success: function(output){
-            if (output['action'] == 'output') {
-              io_master.output(output);
-            }
-        },
-        error: function(XMLHttpRequest, textStatus, errorThrown) {
-         $("#loading_in_progress").hide();
-         $("#loading_failed").show();
-         console.log(XMLHttpRequest);
-         console.log(textStatus);
-         console.log(errorThrown);
-        }
-    });
+    this.fn(this.last_input).then((output) => {
+      io.output(output);
+    }).catch(() => {
+      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 (this.input_interface.output && data["saliency"]) {
-    //   this.input_interface.output(data["saliency"]);
-    // }
-    if (config.live) {
+    if (this.config.live) {
       this.gather();
     } else {
-      $("#loading").addClass("invisible");
-      $(".output_interface").removeClass("invisible");  
+      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) {

build/lib/gradio/static/js/gradio.js

@@ -0,0 +1,130 @@
+function gradio(config, fn, target) {
+  target = $(target);
+  target.html(`
+    <div class="panels">
+      <div class="panel input_panel">
+        <div class="input_interfaces">
+        </div>          
+        <div class="panel_buttons">
+          <input class="submit" type="submit" value="submit"/>
+          <input class="clear" type="reset" value="clear">
+        </div>
+      </div>
+      <div class="panel output_panel">
+        <div class="loading interface invisible">
+          <img class="loading_in_progress" src="../static/img/logo_loading.gif">
+          <img class="loading_failed" src="../static/img/logo_error.png">
+        </div>
+        <div class="output_interfaces">
+        </div>          
+      </div>
+    </div>`);
+    let io_master = Object.create(io_master_template);
+    io_master.fn = fn
+    io_master.target = target;
+    io_master.config = config;
+
+    let input_to_object_map = {
+      "csv" : {},
+      "imagein" : image_input,
+      "sketchpad" : sketchpad_input,
+      "textbox" : textbox_input,
+      "webcam" : webcam,
+      "microphone" : microphone,
+      "radio" : radio,
+      "checkbox" : checkbox,
+      "checkboxgroup" : checkbox_group,
+      "slider" : slider,
+      "dropdown" : dropdown,
+    }
+    let output_to_object_map = {
+      "csv" : {},
+      "image" : image_output,
+      "label" : label_output,
+      "textbox" : textbox_output
+    }
+    let id_to_interface_map = {}
+    
+    function set_interface_id(interface, id) {
+      interface.id = id;
+      id_to_interface_map[id] = interface;
+    }
+  
+    _id = 0;
+    let input_interfaces = [];
+    let output_interfaces = [];
+    for (let i = 0; i < config["input_interfaces"].length; i++) {
+      input_interface_data = config["input_interfaces"][i];
+      input_interface = Object.create(input_to_object_map[input_interface_data[0]]);
+      if (input_interface_data[1]["label"]) {
+        target.find(".input_interfaces").append(`
+          <div class="panel_header">${input_interface_data[1]["label"]}</strong>
+        `);
+      }
+      target.find(".input_interfaces").append(`
+        <div class="input_interface interface" interface_id=${_id}>
+          ${input_interface.html}
+        </div>
+      `);
+      input_interface.target = target.find(`.input_interface[interface_id=${_id}]`);
+      set_interface_id(input_interface, _id);
+      input_interface.init(input_interface_data[1]);
+      input_interfaces.push(input_interface);
+      input_interface.io_master = io_master;
+      _id++;
+    }
+    for (let i = 0; i < config["output_interfaces"].length; i++) {
+      if (i != 0 && i % (config["output_interfaces"].length / config.function_count) == 0) {
+        target.find(".output_interfaces").append("<hr>");
+      }
+      output_interface_data = config["output_interfaces"][i];
+      output_interface = Object.create(output_to_object_map[
+        output_interface_data[0]]);
+      if (output_interface_data[1]["label"]) {
+        target.find(".output_interfaces").append(`
+          <div class="panel_header">${output_interface_data[1]["label"]}</strong>
+        `);
+      }
+      target.find(".output_interfaces").append(`
+        <div class="output_interface interface" interface_id=${_id}>
+          ${output_interface.html}
+        </div>
+      `);
+      output_interface.target = target.find(`.output_interface[interface_id=${_id}]`);
+      set_interface_id(output_interface, _id);
+      output_interface.init(output_interface_data[1]);
+      output_interfaces.push(output_interface);
+      output_interface.io_master = io_master;
+      _id++;
+    }
+    io_master.input_interfaces = input_interfaces;
+    io_master.output_interfaces = output_interfaces;
+    target.find(".clear").click(function() {
+      for (let input_interface of input_interfaces) {
+        input_interface.clear();
+      }
+      for (let output_interface of output_interfaces) {
+        output_interface.clear();
+      }
+      target.find(".flag").removeClass("flagged");
+      target.find(".flag_message").empty();
+      target.find(".loading").addClass("invisible");
+      target.find(".output_interface").removeClass("invisible");
+      io_master.last_input = null;
+      io_master.last_output = null;
+    });
+    if (config.live) {
+      io_master.gather();
+    } else {
+      target.find(".submit").show();
+      target.find(".submit").click(function() {
+        io_master.gather();
+        target.find(".flag").removeClass("flagged");
+      })
+    }
+    if (!config.show_input) {
+      target.find(".input_panel").hide();
+    } 
+
+    return io_master;
+}

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

@@ -27,7 +27,7 @@ const sketchpad_input = {
     var dimension = Math.min(this.target.find(".canvas_holder").width(),
         this.target.find(".canvas_holder").height()) - 2 // dimension - border
     var id = this.id;
-    if (config.disabled) {
+    if (this.io_master.config.disabled) {
       this.target.find('.canvas_holder canvas')
         .attr("width", dimension).attr("height", dimension);
     } else {

build/lib/gradio/static/js/interfaces/input/webcam.js

@@ -11,7 +11,7 @@ const webcam = {
 //    this.target.find(".webcam_box").width(this.target.find(".webcam_box").width);
     let w = this.target.find(".webcam_box").width();
     let h = this.target.find(".webcam_box").height();
-    if (config.live) {
+    if (this.io_master.config.live) {
       this.target.find(".take_photo").hide();
     }
     let RATIO = 4/3;
@@ -45,7 +45,7 @@ const webcam = {
   },
   submit: function() {
     var io = this;
-    if (config.live) {
+    if (this.io_master.config.live) {
       if (this.state == "CAMERA_ON") {
         Webcam.snap(function(image_data) {
           this.io_master.input(io.id, image_data);

build/lib/gradio/templates/index.html

@@ -41,33 +41,7 @@
         <button class="secondary" id="share_more"></button>
       </div>
     </div>
-    <div id="panels">
-      <div class="panel input_panel">
-        <div class="input_interfaces">
-        </div>          
-        <div class="panel_buttons">
-          <input class="submit" type="submit" value="submit"/>
-          <input class="clear" type="reset" value="clear">
-        </div>
-      </div>
-      <div class="panel output_panel">
-        <div id="loading" class="interface invisible">
-          <img id="loading_in_progress" src="../static/img/logo_loading.gif">
-          <img id="loading_failed" src="../static/img/logo_error.png">
-        </div>
-        <div class="output_interfaces">
-        </div>          
-        <div class="panel_buttons">
-          <input type="text" class="flag_message" placeholder="(Optional message for flagging)"/>
-          <input type="button" class="panel_button flag" value="flag"/>
-        </div>
-      </div>
-    </div>
-    <div id="featured_history">
-      <h2>Click to Try Samples</h2>
-      <div id="featured_table">
-      </div>
-    </div>
+    <div id="interface_target"></div>
     <script src="../static/js/vendor/jquery.min.js"></script>
     <!-- TUI EDITOR -->
     <script src="../static/js/vendor/fabric.js"></script>
@@ -102,7 +76,20 @@
     <script src="../static/js/interfaces/output/label.js"></script>
     <script src="../static/js/interfaces/output/textbox.js"></script>
     <script src="../static/js/share.js"></script>
-    <script src="../static/js/load_history.js"></script>
-    <script src="../static/js/load_interfaces.js"></script>
+    <script src="../static/js/gradio.js"></script>
+    <script>
+      $.getJSON("static/config.json", function(config) {
+        gradio(config, function(data) {
+          return new Promise((resolve, reject) => {
+            $.ajax({type: "POST",
+              url: "/api/predict/",
+              data: JSON.stringify({"data": data}),
+              success: (data) => {console.log("y"); resolve(data)},
+              error: (data) => {console.log("n"); reject()},
+            });
+          });              
+        }, "#interface_target");
+      });
+    </script>
   </body>
 </html>

demo/basic_text.py

@@ -1,15 +1,14 @@
 import gradio as gr
 
-def upper(choice, sentence):
-    return sentence[::-1], choice.upper()
+def answer_question(text1, text2):
+    return text1, text2, {"plagiarism": 0.62, "original": 0.38}
 
 
-gr.Interface(upper, 
+gr.Interface(answer_question, 
             [
-                gr.inputs.Dropdown(label="Pick something", choices=["big thing", "small", "other"]),
-                "text"
-            ],
-            [
-                "textbox",
-                gr.outputs.Textbox(label="box 2", lines=3, placeholder="hello")
-            ]).launch()
+                gr.inputs.Microphone(label="speech"), 
+                gr.inputs.Dropdown(["Deepspeech", "Sphynx", "Wav2Text"], label="model"), 
+            ], [
+                gr.outputs.Textbox(label="text 1", lines=8),
+            ]
+            ).launch()

demo/form_graph.py

@@ -26,4 +26,6 @@ gr.Interface(plot_forecast,
                  gr.inputs.Slider(1, 100, label="Noise Level"),
                  gr.inputs.Checkbox(label="Show Legend"),
                  gr.inputs.Dropdown(["cross", "line", "circle"], label="Style"),
-             ], "plot").launch()
+             ],
+             gr.outputs.Image(plot=True, label="forecast") 
+             ).launch()

gradio.egg-info/SOURCES.txt

@@ -50,8 +50,7 @@ gradio/static/img/vendor/icon-b.svg
 gradio/static/img/vendor/icon-c.svg
 gradio/static/img/vendor/icon-d.svg
 gradio/static/js/all_io.js
-gradio/static/js/load_history.js
-gradio/static/js/load_interfaces.js
+gradio/static/js/gradio.js
 gradio/static/js/share.js
 gradio/static/js/utils.js
 gradio/static/js/interfaces/input/checkbox.js

gradio/static/css/gradio.css

@@ -3,10 +3,15 @@
   flex: 1 1 0;
   display: inline-block;
   box-sizing: border-box;
-  margin: 0 30px 14px 0;
+}
+.panel:first-child {
+  margin-right: 24px;
+}
+.panel:last-child {
+  margin-left: 8px;
 }
 .panel_header, .interface {
-  background-color: #EEEEEE;
+  background-color: whitesmoke;
 }
 .panel_header {
   text-transform: uppercase;
@@ -31,7 +36,6 @@
 }
 .loading img {
   display: none;
-  height: 18px;
 }
 .panel_buttons {
   display: flex;
@@ -44,7 +48,7 @@
   display: none;
 }
 .submit, .clear, .panel_button {
-  background-color: #EEEEEE !important;
+  background-color: whitesmoke !important;
   flex-grow: 1;
   padding: 8px !important;
   box-sizing: border-box;
@@ -62,7 +66,7 @@
 }
 .flag_message {
   padding: 8px !important;
-  background-color: #EEEEEE !important;
+  background-color: whitesmoke !important;
 }
 
 .upload_zone {
@@ -111,7 +115,7 @@
 .flag.flagged {
   background-color: pink !important;
 }
-#loading {
+.loading {
   justify-content: center;
   align-items: center;
 }

gradio/static/css/interfaces/input/csv.css

@@ -22,5 +22,5 @@
   padding: 2px 4px;
 }
 .csv_preview td:nth-child(even) {
-  background-color: #EEEEEE;
+  background-color: whitesmoke;
 }

gradio/static/css/style.css

@@ -14,9 +14,6 @@ button, input[type="submit"], input[type="reset"], input[type="text"], input[typ
   -webkit-appearance: none;
   border-radius: 0;
 }
-nav, #panels, #share_row {
-  margin-left: 30px;
-}
 nav {
   text-align: center;
   padding: 16px 0 4px;
@@ -48,11 +45,14 @@ nav img {
 #share_row, #share_complete, #share_form {
   display: none;
 }
-#panels {
+.panels {
   display: flex;
   flex-flow: row;
   flex-wrap: wrap;
   justify-content: center;
+  max-width: 1028px;
+  width: 100%;
+  margin: 0 auto;  
 }
 button.primary {
   color: white;
@@ -67,7 +67,7 @@ button.secondary {
 }
 #featured_table {
   border-collapse: collapse;
-  border: solid 2px #EEEEEE;
+  border: solid 2px whitesmoke;
   margin-bottom: 20px;
   table-layout: fixed;
 }
@@ -81,7 +81,7 @@ button.secondary {
   overflow-y: auto;
 }
 #featured_table div:nth-child(even) {
-  background-color: #EEEEEE;
+  background-color: whitesmoke;
 }
 #featured_table div:hover {
   background-color: #EEA45D;

gradio/static/js/all_io.js

@@ -1,4 +1,4 @@
-var io_master = {
+var io_master_template = {
   gather: function() {
     this.clear();
     for (let iface of this.input_interfaces) {
@@ -17,45 +17,32 @@ var io_master = {
     }
   },
   submit: function() {
-    var post_data = {
-      'data': this.last_input
-    };
-    if (!config.live) {
-      $("#loading").removeClass("invisible");
-      $("#loading_in_progress").show();
-      $("#loading_failed").hide();
-      $(".output_interface").addClass("invisible");
+    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");
     }
-    $.ajax({type: "POST",
-        url: "/api/predict/",
-        data: JSON.stringify(post_data),
-        success: function(output){
-            if (output['action'] == 'output') {
-              io_master.output(output);
-            }
-        },
-        error: function(XMLHttpRequest, textStatus, errorThrown) {
-         $("#loading_in_progress").hide();
-         $("#loading_failed").show();
-         console.log(XMLHttpRequest);
-         console.log(textStatus);
-         console.log(errorThrown);
-        }
-    });
+    this.fn(this.last_input).then((output) => {
+      io.output(output);
+    }).catch(() => {
+      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 (this.input_interface.output && data["saliency"]) {
-    //   this.input_interface.output(data["saliency"]);
-    // }
-    if (config.live) {
+    if (this.config.live) {
       this.gather();
     } else {
-      $("#loading").addClass("invisible");
-      $(".output_interface").removeClass("invisible");  
+      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) {

gradio/static/js/gradio.js

@@ -0,0 +1,130 @@
+function gradio(config, fn, target) {
+  target = $(target);
+  target.html(`
+    <div class="panels">
+      <div class="panel input_panel">
+        <div class="input_interfaces">
+        </div>          
+        <div class="panel_buttons">
+          <input class="submit" type="submit" value="submit"/>
+          <input class="clear" type="reset" value="clear">
+        </div>
+      </div>
+      <div class="panel output_panel">
+        <div class="loading interface invisible">
+          <img class="loading_in_progress" src="../static/img/logo_loading.gif">
+          <img class="loading_failed" src="../static/img/logo_error.png">
+        </div>
+        <div class="output_interfaces">
+        </div>          
+      </div>
+    </div>`);
+    let io_master = Object.create(io_master_template);
+    io_master.fn = fn
+    io_master.target = target;
+    io_master.config = config;
+
+    let input_to_object_map = {
+      "csv" : {},
+      "imagein" : image_input,
+      "sketchpad" : sketchpad_input,
+      "textbox" : textbox_input,
+      "webcam" : webcam,
+      "microphone" : microphone,
+      "radio" : radio,
+      "checkbox" : checkbox,
+      "checkboxgroup" : checkbox_group,
+      "slider" : slider,
+      "dropdown" : dropdown,
+    }
+    let output_to_object_map = {
+      "csv" : {},
+      "image" : image_output,
+      "label" : label_output,
+      "textbox" : textbox_output
+    }
+    let id_to_interface_map = {}
+    
+    function set_interface_id(interface, id) {
+      interface.id = id;
+      id_to_interface_map[id] = interface;
+    }
+  
+    _id = 0;
+    let input_interfaces = [];
+    let output_interfaces = [];
+    for (let i = 0; i < config["input_interfaces"].length; i++) {
+      input_interface_data = config["input_interfaces"][i];
+      input_interface = Object.create(input_to_object_map[input_interface_data[0]]);
+      if (input_interface_data[1]["label"]) {
+        target.find(".input_interfaces").append(`
+          <div class="panel_header">${input_interface_data[1]["label"]}</strong>
+        `);
+      }
+      target.find(".input_interfaces").append(`
+        <div class="input_interface interface" interface_id=${_id}>
+          ${input_interface.html}
+        </div>
+      `);
+      input_interface.target = target.find(`.input_interface[interface_id=${_id}]`);
+      set_interface_id(input_interface, _id);
+      input_interface.init(input_interface_data[1]);
+      input_interfaces.push(input_interface);
+      input_interface.io_master = io_master;
+      _id++;
+    }
+    for (let i = 0; i < config["output_interfaces"].length; i++) {
+      if (i != 0 && i % (config["output_interfaces"].length / config.function_count) == 0) {
+        target.find(".output_interfaces").append("<hr>");
+      }
+      output_interface_data = config["output_interfaces"][i];
+      output_interface = Object.create(output_to_object_map[
+        output_interface_data[0]]);
+      if (output_interface_data[1]["label"]) {
+        target.find(".output_interfaces").append(`
+          <div class="panel_header">${output_interface_data[1]["label"]}</strong>
+        `);
+      }
+      target.find(".output_interfaces").append(`
+        <div class="output_interface interface" interface_id=${_id}>
+          ${output_interface.html}
+        </div>
+      `);
+      output_interface.target = target.find(`.output_interface[interface_id=${_id}]`);
+      set_interface_id(output_interface, _id);
+      output_interface.init(output_interface_data[1]);
+      output_interfaces.push(output_interface);
+      output_interface.io_master = io_master;
+      _id++;
+    }
+    io_master.input_interfaces = input_interfaces;
+    io_master.output_interfaces = output_interfaces;
+    target.find(".clear").click(function() {
+      for (let input_interface of input_interfaces) {
+        input_interface.clear();
+      }
+      for (let output_interface of output_interfaces) {
+        output_interface.clear();
+      }
+      target.find(".flag").removeClass("flagged");
+      target.find(".flag_message").empty();
+      target.find(".loading").addClass("invisible");
+      target.find(".output_interface").removeClass("invisible");
+      io_master.last_input = null;
+      io_master.last_output = null;
+    });
+    if (config.live) {
+      io_master.gather();
+    } else {
+      target.find(".submit").show();
+      target.find(".submit").click(function() {
+        io_master.gather();
+        target.find(".flag").removeClass("flagged");
+      })
+    }
+    if (!config.show_input) {
+      target.find(".input_panel").hide();
+    } 
+
+    return io_master;
+}

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

@@ -27,7 +27,7 @@ const sketchpad_input = {
     var dimension = Math.min(this.target.find(".canvas_holder").width(),
         this.target.find(".canvas_holder").height()) - 2 // dimension - border
     var id = this.id;
-    if (config.disabled) {
+    if (this.io_master.config.disabled) {
       this.target.find('.canvas_holder canvas')
         .attr("width", dimension).attr("height", dimension);
     } else {

gradio/static/js/interfaces/input/webcam.js

@@ -11,7 +11,7 @@ const webcam = {
 //    this.target.find(".webcam_box").width(this.target.find(".webcam_box").width);
     let w = this.target.find(".webcam_box").width();
     let h = this.target.find(".webcam_box").height();
-    if (config.live) {
+    if (this.io_master.config.live) {
       this.target.find(".take_photo").hide();
     }
     let RATIO = 4/3;
@@ -45,7 +45,7 @@ const webcam = {
   },
   submit: function() {
     var io = this;
-    if (config.live) {
+    if (this.io_master.config.live) {
       if (this.state == "CAMERA_ON") {
         Webcam.snap(function(image_data) {
           this.io_master.input(io.id, image_data);

gradio/static/js/load_history.js

@@ -1,20 +0,0 @@
-history_count = 0;
-entry_history = [];
-
-function add_history(entry) {
-  $("#featured_table").append(`
-      <div entry=${history_count}>${io_master.input_interface.renderFeatured(entry)}</div>
-  `);
-  entry_history.push(entry);
-  history_count++;
-}
-
-function load_history(data) {
-  data.forEach(add_history)
-}
-
-$('body').on('click', "#featured_table div", function() {
-  let entry = entry_history[$(this).attr("entry")];
-  io_master.input_interface.loadFeatured(entry);
-  io_master.output_interface.clear();
-})

gradio/static/js/load_interfaces.js

@@ -1,119 +0,0 @@
-input_to_object_map = {
-  "csv" : {},
-  "imagein" : image_input,
-  "sketchpad" : sketchpad_input,
-  "textbox" : textbox_input,
-  "webcam" : webcam,
-  "microphone" : microphone,
-  "radio" : radio,
-  "checkbox" : checkbox,
-  "checkboxgroup" : checkbox_group,
-  "slider" : slider,
-  "dropdown" : dropdown,
-}
-output_to_object_map = {
-  "csv" : {},
-  "image" : image_output,
-  "label" : label_output,
-  "textbox" : textbox_output
-}
-id_to_interface_map = {}
-
-function set_interface_id(interface, id) {
-  interface.id = id;
-  id_to_interface_map[id] = interface;
-}
-
-var config;
-$.getJSON("static/config.json", function(data) {
-  config = data;
-  _id = 0;
-  let input_interfaces = [];
-  let output_interfaces = [];
-  for (let i = 0; i < config["input_interfaces"].length; i++) {
-    input_interface_data = config["input_interfaces"][i];
-    input_interface = Object.create(input_to_object_map[input_interface_data[0]]);
-    if (input_interface_data[1]["label"]) {
-      $(".input_interfaces").append(`
-        <div class="panel_header">${input_interface_data[1]["label"]}</strong>
-      `);
-    }
-    $(".input_interfaces").append(`
-      <div class="input_interface interface" interface_id=${_id}>
-        ${input_interface.html}
-      </div>
-    `);
-    input_interface.target = $(`.input_interface[interface_id=${_id}]`);
-    set_interface_id(input_interface, _id);
-    input_interface.init(input_interface_data[1]);
-    input_interfaces.push(input_interface);
-    input_interface.io_master = io_master;
-    _id++;
-  }
-  for (let i = 0; i < config["output_interfaces"].length; i++) {
-    if (i != 0 && i % (config["output_interfaces"].length / config.function_count) == 0) {
-      $(".output_interfaces").append("<hr>");
-    }
-    output_interface_data = config["output_interfaces"][i];
-    output_interface = Object.create(output_to_object_map[
-      output_interface_data[0]]);
-    if (output_interface_data[1]["label"]) {
-      $(".output_interfaces").append(`
-        <div class="panel_header">${output_interface_data[1]["label"]}</strong>
-      `);
-    }
-    $(".output_interfaces").append(`
-      <div class="output_interface interface" interface_id=${_id}>
-        ${output_interface.html}
-      </div>
-    `);
-    output_interface.target = $(`.output_interface[interface_id=${_id}]`);
-    set_interface_id(output_interface, _id);
-    output_interface.init(output_interface_data[1]);
-    output_interfaces.push(output_interface);
-    output_interface.io_master = io_master;
-    _id++;
-  }
-  io_master.input_interfaces = input_interfaces;
-  io_master.output_interfaces = output_interfaces;
-  $(".clear").click(function() {
-    for (let input_interface of input_interfaces) {
-      input_interface.clear();
-    }
-    for (let output_interface of output_interfaces) {
-      output_interface.clear();
-    }
-    $(".flag").removeClass("flagged");
-    $(".flag_message").empty();
-    $("#loading").addClass("invisible");
-    $(".output_interface").removeClass("invisible");
-    io_master.last_input = null;
-    io_master.last_output = null;
-  })
-  if (config["share_url"] != "None") {
-    $("#share_row").css('display', 'flex');
-  }
-  load_history(config["sample_inputs"] || []);
-  if (!config["sample_inputs"]) {
-    $("#featured_history").hide();
-  }
-  if (config.live) {
-    io_master.gather();
-  } else {
-    $(".submit").show();
-    $(".submit").click(function() {
-      io_master.gather();
-      $(".flag").removeClass("flagged");
-    })
-  }
-  if (!config.show_input) {
-    $(".input_panel").hide();
-  }
-});
-
-$('body').on('click', '.flag', function(e) {
-  if (io_master.last_output) {
-    $(".flag").addClass("flagged");
-    io_master.flag($(".flag_message").val());
-  }
-})

gradio/templates/index.html

@@ -41,33 +41,7 @@
         <button class="secondary" id="share_more"></button>
       </div>
     </div>
-    <div id="panels">
-      <div class="panel input_panel">
-        <div class="input_interfaces">
-        </div>          
-        <div class="panel_buttons">
-          <input class="submit" type="submit" value="submit"/>
-          <input class="clear" type="reset" value="clear">
-        </div>
-      </div>
-      <div class="panel output_panel">
-        <div id="loading" class="interface invisible">
-          <img id="loading_in_progress" src="../static/img/logo_loading.gif">
-          <img id="loading_failed" src="../static/img/logo_error.png">
-        </div>
-        <div class="output_interfaces">
-        </div>          
-        <div class="panel_buttons">
-          <input type="text" class="flag_message" placeholder="(Optional message for flagging)"/>
-          <input type="button" class="panel_button flag" value="flag"/>
-        </div>
-      </div>
-    </div>
-    <div id="featured_history">
-      <h2>Click to Try Samples</h2>
-      <div id="featured_table">
-      </div>
-    </div>
+    <div id="interface_target"></div>
     <script src="../static/js/vendor/jquery.min.js"></script>
     <!-- TUI EDITOR -->
     <script src="../static/js/vendor/fabric.js"></script>
@@ -102,7 +76,20 @@
     <script src="../static/js/interfaces/output/label.js"></script>
     <script src="../static/js/interfaces/output/textbox.js"></script>
     <script src="../static/js/share.js"></script>
-    <script src="../static/js/load_history.js"></script>
-    <script src="../static/js/load_interfaces.js"></script>
+    <script src="../static/js/gradio.js"></script>
+    <script>
+      $.getJSON("static/config.json", function(config) {
+        gradio(config, function(data) {
+          return new Promise((resolve, reject) => {
+            $.ajax({type: "POST",
+              url: "/api/predict/",
+              data: JSON.stringify({"data": data}),
+              success: (data) => {console.log("y"); resolve(data)},
+              error: (data) => {console.log("n"); reject()},
+            });
+          });              
+        }, "#interface_target");
+      });
+    </script>
   </body>
 </html>