Update app.py

app.py

@@ -103,36 +103,37 @@ STYLE_PRESETS = [
     }
 ]
 
-# Updated CSS for full-screen layout and clearer contrast
+# Updated CSS for improved readability and scrolling
 css = '''
-/* Make the overall container take the full width and height of the viewport */
+/* Allow body to scroll freely */
 html, body {
     margin: 0;
     padding: 0;
-    height: 100%;
     background: #f0f2f5;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: #333333;
+    overflow-y: scroll;
 }
 
-/* Outer container spans full width */
+/* Outer container can grow but allow scrolling */
 #component-0 {
     width: 100%;
-    min-height: 100vh;
-    padding: 20px;
     box-sizing: border-box;
+    padding: 20px;
 }
 
-/* Main content container with clear, high-contrast colors */
+/* Main content container with good contrast and spacing */
 .container {
     background-color: #ffffff;
+    color: #333333;
     border-radius: 10px;
     padding: 30px;
-    margin: auto;
+    margin: 0 auto 40px auto; /* Margin bottom to ensure space for scrolling */
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
     max-width: 1400px;
 }
 
-/* Header styling with full contrast */
+/* Header styling with higher contrast text on dark background */
 .header {
     text-align: center;
     margin-bottom: 2rem;
@@ -150,7 +151,7 @@ html, body {
     margin: 1rem 0;
 }
 
-/* Preset cards with clear borders and text */
+/* Preset cards: clear borders, high contrast text */
 .preset-card {
     background: #ffffff;
     padding: 1rem;
@@ -175,13 +176,14 @@ html, body {
     margin-bottom: 0.5rem;
 }
 
-/* Input container with clear text and background */
+/* Input container with a lighter background for contrast */
 .input-container {
     background: #e6f0ff;
+    color: #003366;
     padding: 1.5rem;
     border-radius: 8px;
     margin-bottom: 1rem;
-    color: #003366;
+    border: 1px solid #003366;
 }
 
 /* Output gallery with a clear border and white background */
@@ -192,7 +194,7 @@ html, body {
     background: #ffffff;
 }
 
-/* Hide footer */
+/* Ensure any footer is hidden */
 footer { display: none !important; }
 '''
 
@@ -205,7 +207,10 @@ def generate_image(images, gender, prompt, progress=gr.Progress(track_tqdm=True)
     prompt = f"{prompt}, single person, solo portrait, one person only, centered composition"
     
     # Add negative prompt to prevent multiple people
-    negative_prompt = "multiple people, group photo, crowd, double portrait, triple portrait, many faces, multiple faces, two faces, three faces, multiple views, collage, photo grid"
+    negative_prompt = (
+        "multiple people, group photo, crowd, double portrait, triple portrait, "
+        "many faces, multiple faces, two faces, three faces, multiple views, collage, photo grid"
+    )
     
     faceid_all_embeds = []
     first_iteration = True
@@ -216,15 +221,23 @@ def generate_image(images, gender, prompt, progress=gr.Progress(track_tqdm=True)
     for image in images:
         face = cv2.imread(image)
         faces = app.get(face)
+        if not faces:
+            continue
         faceid_embed = torch.from_numpy(faces[0].normed_embedding).unsqueeze(0)
         faceid_all_embeds.append(faceid_embed)
 
+        # For the first face, keep a reference image aligned
         if first_iteration and preserve_face_structure:
             face_image = face_align.norm_crop(face, landmark=faces[0].kps, image_size=224)
             first_iteration = False
 
+    if not faceid_all_embeds:
+        return None
+
+    # Average embedding across all provided images
     average_embedding = torch.mean(torch.stack(faceid_all_embeds, dim=0), dim=0)
 
+    # Generate the new image using IP-Adapter FaceID Plus
     image = ip_model_plus.generate(
         prompt=prompt,
         negative_prompt=negative_prompt,
@@ -234,9 +247,9 @@ def generate_image(images, gender, prompt, progress=gr.Progress(track_tqdm=True)
         shortcut=True, 
         s_scale=face_strength, 
         width=512, 
-        height=768,  # Adjusted for better single-person portrait composition
+        height=768,  
         num_inference_steps=100,
-        guidance_scale=7.5  # Added to enforce prompt adherence
+        guidance_scale=7.5  
     )
     return image
 
@@ -246,8 +259,9 @@ def create_preset_click_handler(idx, prompt_input):
     return handler
 
 with gr.Blocks(css=css) as demo:
-
-        
+    # You could add a visitor badge or other element here if desired
+    # For now, we omit it to focus on the scrolling and contrast fixes
+    
     with gr.Column(elem_classes="container"):
         with gr.Column(elem_classes="header"):
             gr.Markdown("# ✨ MagicFace V3")
@@ -310,6 +324,8 @@ with gr.Blocks(css=css) as demo:
                 - Try combining different historical or fictional characters
                 - Feel free to modify the preset prompts
                 - Click on generated images to view them in full size
+                
+                Scroll to see more content if your screen is small. Enjoy!
             """)
 
     generate_button.click(