mirror of
https://github.com/gradio-app/gradio.git
synced 2025-01-18 10:44:33 +08:00
exmamples work
This commit is contained in:
Ali Abid
parent
fd9e8d6eee
commit
baef434ffe
@ -80,3 +80,14 @@ button.secondary {
|
||||
#featured_history img {
|
||||
height: 60px;
|
||||
}
|
||||
#examples table {
|
||||
min-width: 400px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
#examples td {
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#examples tbody tr:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
@ -10,5 +10,12 @@ const checkbox = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find("input").prop("checked", false);
|
||||
},
|
||||
load_example: function(data) {
|
||||
if (data) {
|
||||
this.target.find("input").prop("checked", true);
|
||||
} else {
|
||||
this.target.find("input").prop("checked", false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,8 +6,9 @@ const checkbox_group = {
|
||||
html = "<div class='checkbox_group'>"
|
||||
for ([index, choice] of opts.choices.entries()) {
|
||||
html += `
|
||||
<input id="${this.id}_${index}" type="checkbox" name="${this.id}" value="${index}">
|
||||
<label for="${this.id}_${index}">${choice}</label>`;
|
||||
<label for="${this.id}_${index}">${choice}
|
||||
<input id="${this.id}_${index}" type="checkbox" name="${this.id}" value="${index}">
|
||||
</label>`;
|
||||
}
|
||||
html += "</div>"
|
||||
this.target.html(html);
|
||||
@ -22,5 +23,17 @@ const checkbox_group = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find("input").prop("checked", false);
|
||||
},
|
||||
load_example: function(data) {
|
||||
for (let [i, choice] of this.choices.entries()) {
|
||||
let child = i + 1;
|
||||
let checkbox = this.target.find("label:nth-child("+child+") input");
|
||||
console.log(data, choice, child)
|
||||
if (data.includes(choice)) {
|
||||
checkbox.prop("checked", true);
|
||||
} else {
|
||||
checkbox.prop("checked", false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,5 +18,9 @@ const dropdown = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find("option").prop("selected", false);
|
||||
},
|
||||
load_example: function(data) {
|
||||
let child = this.choices.indexOf(data) + 1;
|
||||
this.target.find("option:nth-child(" + child + ")").prop("selected", true);
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,5 +20,9 @@ const radio = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find("input").prop("checked", false);
|
||||
},
|
||||
load_example: function(data) {
|
||||
let child = this.choices.indexOf(data) + 1;
|
||||
this.target.find("input:nth-child("+child+")").prop("checked", true);
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,8 +6,9 @@ const slider = {
|
||||
<span class="max"></span>:
|
||||
<div class="value"></div>
|
||||
</div>`,
|
||||
init: function(opts) {this
|
||||
init: function(opts) {
|
||||
let io = this;
|
||||
this.minimum = opts.minimum;
|
||||
this.target.css("height", "auto");
|
||||
this.target.find(".min").text(opts.minimum);
|
||||
this.target.find(".max").text(opts.maximum);
|
||||
@ -32,6 +33,10 @@ const slider = {
|
||||
this.io_master.input(this.id, parseFloat(value));
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find("input").prop("checked", false);
|
||||
this.target.find("input").val(this.minimum);
|
||||
},
|
||||
load_example: function(data) {
|
||||
this.target.find("input").val(data);
|
||||
this.target.find(".value").text(data);
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,11 +33,7 @@ const textbox_input = {
|
||||
this.target.find(".input_text_saliency").hide();
|
||||
this.target.find(".input_text").show();
|
||||
},
|
||||
renderFeatured: function(data) {
|
||||
return data;
|
||||
},
|
||||
loadFeatured: function(data) {
|
||||
this.clear();
|
||||
this.target.find(".input_text").val(data);
|
||||
load_example: function(data) {
|
||||
this.target.find(".input_text").val(data);
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
<script src="../static/js/gradio.js"></script>
|
||||
<script>
|
||||
$.getJSON("static/config.json", function(config) {
|
||||
gradio(config, function(data) {
|
||||
io = gradio(config, function(data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
$.ajax({type: "POST",
|
||||
url: "/api/predict/",
|
||||
@ -115,8 +115,8 @@
|
||||
}
|
||||
html += "</thead>";
|
||||
html += "<tbody>";
|
||||
for (let example of config["examples"]) {
|
||||
html += "<tr>";
|
||||
for (let [i, example] of config["examples"].entries()) {
|
||||
html += "<tr row="+i+">";
|
||||
for (let col of example) {
|
||||
html += "<td>" + col + "</td>";
|
||||
}
|
||||
@ -124,6 +124,12 @@
|
||||
}
|
||||
html += "</tbody>";
|
||||
$("#examples table").html(html);
|
||||
$("#examples tr").click(function() {
|
||||
let example_id = parseInt($(this).attr("row"));
|
||||
for (let [i, value] of config["examples"][example_id].entries()) {
|
||||
io.input_interfaces[i].load_example(value);
|
||||
}
|
||||
})
|
||||
};
|
||||
});
|
||||
const copyToClipboard = str => {
|
||||
|
||||
BIN
dist/gradio-0.9.3-py3.7.egg
vendored
Normal file
BIN
dist/gradio-0.9.3-py3.7.egg
vendored
Normal file
Binary file not shown.
@ -55,7 +55,6 @@ gradio/static/js/gradio.js
|
||||
gradio/static/js/utils.js
|
||||
gradio/static/js/interfaces/input/checkbox.js
|
||||
gradio/static/js/interfaces/input/checkbox_group.js
|
||||
gradio/static/js/interfaces/input/csv.js
|
||||
gradio/static/js/interfaces/input/dropdown.js
|
||||
gradio/static/js/interfaces/input/image.js
|
||||
gradio/static/js/interfaces/input/microphone.js
|
||||
|
||||
@ -80,3 +80,14 @@ button.secondary {
|
||||
#featured_history img {
|
||||
height: 60px;
|
||||
}
|
||||
#examples table {
|
||||
min-width: 400px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
#examples td {
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#examples tbody tr:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
@ -10,5 +10,12 @@ const checkbox = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find("input").prop("checked", false);
|
||||
},
|
||||
load_example: function(data) {
|
||||
if (data) {
|
||||
this.target.find("input").prop("checked", true);
|
||||
} else {
|
||||
this.target.find("input").prop("checked", false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,8 +6,9 @@ const checkbox_group = {
|
||||
html = "<div class='checkbox_group'>"
|
||||
for ([index, choice] of opts.choices.entries()) {
|
||||
html += `
|
||||
<input id="${this.id}_${index}" type="checkbox" name="${this.id}" value="${index}">
|
||||
<label for="${this.id}_${index}">${choice}</label>`;
|
||||
<label for="${this.id}_${index}">${choice}
|
||||
<input id="${this.id}_${index}" type="checkbox" name="${this.id}" value="${index}">
|
||||
</label>`;
|
||||
}
|
||||
html += "</div>"
|
||||
this.target.html(html);
|
||||
@ -22,5 +23,17 @@ const checkbox_group = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find("input").prop("checked", false);
|
||||
},
|
||||
load_example: function(data) {
|
||||
for (let [i, choice] of this.choices.entries()) {
|
||||
let child = i + 1;
|
||||
let checkbox = this.target.find("label:nth-child("+child+") input");
|
||||
console.log(data, choice, child)
|
||||
if (data.includes(choice)) {
|
||||
checkbox.prop("checked", true);
|
||||
} else {
|
||||
checkbox.prop("checked", false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
// var MAX_PREVIEW_ROWS = 100
|
||||
//
|
||||
// $('body').on('click', ".input_csv.drop_mode", function (e) {
|
||||
// $(this).parent().find(".hidden_upload").click();
|
||||
// })
|
||||
//
|
||||
// $('body').on('drag dragstart dragend dragover dragenter dragleave drop', ".input_csv.drop_mode", function(e) {
|
||||
// e.preventDefault();
|
||||
// e.stopPropagation();
|
||||
// })
|
||||
//
|
||||
// function loadTableFromFiles(files) {
|
||||
// Papa.parse(files[0], {
|
||||
// complete: function(results) {
|
||||
// $(".input_csv").hide()
|
||||
// $(".input_csv").removeClass("drop_mode")
|
||||
// var data_array = results.data
|
||||
// var table_html = ""
|
||||
// for (var i = 0; i < data_array.length && i <= MAX_PREVIEW_ROWS; i++) {
|
||||
// row = data_array[i]
|
||||
// if (i == 0) {
|
||||
// table_html += "<tr class='header'>"
|
||||
// } else {
|
||||
// table_html += "<tr>"
|
||||
// }
|
||||
// for (var c = 0; c < row.length; c++) {
|
||||
// table_html += "<td>" + row[c] + "</td>"
|
||||
// }
|
||||
// table_html += "</tr>"
|
||||
// }
|
||||
// table_html += ""
|
||||
// $(".csv_preview").html(table_html)
|
||||
// $(".table_holder").show()
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
//
|
||||
// $(".input_csv").on('drop', function(e) {
|
||||
// files = e.originalEvent.dataTransfer.files;
|
||||
// loadTableFromFiles(files)
|
||||
// });
|
||||
//
|
||||
// $(".hidden_upload").on("change", function() {
|
||||
// var files = !!this.files ? this.files : []
|
||||
// if (!files.length || !window.FileReader) {
|
||||
// return
|
||||
// }
|
||||
// loadTableFromFiles(files)
|
||||
// })
|
||||
//
|
||||
// $('body').on('click', '.clear', function(e) {
|
||||
// $(".hidden_upload").prop("value", "")
|
||||
// $(".input_csv").show()
|
||||
// $(".input_csv").addClass("drop_mode")
|
||||
// $(".table_holder").hide()
|
||||
// })
|
||||
// $('body').on('click', '.submit', function(e) {
|
||||
// loadStart();
|
||||
// })
|
||||
@ -18,5 +18,9 @@ const dropdown = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find("option").prop("selected", false);
|
||||
},
|
||||
load_example: function(data) {
|
||||
let child = this.choices.indexOf(data) + 1;
|
||||
this.target.find("option:nth-child(" + child + ")").prop("selected", true);
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,5 +20,9 @@ const radio = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find("input").prop("checked", false);
|
||||
},
|
||||
load_example: function(data) {
|
||||
let child = this.choices.indexOf(data) + 1;
|
||||
this.target.find("input:nth-child("+child+")").prop("checked", true);
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,8 +6,9 @@ const slider = {
|
||||
<span class="max"></span>:
|
||||
<div class="value"></div>
|
||||
</div>`,
|
||||
init: function(opts) {this
|
||||
init: function(opts) {
|
||||
let io = this;
|
||||
this.minimum = opts.minimum;
|
||||
this.target.css("height", "auto");
|
||||
this.target.find(".min").text(opts.minimum);
|
||||
this.target.find(".max").text(opts.maximum);
|
||||
@ -32,6 +33,10 @@ const slider = {
|
||||
this.io_master.input(this.id, parseFloat(value));
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find("input").prop("checked", false);
|
||||
this.target.find("input").val(this.minimum);
|
||||
},
|
||||
load_example: function(data) {
|
||||
this.target.find("input").val(data);
|
||||
this.target.find(".value").text(data);
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,11 +33,7 @@ const textbox_input = {
|
||||
this.target.find(".input_text_saliency").hide();
|
||||
this.target.find(".input_text").show();
|
||||
},
|
||||
renderFeatured: function(data) {
|
||||
return data;
|
||||
},
|
||||
loadFeatured: function(data) {
|
||||
this.clear();
|
||||
this.target.find(".input_text").val(data);
|
||||
load_example: function(data) {
|
||||
this.target.find(".input_text").val(data);
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
<script src="../static/js/gradio.js"></script>
|
||||
<script>
|
||||
$.getJSON("static/config.json", function(config) {
|
||||
gradio(config, function(data) {
|
||||
io = gradio(config, function(data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
$.ajax({type: "POST",
|
||||
url: "/api/predict/",
|
||||
@ -115,8 +115,8 @@
|
||||
}
|
||||
html += "</thead>";
|
||||
html += "<tbody>";
|
||||
for (let example of config["examples"]) {
|
||||
html += "<tr>";
|
||||
for (let [i, example] of config["examples"].entries()) {
|
||||
html += "<tr row="+i+">";
|
||||
for (let col of example) {
|
||||
html += "<td>" + col + "</td>";
|
||||
}
|
||||
@ -124,6 +124,12 @@
|
||||
}
|
||||
html += "</tbody>";
|
||||
$("#examples table").html(html);
|
||||
$("#examples tr").click(function() {
|
||||
let example_id = parseInt($(this).attr("row"));
|
||||
for (let [i, value] of config["examples"][example_id].entries()) {
|
||||
io.input_interfaces[i].load_example(value);
|
||||
}
|
||||
})
|
||||
};
|
||||
});
|
||||
const copyToClipboard = str => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user