mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-13 11:57:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

add saliency to textbox, sketch

Browse Source
This commit is contained in:
Ali Abid 2019-07-21 21:14:38 -07:00
parent 019a93ed8d
commit 1c9c45c1b7
6 changed files with 82 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
gradio/static/css/interfaces/input/sketchpad.css
View File

@ -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;

6
gradio/static/css/interfaces/input/textbox.css
View File

@ -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;
}

32
gradio/static/js/interfaces/input/image_upload.js
View File

@ -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",

21
gradio/static/js/interfaces/input/sketchpad.js
View File

@ -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,16 @@ 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");
}
}

17
gradio/static/js/interfaces/input/textbox.js
View File

@ -1,11 +1,26 @@
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();
}
}

23
gradio/static/js/utils.js
View File

@ -32,3 +32,26 @@ function resizeImage(base64Str, max_width, max_height, callback) {
callback.call(null, canvas.toDataURL());
}
}
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++;
})
}