mirror of
https://github.com/gradio-app/gradio.git
synced 2025-02-17 11:29:58 +08:00
ui changes
This commit is contained in:
Ali Abid
parent
35d0e607a8
commit
24a17fc5dd
@ -1,36 +1,39 @@
|
||||
.panels {
|
||||
margin-top: -24px;
|
||||
margin-left: -24px;
|
||||
margin-left: -16px;
|
||||
}
|
||||
.panel {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
margin-left: 16px;
|
||||
min-width: 300px;
|
||||
flex: 1 1 0;
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.panel_header, .interface {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
.panel_header {
|
||||
text-transform: uppercase;
|
||||
font-family: Arial;
|
||||
color: #888;
|
||||
padding: 6px 6px 0;
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.input_interfaces, .output_interfaces {
|
||||
margin-bottom: 16px;
|
||||
background-color: whitesmoke;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.interface {
|
||||
height: 360px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
.interface:not(*:last-child) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.output_panel {
|
||||
position: relative;
|
||||
}
|
||||
@ -47,69 +50,42 @@
|
||||
}
|
||||
.panel_buttons {
|
||||
display: flex;
|
||||
margin-left: -8px;
|
||||
margin-left: -16px;
|
||||
}
|
||||
.panel_buttons > * {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.submit {
|
||||
input.submit {
|
||||
display: none;
|
||||
}
|
||||
.submit, .clear, .panel_button {
|
||||
background-color: whitesmoke !important;
|
||||
input.panel_button {
|
||||
background-color: whitesmoke;
|
||||
flex-grow: 1;
|
||||
padding: 8px !important;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
border: 0 none !important;
|
||||
border: 0 none;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s ease;
|
||||
margin-left: 16px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.submit {
|
||||
background-color: #EEA45D !important;
|
||||
color: white !important;
|
||||
input.submit {
|
||||
background-color: #e67e22;
|
||||
color: white;
|
||||
}
|
||||
.submit, .flag_message {
|
||||
flex-grow: 2 !important;
|
||||
margin-right: 8px;
|
||||
.panel_button:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
.flag_message {
|
||||
padding: 8px !important;
|
||||
background-color: whitesmoke !important;
|
||||
input.submit:hover {
|
||||
background-color: #f39c12;
|
||||
}
|
||||
|
||||
.upload_zone {
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
color: #BBB;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
line-height: 1.5em;
|
||||
flex-flow: column;
|
||||
}
|
||||
.upload_zone img {
|
||||
height: 120px;
|
||||
|
||||
}
|
||||
.drop_zone {
|
||||
border: dashed 8px #DDD;
|
||||
}
|
||||
.edit_holder {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.interface_button {
|
||||
padding: 6px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
label {
|
||||
transition: background-color 0.2s ease;
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
/* label:hover {
|
||||
background-color: lightgray;
|
||||
} */
|
||||
.overlay {
|
||||
position: absolute;
|
||||
height: 100vh;
|
||||
@ -120,9 +96,6 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.flag.flagged {
|
||||
background-color: pink !important;
|
||||
}
|
||||
.loading {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@ -1,11 +1,42 @@
|
||||
.checkbox_group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
margin-top: -12px;
|
||||
margin-left: -16px;
|
||||
}
|
||||
.checkbox_group input, .checkbox {
|
||||
margin: 0px 4px 0px 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.checkbox_group label {
|
||||
margin-right: 16px;
|
||||
margin-top: 12px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.ui-icon-background, .ui-state-active .ui-icon-background {
|
||||
border: #f39c12;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.ui-visual-focus {
|
||||
box-shadow: 0 0 3px 1px rgb(241, 171, 41);
|
||||
}
|
||||
.ui-button {
|
||||
padding: 0.25em 0.6em;
|
||||
}
|
||||
.ui-widget {
|
||||
font-family: inherit;
|
||||
}
|
||||
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
|
||||
border: 1px solid lightgray;
|
||||
background: lightgray;
|
||||
}
|
||||
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
|
||||
border: 1px solid #e67e22 !important;
|
||||
background: #e67e22 !important;
|
||||
font-weight: normal;
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui-button {
|
||||
outline: none;
|
||||
}
|
||||
@ -15,7 +15,7 @@
|
||||
border-bottom: solid 1px black;
|
||||
}
|
||||
.csv_preview tr.header td {
|
||||
background-color: #EEA45D;
|
||||
background-color: #e67e22;
|
||||
font-weight: bold;
|
||||
}
|
||||
.csv_preview td {
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
select.dropdown {
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
padding: 4px;
|
||||
font-size: 18px;
|
||||
border: solid 1px lightgray;
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
}
|
||||
.saliency > div > div {
|
||||
flex-grow: 1;
|
||||
background-color: #EEA45D;
|
||||
background-color: #e67e22;
|
||||
}
|
||||
.image_preview {
|
||||
max-width: 100%;
|
||||
@ -66,3 +66,35 @@
|
||||
margin-left: 10px !important;
|
||||
font-family: 'Open Sans', sans-serif !important;
|
||||
}
|
||||
.upload_zone {
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
color: #BBB;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
line-height: 1.5em;
|
||||
flex-flow: column;
|
||||
}
|
||||
.upload_zone img {
|
||||
height: 120px;
|
||||
}
|
||||
.drop_zone {
|
||||
border: dashed 8px #DDD;
|
||||
}
|
||||
.edit_holder {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.interface_button {
|
||||
padding: 6px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -1,11 +1,15 @@
|
||||
.radio_group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
margin-top: -12px;
|
||||
margin-left: -16px;
|
||||
}
|
||||
.radio_group input {
|
||||
margin: 0px 4px 0px 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.radio_group label {
|
||||
margin-right: 16px;
|
||||
margin-top: 12px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
@ -1,9 +1,15 @@
|
||||
.slider_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.slider_container .slider {
|
||||
margin: 0 24px;
|
||||
}
|
||||
.slider_container .value {
|
||||
.slider_container .ui-slider-handle {
|
||||
width: 3em !important;
|
||||
height: 1.6em !important;
|
||||
top: 50% !important;
|
||||
margin-top: -.8em;
|
||||
margin-left: -1.5em !important;
|
||||
text-align: center;
|
||||
line-height: 1.6em;
|
||||
cursor: pointer !important;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
outline: none !important;
|
||||
}
|
||||
@ -1,11 +1,12 @@
|
||||
.input_text, .input_text_saliency {
|
||||
.input_text {
|
||||
resize: none;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
border: solid 1px black;
|
||||
border: solid 1px lightgray;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
font-family: monospace;
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
outline: none;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
border: solid 1px black;
|
||||
border: solid 1px lightgray;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
min-height: 30px;
|
||||
|
||||
@ -1,32 +1,30 @@
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
margin: 0;
|
||||
margin: 20px 0 0;
|
||||
position: relative;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
button, input[type="submit"], input[type="reset"], input[type="text"], input[type="button"], select[type="submit"] {
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
outline: inherit;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
label, input[type=radio], input[type=checkbox], select, input[type=range] {
|
||||
cursor: pointer;
|
||||
}
|
||||
button, input[type="submit"], input[type="reset"], input[type="button"], select[type="submit"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.loading_time {
|
||||
font-size: large;
|
||||
color: #EEA45D;
|
||||
color: #e67e22;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: center;
|
||||
padding: 16px 0 4px;
|
||||
}
|
||||
nav img {
|
||||
margin-right: auto;
|
||||
height: 32px;
|
||||
font-family: monospace;
|
||||
}
|
||||
#share {
|
||||
text-align: center;
|
||||
@ -54,39 +52,12 @@ nav img {
|
||||
}
|
||||
button.primary {
|
||||
color: white;
|
||||
background-color: #EEA45D;
|
||||
background-color: #e67e22;
|
||||
}
|
||||
button.secondary {
|
||||
color: black;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
#featured_history {
|
||||
margin: 4px 30px;
|
||||
}
|
||||
#featured_table {
|
||||
border-collapse: collapse;
|
||||
border: solid 2px whitesmoke;
|
||||
margin-bottom: 20px;
|
||||
table-layout: fixed;
|
||||
}
|
||||
#featured_table div {
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
max-width: 200px;
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#featured_table div:nth-child(even) {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
#featured_table div:hover {
|
||||
background-color: #EEA45D;
|
||||
}
|
||||
#featured_history img {
|
||||
height: 60px;
|
||||
}
|
||||
#examples table {
|
||||
border-collapse: collapse;
|
||||
font-family: monospace;
|
||||
@ -96,7 +67,7 @@ button.secondary {
|
||||
border-left: solid 4px whitesmoke;
|
||||
}
|
||||
#examples th {
|
||||
padding: 8px;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
}
|
||||
@ -110,4 +81,18 @@ button.secondary {
|
||||
}
|
||||
#examples tbody tr:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
#credit {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 8px;
|
||||
height: 24px;
|
||||
}
|
||||
#credit a {
|
||||
text-decoration: none;
|
||||
color: cornflowerblue;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
BIN
build/lib/gradio/static/css/vendor/images/ui-bg_flat_0_aaaaaa_40x100.png
vendored
Normal file
BIN
build/lib/gradio/static/css/vendor/images/ui-bg_flat_0_aaaaaa_40x100.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 B |
BIN
build/lib/gradio/static/css/vendor/images/ui-icons_444444_256x240.png
vendored
Normal file
BIN
build/lib/gradio/static/css/vendor/images/ui-icons_444444_256x240.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
build/lib/gradio/static/css/vendor/images/ui-icons_555555_256x240.png
vendored
Normal file
BIN
build/lib/gradio/static/css/vendor/images/ui-icons_555555_256x240.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
build/lib/gradio/static/css/vendor/images/ui-icons_777620_256x240.png
vendored
Normal file
BIN
build/lib/gradio/static/css/vendor/images/ui-icons_777620_256x240.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
build/lib/gradio/static/css/vendor/images/ui-icons_777777_256x240.png
vendored
Normal file
BIN
build/lib/gradio/static/css/vendor/images/ui-icons_777777_256x240.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
build/lib/gradio/static/css/vendor/images/ui-icons_cc0000_256x240.png
vendored
Normal file
BIN
build/lib/gradio/static/css/vendor/images/ui-icons_cc0000_256x240.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
build/lib/gradio/static/css/vendor/images/ui-icons_ffffff_256x240.png
vendored
Normal file
BIN
build/lib/gradio/static/css/vendor/images/ui-icons_ffffff_256x240.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
1311
build/lib/gradio/static/css/vendor/jquery-ui.css
vendored
Normal file
1311
build/lib/gradio/static/css/vendor/jquery-ui.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
@ -6,8 +6,8 @@ function gradio(config, fn, target) {
|
||||
<div class="input_interfaces">
|
||||
</div>
|
||||
<div class="panel_buttons">
|
||||
<input class="submit" type="submit" value="submit"/>
|
||||
<input class="clear" type="reset" value="clear">
|
||||
<input class="submit panel_button" type="submit" value="submit"/>
|
||||
<input class="clear panel_button" type="reset" value="clear">
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel output_panel">
|
||||
@ -17,6 +17,10 @@ function gradio(config, fn, target) {
|
||||
</div>
|
||||
<div class="output_interfaces">
|
||||
</div>
|
||||
<div class="panel_buttons">
|
||||
<input class="screenshot panel_button" type="button" value="screenshot"/>
|
||||
<input class="flag panel_button" type="button" value="flag"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>`);
|
||||
let io_master = Object.create(io_master_template);
|
||||
@ -118,6 +122,11 @@ function gradio(config, fn, target) {
|
||||
io_master.last_input = null;
|
||||
io_master.last_output = null;
|
||||
});
|
||||
target.find(".screenshot").click(function() {
|
||||
html2canvas(target[0]).then(function(canvas) {
|
||||
saveAs(canvas.toDataURL(), 'screenshot.png');
|
||||
});
|
||||
});
|
||||
if (config.live) {
|
||||
io_master.gather();
|
||||
} else {
|
||||
@ -144,4 +153,19 @@ function gradio_url(config, url, target) {
|
||||
});
|
||||
});
|
||||
}, target);
|
||||
}
|
||||
function saveAs(uri, filename) {
|
||||
var link = document.createElement('a');
|
||||
if (typeof link.download === 'string') {
|
||||
link.href = uri;
|
||||
link.download = filename;
|
||||
//Firefox requires the link to be in the body
|
||||
document.body.appendChild(link);
|
||||
//simulate click
|
||||
link.click();
|
||||
//remove the link when done
|
||||
document.body.removeChild(link);
|
||||
} else {
|
||||
window.open(uri);
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,8 @@
|
||||
const checkbox = {
|
||||
html: `<input class="checkbox" type="checkbox">`,
|
||||
html: `<label><input class="checkbox" type="checkbox"> </label>`,
|
||||
init: function(opts) {
|
||||
this.target.css("height", "auto");
|
||||
this.target.find("input").checkboxradio();
|
||||
},
|
||||
submit: function() {
|
||||
let io = this;
|
||||
|
||||
@ -6,12 +6,14 @@ const checkbox_group = {
|
||||
html = "<div class='checkbox_group'>"
|
||||
for ([index, choice] of opts.choices.entries()) {
|
||||
html += `
|
||||
<label for="${this.id}_${index}">${choice}
|
||||
<label for="${this.id}_${index}">
|
||||
<input id="${this.id}_${index}" type="checkbox" name="${this.id}" value="${index}">
|
||||
${choice}
|
||||
</label>`;
|
||||
}
|
||||
html += "</div>"
|
||||
this.target.html(html);
|
||||
this.target.find("input").checkboxradio();
|
||||
},
|
||||
submit: function() {
|
||||
let io = this;
|
||||
@ -23,6 +25,7 @@ const checkbox_group = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find("input").prop("checked", false);
|
||||
this.target.find("input").button("refresh");
|
||||
},
|
||||
load_example: function(data) {
|
||||
for (let [i, choice] of this.choices.entries()) {
|
||||
@ -35,5 +38,6 @@ const checkbox_group = {
|
||||
checkbox.prop("checked", false);
|
||||
}
|
||||
}
|
||||
this.target.find("input").button("refresh");
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ const dropdown = {
|
||||
}
|
||||
html += "</select>"
|
||||
this.target.html(html);
|
||||
this.target.find(".dropdown").selectmenu();
|
||||
},
|
||||
submit: function() {
|
||||
checked_val = this.target.find("option:selected").val();
|
||||
|
||||
@ -25,7 +25,7 @@ const microphone = {
|
||||
this.wavesurfer = WaveSurfer.create({
|
||||
container: '.waveform',
|
||||
waveColor: '#888888',
|
||||
progressColor: '#EEA45D',
|
||||
progressColor: '#e67e22',
|
||||
barWidth: 3,
|
||||
hideScrollbar: true
|
||||
});
|
||||
|
||||
@ -6,12 +6,16 @@ const radio = {
|
||||
html = "<div class='radio_group'>"
|
||||
for ([index, choice] of opts.choices.entries()) {
|
||||
html += `
|
||||
<input id="${this.id}_${index}" type="radio" name="${this.id}" value="${index}">
|
||||
<label for="${this.id}_${index}">${choice}</label>`;
|
||||
<label for="${this.id}_${index}">
|
||||
<input id="${this.id}_${index}" type="radio" name="${this.id}" value="${index}">
|
||||
${choice}
|
||||
</label>`;
|
||||
}
|
||||
html += "</div>"
|
||||
this.target.html(html);
|
||||
this.target.find("input:first-child").prop("checked", true);
|
||||
this.target.find("input").checkboxradio();
|
||||
this.target.find("label:first-child input").prop("checked", true);
|
||||
this.target.find("input").button("refresh");
|
||||
},
|
||||
submit: function() {
|
||||
checked_val = this.target.find("input:checked").val();
|
||||
@ -19,10 +23,12 @@ const radio = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find("input").prop("checked", false);
|
||||
this.target.find("input:first-child").prop("checked", true);
|
||||
this.target.find("label:first-child input").prop("checked", true);
|
||||
this.target.find("input").button("refresh");
|
||||
},
|
||||
load_example: function(data) {
|
||||
let child = this.choices.indexOf(data) + 1;
|
||||
this.target.find("input:nth-child("+child+")").prop("checked", true);
|
||||
this.target.find("input").button("refresh");
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,18 +1,14 @@
|
||||
const slider = {
|
||||
html: `
|
||||
<div class="slider_container">
|
||||
<span class="min"></span>
|
||||
<input type="range" class="slider">
|
||||
<span class="max"></span>:
|
||||
<div class="value"></div>
|
||||
<div class="slider">
|
||||
<div class="ui-slider-handle"></div>
|
||||
</div>
|
||||
</div>`,
|
||||
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);
|
||||
this.target.find(".value").text(opts.default);
|
||||
let difference = opts.maximum - opts.minimum;
|
||||
if (difference <= 1) {
|
||||
step = 0.01;
|
||||
@ -21,17 +17,21 @@ const slider = {
|
||||
} else {
|
||||
step = 1;
|
||||
}
|
||||
this.target.find(".slider")
|
||||
.attr("min", opts.minimum)
|
||||
.attr("max", opts.maximum)
|
||||
.attr("value", opts.default)
|
||||
.attr("step", step)
|
||||
.on("change", function() {
|
||||
io.target.find(".value").text($(this).val());
|
||||
}).change()
|
||||
var handle = this.target.find(".ui-slider-handle");
|
||||
this.slider = this.target.find(".slider").slider({
|
||||
create: function() {
|
||||
handle.text( $( this ).slider( "value" ) );
|
||||
},
|
||||
slide: function( event, ui ) {
|
||||
handle.text( ui.value );
|
||||
},
|
||||
min: opts.minimum,
|
||||
max: opts.maximum,
|
||||
step: step
|
||||
});
|
||||
},
|
||||
submit: function() {
|
||||
let value = this.target.find("input").val();
|
||||
let value = this.slider.slider("value");
|
||||
this.io_master.input(this.id, parseFloat(value));
|
||||
},
|
||||
clear: function() {
|
||||
|
||||
20
build/lib/gradio/static/js/vendor/html2canvas.min.js
vendored
Normal file
20
build/lib/gradio/static/js/vendor/html2canvas.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
13
build/lib/gradio/static/js/vendor/jquery-ui.min.js
vendored
Normal file
13
build/lib/gradio/static/js/vendor/jquery-ui.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -18,6 +18,12 @@
|
||||
<!-- <iframe src=""></iframe> -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>Gradio</title>
|
||||
<!-- VENDOR -->
|
||||
<link type="text/css" href="../static/css/vendor/tui-color-picker.css" rel="stylesheet">
|
||||
<link type="text/css" href="../static/css/vendor/tui-image-editor.css" rel="stylesheet">
|
||||
<link type="text/css" href="../static/css/vendor/jquery-ui.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../static/css/style.css">
|
||||
<link rel="stylesheet" href="../static/css/gradio.css">
|
||||
<link rel="stylesheet" href="../static/css/interfaces/input/csv.css">
|
||||
@ -36,15 +42,9 @@
|
||||
<link rel="stylesheet" href="../static/css/interfaces/output/key_values.css">
|
||||
<link rel="stylesheet" href="../static/css/interfaces/output/textbox.css">
|
||||
<link rel="stylesheet" href="../static/css/loading.css"/>
|
||||
<!-- TUI EDITOR -->
|
||||
<link type="text/css" href="../static/css/vendor/tui-color-picker.css" rel="stylesheet">
|
||||
<link type="text/css" href="../static/css/vendor/tui-image-editor.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<a href="https://gradio.app"><img src="../static/img/logo_inline.png" /></a>
|
||||
</nav>
|
||||
<div id="share" class="invisible">
|
||||
Live at <a id="share-link" target="_blank"></a>.
|
||||
<button id="share-copy">Copy Link</button>
|
||||
@ -59,6 +59,7 @@
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
<div id="credit">Built with <a href="http://gradio.app" target="_blank">Gradio</a>.</div>
|
||||
<script src="../static/js/vendor/jquery.min.js"></script>
|
||||
<!-- TUI EDITOR -->
|
||||
<script src="../static/js/vendor/fabric.js"></script>
|
||||
@ -69,6 +70,9 @@
|
||||
<script src="../static/js/vendor/white-theme.js"></script>
|
||||
<script src="../static/js/vendor/black-theme.js"></script>
|
||||
|
||||
<script src="../static/js/vendor/html2canvas.min.js"></script>
|
||||
<script src="../static/js/vendor/jquery-ui.min.js"></script>
|
||||
|
||||
<script src="../static/js/utils.js"></script>
|
||||
<script src="../static/js/all_io.js"></script>
|
||||
<script src="../static/js/interfaces/input/csv.js"></script>
|
||||
|
||||
31
demo/all.py
Normal file
31
demo/all.py
Normal file
@ -0,0 +1,31 @@
|
||||
import gradio as gr
|
||||
import numpy as np
|
||||
|
||||
def answer_question(quantity, animal, place, activity_list, morning, etc, im1, im2):
|
||||
return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}""", np.flipud(im2)
|
||||
|
||||
|
||||
gr.Interface(answer_question,
|
||||
[
|
||||
gr.inputs.Slider(2, 20),
|
||||
gr.inputs.Dropdown(["cat", "dog", "bird"]),
|
||||
gr.inputs.Radio(["park", "zoo", "road"]),
|
||||
gr.inputs.CheckboxGroup(["ran", "swam", "ate", "slept"]),
|
||||
gr.inputs.Checkbox(label="Is it the morning?"),
|
||||
gr.inputs.Textbox(default="What else?"),
|
||||
gr.inputs.Sketchpad(shape=(100,100)),
|
||||
gr.inputs.Image(shape=(100,100)),
|
||||
],
|
||||
[
|
||||
gr.outputs.Textbox(),
|
||||
gr.outputs.Image()
|
||||
],
|
||||
examples=[
|
||||
[2, "cat", "park", ["ran", "swam"], True, "t1"],
|
||||
[4, "dog", "zoo", ["ate", "swam"], False, "t2"],
|
||||
[10, "bird", "road", ["ran"], False, "t3"],
|
||||
[8, "cat", "zoo", ["ate"], True, "t1"],
|
||||
],
|
||||
title="Test for all Interfaces",
|
||||
description="Here's an example that uses almost all the interface types, so give it a try! Let's hope it works :D"
|
||||
).launch()
|
||||
@ -1,5 +1,5 @@
|
||||
import gradio as gr
|
||||
|
||||
import numpy as np
|
||||
|
||||
def answer_question(quantity, animal, place, activity_list, morning, etc):
|
||||
return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}""", "OK"
|
||||
@ -19,9 +19,9 @@ gr.Interface(answer_question,
|
||||
gr.outputs.Textbox(),
|
||||
],
|
||||
examples=[
|
||||
[2, "cat", "park", ["ran", "swam"], True],
|
||||
[4, "dog", "zoo", ["ate", "swam"], False],
|
||||
[10, "bird", "road", ["ran"], False],
|
||||
[8, "cat", "zoo", ["ate"], True],
|
||||
]
|
||||
[2, "cat", "park", ["ran", "swam"], True, "t1"],
|
||||
[4, "dog", "zoo", ["ate", "swam"], False, "t2"],
|
||||
[10, "bird", "road", ["ran"], False, "t3"],
|
||||
[8, "cat", "zoo", ["ate"], True, "t1"],
|
||||
],
|
||||
).launch()
|
||||
|
||||
@ -20,7 +20,6 @@ gradio/static/css/gradio.css
|
||||
gradio/static/css/loading.css
|
||||
gradio/static/css/style.css
|
||||
gradio/static/css/interfaces/input/checkbox_group.css
|
||||
gradio/static/css/interfaces/input/csv.css
|
||||
gradio/static/css/interfaces/input/dropdown.css
|
||||
gradio/static/css/interfaces/input/image.css
|
||||
gradio/static/css/interfaces/input/microphone.css
|
||||
@ -33,8 +32,16 @@ gradio/static/css/interfaces/output/image.css
|
||||
gradio/static/css/interfaces/output/key_values.css
|
||||
gradio/static/css/interfaces/output/label.css
|
||||
gradio/static/css/interfaces/output/textbox.css
|
||||
gradio/static/css/vendor/jquery-ui.css
|
||||
gradio/static/css/vendor/tui-color-picker.css
|
||||
gradio/static/css/vendor/tui-image-editor.css
|
||||
gradio/static/css/vendor/images/ui-bg_flat_0_aaaaaa_40x100.png
|
||||
gradio/static/css/vendor/images/ui-icons_444444_256x240.png
|
||||
gradio/static/css/vendor/images/ui-icons_555555_256x240.png
|
||||
gradio/static/css/vendor/images/ui-icons_777620_256x240.png
|
||||
gradio/static/css/vendor/images/ui-icons_777777_256x240.png
|
||||
gradio/static/css/vendor/images/ui-icons_cc0000_256x240.png
|
||||
gradio/static/css/vendor/images/ui-icons_ffffff_256x240.png
|
||||
gradio/static/img/logo.png
|
||||
gradio/static/img/logo_error.png
|
||||
gradio/static/img/logo_inline.png
|
||||
@ -69,6 +76,8 @@ gradio/static/js/interfaces/output/textbox.js
|
||||
gradio/static/js/vendor/FileSaver.min.js
|
||||
gradio/static/js/vendor/black-theme.js
|
||||
gradio/static/js/vendor/fabric.js
|
||||
gradio/static/js/vendor/html2canvas.min.js
|
||||
gradio/static/js/vendor/jquery-ui.min.js
|
||||
gradio/static/js/vendor/jquery.min.js
|
||||
gradio/static/js/vendor/p5.dom.min.js
|
||||
gradio/static/js/vendor/p5.min.js
|
||||
|
||||
@ -1,36 +1,39 @@
|
||||
.panels {
|
||||
margin-top: -24px;
|
||||
margin-left: -24px;
|
||||
margin-left: -16px;
|
||||
}
|
||||
.panel {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
margin-left: 16px;
|
||||
min-width: 300px;
|
||||
flex: 1 1 0;
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.panel_header, .interface {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
.panel_header {
|
||||
text-transform: uppercase;
|
||||
font-family: Arial;
|
||||
color: #888;
|
||||
padding: 6px 6px 0;
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.input_interfaces, .output_interfaces {
|
||||
margin-bottom: 16px;
|
||||
background-color: whitesmoke;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.interface {
|
||||
height: 360px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
.interface:not(*:last-child) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.output_panel {
|
||||
position: relative;
|
||||
}
|
||||
@ -47,69 +50,42 @@
|
||||
}
|
||||
.panel_buttons {
|
||||
display: flex;
|
||||
margin-left: -8px;
|
||||
margin-left: -16px;
|
||||
}
|
||||
.panel_buttons > * {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.submit {
|
||||
input.submit {
|
||||
display: none;
|
||||
}
|
||||
.submit, .clear, .panel_button {
|
||||
background-color: whitesmoke !important;
|
||||
input.panel_button {
|
||||
background-color: whitesmoke;
|
||||
flex-grow: 1;
|
||||
padding: 8px !important;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
border: 0 none !important;
|
||||
border: 0 none;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s ease;
|
||||
margin-left: 16px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.submit {
|
||||
background-color: #EEA45D !important;
|
||||
color: white !important;
|
||||
input.submit {
|
||||
background-color: #e67e22;
|
||||
color: white;
|
||||
}
|
||||
.submit, .flag_message {
|
||||
flex-grow: 2 !important;
|
||||
margin-right: 8px;
|
||||
.panel_button:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
.flag_message {
|
||||
padding: 8px !important;
|
||||
background-color: whitesmoke !important;
|
||||
input.submit:hover {
|
||||
background-color: #f39c12;
|
||||
}
|
||||
|
||||
.upload_zone {
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
color: #BBB;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
line-height: 1.5em;
|
||||
flex-flow: column;
|
||||
}
|
||||
.upload_zone img {
|
||||
height: 120px;
|
||||
|
||||
}
|
||||
.drop_zone {
|
||||
border: dashed 8px #DDD;
|
||||
}
|
||||
.edit_holder {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.interface_button {
|
||||
padding: 6px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
label {
|
||||
transition: background-color 0.2s ease;
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
/* label:hover {
|
||||
background-color: lightgray;
|
||||
} */
|
||||
.overlay {
|
||||
position: absolute;
|
||||
height: 100vh;
|
||||
@ -120,9 +96,6 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.flag.flagged {
|
||||
background-color: pink !important;
|
||||
}
|
||||
.loading {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@ -1,11 +1,42 @@
|
||||
.checkbox_group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
margin-top: -12px;
|
||||
margin-left: -16px;
|
||||
}
|
||||
.checkbox_group input, .checkbox {
|
||||
margin: 0px 4px 0px 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.checkbox_group label {
|
||||
margin-right: 16px;
|
||||
margin-top: 12px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.ui-icon-background, .ui-state-active .ui-icon-background {
|
||||
border: #f39c12;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.ui-visual-focus {
|
||||
box-shadow: 0 0 3px 1px rgb(241, 171, 41);
|
||||
}
|
||||
.ui-button {
|
||||
padding: 0.25em 0.6em;
|
||||
}
|
||||
.ui-widget {
|
||||
font-family: inherit;
|
||||
}
|
||||
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
|
||||
border: 1px solid lightgray;
|
||||
background: lightgray;
|
||||
}
|
||||
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
|
||||
border: 1px solid #e67e22 !important;
|
||||
background: #e67e22 !important;
|
||||
font-weight: normal;
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui-button {
|
||||
outline: none;
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
.table_holder {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: scroll;
|
||||
display: none;
|
||||
}
|
||||
.csv_preview {
|
||||
background-color: white;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
font-size: 12px;
|
||||
font-family: monospace;
|
||||
}
|
||||
.csv_preview tr {
|
||||
border-bottom: solid 1px black;
|
||||
}
|
||||
.csv_preview tr.header td {
|
||||
background-color: #EEA45D;
|
||||
font-weight: bold;
|
||||
}
|
||||
.csv_preview td {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
.csv_preview td:nth-child(even) {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
@ -1,4 +1,7 @@
|
||||
select.dropdown {
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
padding: 4px;
|
||||
font-size: 18px;
|
||||
border: solid 1px lightgray;
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
}
|
||||
.saliency > div > div {
|
||||
flex-grow: 1;
|
||||
background-color: #EEA45D;
|
||||
background-color: #e67e22;
|
||||
}
|
||||
.image_preview {
|
||||
max-width: 100%;
|
||||
@ -66,3 +66,35 @@
|
||||
margin-left: 10px !important;
|
||||
font-family: 'Open Sans', sans-serif !important;
|
||||
}
|
||||
.upload_zone {
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
color: #BBB;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
line-height: 1.5em;
|
||||
flex-flow: column;
|
||||
}
|
||||
.upload_zone img {
|
||||
height: 120px;
|
||||
}
|
||||
.drop_zone {
|
||||
border: dashed 8px #DDD;
|
||||
}
|
||||
.edit_holder {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.interface_button {
|
||||
padding: 6px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -1,11 +1,15 @@
|
||||
.radio_group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
margin-top: -12px;
|
||||
margin-left: -16px;
|
||||
}
|
||||
.radio_group input {
|
||||
margin: 0px 4px 0px 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.radio_group label {
|
||||
margin-right: 16px;
|
||||
margin-top: 12px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
@ -1,9 +1,15 @@
|
||||
.slider_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.slider_container .slider {
|
||||
margin: 0 24px;
|
||||
}
|
||||
.slider_container .value {
|
||||
.slider_container .ui-slider-handle {
|
||||
width: 3em !important;
|
||||
height: 1.6em !important;
|
||||
top: 50% !important;
|
||||
margin-top: -.8em;
|
||||
margin-left: -1.5em !important;
|
||||
text-align: center;
|
||||
line-height: 1.6em;
|
||||
cursor: pointer !important;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
outline: none !important;
|
||||
}
|
||||
@ -1,11 +1,12 @@
|
||||
.input_text, .input_text_saliency {
|
||||
.input_text {
|
||||
resize: none;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
border: solid 1px black;
|
||||
border: solid 1px lightgray;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
font-family: monospace;
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
outline: none;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
border: solid 1px black;
|
||||
border: solid 1px lightgray;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
min-height: 30px;
|
||||
|
||||
@ -1,32 +1,30 @@
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
margin: 0;
|
||||
margin: 20px 0 0;
|
||||
position: relative;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
button, input[type="submit"], input[type="reset"], input[type="text"], input[type="button"], select[type="submit"] {
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
outline: inherit;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
label, input[type=radio], input[type=checkbox], select, input[type=range] {
|
||||
cursor: pointer;
|
||||
}
|
||||
button, input[type="submit"], input[type="reset"], input[type="button"], select[type="submit"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.loading_time {
|
||||
font-size: large;
|
||||
color: #EEA45D;
|
||||
color: #e67e22;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: center;
|
||||
padding: 16px 0 4px;
|
||||
}
|
||||
nav img {
|
||||
margin-right: auto;
|
||||
height: 32px;
|
||||
font-family: monospace;
|
||||
}
|
||||
#share {
|
||||
text-align: center;
|
||||
@ -54,39 +52,12 @@ nav img {
|
||||
}
|
||||
button.primary {
|
||||
color: white;
|
||||
background-color: #EEA45D;
|
||||
background-color: #e67e22;
|
||||
}
|
||||
button.secondary {
|
||||
color: black;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
#featured_history {
|
||||
margin: 4px 30px;
|
||||
}
|
||||
#featured_table {
|
||||
border-collapse: collapse;
|
||||
border: solid 2px whitesmoke;
|
||||
margin-bottom: 20px;
|
||||
table-layout: fixed;
|
||||
}
|
||||
#featured_table div {
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
max-width: 200px;
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#featured_table div:nth-child(even) {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
#featured_table div:hover {
|
||||
background-color: #EEA45D;
|
||||
}
|
||||
#featured_history img {
|
||||
height: 60px;
|
||||
}
|
||||
#examples table {
|
||||
border-collapse: collapse;
|
||||
font-family: monospace;
|
||||
@ -96,7 +67,7 @@ button.secondary {
|
||||
border-left: solid 4px whitesmoke;
|
||||
}
|
||||
#examples th {
|
||||
padding: 8px;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
}
|
||||
@ -110,4 +81,18 @@ button.secondary {
|
||||
}
|
||||
#examples tbody tr:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
#credit {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 8px;
|
||||
height: 24px;
|
||||
}
|
||||
#credit a {
|
||||
text-decoration: none;
|
||||
color: cornflowerblue;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
BIN
gradio/static/css/vendor/images/ui-bg_flat_0_aaaaaa_40x100.png
vendored
Normal file
BIN
gradio/static/css/vendor/images/ui-bg_flat_0_aaaaaa_40x100.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 B |
BIN
gradio/static/css/vendor/images/ui-icons_444444_256x240.png
vendored
Normal file
BIN
gradio/static/css/vendor/images/ui-icons_444444_256x240.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
gradio/static/css/vendor/images/ui-icons_555555_256x240.png
vendored
Normal file
BIN
gradio/static/css/vendor/images/ui-icons_555555_256x240.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
gradio/static/css/vendor/images/ui-icons_777620_256x240.png
vendored
Normal file
BIN
gradio/static/css/vendor/images/ui-icons_777620_256x240.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
gradio/static/css/vendor/images/ui-icons_777777_256x240.png
vendored
Normal file
BIN
gradio/static/css/vendor/images/ui-icons_777777_256x240.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
gradio/static/css/vendor/images/ui-icons_cc0000_256x240.png
vendored
Normal file
BIN
gradio/static/css/vendor/images/ui-icons_cc0000_256x240.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
gradio/static/css/vendor/images/ui-icons_ffffff_256x240.png
vendored
Normal file
BIN
gradio/static/css/vendor/images/ui-icons_ffffff_256x240.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
1311
gradio/static/css/vendor/jquery-ui.css
vendored
Normal file
1311
gradio/static/css/vendor/jquery-ui.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
@ -6,8 +6,8 @@ function gradio(config, fn, target) {
|
||||
<div class="input_interfaces">
|
||||
</div>
|
||||
<div class="panel_buttons">
|
||||
<input class="submit" type="submit" value="submit"/>
|
||||
<input class="clear" type="reset" value="clear">
|
||||
<input class="submit panel_button" type="submit" value="submit"/>
|
||||
<input class="clear panel_button" type="reset" value="clear">
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel output_panel">
|
||||
@ -17,6 +17,10 @@ function gradio(config, fn, target) {
|
||||
</div>
|
||||
<div class="output_interfaces">
|
||||
</div>
|
||||
<div class="panel_buttons">
|
||||
<input class="screenshot panel_button" type="button" value="screenshot"/>
|
||||
<input class="flag panel_button" type="button" value="flag"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>`);
|
||||
let io_master = Object.create(io_master_template);
|
||||
@ -118,6 +122,11 @@ function gradio(config, fn, target) {
|
||||
io_master.last_input = null;
|
||||
io_master.last_output = null;
|
||||
});
|
||||
target.find(".screenshot").click(function() {
|
||||
html2canvas(target[0]).then(function(canvas) {
|
||||
saveAs(canvas.toDataURL(), 'screenshot.png');
|
||||
});
|
||||
});
|
||||
if (config.live) {
|
||||
io_master.gather();
|
||||
} else {
|
||||
@ -144,4 +153,19 @@ function gradio_url(config, url, target) {
|
||||
});
|
||||
});
|
||||
}, target);
|
||||
}
|
||||
function saveAs(uri, filename) {
|
||||
var link = document.createElement('a');
|
||||
if (typeof link.download === 'string') {
|
||||
link.href = uri;
|
||||
link.download = filename;
|
||||
//Firefox requires the link to be in the body
|
||||
document.body.appendChild(link);
|
||||
//simulate click
|
||||
link.click();
|
||||
//remove the link when done
|
||||
document.body.removeChild(link);
|
||||
} else {
|
||||
window.open(uri);
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,8 @@
|
||||
const checkbox = {
|
||||
html: `<input class="checkbox" type="checkbox">`,
|
||||
html: `<label><input class="checkbox" type="checkbox"> </label>`,
|
||||
init: function(opts) {
|
||||
this.target.css("height", "auto");
|
||||
this.target.find("input").checkboxradio();
|
||||
},
|
||||
submit: function() {
|
||||
let io = this;
|
||||
|
||||
@ -6,12 +6,14 @@ const checkbox_group = {
|
||||
html = "<div class='checkbox_group'>"
|
||||
for ([index, choice] of opts.choices.entries()) {
|
||||
html += `
|
||||
<label for="${this.id}_${index}">${choice}
|
||||
<label for="${this.id}_${index}">
|
||||
<input id="${this.id}_${index}" type="checkbox" name="${this.id}" value="${index}">
|
||||
${choice}
|
||||
</label>`;
|
||||
}
|
||||
html += "</div>"
|
||||
this.target.html(html);
|
||||
this.target.find("input").checkboxradio();
|
||||
},
|
||||
submit: function() {
|
||||
let io = this;
|
||||
@ -23,6 +25,7 @@ const checkbox_group = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find("input").prop("checked", false);
|
||||
this.target.find("input").button("refresh");
|
||||
},
|
||||
load_example: function(data) {
|
||||
for (let [i, choice] of this.choices.entries()) {
|
||||
@ -35,5 +38,6 @@ const checkbox_group = {
|
||||
checkbox.prop("checked", false);
|
||||
}
|
||||
}
|
||||
this.target.find("input").button("refresh");
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ const dropdown = {
|
||||
}
|
||||
html += "</select>"
|
||||
this.target.html(html);
|
||||
this.target.find(".dropdown").selectmenu();
|
||||
},
|
||||
submit: function() {
|
||||
checked_val = this.target.find("option:selected").val();
|
||||
|
||||
@ -25,7 +25,7 @@ const microphone = {
|
||||
this.wavesurfer = WaveSurfer.create({
|
||||
container: '.waveform',
|
||||
waveColor: '#888888',
|
||||
progressColor: '#EEA45D',
|
||||
progressColor: '#e67e22',
|
||||
barWidth: 3,
|
||||
hideScrollbar: true
|
||||
});
|
||||
|
||||
@ -6,12 +6,16 @@ const radio = {
|
||||
html = "<div class='radio_group'>"
|
||||
for ([index, choice] of opts.choices.entries()) {
|
||||
html += `
|
||||
<input id="${this.id}_${index}" type="radio" name="${this.id}" value="${index}">
|
||||
<label for="${this.id}_${index}">${choice}</label>`;
|
||||
<label for="${this.id}_${index}">
|
||||
<input id="${this.id}_${index}" type="radio" name="${this.id}" value="${index}">
|
||||
${choice}
|
||||
</label>`;
|
||||
}
|
||||
html += "</div>"
|
||||
this.target.html(html);
|
||||
this.target.find("input:first-child").prop("checked", true);
|
||||
this.target.find("input").checkboxradio();
|
||||
this.target.find("label:first-child input").prop("checked", true);
|
||||
this.target.find("input").button("refresh");
|
||||
},
|
||||
submit: function() {
|
||||
checked_val = this.target.find("input:checked").val();
|
||||
@ -19,10 +23,12 @@ const radio = {
|
||||
},
|
||||
clear: function() {
|
||||
this.target.find("input").prop("checked", false);
|
||||
this.target.find("input:first-child").prop("checked", true);
|
||||
this.target.find("label:first-child input").prop("checked", true);
|
||||
this.target.find("input").button("refresh");
|
||||
},
|
||||
load_example: function(data) {
|
||||
let child = this.choices.indexOf(data) + 1;
|
||||
this.target.find("input:nth-child("+child+")").prop("checked", true);
|
||||
this.target.find("input").button("refresh");
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,18 +1,14 @@
|
||||
const slider = {
|
||||
html: `
|
||||
<div class="slider_container">
|
||||
<span class="min"></span>
|
||||
<input type="range" class="slider">
|
||||
<span class="max"></span>:
|
||||
<div class="value"></div>
|
||||
<div class="slider">
|
||||
<div class="ui-slider-handle"></div>
|
||||
</div>
|
||||
</div>`,
|
||||
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);
|
||||
this.target.find(".value").text(opts.default);
|
||||
let difference = opts.maximum - opts.minimum;
|
||||
if (difference <= 1) {
|
||||
step = 0.01;
|
||||
@ -21,17 +17,21 @@ const slider = {
|
||||
} else {
|
||||
step = 1;
|
||||
}
|
||||
this.target.find(".slider")
|
||||
.attr("min", opts.minimum)
|
||||
.attr("max", opts.maximum)
|
||||
.attr("value", opts.default)
|
||||
.attr("step", step)
|
||||
.on("change", function() {
|
||||
io.target.find(".value").text($(this).val());
|
||||
}).change()
|
||||
var handle = this.target.find(".ui-slider-handle");
|
||||
this.slider = this.target.find(".slider").slider({
|
||||
create: function() {
|
||||
handle.text( $( this ).slider( "value" ) );
|
||||
},
|
||||
slide: function( event, ui ) {
|
||||
handle.text( ui.value );
|
||||
},
|
||||
min: opts.minimum,
|
||||
max: opts.maximum,
|
||||
step: step
|
||||
});
|
||||
},
|
||||
submit: function() {
|
||||
let value = this.target.find("input").val();
|
||||
let value = this.slider.slider("value");
|
||||
this.io_master.input(this.id, parseFloat(value));
|
||||
},
|
||||
clear: function() {
|
||||
|
||||
20
gradio/static/js/vendor/html2canvas.min.js
vendored
Normal file
20
gradio/static/js/vendor/html2canvas.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
13
gradio/static/js/vendor/jquery-ui.min.js
vendored
Normal file
13
gradio/static/js/vendor/jquery-ui.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -18,6 +18,12 @@
|
||||
<!-- <iframe src=""></iframe> -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>Gradio</title>
|
||||
<!-- VENDOR -->
|
||||
<link type="text/css" href="../static/css/vendor/tui-color-picker.css" rel="stylesheet">
|
||||
<link type="text/css" href="../static/css/vendor/tui-image-editor.css" rel="stylesheet">
|
||||
<link type="text/css" href="../static/css/vendor/jquery-ui.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../static/css/style.css">
|
||||
<link rel="stylesheet" href="../static/css/gradio.css">
|
||||
<link rel="stylesheet" href="../static/css/interfaces/input/csv.css">
|
||||
@ -36,15 +42,9 @@
|
||||
<link rel="stylesheet" href="../static/css/interfaces/output/key_values.css">
|
||||
<link rel="stylesheet" href="../static/css/interfaces/output/textbox.css">
|
||||
<link rel="stylesheet" href="../static/css/loading.css"/>
|
||||
<!-- TUI EDITOR -->
|
||||
<link type="text/css" href="../static/css/vendor/tui-color-picker.css" rel="stylesheet">
|
||||
<link type="text/css" href="../static/css/vendor/tui-image-editor.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<a href="https://gradio.app"><img src="../static/img/logo_inline.png" /></a>
|
||||
</nav>
|
||||
<div id="share" class="invisible">
|
||||
Live at <a id="share-link" target="_blank"></a>.
|
||||
<button id="share-copy">Copy Link</button>
|
||||
@ -59,6 +59,7 @@
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
<div id="credit">Built with <a href="http://gradio.app" target="_blank">Gradio</a>.</div>
|
||||
<script src="../static/js/vendor/jquery.min.js"></script>
|
||||
<!-- TUI EDITOR -->
|
||||
<script src="../static/js/vendor/fabric.js"></script>
|
||||
@ -69,6 +70,9 @@
|
||||
<script src="../static/js/vendor/white-theme.js"></script>
|
||||
<script src="../static/js/vendor/black-theme.js"></script>
|
||||
|
||||
<script src="../static/js/vendor/html2canvas.min.js"></script>
|
||||
<script src="../static/js/vendor/jquery-ui.min.js"></script>
|
||||
|
||||
<script src="../static/js/utils.js"></script>
|
||||
<script src="../static/js/all_io.js"></script>
|
||||
<script src="../static/js/interfaces/input/csv.js"></script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user