Update app.py

app.py

@@ -24,81 +24,18 @@ print(f"Model loaded on {device}")
 OUTPUT_DIR = "output_images"
 os.makedirs(OUTPUT_DIR, exist_ok=True)
 
-# Define fixed size for all images
-FIXED_SIZE = (225, 225)
+# ... keep all imports and model loading code the same ...
 
-# Resize the input image for model compatibility
-def resize_image(image, size=FIXED_SIZE):
-    image = image.convert('RGB')
-    image = image.resize(size, Image.LANCZOS)
-    return image
+# Define different sizes for different devices
+DESKTOP_SIZE = (512, 512)
+MOBILE_SIZE = (300, 300)  # Smaller size for mobile devices
 
-# Background removal process
-def process(image, progress=gr.Progress()):
-    if image is None:
-        return None, gr.update(visible=False)
-    
-    progress(0, desc="Starting processing...")
-    
-    # Prepare the input
-    progress(0.1, desc="Preparing image...")
-    orig_image = Image.fromarray(image)
-    # Resize input image to fixed size
-    orig_image = resize_image(orig_image, FIXED_SIZE)
-    w, h = FIXED_SIZE
-    image = orig_image
-    im_np = np.array(image)
-    im_tensor = torch.tensor(im_np, dtype=torch.float32).permute(2, 0, 1)
-    im_tensor = torch.unsqueeze(im_tensor, 0)
-    im_tensor = torch.divide(im_tensor, 255.0)
-    im_tensor = normalize(im_tensor, [0.5, 0.5, 0.5], [1.0, 1.0, 1.0])
-    
-    progress(0.3, desc="Processing with AI model...")
-    if torch.cuda.is_available():
-        im_tensor = im_tensor.cuda()
-    
-    # Inference with the model
-    with torch.no_grad():
-        result = net(im_tensor)
-    
-    progress(0.6, desc="Post-processing...")
-    # Post-process the result
-    result = torch.squeeze(F.interpolate(result[0][0], size=(h, w), mode='bilinear'), 0)
-    ma = torch.max(result)
-    mi = torch.min(result)
-    result = (result - mi) / (ma - mi)
-    
-    # Convert the result to an image
-    result_array = (result * 255).cpu().data.numpy().astype(np.uint8)
-    pil_mask = Image.fromarray(np.squeeze(result_array))
-    
-    # Add the mask as alpha channel to the original image
-    new_im = orig_image.copy()
-    new_im.putalpha(pil_mask)
-    
-    progress(0.8, desc="Preparing download...")
-    # Generate a unique filename
-    unique_id = str(uuid.uuid4())[:8]
-    filename = f"background_removed_{unique_id}.png"
-    filepath = os.path.join(OUTPUT_DIR, filename)
-    
-    # Save the processed image
-    new_im.save(filepath, format='PNG')
-    
-    # Convert to numpy array for display
-    output_array = np.array(new_im.convert("RGBA"))
-    
-    progress(1.0, desc="Done!")
-    
-    return output_array, gr.update(visible=True, value=filepath, interactive=True)
-
-# Gradio interface setup
-title = "Background Removal Tool"
+# Update the description and CSS part with responsive design:
 description = """
 <style>
     .custom-container {
         text-align: center;
-        max-width: 800px;
+        max-width: 100%;
         margin: 0 auto;
         padding: 20px;
         background: rgba(10, 10, 30, 0.6);
@@ -108,7 +45,7 @@ description = """
     .title-text {
         color: #ff00de;
         font-family: 'Orbitron', sans-serif;
-        font-size: 2.5em;
+        font-size: 2em;
         margin: 20px 0;
         text-shadow: 0 0 10px rgba(255, 0, 222, 0.5);
         animation: title-pulse 2s infinite alternate;
@@ -116,7 +53,7 @@ description = """
     .subtitle-text {
         color: #00ffff;
         font-family: 'Roboto Mono', monospace;
-        font-size: 1.2em;
+        font-size: 1em;
         margin-top: 10px;
         line-height: 1.5;
         text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
@@ -125,6 +62,16 @@ description = """
         0% { text-shadow: 0 0 5px rgba(255, 0, 222, 0.5); }
         100% { text-shadow: 0 0 15px rgba(255, 0, 222, 0.8), 0 0 25px rgba(255, 0, 222, 0.5); }
     }
+
+    /* Responsive text sizes */
+    @media (max-width: 768px) {
+        .title-text {
+            font-size: 1.5em;
+        }
+        .subtitle-text {
+            font-size: 0.9em;
+        }
+    }
 </style>
 <div class="custom-container">
     <h1 class="title-text">AI Background Removal</h1>
@@ -134,7 +81,7 @@ description = """
 </div>
 """
 
-# Create the Gradio interface
+# Update the Gradio interface with responsive CSS
 with gr.Blocks(css="""
     /* Import fonts */
     @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto+Mono:wght@300;400;700&display=swap');
@@ -156,26 +103,27 @@ with gr.Blocks(css="""
         min-height: 100vh;
     }
 
-    /* Container styling */
+    /* Responsive container */
     .container {
-        background: rgba(0, 0, 0, 0.6);
-        backdrop-filter: blur(10px);
-        border-radius: 15px;
-        padding: 20px;
-        box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
-        margin: 20px;
+        width: 100%;
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 10px;
     }
 
-    /* Input/Output areas */
+    /* Input/Output areas with responsive sizing */
     .input-image, .output-image {
-        width: 512px !important;
-        height: 512px !important;
+        width: 100% !important;
+        max-width: 512px !important;
+        height: auto !important;
+        aspect-ratio: 1/1 !important;
         object-fit: contain !important;
         background: rgba(18, 18, 56, 0.7) !important;
         border: 2px solid var(--neon-cyan) !important;
         border-radius: 12px !important;
         transition: all 0.3s ease !important;
         overflow: hidden !important;
+        margin: 0 auto !important;
     }
 
     .input-image img, .output-image img {
@@ -184,9 +132,12 @@ with gr.Blocks(css="""
         object-fit: contain !important;
     }
 
-    .input-image:hover, .output-image:hover {
-        box-shadow: 0 0 20px rgba(0, 255, 255, 0.4) !important;
-        transform: translateY(-2px) !important;
+    /* Responsive columns */
+    .contain-center {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 20px;
     }
 
     /* Download button styling */
@@ -204,11 +155,8 @@ with gr.Blocks(css="""
         cursor: pointer !important;
         transition: all 0.3s ease !important;
         animation: button-glow 2s infinite alternate !important;
-    }
-
-    .download-container [data-testid="file"] button:hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 5px 15px rgba(0, 255, 255, 0.4) !important;
+        width: 100% !important;
+        max-width: 300px !important;
     }
 
     /* Labels */
@@ -218,20 +166,23 @@ with gr.Blocks(css="""
         font-size: 1.1em !important;
         text-shadow: 0 0 5px rgba(0, 255, 255, 0.5) !important;
         margin-bottom: 8px !important;
+        text-align: center !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;
-    }
-
-    /* Additional Animations */
-    @keyframes button-glow {
-        0% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.5); }
-        100% { box-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 0 25px rgba(255, 0, 222, 0.5); }
+    /* Responsive layout */
+    @media (max-width: 768px) {
+        .input-image, .output-image {
+            max-width: 300px !important;
+        }
+        
+        label {
+            font-size: 0.9em !important;
+        }
+        
+        .download-container [data-testid="file"] button {
+            padding: 10px 20px !important;
+            font-size: 14px !important;
+        }
     }
 """) as demo:
     gr.Markdown(description)
@@ -243,8 +194,7 @@ with gr.Blocks(css="""
                 label="Upload Your Image",
                 elem_id="input-image",
                 elem_classes="input-image",
-                height=512,
-                width=512
+                container=True
             )
         
         with gr.Column(scale=1):
@@ -253,8 +203,7 @@ with gr.Blocks(css="""
                 label="Result",
                 elem_id="output-image",
                 elem_classes="output-image",
-                height=512,
-                width=512
+                container=True
             )
             
             with gr.Row(elem_classes="download-container"):