Update app.py

app.py

@@ -12,7 +12,9 @@ from roop.utilities import normalize_output_path
 import os
 from PIL import Image
 
-def swap_face(source_file, target_file, doFaceEnhancer):
+
+def swap_face(source_file, target_file,doFaceEnhancer):
+
     source_path = "input.jpg"
     target_path = "target.jpg"
 
@@ -31,7 +33,7 @@ def swap_face(source_file, target_file, doFaceEnhancer):
         roop.globals.source_path, roop.globals.target_path, output_path
     )
     if doFaceEnhancer == True:
-        roop.globals.frame_processors = ["face_swapper", "face_enhancer"]
+        roop.globals.frame_processors = ["face_swapper","face_enhancer"]
     else:
         roop.globals.frame_processors = ["face_swapper"]
     roop.globals.headless = True
@@ -61,22 +63,33 @@ def swap_face(source_file, target_file, doFaceEnhancer):
     start()
     return output_path
 
-html1 = "<h1>Welcome to Face Swap App</h1>"
-html2 = "<p>This app allows you to swap faces in images. Upload your source and target images, and optionally enable face enhancement.</p>"
-html3 = "<footer>Created by Your Name</footer>"
 
 app = gr.Interface(
     fn=swap_face,
-    inputs=[
-        gr.Image(label="Source Image"),
-        gr.Image(label="Target Image"),
-        gr.Checkbox(label="Face Enhancer?", info="Do face enhancer?")
-    ],
-    outputs=[
-        gr.HTML(html1),
-        "image",
-        gr.HTML(html2),
-        gr.HTML(html3)
-    ]
+    inputs=[gr.Image(), gr.Image(), gr.Checkbox(label="face_enhancer?", info="do face enhancer?")],
+    outputs="image",
+    layout="vertical"
 )
-app.launch()
+
+# Add HTML sections
+app.components.insert(0, gr.HTML("""
+    <div style="background-color: #f0f0f0; padding: 10px; border-radius: 5px;">
+        <h3>Banner 1: Welcome to Face Swap!</h3>
+        <p>Upload your source and target images to begin.</p>
+    </div>
+"""))
+
+app.components.insert(2, gr.HTML("""
+    <div style="background-color: #e0f0e0; padding: 10px; border-radius: 5px;">
+        <h4>Banner 2: Optional Face Enhancement</h4>
+        <p>Check the box to apply face enhancement to the output.</p>
+    </div>
+"""))
+
+app.components.append(gr.HTML("""
+    <div style="background-color: #f0f0f0; padding: 10px; border-radius: 5px;">
+        <p>Banner 3: Results will appear below.</p>
+    </div>
+"""))
+
+app.launch()