mirror of
https://github.com/gradio-app/gradio.git
synced 2025-03-25 12:10:31 +08:00
css stuff
This commit is contained in:
Ali Abdalla
parent
f4a63857b9
commit
c4fbc259c3
@ -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"
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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{
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
var NGROK_URL = "ws://b09c2edb.ngrok.io"
|
||||
var NGROK_URL = "wss://ac0577fa.ngrok.io"
|
||||
var SOCKET_PORT = 9200
|
||||
|
||||
try {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="col-6">
|
||||
<h5></h5><br>
|
||||
<h5>Class Output:</h5>
|
||||
<div id="predict_div" style="background-color:grey">
|
||||
|
||||
</div>
|
||||
|
||||
@ -14,13 +14,13 @@
|
||||
|
||||
-->
|
||||
<div class="col-6">
|
||||
<h5 style="text-align: center">Image Upload Input:</h5>
|
||||
<div> <h5>Image Upload Input:</h5> </div>
|
||||
|
||||
<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>
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary" id="submit-button">Submit</button>
|
||||
<button type="button" class="btn btn-secondary" id="clear-button">Clear</button>
|
||||
|
||||
@ -41,15 +41,34 @@
|
||||
<div class="row">
|
||||
<!-- INPUT
|
||||
====================================================================================================================================================== -->
|
||||
<!-- <link rel="stylesheet" href="../css/dropzone.css">
|
||||
<div class="col-6">
|
||||
<h5>Sketch Pad Input: (Use your cursor to draw)</h5>
|
||||
<canvas height="400" id="canvas" width="400"></canvas><br/>
|
||||
<h5>Image Upload Input:</h5>
|
||||
|
||||
<input type="file" onchange="previewFile()"><br>
|
||||
<img src="" height="200" alt="Image preview...">
|
||||
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary" id="submit-button">Submit</button>
|
||||
<button type="button" class="btn btn-secondary" id="clear-button">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../js/image-upload-input.js"></script>
|
||||
|
||||
-->
|
||||
<div class="col-6">
|
||||
<div> <h5>Image Upload Input:</h5> </div>
|
||||
<div class="uploader" onclick="$('#filePhoto').click()" style="text-align: center; vertical-align: middle">
|
||||
<br/>Click here <br/> or <br/> drag and drop <br/>an image
|
||||
<img/>
|
||||
<input id="filePhoto" name="userprofile_picture" type="file"/>
|
||||
</div>
|
||||
<div aria-label="Basic example" class="btn-group" role="group">
|
||||
<button class="btn btn-primary" id="submit-button" type="button">Recognize</button>
|
||||
<button class="btn btn-primary" id="submit-button" type="button">Submit</button>
|
||||
<button class="btn btn-secondary" id="clear-button" type="button">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../js/sketchpad-input.js"></script>
|
||||
<script src="../js/image-upload-input.js"></script>
|
||||
|
||||
<!-- OUTPUT
|
||||
====================================================================================================================================================== -->
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user