mirror of
https://github.com/gradio-app/gradio.git
synced 2025-01-24 10:54:04 +08:00
temp landing page demo
This commit is contained in:
Your Name
parent
3c2e01eecf
commit
dd5cc45776
239
web/gradio/gradio.css
Normal file
239
web/gradio/gradio.css
Normal file
@ -0,0 +1,239 @@
|
||||
#gradio {
|
||||
display: flex;
|
||||
}
|
||||
.panel {
|
||||
max-width: 50%;
|
||||
min-width: 300px;
|
||||
max-height: 360px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.panel:first-child {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.instructions {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.input, .output {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
max-height: 360px;
|
||||
background-color: #F6F6F6;
|
||||
margin-bottom: 16px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
.loading {
|
||||
margin-left: auto;
|
||||
}
|
||||
.loading img {
|
||||
display: none;
|
||||
height: 22px;
|
||||
}
|
||||
.panel_head {
|
||||
display: flex
|
||||
}
|
||||
.role {
|
||||
text-transform: uppercase;
|
||||
font-family: Arial;
|
||||
color: #BBB;
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.input.text .role, .output.text .role {
|
||||
margin-left: 1px;
|
||||
}
|
||||
.submit, .clear, .flag, .message, .send-message {
|
||||
background-color: #F6F6F6 !important;
|
||||
padding: 8px !important;
|
||||
box-sizing: border-box;
|
||||
width: calc(50% - 8px);
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
border: 0 none;
|
||||
}
|
||||
.clear {
|
||||
background-color: #F6F6F6 !important;
|
||||
}
|
||||
.submit {
|
||||
background-color: #EEA45D !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.clear {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/*.flag:focus {
|
||||
background-color: pink !important;
|
||||
}
|
||||
*/
|
||||
.input_text, .output_text {
|
||||
background: transparent;
|
||||
resize: none
|
||||
border: 0 none;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
.input_image, .input_audio, .input_snapshot, .input_mic, .input_csv, .output_class,
|
||||
.output_image, .output_csv {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.input_image, .input_audio, .input_snapshot, .input_mic, .input_csv {
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
color: #BBB;
|
||||
cursor: pointer;
|
||||
}
|
||||
.input_image img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.hidden_upload {
|
||||
display: none;
|
||||
}
|
||||
.output_class {
|
||||
font-weight: bold;
|
||||
font-size: 36px;
|
||||
}
|
||||
.drop_mode {
|
||||
border: dashed 8px #DDD;
|
||||
}
|
||||
.input_image, .input_audio {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.input_snapshot, .input_mic {
|
||||
flex-direction: column;
|
||||
}
|
||||
.input_snapshot .webcam, .input_mic .mic {
|
||||
height: 80px;
|
||||
}
|
||||
.output_image img {
|
||||
width: 100%; /* or any custom size */
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.confidence_intervals {
|
||||
font-size: 16px;
|
||||
}
|
||||
.confidence {
|
||||
padding: 3px;
|
||||
display: flex;
|
||||
}
|
||||
.level, .label {
|
||||
display: inline-block;
|
||||
}
|
||||
.label {
|
||||
width: 80px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.confidence_intervals .level {
|
||||
font-size: 14px;
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
background-color: #AAA;
|
||||
padding: 2px 4px;
|
||||
text-align: right;
|
||||
font-family: monospace;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
.confidence_intervals > * {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.flag.flagged {
|
||||
background-color: pink !important;
|
||||
}
|
||||
|
||||
.sketchpad canvas {
|
||||
background-color: white;
|
||||
}
|
||||
.sketch_tools {
|
||||
flex: 0 1 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.brush {
|
||||
border-radius: 50%;
|
||||
background-color: #AAA;
|
||||
margin: 0px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.brush.selected, .brush:hover {
|
||||
background-color: black;
|
||||
}
|
||||
#brush_1 {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
#brush_2 {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
#brush_3 {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
.canvas_holder {
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
}
|
||||
canvas {
|
||||
border: solid 1px black;
|
||||
}
|
||||
|
||||
.text textarea {
|
||||
resize: none;
|
||||
background-color: white;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.output_image img {
|
||||
display: none
|
||||
}
|
||||
|
||||
.table_holder {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: scroll;
|
||||
display: none;
|
||||
}
|
||||
.csv_preview {
|
||||
background-color: white;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
font-size: 12px;
|
||||
font-family: monospace;
|
||||
}
|
||||
.csv_preview tr {
|
||||
border-bottom: solid 1px black;
|
||||
}
|
||||
.csv_preview tr.header td {
|
||||
background-color: #EEA45D;
|
||||
font-weight: bold;
|
||||
}
|
||||
.csv_preview td {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
.csv_preview td:nth-child(even) {
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
68
web/gradio/image_upload.js
Normal file
68
web/gradio/image_upload.js
Normal file
@ -0,0 +1,68 @@
|
||||
var cropper;
|
||||
var aspectRatio = "{{aspect_ratio}}"
|
||||
|
||||
$('body').on('click', ".input_image.drop_mode", function (e) {
|
||||
$(this).parent().find(".hidden_upload").click();
|
||||
})
|
||||
|
||||
$('body').on('drag dragstart dragend dragover dragenter dragleave drop', ".input_image.drop_mode", function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
})
|
||||
|
||||
function loadPreviewFromFiles(files) {
|
||||
var ReaderObj = new FileReader()
|
||||
ReaderObj.readAsDataURL(files[0])
|
||||
ReaderObj.onloadend = function() {
|
||||
$(".input_caption").hide()
|
||||
$(".input_image").removeClass("drop_mode")
|
||||
var image = $(".input_image img")
|
||||
image.attr("src", this.result)
|
||||
image.cropper({
|
||||
aspectRatio : aspectRatio,
|
||||
background: false
|
||||
});
|
||||
if (!cropper) {
|
||||
cropper = image.data('cropper');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$(".input_image").on('drop', function(e) {
|
||||
files = e.originalEvent.dataTransfer.files;
|
||||
loadPreviewFromFiles(files)
|
||||
});
|
||||
|
||||
$(".hidden_upload").on("change", function() {
|
||||
var files = !!this.files ? this.files : []
|
||||
if (!files.length || !window.FileReader) {
|
||||
return
|
||||
}
|
||||
if (/^image/.test(files[0].type)) {
|
||||
loadPreviewFromFiles(files)
|
||||
} else {
|
||||
alert("Invalid input")
|
||||
}
|
||||
})
|
||||
|
||||
$('body').on('click', '.clear', function(e) {
|
||||
if (cropper) {
|
||||
cropper.destroy();
|
||||
cropper = null
|
||||
$(".input_image img").remove()
|
||||
$(".input_image").append("<img>")
|
||||
}
|
||||
$(".hidden_upload").prop("value", "")
|
||||
$(".input_caption").show()
|
||||
$(".input_image img").removeAttr("src");
|
||||
$(".input_image").addClass("drop_mode")
|
||||
})
|
||||
$('body').on('click', '.submit', function(e) {
|
||||
src = cropper.getCroppedCanvas({
|
||||
maxWidth: 360,
|
||||
maxHeight: 360,
|
||||
fillColor: "white"
|
||||
}).toDataURL();
|
||||
$("#invisible_img").attr("src", src);
|
||||
upload();
|
||||
})
|
||||
31
web/gradio/label.js
Normal file
31
web/gradio/label.js
Normal file
@ -0,0 +1,31 @@
|
||||
function loadData(data) {
|
||||
console.log("heyyy")
|
||||
// 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) {
|
||||
data["confidences"].forEach(function (c) {
|
||||
var confidence = c["confidence"]
|
||||
$(".confidence_intervals").append(`<div class="confidence"><div class=
|
||||
"label" title="${c["label"]}">${c["label"]}</div><div class="level" style="flex-grow:
|
||||
${confidence}">${Math.round(confidence * 100)}%</div></div>`)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$('body').on('click', '.clear', function(e) {
|
||||
$(".output_class").text("")
|
||||
$(".confidence_intervals").empty()
|
||||
})
|
||||
@ -4,7 +4,8 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
|
||||
<link href="style/style.css" rel="stylesheet">
|
||||
<link href="style/home.css" rel="stylesheet">
|
||||
<link href="style/gradio.css" rel="stylesheet">
|
||||
<link href="gradio/gradio.css" rel="stylesheet">
|
||||
<link href="gradio/vendor/cropper.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
@ -30,7 +31,7 @@
|
||||
under the Apache license.</p>
|
||||
</div><!--
|
||||
--><div id="demos">
|
||||
<div id="demo-nav">
|
||||
<!-- <div id="demo-nav">
|
||||
<button demo="1" class="selected demo-link">
|
||||
<span class="demo-count">Demo 1</span><br>Handwriting Digit
|
||||
</button>
|
||||
@ -46,46 +47,57 @@
|
||||
<button demo="5" class="demo-link">
|
||||
<span class="demo-count">Demo 5</span><br>Hotdog or Not Hotdog
|
||||
</button>
|
||||
</div>
|
||||
</div> -->
|
||||
<div id="demo-code">
|
||||
<div id="demo-code-label">handwriting_digit_demo.py</div>
|
||||
<div id="demo-code-label">image_detector.py</div>
|
||||
<div class="codeblock"><code>
|
||||
import <span class="var">gradio</span>, tensorflow as <span
|
||||
class="var">tf</span><br>
|
||||
<span class="var">handwriting_mdl</span> = tf.keras.models.<span
|
||||
<span class="var">image_mdl</span> = tf.keras.models.<span
|
||||
class="func">Sequential()</span><br>
|
||||
<span class="comm"># ... define and train the model as you would
|
||||
normally</span><br>
|
||||
<span class="var">io</span> = gradio.<span
|
||||
class="func">Interface(</span><span
|
||||
class="var">input</span>=“sketchpad”, <span
|
||||
class="var">input</span>=“imageupload", <span
|
||||
class="var">output</span>=“label”, <span
|
||||
class="var">model_type</span>=“keras”,<span
|
||||
class="var">model</span>=handwriting_mdl<span
|
||||
class="var">model</span>=image_mdl<span
|
||||
class="func">)</span><br>
|
||||
io.<span class="func">launch()</span>
|
||||
</code></div>
|
||||
</div>
|
||||
<div class="instructions">
|
||||
The code above produces produces an interface like this, in which you can upload an image and receive labelling as output. Click
|
||||
submit to get the prediction!
|
||||
</div>
|
||||
<div id="gradio">
|
||||
<div class="instructions">
|
||||
The code above produces produces an interface like this, in which you can draw a digit from 0 to 9 in the input box. Click
|
||||
submit to get the prediction!
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="input sketchpad">
|
||||
<div class="gradio input image_file">
|
||||
<div class="role">Input</div>
|
||||
<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>
|
||||
<input class="submit" type="submit" value="Submit"/><!--
|
||||
--><input class="clear" type="reset" value="Clear">
|
||||
</div><!--
|
||||
--><div class="panel">
|
||||
<div class="output classifier">
|
||||
<div class="role">Output</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gradio output classifier">
|
||||
<div class="panel_head">
|
||||
<div class="role">Output</div>
|
||||
</div>
|
||||
<div class="output_class"></div>
|
||||
<div class="confidence_intervals">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--
|
||||
--></div>
|
||||
<img id="invisible_img" style="display: none" />
|
||||
<div id="summaries">
|
||||
<div id="setup" class="summary_box">
|
||||
<h2>Fast, easy setup</h2>
|
||||
@ -115,5 +127,11 @@
|
||||
<footer>
|
||||
<img src="img/logo_inline.png" />
|
||||
</footer>
|
||||
<script src="gradio/vendor/jquery.min.js"></script>
|
||||
<script src="gradio/image_upload.js"></script>
|
||||
<script src="gradio/label.js"></script>
|
||||
<script src="gradio/vendor/cropper.js"></script>
|
||||
<script src="https://unpkg.com/ml5@0.1.3/dist/ml5.min.js"></script>
|
||||
<script src="js/models.js"></script>
|
||||
<body>
|
||||
</html>
|
||||
|
||||
@ -1,46 +1,26 @@
|
||||
<script src="https://unpkg.com/ml5@0.1.3/dist/ml5.min.js"></script>
|
||||
|
||||
classifier = ml5.imageClassifier('MobileNet', function() {
|
||||
console.log('Model Loaded!');
|
||||
});
|
||||
|
||||
// Takes in the ID of the image, and returns labels and confidences
|
||||
function imageupload_label(image){
|
||||
var output;
|
||||
classifier = ml5.imageClassifier('MobileNet', function() {
|
||||
console.log('Model Loaded!');
|
||||
});
|
||||
classifier.predict(image, function(err, results) {
|
||||
var output = {
|
||||
'label': results[0].className,
|
||||
'confidences': [
|
||||
{'label': results[0].className,
|
||||
'confidence': results[0].probability.toFixed(4)},
|
||||
{'label': results[1].className,
|
||||
'confidence': results[1].probability.toFixed(4)},
|
||||
{'label': results[2].className,
|
||||
'confidence': results[2].probability.toFixed(4)},
|
||||
function upload() {
|
||||
classifier.predict(document.getElementById('invisible_img'), function(err,
|
||||
results) {
|
||||
if (!results) {
|
||||
return
|
||||
}
|
||||
console.log(results)
|
||||
var output = {
|
||||
'label': results[0].className,
|
||||
'confidences': [
|
||||
{'label': results[0].className,
|
||||
'confidence': results[0].probability.toFixed(4)},
|
||||
{'label': results[1].className,
|
||||
'confidence': results[1].probability.toFixed(4)},
|
||||
{'label': results[2].className,
|
||||
'confidence': results[2].probability.toFixed(4)},
|
||||
]
|
||||
}
|
||||
}
|
||||
loadData(output);
|
||||
});
|
||||
return output
|
||||
}
|
||||
|
||||
// Takes in the ID of the image, and returns labels and confidences
|
||||
function sketchpad_label(image){
|
||||
var output;
|
||||
classifier = ml5.imageClassifier('MobileNet', function() {
|
||||
console.log('Model Loaded!');
|
||||
});
|
||||
classifier.predict(image, function(err, results) {
|
||||
var output = {
|
||||
'label': results[0].className,
|
||||
'confidences': [
|
||||
{'label': results[0].className,
|
||||
'confidence': results[0].probability.toFixed(4)},
|
||||
{'label': results[1].className,
|
||||
'confidence': results[1].probability.toFixed(4)},
|
||||
{'label': results[2].className,
|
||||
'confidence': results[2].probability.toFixed(4)},
|
||||
]
|
||||
}
|
||||
});
|
||||
return output
|
||||
}
|
||||
|
||||
@ -52,6 +52,7 @@ code {
|
||||
#summaries {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.summary_box {
|
||||
@ -59,7 +60,7 @@ code {
|
||||
padding: 0 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 200px;
|
||||
background-position: center;
|
||||
background-position: center;
|
||||
}
|
||||
.summary_box h2 {
|
||||
color: #ed9013;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user