add csv

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__()}

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;
+}

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/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>