Update app.py

app.py

@@ -441,58 +441,53 @@ a:hover {
         """
 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('''
         <div class="container">
         <center><h1 class="custom-title">Fotographer.ai Fuzer v0.1: Transcending image Generation Control🎨</h1></center>
-        <h2>Control Your Creativity with Unmatched Precision: </h2>
+        <h2>Control Your Creativity with Unmatched Precision:</h2>
         <p>Fotographer.ai Fuzer v0.1 empowers you to seamlessly blend foreground elements with any background, while maintaining the shape and style consistency of the foreground. This tool transcends traditional image generation methods by giving you unprecedented control over the final output.</p>
-    
         <h2>Step-by-Step Instructions</h2>
         <p>Follow these instructions to control the generation of backgrounds while keeping the foreground's shape and style consistent:</p>
         <ul>
-            <li>
-                <span class="emoji">📝</span>
-                <strong>Step 1: Describe the Background</strong>
+            <li><span class="emoji">📝</span> <strong>Step 1: Describe the Background</strong>
                 <p>Start by providing a detailed description of the background you want to create.</p>
                 <div class="example">
                     <p><strong>Example:</strong> "A Perfume Bottle nestled on a crystalline cliff of glistening snow, overlooking a serene, moonlit valley."</p>
                 </div>
             </li>
-            <li>
-                <span class="emoji">💡</span>
-                <strong>Step 2: Describe the Foreground</strong>
+            <li><span class="emoji">💡</span> <strong>Step 2: Describe the Foreground</strong>
                 <p>Next, describe the texture, lighting, and style of the foreground element.</p>
                 <div class="example">
                     <p><strong>Example:</strong> "A transparent glass perfume bottle, vibrant, sunset lighting reflecting off its surface."</p>
                 </div>
             </li>
-            <li>
-                <span class="emoji">🎚️</span>
-                <strong>Step 3: Adjust the Intensity</strong>
+            <li><span class="emoji">🎚️</span> <strong>Step 3: Adjust the Intensity</strong>
                 <p>Decide how much change you want to apply to the image. Adjust the intensity to balance between keeping consistency and introducing new elements.</p>
             </li>
         </ul>
-    </div>
-        ''')
-    gr.HTML("""
-            <center><h2><a href="https://api-dashboard.fotographer.ai/login.html">🔗 Check out our API!</a></h2></center>""")
-
+        </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():
-            result_gallery = gr.Image(label='Output')  #gr.Gallery(height=400, object_fit='contain', label='Outputs')
+            result_gallery = gr.Image(label='Output')
+    
     with gr.Row():
         prompt = gr.Textbox(label="Prompt")
         with gr.Column():
             refprompt = gr.Textbox(label="Refiner Prompt")
+    
     with gr.Row():
-        mode = gr.Radio(choices=[e.value for e in Stage],
-                            value=Stage.FULL.value,
-                            label="Generation Mode", type='value')
+        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():
@@ -502,7 +497,7 @@ with block:
                 <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)
@@ -512,7 +507,6 @@ with block:
         generate_button = gr.Button(value="Generate", elem_classes="custom-button")
 
     gr.HTML('''
-        
         <div class="container">
         <h2>Features:</h2>
         <ul>
@@ -521,8 +515,8 @@ with block:
             <li>🎨 <strong>Custom Background Control:</strong> Choose or generate backgrounds that perfectly match your creative vision.</li>
             <li>⚙️ <strong>Easy Integration:</strong> Integrates smoothly with your existing workflow and tools.</li>
         </ul>
-    </div>
-        ''')
+    ''')
+
         
     gr.HTML("""
             <center><h2><a href="https://fotographer.ai/">🔗 Check Out our other Projects Here!</a></h2></center>""")