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 0000000000..acdc552cb9 Binary files /dev/null and b/gradio/static/img/table.png differ 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 += "