Update app.py

app.py

@@ -281,8 +281,70 @@ 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;
+    align-items: center;
+    color: #333;
+}
+
+.custom-button {
+    background: linear-gradient(271.15deg, #00C7E2 0.27%, #00CC6A 48.52%, #70FF00 102.07%);
+    font-size: 4vw; /* Responsive font size */
+    color: white;
+    padding: 2vw 4vw; /* Responsive padding */
+    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: 6vw; /* Responsive font size */
+    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: 2vw;
+    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 {
@@ -292,8 +354,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 {
@@ -341,97 +403,39 @@ 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;
+img, canvas {
+    max-width: 100%;
+    height: auto;
 }
 
+/* Responsive Adjustments */
 @media (max-width: 768px) {
     .custom-button {
-        font-size: 20px;
-        padding: 8px 16px;
+        font-size: 5vw;
+        padding: 2vw 4vw;
     }
 
     .custom-title {
-        font-size: 28px;
-    }
-
-    #disp_image, .container {
-        padding: 0 1rem;
+        font-size: 8vw;
     }
 
-    h1 {
-        font-size: 24px;
+    h1, h2 {
+        font-size: 6vw;
     }
 }
 
 @media (max-width: 480px) {
     .custom-button {
-        font-size: 16px;
-        padding: 6px 12px;
+        font-size: 6vw;
+        padding: 3vw 6vw;
     }
 
     .custom-title {
-        font-size: 22px;
-    }
-
-    .container {
-        padding: 0 0.5rem;
+        font-size: 10vw;
     }
 
-    h1 {
-        font-size: 20px;
+    h1, h2 {
+        font-size: 6vw;
     }
 
     #share-btn-container {
@@ -439,72 +443,64 @@ 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">')
+
     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():
-            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)
@@ -513,7 +509,6 @@ with block:
         generate_button = gr.Button(value="Generate", elem_classes="custom-button")
 
     gr.HTML('''
-        
         <div class="container">
         <h2>Features:</h2>
         <ul>
@@ -522,12 +517,10 @@ 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>""")
-    
+    ''')
+
+    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(
@@ -536,23 +529,9 @@ 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()