Update app.py

app.py

@@ -83,9 +83,9 @@ def query(prompt, is_negative=False, steps=35, cfg_scale=7, sampler="DPM++ 2M Ka
         return None
 
 examples = [
-    ["a beautiful woman with blonde hair and blue eyes"],
-    ["a beautiful woman with brown hair and grey eyes"],
-    ["a beautiful woman with black hair and brown eyes"],
+    "a beautiful woman with blonde hair and blue eyes",
+    "a beautiful woman with brown hair and grey eyes",
+    "a beautiful woman with black hair and brown eyes",
 ]
 
 def encode_image(image_path):
@@ -146,7 +146,6 @@ def feifeichat(image):
 
 # CSS to style the app
 css = """
-.gradio-container {background-color: MediumAquaMarine}
 footer{display:none !important}
 #app-container {
     max-width: 930px;
@@ -159,20 +158,19 @@ footer{display:none !important}
 with gr.Blocks(theme=theme, css=css) as app:
     # Add a title to the app
     gr.HTML("<center><h1>🎨 Stable Diffusion 3.5 Large Turbo + 🇬🇧</h1></center>")
-    # with gr.Tabs() as tabs:
-    with gr.Tab(label="🖼 Image To Prompt 📄", visible=True):
-        with gr.Row():
-            with gr.Column():
-                input_img = gr.Image(label="Input Picture 🖼️",height=320,type="filepath")
-                submit_btn = gr.Button(value="Submit", variant='primary')
+    with gr.Tabs() as tabs:
+        with gr.TabItem(label="🖼 Image To Prompt 📄", visible=True):
+            with gr.Row():
+                with gr.Column():
+                    input_img = gr.Image(label="Input Picture 🖼️",height=320,type="filepath")
+                    submit_btn = gr.Button(value="Submit", variant='primary')
                 with gr.Column():
                     output_text = gr.Textbox(label="Flux Prompt ✍️", show_copy_button = True)
                     clr_button =gr.Button("Clear 🗑️ ",variant="primary", elem_id="clear_button")
                     clr_button.click(lambda: (None, None), None, [input_img, output_text], queue=False, show_api=False)
         
         submit_btn.click(feifeichat, [input_img], [output_text])
-
-        #Create image from prompt
+        
         with gr.TabItem("✍️ Text to Image 🖼", visible=True):
             # Container for all the UI elements
             with gr.Column(elem_id="app-container"):
@@ -203,39 +201,35 @@ with gr.Blocks(theme=theme, css=css) as app:
                     clear_prompt.click(lambda: (None), None, [text_prompt], queue=False, show_api=False)
 
                 with gr.Column(elem_id="app-container"):
-                    # Image output area to display the generated image
-                    with gr.Row():
-                        image_output = gr.Image(type="pil", label="Image Output", format="png", show_share_button=False, elem_id="gallery")
-
-                with gr.Column():    
-                    with gr.Row():
-                        clear_results = gr.Button(value="Clear Image 🗑️", variant="primary", elem_id="clear_button")
-                        clear_results.click(lambda: (None), None, [image_output], queue=False, show_api=False)
-                    
-                    with gr.Row():        
+                    with gr.Group():
+                        # Image output area to display the generated image
+                        with gr.Row():
+                            image_output = gr.Image(type="pil", label="Image Output", format="png", show_share_button=False, elem_id="gallery")
+                            
                         gr.Examples(
                             examples = examples,    
                             inputs = [text_prompt],    
                         )
-                   
+                    with gr.Group():
+                        with gr.Row():
+                            clear_results = gr.Button(value="Clear Image 🗑️", variant="primary", elem_id="clear_button")
+                            clear_results.click(lambda: (None), None, [image_output], queue=False, show_api=False)
+                        
                     # Bind the button to the query function with the added width and height inputs
-                    
                     text_button.click(query, inputs=[text_prompt, negative_prompt, steps, cfg, method, seed, strength, width, height], outputs=image_output)
         
-        #Flip  image code
-            with gr.Tab("🔄 Flip Image", visible=True):
-                with gr.Row():
-                    image_input = gr.Image(type="numpy", label="Upload Image",height=320)
-                    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("🔄 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.Tab("ℹ️ Tips", visible=True):
+        with gr.TabItem("ℹ️ Tips", visible=True):
             with gr.Column():
                 with gr.Row():
                     with gr.Column():