mirror of
https://github.com/gradio-app/gradio.git
synced 2025-04-18 12:50:30 +08:00
Allow for bulk input from examples (#74)
* bulk input first commit * add titanic demo support * remove flagged content * route vendor files through gradio.app if share=True; cache bust other static files * s * navigate examples with arrow keys * navigate examples with arrow keys * navigate examples with arrow keys Co-authored-by: Ali Abid <aliabid94@gmail.com>
This commit is contained in:
aliabid94
GitHub
parent
9f9991d058
commit
503a67aa9d
@ -39,7 +39,7 @@ class InputComponent(Component):
|
||||
|
||||
def preprocess_example(self, x):
|
||||
"""
|
||||
Any preprocessing needed to be performed on an example.
|
||||
Any preprocessing needed to be performed on an example before being passed to the main function.
|
||||
"""
|
||||
return x
|
||||
|
||||
@ -129,6 +129,13 @@ class Textbox(InputComponent):
|
||||
else:
|
||||
raise ValueError("Unknown type: " + str(self.type) + ". Please choose from: 'str', 'number'.")
|
||||
|
||||
def preprocess_example(self, x):
|
||||
"""
|
||||
Returns:
|
||||
(str): Text representing function input
|
||||
"""
|
||||
return x
|
||||
|
||||
def interpret(self, separator=" ", replacement=None):
|
||||
"""
|
||||
Calculates interpretation score of characters in input by splitting input into tokens, then using a "leave one out" method to calculate the score of each token by removing each token and measuring the delta of the output value.
|
||||
@ -192,6 +199,13 @@ class Number(InputComponent):
|
||||
"number": {},
|
||||
}
|
||||
|
||||
def preprocess_example(self, x):
|
||||
"""
|
||||
Returns:
|
||||
(float): Number representing function input
|
||||
"""
|
||||
return x
|
||||
|
||||
def interpret(self, steps=3, delta=1, delta_type="percent"):
|
||||
"""
|
||||
Calculates interpretation scores of numeric values close to the input number.
|
||||
@ -266,6 +280,13 @@ class Slider(InputComponent):
|
||||
"slider": {},
|
||||
}
|
||||
|
||||
def preprocess_example(self, x):
|
||||
"""
|
||||
Returns:
|
||||
(float): Number representing function input
|
||||
"""
|
||||
return x
|
||||
|
||||
def interpret(self, steps=8):
|
||||
"""
|
||||
Calculates interpretation scores of numeric values ranging between the minimum and maximum values of the slider.
|
||||
@ -306,6 +327,13 @@ class Checkbox(InputComponent):
|
||||
"checkbox": {},
|
||||
}
|
||||
|
||||
def preprocess_example(self, x):
|
||||
"""
|
||||
Returns:
|
||||
(bool): Boolean representing function input
|
||||
"""
|
||||
return x
|
||||
|
||||
def interpret(self):
|
||||
"""
|
||||
Calculates interpretation score of the input by comparing the output against the output when the input is the inverse boolean value of x.
|
||||
@ -558,6 +586,9 @@ class Image(InputComponent):
|
||||
else:
|
||||
raise ValueError("Unknown type: " + str(self.type) + ". Please choose from: 'numpy', 'pil', 'file'.")
|
||||
|
||||
def preprocess_example(self, x):
|
||||
return processing_utils.encode_file_to_base64(x)
|
||||
|
||||
def rebuild(self, dir, data):
|
||||
"""
|
||||
Default rebuild method to decode a base64 image
|
||||
@ -653,6 +684,9 @@ class Audio(InputComponent):
|
||||
elif self.type == "mfcc":
|
||||
return processing_utils.generate_mfcc_features_from_audio_file(file_obj.name)
|
||||
|
||||
def preprocess_example(self, x):
|
||||
return processing_utils.encode_file_to_base64(x, type="audio")
|
||||
|
||||
def interpret(self, segments=8):
|
||||
"""
|
||||
Calculates interpretation score of audio subsections by splitting the audio into subsections, then using a "leave one out" method to calculate the score of each subsection by removing the subsection and measuring the delta of the output value.
|
||||
@ -725,12 +759,6 @@ class File(InputComponent):
|
||||
else:
|
||||
raise ValueError("Unknown type: " + str(self.type) + ". Please choose from: 'file', 'bytes'.")
|
||||
|
||||
def preprocess_example(self, x):
|
||||
return {
|
||||
"name": x,
|
||||
"size": os.path.getsize(x)
|
||||
}
|
||||
|
||||
|
||||
|
||||
class Dataframe(InputComponent):
|
||||
|
||||
@ -194,7 +194,7 @@ class Interface:
|
||||
for example_set in self.examples:
|
||||
processed_set = []
|
||||
for iface, example in zip(self.input_interfaces, example_set):
|
||||
processed_set.append(iface.preprocess_example(example))
|
||||
processed_set.append(example)
|
||||
processed_examples.append(processed_set)
|
||||
config["examples"] = processed_examples
|
||||
return config
|
||||
|
||||
@ -120,6 +120,23 @@ def predict():
|
||||
return jsonify(output)
|
||||
|
||||
|
||||
@app.route("/api/predict_examples/", methods=["POST"])
|
||||
def predict_examples():
|
||||
example_ids = request.json["data"]
|
||||
predictions_set = {}
|
||||
for example_id in example_ids:
|
||||
example_set = app.interface.examples[example_id]
|
||||
processed_example_set = [iface.preprocess_example(example)
|
||||
for iface, example in zip(app.interface.input_interfaces, example_set)]
|
||||
try:
|
||||
predictions, _ = app.interface.process(processed_example_set)
|
||||
except:
|
||||
continue
|
||||
predictions_set[example_id] = predictions
|
||||
output = {"data": predictions_set}
|
||||
return jsonify(output)
|
||||
|
||||
|
||||
@app.route("/api/flag/", methods=["POST"])
|
||||
def flag():
|
||||
flag_path = os.path.join(app.cwd, app.interface.flagging_dir)
|
||||
|
||||
@ -57,6 +57,9 @@ button.secondary {
|
||||
color: black;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
h4 {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.interpretation_legend {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
@ -71,6 +74,12 @@ button.secondary {
|
||||
.close_explain {
|
||||
cursor: pointer;
|
||||
}
|
||||
.examples > button {
|
||||
padding: 4px;
|
||||
border-radius: 2px;
|
||||
margin-right: 4px;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
.examples > table {
|
||||
border-collapse: collapse;
|
||||
font-family: monospace;
|
||||
@ -79,11 +88,13 @@ button.secondary {
|
||||
border-right: solid 4px whitesmoke;
|
||||
border-left: solid 4px whitesmoke;
|
||||
border-bottom: solid 4px whitesmoke;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.examples > table th {
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.examples_body > tr > td {
|
||||
padding: 8px;
|
||||
@ -96,6 +107,9 @@ button.secondary {
|
||||
.examples_body > tr:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
.examples_body > tr.current_example {
|
||||
background-color: #ffb573;
|
||||
}
|
||||
#credit {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
|
||||
@ -35,7 +35,47 @@ var io_master_template = {
|
||||
console.error(error);
|
||||
this.target.find(".loading_in_progress").hide();
|
||||
this.target.find(".loading_failed").show();
|
||||
})
|
||||
});
|
||||
},
|
||||
submit_examples: function() {
|
||||
let example_ids = [];
|
||||
if (this.loaded_examples == null) {
|
||||
this.loaded_examples = {};
|
||||
}
|
||||
for (let i = 0; i < this.config.examples.length; i++) {
|
||||
if (!(i in this.loaded_examples)) {
|
||||
example_ids.push(i);
|
||||
}
|
||||
}
|
||||
this.fn(example_ids, "predict_examples").then((output) => {
|
||||
output = output["data"];
|
||||
if (!this.has_loaded_examples) {
|
||||
this.has_loaded_examples = true;
|
||||
let html = ""
|
||||
for (let i = 0; i < this.output_interfaces.length; i++) {
|
||||
html += "<th>" + this.config.output_interfaces[i][1]["label"] + "</th>";
|
||||
}
|
||||
this.target.find(".examples > table > thead > tr").append(html);
|
||||
}
|
||||
for (let [example_id, output_values] of Object.entries(output)) {
|
||||
this.loaded_examples[example_id] = output_values;
|
||||
let html = ""
|
||||
for (let j = 0; j < output_values.length; j++) {
|
||||
let output_interface = this.output_interfaces[j];
|
||||
let example_preview = output_values[j];
|
||||
if (output_interface.load_example_preview) {
|
||||
example_preview = output_interface.load_example_preview(example_preview)
|
||||
}
|
||||
html += "<td>" + example_preview + "</td>";
|
||||
}
|
||||
this.target.find(".examples_body tr[row='" + example_id + "']").append(html);
|
||||
}
|
||||
this.has_loaded_examples = true;
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
this.target.find(".loading_in_progress").hide();
|
||||
this.target.find(".loading_failed").show();
|
||||
});
|
||||
},
|
||||
output: function(data, do_not_cache) {
|
||||
if (!do_not_cache) {
|
||||
|
||||
@ -43,242 +43,300 @@ function gradio(config, fn, target, example_file_path) {
|
||||
<ul></ul>
|
||||
</div>
|
||||
<div class="examples invisible">
|
||||
<h4>Examples <small>(click to load)</small></h4>
|
||||
<h4>Examples</small></h4>
|
||||
<button class="run_examples">Run All</button>
|
||||
<button class="load_prev">Load Previous <em>(CTRL + ←)</em></button>
|
||||
<button class="load_next">Load Next <em>(CTRL + →)</em></button>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
`);
|
||||
let io_master = Object.create(io_master_template);
|
||||
io_master.fn = fn
|
||||
io_master.target = target;
|
||||
io_master.config = config;
|
||||
io_master.example_file_path = example_file_path;
|
||||
|
||||
let input_to_object_map = {
|
||||
"csv" : {},
|
||||
"image" : image_input,
|
||||
"sketchpad" : sketchpad_input,
|
||||
"textbox" : textbox_input,
|
||||
"number" : number_input,
|
||||
"webcam" : webcam,
|
||||
"microphone" : microphone,
|
||||
"radio" : radio,
|
||||
"checkbox" : checkbox,
|
||||
"checkboxgroup" : checkbox_group,
|
||||
"slider" : slider,
|
||||
"dropdown" : dropdown,
|
||||
"audio" : audio_input,
|
||||
"file" : file_input,
|
||||
"dataframe" : dataframe_input,
|
||||
}
|
||||
let output_to_object_map = {
|
||||
"csv" : {},
|
||||
"image" : image_output,
|
||||
"label" : label_output,
|
||||
"keyvalues" : key_values,
|
||||
"textbox" : textbox_output,
|
||||
"highlightedtext": highlighted_text,
|
||||
"audio": audio_output,
|
||||
"json": json_output,
|
||||
"html": html_output,
|
||||
"file" : file_output,
|
||||
"dataframe" : dataframe_output,
|
||||
}
|
||||
let id_to_interface_map = {}
|
||||
|
||||
function set_interface_id(interface, id) {
|
||||
interface.id = id;
|
||||
id_to_interface_map[id] = interface;
|
||||
}
|
||||
if (config["title"]) {
|
||||
target.find(".title").text(config["title"]);
|
||||
}
|
||||
if (config["description"]) {
|
||||
target.find(".description").text(config["description"]);
|
||||
}
|
||||
if (config["share_url"]) {
|
||||
let share_url = config["share_url"];
|
||||
target.find(".share").removeClass("invisible");
|
||||
target.find(".share-link").text(share_url).attr("href", share_url);
|
||||
target.find(".share-copy").click(function() {
|
||||
copyToClipboard(share_url);
|
||||
target.find(".share-copy").text("Copied!");
|
||||
})
|
||||
};
|
||||
</div>`);
|
||||
let io_master = Object.create(io_master_template);
|
||||
io_master.fn = fn
|
||||
io_master.target = target;
|
||||
io_master.config = config;
|
||||
io_master.example_file_path = example_file_path;
|
||||
|
||||
let input_to_object_map = {
|
||||
"csv" : {},
|
||||
"image" : image_input,
|
||||
"sketchpad" : sketchpad_input,
|
||||
"textbox" : textbox_input,
|
||||
"number" : number_input,
|
||||
"webcam" : webcam,
|
||||
"microphone" : microphone,
|
||||
"radio" : radio,
|
||||
"checkbox" : checkbox,
|
||||
"checkboxgroup" : checkbox_group,
|
||||
"slider" : slider,
|
||||
"dropdown" : dropdown,
|
||||
"audio" : audio_input,
|
||||
"file" : file_input,
|
||||
"dataframe" : dataframe_input,
|
||||
}
|
||||
let output_to_object_map = {
|
||||
"csv" : {},
|
||||
"image" : image_output,
|
||||
"label" : label_output,
|
||||
"keyvalues" : key_values,
|
||||
"textbox" : textbox_output,
|
||||
"highlightedtext": highlighted_text,
|
||||
"audio": audio_output,
|
||||
"json": json_output,
|
||||
"html": html_output,
|
||||
"file" : file_output,
|
||||
"dataframe" : dataframe_output,
|
||||
}
|
||||
let id_to_interface_map = {}
|
||||
|
||||
_id = 0;
|
||||
let input_interfaces = [];
|
||||
let output_interfaces = [];
|
||||
for (let i = 0; i < config["input_interfaces"].length; i++) {
|
||||
input_interface_data = config["input_interfaces"][i];
|
||||
input_interface = Object.create(input_to_object_map[input_interface_data[0]]);
|
||||
if (input_interface_data[1]["label"]) {
|
||||
target.find(".input_interfaces").append(`
|
||||
<div class="panel_header">${input_interface_data[1]["label"]}</strong>
|
||||
`);
|
||||
}
|
||||
function set_interface_id(interface, id) {
|
||||
interface.id = id;
|
||||
id_to_interface_map[id] = interface;
|
||||
}
|
||||
if (config["title"]) {
|
||||
target.find(".title").text(config["title"]);
|
||||
}
|
||||
if (config["description"]) {
|
||||
target.find(".description").text(config["description"]);
|
||||
}
|
||||
if (config["share_url"]) {
|
||||
let share_url = config["share_url"];
|
||||
target.find(".share").removeClass("invisible");
|
||||
target.find(".share-link").text(share_url).attr("href", share_url);
|
||||
target.find(".share-copy").click(function() {
|
||||
copyToClipboard(share_url);
|
||||
target.find(".share-copy").text("Copied!");
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
_id = 0;
|
||||
let input_interfaces = [];
|
||||
let output_interfaces = [];
|
||||
for (let i = 0; i < config["input_interfaces"].length; i++) {
|
||||
input_interface_data = config["input_interfaces"][i];
|
||||
input_interface = Object.create(input_to_object_map[input_interface_data[0]]);
|
||||
if (input_interface_data[1]["label"]) {
|
||||
target.find(".input_interfaces").append(`
|
||||
<div class="input_interface interface" interface_id=${_id}>
|
||||
${input_interface.html}
|
||||
</div>
|
||||
<div class="panel_header">${input_interface_data[1]["label"]}</strong>
|
||||
`);
|
||||
input_interface.target = target.find(`.input_interface[interface_id=${_id}]`);
|
||||
set_interface_id(input_interface, _id);
|
||||
input_interface.io_master = io_master;
|
||||
input_interface.init(input_interface_data[1]);
|
||||
input_interfaces.push(input_interface);
|
||||
_id++;
|
||||
}
|
||||
for (let i = 0; i < config["output_interfaces"].length; i++) {
|
||||
if (i != 0 && i % (config["output_interfaces"].length / config.function_count) == 0) {
|
||||
target.find(".output_interfaces").append("<hr>");
|
||||
}
|
||||
output_interface_data = config["output_interfaces"][i];
|
||||
output_interface = Object.create(output_to_object_map[
|
||||
output_interface_data[0]]);
|
||||
if (output_interface_data[1]["label"]) {
|
||||
target.find(".output_interfaces").append(`
|
||||
<div class="panel_header">${output_interface_data[1]["label"]}</strong>
|
||||
`);
|
||||
}
|
||||
target.find(".output_interfaces").append(`
|
||||
<div class="output_interface interface" interface_id=${_id}>
|
||||
${output_interface.html}
|
||||
</div>
|
||||
`);
|
||||
target.find(".output_interfaces").append(`
|
||||
<div class="loading_time" interface="${i}"> </div>
|
||||
`);
|
||||
output_interface.target = target.find(`.output_interface[interface_id=${_id}]`);
|
||||
set_interface_id(output_interface, _id);
|
||||
output_interface.io_master = io_master;
|
||||
output_interface.init(output_interface_data[1]);
|
||||
output_interfaces.push(output_interface);
|
||||
_id++;
|
||||
target.find(".input_interfaces").append(`
|
||||
<div class="input_interface interface" interface_id=${_id}>
|
||||
${input_interface.html}
|
||||
</div>
|
||||
`);
|
||||
input_interface.target = target.find(`.input_interface[interface_id=${_id}]`);
|
||||
set_interface_id(input_interface, _id);
|
||||
input_interface.io_master = io_master;
|
||||
input_interface.init(input_interface_data[1]);
|
||||
input_interfaces.push(input_interface);
|
||||
_id++;
|
||||
}
|
||||
for (let i = 0; i < config["output_interfaces"].length; i++) {
|
||||
if (i != 0 && i % (config["output_interfaces"].length / config.function_count) == 0) {
|
||||
target.find(".output_interfaces").append("<hr>");
|
||||
}
|
||||
io_master.input_interfaces = input_interfaces;
|
||||
io_master.output_interfaces = output_interfaces;
|
||||
target.find(".clear").click(function() {
|
||||
for (let input_interface of input_interfaces) {
|
||||
input_interface.clear();
|
||||
output_interface_data = config["output_interfaces"][i];
|
||||
output_interface = Object.create(output_to_object_map[
|
||||
output_interface_data[0]]);
|
||||
if (output_interface_data[1]["label"]) {
|
||||
target.find(".output_interfaces").append(`
|
||||
<div class="panel_header">${output_interface_data[1]["label"]}</strong>
|
||||
`);
|
||||
}
|
||||
target.find(".output_interfaces").append(`
|
||||
<div class="output_interface interface" interface_id=${_id}>
|
||||
${output_interface.html}
|
||||
</div>
|
||||
`);
|
||||
target.find(".output_interfaces").append(`
|
||||
<div class="loading_time" interface="${i}"> </div>
|
||||
`);
|
||||
output_interface.target = target.find(`.output_interface[interface_id=${_id}]`);
|
||||
set_interface_id(output_interface, _id);
|
||||
output_interface.io_master = io_master;
|
||||
output_interface.init(output_interface_data[1]);
|
||||
output_interfaces.push(output_interface);
|
||||
_id++;
|
||||
}
|
||||
io_master.input_interfaces = input_interfaces;
|
||||
io_master.output_interfaces = output_interfaces;
|
||||
target.find(".clear").click(function() {
|
||||
for (let input_interface of input_interfaces) {
|
||||
input_interface.clear();
|
||||
}
|
||||
for (let output_interface of output_interfaces) {
|
||||
output_interface.clear();
|
||||
}
|
||||
target.find(".flag").removeClass("flagged");
|
||||
target.find(".flag").val("FLAG");
|
||||
target.find(".flag_message").empty();
|
||||
target.find(".loading").addClass("invisible");
|
||||
target.find(".loading_time").text("");
|
||||
target.find(".output_interfaces").css("opacity", 1);
|
||||
io_master.last_input = null;
|
||||
io_master.last_output = null;
|
||||
});
|
||||
|
||||
if (!config["allow_screenshot"] && !config["allow_flagging"] && !config["allow_interpretation"]) {
|
||||
target.find(".screenshot, .flag, .interpret").css("visibility", "hidden");
|
||||
} else {
|
||||
if (!config["allow_screenshot"]) {
|
||||
target.find(".screenshot").hide();
|
||||
}
|
||||
if (!config["allow_flagging"]) {
|
||||
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>";
|
||||
}
|
||||
for (let output_interface of output_interfaces) {
|
||||
output_interface.clear();
|
||||
target.find(".interpretation_explained ul").html(interpret_html);
|
||||
target.find(".interpretation_explained .close_explain").click(function() {
|
||||
target.find(".interpretation_explained").remove();
|
||||
});
|
||||
if (config["examples"]) {
|
||||
target.find(".examples").removeClass("invisible");
|
||||
let html = "<thead>"
|
||||
for (let i = 0; i < config["input_interfaces"].length; i++) {
|
||||
label = config["input_interfaces"][i][1]["label"];
|
||||
html += "<th>" + label + "</th>";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function load_example(example_id) {
|
||||
console.log(example_id)
|
||||
for (let [i, value] of config["examples"][example_id].entries()) {
|
||||
input_interfaces[i].load_example(value);
|
||||
};
|
||||
if (io_master.loaded_examples && example_id in io_master.loaded_examples) {
|
||||
io_master.output({"data": io_master.loaded_examples[example_id]});
|
||||
}
|
||||
$(".examples_body > tr").removeClass("current_example");
|
||||
$(".examples_body > tr[row='" + example_id + "'").addClass("current_example");
|
||||
io_master.current_example = example_id;
|
||||
}
|
||||
function next_example() {
|
||||
current_example = io_master.current_example;
|
||||
if (current_example == null) {
|
||||
current_example = 0;
|
||||
} else {
|
||||
current_example = (current_example + 1 + config.examples.length) % config.examples.length;
|
||||
}
|
||||
load_example(current_example);
|
||||
}
|
||||
function prev_example() {
|
||||
current_example = io_master.current_example;
|
||||
if (current_example === null) {
|
||||
current_example = 0;
|
||||
} else {
|
||||
current_example = (current_example - 1 + config.examples.length) % config.examples.length;
|
||||
}
|
||||
load_example(current_example);
|
||||
}
|
||||
if (config["examples"]) {
|
||||
target.find(".examples").removeClass("invisible");
|
||||
let html = "<thead>"
|
||||
for (let i = 0; i < config["input_interfaces"].length; i++) {
|
||||
label = config["input_interfaces"][i][1]["label"];
|
||||
html += "<th>" + label + "</th>";
|
||||
}
|
||||
html += "</thead>";
|
||||
html += "<tbody class='examples_body'>";
|
||||
for (let [i, example] of config["examples"].entries()) {
|
||||
html += "<tr row="+i+">";
|
||||
for (let [j, col] of example.entries()) {
|
||||
let new_col = JSON.parse(JSON.stringify(col))
|
||||
if (input_interfaces[j].load_example_preview) {
|
||||
new_col = input_interfaces[j].load_example_preview(new_col);
|
||||
}
|
||||
html += "<td>" + new_col + "</td>";
|
||||
}
|
||||
html += "</tr>";
|
||||
}
|
||||
html += "</tbody>";
|
||||
target.find(".examples table").html(html);
|
||||
target.find(".examples_body > tr").click(function() {
|
||||
let example_id = parseInt($(this).attr("row"));
|
||||
load_example(example_id);
|
||||
})
|
||||
target.find(".load_prev").click(prev_example);
|
||||
target.find(".load_next").click(next_example);
|
||||
$("body").keydown(function(e) {
|
||||
if ($(document.activeElement).attr("type") == "text" || $(document.activeElement).attr("type") == "textarea") {
|
||||
return;
|
||||
}
|
||||
e = e || window.event;
|
||||
var keyCode = e.keyCode || e.which,
|
||||
arrow = {left: 37, up: 38, right: 39, down: 40 };
|
||||
if (e.ctrlKey) {
|
||||
if (keyCode == arrow.left) {
|
||||
prev_example();
|
||||
} else if (keyCode == arrow.right) {
|
||||
next_example();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
target.find(".screenshot").click(function() {
|
||||
$(".screenshot").hide();
|
||||
$(".screenshot_logo").show();
|
||||
html2canvas(target[0], {
|
||||
scrollX: 0,
|
||||
scrollY: -window.scrollY
|
||||
}).then(function(canvas) {
|
||||
saveAs(canvas.toDataURL(), 'screenshot.png');
|
||||
$(".screenshot").show();
|
||||
$(".screenshot_logo").hide();
|
||||
});
|
||||
});
|
||||
if (config.live) {
|
||||
io_master.gather();
|
||||
} else {
|
||||
target.find(".submit").show();
|
||||
target.find(".submit").click(function() {
|
||||
io_master.gather();
|
||||
target.find(".flag").removeClass("flagged");
|
||||
target.find(".flag").val("FLAG");
|
||||
target.find(".flag_message").empty();
|
||||
target.find(".loading").addClass("invisible");
|
||||
target.find(".loading_time").text("");
|
||||
target.find(".output_interfaces").css("opacity", 1);
|
||||
io_master.last_input = null;
|
||||
io_master.last_output = null;
|
||||
});
|
||||
|
||||
if (!config["allow_screenshot"] && !config["allow_flagging"] && !config["allow_interpretation"]) {
|
||||
target.find(".screenshot, .flag, .interpret").css("visibility", "hidden");
|
||||
} else {
|
||||
if (!config["allow_screenshot"]) {
|
||||
target.find(".screenshot").hide();
|
||||
}
|
||||
if (!config["allow_flagging"]) {
|
||||
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();
|
||||
});
|
||||
if (config["examples"]) {
|
||||
target.find(".examples").removeClass("invisible");
|
||||
let html = "<thead>"
|
||||
for (let i = 0; i < config["input_interfaces"].length; i++) {
|
||||
label = config["input_interfaces"][i][1]["label"];
|
||||
html += "<th>" + label + "</th>";
|
||||
}
|
||||
html += "</thead>";
|
||||
html += "<tbody class='examples_body'>";
|
||||
for (let [i, example] of config["examples"].entries()) {
|
||||
html += "<tr row="+i+">";
|
||||
for (let [j, col] of example.entries()) {
|
||||
let new_col = JSON.parse(JSON.stringify(col))
|
||||
if (input_interfaces[j].load_example_preview) {
|
||||
new_col = input_interfaces[j].load_example_preview(new_col);
|
||||
}
|
||||
html += "<td>" + new_col + "</td>";
|
||||
}
|
||||
html += "</tr>";
|
||||
}
|
||||
html += "</tbody>";
|
||||
target.find(".examples table").html(html);
|
||||
target.find(".examples_body > tr").click(function() {
|
||||
let example_id = parseInt($(this).attr("row"));
|
||||
for (let [i, value] of config["examples"][example_id].entries()) {
|
||||
input_interfaces[i].load_example(value);
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
target.find(".screenshot").click(function() {
|
||||
$(".screenshot").hide();
|
||||
$(".screenshot_logo").show();
|
||||
html2canvas(target[0], {
|
||||
scrollX: 0,
|
||||
scrollY: -window.scrollY
|
||||
}).then(function(canvas) {
|
||||
saveAs(canvas.toDataURL(), 'screenshot.png');
|
||||
$(".screenshot").show();
|
||||
$(".screenshot_logo").hide();
|
||||
});
|
||||
});
|
||||
if (config.live) {
|
||||
io_master.gather();
|
||||
} else {
|
||||
target.find(".submit").show();
|
||||
target.find(".submit").click(function() {
|
||||
io_master.gather();
|
||||
target.find(".flag").removeClass("flagged");
|
||||
target.find(".flag").val("FLAG");
|
||||
})
|
||||
}
|
||||
if (!config.show_input) {
|
||||
target.find(".input_panel").hide();
|
||||
}
|
||||
|
||||
target.find(".flag").click(function() {
|
||||
if (io_master.last_output) {
|
||||
target.find(".flag").addClass("flagged");
|
||||
target.find(".flag").val("FLAGGED");
|
||||
io_master.flag();
|
||||
}
|
||||
})
|
||||
target.find(".interpret").click(function() {
|
||||
target.find(".interpretation_explained").removeClass("invisible");
|
||||
if (io_master.last_output) {
|
||||
io_master.interpret();
|
||||
}
|
||||
});
|
||||
$(".input_panel").on("mouseover", ".alternate", function() {
|
||||
let interface_index = $(this).closest(".interface").attr("interface_id");
|
||||
let alternate_index = $(this).attr("alternate_index");
|
||||
io_master.alternative_interpret(interface_index, alternate_index);
|
||||
})
|
||||
$(".input_panel").on("mouseout", ".alternate", function() {
|
||||
io_master.alternative_interpret(false);
|
||||
})
|
||||
}
|
||||
if (!config.show_input) {
|
||||
target.find(".input_panel").hide();
|
||||
}
|
||||
|
||||
target.find(".flag").click(function() {
|
||||
if (io_master.last_output) {
|
||||
target.find(".flag").addClass("flagged");
|
||||
target.find(".flag").val("FLAGGED");
|
||||
io_master.flag();
|
||||
}
|
||||
})
|
||||
target.find(".interpret").click(function() {
|
||||
target.find(".interpretation_explained").removeClass("invisible");
|
||||
if (io_master.last_output) {
|
||||
io_master.interpret();
|
||||
}
|
||||
});
|
||||
target.find(".run_examples").click(function() {
|
||||
io_master.submit_examples();
|
||||
})
|
||||
|
||||
return io_master;
|
||||
$(".input_panel").on("mouseover", ".alternate", function() {
|
||||
let interface_index = $(this).closest(".interface").attr("interface_id");
|
||||
let alternate_index = $(this).attr("alternate_index");
|
||||
io_master.alternative_interpret(interface_index, alternate_index);
|
||||
})
|
||||
$(".input_panel").on("mouseout", ".alternate", function() {
|
||||
io_master.alternative_interpret(false);
|
||||
})
|
||||
|
||||
return io_master;
|
||||
}
|
||||
function gradio_url(config, url, target, example_file_path) {
|
||||
return gradio(config, function(data, action) {
|
||||
@ -308,4 +366,4 @@ function saveAs(uri, filename) {
|
||||
} else {
|
||||
window.open(uri);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,7 +41,9 @@ const file_input = {
|
||||
io.target.find(".upload_zone").hide();
|
||||
io.target.find(".file_display").removeClass("hide");
|
||||
io.target.find(".file_name").text(io.file_data.name);
|
||||
io.target.find(".file_size").text(prettyBytes(io.file_data.size));
|
||||
if (io.file_data.size !== null) {
|
||||
io.target.find(".file_size").text(prettyBytes(io.file_data.size));
|
||||
}
|
||||
},
|
||||
load_preview_from_files: function(files) {
|
||||
if (!files.length || !window.FileReader) {
|
||||
@ -60,15 +62,12 @@ const file_input = {
|
||||
io.load_preview()
|
||||
};
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
return data["name"] + " <em>(" + prettyBytes(data["size"]) + ")</em>";
|
||||
},
|
||||
load_example: function(example_data) {
|
||||
var io = this;
|
||||
io.file_data = {
|
||||
"name": example_data["name"],
|
||||
"name": example_data,
|
||||
"data": null,
|
||||
"size": example_data["size"],
|
||||
"size": null,
|
||||
"is_local_example": true
|
||||
};
|
||||
io.load_preview();
|
||||
|
||||
@ -43,6 +43,12 @@ const textbox_input = {
|
||||
this.target.find(".output_text").html(html);
|
||||
},
|
||||
interpretation_logic: "Highlights the output contribution of substrings of input.",
|
||||
load_example_preview: function(data) {
|
||||
if (data.length > 20) {
|
||||
return data.substring(0,20) + "...";
|
||||
}
|
||||
return data;
|
||||
},
|
||||
load_example: function(data) {
|
||||
this.target.find(".input_text").val(data);
|
||||
}
|
||||
|
||||
@ -30,5 +30,8 @@ const audio_output = {
|
||||
if (this.wavesurfer) {
|
||||
this.wavesurfer.stop();
|
||||
}
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
return "[audio]";
|
||||
},
|
||||
}
|
||||
|
||||
@ -23,5 +23,30 @@ const dataframe_output = {
|
||||
clear: function() {
|
||||
jexcel.destroy(this.target.find(".dataframe")[0]);
|
||||
this.table = null;
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
data = JSON.parse(JSON.stringify(data["data"]))
|
||||
let data_copy = [];
|
||||
for (let row of data.splice(0,3)) {
|
||||
new_row = row.splice(0,3)
|
||||
if (row.length > 3) {
|
||||
new_row.push("...");
|
||||
}
|
||||
data_copy.push(new_row);
|
||||
}
|
||||
if (data.length > 3) {
|
||||
new_row = Array(data_copy[0].length).fill("...");
|
||||
data_copy.push(new_row);
|
||||
}
|
||||
let html = "<table><tbody>"
|
||||
for (let row of data_copy) {
|
||||
html += "<tr>";
|
||||
for (let cell of row) {
|
||||
html += "<td>" + cell + "</td>";
|
||||
}
|
||||
html += "</tr>";
|
||||
}
|
||||
html += "</tbody></table>";
|
||||
return html;
|
||||
},
|
||||
}
|
||||
|
||||
@ -24,5 +24,8 @@ const file_output = {
|
||||
this.target.find(".interface_mini_box")
|
||||
.removeAttr("href")
|
||||
.removeAttr("download");
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
return data.name;
|
||||
},
|
||||
}
|
||||
|
||||
@ -86,5 +86,15 @@ const highlighted_text = {
|
||||
clear: function() {
|
||||
this.target.find(".output_text").empty();
|
||||
this.target.find(".highlight_legend div").addClass("invisible");
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
let output_string = "";
|
||||
for (const [text, type] of data) {
|
||||
output_string += text;
|
||||
}
|
||||
if (output_string.length > 20) {
|
||||
return output_string.substring(0,20) + "...";
|
||||
}
|
||||
return data;
|
||||
},
|
||||
}
|
||||
|
||||
@ -7,5 +7,8 @@ const html_output = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.empty();
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
return "[html]";
|
||||
},
|
||||
}
|
||||
|
||||
@ -12,5 +12,9 @@ const image_output = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find(".output_image").attr('src', "").hide();
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
return "<img src='"+data+"' height=100>"
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
@ -9,5 +9,13 @@ const json_output = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.empty();
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
json_string = JSON.stringify(data);
|
||||
if (json_string.length > 20) {
|
||||
return json_string.substring(0, 20) + "...";
|
||||
} else {
|
||||
return json_string;
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@ -21,5 +21,15 @@ const key_values = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find("tbody").empty();
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
let html_preview = "";
|
||||
for (const [key, value] of data.slice(0,3)) {
|
||||
html_preview += key + ": " + value + "<br>"
|
||||
}
|
||||
if (data.length > 3) {
|
||||
html_preview += "..."
|
||||
}
|
||||
return html_preview;
|
||||
},
|
||||
}
|
||||
|
||||
@ -22,6 +22,16 @@ const label_output = {
|
||||
}
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
if ("confidences" in data) {
|
||||
for (let confidence_set of data["confidences"]) {
|
||||
if (confidence_set["label"] == data["label"]) {
|
||||
return data["label"] + " (" + (100*confidence_set["confidence"]).toFixed(1) + "%)";
|
||||
}
|
||||
}
|
||||
}
|
||||
return data["label"];
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find(".output_class").empty();
|
||||
this.target.find(".confidence_intervals > div").empty();
|
||||
|
||||
@ -9,5 +9,11 @@ const textbox_output = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find(".output_text").empty();
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
if (data.length > 20) {
|
||||
return data.substring(0,20) + "...";
|
||||
}
|
||||
return data;
|
||||
},
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import gradio as gr
|
||||
import random
|
||||
|
||||
def calculator(num1, operation, num2):
|
||||
if operation == "add":
|
||||
@ -10,13 +11,15 @@ def calculator(num1, operation, num2):
|
||||
elif operation == "divide":
|
||||
return num1 / num2
|
||||
|
||||
|
||||
iface = gr.Interface(calculator,
|
||||
["number", gr.inputs.Radio(["add", "subtract", "multiply", "divide"]), "number"],
|
||||
"number",
|
||||
examples=[
|
||||
[5, "add", 3],
|
||||
[12, "divide", -2]
|
||||
[
|
||||
random.randint(1, 10),
|
||||
random.choice(["add", "subtract", "multiply", "divide"]),
|
||||
random.randint(1, 5),
|
||||
] for _ in range(10)
|
||||
]
|
||||
)
|
||||
if __name__ == "__main__":
|
||||
|
||||
@ -14,8 +14,7 @@ io = gr.Interface(image_mod,
|
||||
["images/cheetah1.jpg"],
|
||||
["images/cheetah2.jpg"],
|
||||
["images/lion.jpg"],
|
||||
],
|
||||
live=True)
|
||||
])
|
||||
|
||||
io.test_launch()
|
||||
|
||||
|
||||
@ -44,4 +44,4 @@ io = gr.Interface(
|
||||
]
|
||||
)
|
||||
|
||||
io.launch()
|
||||
io.launch(share=True)
|
||||
@ -28,6 +28,10 @@ io = gr.Interface(
|
||||
gr.inputs.Textbox(placeholder="Enter sentence here..."),
|
||||
[
|
||||
"highlight", "key_values", "html"
|
||||
],
|
||||
examples=[
|
||||
["What a beautiful morning for a walk!"],
|
||||
["It was the best of times, it was the worst of times."],
|
||||
]
|
||||
)
|
||||
|
||||
|
||||
@ -77,6 +77,11 @@ io = gr.Interface(
|
||||
gr.inputs.Radio(["S", "C", "Q"], type="index"),
|
||||
],
|
||||
"label",
|
||||
examples=[
|
||||
["first", True, 30, [], 50, "S"],
|
||||
["second", False, 40, ["Sibling", "Child"], 10, "Q"],
|
||||
["third", True, 30, ["Child"], 20, "S"],
|
||||
],
|
||||
interpretation="default"
|
||||
)
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
@ -1,3 +0,0 @@
|
||||
input_0,output_0
|
||||
input_2020-10-26-13-34-49.png,"{'confidences': [{'confidence': 1, 'label': '5'}, {'confidence': 0, 'label': '0'}, {'confidence': 0, 'label': '1'}], 'label': '5'}"
|
||||
input_2020-10-26-13-41-52.png,"{'confidences': [{'confidence': 1, 'label': '2'}, {'confidence': 0, 'label': '0'}, {'confidence': 0, 'label': '1'}], 'label': '2'}"
|
||||
|
@ -39,7 +39,7 @@ class InputComponent(Component):
|
||||
|
||||
def preprocess_example(self, x):
|
||||
"""
|
||||
Any preprocessing needed to be performed on an example.
|
||||
Any preprocessing needed to be performed on an example before being passed to the main function.
|
||||
"""
|
||||
return x
|
||||
|
||||
@ -129,6 +129,13 @@ class Textbox(InputComponent):
|
||||
else:
|
||||
raise ValueError("Unknown type: " + str(self.type) + ". Please choose from: 'str', 'number'.")
|
||||
|
||||
def preprocess_example(self, x):
|
||||
"""
|
||||
Returns:
|
||||
(str): Text representing function input
|
||||
"""
|
||||
return x
|
||||
|
||||
def interpret(self, separator=" ", replacement=None):
|
||||
"""
|
||||
Calculates interpretation score of characters in input by splitting input into tokens, then using a "leave one out" method to calculate the score of each token by removing each token and measuring the delta of the output value.
|
||||
@ -192,6 +199,13 @@ class Number(InputComponent):
|
||||
"number": {},
|
||||
}
|
||||
|
||||
def preprocess_example(self, x):
|
||||
"""
|
||||
Returns:
|
||||
(float): Number representing function input
|
||||
"""
|
||||
return x
|
||||
|
||||
def interpret(self, steps=3, delta=1, delta_type="percent"):
|
||||
"""
|
||||
Calculates interpretation scores of numeric values close to the input number.
|
||||
@ -266,6 +280,13 @@ class Slider(InputComponent):
|
||||
"slider": {},
|
||||
}
|
||||
|
||||
def preprocess_example(self, x):
|
||||
"""
|
||||
Returns:
|
||||
(float): Number representing function input
|
||||
"""
|
||||
return x
|
||||
|
||||
def interpret(self, steps=8):
|
||||
"""
|
||||
Calculates interpretation scores of numeric values ranging between the minimum and maximum values of the slider.
|
||||
@ -306,6 +327,13 @@ class Checkbox(InputComponent):
|
||||
"checkbox": {},
|
||||
}
|
||||
|
||||
def preprocess_example(self, x):
|
||||
"""
|
||||
Returns:
|
||||
(bool): Boolean representing function input
|
||||
"""
|
||||
return x
|
||||
|
||||
def interpret(self):
|
||||
"""
|
||||
Calculates interpretation score of the input by comparing the output against the output when the input is the inverse boolean value of x.
|
||||
@ -558,6 +586,9 @@ class Image(InputComponent):
|
||||
else:
|
||||
raise ValueError("Unknown type: " + str(self.type) + ". Please choose from: 'numpy', 'pil', 'file'.")
|
||||
|
||||
def preprocess_example(self, x):
|
||||
return processing_utils.encode_file_to_base64(x)
|
||||
|
||||
def rebuild(self, dir, data):
|
||||
"""
|
||||
Default rebuild method to decode a base64 image
|
||||
@ -653,6 +684,9 @@ class Audio(InputComponent):
|
||||
elif self.type == "mfcc":
|
||||
return processing_utils.generate_mfcc_features_from_audio_file(file_obj.name)
|
||||
|
||||
def preprocess_example(self, x):
|
||||
return processing_utils.encode_file_to_base64(x, type="audio")
|
||||
|
||||
def interpret(self, segments=8):
|
||||
"""
|
||||
Calculates interpretation score of audio subsections by splitting the audio into subsections, then using a "leave one out" method to calculate the score of each subsection by removing the subsection and measuring the delta of the output value.
|
||||
@ -725,12 +759,6 @@ class File(InputComponent):
|
||||
else:
|
||||
raise ValueError("Unknown type: " + str(self.type) + ". Please choose from: 'file', 'bytes'.")
|
||||
|
||||
def preprocess_example(self, x):
|
||||
return {
|
||||
"name": x,
|
||||
"size": os.path.getsize(x)
|
||||
}
|
||||
|
||||
|
||||
|
||||
class Dataframe(InputComponent):
|
||||
|
||||
@ -194,7 +194,7 @@ class Interface:
|
||||
for example_set in self.examples:
|
||||
processed_set = []
|
||||
for iface, example in zip(self.input_interfaces, example_set):
|
||||
processed_set.append(iface.preprocess_example(example))
|
||||
processed_set.append(example)
|
||||
processed_examples.append(processed_set)
|
||||
config["examples"] = processed_examples
|
||||
return config
|
||||
|
||||
@ -120,6 +120,23 @@ def predict():
|
||||
return jsonify(output)
|
||||
|
||||
|
||||
@app.route("/api/predict_examples/", methods=["POST"])
|
||||
def predict_examples():
|
||||
example_ids = request.json["data"]
|
||||
predictions_set = {}
|
||||
for example_id in example_ids:
|
||||
example_set = app.interface.examples[example_id]
|
||||
processed_example_set = [iface.preprocess_example(example)
|
||||
for iface, example in zip(app.interface.input_interfaces, example_set)]
|
||||
try:
|
||||
predictions, _ = app.interface.process(processed_example_set)
|
||||
except:
|
||||
continue
|
||||
predictions_set[example_id] = predictions
|
||||
output = {"data": predictions_set}
|
||||
return jsonify(output)
|
||||
|
||||
|
||||
@app.route("/api/flag/", methods=["POST"])
|
||||
def flag():
|
||||
flag_path = os.path.join(app.cwd, app.interface.flagging_dir)
|
||||
|
||||
@ -57,6 +57,9 @@ button.secondary {
|
||||
color: black;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
h4 {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.interpretation_legend {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
@ -71,6 +74,12 @@ button.secondary {
|
||||
.close_explain {
|
||||
cursor: pointer;
|
||||
}
|
||||
.examples > button {
|
||||
padding: 4px;
|
||||
border-radius: 2px;
|
||||
margin-right: 4px;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
.examples > table {
|
||||
border-collapse: collapse;
|
||||
font-family: monospace;
|
||||
@ -79,11 +88,13 @@ button.secondary {
|
||||
border-right: solid 4px whitesmoke;
|
||||
border-left: solid 4px whitesmoke;
|
||||
border-bottom: solid 4px whitesmoke;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.examples > table th {
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.examples_body > tr > td {
|
||||
padding: 8px;
|
||||
@ -96,6 +107,9 @@ button.secondary {
|
||||
.examples_body > tr:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
.examples_body > tr.current_example {
|
||||
background-color: #ffb573;
|
||||
}
|
||||
#credit {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
|
||||
@ -35,7 +35,47 @@ var io_master_template = {
|
||||
console.error(error);
|
||||
this.target.find(".loading_in_progress").hide();
|
||||
this.target.find(".loading_failed").show();
|
||||
})
|
||||
});
|
||||
},
|
||||
submit_examples: function() {
|
||||
let example_ids = [];
|
||||
if (this.loaded_examples == null) {
|
||||
this.loaded_examples = {};
|
||||
}
|
||||
for (let i = 0; i < this.config.examples.length; i++) {
|
||||
if (!(i in this.loaded_examples)) {
|
||||
example_ids.push(i);
|
||||
}
|
||||
}
|
||||
this.fn(example_ids, "predict_examples").then((output) => {
|
||||
output = output["data"];
|
||||
if (!this.has_loaded_examples) {
|
||||
this.has_loaded_examples = true;
|
||||
let html = ""
|
||||
for (let i = 0; i < this.output_interfaces.length; i++) {
|
||||
html += "<th>" + this.config.output_interfaces[i][1]["label"] + "</th>";
|
||||
}
|
||||
this.target.find(".examples > table > thead > tr").append(html);
|
||||
}
|
||||
for (let [example_id, output_values] of Object.entries(output)) {
|
||||
this.loaded_examples[example_id] = output_values;
|
||||
let html = ""
|
||||
for (let j = 0; j < output_values.length; j++) {
|
||||
let output_interface = this.output_interfaces[j];
|
||||
let example_preview = output_values[j];
|
||||
if (output_interface.load_example_preview) {
|
||||
example_preview = output_interface.load_example_preview(example_preview)
|
||||
}
|
||||
html += "<td>" + example_preview + "</td>";
|
||||
}
|
||||
this.target.find(".examples_body tr[row='" + example_id + "']").append(html);
|
||||
}
|
||||
this.has_loaded_examples = true;
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
this.target.find(".loading_in_progress").hide();
|
||||
this.target.find(".loading_failed").show();
|
||||
});
|
||||
},
|
||||
output: function(data, do_not_cache) {
|
||||
if (!do_not_cache) {
|
||||
|
||||
@ -43,242 +43,300 @@ function gradio(config, fn, target, example_file_path) {
|
||||
<ul></ul>
|
||||
</div>
|
||||
<div class="examples invisible">
|
||||
<h4>Examples <small>(click to load)</small></h4>
|
||||
<h4>Examples</small></h4>
|
||||
<button class="run_examples">Run All</button>
|
||||
<button class="load_prev">Load Previous <em>(CTRL + ←)</em></button>
|
||||
<button class="load_next">Load Next <em>(CTRL + →)</em></button>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
`);
|
||||
let io_master = Object.create(io_master_template);
|
||||
io_master.fn = fn
|
||||
io_master.target = target;
|
||||
io_master.config = config;
|
||||
io_master.example_file_path = example_file_path;
|
||||
|
||||
let input_to_object_map = {
|
||||
"csv" : {},
|
||||
"image" : image_input,
|
||||
"sketchpad" : sketchpad_input,
|
||||
"textbox" : textbox_input,
|
||||
"number" : number_input,
|
||||
"webcam" : webcam,
|
||||
"microphone" : microphone,
|
||||
"radio" : radio,
|
||||
"checkbox" : checkbox,
|
||||
"checkboxgroup" : checkbox_group,
|
||||
"slider" : slider,
|
||||
"dropdown" : dropdown,
|
||||
"audio" : audio_input,
|
||||
"file" : file_input,
|
||||
"dataframe" : dataframe_input,
|
||||
}
|
||||
let output_to_object_map = {
|
||||
"csv" : {},
|
||||
"image" : image_output,
|
||||
"label" : label_output,
|
||||
"keyvalues" : key_values,
|
||||
"textbox" : textbox_output,
|
||||
"highlightedtext": highlighted_text,
|
||||
"audio": audio_output,
|
||||
"json": json_output,
|
||||
"html": html_output,
|
||||
"file" : file_output,
|
||||
"dataframe" : dataframe_output,
|
||||
}
|
||||
let id_to_interface_map = {}
|
||||
|
||||
function set_interface_id(interface, id) {
|
||||
interface.id = id;
|
||||
id_to_interface_map[id] = interface;
|
||||
}
|
||||
if (config["title"]) {
|
||||
target.find(".title").text(config["title"]);
|
||||
}
|
||||
if (config["description"]) {
|
||||
target.find(".description").text(config["description"]);
|
||||
}
|
||||
if (config["share_url"]) {
|
||||
let share_url = config["share_url"];
|
||||
target.find(".share").removeClass("invisible");
|
||||
target.find(".share-link").text(share_url).attr("href", share_url);
|
||||
target.find(".share-copy").click(function() {
|
||||
copyToClipboard(share_url);
|
||||
target.find(".share-copy").text("Copied!");
|
||||
})
|
||||
};
|
||||
</div>`);
|
||||
let io_master = Object.create(io_master_template);
|
||||
io_master.fn = fn
|
||||
io_master.target = target;
|
||||
io_master.config = config;
|
||||
io_master.example_file_path = example_file_path;
|
||||
|
||||
let input_to_object_map = {
|
||||
"csv" : {},
|
||||
"image" : image_input,
|
||||
"sketchpad" : sketchpad_input,
|
||||
"textbox" : textbox_input,
|
||||
"number" : number_input,
|
||||
"webcam" : webcam,
|
||||
"microphone" : microphone,
|
||||
"radio" : radio,
|
||||
"checkbox" : checkbox,
|
||||
"checkboxgroup" : checkbox_group,
|
||||
"slider" : slider,
|
||||
"dropdown" : dropdown,
|
||||
"audio" : audio_input,
|
||||
"file" : file_input,
|
||||
"dataframe" : dataframe_input,
|
||||
}
|
||||
let output_to_object_map = {
|
||||
"csv" : {},
|
||||
"image" : image_output,
|
||||
"label" : label_output,
|
||||
"keyvalues" : key_values,
|
||||
"textbox" : textbox_output,
|
||||
"highlightedtext": highlighted_text,
|
||||
"audio": audio_output,
|
||||
"json": json_output,
|
||||
"html": html_output,
|
||||
"file" : file_output,
|
||||
"dataframe" : dataframe_output,
|
||||
}
|
||||
let id_to_interface_map = {}
|
||||
|
||||
_id = 0;
|
||||
let input_interfaces = [];
|
||||
let output_interfaces = [];
|
||||
for (let i = 0; i < config["input_interfaces"].length; i++) {
|
||||
input_interface_data = config["input_interfaces"][i];
|
||||
input_interface = Object.create(input_to_object_map[input_interface_data[0]]);
|
||||
if (input_interface_data[1]["label"]) {
|
||||
target.find(".input_interfaces").append(`
|
||||
<div class="panel_header">${input_interface_data[1]["label"]}</strong>
|
||||
`);
|
||||
}
|
||||
function set_interface_id(interface, id) {
|
||||
interface.id = id;
|
||||
id_to_interface_map[id] = interface;
|
||||
}
|
||||
if (config["title"]) {
|
||||
target.find(".title").text(config["title"]);
|
||||
}
|
||||
if (config["description"]) {
|
||||
target.find(".description").text(config["description"]);
|
||||
}
|
||||
if (config["share_url"]) {
|
||||
let share_url = config["share_url"];
|
||||
target.find(".share").removeClass("invisible");
|
||||
target.find(".share-link").text(share_url).attr("href", share_url);
|
||||
target.find(".share-copy").click(function() {
|
||||
copyToClipboard(share_url);
|
||||
target.find(".share-copy").text("Copied!");
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
_id = 0;
|
||||
let input_interfaces = [];
|
||||
let output_interfaces = [];
|
||||
for (let i = 0; i < config["input_interfaces"].length; i++) {
|
||||
input_interface_data = config["input_interfaces"][i];
|
||||
input_interface = Object.create(input_to_object_map[input_interface_data[0]]);
|
||||
if (input_interface_data[1]["label"]) {
|
||||
target.find(".input_interfaces").append(`
|
||||
<div class="input_interface interface" interface_id=${_id}>
|
||||
${input_interface.html}
|
||||
</div>
|
||||
<div class="panel_header">${input_interface_data[1]["label"]}</strong>
|
||||
`);
|
||||
input_interface.target = target.find(`.input_interface[interface_id=${_id}]`);
|
||||
set_interface_id(input_interface, _id);
|
||||
input_interface.io_master = io_master;
|
||||
input_interface.init(input_interface_data[1]);
|
||||
input_interfaces.push(input_interface);
|
||||
_id++;
|
||||
}
|
||||
for (let i = 0; i < config["output_interfaces"].length; i++) {
|
||||
if (i != 0 && i % (config["output_interfaces"].length / config.function_count) == 0) {
|
||||
target.find(".output_interfaces").append("<hr>");
|
||||
}
|
||||
output_interface_data = config["output_interfaces"][i];
|
||||
output_interface = Object.create(output_to_object_map[
|
||||
output_interface_data[0]]);
|
||||
if (output_interface_data[1]["label"]) {
|
||||
target.find(".output_interfaces").append(`
|
||||
<div class="panel_header">${output_interface_data[1]["label"]}</strong>
|
||||
`);
|
||||
}
|
||||
target.find(".output_interfaces").append(`
|
||||
<div class="output_interface interface" interface_id=${_id}>
|
||||
${output_interface.html}
|
||||
</div>
|
||||
`);
|
||||
target.find(".output_interfaces").append(`
|
||||
<div class="loading_time" interface="${i}"> </div>
|
||||
`);
|
||||
output_interface.target = target.find(`.output_interface[interface_id=${_id}]`);
|
||||
set_interface_id(output_interface, _id);
|
||||
output_interface.io_master = io_master;
|
||||
output_interface.init(output_interface_data[1]);
|
||||
output_interfaces.push(output_interface);
|
||||
_id++;
|
||||
target.find(".input_interfaces").append(`
|
||||
<div class="input_interface interface" interface_id=${_id}>
|
||||
${input_interface.html}
|
||||
</div>
|
||||
`);
|
||||
input_interface.target = target.find(`.input_interface[interface_id=${_id}]`);
|
||||
set_interface_id(input_interface, _id);
|
||||
input_interface.io_master = io_master;
|
||||
input_interface.init(input_interface_data[1]);
|
||||
input_interfaces.push(input_interface);
|
||||
_id++;
|
||||
}
|
||||
for (let i = 0; i < config["output_interfaces"].length; i++) {
|
||||
if (i != 0 && i % (config["output_interfaces"].length / config.function_count) == 0) {
|
||||
target.find(".output_interfaces").append("<hr>");
|
||||
}
|
||||
io_master.input_interfaces = input_interfaces;
|
||||
io_master.output_interfaces = output_interfaces;
|
||||
target.find(".clear").click(function() {
|
||||
for (let input_interface of input_interfaces) {
|
||||
input_interface.clear();
|
||||
output_interface_data = config["output_interfaces"][i];
|
||||
output_interface = Object.create(output_to_object_map[
|
||||
output_interface_data[0]]);
|
||||
if (output_interface_data[1]["label"]) {
|
||||
target.find(".output_interfaces").append(`
|
||||
<div class="panel_header">${output_interface_data[1]["label"]}</strong>
|
||||
`);
|
||||
}
|
||||
target.find(".output_interfaces").append(`
|
||||
<div class="output_interface interface" interface_id=${_id}>
|
||||
${output_interface.html}
|
||||
</div>
|
||||
`);
|
||||
target.find(".output_interfaces").append(`
|
||||
<div class="loading_time" interface="${i}"> </div>
|
||||
`);
|
||||
output_interface.target = target.find(`.output_interface[interface_id=${_id}]`);
|
||||
set_interface_id(output_interface, _id);
|
||||
output_interface.io_master = io_master;
|
||||
output_interface.init(output_interface_data[1]);
|
||||
output_interfaces.push(output_interface);
|
||||
_id++;
|
||||
}
|
||||
io_master.input_interfaces = input_interfaces;
|
||||
io_master.output_interfaces = output_interfaces;
|
||||
target.find(".clear").click(function() {
|
||||
for (let input_interface of input_interfaces) {
|
||||
input_interface.clear();
|
||||
}
|
||||
for (let output_interface of output_interfaces) {
|
||||
output_interface.clear();
|
||||
}
|
||||
target.find(".flag").removeClass("flagged");
|
||||
target.find(".flag").val("FLAG");
|
||||
target.find(".flag_message").empty();
|
||||
target.find(".loading").addClass("invisible");
|
||||
target.find(".loading_time").text("");
|
||||
target.find(".output_interfaces").css("opacity", 1);
|
||||
io_master.last_input = null;
|
||||
io_master.last_output = null;
|
||||
});
|
||||
|
||||
if (!config["allow_screenshot"] && !config["allow_flagging"] && !config["allow_interpretation"]) {
|
||||
target.find(".screenshot, .flag, .interpret").css("visibility", "hidden");
|
||||
} else {
|
||||
if (!config["allow_screenshot"]) {
|
||||
target.find(".screenshot").hide();
|
||||
}
|
||||
if (!config["allow_flagging"]) {
|
||||
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>";
|
||||
}
|
||||
for (let output_interface of output_interfaces) {
|
||||
output_interface.clear();
|
||||
target.find(".interpretation_explained ul").html(interpret_html);
|
||||
target.find(".interpretation_explained .close_explain").click(function() {
|
||||
target.find(".interpretation_explained").remove();
|
||||
});
|
||||
if (config["examples"]) {
|
||||
target.find(".examples").removeClass("invisible");
|
||||
let html = "<thead>"
|
||||
for (let i = 0; i < config["input_interfaces"].length; i++) {
|
||||
label = config["input_interfaces"][i][1]["label"];
|
||||
html += "<th>" + label + "</th>";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function load_example(example_id) {
|
||||
console.log(example_id)
|
||||
for (let [i, value] of config["examples"][example_id].entries()) {
|
||||
input_interfaces[i].load_example(value);
|
||||
};
|
||||
if (io_master.loaded_examples && example_id in io_master.loaded_examples) {
|
||||
io_master.output({"data": io_master.loaded_examples[example_id]});
|
||||
}
|
||||
$(".examples_body > tr").removeClass("current_example");
|
||||
$(".examples_body > tr[row='" + example_id + "'").addClass("current_example");
|
||||
io_master.current_example = example_id;
|
||||
}
|
||||
function next_example() {
|
||||
current_example = io_master.current_example;
|
||||
if (current_example == null) {
|
||||
current_example = 0;
|
||||
} else {
|
||||
current_example = (current_example + 1 + config.examples.length) % config.examples.length;
|
||||
}
|
||||
load_example(current_example);
|
||||
}
|
||||
function prev_example() {
|
||||
current_example = io_master.current_example;
|
||||
if (current_example === null) {
|
||||
current_example = 0;
|
||||
} else {
|
||||
current_example = (current_example - 1 + config.examples.length) % config.examples.length;
|
||||
}
|
||||
load_example(current_example);
|
||||
}
|
||||
if (config["examples"]) {
|
||||
target.find(".examples").removeClass("invisible");
|
||||
let html = "<thead>"
|
||||
for (let i = 0; i < config["input_interfaces"].length; i++) {
|
||||
label = config["input_interfaces"][i][1]["label"];
|
||||
html += "<th>" + label + "</th>";
|
||||
}
|
||||
html += "</thead>";
|
||||
html += "<tbody class='examples_body'>";
|
||||
for (let [i, example] of config["examples"].entries()) {
|
||||
html += "<tr row="+i+">";
|
||||
for (let [j, col] of example.entries()) {
|
||||
let new_col = JSON.parse(JSON.stringify(col))
|
||||
if (input_interfaces[j].load_example_preview) {
|
||||
new_col = input_interfaces[j].load_example_preview(new_col);
|
||||
}
|
||||
html += "<td>" + new_col + "</td>";
|
||||
}
|
||||
html += "</tr>";
|
||||
}
|
||||
html += "</tbody>";
|
||||
target.find(".examples table").html(html);
|
||||
target.find(".examples_body > tr").click(function() {
|
||||
let example_id = parseInt($(this).attr("row"));
|
||||
load_example(example_id);
|
||||
})
|
||||
target.find(".load_prev").click(prev_example);
|
||||
target.find(".load_next").click(next_example);
|
||||
$("body").keydown(function(e) {
|
||||
if ($(document.activeElement).attr("type") == "text" || $(document.activeElement).attr("type") == "textarea") {
|
||||
return;
|
||||
}
|
||||
e = e || window.event;
|
||||
var keyCode = e.keyCode || e.which,
|
||||
arrow = {left: 37, up: 38, right: 39, down: 40 };
|
||||
if (e.ctrlKey) {
|
||||
if (keyCode == arrow.left) {
|
||||
prev_example();
|
||||
} else if (keyCode == arrow.right) {
|
||||
next_example();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
target.find(".screenshot").click(function() {
|
||||
$(".screenshot").hide();
|
||||
$(".screenshot_logo").show();
|
||||
html2canvas(target[0], {
|
||||
scrollX: 0,
|
||||
scrollY: -window.scrollY
|
||||
}).then(function(canvas) {
|
||||
saveAs(canvas.toDataURL(), 'screenshot.png');
|
||||
$(".screenshot").show();
|
||||
$(".screenshot_logo").hide();
|
||||
});
|
||||
});
|
||||
if (config.live) {
|
||||
io_master.gather();
|
||||
} else {
|
||||
target.find(".submit").show();
|
||||
target.find(".submit").click(function() {
|
||||
io_master.gather();
|
||||
target.find(".flag").removeClass("flagged");
|
||||
target.find(".flag").val("FLAG");
|
||||
target.find(".flag_message").empty();
|
||||
target.find(".loading").addClass("invisible");
|
||||
target.find(".loading_time").text("");
|
||||
target.find(".output_interfaces").css("opacity", 1);
|
||||
io_master.last_input = null;
|
||||
io_master.last_output = null;
|
||||
});
|
||||
|
||||
if (!config["allow_screenshot"] && !config["allow_flagging"] && !config["allow_interpretation"]) {
|
||||
target.find(".screenshot, .flag, .interpret").css("visibility", "hidden");
|
||||
} else {
|
||||
if (!config["allow_screenshot"]) {
|
||||
target.find(".screenshot").hide();
|
||||
}
|
||||
if (!config["allow_flagging"]) {
|
||||
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();
|
||||
});
|
||||
if (config["examples"]) {
|
||||
target.find(".examples").removeClass("invisible");
|
||||
let html = "<thead>"
|
||||
for (let i = 0; i < config["input_interfaces"].length; i++) {
|
||||
label = config["input_interfaces"][i][1]["label"];
|
||||
html += "<th>" + label + "</th>";
|
||||
}
|
||||
html += "</thead>";
|
||||
html += "<tbody class='examples_body'>";
|
||||
for (let [i, example] of config["examples"].entries()) {
|
||||
html += "<tr row="+i+">";
|
||||
for (let [j, col] of example.entries()) {
|
||||
let new_col = JSON.parse(JSON.stringify(col))
|
||||
if (input_interfaces[j].load_example_preview) {
|
||||
new_col = input_interfaces[j].load_example_preview(new_col);
|
||||
}
|
||||
html += "<td>" + new_col + "</td>";
|
||||
}
|
||||
html += "</tr>";
|
||||
}
|
||||
html += "</tbody>";
|
||||
target.find(".examples table").html(html);
|
||||
target.find(".examples_body > tr").click(function() {
|
||||
let example_id = parseInt($(this).attr("row"));
|
||||
for (let [i, value] of config["examples"][example_id].entries()) {
|
||||
input_interfaces[i].load_example(value);
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
target.find(".screenshot").click(function() {
|
||||
$(".screenshot").hide();
|
||||
$(".screenshot_logo").show();
|
||||
html2canvas(target[0], {
|
||||
scrollX: 0,
|
||||
scrollY: -window.scrollY
|
||||
}).then(function(canvas) {
|
||||
saveAs(canvas.toDataURL(), 'screenshot.png');
|
||||
$(".screenshot").show();
|
||||
$(".screenshot_logo").hide();
|
||||
});
|
||||
});
|
||||
if (config.live) {
|
||||
io_master.gather();
|
||||
} else {
|
||||
target.find(".submit").show();
|
||||
target.find(".submit").click(function() {
|
||||
io_master.gather();
|
||||
target.find(".flag").removeClass("flagged");
|
||||
target.find(".flag").val("FLAG");
|
||||
})
|
||||
}
|
||||
if (!config.show_input) {
|
||||
target.find(".input_panel").hide();
|
||||
}
|
||||
|
||||
target.find(".flag").click(function() {
|
||||
if (io_master.last_output) {
|
||||
target.find(".flag").addClass("flagged");
|
||||
target.find(".flag").val("FLAGGED");
|
||||
io_master.flag();
|
||||
}
|
||||
})
|
||||
target.find(".interpret").click(function() {
|
||||
target.find(".interpretation_explained").removeClass("invisible");
|
||||
if (io_master.last_output) {
|
||||
io_master.interpret();
|
||||
}
|
||||
});
|
||||
$(".input_panel").on("mouseover", ".alternate", function() {
|
||||
let interface_index = $(this).closest(".interface").attr("interface_id");
|
||||
let alternate_index = $(this).attr("alternate_index");
|
||||
io_master.alternative_interpret(interface_index, alternate_index);
|
||||
})
|
||||
$(".input_panel").on("mouseout", ".alternate", function() {
|
||||
io_master.alternative_interpret(false);
|
||||
})
|
||||
}
|
||||
if (!config.show_input) {
|
||||
target.find(".input_panel").hide();
|
||||
}
|
||||
|
||||
target.find(".flag").click(function() {
|
||||
if (io_master.last_output) {
|
||||
target.find(".flag").addClass("flagged");
|
||||
target.find(".flag").val("FLAGGED");
|
||||
io_master.flag();
|
||||
}
|
||||
})
|
||||
target.find(".interpret").click(function() {
|
||||
target.find(".interpretation_explained").removeClass("invisible");
|
||||
if (io_master.last_output) {
|
||||
io_master.interpret();
|
||||
}
|
||||
});
|
||||
target.find(".run_examples").click(function() {
|
||||
io_master.submit_examples();
|
||||
})
|
||||
|
||||
return io_master;
|
||||
$(".input_panel").on("mouseover", ".alternate", function() {
|
||||
let interface_index = $(this).closest(".interface").attr("interface_id");
|
||||
let alternate_index = $(this).attr("alternate_index");
|
||||
io_master.alternative_interpret(interface_index, alternate_index);
|
||||
})
|
||||
$(".input_panel").on("mouseout", ".alternate", function() {
|
||||
io_master.alternative_interpret(false);
|
||||
})
|
||||
|
||||
return io_master;
|
||||
}
|
||||
function gradio_url(config, url, target, example_file_path) {
|
||||
return gradio(config, function(data, action) {
|
||||
@ -308,4 +366,4 @@ function saveAs(uri, filename) {
|
||||
} else {
|
||||
window.open(uri);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,7 +41,9 @@ const file_input = {
|
||||
io.target.find(".upload_zone").hide();
|
||||
io.target.find(".file_display").removeClass("hide");
|
||||
io.target.find(".file_name").text(io.file_data.name);
|
||||
io.target.find(".file_size").text(prettyBytes(io.file_data.size));
|
||||
if (io.file_data.size !== null) {
|
||||
io.target.find(".file_size").text(prettyBytes(io.file_data.size));
|
||||
}
|
||||
},
|
||||
load_preview_from_files: function(files) {
|
||||
if (!files.length || !window.FileReader) {
|
||||
@ -60,15 +62,12 @@ const file_input = {
|
||||
io.load_preview()
|
||||
};
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
return data["name"] + " <em>(" + prettyBytes(data["size"]) + ")</em>";
|
||||
},
|
||||
load_example: function(example_data) {
|
||||
var io = this;
|
||||
io.file_data = {
|
||||
"name": example_data["name"],
|
||||
"name": example_data,
|
||||
"data": null,
|
||||
"size": example_data["size"],
|
||||
"size": null,
|
||||
"is_local_example": true
|
||||
};
|
||||
io.load_preview();
|
||||
|
||||
@ -43,6 +43,12 @@ const textbox_input = {
|
||||
this.target.find(".output_text").html(html);
|
||||
},
|
||||
interpretation_logic: "Highlights the output contribution of substrings of input.",
|
||||
load_example_preview: function(data) {
|
||||
if (data.length > 20) {
|
||||
return data.substring(0,20) + "...";
|
||||
}
|
||||
return data;
|
||||
},
|
||||
load_example: function(data) {
|
||||
this.target.find(".input_text").val(data);
|
||||
}
|
||||
|
||||
@ -30,5 +30,8 @@ const audio_output = {
|
||||
if (this.wavesurfer) {
|
||||
this.wavesurfer.stop();
|
||||
}
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
return "[audio]";
|
||||
},
|
||||
}
|
||||
|
||||
@ -23,5 +23,30 @@ const dataframe_output = {
|
||||
clear: function() {
|
||||
jexcel.destroy(this.target.find(".dataframe")[0]);
|
||||
this.table = null;
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
data = JSON.parse(JSON.stringify(data["data"]))
|
||||
let data_copy = [];
|
||||
for (let row of data.splice(0,3)) {
|
||||
new_row = row.splice(0,3)
|
||||
if (row.length > 3) {
|
||||
new_row.push("...");
|
||||
}
|
||||
data_copy.push(new_row);
|
||||
}
|
||||
if (data.length > 3) {
|
||||
new_row = Array(data_copy[0].length).fill("...");
|
||||
data_copy.push(new_row);
|
||||
}
|
||||
let html = "<table><tbody>"
|
||||
for (let row of data_copy) {
|
||||
html += "<tr>";
|
||||
for (let cell of row) {
|
||||
html += "<td>" + cell + "</td>";
|
||||
}
|
||||
html += "</tr>";
|
||||
}
|
||||
html += "</tbody></table>";
|
||||
return html;
|
||||
},
|
||||
}
|
||||
|
||||
@ -24,5 +24,8 @@ const file_output = {
|
||||
this.target.find(".interface_mini_box")
|
||||
.removeAttr("href")
|
||||
.removeAttr("download");
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
return data.name;
|
||||
},
|
||||
}
|
||||
|
||||
@ -86,5 +86,15 @@ const highlighted_text = {
|
||||
clear: function() {
|
||||
this.target.find(".output_text").empty();
|
||||
this.target.find(".highlight_legend div").addClass("invisible");
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
let output_string = "";
|
||||
for (const [text, type] of data) {
|
||||
output_string += text;
|
||||
}
|
||||
if (output_string.length > 20) {
|
||||
return output_string.substring(0,20) + "...";
|
||||
}
|
||||
return data;
|
||||
},
|
||||
}
|
||||
|
||||
@ -7,5 +7,8 @@ const html_output = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.empty();
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
return "[html]";
|
||||
},
|
||||
}
|
||||
|
||||
@ -12,5 +12,9 @@ const image_output = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find(".output_image").attr('src', "").hide();
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
return "<img src='"+data+"' height=100>"
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
@ -9,5 +9,13 @@ const json_output = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.empty();
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
json_string = JSON.stringify(data);
|
||||
if (json_string.length > 20) {
|
||||
return json_string.substring(0, 20) + "...";
|
||||
} else {
|
||||
return json_string;
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@ -21,5 +21,15 @@ const key_values = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find("tbody").empty();
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
let html_preview = "";
|
||||
for (const [key, value] of data.slice(0,3)) {
|
||||
html_preview += key + ": " + value + "<br>"
|
||||
}
|
||||
if (data.length > 3) {
|
||||
html_preview += "..."
|
||||
}
|
||||
return html_preview;
|
||||
},
|
||||
}
|
||||
|
||||
@ -22,6 +22,16 @@ const label_output = {
|
||||
}
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
if ("confidences" in data) {
|
||||
for (let confidence_set of data["confidences"]) {
|
||||
if (confidence_set["label"] == data["label"]) {
|
||||
return data["label"] + " (" + (100*confidence_set["confidence"]).toFixed(1) + "%)";
|
||||
}
|
||||
}
|
||||
}
|
||||
return data["label"];
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find(".output_class").empty();
|
||||
this.target.find(".confidence_intervals > div").empty();
|
||||
|
||||
@ -9,5 +9,11 @@ const textbox_output = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find(".output_text").empty();
|
||||
}
|
||||
},
|
||||
load_example_preview: function(data) {
|
||||
if (data.length > 20) {
|
||||
return data.substring(0,20) + "...";
|
||||
}
|
||||
return data;
|
||||
},
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user