Update app.py

app.py

@@ -86,6 +86,7 @@ css = """
     display: inline-block;
     padding-right: 20px;
     padding-left: 20px;
+    vertical-align: top;
 }
 
 #right-column {
@@ -104,6 +105,22 @@ css = """
     margin-top: 10px;
     display: block;
 }
+
+#prompt-info {
+    margin-bottom: 20px;
+}
+
+#result {
+    margin-bottom: 20px;
+}
+
+.gradio-tabs > .tab-item {
+    margin-bottom: 20px;
+}
+
+#prompt {
+    margin-bottom: 20px;
+}
 """
 
 with gr.Blocks(css=css) as demo:
@@ -113,10 +130,10 @@ with gr.Blocks(css=css) as demo:
             gr.Markdown("""# Text-to-Image Gradio Template""")
 
             # Display result image at the top
-            result = gr.Image(label="Result", show_label=False)
+            result = gr.Image(label="Result", show_label=False, elem_id="result")
 
             # Add a textbox to display the prompts used for generation
-            prompt_info = gr.Textbox(label="Prompts Used", lines=3, interactive=False)
+            prompt_info = gr.Textbox(label="Prompts Used", lines=3, interactive=False, elem_id="prompt-info")
 
             # Advanced Settings and Run Button
             with gr.Accordion("Advanced Settings", open=False):
@@ -175,8 +192,7 @@ with gr.Blocks(css=css) as demo:
             run_button = gr.Button("Run", elem_id="run-button")
 
         with gr.Column(elem_id="right-column"):
-            gr.Markdown("### Prompt / Tag Input")
-
+            # Removed the Prompt / Tag Input title here
             # State to track active tab
             active_tab = gr.State("Prompt Input")
 
@@ -189,6 +205,7 @@ with gr.Blocks(css=css) as demo:
                         max_lines=1,
                         placeholder="Enter your prompt",
                         container=False,
+                        elem_id="prompt"
                     )
                     prompt_tab.select(lambda: "Prompt Input", inputs=None, outputs=active_tab)