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

gradio/static/css/gradio.css

@@ -117,7 +117,6 @@
 }
 .label {
   width: 60px;
-  text-align: right;
 }
 .confidence_intervals .level {
   font-size: 14px;

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) {

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")

gradio/templates/image_upload_input.html

@@ -6,4 +6,6 @@
   </div>
   <input class="hidden_upload" type="file" accept="image/x-png,image/gif,image/jpeg" />
 </div>
+<link rel="stylesheet" href="https://fengyuanchen.github.io/cropper/css/cropper.css">
+<script src="https://fengyuanchen.github.io/cropper/js/cropper.js"></script>
 <script src="../static/js/image-upload-input.js"></script>