Merge branch 'master' of github.com:abidlabs/gradiome

build-interface.py

@@ -21,7 +21,7 @@ def mdl(input):
 
 
 def launch_interface(args):
-    io = gradio.Interface(inputs=args.inputs, outputs=args.outputs, model=lambda x:np.array(1), model_type='function')
+    io = gradio.Interface(inputs=args.inputs, outputs=args.outputs, model=mdl, model_type='function')
     httpd, _, _ = io.launch(share=args.share)
 
     class ServiceExit(Exception):

gradio/inputs.py

@@ -136,6 +136,16 @@ class ImageUpload(AbstractInput):
             array = im.reshape(1, self.image_width, self.image_height, self.num_channels)
         return array
 
+class CSV(AbstractInput):
+
+    def get_template_path(self):
+        return 'templates/input/csv.html'
+
+    def preprocess(self, inp):
+        """
+        By default, no pre-processing is applied to text.
+        """
+        return inp
 
 # Automatically adds all subclasses of AbstractInput into a dictionary (keyed by class name) for easy referencing.
 registry = {cls.__name__.lower(): cls for cls in AbstractInput.__subclasses__()}

gradio/outputs.py

@@ -101,5 +101,15 @@ class Textbox(AbstractOutput):
         """
         return prediction
 
+class Image(AbstractOutput):
+
+    def get_template_path(self):
+        return 'templates/output/image.html'
+
+    def postprocess(self, prediction):
+        """
+        """
+        return prediction
+
 
 registry = {cls.__name__.lower(): cls for cls in AbstractOutput.__subclasses__()}

gradio/static/css/gradio.css

@@ -21,6 +21,16 @@
   display: flex;
   flex-flow: column;
 }
+.loading {
+  margin-left: auto;
+}
+.loading img {
+  display: none;
+  height: 22px;
+}
+.panel_head {
+  display: flex
+}
 .role {
   text-transform: uppercase;
   font-family: Arial;
@@ -70,15 +80,15 @@
   height: 100%;
   padding: 0;
 }
-.input_image, .input_audio, .input_snapshot, .input_mic, .output_class,
-.output_image {
+.input_image, .input_audio, .input_snapshot, .input_mic, .input_csv, .output_class,
+.output_image, .output_csv {
   flex: 1 1 auto;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
 }
-.input_image, .input_audio, .input_snapshot, .input_mic {
+.input_image, .input_audio, .input_snapshot, .input_mic, .input_csv {
   font-weight: bold;
   font-size: 24px;
   color: #BBB;
@@ -182,6 +192,41 @@ canvas {
   border: solid 1px black;
 }
 
-textarea {
+.text textarea {
   resize: none;
+  background-color: white;
+  border: none;
+  box-sizing: border-box;
+  padding: 4px;
+}
+
+.output_image img {
+  display: none
+}
+
+.table_holder {
+  max-width: 100%;
+  max-height: 100%;
+  overflow: scroll;
+  display: none;
+}
+.csv_preview {
+  background-color: white;
+  max-width: 100%;
+  max-height: 100%;
+  font-size: 12px;
+  font-family: monospace;
+}
+.csv_preview tr {
+  border-bottom: solid 1px black;
+}
+.csv_preview tr.header td {
+  background-color: #EEA45D;
+  font-weight: bold;
+}
+.csv_preview td {
+  padding: 2px 4px;
+}
+.csv_preview td:nth-child(even) {
+  background-color: #EEEEEE;
 }

gradio/static/js/all-io.js

@@ -45,3 +45,24 @@ try {
 const sleep = (milliseconds) => {
   return new Promise(resolve => setTimeout(resolve, milliseconds))
 }
+
+$('body').on('click', '.flag', function(e) {
+  if ($(".flag").hasClass("flagged")) {
+    $(".flag").removeClass("flagged").attr("value", "flag");
+  } else {
+    $(".flag").addClass("flagged").attr("value", "flagged");
+  }
+})
+
+var start_time;
+function loadStart() {
+  $(".loading img").show();
+  $(".loading_time").text("");
+  start_time = new Date().getTime()
+}
+
+function loadEnd() {
+  $(".loading img").hide();
+  end_time = new Date().getTime()
+  $(".loading_time").text(((end_time - start_time) / 1000).toFixed(2) + "s");
+}

gradio/static/js/interfaces/input/csv.js

@@ -0,0 +1,59 @@
+var MAX_PREVIEW_ROWS = 100
+
+$('body').on('click', ".input_csv.drop_mode", function (e) {
+  $(this).parent().find(".hidden_upload").click();
+})
+
+$('body').on('drag dragstart dragend dragover dragenter dragleave drop', ".input_csv.drop_mode", function(e) {
+  e.preventDefault();
+  e.stopPropagation();
+})
+
+function loadTableFromFiles(files) {
+  Papa.parse(files[0], {
+  	complete: function(results) {
+      $(".input_csv").hide()
+      $(".input_csv").removeClass("drop_mode")
+      var data_array = results.data
+      var table_html = ""
+      for (var i = 0; i < data_array.length && i <= MAX_PREVIEW_ROWS; i++) {
+        row = data_array[i]
+        if (i == 0) {
+          table_html += "<tr class='header'>"
+        } else {
+          table_html += "<tr>"
+        }
+        for (var c = 0; c < row.length; c++) {
+          table_html += "<td>" + row[c] + "</td>"
+        }
+        table_html += "</tr>"
+      }
+      table_html += ""
+      $(".csv_preview").html(table_html)
+      $(".table_holder").show()
+  	}
+  })
+}
+
+$(".input_csv").on('drop', function(e) {
+  files = e.originalEvent.dataTransfer.files;
+  loadTableFromFiles(files)
+});
+
+$(".hidden_upload").on("change", function() {
+  var files = !!this.files ? this.files : []
+  if (!files.length || !window.FileReader) {
+    return
+  }
+  loadTableFromFiles(files)
+})
+
+$('body').on('click', '.clear', function(e) {
+  $(".hidden_upload").prop("value", "")
+  $(".input_csv").show()
+  $(".input_csv").addClass("drop_mode")
+  $(".table_holder").hide()
+})
+$('body').on('click', '.submit', function(e) {
+  loadStart();
+})

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

@@ -44,17 +44,6 @@ $(".hidden_upload").on("change", function() {
   }
 })
 
-$('body').on('click', '.submit', function(e) {
-  src = cropper.getCroppedCanvas({
-    maxWidth: 360,
-    maxHeight: 360,
-    fillColor: "white"
-  }).toDataURL();
-  ws.send(src, function(e) {
-    notifyError(e)
-  })
-})
-
 $('body').on('click', '.clear', function(e) {
   if (cropper) {
     cropper.destroy();
@@ -67,3 +56,14 @@ $('body').on('click', '.clear', function(e) {
   $(".input_image img").removeAttr("src");
   $(".input_image").addClass("drop_mode")
 })
+$('body').on('click', '.submit', function(e) {
+  loadStart();
+  src = cropper.getCroppedCanvas({
+    maxWidth: 360,
+    maxHeight: 360,
+    fillColor: "white"
+  }).toDataURL();
+  ws.send(src, function(e) {
+    notifyError(e)
+  })
+})

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

@@ -18,6 +18,7 @@ $('body').on('click', '.clear', function(e) {
     context.clearRect(0, 0, context.canvas.width, context.canvas.height);
 })
 $('body').on('click', '.submit', function(e) {
+    loadStart();
     var dataURL = canvas.toDataURL("image/png");
     ws.send(dataURL, function(e){
       notifyError(e)

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

@@ -2,6 +2,7 @@ $('body').on('click', '.clear', function(e) {
   $(".input_text").val("");
 })
 $('body').on('click', '.submit', function(e) {
+  loadStart();
   text = $(".input_text").val();
   ws.send(text, function(e){
     notifyError(e)

gradio/static/js/interfaces/output/image.js

@@ -0,0 +1,10 @@
+ws.onmessage = function (event) {
+  loadEnd();
+  $(".output_image img").attr("src", event.data);
+  $(".output_image img").show();
+}
+
+$('body').on('click', '.clear', function(e) {
+  $(".output_image img").removeAttr("src");
+  $(".output_image img").hide();
+})

gradio/static/js/interfaces/output/label.js

@@ -1,4 +1,5 @@
 ws.onmessage = function (event) {
+  loadEnd();
   var data = JSON.parse(event.data)
   // data = {
   //   label: "happy",
@@ -29,11 +30,3 @@ $('body').on('click', '.clear', function(e) {
   $(".output_class").text("")
   $(".confidence_intervals").empty()
 })
-
-$('body').on('click', '.flag', function(e) {
-  if ($(".flag").hasClass("flagged")) {
-    $(".flag").removeClass("flagged").attr("value", "flag");
-  } else {
-    $(".flag").addClass("flagged").attr("value", "flagged");
-  }
-})

gradio/static/js/interfaces/output/textbox.js

@@ -1,6 +1,8 @@
+ws.onmessage = function (event) {
+  loadEnd();
+ 	$(".output_text").val(event.data);
+}
+
 $('body').on('click', '.clear', function(e) {
   $(".output_text").val("");
 })
-ws.onmessage = function (event) {
- 	$(".output_text").val(event.data);
-}

gradio/templates/base_template.html

@@ -5,9 +5,10 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="../static/css/style.css">
     <link rel="stylesheet" href="../static/css/gradio.css">
+    <link rel="stylesheet" type="text/css" href="https://loading.io/css/loading.css"/>    
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
     <script src="../static/js/utils.js"></script>
     <script src="../static/js/all-io.js"></script>
-    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   </head>
 
   <body>

gradio/templates/input/csv.html

@@ -0,0 +1,11 @@
+<div class="gradio input csv">
+  <div class="role">Input</div>
+  <div class="input_csv drop_mode">
+    <div class="input_caption">Drop CSV File Here<br>- or -<br>Click to Upload</div>
+  </div>
+  <div class="table_holder"><table class="csv_preview"></table></div>
+  <input class="hidden_upload" type="file" accept=".csv" />
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.3/papaparse.min.js"></script>
+<script src="../static/js/interfaces/input/csv.js"></script>

gradio/templates/output/image.html

@@ -0,0 +1,12 @@
+<div class="gradio output image">
+  <div class="panel_head">
+    <div class="role">Output</div>
+    <div class="loading">
+      <img src="../static/img/logo_mini.png" class="ld ld-skew"/>
+      <span class="loading_time"></span>
+    </div>
+  </div>
+  <div class="output_image"><img /></div>
+</div>
+
+<script src="../static/js/interfaces/output/image.js"></script>

gradio/templates/output/label.html

@@ -1,5 +1,11 @@
 <div class="gradio output classifier">
-  <div class="role">Output</div>
+  <div class="panel_head">
+    <div class="role">Output</div>
+    <div class="loading">
+      <img src="../static/img/logo_mini.png" class="ld ld-skew"/>
+      <span class="loading_time"></span>
+    </div>
+  </div>
   <div class="output_class"></div>
   <div class="confidence_intervals">
   </div>

gradio/templates/output/textbox.html

@@ -1,5 +1,11 @@
 <div class="gradio output text">
-  <div class="role">Output</div>
+  <div class="panel_head">
+    <div class="role">Output</div>
+    <div class="loading">
+      <img src="../static/img/logo_mini.png" class="ld ld-skew"/>
+      <span class="loading_time"></span>
+    </div>
+  </div>
   <textarea readonly class="output_text"></textarea>
 </div>