mirror of
https://github.com/gradio-app/gradio.git
synced 2024-12-21 02:19:59 +08:00
Merge branch 'master' of https://github.com/gradio-app/gradio
This commit is contained in:
commit
f1163d975f
@ -19,7 +19,7 @@ from IPython import get_ipython
|
||||
|
||||
LOCALHOST_IP = "127.0.0.1"
|
||||
TRY_NUM_PORTS = 100
|
||||
# PKG_VERSION_URL = "https://gradio.app/api/pkg-version"
|
||||
PKG_VERSION_URL = "https://gradio.app/api/pkg-version"
|
||||
|
||||
|
||||
class Interface:
|
||||
|
@ -1,14 +1,12 @@
|
||||
.panel {
|
||||
min-width: 300px;
|
||||
flex-grow: 1;
|
||||
flex: 1 1 0;
|
||||
display: inline-block;
|
||||
max-width: 45%;
|
||||
min-width: 300px;
|
||||
box-sizing: border-box;
|
||||
margin: 0 14px 14px;
|
||||
margin: 0 30px 14px 0;
|
||||
}
|
||||
.panel_header, .interface {
|
||||
background-color: #F6F6F6;
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
.panel_header {
|
||||
text-transform: uppercase;
|
||||
@ -37,7 +35,7 @@
|
||||
display: flex;
|
||||
}
|
||||
.submit, .clear, .panel_button {
|
||||
background-color: #F6F6F6 !important;
|
||||
background-color: #EEEEEE !important;
|
||||
flex-grow: 1;
|
||||
padding: 8px !important;
|
||||
box-sizing: border-box;
|
||||
@ -55,7 +53,7 @@
|
||||
}
|
||||
.flag_message {
|
||||
padding: 8px !important;
|
||||
background-color: #F6F6F6 !important;
|
||||
background-color: #EEEEEE !important;
|
||||
}
|
||||
.clear, .flag {
|
||||
margin-left: 8px;
|
||||
@ -107,20 +105,11 @@
|
||||
.flag.flagged {
|
||||
background-color: pink !important;
|
||||
}
|
||||
|
||||
.test_panel {
|
||||
margin-top: 5px;
|
||||
padding:10px;
|
||||
background-color: #eea45d6b !important;
|
||||
border: 1px solid #EEA45D;
|
||||
justify-content: space-between;
|
||||
#loading {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tests {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.test_panel > input[type="button"] {
|
||||
max-width: 100px;
|
||||
.invisible {
|
||||
display: none !important;
|
||||
}
|
||||
|
@ -1,3 +1,6 @@
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
.sketchpad canvas {
|
||||
background-color: white;
|
||||
}
|
||||
@ -29,9 +32,23 @@
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
.canvas_holder {
|
||||
flex: 1 1 auto;
|
||||
.view_holders {
|
||||
flex-grow: 1;
|
||||
background-color: #CCCCCC;
|
||||
position: relative;
|
||||
}
|
||||
.canvas_holder canvas {
|
||||
background-color: white;
|
||||
}
|
||||
.canvas_holder, .saliency_holder {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.saliency_holder {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
canvas {
|
||||
border: solid 1px black;
|
||||
|
@ -1,4 +1,4 @@
|
||||
.input_text {
|
||||
.input_text, .input_text_saliency {
|
||||
resize: none;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
@ -8,4 +8,8 @@
|
||||
border: solid 1px black;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
.input_text_saliency {
|
||||
display: none;
|
||||
}
|
||||
|
@ -63,3 +63,29 @@ button.secondary {
|
||||
color: black;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
#featured_table {
|
||||
border-collapse: collapse;
|
||||
border: solid 2px #EEEEEE;
|
||||
margin-bottom: 20px;
|
||||
table-layout: fixed;
|
||||
}
|
||||
#featured_table td {
|
||||
padding: 4px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
width: 250px;
|
||||
max-width: 250px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
#featured_table tr:nth-child(even) {
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
#featured_table tr:hover {
|
||||
background-color: #EEA45D;
|
||||
}
|
||||
#featured_history img {
|
||||
height: 60px;
|
||||
width: 100px;
|
||||
}
|
||||
|
BIN
build/lib/gradio/static/img/logo_error.png
Normal file
BIN
build/lib/gradio/static/img/logo_error.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
Before Width: | Height: | Size: 188 KiB After Width: | Height: | Size: 58 KiB |
@ -5,6 +5,10 @@ var io_master = {
|
||||
var post_data = {
|
||||
'data': data
|
||||
};
|
||||
$("#loading").removeClass("invisible");
|
||||
$("#loading_in_progress").show();
|
||||
$("#loading_failed").hide();
|
||||
$("#output_interface").addClass("invisible");
|
||||
$.ajax({type: "POST",
|
||||
url: "/api/predict/",
|
||||
data: JSON.stringify(post_data),
|
||||
@ -14,6 +18,8 @@ var io_master = {
|
||||
}
|
||||
},
|
||||
error: function(XMLHttpRequest, textStatus, errorThrown) {
|
||||
$("#loading_in_progress").hide();
|
||||
$("#loading_failed").show();
|
||||
console.log(XMLHttpRequest);
|
||||
console.log(textStatus);
|
||||
console.log(errorThrown);
|
||||
@ -26,28 +32,14 @@ var io_master = {
|
||||
if (this.input_interface.output && data["saliency"]) {
|
||||
this.input_interface.output(data["saliency"]);
|
||||
}
|
||||
},
|
||||
test: function(type, data) {
|
||||
var post_data = {
|
||||
'data': data
|
||||
};
|
||||
if (type == "rotation") {
|
||||
$.ajax({type: "POST",
|
||||
url: "/api/auto/rotation",
|
||||
data: JSON.stringify(post_data)
|
||||
});
|
||||
} else if (type == "lighting") {
|
||||
$.ajax({type: "POST",
|
||||
url: "/api/auto/lighting",
|
||||
data: JSON.stringify(post_data)
|
||||
});
|
||||
}
|
||||
$("#loading").addClass("invisible");
|
||||
$("#output_interface").removeClass("invisible");
|
||||
},
|
||||
flag: function(message) {
|
||||
var post_data = {
|
||||
'data': {
|
||||
'input' : this.last_input,
|
||||
'output' : this.last_output,
|
||||
'input_data' : toStringIfObject(this.last_input) ,
|
||||
'output_data' : toStringIfObject(this.last_output),
|
||||
'message' : message
|
||||
}
|
||||
}
|
||||
|
@ -25,17 +25,6 @@ const image_input = {
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
test_html: `
|
||||
<!--<div class="panel_buttons test_panel">-->
|
||||
<!--<div><strong>Rotation</strong>: (rotates between -180 and 180 degrees)</div>-->
|
||||
<!--<input type="button" class="panel_button rotate_test" value="Run"/>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="panel_buttons test_panel">-->
|
||||
<!--<div><strong>Lighting</strong>: (adjusts the lighting to 9 different levels)</div>-->
|
||||
<!--<input type="button" class="panel_button light_test" value="Run"/>-->
|
||||
<!--</div>-->
|
||||
<!--<a href="bulk_data.html"><input type="button" class="panel_button" value="Bulk Data" style="margin-top: 10px;"/></a>-->
|
||||
`,
|
||||
init: function() {
|
||||
var io = this;
|
||||
$('body').append(this.overlay_html.format(this.id));
|
||||
@ -123,26 +112,7 @@ const image_input = {
|
||||
this.target.find(".saliency_holder").removeClass("hide").html(`
|
||||
<canvas class="saliency" width=${width} height=${height}></canvas>`);
|
||||
var ctx = this.target.find(".saliency")[0].getContext('2d');
|
||||
var cell_width = width / data[0].length
|
||||
var cell_height = height / data.length
|
||||
var r = 0
|
||||
data.forEach(function(row) {
|
||||
var c = 0
|
||||
row.forEach(function(cell) {
|
||||
if (cell < 0.25) {
|
||||
ctx.fillStyle = "white";
|
||||
} else if (cell < 0.5) {
|
||||
ctx.fillStyle = "yellow";
|
||||
} else if (cell < 0.75) {
|
||||
ctx.fillStyle = "orange";
|
||||
} else {
|
||||
ctx.fillStyle = "red";
|
||||
}
|
||||
ctx.fillRect(c * cell_width, r * cell_height, cell_width, cell_height);
|
||||
c++;
|
||||
})
|
||||
r++;
|
||||
})
|
||||
paintSaliency(ctx, width, height);
|
||||
}
|
||||
},
|
||||
state: "NO_IMAGE",
|
||||
|
@ -5,8 +5,13 @@ const sketchpad_input = {
|
||||
<div id="brush_2" size="16" class="brush selected"></div>
|
||||
<div id="brush_3" size="24" class="brush"></div>
|
||||
</div>
|
||||
<div class="canvas_holder">
|
||||
<canvas id="canvas"></canvas>
|
||||
<div class="view_holders">
|
||||
<div class="saliency_holder hide">
|
||||
<canvas class="saliency"></canvas>
|
||||
</div>
|
||||
<div class="canvas_holder">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
</div>`,
|
||||
init: function() {
|
||||
var io = this;
|
||||
@ -14,10 +19,12 @@ const sketchpad_input = {
|
||||
this.target.find(".canvas_holder").height()) - 2 // dimension - border
|
||||
var id = this.id;
|
||||
this.sketchpad = new Sketchpad({
|
||||
element: '.interface[interface_id=' + id + '] > .canvas_holder canvas',
|
||||
element: '.interface[interface_id=' + id + '] .canvas_holder canvas',
|
||||
width: dimension,
|
||||
height: dimension
|
||||
});
|
||||
this.target.find(".saliency")
|
||||
.attr("width", dimension+"px").attr("height", dimension+"px");
|
||||
this.sketchpad.penSize = this.target.find(".brush.selected").attr("size");
|
||||
this.canvas = this.target.find('.canvas_holder canvas')[0];
|
||||
this.context = this.canvas.getContext("2d");
|
||||
@ -31,8 +38,28 @@ const sketchpad_input = {
|
||||
var dataURL = this.canvas.toDataURL("image/png");
|
||||
this.io_master.input(this.id, dataURL);
|
||||
},
|
||||
output: function(data) {
|
||||
this.target.find(".saliency_holder").removeClass("hide");
|
||||
var ctx = this.target.find(".saliency")[0].getContext('2d');
|
||||
let dimension = this.target.find(".saliency").width();
|
||||
console.log(data, dimension, dimension);
|
||||
paintSaliency(data, dimension, dimension, ctx);
|
||||
},
|
||||
clear: function() {
|
||||
this.context.clearRect(0, 0, this.context.canvas.width, this.context.
|
||||
canvas.height);
|
||||
this.target.find(".saliency_holder").addClass("hide");
|
||||
},
|
||||
renderFeatured: function(data) {
|
||||
return `<img src=${data}>`;
|
||||
},
|
||||
loadFeatured: function(data) {
|
||||
let ctx = $(".canvas_holder canvas")[0].getContext("2d");
|
||||
var img = new Image;
|
||||
let dimension = this.target.find(".canvas_holder canvas").width();
|
||||
img.onload = function(){
|
||||
ctx.drawImage(img,0,0,dimension,dimension);
|
||||
};
|
||||
img.src = data;
|
||||
}
|
||||
}
|
||||
|
@ -1,11 +1,33 @@
|
||||
const textbox_input = {
|
||||
html: `<textarea class="input_text" placeholder="Enter text here..."></textarea>`,
|
||||
html: `<textarea class="input_text" placeholder="Enter text here..."></textarea>
|
||||
<div class='input_text_saliency'></div>`,
|
||||
init: function() {},
|
||||
submit: function() {
|
||||
text = this.target.find(".input_text").val();
|
||||
this.io_master.input(this.id, text);
|
||||
},
|
||||
output: function(data) {
|
||||
this.target.find(".input_text").hide();
|
||||
this.target.find(".input_text_saliency").show();
|
||||
this.target.find(".input_text_saliency").empty();
|
||||
let html = '';
|
||||
let text = this.target.find(".input_text").val();
|
||||
let index = 0;
|
||||
data.forEach(function(value, index) {
|
||||
html += `<span style='background-color:rgba(255,0,0,${value})'>${text.charAt(index)}</span>`;
|
||||
})
|
||||
$(".input_text_saliency").html(html);
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find(".input_text").val("");
|
||||
this.target.find(".input_text_saliency").hide();
|
||||
this.target.find(".input_text").show();
|
||||
},
|
||||
renderFeatured: function(data) {
|
||||
return data;
|
||||
},
|
||||
loadFeatured: function(data) {
|
||||
this.clear();
|
||||
this.target.find(".input_text").val(data);
|
||||
}
|
||||
}
|
||||
|
@ -43,7 +43,9 @@ $.getJSON("static/config.json", function(data) {
|
||||
input_interface.clear();
|
||||
output_interface.clear();
|
||||
$(".flag").removeClass("flagged");
|
||||
$(".flag_message").empty()
|
||||
$(".flag_message").empty
|
||||
$("#loading").addClass("invisible");
|
||||
$("#output_interface").removeClass("invisible");
|
||||
io_master.last_input = null;
|
||||
io_master.last_output = null;
|
||||
})
|
||||
|
@ -32,3 +32,33 @@ function resizeImage(base64Str, max_width, max_height, callback) {
|
||||
callback.call(null, canvas.toDataURL());
|
||||
}
|
||||
}
|
||||
|
||||
function toStringIfObject(input) {
|
||||
if (input instanceof Object) {
|
||||
return JSON.stringify(input);
|
||||
}
|
||||
return input;
|
||||
}
|
||||
|
||||
function paintSaliency(data, width, height, ctx) {
|
||||
var cell_width = width / data[0].length
|
||||
var cell_height = height / data.length
|
||||
var r = 0
|
||||
data.forEach(function(row) {
|
||||
var c = 0
|
||||
row.forEach(function(cell) {
|
||||
if (cell < 0.25) {
|
||||
ctx.fillStyle = "white";
|
||||
} else if (cell < 0.5) {
|
||||
ctx.fillStyle = "yellow";
|
||||
} else if (cell < 0.75) {
|
||||
ctx.fillStyle = "orange";
|
||||
} else {
|
||||
ctx.fillStyle = "red";
|
||||
}
|
||||
ctx.fillRect(c * cell_width, r * cell_height, cell_width, cell_height);
|
||||
c++;
|
||||
})
|
||||
r++;
|
||||
})
|
||||
}
|
||||
|
@ -44,15 +44,14 @@
|
||||
<input class="submit" type="submit" value="submit"/>
|
||||
<input class="clear" type="reset" value="clear">
|
||||
</div>
|
||||
<div class="tests"></div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel_header">
|
||||
Output
|
||||
<div class="loading">
|
||||
<img src="../static/img/logo_mini.png" class="ld ld-skew"/>
|
||||
<span class="loading_time"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loading" class="interface invisible">
|
||||
<img id="loading_in_progress" src="../static/img/logo_loading.gif">
|
||||
<img id="loading_failed" src="../static/img/logo_error.png">
|
||||
</div>
|
||||
<div id="output_interface" class="interface"></div>
|
||||
<div class="panel_buttons">
|
||||
|
Binary file not shown.
@ -1,6 +1,6 @@
|
||||
Metadata-Version: 1.0
|
||||
Name: gradio
|
||||
Version: 0.8.0
|
||||
Version: 0.8.1
|
||||
Summary: Python library for easily interacting with trained machine learning models
|
||||
Home-page: https://github.com/abidlabs/gradio
|
||||
Author: Abubakar Abid
|
||||
|
@ -19,8 +19,6 @@ gradio.egg-info/top_level.txt
|
||||
gradio/static/apple-app-site-association
|
||||
gradio/static/config.json
|
||||
gradio/static/css/.DS_Store
|
||||
gradio/static/css/bulk_style.css
|
||||
gradio/static/css/font-awesome.min.css
|
||||
gradio/static/css/gradio.css
|
||||
gradio/static/css/loading.css
|
||||
gradio/static/css/style.css
|
||||
@ -35,6 +33,7 @@ gradio/static/css/interfaces/output/textbox.css
|
||||
gradio/static/css/vendor/tui-color-picker.css
|
||||
gradio/static/css/vendor/tui-image-editor.css
|
||||
gradio/static/img/logo.png
|
||||
gradio/static/img/logo_error.png
|
||||
gradio/static/img/logo_inline.png
|
||||
gradio/static/img/logo_loading.gif
|
||||
gradio/static/img/logo_mini.png
|
||||
|
Loading…
Reference in New Issue
Block a user