From c4fbc259c349a8a776df60f5151bc6a3ba846c3e Mon Sep 17 00:00:00 2001 From: Ali Abdalla Date: Tue, 19 Feb 2019 02:52:28 -0800 Subject: [PATCH] css stuff --- Emotional Detector.ipynb | 7 ++-- css/draw-a-digit.css | 45 +++++++++++++++++++++--- gradio/css/draw-a-digit.css | 24 +++++++++++++ gradio/js/all-io.js | 2 +- gradio/templates/class_output.html | 2 +- gradio/templates/image_upload_input.html | 4 +-- interface.html | 27 +++++++++++--- js/all-io.js | 6 ++-- js/class-output.js | 11 +++--- js/image-upload-input.js | 36 ------------------- 10 files changed, 105 insertions(+), 59 deletions(-) diff --git a/Emotional Detector.ipynb b/Emotional Detector.ipynb index d2609382e3..ba5310973e 100644 --- a/Emotional Detector.ipynb +++ b/Emotional Detector.ipynb @@ -56,7 +56,7 @@ "source": [ "def post_p(prediction): \n", " emotional_dict = {0: \"Angry\", 1: \"Disgusted\", 2: \"Fearful\", 3: \"Happy\", 4: \"Neutral\", 5: \"Sad\", 6: \"Surprised\"}\n", - " return emotional_dict[prediction]" + " return emotional_dict[prediction.squeeze().argmax()]" ] }, { @@ -68,8 +68,9 @@ "name": "stdout", "output_type": "stream", "text": [ - "Model available locally at: http://localhost:7860/templates/tmp_html.html\n", - "Model available publicly for 8 hours at: https://27f58110.ngrok.io/templates/tmp_html.html\n" + "NOTE: Gradio is in beta stage, please report all bugs to: a12d@stanford.edu\n", + "Model available locally at: http://localhost:7879/interface.html\n", + "Model available publicly for 8 hours at: http://31f97c1d.ngrok.io/interface.html\n" ] } ], diff --git a/css/draw-a-digit.css b/css/draw-a-digit.css index 3724d65e55..fd0eb082d4 100644 --- a/css/draw-a-digit.css +++ b/css/draw-a-digit.css @@ -23,27 +23,64 @@ body { } -.uploader {position:relative; overflow:hidden; width:300px; height:350px; background:#f3f3f3; border:2px dashed #e8e8e8;} +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + margin-bottom: 0.5rem; + font-family: inherit; + font-weight: 500; + line-height: 1.2; + color: inherit; + width: 400px; +} + +.btn-group > .btn:first-child { + margin-left: 75; +} + +.btn-group, +.btn-group-vertical { + position: relative; + display: -ms-inline-flexbox; + display: inline-flex; + vertical-align: middle; + width:400px; + align-items: center; +} + +.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; diff --git a/gradio/css/draw-a-digit.css b/gradio/css/draw-a-digit.css index 6e7c4c56aa..fd0eb082d4 100644 --- a/gradio/css/draw-a-digit.css +++ b/gradio/css/draw-a-digit.css @@ -23,6 +23,30 @@ body { } +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + margin-bottom: 0.5rem; + font-family: inherit; + font-weight: 500; + line-height: 1.2; + color: inherit; + width: 400px; +} + +.btn-group > .btn:first-child { + margin-left: 75; +} + +.btn-group, +.btn-group-vertical { + position: relative; + display: -ms-inline-flexbox; + display: inline-flex; + vertical-align: middle; + width:400px; + align-items: center; +} + .uploader {position:relative; overflow:hidden; width:400px; height:400px; background:#f3f3f3; border:2px dashed #e8e8e8; font-family: "Arial"; font-size: 40px; color: darkolivegreen;} #filePhoto{ diff --git a/gradio/js/all-io.js b/gradio/js/all-io.js index bec06a2cf2..008b68d54c 100644 --- a/gradio/js/all-io.js +++ b/gradio/js/all-io.js @@ -1,4 +1,4 @@ -var NGROK_URL = "ws://b09c2edb.ngrok.io" +var NGROK_URL = "wss://ac0577fa.ngrok.io" var SOCKET_PORT = 9200 try { diff --git a/gradio/templates/class_output.html b/gradio/templates/class_output.html index c536e6134b..88069dfcb1 100644 --- a/gradio/templates/class_output.html +++ b/gradio/templates/class_output.html @@ -1,5 +1,5 @@
-

+
Class Output:
diff --git a/gradio/templates/image_upload_input.html b/gradio/templates/image_upload_input.html index c07d4ddd6e..ba2a4d9ee2 100644 --- a/gradio/templates/image_upload_input.html +++ b/gradio/templates/image_upload_input.html @@ -14,13 +14,13 @@ -->
-
Image Upload Input:
+
Image Upload Input:

Click here
or
drag and drop
an image -
+
diff --git a/interface.html b/interface.html index 60ccdfccc7..822cc47b28 100644 --- a/interface.html +++ b/interface.html @@ -41,15 +41,34 @@
+ +
+
Image Upload Input:
+
+
Click here
or
drag and drop
an image + + +
- +
- + diff --git a/js/all-io.js b/js/all-io.js index 44988f7735..0d8d36acd5 100644 --- a/js/all-io.js +++ b/js/all-io.js @@ -1,12 +1,12 @@ -var NGROK_URL = "ws://020d9731.ngrok.io" -var SOCKET_PORT = 9200 +var NGROK_URL = "ws://225e0da0.ngrok.io" +var SOCKET_PORT = 9201 try { var origin = window.location.origin; 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) diff --git a/js/class-output.js b/js/class-output.js index f5cb715ce6..8037ec00d1 100644 --- a/js/class-output.js +++ b/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) } + diff --git a/js/image-upload-input.js b/js/image-upload-input.js index 26581a6953..9c626de3b5 100644 --- a/js/image-upload-input.js +++ b/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)