Update app.py

app.py

@@ -87,6 +87,10 @@ examples = [
 ]
 
 css = """
+#col-container {
+    margin: 0 auto;
+    max-width: 960px;
+}
 .generate-btn {
     background: linear-gradient(90deg, #4B79A1 0%, #283E51 100%) !important;
     border: none !important;
@@ -102,7 +106,7 @@ with gr.Blocks(css=css) as app:
     gr.HTML("<center><h1>FLUX.1-Dev with LoRA support</h1></center>")
     with gr.Column(elem_id="app-container"):
         with gr.Row():
-            with gr.Column(elem_id="prompt-container"):
+            with gr.Column(elem_id="col-container"):
                 with gr.Row():
                     text_prompt = gr.Textbox(label="Prompt", placeholder="Enter a prompt here", lines=3, elem_id="prompt-text-input")
                 with gr.Row():
@@ -122,18 +126,18 @@ with gr.Blocks(css=css) as app:
                 with gr.Row():
                     # text_button = gr.Button("Run", variant='primary', elem_id="gen-button")
                     text_button = gr.Button("✨ Generate Image", variant='primary', elem_classes=["generate-btn"])
-            with gr.Column():
+            with gr.Column(elem_id="col-container"):
                 with gr.Row():
                     image_output = gr.Image(type="pil", label="Image Output", elem_id="gallery")
                 with gr.Row():
                     seed_output = gr.Textbox(label="Seed Used", show_copy_button = True)
-
-        gr.Markdown(article_text)
         
-        gr.Examples(
-            examples = examples,
-            inputs = [text_prompt],
-        )
+        gr.Markdown(article_text)
+        with gr.Row():
+            gr.Examples(
+                examples = examples,
+                inputs = [text_prompt],
+            )
 
         
         text_button.click(query, inputs=[custom_lora, text_prompt, steps, cfg, randomize_seed, seed, width, height], outputs=[image_output,seed_output, seed])