Update app.py

app.py

@@ -12,7 +12,7 @@ torch.set_float32_matmul_precision(["high", "highest"][0])
 birefnet = AutoModelForImageSegmentation.from_pretrained(
     "ZhengPeng7/BiRefNet", trust_remote_code=True
 )
-birefnet.to("cpu")
+birefnet.to("cuda")
 
 transform_image = transforms.Compose(
     [
@@ -32,7 +32,8 @@ def fn(image: Union[Image.Image, str]) -> Tuple[Image.Image, Image.Image]:
 @spaces.GPU
 def process(image: Image.Image) -> Image.Image:
     image_size = image.size
-    input_images = transform_image(image).unsqueeze(0).to("cpu")
+    input_images = transform_image(image).unsqueeze(0).to("cuda")
+    # Prediction
     with torch.no_grad():
         preds = birefnet(input_images)[-1].sigmoid().cpu()
     pred = preds[0].squeeze()
@@ -41,478 +42,17 @@ def process(image: Image.Image) -> Image.Image:
     image.putalpha(mask)
     return image
 
-custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');
+slider1 = gr.ImageSlider(label="Processed Image", type="pil", format="png")
+slider2 = gr.ImageSlider(label="Processed Image from URL", type="pil", format="png")
+image_upload = gr.Image(label="Upload an image")
+url_input = gr.Textbox(label="Paste an image URL")
 
-:root {
-    --neon-blue: #00f3ff;
-    --neon-pink: #ff00ff;
-    --neon-green: #00ff9d;
-    --neon-purple: #8a2be2;
-    --dark-bg: #0a0a12;
-    --card-bg: rgba(20, 20, 30, 0.95);
-}
+tab1 = gr.Interface(fn, inputs=image_upload, outputs=slider1, api_name="image")
+tab2 = gr.Interface(fn, inputs=url_input, outputs=slider2, api_name="text")
 
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    background: var(--dark-bg) !important;
-    font-family: 'Rajdhani', sans-serif !important;
-    overflow-x: hidden;
-}
-
-.gradio-container {
-    background: linear-gradient(135deg, #0a0a12 0%, #000000 100%) !important;
-    min-height: 100vh;
-    color: #ffffff !important;
-}
-
-/* Neon Glow Effects */
-.neon-glow {
-    text-shadow: 
-        0 0 5px currentColor,
-        0 0 10px currentColor,
-        0 0 15px currentColor,
-        0 0 20px currentColor;
-}
-
-.neon-border {
-    box-shadow: 
-        0 0 5px currentColor,
-        0 0 10px currentColor,
-        0 0 15px currentColor,
-        inset 0 0 5px currentColor;
-}
-
-/* Header Styles with Neon */
-.header-container {
-    text-align: center;
-    padding: 50px 20px 40px 20px;
-    background: linear-gradient(180deg, rgba(10,10,18,0.95) 0%, rgba(10,10,18,0.8) 100%);
-    border-bottom: 3px solid var(--neon-blue);
-    margin-bottom: 20px;
-    position: relative;
-}
-
-.header-container::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(45deg, 
-        transparent 0%, 
-        rgba(0, 243, 255, 0.1) 50%, 
-        transparent 100%);
-    animation: shimmer 3s ease-in-out infinite;
-}
-
-@keyframes shimmer {
-    0%, 100% { opacity: 0.3; }
-    50% { opacity: 0.8; }
-}
-
-.main-title {
-    font-family: 'Orbitron', monospace !important;
-    font-weight: 900 !important;
-    font-size: 3.5rem !important;
-    background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink), var(--neon-green)) !important;
-    -webkit-background-clip: text !important;
-    -webkit-text-fill-color: transparent !important;
-    margin-bottom: 15px !important;
-    letter-spacing: 3px !important;
-    text-transform: uppercase;
-    position: relative;
-    text-shadow: 
-        0 0 10px var(--neon-blue),
-        0 0 20px var(--neon-pink),
-        0 0 30px var(--neon-green) !important;
-}
-
-.subtitle {
-    font-family: 'Orbitron', monospace !important;
-    font-size: 1.4rem !important;
-    color: var(--neon-green) !important;
-    letter-spacing: 2px !important;
-    text-shadow: 
-        0 0 10px var(--neon-green),
-        0 0 20px rgba(0, 255, 157, 0.5) !important;
-}
-
-/* Tab Styles with Neon */
-.tab-nav {
-    background: rgba(20, 20, 30, 0.9) !important;
-    border: 2px solid var(--neon-blue) !important;
-    border-radius: 15px !important;
-    padding: 10px !important;
-    margin: 30px auto !important;
-    max-width: 550px !important;
-    box-shadow: 
-        0 0 20px rgba(0, 243, 255, 0.3),
-        inset 0 0 20px rgba(0, 243, 255, 0.1) !important;
-}
-
-.tab-nav button {
-    font-family: 'Orbitron', monospace !important;
-    font-weight: 700 !important;
-    font-size: 1rem !important;
-    background: transparent !important;
-    color: var(--neon-blue) !important;
-    border: 2px solid transparent !important;
-    border-radius: 10px !important;
-    padding: 15px 25px !important;
-    margin: 0 5px !important;
-    transition: all 0.4s ease !important;
-    text-transform: uppercase;
-    letter-spacing: 1.5px;
-    position: relative;
-    overflow: hidden;
-}
-
-.tab-nav button::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.4), transparent);
-    transition: left 0.6s ease;
-}
-
-.tab-nav button:hover::before {
-    left: 100%;
-}
-
-.tab-nav button.selected {
-    background: rgba(0, 243, 255, 0.15) !important;
-    border: 2px solid var(--neon-blue) !important;
-    box-shadow: 
-        0 0 20px var(--neon-blue),
-        0 0 40px rgba(0, 243, 255, 0.3) !important;
-    color: var(--neon-blue) !important;
-    text-shadow: 0 0 10px currentColor !important;
-}
-
-.tab-nav button:hover:not(.selected) {
-    border: 2px solid var(--neon-pink) !important;
-    color: var(--neon-pink) !important;
-    box-shadow: 0 0 15px var(--neon-pink) !important;
-    text-shadow: 0 0 10px currentColor !important;
-}
-
-/* Content Cards with Neon */
-.tabitem {
-    background: var(--card-bg) !important;
-    border: 2px solid rgba(0, 243, 255, 0.3) !important;
-    border-radius: 20px !important;
-    margin: 25px 0 !important;
-    padding: 30px !important;
-    box-shadow: 
-        0 0 30px rgba(0, 243, 255, 0.2),
-        inset 0 0 30px rgba(0, 243, 255, 0.05) !important;
-}
-
-/* Input Components with Neon */
-.gr-image {
-    background: rgba(0, 0, 0, 0.4) !important;
-    border: 3px dashed var(--neon-blue) !important;
-    border-radius: 15px !important;
-    min-height: 320px !important;
-    transition: all 0.3s ease !important;
-}
-
-.gr-image:hover {
-    border-color: var(--neon-pink) !important;
-    box-shadow: 0 0 25px rgba(255, 0, 255, 0.3) !important;
-}
-
-.gr-textbox {
-    background: rgba(0, 0, 0, 0.4) !important;
-    border: 2px solid var(--neon-blue) !important;
-    border-radius: 12px !important;
-    color: #ffffff !important;
-    font-size: 1.1rem !important;
-    padding: 18px !important;
-    transition: all 0.3s ease !important;
-}
-
-.gr-textbox:focus {
-    border-color: var(--neon-pink) !important;
-    box-shadow: 0 0 20px rgba(255, 0, 255, 0.3) !important;
-}
-
-.gr-textbox::placeholder {
-    color: rgba(0, 243, 255, 0.7) !important;
-    font-style: italic;
-}
-
-/* Labels with Neon */
-.label {
-    font-family: 'Orbitron', monospace !important;
-    font-weight: 700 !important;
-    font-size: 1.3rem !important;
-    color: var(--neon-green) !important;
-    margin-bottom: 20px !important;
-    letter-spacing: 1px !important;
-    text-shadow: 
-        0 0 10px var(--neon-green),
-        0 0 20px rgba(0, 255, 157, 0.3) !important;
-}
-
-/* NEON BUTTONS - Improved */
-.neon-button {
-    font-family: 'Orbitron', monospace !important;
-    font-weight: 800 !important;
-    font-size: 1.2rem !important;
-    background: linear-gradient(45deg, var(--neon-blue), var(--neon-green)) !important;
-    color: #000000 !important;
-    border: none !important;
-    border-radius: 12px !important;
-    padding: 18px 35px !important;
-    margin: 15px 0 !important;
-    transition: all 0.4s ease !important;
-    text-transform: uppercase !important;
-    letter-spacing: 2px !important;
-    position: relative !important;
-    overflow: hidden !important;
-    cursor: pointer !important;
-    box-shadow: 
-        0 0 15px var(--neon-blue),
-        0 0 30px rgba(0, 243, 255, 0.4) !important;
-}
-
-.neon-button::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
-    transition: left 0.6s ease;
-}
-
-.neon-button:hover::before {
-    left: 100%;
-}
-
-.neon-button:hover {
-    transform: translateY(-3px) scale(1.05) !important;
-    box-shadow: 
-        0 0 25px var(--neon-blue),
-        0 0 50px rgba(0, 243, 255, 0.6),
-        0 0 75px rgba(0, 255, 157, 0.3) !important;
-    background: linear-gradient(45deg, var(--neon-green), var(--neon-pink)) !important;
-}
-
-.neon-button:active {
-    transform: translateY(-1px) scale(1.02) !important;
-}
-
-/* Image Slider with Neon */
-.image-slider-container {
-    border: 3px solid var(--neon-purple) !important;
-    border-radius: 15px !important;
-    padding: 15px !important;
-    background: rgba(0, 0, 0, 0.3) !important;
-    box-shadow: 
-        0 0 20px rgba(138, 43, 226, 0.4),
-        inset 0 0 20px rgba(138, 43, 226, 0.1) !important;
-}
-
-/* Markdown Text with Neon */
-.gr-markdown {
-    color: #ffffff !important;
-    font-family: 'Rajdhani', sans-serif !important;
-    font-size: 1.1rem !important;
-    line-height: 1.7 !important;
-}
-
-.gr-markdown h3 {
-    font-family: 'Orbitron', monospace !important;
-    font-size: 1.5rem !important;
-    color: var(--neon-blue) !important;
-    margin: 25px 0 20px 0 !important;
-    border-left: 4px solid var(--neon-pink) !important;
-    padding-left: 20px !important;
-    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5) !important;
-}
-
-/* Footer with Neon */
-.footer {
-    text-align: center;
-    padding: 40px 20px;
-    color: var(--neon-blue) !important;
-    font-family: 'Rajdhani', sans-serif !important;
-    border-top: 3px solid rgba(0, 243, 255, 0.3);
-    margin-top: 40px;
-    background: rgba(10, 10, 18, 0.9) !important;
-}
-
-.footer h3 {
-    font-family: 'Orbitron', monospace !important;
-    font-size: 1.4rem !important;
-    margin-bottom: 15px !important;
-    color: var(--neon-green) !important;
-    text-shadow: 0 0 10px rgba(0, 255, 157, 0.5) !important;
-}
-
-.footer p {
-    margin: 8px 0 !important;
-    font-size: 1rem !important;
-    opacity: 0.9;
-}
-
-/* Layout Improvements */
-.gr-row {
-    gap: 30px !important;
-    margin: 0 !important;
-}
-
-.gr-column {
-    gap: 25px !important;
-}
-
-/* Scrollbar Neon */
-::-webkit-scrollbar {
-    width: 10px;
-}
-
-::-webkit-scrollbar-track {
-    background: rgba(0, 243, 255, 0.1);
-    border-radius: 5px;
-}
-
-::-webkit-scrollbar-thumb {
-    background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink));
-    border-radius: 5px;
-    box-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(45deg, var(--neon-pink), var(--neon-green));
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .main-title {
-        font-size: 2.5rem !important;
-    }
-    
-    .subtitle {
-        font-size: 1.1rem !important;
-    }
-    
-    .tab-nav {
-        max-width: 100% !important;
-        margin: 20px 10px !important;
-    }
-    
-    .tab-nav button {
-        font-size: 0.9rem !important;
-        padding: 12px 18px !important;
-    }
-    
-    .neon-button {
-        font-size: 1.1rem !important;
-        padding: 15px 25px !important;
-    }
-}
-"""
-
-with gr.Blocks(css=custom_css, theme=gr.themes.Base(primary_hue="blue")) as demo:
-    
-    # Header with Neon
-    gr.HTML("""
-    <div class="header-container">
-        <div class="main-title">⚡ CYBER-BG REMOVER ⚡</div>
-        <div class="subtitle">NEON-POWERED AI BACKGROUND ERASURE</div>
-    </div>
-    """)
-    
-    with gr.Tabs(selected=0) as tabs:
-        with gr.TabItem("🖼️ UPLOAD IMAGE", id=0):
-            with gr.Row():
-                with gr.Column(scale=1):
-                    gr.Markdown("### 📤 UPLOAD IMAGE")
-                    image_upload = gr.Image(
-                        label="DRAG & DROP OR CLICK TO UPLOAD",
-                        type="pil",
-                        height=340
-                    )
-                    process_btn1 = gr.Button(
-                        "🚀 REMOVE BACKGROUND", 
-                        elem_classes="neon-button"
-                    )
-                
-                with gr.Column(scale=1):
-                    gr.Markdown("### 🎯 PROCESSED RESULT")
-                    with gr.Column(elem_classes="image-slider-container"):
-                        slider1 = gr.ImageSlider(
-                            label="ORIGINAL VS PROCESSED",
-                            type="pil", 
-                            format="png",
-                            height=360,
-                            show_download_button=True
-                        )
-            
-            process_btn1.click(
-                fn=fn,
-                inputs=image_upload,
-                outputs=slider1
-            )
-
-        with gr.TabItem("🌐 IMAGE URL", id=1):
-            with gr.Row():
-                with gr.Column(scale=1):
-                    gr.Markdown("### 🔗 ENTER IMAGE URL")
-                    url_input = gr.Textbox(
-                        label="PASTE IMAGE URL HERE",
-                        placeholder="https://example.com/image.jpg",
-                        lines=1,
-                        max_lines=1
-                    )
-                    process_btn2 = gr.Button(
-                        "🚀 REMOVE BACKGROUND", 
-                        elem_classes="neon-button"
-                    )
-                
-                with gr.Column(scale=1):
-                    gr.Markdown("### 🎯 PROCESSED RESULT")
-                    with gr.Column(elem_classes="image-slider-container"):
-                        slider2 = gr.ImageSlider(
-                            label="ORIGINAL VS PROCESSED",
-                            type="pil", 
-                            format="png",
-                            height=360,
-                            show_download_button=True
-                        )
-            
-            process_btn2.click(
-                fn=fn,
-                inputs=url_input,
-                outputs=slider2
-            )
-    
-    # Footer with Neon
-    gr.HTML("""
-    <div class="footer">
-        <h3>🛠️ SYSTEM STATUS: ONLINE</h3>
-        <p><strong>BiRefNet AI Core:</strong> OPERATIONAL</p>
-        <p><strong>Neon Processing Unit:</strong> ACTIVE</p>
-        <p><em>Cyber-BG Remover v3.0 - Ultimate Neon Edition</em></p>
-    </div>
-    """)
+demo = gr.TabbedInterface(
+    [tab1, tab2], ["Image Upload", "URL Input"], title="Background Removal Tool"
+)
 
 if __name__ == "__main__":
-    demo.launch(
-        show_error=True,
-        show_api=False,
-        share=False
-    )
+    demo.launch(show_error=True)