Merge branch 'master' into dawood/sample-inputs

build/lib/gradio/interface.py

@@ -19,7 +19,7 @@ from IPython import get_ipython
 
 LOCALHOST_IP = "127.0.0.1"
 TRY_NUM_PORTS = 100
-# PKG_VERSION_URL = "https://gradio.app/api/pkg-version"
+PKG_VERSION_URL = "https://gradio.app/api/pkg-version"
 
 
 class Interface:

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

@@ -1,14 +1,12 @@
 .panel {
   min-width: 300px;
-  flex-grow: 1;
+  flex: 1 1 0;
   display: inline-block;
-  max-width: 45%;
-  min-width: 300px;
   box-sizing: border-box;
-  margin: 0 14px 14px;
+  margin: 0 30px 14px 0;
 }
 .panel_header, .interface {
-  background-color: #F6F6F6;
+  background-color: #EEEEEE;
 }
 .panel_header {
   text-transform: uppercase;
@@ -37,7 +35,7 @@
   display: flex;
 }
 .submit, .clear, .panel_button {
-  background-color: #F6F6F6 !important;
+  background-color: #EEEEEE !important;
   flex-grow: 1;
   padding: 8px !important;
   box-sizing: border-box;
@@ -55,7 +53,7 @@
 }
 .flag_message {
   padding: 8px !important;
-  background-color: #F6F6F6 !important;
+  background-color: #EEEEEE !important;
 }
 .clear, .flag {
   margin-left: 8px;
@@ -107,20 +105,11 @@
 .flag.flagged {
   background-color: pink !important;
 }
-
-.test_panel {
-  margin-top: 5px;
-  padding:10px;
-  background-color: #eea45d6b !important;
-  border: 1px solid #EEA45D;
-  justify-content: space-between;
+#loading {
+  justify-content: center;
   align-items: center;
 }
 
-.tests {
-  margin-top: 10px;
-}
-
-.test_panel > input[type="button"] {
-  max-width: 100px;
+.invisible {
+  display: none !important;
 }

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

@@ -1,3 +1,6 @@
+.hide {
+  display: none !important;
+}
 .sketchpad canvas {
   background-color: white;
 }
@@ -29,9 +32,23 @@
   height: 24px;
   width: 24px;
 }
-.canvas_holder {
-  flex: 1 1 auto;
+.view_holders {
+  flex-grow: 1;
+  background-color: #CCCCCC;
+  position: relative;
+}
+.canvas_holder canvas {
+  background-color: white;
+}
+.canvas_holder, .saliency_holder {
   text-align: center;
+  width: 100%;
+  height: 100%;
+}
+.saliency_holder {
+  position: absolute;
+  top: 0;
+  opacity: 0.7;
 }
 canvas {
   border: solid 1px black;

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

@@ -1,4 +1,4 @@
-.input_text {
+.input_text, .input_text_saliency {
   resize: none;
   width: 100%;
   font-size: 18px;
@@ -8,4 +8,8 @@
   border: solid 1px black;
   box-sizing: border-box;
   padding: 4px;
+  font-family: monospace;
+}
+.input_text_saliency {
+  display: none;
 }

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

@@ -63,3 +63,29 @@ button.secondary {
   color: black;
   background-color: #F6F6F6;
 }
+#featured_table {
+  border-collapse: collapse;
+  border: solid 2px #EEEEEE;
+  margin-bottom: 20px;
+  table-layout: fixed;
+}
+#featured_table td {
+  padding: 4px;
+  text-align: center;
+  cursor: pointer;
+  width: 250px;
+  max-width: 250px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+#featured_table tr:nth-child(even) {
+  background-color: #EEEEEE;
+}
+#featured_table tr:hover {
+  background-color: #EEA45D;
+}
+#featured_history img {
+  height: 60px;
+  width: 100px;
+}

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

@@ -5,6 +5,10 @@ var io_master = {
     var post_data = {
       'data': data
     };
+    $("#loading").removeClass("invisible");
+    $("#loading_in_progress").show();
+    $("#loading_failed").hide();
+    $("#output_interface").addClass("invisible");
     $.ajax({type: "POST",
         url: "/api/predict/",
         data: JSON.stringify(post_data),
@@ -14,6 +18,8 @@ var io_master = {
             }
         },
         error: function(XMLHttpRequest, textStatus, errorThrown) {
+         $("#loading_in_progress").hide();
+         $("#loading_failed").show();
          console.log(XMLHttpRequest);
          console.log(textStatus);
          console.log(errorThrown);
@@ -26,28 +32,14 @@ var io_master = {
     if (this.input_interface.output && data["saliency"]) {
       this.input_interface.output(data["saliency"]);
     }
-  },
-  test: function(type, data) {
-    var post_data = {
-      'data': data
-    };
-    if (type == "rotation") {
-      $.ajax({type: "POST",
-        url: "/api/auto/rotation",
-        data: JSON.stringify(post_data)
-      });
-    } else if (type == "lighting") {
-      $.ajax({type: "POST",
-        url: "/api/auto/lighting",
-        data: JSON.stringify(post_data)
-      });
-    }
+    $("#loading").addClass("invisible");
+    $("#output_interface").removeClass("invisible");
   },
   flag: function(message) {
     var post_data = {
       'data': {
-        'input' : this.last_input,
-        'output' : this.last_output,
+        'input_data' : toStringIfObject(this.last_input) ,
+        'output_data' : toStringIfObject(this.last_output),
         'message' : message
       }
     }

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

@@ -25,17 +25,6 @@ const image_input = {
       </div>
     </div>
   `,
-  test_html: `
-    <!--<div class="panel_buttons test_panel">-->
-       <!--<div><strong>Rotation</strong>: (rotates between -180 and 180 degrees)</div>-->
-       <!--<input type="button" class="panel_button rotate_test" value="Run"/>-->
-     <!--</div>-->
-     <!--<div class="panel_buttons test_panel">-->
-       <!--<div><strong>Lighting</strong>: (adjusts the lighting to 9 different levels)</div>-->
-       <!--<input type="button" class="panel_button light_test" value="Run"/>-->
-     <!--</div>-->
-     <!--<a href="bulk_data.html"><input type="button" class="panel_button" value="Bulk Data" style="margin-top: 10px;"/></a>-->
-  `,
   init: function() {
     var io = this;
     $('body').append(this.overlay_html.format(this.id));
@@ -123,26 +112,7 @@ const image_input = {
       this.target.find(".saliency_holder").removeClass("hide").html(`
         <canvas class="saliency" width=${width} height=${height}></canvas>`);
       var ctx = this.target.find(".saliency")[0].getContext('2d');
-      var cell_width = width / data[0].length
-      var cell_height = height / data.length
-      var r = 0
-      data.forEach(function(row) {
-        var c = 0
-        row.forEach(function(cell) {
-          if (cell < 0.25) {
-            ctx.fillStyle = "white";
-          } else if (cell < 0.5) {
-            ctx.fillStyle = "yellow";
-          } else if (cell < 0.75) {
-            ctx.fillStyle = "orange";
-          } else {
-            ctx.fillStyle = "red";
-          }
-          ctx.fillRect(c * cell_width, r * cell_height, cell_width, cell_height);
-          c++;
-        })
-        r++;
-      })
+      paintSaliency(ctx, width, height);
     }
   },
   state: "NO_IMAGE",

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

@@ -5,8 +5,13 @@ const sketchpad_input = {
       <div id="brush_2" size="16" class="brush selected"></div>
       <div id="brush_3" size="24" class="brush"></div>
     </div>
-    <div class="canvas_holder">
-      <canvas id="canvas"></canvas>
+    <div class="view_holders">
+      <div class="saliency_holder hide">
+        <canvas class="saliency"></canvas>
+      </div>
+      <div class="canvas_holder">
+        <canvas id="canvas"></canvas>
+      </div>
     </div>`,
   init: function() {
     var io = this;
@@ -14,10 +19,12 @@ const sketchpad_input = {
         this.target.find(".canvas_holder").height()) - 2 // dimension - border
     var id = this.id;
     this.sketchpad = new Sketchpad({
-      element: '.interface[interface_id=' + id + '] > .canvas_holder canvas',
+      element: '.interface[interface_id=' + id + '] .canvas_holder canvas',
       width: dimension,
       height: dimension
     });
+    this.target.find(".saliency")
+      .attr("width", dimension+"px").attr("height", dimension+"px");
     this.sketchpad.penSize = this.target.find(".brush.selected").attr("size");
     this.canvas = this.target.find('.canvas_holder canvas')[0];
     this.context = this.canvas.getContext("2d");
@@ -31,8 +38,28 @@ const sketchpad_input = {
     var dataURL = this.canvas.toDataURL("image/png");
     this.io_master.input(this.id, dataURL);
   },
+  output: function(data) {
+    this.target.find(".saliency_holder").removeClass("hide");
+    var ctx = this.target.find(".saliency")[0].getContext('2d');
+    let dimension = this.target.find(".saliency").width();
+    console.log(data, dimension, dimension);
+    paintSaliency(data, dimension, dimension, ctx);
+  },
   clear: function() {
     this.context.clearRect(0, 0, this.context.canvas.width, this.context.
         canvas.height);
+    this.target.find(".saliency_holder").addClass("hide");
+  },
+  renderFeatured: function(data) {
+    return `<img src=${data}>`;
+  },
+  loadFeatured: function(data) {
+    let ctx = $(".canvas_holder canvas")[0].getContext("2d");
+    var img = new Image;
+    let dimension = this.target.find(".canvas_holder canvas").width();
+    img.onload = function(){
+      ctx.drawImage(img,0,0,dimension,dimension);
+    };
+    img.src = data;
   }
 }

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

@@ -1,11 +1,33 @@
 const textbox_input = {
-  html: `<textarea class="input_text" placeholder="Enter text here..."></textarea>`,
+  html: `<textarea class="input_text" placeholder="Enter text here..."></textarea>
+  <div class='input_text_saliency'></div>`,
   init: function() {},
   submit: function() {
     text = this.target.find(".input_text").val();
     this.io_master.input(this.id, text);
   },
+  output: function(data) {
+    this.target.find(".input_text").hide();
+    this.target.find(".input_text_saliency").show();
+    this.target.find(".input_text_saliency").empty();
+    let html = '';
+    let text = this.target.find(".input_text").val();
+    let index = 0;
+    data.forEach(function(value, index) {
+      html += `<span style='background-color:rgba(255,0,0,${value})'>${text.charAt(index)}</span>`;
+    })
+    $(".input_text_saliency").html(html);
+  },
   clear: function() {
     this.target.find(".input_text").val("");
+    this.target.find(".input_text_saliency").hide();
+    this.target.find(".input_text").show();
+  },
+  renderFeatured: function(data) {
+    return data;
+  },
+  loadFeatured: function(data) {
+    this.clear();
+    this.target.find(".input_text").val(data);
   }
 }

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

@@ -43,7 +43,9 @@ $.getJSON("static/config.json", function(data) {
     input_interface.clear();
     output_interface.clear();
     $(".flag").removeClass("flagged");
-    $(".flag_message").empty()
+    $(".flag_message").empty
+    $("#loading").addClass("invisible");
+    $("#output_interface").removeClass("invisible");
     io_master.last_input = null;
     io_master.last_output = null;
   })

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

@@ -32,3 +32,33 @@ function resizeImage(base64Str, max_width, max_height, callback) {
     callback.call(null, canvas.toDataURL());
   }
 }
+
+function toStringIfObject(input) {
+  if (input instanceof Object) {
+    return JSON.stringify(input);
+  }
+  return input;
+}
+
+function paintSaliency(data, width, height, ctx) {
+  var cell_width = width / data[0].length
+  var cell_height = height / data.length
+  var r = 0
+  data.forEach(function(row) {
+    var c = 0
+    row.forEach(function(cell) {
+      if (cell < 0.25) {
+        ctx.fillStyle = "white";
+      } else if (cell < 0.5) {
+        ctx.fillStyle = "yellow";
+      } else if (cell < 0.75) {
+        ctx.fillStyle = "orange";
+      } else {
+        ctx.fillStyle = "red";
+      }
+      ctx.fillRect(c * cell_width, r * cell_height, cell_width, cell_height);
+      c++;
+    })
+    r++;
+  })
+}

build/lib/gradio/templates/index.html

@@ -44,15 +44,14 @@
           <input class="submit" type="submit" value="submit"/>
           <input class="clear" type="reset" value="clear">
         </div>
-        <div class="tests"></div>
       </div>
       <div class="panel">
         <div class="panel_header">
           Output
-          <div class="loading">
-            <img src="../static/img/logo_mini.png" class="ld ld-skew"/>
-            <span class="loading_time"></span>
-          </div>
+        </div>
+        <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 id="output_interface" class="interface"></div>
         <div class="panel_buttons">

gradio.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 1.0
 Name: gradio
-Version: 0.8.0
+Version: 0.8.1
 Summary: Python library for easily interacting with trained machine learning models
 Home-page: https://github.com/abidlabs/gradio
 Author: Abubakar Abid

gradio.egg-info/SOURCES.txt

@@ -19,8 +19,6 @@ gradio.egg-info/top_level.txt
 gradio/static/apple-app-site-association
 gradio/static/config.json
 gradio/static/css/.DS_Store
-gradio/static/css/bulk_style.css
-gradio/static/css/font-awesome.min.css
 gradio/static/css/gradio.css
 gradio/static/css/loading.css
 gradio/static/css/style.css
@@ -35,6 +33,7 @@ gradio/static/css/interfaces/output/textbox.css
 gradio/static/css/vendor/tui-color-picker.css
 gradio/static/css/vendor/tui-image-editor.css
 gradio/static/img/logo.png
+gradio/static/img/logo_error.png
 gradio/static/img/logo_inline.png
 gradio/static/img/logo_loading.gif
 gradio/static/img/logo_mini.png

gradio.egg-info/requires.txt

@@ -6,4 +6,7 @@ psutil
 paramiko
 scipy
 IPython
+<<<<<<< HEAD
 scikit-image
+=======
+>>>>>>> master

gradio/static/css/bulk_style.css

@@ -1,30 +0,0 @@
-body {
-  font-family: 'Open Sans', sans-serif;
-  font-size: 12px;
-  margin: 0;
-}
-nav {
-  text-align: center;
-  padding: 16px 0 4px;
-}
-nav img {
-  margin-right: auto;
-  height: 32px;
-}
-#bulk_rows td {
-  text-align: center;
-  height: 60px;
-}
-#bulk_rows tr:nth-child(even) {
-  background: #DDD
-}
-#bulk_rows img {
-  text-align: center;
-  height: 100%;
-}
-#bulk_rows {
-  margin: 0 auto;
-  width: 70%;
-  border-spacing: 0;
-  border-collapse: collapse;
-}

gradio/static/css/gradio.css

@@ -1,14 +1,12 @@
 .panel {
   min-width: 300px;
-  flex-grow: 1;
+  flex: 1 1 0;
   display: inline-block;
-  max-width: 45%;
-  min-width: 300px;
   box-sizing: border-box;
-  margin: 0 14px 14px;
+  margin: 0 30px 14px 0;
 }
 .panel_header, .interface {
-  background-color: #F6F6F6;
+  background-color: #EEEEEE;
 }
 .panel_header {
   text-transform: uppercase;
@@ -37,7 +35,7 @@
   display: flex;
 }
 .submit, .clear, .panel_button {
-  background-color: #F6F6F6 !important;
+  background-color: #EEEEEE !important;
   flex-grow: 1;
   padding: 8px !important;
   box-sizing: border-box;
@@ -55,7 +53,7 @@
 }
 .flag_message {
   padding: 8px !important;
-  background-color: #F6F6F6 !important;
+  background-color: #EEEEEE !important;
 }
 .clear, .flag {
   margin-left: 8px;
@@ -107,20 +105,11 @@
 .flag.flagged {
   background-color: pink !important;
 }
-
-.test_panel {
-  margin-top: 5px;
-  padding:10px;
-  background-color: #eea45d6b !important;
-  border: 1px solid #EEA45D;
-  justify-content: space-between;
+#loading {
+  justify-content: center;
   align-items: center;
 }
 
-.tests {
-  margin-top: 10px;
-}
-
-.test_panel > input[type="button"] {
-  max-width: 100px;
+.invisible {
+  display: none !important;
 }

gradio/static/css/style.css

@@ -63,3 +63,29 @@ button.secondary {
   color: black;
   background-color: #F6F6F6;
 }
+#featured_table {
+  border-collapse: collapse;
+  border: solid 2px #EEEEEE;
+  margin-bottom: 20px;
+  table-layout: fixed;
+}
+#featured_table td {
+  padding: 4px;
+  text-align: center;
+  cursor: pointer;
+  width: 250px;
+  max-width: 250px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+#featured_table tr:nth-child(even) {
+  background-color: #EEEEEE;
+}
+#featured_table tr:hover {
+  background-color: #EEA45D;
+}
+#featured_history img {
+  height: 60px;
+  width: 100px;
+}

gradio/static/js/all_io.js

@@ -5,6 +5,10 @@ var io_master = {
     var post_data = {
       'data': data
     };
+    $("#loading").removeClass("invisible");
+    $("#loading_in_progress").show();
+    $("#loading_failed").hide();
+    $("#output_interface").addClass("invisible");
     $.ajax({type: "POST",
         url: "/api/predict/",
         data: JSON.stringify(post_data),
@@ -14,6 +18,8 @@ var io_master = {
             }
         },
         error: function(XMLHttpRequest, textStatus, errorThrown) {
+         $("#loading_in_progress").hide();
+         $("#loading_failed").show();
          console.log(XMLHttpRequest);
          console.log(textStatus);
          console.log(errorThrown);
@@ -26,28 +32,14 @@ var io_master = {
     if (this.input_interface.output && data["saliency"]) {
       this.input_interface.output(data["saliency"]);
     }
-  },
-  test: function(type, data) {
-    var post_data = {
-      'data': data
-    };
-    if (type == "rotation") {
-      $.ajax({type: "POST",
-        url: "/api/auto/rotation",
-        data: JSON.stringify(post_data)
-      });
-    } else if (type == "lighting") {
-      $.ajax({type: "POST",
-        url: "/api/auto/lighting",
-        data: JSON.stringify(post_data)
-      });
-    }
+    $("#loading").addClass("invisible");
+    $("#output_interface").removeClass("invisible");
   },
   flag: function(message) {
     var post_data = {
       'data': {
-        'input' : this.last_input,
-        'output' : this.last_output,
+        'input_data' : toStringIfObject(this.last_input) ,
+        'output_data' : toStringIfObject(this.last_output),
         'message' : message
       }
     }

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

@@ -49,5 +49,17 @@ const sketchpad_input = {
     this.context.clearRect(0, 0, this.context.canvas.width, this.context.
         canvas.height);
     this.target.find(".saliency_holder").addClass("hide");
+  },
+  renderFeatured: function(data) {
+    return `<img src=${data}>`;
+  },
+  loadFeatured: function(data) {
+    let ctx = $(".canvas_holder canvas")[0].getContext("2d");
+    var img = new Image;
+    let dimension = this.target.find(".canvas_holder canvas").width();
+    img.onload = function(){
+      ctx.drawImage(img,0,0,dimension,dimension);
+    };
+    img.src = data;
   }
 }

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

@@ -22,5 +22,12 @@ const textbox_input = {
     this.target.find(".input_text").val("");
     this.target.find(".input_text_saliency").hide();
     this.target.find(".input_text").show();
+  },
+  renderFeatured: function(data) {
+    return data;
+  },
+  loadFeatured: function(data) {
+    this.clear();
+    this.target.find(".input_text").val(data);
   }
 }

gradio/static/js/load_interfaces.js

@@ -43,7 +43,9 @@ $.getJSON("static/config.json", function(data) {
     input_interface.clear();
     output_interface.clear();
     $(".flag").removeClass("flagged");
-    $(".flag_message").empty()
+    $(".flag_message").empty
+    $("#loading").addClass("invisible");
+    $("#output_interface").removeClass("invisible");
     io_master.last_input = null;
     io_master.last_output = null;
   })

gradio/static/js/utils.js

@@ -33,6 +33,13 @@ function resizeImage(base64Str, max_width, max_height, callback) {
   }
 }
 
+function toStringIfObject(input) {
+  if (input instanceof Object) {
+    return JSON.stringify(input);
+  }
+  return input;
+}
+
 function paintSaliency(data, width, height, ctx) {
   var cell_width = width / data[0].length
   var cell_height = height / data.length

gradio/templates/index.html

@@ -44,15 +44,14 @@
           <input class="submit" type="submit" value="submit"/>
           <input class="clear" type="reset" value="clear">
         </div>
-        <div class="tests"></div>
       </div>
       <div class="panel">
         <div class="panel_header">
           Output
-          <div class="loading">
-            <img src="../static/img/logo_mini.png" class="ld ld-skew"/>
-            <span class="loading_time"></span>
-          </div>
+        </div>
+        <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 id="output_interface" class="interface"></div>
         <div class="panel_buttons">

gradio/test.py

@@ -0,0 +1,25 @@
+import tensorflow as tf
+import gradio
+
+(x_train, y_train),(x_test, y_test) = tf.keras.datasets.mnist.load_data()
+x_train, x_test = x_train / 255.0, x_test / 255.0
+
+model = tf.keras.models.Sequential([
+  tf.keras.layers.Flatten(),
+  tf.keras.layers.Dense(512, activation=tf.nn.relu),
+  tf.keras.layers.Dropout(0.2),
+  tf.keras.layers.Dense(10, activation=tf.nn.softmax)
+])
+
+model.compile(optimizer='adam',
+              loss='sparse_categorical_crossentropy',
+              metrics=['accuracy'])
+model.fit(x_train, y_train, epochs=1)
+inp = gradio.inputs.Sketchpad(sample_inputs=x_train[:10])
+iface = gradio.Interface(inputs=inp, outputs="label", model=model, model_type='keras')
+iface.launch(inline=False, share=False, inbrowser=True);
+
+
+# model = tf.keras.models.load_model('MNIST_9344.h5')
+# iface = gradio.Interface(inputs="sketchpad", outputs="label", model=model, model_type='keras')
+# iface.launch(inline=False, share=False, inbrowser=True);

setup.py

@@ -5,7 +5,7 @@ except ImportError:
 
 setup(
     name='gradio',
-    version='0.8.0',
+    version='0.8.1',
     include_package_data=True,
     description='Python library for easily interacting with trained machine learning models',
     author='Abubakar Abid',