Update app.py

app.py

@@ -14,6 +14,38 @@ from roop.utilities import normalize_output_path
 import os
 from PIL import Image
 
+# Loader HTML and CSS
+loader_html = """
+<div id="loader" style="
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.9);
+  display: none; /* Hidden by default */
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+">
+  <div class="spinner" style="
+    width: 50px;
+    height: 50px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  "></div>
+</div>
+
+<style>
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>
+"""
+
 article_text = """
 <div style="text-align: center;">
     <p>Leer zelf Generative AI-tools te bouwen en te begrijpen!</p>
@@ -22,8 +54,14 @@ article_text = """
 """
 
 
-def swap_face(source_file, target_file,doFaceEnhancer):
-
+def swap_face(source_file, target_file, doFaceEnhancer):
+    # Show the loader
+    show_loader = """
+    <script>
+    document.getElementById('loader').style.display = 'flex';
+    </script>
+    """
+    
     source_path = "input.jpg"
     target_path = "target.jpg"
 
@@ -42,7 +80,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
@@ -70,19 +108,46 @@ def swap_face(source_file, target_file,doFaceEnhancer):
             return
 
     start()
-    return output_path
-
-
-app = gr.Interface(
-    fn=swap_face, 
-    inputs=[gr.Image(), 
-    gr.Image(),
-    gr.Checkbox(label="face_enhancer?",
-    info="do face enhancer?")],
-    outputs="image", 
-    article=article_text, 
-    allow_flagging="never"
-)
-app.launch(
-    show_api=False
-)
+    
+    # Hide the loader
+    hide_loader = """
+    <script>
+    document.getElementById('loader').style.display = 'none';
+    </script>
+    """
+    
+    return output_path, hide_loader
+
+
+# ============================================================
+# CHANGES START HERE
+# ============================================================
+
+# Use Gradio Blocks for more flexibility
+with gr.Blocks() as demo:
+    
+    # Add the loader HTML
+    gr.HTML(loader_html)
+    
+    # Add the face-swap interface
+    with gr.Column():  # Stack everything vertically
+        source_image = gr.Image(label="Source Image")
+        target_image = gr.Image(label="Target Image")
+        do_face_enhancer = gr.Checkbox(label="Face Enhancer?", info="Do face enhancer?")
+        submit_button = gr.Button("Swap Faces")
+        output_image = gr.Image(label="Output Image")
+        gr.HTML(article_text)
+    
+    # Define the function to call on button click
+    submit_button.click(
+        fn=swap_face,
+        inputs=[source_image, target_image, do_face_enhancer],
+        outputs=[output_image, gr.HTML()]  # Output image and HTML (to hide loader)
+    )
+
+# ============================================================
+# CHANGES END HERE
+# ============================================================
+
+# Launch the app
+demo.launch(show_api=False)