Update app.py

app.py

@@ -50,72 +50,90 @@ def swap_face_image(source_file, target_file, doFaceEnhancer):
     # Return output image
     return Image.open(output_path)
 
-# Custom CSS for professional dark theme and online indicator
+# Custom CSS for neon style with animated online indicator
 custom_css = """
 :root {
-    --primary: #6366f1;
-    --primary-dark: #4f46e5;
-    --secondary: #1f2937;
-    --secondary-dark: #111827;
-    --text: #f3f4f6;
-    --text-muted: #9ca3af;
-    --success: #10b981;
+    --neon-primary: #00f3ff;
+    --neon-secondary: #ff00ff;
+    --neon-accent: #00ff87;
+    --dark-bg: #0a0a1a;
+    --dark-panel: #13132b;
+    --text-primary: #ffffff;
+    --text-secondary: #a0a0c0;
 }
 
 body {
-    background-color: var(--secondary-dark);
-    color: var(--text);
+    background: var(--dark-bg) !important;
+    color: var(--text-primary) !important;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
 }
 
 .gr-block {
-    background-color: var(--secondary) !important;
-    border-radius: 8px !important;
-    border: 1px solid #374151 !important;
+    background: var(--dark-panel) !important;
+    border-radius: 12px !important;
+    border: 1px solid rgba(0, 243, 255, 0.2) !important;
+    box-shadow: 0 0 15px rgba(0, 243, 255, 0.1) !important;
 }
 
 .gr-box {
-    border-color: #374151 !important;
-    color: var(--text) !important;
+    border-color: rgba(0, 243, 255, 0.3) !important;
+    color: var(--text-primary) !important;
+    background: rgba(10, 10, 26, 0.7) !important;
 }
 
 h1, h2, h3, label, .gr-label {
-    color: var(--text) !important;
+    color: var(--text-primary) !important;
+    text-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
 }
 
 .gr-button {
-    background: linear-gradient(to right, var(--primary), var(--primary-dark)) !important;
-    color: white !important;
+    background: linear-gradient(45deg, var(--neon-primary), var(--neon-secondary)) !important;
+    color: black !important;
     border: none !important;
-    border-radius: 6px !important;
-    padding: 10px 20px !important;
-    font-weight: 500 !important;
+    border-radius: 8px !important;
+    padding: 12px 28px !important;
+    font-weight: 600 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 1px !important;
+    box-shadow: 0 0 10px var(--neon-primary), 0 0 20px rgba(0, 243, 255, 0.3) !important;
+    transition: all 0.3s ease !important;
 }
 
 .gr-button:not(:disabled):hover {
-    opacity: 0.9;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    transform: translateY(-2px);
+    box-shadow: 0 0 15px var(--neon-primary), 0 0 30px rgba(0, 243, 255, 0.5) !important;
 }
 
 .gr-button:disabled {
     background: #4b5563 !important;
+    box-shadow: none !important;
 }
 
 .status-indicator {
     display: inline-block;
-    width: 10px;
-    height: 10px;
+    width: 12px;
+    height: 12px;
     border-radius: 50%;
-    margin-right: 8px;
+    margin-right: 10px;
+    background-color: var(--neon-accent);
+    box-shadow: 0 0 0 0 rgba(0, 255, 135, 0.7);
+    animation: pulse 2s infinite;
 }
 
-.status-online {
-    background-color: var(--success);
-    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(0, 255, 135, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(0, 255, 135, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(0, 255, 135, 0);
+    }
 }
 
 .status-text {
-    color: var(--text-muted);
+    color: var(--text-secondary);
     font-size: 0.9rem;
     display: flex;
     align-items: center;
@@ -125,31 +143,39 @@ h1, h2, h3, label, .gr-label {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 1.5rem;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid #374151;
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+    background: linear-gradient(90deg, rgba(0,243,255,0.1) 0%, rgba(255,0,255,0.1) 100%);
+    border-radius: 12px;
+    border: 1px solid rgba(0, 243, 255, 0.3);
+    box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
 }
 
 .title-section h1 {
     margin-bottom: 0.25rem;
-    font-weight: 700;
+    font-weight: 800;
+    background: linear-gradient(45deg, var(--neon-primary), var(--neon-secondary));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
 }
 
 .title-section p {
-    color: var(--text-muted);
+    color: var(--text-secondary);
     margin: 0;
 }
 
 .instructions {
-    background: linear-gradient(to right, var(--secondary), var(--secondary-dark)) !important;
+    background: linear-gradient(90deg, rgba(0,243,255,0.05) 0%, rgba(255,0,255,0.05) 100%) !important;
     padding: 1.5rem !important;
-    margin-bottom: 1.5rem !important;
+    margin-bottom: 2rem !important;
+    border: 1px solid rgba(0, 243, 255, 0.2) !important;
 }
 
 .instructions h3 {
     margin-top: 0;
     margin-bottom: 0.75rem;
-    color: var(--primary) !important;
+    color: var(--neon-primary) !important;
 }
 
 .instructions ul {
@@ -159,6 +185,7 @@ h1, h2, h3, label, .gr-label {
 
 .instructions li {
     margin-bottom: 0.5rem;
+    color: var(--text-secondary);
 }
 
 .instructions li:last-child {
@@ -169,106 +196,155 @@ h1, h2, h3, label, .gr-label {
     text-align: center;
     margin-top: 2rem;
     padding-top: 1.5rem;
-    border-top: 1px solid #374151;
-    color: var(--text-muted);
+    border-top: 1px solid rgba(0, 243, 255, 0.2);
+    color: var(--text-secondary);
     font-size: 0.875rem;
 }
+
+.image-container {
+    border: 2px solid rgba(0, 243, 255, 0.3);
+    border-radius: 12px;
+    padding: 8px;
+    background: rgba(0, 0, 0, 0.2);
+    margin-bottom: 1.5rem;
+    box-shadow: 0 0 15px rgba(0, 243, 255, 0.1);
+}
+
+.image-container .gr-label {
+    background: rgba(0, 243, 255, 0.1);
+    padding: 8px 12px;
+    border-radius: 8px;
+    margin-bottom: 10px;
+    display: inline-block;
+}
+
+.control-panel {
+    background: linear-gradient(90deg, rgba(0,243,255,0.05) 0%, rgba(255,0,255,0.05) 100%) !important;
+    padding: 1.5rem !important;
+    border: 1px solid rgba(0, 243, 255, 0.2) !important;
+    border-radius: 12px !important;
+}
+
+.output-highlight {
+    border: 2px solid var(--neon-accent) !important;
+    box-shadow: 0 0 20px rgba(0, 255, 135, 0.3) !important;
+}
+
+.upload-text {
+    color: var(--text-secondary);
+    text-align: center;
+    padding: 20px;
+}
 """
 
-# Gradio UI with professional dark theme
+# Gradio UI with neon style theme
 with gr.Blocks(
-    theme=gr.themes.Soft(
-        primary_hue="indigo",
-        secondary_hue="gray"
-    ), 
     css=custom_css,
-    title="Professional Face Swap Tool"
+    title="Neon Face Swap AI",
+    theme=gr.themes.Default(primary_hue="cyan", secondary_hue="pink")
 ) as demo:
     
-    # Header section with title and status indicator
+    # Header section with title and animated status indicator
     with gr.Row(elem_classes="header"):
         with gr.Column(scale=3):
             with gr.Row(elem_classes="title-section"):
                 gr.Markdown("""
-                # 🔄 Professional Face Swap
-                ### AI-Powered Face Swapping Technology
+                # 🌌 NEON FACE SWAP
+                ### Next-Generation AI Face Swapping Technology
                 """)
         with gr.Column(scale=1):
             with gr.Row():
                 gr.Markdown("""
                 <div class="status-text">
-                    <div class="status-indicator status-online"></div>
+                    <div class="status-indicator"></div>
                     System Online
                 </div>
                 """)
     
-    # Instructions section
+    # Main content - unique arrangement
     with gr.Row():
-        with gr.Column():
-            gr.Markdown("""
-            <div class="instructions">
-                <h3>📋 How to Use</h3>
-                <ul>
-                    <li><strong>Source Face:</strong> Select an image containing the face you want to use</li>
-                    <li><strong>Target Face:</strong> Select an image where you want to place the source face</li>
-                    <li><strong>Face Enhancer:</strong> Enable for higher quality results (takes longer)</li>
-                    <li>Click <strong>Swap Faces</strong> to process the images</li>
-                </ul>
-            </div>
-            """)
-    
-    # Main content
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.Markdown("### 📤 Input Images")
-            with gr.Group():
+        # Left column - inputs
+        with gr.Column(scale=1, min_width=400):
+            gr.Markdown("### 📤 SOURCE IMAGE")
+            with gr.Group(elem_classes="image-container"):
                 source_image = gr.Image(
-                    label="Source Face Image", 
+                    label="Upload Source Face", 
                     type="numpy",
                     height=300,
                     elem_classes="gr-box"
                 )
+            
+            gr.Markdown("### 🎯 TARGET IMAGE")
+            with gr.Group(elem_classes="image-container"):
                 target_image = gr.Image(
-                    label="Target Face Image", 
+                    label="Upload Target Face", 
                     type="numpy",
                     height=300,
                     elem_classes="gr-box"
                 )
-            
-            with gr.Group():
+        
+        # Middle column - controls
+        with gr.Column(scale=1, min_width=300):
+            with gr.Group(elem_classes="control-panel"):
+                gr.Markdown("### ⚙️ PROCESSING CONTROLS")
+                
                 face_enhancer = gr.Checkbox(
-                    label="Enable Face Enhancer (Higher Quality)",
+                    label="Enable Face Enhancer",
                     value=True,
                     info="Improves face quality but increases processing time"
                 )
                 
-                submit = gr.Button(
-                    "🔄 Swap Faces", 
-                    variant="primary",
-                    size="lg"
-                )
-
-        with gr.Column(scale=1):
-            gr.Markdown("### 📥 Output Image")
-            output_image = gr.Image(
-                label="Output Image", 
-                interactive=False,
-                height=500,
-                elem_classes="gr-box"
-            )
-            
-            with gr.Group():
-                gr.Markdown("### 📊 Processing Info")
-                info_text = gr.Textbox(
-                    label="Status",
-                    value="Ready to process images",
-                    interactive=False
+                gr.Markdown("---")
+                
+                with gr.Row():
+                    submit = gr.Button(
+                        "🔄 SWAP FACES", 
+                        variant="primary",
+                        size="lg",
+                        scale=2
+                    )
+                
+                gr.Markdown("---")
+                
+                with gr.Group():
+                    gr.Markdown("### 📊 STATUS")
+                    info_text = gr.Textbox(
+                        label="Processing Status",
+                        value="Ready to process images",
+                        interactive=False
+                    )
+        
+        # Right column - output
+        with gr.Column(scale=1, min_width=400):
+            gr.Markdown("### 📥 RESULT")
+            with gr.Group(elem_classes="image-container output-highlight"):
+                output_image = gr.Image(
+                    label="Swapped Result", 
+                    interactive=False,
+                    height=500,
+                    elem_classes="gr-box"
                 )
     
+    # Instructions at the bottom
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("""
+            <div class="instructions">
+                <h3>🚀 HOW TO USE</h3>
+                <ul>
+                    <li><strong>Source Face:</strong> Select an image containing the face you want to use</li>
+                    <li><strong>Target Face:</strong> Select an image where you want to place the source face</li>
+                    <li><strong>Face Enhancer:</strong> Enable for higher quality results (takes longer)</li>
+                    <li>Click <strong>SWAP FACES</strong> to process the images</li>
+                    <li>Download your result when processing is complete</li>
+                </ul>
+            </div>
+            """)
+    
     # Footer
     gr.Markdown("""
     <div class="footer">
-        <p>Powered by Roop • Professional Face Swap Tool v1.0</p>
+        <p>Powered by Roop • Neon Face Swap AI v2.0</p>
     </div>
     """)