Update app.py

app.py

@@ -14,8 +14,40 @@ 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: flex;
+  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;">
+<div style="text-align: center; font-size: 1 rem;">
     <p>Leer zelf Generative AI-tools te bouwen en te begrijpen!</p>
     <a href="https://www.glossybranding.com/masterclass">Schrijf je in voor de AI Masterclass</a>
 </div>
@@ -23,7 +55,13 @@ article_text = """
 
 
 def swap_face(source_file, target_file,doFaceEnhancer):
-
+        # Show the loader
+    display_loader = """
+    <script>
+    document.getElementById('loader').style.display = 'flex';
+    </script>
+    """
+    
     source_path = "input.jpg"
     target_path = "target.jpg"
 
@@ -70,7 +108,15 @@ def swap_face(source_file, target_file,doFaceEnhancer):
             return
 
     start()
-    return output_path
+
+    # Hide the loader
+    hide_loader = """
+    <script>
+    document.getElementById('loader').style.display = 'none';
+    </script>
+    """
+    
+    return output_path, hide_loader
 
 
 app = gr.Interface(
@@ -79,10 +125,10 @@ app = gr.Interface(
     gr.Image(),
     gr.Checkbox(label="face_enhancer?",
     info="do face enhancer?")],
-    outputs="image", 
-    article=article_text, 
+    outputs=["image", "html"],  # Add "html" as a second output
+     article=article_text, 
     allow_flagging="never"
 )
 app.launch(
-    show_api=False
+    show_api=False, preprocess_html=loader_html
 )