screenshot issues fix

build/lib/gradio/static/css/gradio.css

@@ -57,7 +57,6 @@ input.submit {
 }
 input.panel_button {
   background-color: whitesmoke;
-  flex-grow: 1;
   padding: 12px;
   box-sizing: border-box;
   font-weight: bold;
@@ -99,4 +98,15 @@ input.submit:hover {
 }
 .screenshot {
   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;
 }

build/lib/gradio/static/css/interfaces/output/image.css

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

build/lib/gradio/static/js/gradio.js

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

build/lib/gradio/static/js/interfaces/output/image.js

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

demo/flip_image.py

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

gradio/static/css/gradio.css

@@ -57,7 +57,6 @@ input.submit {
 }
 input.panel_button {
   background-color: whitesmoke;
-  flex-grow: 1;
   padding: 12px;
   box-sizing: border-box;
   font-weight: bold;
@@ -99,4 +98,15 @@ input.submit:hover {
 }
 .screenshot {
   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;
 }

gradio/static/css/interfaces/output/image.css

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

gradio/static/js/gradio.js

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

gradio/static/js/interfaces/output/image.js

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