fixed merge conflict

gradio/css/draw-a-digit.css

@@ -23,27 +23,40 @@ body {
 }
 
 
-.uploader {position:relative; overflow:hidden; width:300px; height:350px; background:#f3f3f3; border:2px dashed #e8e8e8;}
+.uploader {position:relative; overflow:hidden; width:400px; height:400px; background:#f3f3f3; border:2px dashed #e8e8e8;    font-family: "Arial"; font-size: 40px; color: darkolivegreen;}
 
 #filePhoto{
     position:absolute;
-    width:300px;
+    width:400px;
     height:400px;
     top:-50px;
     left:0;
     z-index:2;
     opacity:0;
     cursor:pointer;
+
 }
 
 .uploader img{
     position:absolute;
-    width:302px;
-    height:352px;
+    width:400px;
+    height:400px;
     top:-1px;
     left:-1px;
     z-index:1;
     border:none;
+    object-fit: cover;
+
+}
+
+
+#predict_div {
+  text-align: center;
+  vertical-align: middle;
+  font-family: 'Arial';
+  color: white;
+  font-size: 60px;
+  word-wrap: break-word;
 }
 #textbox-input {
     border-radius: 25px;

gradio/js/all-io.js

@@ -6,7 +6,7 @@ try {
   if (origin.includes("ngrok")){
       var ws = new WebSocket(NGROK_URL)
   } else {
-      var ws = new WebSocket("ws://127.0.0.1:" + SOCKET_PORT + "/")
+      var ws = new WebSocket("ws://127.0.0.1:9200/")
   }
   ws.onerror = function(evt) {
     console.log(evt)

gradio/js/class-output.js

@@ -28,15 +28,16 @@ try {
   ws.onmessage = function (event) {
     console.log(event.data);
     sleep(300).then(() => {
+      if (event.data.length == 1) {
+      $("#predict_div").css({ 'font-size':'300px'});
+      } else {
+      $("#predict_div").css({ 'font-size':'60px'});  
+      }
       $("#predict_div").text(event.data);
-      $("#predict_div").css("font-family", "Arial");
-      $("#predict_div").css("color", "White");
-      $("#predict_div").css("font-size", "20vw");
-      $("#predict_div").css("text-align", "center");
-      $("#predict_div").css("vertical-align", "middle");
     })
 
   }
 } catch (e) {
   notifyError(e)
 }
+

gradio/js/image-upload-input.js

@@ -1,36 +1,3 @@
-// function previewFile(){
-//    var preview = document.querySelector('img'); //selects the query named img
-//    var file    = document.querySelector('input[type=file]').files[0]; //sames as here
-//    var reader  = new FileReader();
-
-//    reader.onloadend = function () {
-//        preview.src = reader.result;
-//    }
-
-//    if (file) {
-//        reader.readAsDataURL(file); //reads the data as a URL
-//        console.log(file)
-//    } else {
-//        preview.src = "";
-//    }
-// }
-
-// previewFile();  //calls the function named previewFile()
-
-// $('#submit-button').click(function(e){
-//    var file    = document.querySelector('input[type=file]').files[0]; //sames as here
-//    var reader  = new FileReader();
-//    var preview = document.querySelector('img'); //selects the query named img
-
-//    if (file) {
-//         reader.readAsDataURL(file); //reads the data as a URL
-//         console.log(preview.src)
-//         ws.send(preview.src, function(e){
-//       notifyError(e)
-//     });
-// }
-// })
-
 
 var imageLoader = document.getElementById('filePhoto');
     imageLoader.addEventListener('change', handleImage, false);
@@ -45,9 +12,6 @@ function handleImage(e) {
 }
 
 $('#submit-button').click(function(e){
-
-    // var reader = new FileReader();
-    // reader.readAsDataURL(e.target.files[0]);
     var src = $('.uploader img').attr('src');
     ws.send(src, function(e){
       notifyError(e)

gradio/templates/class_output.html

@@ -1,5 +1,5 @@
 <div class="col-6">
-  <h5>Class Output:</h5>
+  <h5></h5><br>
   <div id="predict_div" style="background-color:grey">
   	
   </div>

gradio/templates/image_upload_input.html

@@ -14,11 +14,11 @@
 
  -->
 <div class="col-6">
-	<h5>Image Upload Input:</h5>
+	<h5 style="text-align: center">Image Upload Input:</h5>
 
- <div class="uploader" onclick="$('#filePhoto').click()">
-    click here or drag your images for preview
-    <img src=""/>
+ <div class="uploader" style="text-align: center; vertical-align: middle" onclick="$('#filePhoto').click()">
+    <br>Click here <br> or <br> drag and drop <br>an image
+    <img/>
     <input type="file" name="userprofile_picture"  id="filePhoto" />
 </div>    
   <div class="btn-group" role="group" aria-label="Basic example">