Update app.py

app.py

@@ -12,17 +12,19 @@ from roop.processors.frame.core import get_frame_processors_modules
 from roop.utilities import normalize_output_path
 import os
 from PIL import Image
-import time
 
 def swap_face_image(source_file, target_file, doFaceEnhancer):
     source_path = "input.jpg"
     target_path = "target.jpg"
-    output_path = f"output_{int(time.time())}.jpg"
+    output_path = "output.jpg"
 
     # Save source and target images
     Image.fromarray(source_file).save(source_path)
     Image.fromarray(target_file).save(target_path)
 
+    print("source_path: ", source_path)
+    print("target_path: ", target_path)
+
     # Set globals
     roop.globals.source_path = source_path
     roop.globals.target_path = target_path
@@ -35,225 +37,137 @@ def swap_face_image(source_file, target_file, doFaceEnhancer):
     roop.globals.execution_providers = decode_execution_providers(["cuda"])
     roop.globals.execution_threads = suggest_execution_threads()
 
+    print("start process", source_path, target_path, output_path)
+
     # Ensure processors are ready
     for frame_processor in get_frame_processors_modules(roop.globals.frame_processors):
         if not frame_processor.pre_check():
             return None
 
     start()
-    
+
     # Return output image
-    if os.path.exists(output_path):
-        return Image.open(output_path)
-    else:
-        return None
+    return Image.open(output_path)
 
-# Custom CSS for clean UI
+# Custom CSS for AI styling
 custom_css = """
-:root {
-    --neon-primary: #00d9ff;
-    --neon-secondary: #ff00c8;
-    --dark-bg: #0a0e17;
-    --dark-surface: #131a2a;
-    --dark-card: #1a243b;
-    --dark-border: #253556;
-    --text-primary: #ffffff;
-    --text-secondary: #a0b3e5;
-}
-
-body {
-    background-color: var(--dark-bg);
-    color: var(--text-primary);
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
 #title {
     text-align: center;
     font-weight: 800;
     font-size: 2.5em;
-    margin: 0;
-    padding: 20px 0;
-    color: var(--neon-primary);
-    text-shadow: 0 0 10px rgba(0, 217, 255, 0.7);
-}
-
-.gradio-container {
-    background: var(--dark-bg) !important;
-    color: var(--text-primary) !important;
+    background: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.5em;
 }
 
-.column {
-    background: var(--dark-card) !important;
-    border-radius: 8px;
-    padding: 20px;
-    border: 1px solid var(--dark-border);
-}
-
-.image-container {
-    border: 2px dashed var(--dark-border);
+#subtitle {
+    text-align: center;
+    margin-bottom: 2em;
+    color: #94a3b8;
+}
+
+.status-indicator {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin-right: 8px;
+    background: #10B981;
+    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+    }
+}
+
+.enhancer-label {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 10px;
     border-radius: 8px;
-    padding: 15px;
-    background: var(--dark-surface);
-    min-height: 300px;
-    display: flex;
-    flex-direction: column;
+    border-left: 4px solid #FF6A88;
 }
 
-.image-container:hover {
-    border-color: var(--neon-primary);
-}
-
-.primary-button {
-    background: linear-gradient(45deg, var(--neon-primary), var(--neon-secondary)) !important;
-    color: white !important;
-    font-weight: bold !important;
+.gr-button {
+    background: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%) !important;
     border: none !important;
-    border-radius: 6px !important;
-    padding: 12px 24px !important;
-    margin-top: 15px;
-}
-
-.primary-button:hover {
-    background: linear-gradient(45deg, var(--neon-secondary), var(--neon-primary)) !important;
-}
-
-label {
-    color: var(--text-primary) !important;
+    font-weight: 600 !important;
 }
 
-.gr-box {
-    background: var(--dark-surface) !important;
-    color: var(--text-primary) !important;
-    border: 1px solid var(--dark-border) !important;
-    border-radius: 6px !important;
+.gr-button:hover {
+    box-shadow: 0 5px 15px rgba(255, 106, 136, 0.4) !important;
 }
 
-.gr-markdown h3 {
-    color: var(--text-primary) !important;
-    margin-top: 0;
-    margin-bottom: 15px;
-}
-
-.download-button {
-    background: linear-gradient(45deg, #9600ff, var(--neon-secondary)) !important;
-    color: white !important;
-    font-weight: bold !important;
-    border: none !important;
-    border-radius: 6px !important;
-    padding: 12px 24px !important;
-    margin-top: 15px;
-}
-
-.download-button:hover {
-    background: linear-gradient(45deg, var(--neon-secondary), #9600ff) !important;
-}
-
-.image-preview {
-    flex-grow: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 250px;
-}
-
-.checkbox-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 15px 0;
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    background: rgba(15, 23, 42, 0.7);
+    border-radius: 16px;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 }
 
-.checkbox-container label {
-    margin-left: 10px;
-    font-size: 1.1em;
+.column {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 """
 
-# Global variable to track the latest output file
-latest_output = None
-
 # Gradio UI
-with gr.Blocks(css=custom_css, theme=gr.themes.Default(primary_hue="blue")) as demo:
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft(primary_hue="pink")) as demo:
     gr.HTML("""
-    <div id="title">AI FACE SWAP</div>
+    <div style="text-align: center;">
+        <h1 id="title">AI Face Swapper</h1>
+        <p id="subtitle">Seamlessly swap faces between images with advanced AI technology</p>
+    </div>
     """)
     
-    with gr.Row():
-        with gr.Column(scale=1):
-            with gr.Row():
-                with gr.Column(elem_classes="image-container"):
-                    gr.Markdown("### SOURCE")
-                    source_image = gr.Image(
-                        label="", 
-                        type="numpy",
-                        height=250,
-                        elem_classes="image-preview"
-                    )
-                
-                with gr.Column(elem_classes="image-container"):
-                    gr.Markdown("### TARGET")
-                    target_image = gr.Image(
-                        label="", 
-                        type="numpy",
-                        height=250,
-                        elem_classes="image-preview"
-                    )
+    with gr.Row(elem_classes="container"):
+        with gr.Column(scale=1, elem_classes="column"):
+            gr.HTML("""
+            <div style="display: flex; align-items: center; margin-bottom: 20px;">
+                <div class="status-indicator"></div>
+                <span style="font-weight: 500;">System Online</span>
+            </div>
+            """)
+            
+            gr.Markdown("### Source Image")
+            source_image = gr.Image(label="Upload source face", type="numpy", height=250)
+            
+            gr.Markdown("### Target Image")
+            target_image = gr.Image(label="Upload target face", type="numpy", height=250)
             
-            with gr.Row(elem_classes="checkbox-container"):
-                face_enhancer = gr.Checkbox(
-                    label="Enhance Face", 
-                    value=True
-                )
-                
             with gr.Row():
-                submit = gr.Button(
-                    "PROCESS", 
-                    variant="primary", 
-                    elem_classes="primary-button",
-                    scale=1
-                )
-        
-        with gr.Column(scale=1):
-            with gr.Column(elem_classes="image-container"):
-                gr.Markdown("### RESULT")
-                output_image = gr.Image(
-                    label="", 
-                    type="pil",
-                    height=250,
-                    elem_classes="image-preview"
+                face_enhancer = gr.Checkbox(
+                    label="Enable Face Enhancer", 
+                    info="Improve face quality after swapping",
+                    elem_classes="enhancer-label"
                 )
-                download_btn = gr.Button("DOWNLOAD", visible=False, elem_classes="download-button")
-    
-    # Process the face swap
-    def process_faces(source_file, target_file, doFaceEnhancer):
-        global latest_output
-        result = swap_face_image(source_file, target_file, doFaceEnhancer)
-        if result is not None:
-            # Store the output path for download
-            output_files = [f for f in os.listdir('.') if f.startswith('output_') and f.endswith('.jpg')]
-            if output_files:
-                output_files.sort(key=lambda x: os.path.getctime(x), reverse=True)
-                latest_output = output_files[0]
-            return result, gr.Button(visible=True)
-        return None, gr.Button(visible=False)
-    
-    submit.click(
-        fn=process_faces,
-        inputs=[source_image, target_image, face_enhancer],
-        outputs=[output_image, download_btn]
-    )
-    
-    # Handle download
-    def download_output():
-        global latest_output
-        if latest_output and os.path.exists(latest_output):
-            return latest_output
-        return None
-    
-    download_btn.click(
-        fn=download_output,
-        outputs=gr.File(label="Download Result")
-    )
-
-if __name__ == "__main__":
-    demo.launch(share=True, server_name="0.0.0.0")
+            
+            submit = gr.Button("Swap Faces", variant="primary", size="lg")
+            
+        with gr.Column(scale=1, elem_classes="column"):
+            gr.Markdown("### Result")
+            output_image = gr.Image(label="Swapped Face Result", height=500)
+            gr.Markdown("""
+            <div style="margin-top: 20px; padding: 15px; background: rgba(16, 185, 129, 0.1); border-radius: 8px; border-left: 4px solid #10B981;">
+                <small>Tip: For best results, use frontal face images with good lighting.</small>
+            </div>
+            """)
+
+    submit.click(swap_face_image, inputs=[source_image, target_image, face_enhancer], outputs=output_image)
+
+demo.launch()