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

hide flag/interpret till output

Browse Source
This commit is contained in:
Ali Abid 2021-03-01 17:26:07 -08:00
parent bd2cde2716
commit 0bc13e8e75
10 changed files with 110 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
demo/digit_classifier.py
View File

@ -15,13 +15,12 @@ def recognize_digit(image):
prediction = model.predict(image).tolist()[0]
return {str(i): prediction[i] for i in range(10)}
im = gradio.inputs.Image(shape=(28, 28), image_mode='L', invert_colors=False)
im = gradio.inputs.Image(shape=(28, 28), image_mode='L', invert_colors=False, source="canvas")
iface = gr.Interface(
recognize_digit,
im,
gradio.outputs.Label(num_top_classes=3),
examples=[['digits/' + x] for x in os.listdir('digits/')],
# live=True,
interpretation="default",
capture_session=True,

2
demo/outbreak_forecast.py
View File

@ -25,7 +25,7 @@ def outbreak(r, month, countries, social_distancing):
iface = gr.Interface(outbreak,
[
gr.inputs.Slider(1, 4, label="R"),
gr.inputs.Slider(1, 4, default=3.2, label="R"),
gr.inputs.Dropdown(["January", "February", "March", "April", "May"], label="Month"),
gr.inputs.CheckboxGroup(["USA", "Canada", "Mexico", "UK"], label="Countries"),
gr.inputs.Checkbox(label="Social Distancing?"),

28
gradio/networking.py
View File

@ -79,16 +79,20 @@ def get_first_available_port(initial, final):
)
)
def home_page(examples=None, path=None):
return render_template("index.html",
config=app.interface.config,
vendor_prefix=(GRADIO_STATIC_ROOT if app.interface.share else ""),
input_interfaces=[interface[0] for interface in app.interface.config["input_interfaces"]],
output_interfaces=[interface[0] for interface in app.interface.config["output_interfaces"]],
css=app.interface.css, examples=examples, path=path
)
@app.route("/", methods=["GET"])
def main():
if isinstance(app.interface.examples, str):
return redirect("/from_dir/" + app.interface.examples)
return render_template("index.html",
config=app.interface.config,
vendor_prefix=(GRADIO_STATIC_ROOT if app.interface.share else ""),
css=app.interface.css,
)
return home_page()
@app.route("/from_dir", methods=["GET"])
def main_from_flagging_dir():
@ -98,21 +102,17 @@ def main_from_flagging_dir():
def main_from_dir(path):
log_file = os.path.join(path, "log.csv")
if not os.path.exists(log_file):
abort(404)
if isinstance(app.interface.examples, str):
abort(404, "Examples dir not found")
else:
redirect("/")
with open(log_file) as logs:
examples = list(csv.reader(logs))
examples = examples[1:] #remove header
for i, example in enumerate(examples):
for j, (interface, cell) in enumerate(zip(app.interface.input_interfaces + app.interface.output_interfaces, example)):
examples[i][j] = interface.restore_flagged(cell)
return render_template("index.html",
config=app.interface.config,
vendor_prefix=(GRADIO_STATIC_ROOT if app.interface.share else ""),
css=app.interface.css,
path=path,
examples=examples
)
return home_page(examples=examples, path=path)
@app.route("/config/", methods=["GET"])
def config():

2
gradio/static/css/gradio.css
View File

@ -164,7 +164,7 @@ button.submit:hover {
align-items: center;
}
.invisible {
.hidden {
display: none !important;
}
.screenshot_logo {

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

@ -45,7 +45,7 @@
.canvas_holder {
text-align: center;
width: 100%;
height: calc(100% - 36px);
height: 100%;
}
.saliency_holder {
position: absolute;

24
gradio/static/js/all_io.js
View File

@ -25,13 +25,15 @@ var io_master_template = {
submit: function() {
let io = this;
if (!this.config.live) {
this.target.find(".loading").removeClass("invisible");
this.target.find(".loading").removeClass("hidden");
this.target.find(".loading_in_progress").show();
this.target.find(".loading_failed").hide();
this.target.find(".output_interfaces").css("opacity", 0.5);
}
this.fn(this.last_input, "predict").then((output) => {
io.output(output);
this.target.find(".flag").removeClass("inactive");
this.target.find(".interpret").removeClass("inactive");
}).catch((error) => {
console.error(error);
this.target.find(".loading_in_progress").hide();
@ -39,45 +41,45 @@ var io_master_template = {
});
},
score_similarity: function(callback) {
this.target.find(".loading").removeClass("invisible");
this.target.find(".loading").removeClass("hidden");
this.target.find(".loading_in_progress").show();
this.target.find(".loading_failed").hide();
this.target.find(".output_interfaces").css("opacity", 0.5);
this.fn(this.last_input, "score_similarity").then((output) => {
output = output["data"];
this.target.find(".loading").addClass("invisible");
this.target.find(".loading").addClass("hidden");
this.target.find(".output_interfaces").css("opacity", 1);
this.order_mapping = sortWithIndices(output).reverse();
callback();
})
},
view_embeddings: function(callback) {
this.target.find(".loading").removeClass("invisible");
this.target.find(".loading").removeClass("hidden");
this.target.find(".loading_in_progress").show();
this.target.find(".loading_failed").hide();
this.target.find(".output_interfaces").css("opacity", 0.5);
this.fn(this.last_input, "view_embeddings").then((output) => {
this.target.find(".loading").addClass("invisible");
this.target.find(".loading").addClass("hidden");
this.target.find(".output_interfaces").css("opacity", 1);
callback(output)
})
},
update_embeddings: function(callback) {
this.target.find(".loading").removeClass("invisible");
this.target.find(".loading").removeClass("hidden");
this.target.find(".loading_in_progress").show();
this.target.find(".loading_failed").hide();
this.target.find(".output_interfaces").css("opacity", 0.5);
this.fn(this.last_input, "update_embeddings").then((output) => {
this.target.find(".loading").addClass("invisible");
this.target.find(".loading").addClass("hidden");
this.target.find(".output_interfaces").css("opacity", 1);
callback(output)
})
},
submit_examples: function(callback) {
this.target.find(".loading").removeClass("invisible");
this.target.find(".loading").removeClass("hidden");
this.target.find(".loading_in_progress").show();
this.target.find(".loading_failed").hide();
this.target.find(".output_interfaces").css("opacity", 0.5);
@ -92,7 +94,7 @@ var io_master_template = {
}
}
this.fn(example_ids, "predict_examples").then((output) => {
this.target.find(".loading").addClass("invisible");
this.target.find(".loading").addClass("hidden");
this.target.find(".output_interfaces").css("opacity", 1);
output = output["data"];
@ -128,7 +130,7 @@ var io_master_template = {
io.gather();
}, refresh_lag);
} else {
this.target.find(".loading").addClass("invisible");
this.target.find(".loading").addClass("hidden");
this.target.find(".output_interfaces").css("opacity", 1);
}
},
@ -151,7 +153,7 @@ var io_master_template = {
},
interpret: function() {
var io = this;
this.target.find(".loading").removeClass("invisible");
this.target.find(".loading").removeClass("hidden");
this.target.find(".loading_in_progress").show();
var post_data = this.last_input;
this.fn(post_data, "interpret").then((data) => {

95
gradio/static/js/gradio.js
View File

@ -1,7 +1,7 @@
function gradio(config, fn, target, example_file_path) {
target = $(target);
target.html(`
<div class="share invisible">
<div class="share hidden">
Live at <a class="share-link" target="_blank"></a>.
<button class="share-copy">Copy Link</button>
</div>
@ -17,30 +17,30 @@ function gradio(config, fn, target, example_file_path) {
</div>
</div>
<div class="panel output_panel">
<div class="loading invisible">
<div class="loading hidden">
<img class="loading_in_progress" src="/static/img/logo_loading.gif">
<img class="loading_failed" src="/static/img/logo_error.png">
</div>
<div class="output_interfaces">
</div>
<div class="panel_buttons">
<button class="interpret panel_button">INTERPRET</button>
<button class="interpret inactive panel_button">INTERPRET</button>
<button class="screenshot panel_button left_panel_button">SCREENSHOT</button>
<button class="record panel_button right_panel_button">GIF</button>
<div class="screenshot_logo invisible">
<div class="screenshot_logo hidden">
<img src="/static/img/logo_inline.png">
<button class='record_stop'>
<div class='record_square'></div>
</button>
</div>
<div class="flag panel_button">
<div class="flag panel_button inactive">
FLAG
<div class="dropcontent"></div>
</div>
</div>
</div>
</div>
<div class="interpretation_explained invisible">
<div class="interpretation_explained hidden">
<h4>Interpretation Legend <span class='close_explain'>&#10006;</span></h4>
<div class='interpretation_legend'>
<div>&larr; Decreased output score / confidence</div>
@ -49,7 +49,7 @@ function gradio(config, fn, target, example_file_path) {
<p>When you click Interpret, you can see how different parts of the input contributed to the final output. The legend above will highlight each of the input components as follows:</p>
<ul></ul>
</div>
<div class="examples invisible">
<div class="examples hidden">
<h4>Examples</small></h4>
<div class="examples_control">
<div class="examples_control_left">
@ -58,8 +58,8 @@ function gradio(config, fn, target, example_file_path) {
<button class="load_next examples-content">Load Next <small>CTRL + &#10140;</small></button>
<button class="order_similar examples-content embedding">Order by Similarity</button>
<button class="view_embeddings examples-content embedding">View Embeddings</button>
<button class="update_embeddings embeddings-content invisible">Update Embeddings</button>
<button class="view_examples embeddings-content invisible">View Examples</button>
<button class="update_embeddings embeddings-content hidden">Update Embeddings</button>
<button class="view_examples embeddings-content hidden">View Examples</button>
</div>
<div class="examples_control_right">
<button class="table_examples">
@ -70,10 +70,10 @@ function gradio(config, fn, target, example_file_path) {
</button>
</div>
</div>
<div class="pages invisible">Page:</div>
<div class="pages hidden">Page:</div>
<table class="examples-content">
</table>
<div class="plot embeddings-content invisible"><canvas id="canvas" width="400px" height="300px"></canvas></div>
<div class="plot embeddings-content hidden"><canvas id="canvas" width="400px" height="300px"></canvas></div>
</div>
<p class="article"></p>
`);
@ -133,7 +133,7 @@ function gradio(config, fn, target, example_file_path) {
}
if (config["share_url"]) {
let share_url = config["share_url"];
target.find(".share").removeClass("invisible");
target.find(".share").removeClass("hidden");
target.find(".share-link").text(share_url).attr("href", share_url);
target.find(".share-copy").click(function() {
copyToClipboard(share_url);
@ -206,10 +206,11 @@ function gradio(config, fn, target, example_file_path) {
for (let output_interface of output_interfaces) {
output_interface.clear();
}
target.find(".flag_message").empty();
target.find(".loading").addClass("invisible");
target.find(".loading").addClass("hidden");
target.find(".loading_time").text("");
target.find(".output_interfaces").css("opacity", 1);
target.find(".flag").addClass("inactive");
target.find(".interpret").addClass("inactive");
io_master.last_input = null;
io_master.last_output = null;
}
@ -218,28 +219,24 @@ function gradio(config, fn, target, example_file_path) {
if (!config["allow_embedding"]) {
target.find(".embedding").hide();
}
if (!config["allow_screenshot"] && config["allow_flagging"] !== true && !config["allow_interpretation"]) {
target.find(".screenshot, .record, .flag, .interpret").css("visibility", "hidden");
if (!config["allow_screenshot"]) {
target.find(".screenshot, .record").hide();
}
if (config["allow_flagging"] !== true) {
target.find(".flag").hide();
}
if (!config["allow_interpretation"]) {
target.find(".interpret").hide();
} else {
if (!config["allow_screenshot"]) {
target.find(".screenshot, .record").hide();
}
if (config["allow_flagging"] !== true) {
target.find(".flag").hide();
}
if (!config["allow_interpretation"]) {
target.find(".interpret").hide();
} else {
let interpret_html = "";
for (let [i, interface] of io_master.input_interfaces.entries()) {
let label = config.input_interfaces[i][1]["label"];;
interpret_html += "<li><strong>" + label + "</strong> - " + interface.interpretation_logic + "</li>";
}
target.find(".interpretation_explained ul").html(interpret_html);
target.find(".interpretation_explained .close_explain").click(function() {
target.find(".interpretation_explained").remove();
});
let interpret_html = "";
for (let [i, interface] of io_master.input_interfaces.entries()) {
let label = config.input_interfaces[i][1]["label"];
interpret_html += "<li><strong>" + label + "</strong> - " + interface.interpretation_logic + "</li>";
}
target.find(".interpretation_explained ul").html(interpret_html);
target.find(".interpretation_explained .close_explain").click(function() {
target.find(".interpretation_explained").remove();
});
}
function load_example(example_id) {
clear_all();
@ -340,7 +337,7 @@ function gradio(config, fn, target, example_file_path) {
target.find(".examples > table > tbody").html(html);
}
if (config["examples"]) {
target.find(".examples").removeClass("invisible");
target.find(".examples").removeClass("hidden");
let html = "<thead>"
for (let input_interface of config["input_interfaces"]) {
html += "<th>" + input_interface[1]["label"] + "</th>";
@ -357,7 +354,7 @@ function gradio(config, fn, target, example_file_path) {
io_master.order_mapping = [...Array(config.examples.length).keys()];
let page_count = Math.ceil(config.examples.length / config.examples_per_page)
if (page_count > 1) {
target.find(".pages").removeClass("invisible");
target.find(".pages").removeClass("hidden");
let html = "";
for (let i = 0; i < page_count; i++) {
html += `<button class='page' page='${i}'>${i+1}</button>`
@ -403,8 +400,8 @@ function gradio(config, fn, target, example_file_path) {
})
});
target.find(".view_examples").click(function() {
target.find(".examples-content").removeClass("invisible");
target.find(".embeddings-content").addClass("invisible");
target.find(".examples-content").removeClass("hidden");
target.find(".embeddings-content").addClass("hidden");
});
target.find(".update_embeddings").click(function() {
io_master.update_embeddings(function(output) {
@ -451,8 +448,8 @@ function gradio(config, fn, target, example_file_path) {
}
};
target.find(".examples-content").addClass("invisible");
target.find(".embeddings-content").removeClass("invisible");
target.find(".examples-content").addClass("hidden");
target.find(".embeddings-content").removeClass("hidden");
})
});
$("body").keydown(function(e) {
@ -475,7 +472,7 @@ function gradio(config, fn, target, example_file_path) {
target.find(".screenshot").click(function() {
$(".screenshot, .record").hide();
$(".screenshot_logo").removeClass("invisible");
$(".screenshot_logo").removeClass("hidden");
$(".record_stop").hide();
html2canvas(target[0], {
scrollX: 0,
@ -483,15 +480,15 @@ function gradio(config, fn, target, example_file_path) {
}).then(function(canvas) {
saveAs(canvas.toDataURL(), 'screenshot.png');
$(".screenshot, .record").show();
$(".screenshot_logo").addClass("invisible");
$(".screenshot_logo").addClass("hidden");
});
});
target.find(".record").click(function() {
$(".screenshot, .record").hide();
$(".screenshot_logo").removeClass("invisible");
$(".screenshot_logo").removeClass("hidden");
$(".record_stop").show();
target.append("<canvas class='recording_draw invisible' width=640 height=480></canvas>");
target.append("<video class='recording invisible' autoplay playsinline></video>");
target.append("<canvas class='recording_draw hidden' width=640 height=480></canvas>");
target.append("<video class='recording hidden' autoplay playsinline></video>");
navigator.mediaDevices.getDisplayMedia(
{ video: { width: 9999, height: 9999 } }
).then(stream => {
@ -546,7 +543,7 @@ function gradio(config, fn, target, example_file_path) {
processFrame(start);
$(".screenshot, .record").show();
$(".screenshot_logo").addClass("invisible");
$(".screenshot_logo").addClass("hidden");
target.find("canvas.recording_draw").remove();
target.find("video.recording").remove();
})
@ -563,10 +560,10 @@ function gradio(config, fn, target, example_file_path) {
}
function flash_flag() {
target.find(".flag").addClass("flagged");
target.find(".dropcontent").addClass("invisible");
target.find(".dropcontent").addClass("hidden");
window.setTimeout(() => {
target.find(".flag").removeClass("flagged");
target.find(".dropcontent").removeClass("invisible");
target.find(".dropcontent").removeClass("hidden");
}, 500);
}
@ -597,7 +594,7 @@ function gradio(config, fn, target, example_file_path) {
$(".run_examples").hide();
}
target.find(".interpret").click(function() {
target.find(".interpretation_explained").removeClass("invisible");
target.find(".interpretation_explained").removeClass("hidden");
if (io_master.last_output) {
io_master.interpret();
}

3
gradio/static/js/interfaces/input/slider.js
View File

@ -20,7 +20,8 @@ const slider = {
},
min: opts.minimum,
max: opts.maximum,
step: opts.step
step: opts.step,
value: opts.default
});
},
submit: function() {

10
gradio/static/js/interfaces/output/highlighted_text.js
View File

@ -1,12 +1,12 @@
const highlighted_text = {
html: `
<div class="highlight_legend">
<div class="color_legend invisible">
<div class="color_legend hidden">
<span>-1</span>
<span>0</span>
<span>+1</span>
</div>
<div class="category_legend invisible"></div>
<div class="category_legend hidden"></div>
</div>
<div class="output_text"></div>
`,
@ -48,7 +48,7 @@ const highlighted_text = {
if (data.length == 0) {
return;
} else if (typeof(data[0][1]) == "string") {
this.target.find(".category_legend").removeClass("invisible");
this.target.find(".category_legend").removeClass("hidden");
let new_color_map = {};
for (let span of data) {
let category = span[1];
@ -66,7 +66,7 @@ const highlighted_text = {
this.target.find(".output_text").html(html);
} else {
this.target.find(".color_legend").removeClass("invisible");
this.target.find(".color_legend").removeClass("hidden");
let html = "";
for (let span of data) {
let value = span[1];
@ -85,7 +85,7 @@ const highlighted_text = {
},
clear: function() {
this.target.find(".output_text").empty();
this.target.find(".highlight_legend div").addClass("invisible");
this.target.find(".highlight_legend div").addClass("hidden");
},
load_example_preview: function(data) {
let output_string = "";

36
gradio/templates/index.html
View File

@ -31,13 +31,19 @@
<title>Gradio</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!-- VENDOR -->
<link type="text/css" href="{{ vendor_prefix }}/static/css/vendor/jquery-ui.css" rel="stylesheet">
{% if "image" in input_interfaces %}
<link type="text/css" href="{{ vendor_prefix }}/static/css/vendor/tui-color-picker.css" rel="stylesheet">
<link type="text/css" href="{{ vendor_prefix }}/static/css/vendor/tui-image-editor.css" rel="stylesheet">
<link type="text/css" href="{{ vendor_prefix }}/static/css/vendor/jquery-ui.css" rel="stylesheet">
<link type="text/css" href="{{ vendor_prefix }}/static/css/vendor/cropper.min.css" rel="stylesheet">
{% endif %}
{% if "dataframe" in input_interfaces or "dataframe" in output_interfaces %}
<link type="text/css" href="{{ vendor_prefix }}/static/css/vendor/jexcel.min.css" rel="stylesheet">
<link type="text/css" href="{{ vendor_prefix }}/static/css/vendor/jsuites.min.css" rel="stylesheet">
{% endif %}
{% if "json" in output_interfaces %}
<link type="text/css" href="{{ vendor_prefix }}/static/css/vendor/jsonTree.css" rel="stylesheet">
<link type="text/css" href="{{ vendor_prefix }}/static/css/vendor/cropper.min.css" rel="stylesheet">
{% endif %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
@ -76,7 +82,7 @@
<script src="{{ vendor_prefix }}/static/js/vendor/html2canvas.min.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/jquery-ui.min.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/jquery.ui.touch-punch.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/jsonTree.js"></script>
{% if "image" in input_interfaces %}
<script src="{{ vendor_prefix }}/static/js/vendor/fabric.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/tui-code-snippet.min.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/FileSaver.min.js"></script>
@ -84,17 +90,27 @@
<script src="{{ vendor_prefix }}/static/js/vendor/tui-image-editor.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/white-theme.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/black-theme.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/wavesurfer.min.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/p5.min.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/p5.sound.min.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/p5.dom.min.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/jexcel.min.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/jsuites.min.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/cropper.min.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/sketchpad.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/webcam.min.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/gifcap/gifencoder.js"></script>
{% endif %}
{% if "audio" in input_interfaces or "audio" in output_interfaces %}
<script src="{{ vendor_prefix }}/static/js/vendor/wavesurfer.min.js"></script>
{% endif %}
{% if "audio" in input_interfaces %}
<script src="{{ vendor_prefix }}/static/js/vendor/p5.min.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/p5.sound.min.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/p5.dom.min.js"></script>
{% endif %}
{% if "dataframe" in input_interfaces or "dataframe" in output_interfaces %}
<script src="{{ vendor_prefix }}/static/js/vendor/jexcel.min.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/jsuites.min.js"></script>
{% endif%}
{% if "json" in output_interfaces %}
<script src="{{ vendor_prefix }}/static/js/vendor/jsonTree.js"></script>
{% endif %}
<script src="{{ vendor_prefix }}/static/js/vendor/Chart.min.js"></script>
<script src="{{ vendor_prefix }}/static/js/vendor/gifcap/gifencoder.js"></script>
<script src="{{ url_for('static', filename='js/utils.js') }}"></script>
<script src="{{ url_for('static', filename='js/all_io.js') }}"></script>