Update app.py

app.py

@@ -220,34 +220,36 @@ with gr.Blocks(theme=theme, css=css) as app:
 
         
     with gr.TabItem("🔄 Flip Image", visible=True):
-        with gr.Row():
-            image_input = gr.Image(label="Upload Image", height=320, type="filepath")
-            image_output = gr.Image(format="png")
-        with gr.Row():    
-            image_button = gr.Button("Run", variant='primary')
-            image_button.click(flip_image, inputs=image_input, outputs=image_output)
-        with gr.Row():     
-            clear_results = gr.Button(value="Clear Image", variant="primary", elem_id="clear_button")
-            clear_results.click(lambda: (None, None), None, [image_input, image_output]) 
+        with gr.Column():
+            with gr.Row():
+                image_input = gr.Image(label="Upload Image", height=320, type="filepath")
+                image_output = gr.Image(format="png")
+            with gr.Row():    
+                image_button = gr.Button("Run", variant='primary')
+                image_button.click(flip_image, inputs=image_input, outputs=image_output)
+            with gr.Row():     
+                clear_results = gr.Button(value="Clear Image", variant="primary", elem_id="clear_button")
+                clear_results.click(lambda: (None, None), None, [image_input, image_output]) 
 
     with gr.TabItem("ℹ️ Tips", visible=True):
-        with gr.Row():
-            with gr.Column():
-                gr.Markdown(
-        """
-        <div style="max-width: 650px; margin: 2rem auto; padding: 1rem; border-radius: 10px; background-color: #f0f0f0;">
-            <h2 style="float: left; font-size: 1.5rem; margin-bottom: 1rem;">How to Use</h2>
-            <ol style="padding-left: 1.5rem;">
-                <li>Add an image to generate a prompt, this is optional.</li>
-                <li>If using an image to prompt, copy the prompt and paste into the prompt on tab 2</li>
-                <li>Enter a detailed description of the image you want to create.</li>
-                <li>Adjust advanced settings if desired (tap to expand).</li>
-                <li>Tap "Generate Image" and wait for your creation!</li>
-            </ol>
-            <p style="margin-top: 1rem; font-style: italic;">Tip: Be specific in your description for best results!</p>
-        </div>
-        """
-        )            
+        with gr.Column():
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown(
+            """
+            <div style="max-width: 650px; margin: 2rem auto; padding: 1rem; border-radius: 10px; background-color: #f0f0f0;">
+                <h2 style="float: left; font-size: 1.5rem; margin-bottom: 1rem;">How to Use</h2>
+                <ol style="padding-left: 1.5rem;">
+                    <li>Add an image to generate a prompt, this is optional.</li>
+                    <li>If using an image to prompt, copy the prompt and paste into the prompt on tab 2</li>
+                    <li>Enter a detailed description of the image you want to create.</li>
+                    <li>Adjust advanced settings if desired (tap to expand).</li>
+                    <li>Tap "Generate Image" and wait for your creation!</li>
+                </ol>
+                <p style="margin-top: 1rem; font-style: italic;">Tip: Be specific in your description for best results!</p>
+            </div>
+            """
+            )            
 
 app.queue(default_concurrency_limit=200, max_size=200)  # <-- Sets up a queue with default parameters
 if __name__ == "__main__":