Rotate!

app.py

@@ -287,6 +287,12 @@ def call(
 
 NEGATIVE_PROMPTS = "text, watermark, low-quality, signature, moiré pattern, downsampling, aliasing, distorted, blurry, glossy, blur, jpeg artifacts, compression artifacts, poorly drawn, low-resolution, bad, distortion, twisted, excessive, exaggerated pose, exaggerated limbs, grainy, symmetrical, duplicate, error, pattern, beginner, pixelated, fake, hyper, glitch, overexposed, high-contrast, bad-contrast"
 
+def rotate_output(has_flipped):
+    if(has_flipped):
+        return gr.Image(elem_classes="not_rotated"), gr.Button("Rotate to see prompt 2!"), not has_flipped
+    else:
+        return gr.Image(elem_classes="rotated"), gr.Button("Rotate to see prompt 1!"), not has_flipped
+
 def simple_call(prompt1, prompt2):
     generator = [torch.Generator(device="cuda").manual_seed(5)]
     res = call(
@@ -304,10 +310,12 @@ def simple_call(prompt1, prompt2):
         generator=generator
     )
     image1 = res.images[0]
-    image2 = ImageOps.exif_transpose(image1.rotate(180, resample=0))
-    return image1, image2
-
-with gr.Blocks() as app:
+    return image1
+css = '''
+#result_image{ transition: transform 2s ease-in-out }
+#result_image.rotated{transform: rotate(180deg)}
+'''
+with gr.Blocks(css=css) as app:
     gr.Markdown(
         '''
         <center>
@@ -325,7 +333,7 @@ with gr.Blocks() as app:
         '''
     )
 
-    
+    has_flipped = gr.State(value=False)
     with gr.Row():
         with gr.Column():
             prompt1 = gr.Textbox(label="Prompt 1")
@@ -333,13 +341,21 @@ with gr.Blocks() as app:
             run_btn = gr.Button("Run")
                 
         with gr.Column():
-            result_image1 = gr.Image(label="Output 1")
-            result_image2 = gr.Image(label="Output 2 (Rotated)")
+            result_image1 = gr.Image(label="Output", elem_id="result_image", elem_classes="not_rotated")
+            rotate_button = gr.Button("Rotate to see prompt 2!")
+            
 
     run_btn.click(
         simple_call,
         inputs=[prompt1, prompt2],
-        outputs=[result_image1, result_image2]
+        outputs=[result_image1]
+    )
+    rotate_button.click(
+        rotate_output,
+        inputs=[has_flipped],
+        outputs=[result_image1, rotate_button, has_flipped],
+        queue=False,
+        show_progress=False
     )
 
 app.queue(max_size=20)