change image layout.

app.py

@@ -11,6 +11,7 @@ import time
 
 import gradio as gr
 import keras_cv
+from PIL import Image
 
 from constants import css, examples, img_height, img_width, num_images_to_gen
 from share_btn import community_icon_html, loading_icon_html, share_js
@@ -29,10 +30,7 @@ pokemon_model.decoder.compile(jit_compile=True)
 pokemon_model.text_encoder.compile(jit_compile=True)
 
 # Warm-up the model.
-_ = pokemon_model.text_to_image(
-    "Teddy bear",
-    batch_size=num_images_to_gen,
-)
+_ = pokemon_model.text_to_image("Teddy bear", batch_size=num_images_to_gen)
 
 
 def generate_image_fn(prompt: str, unconditional_guidance_scale: int) -> list:
@@ -43,9 +41,14 @@ def generate_image_fn(prompt: str, unconditional_guidance_scale: int) -> list:
         unconditional_guidance_scale=unconditional_guidance_scale,
     )
     end_time = time.time()
+    image_paths = []
     print(f"Time taken: {end_time - start_time} seconds.")
-    images = [base64.b64encode(image) for image in images]
-    return images
+    for i in range(len(images)):
+        filename = f"prompt_{i}.png"
+        image = Image.fromarray(images[i])
+        image.save(filename)
+        image_paths.append(filename)
+    return image_paths
 
 
 block = gr.Blocks(css=css)
@@ -128,9 +131,7 @@ with block:
                         label="Guidance Scale", minimum=10, maximum=50, value=40, step=1.0
                     )
                 btn = gr.Button("Generate image").style(
-                    margin=False,
-                    rounded=(False, True, True, False),
-                    full_width=False,
+                    margin=False, rounded=(False, True, True, False), full_width=False
                 )
 
         gallery = gr.Gallery(
@@ -157,16 +158,11 @@ with block:
             outputs=[gallery],
             postprocess=False,
         )
-        share_button.click(
-            None,
-            [],
-            [],
-            _js=share_js,
-        )
+        share_button.click(None, [], [], _js=share_js)
         gr.HTML(
             """
                 <div class="footer">
-                    <p>For details on the fine-tuning procedure, check out the <a style="text-decoration: underline;" href="https://github.com/sayakpaul/stable-diffusion-keras-ft/">corresponding repository</a>. This Space is adapted from the <a style="text-decoration: underline;" href="https://huggingface.co/spaces/stabilityai/stable-diffusion">original Stable Diffusion 2.1 Space</a>. The generated images may not be very impressive as the underlying model is still being fine-tuned as of this writing.</p>
+                    <p>For details on the fine-tuning procedure, check out the <a style="text-decoration: underline;" href="https://github.com/sayakpaul/stable-diffusion-keras-ft/">corresponding repository</a>. The generated images may not be very impressive as the underlying model is still being fine-tuned as of this writing. Since this Space is running on a Tesla T4 GPU, we took advantage of mixed-precision for optimized inference. Additionally, we leveraged XLA to carve out maximum performance from TensorFlow.  The front-end of this Space is adapted from the <a style="text-decoration: underline;" href="https://huggingface.co/spaces/stabilityai/stable-diffusion">original Stable Diffusion 2.1 Space</a>.</p>
                 </div>
                 <div class="acknowledgments">
                     <p><h4>LICENSE</h4>