From f78e6eb2f002f3c377c8e028014704f30f27075d Mon Sep 17 00:00:00 2001
From: Ali Abid <aliabid94@gmail.com>
Date: Tue, 21 Jul 2020 09:36:23 -0700
Subject: [PATCH] screenshot issues fix

---
 build/lib/gradio/static/css/gradio.css               | 12 +++++++++++-
 .../gradio/static/css/interfaces/output/image.css    | 12 +++++++++---
 build/lib/gradio/static/js/gradio.js                 |  9 ++++++++-
 .../lib/gradio/static/js/interfaces/output/image.js  |  4 +++-
 demo/flip_image.py                                   | 10 +++++-----
 gradio/static/css/gradio.css                         | 12 +++++++++++-
 gradio/static/css/interfaces/output/image.css        | 12 +++++++++---
 gradio/static/js/gradio.js                           |  9 ++++++++-
 gradio/static/js/interfaces/output/image.js          |  4 +++-
 9 files changed, 67 insertions(+), 17 deletions(-)

diff --git a/build/lib/gradio/static/css/gradio.css b/build/lib/gradio/static/css/gradio.css
index 83f07cae60..be4b7332e9 100644
--- a/build/lib/gradio/static/css/gradio.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/build/lib/gradio/static/css/interfaces/output/image.css b/build/lib/gradio/static/css/interfaces/output/image.css
index 9bb8123d17..24f091b838 100644
--- a/build/lib/gradio/static/css/interfaces/output/image.css
+++ b/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;
 }
diff --git a/build/lib/gradio/static/js/gradio.js b/build/lib/gradio/static/js/gradio.js
index 47119835d3..e1013a0959 100644
--- a/build/lib/gradio/static/js/gradio.js
+++ b/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();
diff --git a/build/lib/gradio/static/js/interfaces/output/image.js b/build/lib/gradio/static/js/interfaces/output/image.js
index dce8d07260..e2a1b65126 100644
--- a/build/lib/gradio/static/js/interfaces/output/image.js
+++ b/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) {
diff --git a/demo/flip_image.py b/demo/flip_image.py
index cfafc29497..57eac30551 100644
--- a/demo/flip_image.py
+++ b/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()
\ No newline at end of file
diff --git a/gradio/static/css/gradio.css b/gradio/static/css/gradio.css
index 83f07cae60..be4b7332e9 100644
--- a/gradio/static/css/gradio.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/gradio/static/css/interfaces/output/image.css b/gradio/static/css/interfaces/output/image.css
index 9bb8123d17..24f091b838 100644
--- a/gradio/static/css/interfaces/output/image.css
+++ b/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;
 }
diff --git a/gradio/static/js/gradio.js b/gradio/static/js/gradio.js
index 47119835d3..e1013a0959 100644
--- a/gradio/static/js/gradio.js
+++ b/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();
diff --git a/gradio/static/js/interfaces/output/image.js b/gradio/static/js/interfaces/output/image.js
index dce8d07260..e2a1b65126 100644
--- a/gradio/static/js/interfaces/output/image.js
+++ b/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) {