mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-01-12 10:34:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into aliabd/saliency

Browse Source
This commit is contained in:
Abubakar Abid 2019-07-25 23:46:23 -07:00 committed by GitHub
commit f73e0d385f
3 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,7 +45,7 @@
.saliency_holder { .saliency_holder {
position: absolute; position: absolute;
top: 0; top: 0;
opacity: 0.7; opacity: 0.9;
} }
.view_holders canvas { .view_holders canvas {
background-color: white; background-color: white;

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

@ -16,7 +16,7 @@ const textbox_input = {
let text = this.target.find(".input_text").val(); let text = this.target.find(".input_text").val();
let index = 0; let index = 0;
data.forEach(function(value, index) { data.forEach(function(value, index) {
html += `<span style='background-color:rgba(0,100,255,${value})'>${text.charAt(index)}</span>`; html += `<span style='background-color:rgba(75,150,255,${value})'>${text.charAt(index)}</span>`;
}) })
$(".input_text_saliency").html(html); $(".input_text_saliency").html(html);
}, },

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

@ -44,13 +44,32 @@ function paintSaliency(data, width, height, ctx) {
var cell_width = width / data[0].length var cell_width = width / data[0].length
var cell_height = height / data.length var cell_height = height / data.length
var r = 0 var r = 0
let blue = [75, 150, 255];
let white = [255, 255, 255];
data.forEach(function(row) { data.forEach(function(row) {
var c = 0 var c = 0
row.forEach(function(cell) { row.forEach(function(cell) {
ctx.fillStyle = `rgba(${(1 - cell) * 255},${(1 - cell) * 255},255,0.5)`; let shade = interpolate(cell, blue, white)
ctx.fillStyle = colorToString(shade);
ctx.fillRect(c * cell_width, r * cell_height, cell_width, cell_height); ctx.fillRect(c * cell_width, r * cell_height, cell_width, cell_height);
c++; c++;
}) })
r++; r++;
}) })
} }
// val should be in the range [0.0, 1.0]
// rgb1 and rgb2 should be an array of 3 values each in the range [0, 255]
function interpolate(val, rgb1, rgb2) {
var rgb = [0,0,0];
var i;
for (i = 0; i < 3; i++) {
rgb[i] = rgb1[i] * (1.0 - val) + rgb2[i] * val;
}
return rgb;
}
// quick helper function to convert the array into something we can use for css
function colorToString(rgb) {
return "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")";
}