Update app.py

app.py

@@ -280,8 +280,72 @@ class Stage(Enum):
     SECOND_STAGE = "refiner"
     FULL = "full"
 
-css="""#disp_image {
+# CSS for styling
+css = """
+/* General Styles */
+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;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: opacity 0.3s ease;
+    width: 100%;
+    max-width: 250px;
+}
+
+.custom-button:hover {
+    opacity: 0.8;
+}
+
+.custom-title {
+    font-size: 36px;
+    background: linear-gradient(271.15deg, #00C7E2 0.27%, #12C06D 102.07%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: bold;
     text-align: center;
+    margin-bottom: 20px;
+    width: 100%;
+}
+
+.container, .example {
+    width: 100%;
+    padding: 0 1rem;
+    box-sizing: border-box;
+}
+
+h1, h2 {
+    color: #222222;
+}
+
+a {
+    color: #4a90e2;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.emoji {
+    font-size: 1.5em;
 }
 
 #share-btn-container {
@@ -291,8 +355,8 @@ css="""#disp_image {
     justify-content: center;
     align-items: center;
     border-radius: 9999px !important;
-    max-width: 13rem;
-    margin-left: auto;
+    max-width: 100%;
+    margin: 1rem auto;
 }
 
 #share-btn-container > div {
@@ -340,62 +404,7 @@ css="""#disp_image {
     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;
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    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%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-weight: bold;
-    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;
-}
-
+/* Responsive Adjustments */
 @media (max-width: 768px) {
     .custom-button {
         font-size: 20px;
@@ -406,11 +415,7 @@ a:hover {
         font-size: 28px;
     }
 
-    #disp_image, .container {
-        padding: 0 1rem;
-    }
-
-    h1 {
+    h1, h2 {
         font-size: 24px;
     }
 }
@@ -425,11 +430,7 @@ a:hover {
         font-size: 22px;
     }
 
-    .container {
-        padding: 0 0.5rem;
-    }
-
-    h1 {
+    h1, h2 {
         font-size: 20px;
     }
 
@@ -438,12 +439,17 @@ a:hover {
         padding: 0.5rem;
     }
 }
-        """
+"""
+
+# Function to process image generation
+def process_generate(fore, prompt, intensity, mode, refprompt, isrmbg):
+    # Your function logic here
+    return fore
+
+# Define the layout using Gradio
 block = gr.Blocks(css=css, title="## F.ai Fuzer").queue()
 with block:
-    gr.HTML('''
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    ''')  # Add the viewport meta tag here
+    gr.HTML('<meta name="viewport" content="width=device-width, initial-scale=1.0">')
 
     gr.HTML('''
         <div class="container">
@@ -471,11 +477,12 @@ with block:
         </ul>
         </div>
     ''')
+
     gr.HTML('<center><h2><a href="https://api-dashboard.fotographer.ai/login.html">🔗 Check out our API!</a></h2></center>')
     
     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():
@@ -489,16 +496,7 @@ with block:
     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():
-            gr.HTML('''
-                <div class="container">
-                <h1>🚀 For more freedom of usage, check out our API</h1>
-                <p>👤 You can test with free credits:</p>
-                <h2><a href="https://api-dashboard.fotographer.ai/login.html">🔗 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)
@@ -517,10 +515,8 @@ with block:
         </ul>
     ''')
 
-        
-    gr.HTML("""
-            <center><h2><a href="https://fotographer.ai/">🔗 Check Out our other Projects Here!</a></h2></center>""")
-    
+    gr.HTML('<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)
         gr.Examples(
@@ -529,24 +525,10 @@ with block:
             inputs=[
                 fore, prompt, intensity, mode, refprompt, isrmbg, dummy_image_for_outputs
             ]
-            
         )
-        '''
-        with gr.Column():
-            dummy_image_for_outputs = gr.Image(visible=False, label='Result')
-            gr.Examples(
-                examples=outputs_list,
-                inputs=[dummy_image_for_outputs],
-                
-            )
-        '''
-        
-        
 
     ins = [fore, prompt, intensity, mode, refprompt, isrmbg]
     generate_button.click(fn=process_generate, inputs=ins, outputs=[result_gallery])
 
-
-
 block.launch()