Update app.py

app.py

@@ -93,115 +93,178 @@ def process(image, progress=gr.Progress()):
 title = "Background Removal Tool"
 description = """
 <div style="text-align: center; max-width: 800px; margin: 0 auto; padding: 20px;">
-    <h1 style="color: #2D3748; font-size: 2.5em; margin-bottom: 20px;">Professional Background Removal</h1>
-    <p style="color: #4A5568; font-size: 1.2em; margin-bottom: 20px;">
-        Upload your image and get instant background removal using AI technology.
+    <div class="logo-container">
+        <div class="logo-mark">
+            <div class="logo-hexagon"></div>
+            <div class="logo-inner">A</div>
+        </div>
+        <div class="logo-text">AicO Tools</div>
+    </div>
+    <h1 style="color: #00ffff; font-size: 2.5em; margin: 20px 0; text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);">
+        AI Background Removal
+    </h1>
+    <p style="color: #a0a0a0; font-size: 1.2em;">
+        Remove backgrounds instantly using advanced AI technology
     </p>
 </div>
 """
 
 # Create the Gradio interface
 with gr.Blocks(css="""
+    /* Variables */
+    :root {
+        --neon-cyan: #00ffff;
+        --neon-pink: #ff00de;
+        --neon-yellow: #ffdd00;
+        --dark-background: #0a0a1e;
+        --deep-blue: #121238;
+    }
+
     /* Global styles */
-    .container {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 2rem;
+    body {
+        font-family: 'Roboto Mono', monospace;
+        background: linear-gradient(135deg, var(--dark-background) 0%, var(--deep-blue) 100%);
+        color: #ffffff;
     }
-    
-    /* Card styling */
-    .input-card, .output-card {
-        background-color: white;
-        border-radius: 10px;
-        padding: 20px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        transition: transform 0.2s;
+
+    /* Logo styling */
+    .logo-container {
+        display: flex;
+        align-items: center;
+        margin-bottom: 2rem;
+        animation: float 3s ease-in-out infinite;
     }
-    
-    .input-card:hover, .output-card:hover {
-        transform: translateY(-5px);
+
+    .logo-mark {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        margin-right: 12px;
+        animation: spin 12s linear infinite;
     }
-    
-    /* Button styling */
-    .download-btn {
-        background-color: #4F46E5 !important;
-        color: white !important;
-        border: none !important;
-        padding: 12px 28px !important;
-        text-align: center !important;
-        text-decoration: none !important;
-        display: inline-block !important;
-        font-size: 16px !important;
-        margin: 15px 0 !important;
-        cursor: pointer !important;
-        border-radius: 8px !important;
-        transition: all 0.3s ease !important;
-        font-weight: 600 !important;
+
+    .logo-hexagon {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg, var(--neon-pink), var(--neon-cyan));
+        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+        animation: pulse-glow 4s infinite alternate;
     }
-    
-    .download-btn:hover {
-        background-color: #4338CA !important;
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
+
+    .logo-inner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: var(--neon-cyan);
+        font-family: 'Orbitron', sans-serif;
+        font-weight: 700;
+        font-size: 20px;
     }
-    
-    /* File download styling */
-    .download-container [data-testid="file"] {
-        display: block !important;
+
+    .logo-text {
+        font-family: 'Orbitron', sans-serif;
+        font-size: 24px;
+        font-weight: 700;
+        color: var(--neon-pink);
+        text-shadow: 0 0 10px rgba(255, 0, 222, 0.5);
     }
-    
-    .download-container [data-testid="file"] > div:first-child {
-        display: none !important;
+
+    /* Container styling */
+    .container {
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(10px);
+        border-radius: 10px;
+        padding: 20px;
+        box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
     }
-    
-    .download-container [data-testid="file"] > div:last-child {
-        margin-left: 0 !important;
+
+    /* Input/Output areas */
+    .input-image, .output-image {
+        background: rgba(18, 18, 56, 0.7) !important;
+        border: 2px solid var(--neon-cyan) !important;
+        border-radius: 8px !important;
+        transition: all 0.3s ease !important;
     }
-    
+
+    .input-image:hover, .output-image:hover {
+        box-shadow: 0 0 15px rgba(0, 255, 255, 0.3) !important;
+        transform: translateY(-2px) !important;
+    }
+
+    /* Download button styling */
     .download-container [data-testid="file"] button {
-        background-color: #4F46E5 !important;
+        background: linear-gradient(45deg, var(--neon-cyan), var(--neon-pink)) !important;
         color: white !important;
         border: none !important;
         padding: 12px 28px !important;
-        text-align: center !important;
+        font-family: 'Orbitron', sans-serif !important;
         font-size: 16px !important;
-        margin: 15px 0 !important;
-        cursor: pointer !important;
+        font-weight: 600 !important;
+        text-transform: uppercase !important;
+        letter-spacing: 1px !important;
         border-radius: 8px !important;
+        cursor: pointer !important;
         transition: all 0.3s ease !important;
-        width: 100% !important;
-        font-weight: 600 !important;
+        animation: pulse-glow 2s infinite alternate !important;
     }
-    
+
     .download-container [data-testid="file"] button:hover {
-        background-color: #4338CA !important;
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
+        transform: translateY(-2px) !important;
+        box-shadow: 0 5px 15px rgba(0, 255, 255, 0.4) !important;
     }
-    
-    /* Label styling */
+
+    /* Labels */
     label {
-        font-weight: 600 !important;
-        color: #2D3748 !important;
+        color: var(--neon-cyan) !important;
+        font-family: 'Orbitron', sans-serif !important;
         font-size: 1.1em !important;
-        margin-bottom: 8px !important;
+        text-shadow: 0 0 5px rgba(0, 255, 255, 0.5) !important;
+    }
+
+    /* Progress bar */
+    .progress-bar {
+        background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink)) !important;
+        height: 4px !important;
+        border-radius: 2px !important;
+        box-shadow: 0 0 10px rgba(0, 255, 255, 0.5) !important;
+    }
+
+    /* Animations */
+    @keyframes float {
+        0% { transform: translateY(0); }
+        50% { transform: translateY(-5px); }
+        100% { transform: translateY(0); }
+    }
+
+    @keyframes spin {
+        0% { transform: rotateY(0deg); }
+        100% { transform: rotateY(360deg); }
+    }
+
+    @keyframes pulse-glow {
+        0% { filter: brightness(1) drop-shadow(0 0 5px var(--neon-cyan)); }
+        100% { filter: brightness(1.2) drop-shadow(0 0 10px var(--neon-cyan)); }
     }
 """) as demo:
     gr.Markdown(description)
     
     with gr.Row(equal_height=True):
-        with gr.Column(scale=1, elem_classes="input-card"):
+        with gr.Column(scale=1):
             input_image = gr.Image(
                 type="numpy",
                 label="Upload Your Image",
-                elem_id="input-image"
+                elem_id="input-image",
+                elem_classes="input-image"
             )
         
-        with gr.Column(scale=1, elem_classes="output-card"):
+        with gr.Column(scale=1):
             output_image = gr.Image(
                 type="numpy",
                 label="Result",
-                elem_id="output-image"
+                elem_id="output-image",
+                elem_classes="output-image"
             )
             
             with gr.Row(elem_classes="download-container"):
@@ -221,4 +284,9 @@ with gr.Blocks(css="""
     )
 
 if __name__ == "__main__":
-    demo.launch(share=False)
+    demo.launch(
+        share=False,
+        head="""
+            <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto+Mono:wght@300;400;700&display=swap" rel="stylesheet">
+        """
+    )