diff --git a/gradio/static/css/gradio.css b/gradio/static/css/gradio.css index 9eedf92c04..9e2da838a7 100644 --- a/gradio/static/css/gradio.css +++ b/gradio/static/css/gradio.css @@ -110,7 +110,6 @@ } .label { width: 60px; - text-align: right; } .confidence_intervals .level { font-size: 14px; diff --git a/gradio/static/js/class-output.js b/gradio/static/js/class-output.js index 3761cd143d..22babf9ba3 100644 --- a/gradio/static/js/class-output.js +++ b/gradio/static/js/class-output.js @@ -27,6 +27,19 @@ try { sleep(300).then(() => { // $(".output_class").text(event.data); var data = JSON.parse(event.data) + data = { + label: "happy", + confidences : [ + { + label : "happy", + confidence: 0.7 + }, + { + label : "sad", + confidence: 0.3 + }, + ] + } $(".output_class").text(data["label"]) $(".confidence_intervals").empty() if ("confidences" in data) { diff --git a/gradio/static/js/image-upload-input.js b/gradio/static/js/image-upload-input.js index 6c2b2d1231..6dec0cdc98 100644 --- a/gradio/static/js/image-upload-input.js +++ b/gradio/static/js/image-upload-input.js @@ -1,8 +1,10 @@ -$(".input_image").click(function (e) { +var cropper; + +$('body').on('click', ".input_image.drop_mode", function (e) { $(this).parent().find(".hidden_upload").click(); }) -$(".input_image").on('drag dragstart dragend dragover dragenter dragleave drop', function(e) { +$('body').on('drag dragstart dragend dragover dragenter dragleave drop', ".input_image.drop_mode", function(e) { e.preventDefault(); e.stopPropagation(); }) @@ -13,7 +15,12 @@ function loadPreviewFromFiles(files) { ReaderObj.onloadend = function() { $(".input_caption").hide() $(".input_image").removeClass("drop_mode") - $(".input_image img").attr("src", this.result) + var image = $(".input_image img") + image.attr("src", this.result) + image.cropper({aspectRatio : 1.0}); + if (!cropper) { + cropper = image.data('cropper'); + } } } @@ -43,6 +50,10 @@ $('body').on('click', '.submit', function(e) { }) $('body').on('click', '.clear', function(e) { + if (cropper) { + cropper.destroy(); + cropper = null + } $(".input_caption").show() $(".input_image img").removeAttr("src"); $(".input_image").addClass("drop_mode") diff --git a/gradio/templates/image_upload_input.html b/gradio/templates/image_upload_input.html index 739e49eb52..ee02413ecb 100644 --- a/gradio/templates/image_upload_input.html +++ b/gradio/templates/image_upload_input.html @@ -6,4 +6,6 @@ + +