Spaces:

videopix
/

background-remover-api

Running

App Files Files

videopix commited on Dec 6, 2025

Commit

490a080

verified ·

1 Parent(s): d37a6e5

Update app.py

Browse files

Files changed (1) hide show

app.py +164 -63

app.py CHANGED Viewed

@@ -147,69 +147,170 @@ async def favicon():
 @app.get("/", response_class=HTMLResponse)
 async def index():
     return """
-    <!DOCTYPE html>
-    <html>
-    <head>
-        <title>Background Remover API Tester</title>
-        <style>
-            body { font-family: Arial; padding: 20px; }
-            img { max-width: 100%; margin-top: 20px; border-radius: 10px; }
-        </style>
-    </head>
-    <body>
-        <h2>Background Remover API Test (POST)</h2>
-        <h4>Upload Image</h4>
-        <form id="uploadForm" enctype="multipart/form-data">
-            <input type="file" id="file" name="file"><br><br>
-            <label>Resolution:</label>
-            <input type="number" id="resFile" value="512"><br><br>
-            <button type="submit">Remove Background</button>
-        </form>
-        <h4>Or use Image URL</h4>
-        <form id="urlForm">
-            <input type="text" id="imgUrl" placeholder="https://example.com/image.jpg" size="50"><br><br>
-            <label>Resolution:</label>
-            <input type="number" id="resUrl" value="512"><br><br>
-            <button type="submit">Remove Background</button>
-        </form>
-        <h3>Result:</h3>
-        <img id="result" />
-        <script>
-            const resultImg = document.getElementById("result");
-            document.getElementById("uploadForm").onsubmit = async (e) => {
-                e.preventDefault();
-                const file = document.getElementById("file").files[0];
-                const res = document.getElementById("resFile").value;
-                const fd = new FormData();
-                fd.append("file", file);
-                fd.append("resolution", res);
-                const r = await fetch("/remove-background", { method: "POST", body: fd });
-                resultImg.src = URL.createObjectURL(await r.blob());
-            };
-            document.getElementById("urlForm").onsubmit = async (e) => {
-                e.preventDefault();
-                const url = document.getElementById("imgUrl").value;
-                const res = document.getElementById("resUrl").value;
-                const fd = new FormData();
-                fd.append("image_url", url);
-                fd.append("resolution", res);
-                const r = await fetch("/remove-background", { method: "POST", body: fd });
-                resultImg.src = URL.createObjectURL(await r.blob());
-            };
-        </script>
-    </body>
-    </html>
-    """
 # ---------------------------------------------------------
 # Run App

 @app.get("/", response_class=HTMLResponse)
 async def index():
     return """
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Background Remover API</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 20px;
+            margin: 0;
+            background: #f5f5f5;
+        }
+        h2 {
+            text-align: center;
+            margin-bottom: 25px;
+        }
+        .container {
+            max-width: 700px;
+            margin: auto;
+            background: white;
+            padding: 25px;
+            border-radius: 12px;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+        }
+        .section {
+            margin-bottom: 30px;
+        }
+        label {
+            font-weight: bold;
+        }
+        input[type="file"],
+        input[type="text"],
+        input[type="number"] {
+            width: 100%;
+            padding: 10px;
+            margin-top: 6px;
+            border-radius: 6px;
+            border: 1px solid #ccc;
+        }
+        button {
+            padding: 12px 18px;
+            margin-top: 12px;
+            width: 100%;
+            border: none;
+            background: #007bff;
+            color: white;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+        button:hover {
+            background: #005dc4;
+        }
+        #resultWrapper {
+            text-align: center;
+            margin-top: 20px;
+        }
+        img {
+            max-width: 100%;
+            border-radius: 10px;
+            margin-top: 15px;
+        }
+        /* Responsive fixes */
+        @media (max-width: 600px) {
+            .container {
+                padding: 15px;
+            }
+            button {
+                font-size: 15px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <h2>Background Remover API Tester</h2>
+    <div class="container">
+        <!-- Upload Section -->
+        <div class="section">
+            <label>Upload Image</label>
+            <form id="uploadForm" enctype="multipart/form-data">
+                <input type="file" id="file" name="file" accept="image/*">
+                <label>Resolution</label>
+                <input type="number" id="resFile" value="512" min="64" max="2048">
+                <button type="submit">Remove Background</button>
+            </form>
+        </div>
+        <hr>
+        <!-- URL Section -->
+        <div class="section">
+            <label>Image URL</label>
+            <form id="urlForm">
+                <input type="text" id="imgUrl" placeholder="https://example.com/image.jpg">
+                <label>Resolution</label>
+                <input type="number" id="resUrl" value="512" min="64" max="2048">
+                <button type="submit">Remove Background</button>
+            </form>
+        </div>
+        <div id="resultWrapper">
+            <h3>Result</h3>
+            <img id="result" />
+        </div>
+    </div>
+    <script>
+        const resultImg = document.getElementById("result");
+        // Upload File
+        document.getElementById("uploadForm").onsubmit = async (e) => {
+            e.preventDefault();
+            const file = document.getElementById("file").files[0];
+            const res = document.getElementById("resFile").value;
+            if (!file) return alert("Please select a file");
+            const fd = new FormData();
+            fd.append("file", file);
+            fd.append("resolution", res);
+            const r = await fetch("/remove-background", { method: "POST", body: fd });
+            resultImg.src = URL.createObjectURL(await r.blob());
+        };
+        // URL Mode
+        document.getElementById("urlForm").onsubmit = async (e) => {
+            e.preventDefault();
+            const url = document.getElementById("imgUrl").value;
+            const res = document.getElementById("resUrl").value;
+            if (!url.trim()) return alert("Please enter an image URL");
+            const fd = new FormData();
+            fd.append("image_url", url);
+            fd.append("resolution", res);
+            const r = await fetch("/remove-background", { method: "POST", body: fd });
+            resultImg.src = URL.createObjectURL(await r.blob());
+        };
+    </script>
+</body>
+</html>
+"""
 # ---------------------------------------------------------
 # Run App