From 3b6a47715a57cca4f78f09cf3c646c034061cc01 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 9 Mar 2019 20:02:06 -0800
Subject: [PATCH 1/2] image output and loader

---
 build-interface.py                            |  2 +-
 gradio/outputs.py                             | 10 +++++++++
 gradio/static/css/gradio.css                  | 20 ++++++++++++++++-
 gradio/static/js/all-io.js                    | 21 ++++++++++++++++++
 .../js/interfaces/input/image_upload.js       | 22 +++++++++----------
 .../static/js/interfaces/input/sketchpad.js   |  1 +
 gradio/static/js/interfaces/input/textbox.js  |  1 +
 gradio/static/js/interfaces/output/image.js   | 10 +++++++++
 gradio/static/js/interfaces/output/label.js   |  9 +-------
 gradio/static/js/interfaces/output/textbox.js |  8 ++++---
 gradio/templates/base_template.html           |  3 ++-
 gradio/templates/output/image.html            | 12 ++++++++++
 gradio/templates/output/label.html            |  8 ++++++-
 gradio/templates/output/textbox.html          |  8 ++++++-
 14 files changed, 108 insertions(+), 27 deletions(-)
 create mode 100644 gradio/static/js/interfaces/output/image.js
 create mode 100644 gradio/templates/output/image.html

diff --git a/build-interface.py b/build-interface.py
index 236c115121..0eb1f7415b 100644
--- a/build-interface.py
+++ b/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):
diff --git a/gradio/outputs.py b/gradio/outputs.py
index 4b5eeecf69..c90bb80975 100644
--- a/gradio/outputs.py
+++ b/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__()}
diff --git a/gradio/static/css/gradio.css b/gradio/static/css/gradio.css
index 545ac043df..85dcb33990 100644
--- a/gradio/static/css/gradio.css
+++ b/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;
@@ -182,6 +192,14 @@ 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
 }
diff --git a/gradio/static/js/all-io.js b/gradio/static/js/all-io.js
index 4c0043a4c6..c44570f6b5 100644
--- a/gradio/static/js/all-io.js
+++ b/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");
+}
diff --git a/gradio/static/js/interfaces/input/image_upload.js b/gradio/static/js/interfaces/input/image_upload.js
index 225a3ae154..7a824c7422 100644
--- a/gradio/static/js/interfaces/input/image_upload.js
+++ b/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)
+  })
+})
diff --git a/gradio/static/js/interfaces/input/sketchpad.js b/gradio/static/js/interfaces/input/sketchpad.js
index c86d88918d..59289fb47e 100644
--- a/gradio/static/js/interfaces/input/sketchpad.js
+++ b/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)
diff --git a/gradio/static/js/interfaces/input/textbox.js b/gradio/static/js/interfaces/input/textbox.js
index 08311767e2..7cbcd1985e 100644
--- a/gradio/static/js/interfaces/input/textbox.js
+++ b/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)
diff --git a/gradio/static/js/interfaces/output/image.js b/gradio/static/js/interfaces/output/image.js
new file mode 100644
index 0000000000..a62fb29bcc
--- /dev/null
+++ b/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();
+})
diff --git a/gradio/static/js/interfaces/output/label.js b/gradio/static/js/interfaces/output/label.js
index 937ac42232..0812c854f7 100644
--- a/gradio/static/js/interfaces/output/label.js
+++ b/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");
-  }
-})
diff --git a/gradio/static/js/interfaces/output/textbox.js b/gradio/static/js/interfaces/output/textbox.js
index f07c41a270..95507eef44 100644
--- a/gradio/static/js/interfaces/output/textbox.js
+++ b/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);
-}
diff --git a/gradio/templates/base_template.html b/gradio/templates/base_template.html
index 76a8eda5f4..afc9f01abb 100644
--- a/gradio/templates/base_template.html
+++ b/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>
diff --git a/gradio/templates/output/image.html b/gradio/templates/output/image.html
new file mode 100644
index 0000000000..43b67cf91a
--- /dev/null
+++ b/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>
diff --git a/gradio/templates/output/label.html b/gradio/templates/output/label.html
index 46982c64d5..66c80b4e4d 100644
--- a/gradio/templates/output/label.html
+++ b/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>
diff --git a/gradio/templates/output/textbox.html b/gradio/templates/output/textbox.html
index add7bcd4b1..4d7c58b325 100644
--- a/gradio/templates/output/textbox.html
+++ b/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>
 

From 644021f2b7976cc726997cd0d71f599676ee95d0 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 9 Mar 2019 22:06:52 -0800
Subject: [PATCH 2/2] add csv

---
 gradio/inputs.py                         |  10 ++++
 gradio/static/css/gradio.css             |  33 +++++++++++--
 gradio/static/img/table.png              | Bin 0 -> 1180 bytes
 gradio/static/js/interfaces/input/csv.js |  59 +++++++++++++++++++++++
 gradio/templates/input/csv.html          |  11 +++++
 5 files changed, 110 insertions(+), 3 deletions(-)
 create mode 100644 gradio/static/img/table.png
 create mode 100644 gradio/static/js/interfaces/input/csv.js
 create mode 100644 gradio/templates/input/csv.html

diff --git a/gradio/inputs.py b/gradio/inputs.py
index 8f3d94190f..0e9411721b 100644
--- a/gradio/inputs.py
+++ b/gradio/inputs.py
@@ -131,6 +131,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__()}
diff --git a/gradio/static/css/gradio.css b/gradio/static/css/gradio.css
index 85dcb33990..ee7bffa1f8 100644
--- a/gradio/static/css/gradio.css
+++ b/gradio/static/css/gradio.css
@@ -80,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;
@@ -203,3 +203,30 @@ canvas {
 .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;
+}
diff --git a/gradio/static/img/table.png b/gradio/static/img/table.png
new file mode 100644
index 0000000000000000000000000000000000000000..acdc552cb9e75bda6e501b44e1e4f466dcfcfc21
GIT binary patch
literal 1180
zcmeAS@N?(olHy`uVBq!ia0y~yU{nEN4rU;EOrggED8X19<nF|<?wrg^AcrO0(btiI
zVPik{pF~z5Un{^T#1%--pFe;3^5sjxU>O(yxex|2sq%5{2cT-+k|4ie1_1?wgo6J0
z>-V3(|Gw;zxGqqFv%n*=n1O-sFbFdq&tH+kz`*>-)5S5QBJS<o*HxDd1X>=7z380u
zdw;CV`xBnJ>y5)=j{ENWK3(OD&Sk|ZL0*4bj^5+jJni14tcX3+j=sz|zWv#pyv)+X
zX<@r}n?5gjt;*Bgzv)Gv-}WuLJ{V_heYn=LJCE_c<N8fUHhD+c%oWQ|-T2<SxXnB2
z&dccK-&g7{Kk6Q-^XKK38&{*v-KR6?e0VK2OHi+d#l+wE(5cB=^j=NAe)xml%8DbN
zYfY5b*m%BPWcTp;y7^x|hSq+nwD@y*(~Nmnyo?Vqo2)A>Ji6rh`d5?lF72Ln^vja4
zS%TMQvoIXE^~HRG*(|{?>fzF7Ijpi5OFE|Knkc_m)0@`v_}~$ClPJ;2>OM)ACSH43
zvEkm5v{`~B*W8So&fUszvyl6sm2k;U-M1#ladpzCl%ybIhzSoX0{(qn@}h5xmYTns
z+Q+J-OS2}c*(ojwHLNr;Tsbq1W$xCCJqtDiZ3USH40eVGjxk@4GK2><NKHJa;n3@m
zF0#PPMXEk2O+_zra>d*C5zSV&u6MYoC<$u5F}U<hWP#ffW3GV5Pklim0w+7SShB7V
zeA&ZvrJ_=})5C?!rAR5)k1@-|YB7VU(%e9h6%g<z;McL(+tpzWv;L`ORlny7xZL_y
z@T8*(`$QRg<4NB-S>qor@>OCh?J#Nf_$#X<==qyvV$(NHCDymXE?l?NJ4Ckl3%oSz
zc%m@rak|?jyMw=%E~stta70)2>s-*ELvTG`Dmsp&*Qfv4(>d{9pXrKZms?U3Wn79R
zCVn|F$>mR;ls$9mlKsiNuOudJ@&B;SC}X}t&;>ikC0I?~;(teFlAQUp4$sHWr}us-
zU*jmNeCZm<LCqd~N|v8MIR+ivy7SKRxB2Ej_F93H8Yl5gNm-!6tSYH-(!rC>%jk;g
z-j|W(zUPj=%@2rJs`A%k^26w<CEv_70)kr6)dpZ{ukrV+{~wcB@yaE=zWI=p>Rnqe
zBdD^7#Y_BcC#*U7L1go}e{8L$UXLCx;ey+X#Vll@SCih!A*oI5o%BOsffLBV$f}@z
yKo@G;wPd$DrrHgAmOQ`T@1Adk96$vZFJG=-DQ9zFk4(7}NW#<A&t;ucLK6VnknubK

literal 0
HcmV?d00001

diff --git a/gradio/static/js/interfaces/input/csv.js b/gradio/static/js/interfaces/input/csv.js
new file mode 100644
index 0000000000..7302e844c2
--- /dev/null
+++ b/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();
+})
diff --git a/gradio/templates/input/csv.html b/gradio/templates/input/csv.html
new file mode 100644
index 0000000000..59deebd77d
--- /dev/null
+++ b/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>