ui changes

gradio/static/css/gradio.css

@@ -81,8 +81,10 @@
   font-weight: bold;
   font-size: 36px;
 }
-.input_image, .input_audio {
+.drop_mode {
   border: dashed 8px #DDD;
+}
+.input_image, .input_audio {
   line-height: 1.5em;
 }
 .input_snapshot, .input_mic {

gradio/static/js/class-output.js

@@ -37,3 +37,7 @@ try {
   notifyError(e)
 }
 
+$('body').on('click', '.clear', function(e) {
+  $(".output_class").text("")
+})
+

gradio/static/js/image-upload-input.js

@@ -12,6 +12,7 @@ function loadPreviewFromFiles(files) {
   ReaderObj.readAsDataURL(files[0])
   ReaderObj.onloadend = function() {
     $(".input_caption").hide()
+    $(".input_image").removeClass("drop_mode")
     $(".input_image img").attr("src", this.result)
   }
 }
@@ -33,8 +34,6 @@ $(".hidden_upload").on("change", function() {
   }
 })
 
-
-
 $('body').on('click', '.submit', function(e) {
   var src = $('.input_image img').attr('src');
   ws.send(src, function(e) {
@@ -45,4 +44,5 @@ $('body').on('click', '.submit', function(e) {
 $('body').on('click', '.clear', function(e) {
   $(".input_caption").show()
   $(".input_image img").removeAttr("src");
+  $(".input_image").addClass("drop_mode")
 })

gradio/templates/image_upload_input.html

@@ -1,9 +1,11 @@
 <div class="gradio input image_file">
   <div class="role">Input</div>
-  <div class="input_image">
+  <div class="input_image drop_mode">
     <div class="input_caption">Drop Image Here<br>- or -<br>Click to Upload</div>
     <img />
   </div>
   <input class="hidden_upload" type="file" accept="image/x-png,image/gif,image/jpeg" />
 </div>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.0.0/cropper.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.0.0/cropper.min.js" type="module"></script>
 <script src="../static/js/image-upload-input.js"></script>