include all og gradio into gradio js

build/lib/gradio/networking.py

@@ -135,7 +135,6 @@ def serve_files_in_background(interface, port, directory_to_serve=None, server_n
         def end_headers(self):
             self.send_header('Access-Control-Allow-Origin', '*')
             self.send_header('Access-Control-Allow-Methods', 'GET, POST')
-            self.send_header('Cache-Control', 'no-store, no-cache, must-revalidate')
             return super(HTTPHandler, self).end_headers()
 
         def translate_path(self, path):

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

@@ -26,17 +26,17 @@ button, input[type="submit"], input[type="reset"], input[type="button"], select[
   text-align: right;
   font-family: monospace;
 }
-#share {
+.share {
   text-align: center;
   margin-bottom: 10px;
   font-size: 14px;
 }
-#share-copy {
+.share-copy {
   background-color: whitesmoke;
   padding: 4px;
   border-radius: 2px;
 }
-#title {
+.title {
   text-align: center;
 }
 .container {
@@ -58,7 +58,7 @@ button.secondary {
   color: black;
   background-color: #F6F6F6;
 }
-#examples table {
+.examples table {
   border-collapse: collapse;
   font-family: monospace;
   padding: 8px;
@@ -67,20 +67,20 @@ button.secondary {
   border-left: solid 4px whitesmoke;
   border-bottom: solid 4px whitesmoke;
 }
-#examples th {
+.examples th {
   padding: 8px 16px;
   text-align: left;
   font-size: 18px;
 }
-#examples td {
+.examples td {
   padding: 8px;
   cursor: pointer;
 }
 
-#examples tbody tr:nth-child(odd) {
+.examples tbody tr:nth-child(odd) {
   background-color: white;
 }
-#examples tbody tr:hover {
+.examples tbody tr:hover {
   background-color: lightgray;
 }
 #credit {

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

@@ -1,30 +1,44 @@
 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="clear panel_button" type="reset" value="CLEAR">
-          <input class="submit panel_button" type="submit" value="SUBMIT"/>
-        </div>
-      </div>
-      <div class="panel output_panel">
-        <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>
-        <div class="output_interfaces">
-        </div>
-        <div class="panel_buttons">
-          <input class="screenshot panel_button" type="button" value="SCREENSHOT"/>
-          <div class="screenshot_logo">
-            <img src="static/img/logo_inline.png">
+    <div class="share invisible">
+      Live at <a class="share-link" target="_blank"></a>.
+      <button class="share-copy">Copy Link</button>
+    </div>
+    <div class="container">
+      <h1 class="title"></h1>
+      <p class="description"></p>
+      <div class="panels">
+        <div class="panel input_panel">
+          <div class="input_interfaces">
+          </div>          
+          <div class="panel_buttons">
+            <input class="clear panel_button" type="reset" value="CLEAR">
+            <input class="submit panel_button" type="submit" value="SUBMIT"/>
           </div>
-          <input class="flag panel_button" type="button" value="FLAG"/>
+        </div>
+        <div class="panel output_panel">
+          <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>
+          <div class="output_interfaces">
+          </div>
+          <div class="panel_buttons">
+            <input class="screenshot panel_button" type="button" value="SCREENSHOT"/>
+            <div class="screenshot_logo">
+              <img src="/static/img/logo_inline.png">
+            </div>
+            <input class="flag panel_button" type="button" value="FLAG"/>
+        </div>
       </div>
-    </div>`);
+    </div>
+    <div class="examples invisible">
+      <h3>Examples <small>(click to load)</small></h3>
+      <table>
+      </table>
+    </div>
+`);
     let io_master = Object.create(io_master_template);
     io_master.fn = fn
     io_master.target = target;
@@ -65,6 +79,22 @@ function gradio(config, fn, target) {
       interface.id = id;
       id_to_interface_map[id] = interface;
     }
+    if (config["title"]) {
+      target.find(".title").text(config["title"]);
+    }
+    if (config["description"]) {
+      target.find(".description").text(config["description"]);
+    }
+    if (config["share_url"]) {
+      let share_url = config["share_url"];
+      target.find(".share").removeClass("invisible");
+      target.find(".share-link").text(share_url).attr("href", share_url);
+      target.find(".share-copy").click(function() {
+        copyToClipboard(share_url);
+        target.find(".share-copy").text("Copied!");
+      })
+    };
+
   
     _id = 0;
     let input_interfaces = [];
@@ -147,6 +177,34 @@ function gradio(config, fn, target) {
       target.find(".screenshot").css("visibility", "visible");
       target.find(".flag").css("visibility", "visible")
     }
+    if (config["examples"]) {
+      target.find(".examples").removeClass("invisible");
+      let html = "<thead>"
+      for (let i = 0; i < config["input_interfaces"].length; i++) {
+        label = config["input_interfaces"][i][1]["label"];
+        html += "<th>" + label + "</th>";
+      }
+      html += "</thead>";
+      html += "<tbody>";
+      for (let [i, example] of config["examples"].entries()) {
+        html += "<tr row="+i+">";
+        for (let [j, col] of example.entries()) {
+          if (input_interfaces[j].load_example_preview) {
+            col = input_interfaces[j].load_example_preview(col);
+          }
+          html += "<td>" + col + "</td>";
+        }
+        html += "</tr>";
+      }
+      html += "</tbody>";
+      target.find(".examples table").html(html);
+      target.find(".examples tr").click(function() {
+        let example_id = parseInt($(this).attr("row"));
+        for (let [i, value] of config["examples"][example_id].entries()) {
+          input_interfaces[i].load_example(value);
+        }
+      })
+    };
 
     target.find(".screenshot").click(function() {
       $(".screenshot").hide();

build/lib/gradio/templates/index.html

@@ -63,20 +63,7 @@
   </head>
 
   <body id="lib">
-    <div id="share" class="invisible">
-      Live at <a id="share-link" target="_blank"></a>.
-      <button id="share-copy">Copy Link</button>
-    </div>
-    <div class="container">
-      <h1 id="title"></h1>
-      <p id="description"></p>
-    </div>
-    <div id="interface_target" class="container"></div>
-    <div id="examples" class="container invisible">
-      <h3>Examples <small>(click to load)</small></h3>
-      <table>
-      </table>
-    </div>
+    <div id="interface_target"></div>
     <div id="credit"><a href="https://github.com/gradio-app/gradio" target="_blank">
       <img src="static/img/logo_inline.png">
     </a></div>
@@ -132,49 +119,6 @@
     <script>
       $.getJSON("static/config.json", function(config) {
         io = gradio_url(config, "/api/predict/", "#interface_target");
-        if (config["title"]) {
-          $("#title").text(config["title"]);
-        }
-        if (config["description"]) {
-          $("#description").text(config["description"]);
-        }
-        if (config["share_url"]) {
-          let share_url = config["share_url"];
-          $("#share").removeClass("invisible");
-          $("#share-link").text(share_url).attr("href", share_url);
-          $("#share-copy").click(function() {
-            copyToClipboard(share_url);
-            $("#share-copy").text("Copied!");
-          })
-        };
-        if (config["examples"]) {
-          $("#examples").removeClass("invisible");
-          let html = "<thead>"
-          for (let i = 0; i < config["input_interfaces"].length; i++) {
-            label = config["input_interfaces"][i][1]["label"];
-            html += "<th>" + label + "</th>";
-          }
-          html += "</thead>";
-          html += "<tbody>";
-          for (let [i, example] of config["examples"].entries()) {
-            html += "<tr row="+i+">";
-            for (let [j, col] of example.entries()) {
-              if (io.input_interfaces[j].load_example_preview) {
-                col = io.input_interfaces[j].load_example_preview(col);
-              }
-              html += "<td>" + col + "</td>";
-            }
-            html += "</tr>";
-          }
-          html += "</tbody>";
-          $("#examples table").html(html);
-          $("#examples tr").click(function() {
-            let example_id = parseInt($(this).attr("row"));
-            for (let [i, value] of config["examples"][example_id].entries()) {
-              io.input_interfaces[i].load_example(value);
-            }
-          })
-        };
       });
       const copyToClipboard = str => {
         const el = document.createElement('textarea');

demo/basic_text.py

@@ -1,8 +1,8 @@
 import gradio as gr
 import numpy as np
 
-def answer_question(quantity, animal, place, activity_list, morning, etc):
-    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}""", "OK"
+def answer_question(quantity, animal, place, activity_list, morning):
+    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""
 
 
 gr.Interface(answer_question, 
@@ -12,16 +12,12 @@ gr.Interface(answer_question,
                 gr.inputs.Radio(["park", "zoo", "road"]),
                 gr.inputs.CheckboxGroup(["ran", "swam", "ate", "slept"]),
                 gr.inputs.Checkbox(label="Is it the morning?"),
-                gr.inputs.Textbox(default="What else?"),
             ], 
-            [
-                gr.outputs.Textbox(),
-                gr.outputs.Textbox(),
-            ],
+            "text",
             examples=[
-                [2, "cat", "park", ["ran", "swam"], True, "t1"],
-                [4, "dog", "zoo", ["ate", "swam"], False, "t2"],
-                [10, "bird", "road", ["ran"], False, "t3"],
-                [8, "cat", "zoo", ["ate"], True, "t1"],
+                [2, "cat", "park", ["ran", "swam"], True],
+                [4, "dog", "zoo", ["ate", "swam"], False],
+                [10, "bird", "road", ["ran"], False],
+                [8, "cat", "zoo", ["ate"], True],
             ],
             ).launch()

demo/digit_classifier.py

@@ -5,19 +5,18 @@ from tensorflow.keras.layers import *
 import gradio as gr
 from urllib.request import urlretrieve
 
-
 urlretrieve("https://gr-models.s3-us-west-2.amazonaws.com/mnist-model.h5", "mnist-model.h5")
 model = tf.keras.models.load_model("mnist-model.h5")
 
-
 def recognize_digit(image):
+    image = image.reshape(-1, 1)
     prediction = model.predict(image).tolist()[0]
     return {str(i): prediction[i] for i in range(10)}
 
 
 gr.Interface(
     recognize_digit, 
-    gradio.inputs.Sketchpad(flatten=True), 
+    gradio.inputs.Image(shape=(28, 28), image_mode="L", source="canvas"), 
     gradio.outputs.Label(num_top_classes=3),
     live=True,
     capture_session=True,

gradio/static/css/style.css

@@ -26,17 +26,17 @@ button, input[type="submit"], input[type="reset"], input[type="button"], select[
   text-align: right;
   font-family: monospace;
 }
-#share {
+.share {
   text-align: center;
   margin-bottom: 10px;
   font-size: 14px;
 }
-#share-copy {
+.share-copy {
   background-color: whitesmoke;
   padding: 4px;
   border-radius: 2px;
 }
-#title {
+.title {
   text-align: center;
 }
 .container {
@@ -58,7 +58,7 @@ button.secondary {
   color: black;
   background-color: #F6F6F6;
 }
-#examples table {
+.examples table {
   border-collapse: collapse;
   font-family: monospace;
   padding: 8px;
@@ -67,20 +67,20 @@ button.secondary {
   border-left: solid 4px whitesmoke;
   border-bottom: solid 4px whitesmoke;
 }
-#examples th {
+.examples th {
   padding: 8px 16px;
   text-align: left;
   font-size: 18px;
 }
-#examples td {
+.examples td {
   padding: 8px;
   cursor: pointer;
 }
 
-#examples tbody tr:nth-child(odd) {
+.examples tbody tr:nth-child(odd) {
   background-color: white;
 }
-#examples tbody tr:hover {
+.examples tbody tr:hover {
   background-color: lightgray;
 }
 #credit {

gradio/static/js/gradio.js

@@ -1,30 +1,44 @@
 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="clear panel_button" type="reset" value="CLEAR">
-          <input class="submit panel_button" type="submit" value="SUBMIT"/>
-        </div>
-      </div>
-      <div class="panel output_panel">
-        <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>
-        <div class="output_interfaces">
-        </div>
-        <div class="panel_buttons">
-          <input class="screenshot panel_button" type="button" value="SCREENSHOT"/>
-          <div class="screenshot_logo">
-            <img src="static/img/logo_inline.png">
+    <div class="share invisible">
+      Live at <a class="share-link" target="_blank"></a>.
+      <button class="share-copy">Copy Link</button>
+    </div>
+    <div class="container">
+      <h1 class="title"></h1>
+      <p class="description"></p>
+      <div class="panels">
+        <div class="panel input_panel">
+          <div class="input_interfaces">
+          </div>          
+          <div class="panel_buttons">
+            <input class="clear panel_button" type="reset" value="CLEAR">
+            <input class="submit panel_button" type="submit" value="SUBMIT"/>
           </div>
-          <input class="flag panel_button" type="button" value="FLAG"/>
+        </div>
+        <div class="panel output_panel">
+          <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>
+          <div class="output_interfaces">
+          </div>
+          <div class="panel_buttons">
+            <input class="screenshot panel_button" type="button" value="SCREENSHOT"/>
+            <div class="screenshot_logo">
+              <img src="/static/img/logo_inline.png">
+            </div>
+            <input class="flag panel_button" type="button" value="FLAG"/>
+        </div>
       </div>
-    </div>`);
+    </div>
+    <div class="examples invisible">
+      <h3>Examples <small>(click to load)</small></h3>
+      <table>
+      </table>
+    </div>
+`);
     let io_master = Object.create(io_master_template);
     io_master.fn = fn
     io_master.target = target;
@@ -65,6 +79,22 @@ function gradio(config, fn, target) {
       interface.id = id;
       id_to_interface_map[id] = interface;
     }
+    if (config["title"]) {
+      target.find(".title").text(config["title"]);
+    }
+    if (config["description"]) {
+      target.find(".description").text(config["description"]);
+    }
+    if (config["share_url"]) {
+      let share_url = config["share_url"];
+      target.find(".share").removeClass("invisible");
+      target.find(".share-link").text(share_url).attr("href", share_url);
+      target.find(".share-copy").click(function() {
+        copyToClipboard(share_url);
+        target.find(".share-copy").text("Copied!");
+      })
+    };
+
   
     _id = 0;
     let input_interfaces = [];
@@ -147,6 +177,34 @@ function gradio(config, fn, target) {
       target.find(".screenshot").css("visibility", "visible");
       target.find(".flag").css("visibility", "visible")
     }
+    if (config["examples"]) {
+      target.find(".examples").removeClass("invisible");
+      let html = "<thead>"
+      for (let i = 0; i < config["input_interfaces"].length; i++) {
+        label = config["input_interfaces"][i][1]["label"];
+        html += "<th>" + label + "</th>";
+      }
+      html += "</thead>";
+      html += "<tbody>";
+      for (let [i, example] of config["examples"].entries()) {
+        html += "<tr row="+i+">";
+        for (let [j, col] of example.entries()) {
+          if (input_interfaces[j].load_example_preview) {
+            col = input_interfaces[j].load_example_preview(col);
+          }
+          html += "<td>" + col + "</td>";
+        }
+        html += "</tr>";
+      }
+      html += "</tbody>";
+      target.find(".examples table").html(html);
+      target.find(".examples tr").click(function() {
+        let example_id = parseInt($(this).attr("row"));
+        for (let [i, value] of config["examples"][example_id].entries()) {
+          input_interfaces[i].load_example(value);
+        }
+      })
+    };
 
     target.find(".screenshot").click(function() {
       $(".screenshot").hide();

gradio/templates/index.html

@@ -63,20 +63,7 @@
   </head>
 
   <body id="lib">
-    <div id="share" class="invisible">
-      Live at <a id="share-link" target="_blank"></a>.
-      <button id="share-copy">Copy Link</button>
-    </div>
-    <div class="container">
-      <h1 id="title"></h1>
-      <p id="description"></p>
-    </div>
-    <div id="interface_target" class="container"></div>
-    <div id="examples" class="container invisible">
-      <h3>Examples <small>(click to load)</small></h3>
-      <table>
-      </table>
-    </div>
+    <div id="interface_target"></div>
     <div id="credit"><a href="https://github.com/gradio-app/gradio" target="_blank">
       <img src="static/img/logo_inline.png">
     </a></div>
@@ -132,49 +119,6 @@
     <script>
       $.getJSON("static/config.json", function(config) {
         io = gradio_url(config, "/api/predict/", "#interface_target");
-        if (config["title"]) {
-          $("#title").text(config["title"]);
-        }
-        if (config["description"]) {
-          $("#description").text(config["description"]);
-        }
-        if (config["share_url"]) {
-          let share_url = config["share_url"];
-          $("#share").removeClass("invisible");
-          $("#share-link").text(share_url).attr("href", share_url);
-          $("#share-copy").click(function() {
-            copyToClipboard(share_url);
-            $("#share-copy").text("Copied!");
-          })
-        };
-        if (config["examples"]) {
-          $("#examples").removeClass("invisible");
-          let html = "<thead>"
-          for (let i = 0; i < config["input_interfaces"].length; i++) {
-            label = config["input_interfaces"][i][1]["label"];
-            html += "<th>" + label + "</th>";
-          }
-          html += "</thead>";
-          html += "<tbody>";
-          for (let [i, example] of config["examples"].entries()) {
-            html += "<tr row="+i+">";
-            for (let [j, col] of example.entries()) {
-              if (io.input_interfaces[j].load_example_preview) {
-                col = io.input_interfaces[j].load_example_preview(col);
-              }
-              html += "<td>" + col + "</td>";
-            }
-            html += "</tr>";
-          }
-          html += "</tbody>";
-          $("#examples table").html(html);
-          $("#examples tr").click(function() {
-            let example_id = parseInt($(this).attr("row"));
-            for (let [i, value] of config["examples"][example_id].entries()) {
-              io.input_interfaces[i].load_example(value);
-            }
-          })
-        };
       });
       const copyToClipboard = str => {
         const el = document.createElement('textarea');