layout

gradio_interface.py

@@ -25,22 +25,26 @@ Here, by feeding the model an image and then asking it to generate that same ima
         with gr.Row():
             input_image = gr.Image(type="filepath", label="Input Image")
             output_images = gr.Gallery(label="Generated Images", columns=2, rows=2)
-        
-        gr.Markdown(explanation)
-        prompt = gr.Textbox(label="Prompt", value="Exactly what is shown in the image.")
-        num_images = gr.Slider(minimum=1, maximum=12, value=12, step=1, label="Number of Images to Generate")
-        cfg_weight = gr.Slider(minimum=1, maximum=10, value=5, step=0.1, label="CFG Weight")
-        generate_btn = gr.Button("Generate", variant="primary", size="lg")
+
+        with gr.Row():
+            # New layout here: Controls on the left, explanation on the right
+            with gr.Column(scale=1):
+                prompt = gr.Textbox(label="Prompt", value="Exactly what is shown in the image.")
+                num_images = gr.Slider(minimum=1, maximum=12, value=12, step=1, label="Number of Images to Generate")
+                cfg_weight = gr.Slider(minimum=1, maximum=10, value=5, step=0.1, label="CFG Weight")
+                generate_btn = gr.Button("Generate", variant="primary", size="lg")
+            with gr.Column(scale=2):
+                gr.Markdown(explanation)
         
         generate_btn.click(
             fn=gradio_process_and_generate,
             inputs=[input_image, prompt, num_images, cfg_weight],
             outputs=output_images
         )
+
         gr.Examples(
             examples=examples,
             inputs=[input_image, dummy]
-    )
-        
+        )
 
     return demo