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

screenshot issues fix

Browse Source
This commit is contained in:
Ali Abid 2020-07-21 09:36:23 -07:00
parent baa7ef3cf2
commit f78e6eb2f0
9 changed files with 67 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
build/lib/gradio/static/css/gradio.css
View File

@ -57,7 +57,6 @@ input.submit {
} }
input.panel_button { input.panel_button {
background-color: whitesmoke; background-color: whitesmoke;
flex-grow: 1;
padding: 12px; padding: 12px;
box-sizing: border-box; box-sizing: border-box;
font-weight: bold; font-weight: bold;
@ -100,3 +99,14 @@ input.submit:hover {
.screenshot { .screenshot {
visibility: hidden; visibility: hidden;
} }
.screenshot_logo {
display: none;
flex-grow: 1;
text-align: center;
padding: 4px;
box-sizing: border-box;
margin-left: 16px;
}
.screenshot_logo img {
height: 38px;
}

12
build/lib/gradio/static/css/interfaces/output/image.css
View File

@ -1,6 +1,12 @@
.output_image { .output_image_holder {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; display: flex;
display: none justify-content: center;
align-items: center;
}
.output_image {
max-width: 100%;
max-height: 100%;
display: none;
} }

7
build/lib/gradio/static/js/gradio.js
View File

@ -19,6 +19,9 @@ function gradio(config, fn, target) {
</div> </div>
<div class="panel_buttons"> <div class="panel_buttons">
<input class="screenshot panel_button" type="button" value="SCREENSHOT"/> <input class="screenshot panel_button" type="button" value="SCREENSHOT"/>
<div class="screenshot_logo">
<img src="static/img/logo_inline.png">
</div>
</div> </div>
</div> </div>
</div>`); </div>`);
@ -125,8 +128,12 @@ function gradio(config, fn, target) {
target.find(".screenshot").css("visibility", "visible"); target.find(".screenshot").css("visibility", "visible");
} }
target.find(".screenshot").click(function() { target.find(".screenshot").click(function() {
$(".screenshot").hide();
$(".screenshot_logo").show();
html2canvas(target[0]).then(function(canvas) { html2canvas(target[0]).then(function(canvas) {
saveAs(canvas.toDataURL(), 'screenshot.png'); saveAs(canvas.toDataURL(), 'screenshot.png');
$(".screenshot").show();
$(".screenshot_logo").hide();
}); });
}); });
if (config.live) { if (config.live) {

2
build/lib/gradio/static/js/interfaces/output/image.js
View File

@ -1,6 +1,8 @@
const image_output = { const image_output = {
html: ` html: `
<div class="output_image_holder">
<img class="output_image" /> <img class="output_image" />
</div>
`, `,
init: function(opts) {}, init: function(opts) {},
output: function(data) { output: function(data) {

10
demo/flip_image.py
View File

@ -15,12 +15,12 @@ def flip2(image):
def flip10(i1, i2, i3, i4, i5): def flip10(i1, i2, i3, i4, i5):
return i1 + i2 return i1 + i2
gr.Interface(flip10, gr.Interface(flip2,
["image"] * 5, ["image"],
["image"], ["image"],
examples=[ examples=[
["images/cheetah1.jpg"] * 5, ["images/cheetah1.jpg"],
["images/cheetah2.jpg"] * 5, ["images/cheetah2.jpg"],
["images/lion.jpg"] * 5, ["images/lion.jpg"],
] ]
).launch() ).launch()

12
gradio/static/css/gradio.css
View File

@ -57,7 +57,6 @@ input.submit {
} }
input.panel_button { input.panel_button {
background-color: whitesmoke; background-color: whitesmoke;
flex-grow: 1;
padding: 12px; padding: 12px;
box-sizing: border-box; box-sizing: border-box;
font-weight: bold; font-weight: bold;
@ -100,3 +99,14 @@ input.submit:hover {
.screenshot { .screenshot {
visibility: hidden; visibility: hidden;
} }
.screenshot_logo {
display: none;
flex-grow: 1;
text-align: center;
padding: 4px;
box-sizing: border-box;
margin-left: 16px;
}
.screenshot_logo img {
height: 38px;
}

12
gradio/static/css/interfaces/output/image.css
View File

@ -1,6 +1,12 @@
.output_image { .output_image_holder {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; display: flex;
display: none justify-content: center;
align-items: center;
}
.output_image {
max-width: 100%;
max-height: 100%;
display: none;
} }

7
gradio/static/js/gradio.js
View File

@ -19,6 +19,9 @@ function gradio(config, fn, target) {
</div> </div>
<div class="panel_buttons"> <div class="panel_buttons">
<input class="screenshot panel_button" type="button" value="SCREENSHOT"/> <input class="screenshot panel_button" type="button" value="SCREENSHOT"/>
<div class="screenshot_logo">
<img src="static/img/logo_inline.png">
</div>
</div> </div>
</div> </div>
</div>`); </div>`);
@ -125,8 +128,12 @@ function gradio(config, fn, target) {
target.find(".screenshot").css("visibility", "visible"); target.find(".screenshot").css("visibility", "visible");
} }
target.find(".screenshot").click(function() { target.find(".screenshot").click(function() {
$(".screenshot").hide();
$(".screenshot_logo").show();
html2canvas(target[0]).then(function(canvas) { html2canvas(target[0]).then(function(canvas) {
saveAs(canvas.toDataURL(), 'screenshot.png'); saveAs(canvas.toDataURL(), 'screenshot.png');
$(".screenshot").show();
$(".screenshot_logo").hide();
}); });
}); });
if (config.live) { if (config.live) {

2
gradio/static/js/interfaces/output/image.js
View File

@ -1,6 +1,8 @@
const image_output = { const image_output = {
html: ` html: `
<div class="output_image_holder">
<img class="output_image" /> <img class="output_image" />
</div>
`, `,
init: function(opts) {}, init: function(opts) {},
output: function(data) { output: function(data) {