Refactor image display settings in app.py by adding CSS for image size control and updating the result image component to include a CSS class for styling.

app.py

@@ -1,7 +1,6 @@
 import base64
 import io
 import random
-import time
 
 import gradio as gr
 import openai
@@ -84,6 +83,13 @@ css = """
     margin: 0 auto;
     max-width: 640px;
 }
+
+/* Control image size */
+.generated-image {
+    max-height: 512px;
+    width: auto;
+    object-fit: contain;
+}
 """
 
 examples = [
@@ -152,7 +158,9 @@ with gr.Blocks(css=css, title="OpenAI Image Generator") as demo:
             "1024x1024",  # size
             "standard",  # quality
             "vivid",  # style
-        ]
+        ],
+        storage_key="openai_image_generator_settings",
+        secret="77f22b9e8474262759b2bc23760b76af",
     )
 
     with gr.Row():
@@ -181,7 +189,11 @@ with gr.Blocks(css=css, title="OpenAI Image Generator") as demo:
                 )
                 run_button = gr.Button("Run", scale=0, variant="primary")
 
-            result = gr.Image(label="Result", show_label=False)
+            result = gr.Image(
+                label="Result",
+                show_label=False,
+                elem_classes=["generated-image"],  # Add the CSS class
+            )
             gr.Examples(examples=examples, inputs=[prompt])
 
     # Load settings from browser storage