Update app.py

app.py

@@ -1,4 +1,4 @@
-#version 2
+#version 2.1
 import os
 import math
 import gradio as gr
@@ -32,7 +32,7 @@ prompt_list = ["A Perfume Bottle, resting on a wooden table, surrounded by laven
 example_list = [
         [
             "examples/in5.png",
-            "A Perfume bottle, perched delicately on a rock by the ocean, with a breathtaking sunset casting a golden glow over the waves",
+            "A Perfume bottle, perched delicately on a rock ⁄by the ocean, with a breathtaking sunset casting a golden glow over the waves",
             3.5,
             "full",
             "(( A transparent perfume Bottle with a black cap )), and a yellow liquide, sunset, transparent",
@@ -136,7 +136,6 @@ def create_square_image(image):
     """
     Create a new square image with the side length equal to the largest dimension
     of the original image and paste the original image at the center on a transparent canvas.
-
     :param image: A PIL image.
     :return: A new square PIL image.
     """
@@ -196,7 +195,6 @@ def process(data, api, api_key):
 def resize_to_fit(max_size, original_size):
     """
     Calculate the new size for an image to fit within max_size while maintaining the aspect ratio.
-
     :param max_size: Maximum allowed size as a tuple (width, height).
     :param original_size: Original size of the image as a tuple (width, height).
     :return: New size as a tuple (new_width, new_height) that fits within max_size while maintaining the aspect ratio.
@@ -297,7 +295,6 @@ class Stage(Enum):
 css="""#disp_image {
     text-align: center;
 }
-
 #share-btn-container {
     padding-left: 0.5rem !important;
     padding-right: 0.5rem !important;
@@ -308,17 +305,14 @@ css="""#disp_image {
     max-width: 13rem;
     margin-left: auto;
 }
-
 #share-btn-container > div {
     flex-direction: row;
     background: black;
     align-items: center;
 }
-
 #share-btn-container:hover {
     background-color: #060606;
 }
-
 #share-btn {
     all: initial;
     color: #ffffff;
@@ -330,43 +324,32 @@ css="""#disp_image {
     padding-bottom: 0.5rem !important;
     right: 0;
 }
-
 #share-btn * {
     all: unset;
 }
-
 #share-btn-container div:nth-child(-n+2) {
     width: auto !important;
     min-height: 0px !important;
 }
-
 #share-btn-container .wrap {
     display: none !important;
 }
-
 #share-btn-container.hidden {
     display: none !important;
 }
-
 #duplicate-button {
     margin-left: auto;
     color: #fff;
     background: #1565c0;
 }
-
 body {
     font-family: Arial, sans-serif;
     background-color: #f4f4f9;
     margin: 0;
     padding: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
     min-height: 100vh;
     color: #333;
 }
-
 .custom-button {
     background: linear-gradient(271.15deg, #00C7E2 0.27%, #00CC6A 48.52%, #70FF00 102.07%);
     font-size: 30px;
@@ -377,11 +360,9 @@ body {
     cursor: pointer;
     transition: opacity 0.3s ease;
 }
-
 .custom-button:hover {
     opacity: 0.8;
 }
-
 .custom-title {
     font-size: 36px;
     background: linear-gradient(271.15deg, #00C7E2 0.27%, #12C06D 102.07%);
@@ -391,62 +372,49 @@ body {
     text-align: center;
     margin-bottom: 20px;
 }
-
 h1 {
     color: #222222;
 }
-
 a {
     color: #4a90e2;
     text-decoration: none;
     font-weight: bold;
 }
-
 a:hover {
     text-decoration: underline;
 }
-
 .emoji {
     font-size: 1.5em;
 }
-
 @media (max-width: 768px) {
     .custom-button {
         font-size: 20px;
         padding: 8px 16px;
     }
-
     .custom-title {
         font-size: 28px;
     }
-
     #disp_image, .container {
         padding: 0 1rem;
     }
-
     h1 {
         font-size: 24px;
     }
 }
-
 @media (max-width: 480px) {
     .custom-button {
         font-size: 16px;
         padding: 6px 12px;
     }
-
     .custom-title {
         font-size: 22px;
     }
-
     .container {
         padding: 0 0.5rem;
     }
-
     h1 {
         font-size: 20px;
     }
-
     #share-btn-container {
         max-width: 100%;
         padding: 0.5rem;
@@ -463,7 +431,6 @@ with block:
         <h2>Welcome to the Updated Version of FAI Fuzer!</h2>
         <p>This is FAI Fuzer medium v0.3, an updated version of our previously released Fuzer v0.1. In this version, we've introduced several enhancements, including the addition of a new anime model to broaden your creative possibilities.</p>
         <p>We appreciate the feedback and support from our community and are excited to bring these new features to you.</p>
-
         <p><strong>What's New in v0.3:</strong></p>
         <ul>
             <li>🚀 Introduction of an Anime Model: Now you can choose between "realistic" and "anime" styles for your images.</li>
@@ -508,28 +475,29 @@ with block:
     with gr.Row():
         gr.Markdown("### F.ai Fuzer: Real Composite Photography in 2 minutes!")
     with gr.Row():
-        fore = gr.Image(image_mode='RGBA', type="pil", label="Foreground Image", height=400, width=400)
-        with gr.Column():
-            result_gallery = gr.Image(label='Output')  #gr.Gallery(height=400, object_fit='contain', label='Outputs')
+        fore = gr.Image(image_mode='RGBA', type="pil", label="Foreground Image", height=400, width=400, min_width=400)
+        # with gr.Column():
+        result_gallery = gr.Image(label='Output', min_width=400)  #gr.Gallery(height=400, object_fit='contain', label='Outputs')
     with gr.Row():
-        prompt = gr.Textbox(label="Prompt")
-        with gr.Column():
-            refprompt = gr.Textbox(label="Refiner Prompt")
+        prompt = gr.Textbox(label="Prompt", min_width=400)
+        # with gr.Column():
+        refprompt = gr.Textbox(label="Refiner Prompt", min_width=400)
     with gr.Row():
-        mode = gr.Radio(choices=[e.value for e in Stage],
-                            value=Stage.FULL.value,
-                            label="Generation Mode", type='value')
-        mode.change(fn=update_value, inputs=mode, outputs=mode)
+        with gr.Column(min_width=400):
+            mode = gr.Radio(choices=[e.value for e in Stage],
+                                value=Stage.FULL.value,
+                                label="Generation Mode", type='value', min_width=400)
+            mode.change(fn=update_value, inputs=mode, outputs=mode)
 
-        with gr.Column():
-            model_type = gr.Dropdown(choices=["realistic","anime"], label="Model Type", value="realistic")  # Adding the Dropdown for model selection
+            model_type = gr.Dropdown(choices=["realistic","anime"], label="Model Type", value="realistic", min_width=400)  # Adding the Dropdown for model selection
 
+        with gr.Column(min_width=400):
         # Adding Advanced Settings for the number of steps and control strength
-        with gr.Accordion("Advanced Settings", open=True):
-            steps = gr.Slider(label="Number of Steps", minimum=10, maximum=100, value=30, step=1)
-            control_strength = gr.Slider(label="Control Strength", minimum=0.1, maximum=1.0, value=0.5, step=0.1)
+            with gr.Accordion("Advanced Settings", open=True, ):
+                steps = gr.Slider(label="Number of Steps", minimum=10, maximum=100, value=30, step=1)
+                control_strength = gr.Slider(label="Control Strength", minimum=0.1, maximum=1.0, value=0.5, step=0.1)
         
-        with gr.Column():
+        with gr.Column(min_width=400):
             gr.HTML('''
                 <div class="container">
                 <h1>🚀 For more freedom of usage, check out our API</h1>
@@ -537,7 +505,7 @@ with block:
                 <h2><a href="https://fotographer.ai/api/top">🔗 API Dashboard</a></h2>
                 </div>
                 ''')
-            
+        
     with gr.Row():
         intensity = gr.Slider(label="Refiner Strength", minimum=1.0, maximum=7.0, value=3.0, step=0.5)
         intensity.change(fn=update_value, inputs=intensity, outputs=intensity)
@@ -562,7 +530,7 @@ with block:
             <center><h2><a href="https://fotographer.ai/">🔗 Check Out our other Projects Here!</a></h2></center>""")
     
     with gr.Row():
-        dummy_image_for_outputs = gr.Image(visible=False, label='Result', height=400, width=400)
+        dummy_image_for_outputs = gr.Image(visible=False, label='Result')
         gr.Examples(
             fn=lambda *args: [args[-1]],
             examples=example_list,