fix: auto-detect server URL, works on HuggingFace

templates/index.html

@@ -14,7 +14,6 @@
   --grid:repeating-conic-gradient(#1c1c2880 0% 25%,#13131a 0% 50%) 0 0/20px 20px;
 }
 body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
-/* NAV */
 nav{display:flex;align-items:center;justify-content:space-between;padding:16px 36px;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(10,10,15,0.9);backdrop-filter:blur(20px);z-index:100}
 .logo{font-family:'Syne',sans-serif;font-weight:800;font-size:21px;display:flex;align-items:center;gap:10px}
 .logo-badge{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
@@ -22,7 +21,6 @@ nav{display:flex;align-items:center;justify-content:space-between;padding:16px 3
 .status-dot{width:7px;height:7px;border-radius:50%;background:var(--border);transition:.3s}
 .status-dot.online{background:var(--success);box-shadow:0 0 6px var(--success)}
 .status-dot.offline{background:var(--danger)}
-/* HERO */
 .hero{text-align:center;padding:48px 20px 36px;position:relative}
 .hero::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,252,0.1) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
 .hero h1{font-family:'Syne',sans-serif;font-size:clamp(32px,5.5vw,64px);font-weight:800;line-height:1.05;letter-spacing:-2px;margin-bottom:12px}
@@ -31,19 +29,7 @@ nav{display:flex;align-items:center;justify-content:space-between;padding:16px 3
 .tech-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
 .tech-pill{padding:5px 14px;border-radius:50px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:12px;font-weight:500}
 .tech-pill.active{border-color:var(--accent);color:var(--accent);background:rgba(124,92,252,0.08)}
-/* WORKSPACE */
 .workspace{max-width:1080px;margin:0 auto;padding:0 20px 60px}
-/* SERVER BANNER */
-.server-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-radius:14px;border:1px solid var(--border);background:var(--surface);margin-bottom:24px;flex-wrap:wrap}
-.sb-left{display:flex;align-items:center;gap:10px}
-.sb-icon{font-size:20px}
-.sb-text{font-size:14px;color:var(--muted)}
-.sb-text strong{color:var(--text)}
-.server-url{flex:1;min-width:180px;max-width:300px;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-family:'DM Sans',sans-serif}
-.server-url:focus{outline:none;border-color:var(--accent)}
-.test-btn{padding:8px 18px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:.2s}
-.test-btn:hover{border-color:var(--accent);color:var(--accent)}
-/* DROP ZONE */
 .drop-zone{border:2px dashed var(--border);border-radius:20px;background:var(--surface);padding:60px 40px;text-align:center;cursor:pointer;transition:.3s;position:relative}
 .drop-zone:hover,.drop-zone.over{border-color:var(--accent);background:rgba(124,92,252,0.05)}
 .drop-icon{width:60px;height:60px;border-radius:16px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:26px}
@@ -54,13 +40,10 @@ nav{display:flex;align-items:center;justify-content:space-between;padding:16px 3
 .upload-btn{padding:11px 26px;background:var(--accent);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:.2s}
 .upload-btn:hover{background:#6b4de8;transform:translateY(-1px)}
 #fileInput{display:none}
-/* EDITOR */
 .editor{display:none}
 .editor.show{display:block}
-/* MAIN LAYOUT */
 .main-grid{display:grid;grid-template-columns:1fr 320px;gap:20px;margin-bottom:20px}
 @media(max-width:780px){.main-grid{grid-template-columns:1fr}}
-/* PANELS */
 .panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}
 .panel-hd{padding:11px 16px;background:var(--surface2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
 .panel-title{font-size:13px;font-weight:500;color:var(--muted);display:flex;align-items:center;gap:7px}
@@ -71,11 +54,9 @@ nav{display:flex;align-items:center;justify-content:space-between;padding:16px 3
 .panel-body{min-height:300px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:12px}
 .panel-body.checker{background:var(--grid)}
 .panel-body img{max-width:100%;max-height:380px;object-fit:contain;display:block;margin:auto}
-/* SIDEBAR */
 .sidebar{display:flex;flex-direction:column;gap:14px}
 .ctrl-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px}
 .ctrl-label{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:6px}
-/* MODEL SELECT */
 .model-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .model-btn{padding:10px 6px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);cursor:pointer;text-align:center;transition:.2s;font-family:'DM Sans',sans-serif}
 .model-btn:hover{border-color:var(--accent)}
@@ -83,7 +64,6 @@ nav{display:flex;align-items:center;justify-content:space-between;padding:16px 3
 .model-btn .mb-icon{font-size:18px;display:block;margin-bottom:3px}
 .model-btn .mb-name{font-size:12px;font-weight:500;color:var(--text)}
 .model-btn .mb-desc{font-size:10px;color:var(--muted);margin-top:1px}
-/* BG COLOR */
 .swatch-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}
 .swatch{width:30px;height:30px;border-radius:7px;border:2px solid transparent;cursor:pointer;transition:.15s;flex-shrink:0}
 .swatch:hover,.swatch.sel{border-color:var(--accent);transform:scale(1.1)}
@@ -91,11 +71,9 @@ nav{display:flex;align-items:center;justify-content:space-between;padding:16px 3
 .color-picker{width:34px;height:34px;border-radius:7px;border:1px solid var(--border);padding:2px;background:var(--surface2);cursor:pointer}
 .hex-input{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:6px 10px;color:var(--text);font-size:13px;font-family:'DM Sans',sans-serif}
 .hex-input:focus{outline:none;border-color:var(--accent)}
-/* SLIDERS */
 .sl-row{margin-bottom:8px}
 .sl-hd{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:4px}
 input[type=range]{width:100%;accent-color:var(--accent);height:3px}
-/* TOGGLE */
 .tog-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
 .tog-row:last-child{margin-bottom:0}
 .tog-label{font-size:13px;color:var(--muted)}
@@ -105,24 +83,19 @@ input[type=range]{width:100%;accent-color:var(--accent);height:3px}
 .tog-sl::before{content:'';position:absolute;width:15px;height:15px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.3s}
 .toggle input:checked+.tog-sl{background:var(--accent)}
 .toggle input:checked+.tog-sl::before{left:20px}
-/* PROCESS BTN */
 .process-btn{width:100%;padding:14px;background:var(--accent);border:none;border-radius:12px;color:#fff;font-size:15px;font-weight:600;cursor:pointer;font-family:'Syne',sans-serif;transition:.2s;display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:.3px}
 .process-btn:hover{background:#6b4de8;transform:translateY(-1px)}
 .process-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
-/* PROGRESS */
 .progress-wrap{background:var(--surface2);border-radius:50px;height:6px;margin-top:10px;overflow:hidden;display:none}
 .progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:50px;width:0;transition:.3s}
-/* OVERLAY */
 .proc-overlay{position:absolute;inset:0;background:rgba(10,10,15,0.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;backdrop-filter:blur(6px);display:none}
 .spinner{width:38px;height:38px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:spin .75s linear infinite}
 @keyframes spin{to{transform:rotate(360deg)}}
 .proc-msg{font-size:14px;color:var(--muted)}
 .proc-sub{font-size:12px;color:var(--border)}
-/* STATS */
 .stats-row{display:flex;gap:16px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--border);margin-top:8px}
 .stat{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px}
 .stat strong{color:var(--text)}
-/* ACTION BAR */
 .action-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 16px}
 .act-btn{padding:9px 18px;border-radius:9px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:13px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:.2s;display:flex;align-items:center;gap:6px}
 .act-btn:hover{border-color:var(--accent);color:var(--accent)}
@@ -131,7 +104,6 @@ input[type=range]{width:100%;accent-color:var(--accent);height:3px}
 .act-btn:disabled{opacity:.3;cursor:not-allowed}
 .sel-fmt{padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:13px;font-family:'DM Sans',sans-serif;cursor:pointer}
 .sel-fmt:focus{outline:none;border-color:var(--accent)}
-/* COMPARE */
 .cmp-wrap{position:relative;width:100%;cursor:ew-resize;user-select:none;display:inline-block}
 .cmp-wrap img{display:block;width:100%;max-height:380px;object-fit:contain}
 .cmp-after{position:absolute;inset:0;overflow:hidden}
@@ -140,20 +112,16 @@ input[type=range]{width:100%;accent-color:var(--accent);height:3px}
 .cmp-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700}
 .cmp-labels{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:space-between;padding:0 8px;pointer-events:none}
 .clabel{padding:2px 9px;border-radius:5px;font-size:11px;background:rgba(0,0,0,0.6);color:#fff}
-/* TABS */
 .tab-row{display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:16px;width:fit-content}
 .tab{padding:7px 18px;border-radius:8px;border:none;background:transparent;color:var(--muted);font-size:13px;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:500;transition:.2s}
 .tab.active{background:var(--accent);color:#fff}
-/* HISTORY */
 .hist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;margin-top:12px}
 .hist-item{border-radius:10px;overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:.2s;background:var(--grid);position:relative}
 .hist-item:hover{border-color:var(--accent);transform:translateY(-2px)}
 .hist-item img{width:100%;height:80px;object-fit:contain;display:block}
 .hist-item .hl{padding:4px 7px;font-size:10px;color:var(--muted);background:var(--surface2);border-top:1px solid var(--border);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
-/* PLACEHOLDER */
 .ph{color:var(--muted);font-size:13px;text-align:center;padding:30px}
 .ph-icon{font-size:28px;margin-bottom:8px}
-/* TOAST */
 #toast{position:fixed;bottom:24px;right:24px;padding:11px 18px;background:var(--surface2);border:1px solid var(--border);border-radius:11px;font-size:13px;color:var(--text);transform:translateY(80px);opacity:0;transition:.3s;z-index:999;display:flex;align-items:center;gap:7px;max-width:320px}
 #toast.show{transform:translateY(0);opacity:1}
 </style>
@@ -175,25 +143,13 @@ input[type=range]{width:100%;accent-color:var(--accent);height:3px}
     <span class="tech-pill active">⚡ rembg AI</span>
     <span class="tech-pill">🐍 Flask Backend</span>
     <span class="tech-pill">4 AI Models</span>
-    <span class="tech-pill">100% Local</span>
+    <span class="tech-pill">100% Free</span>
   </div>
-  <h1>CutIt out<br><span>Powered by Ak</span></h1>
-  <p>Professional-grade background removal running on your own machine — no cloud, no limits.</p>
+  <h1>Background Removal<br><span>Powered by rembg</span></h1>
+  <p>Professional-grade AI background removal — no limits, no watermarks.</p>
 </div>
 
 <div class="workspace">
-
-  <!-- SERVER CONFIG -->
-  <div class="server-banner">
-    <div class="sb-left">
-      <span class="sb-icon">🖥</span>
-      <div class="sb-text"><strong>Flask Server URL</strong> — point to your running backend</div>
-    </div>
-    <input class="server-url" id="serverUrl" type="text" value="http://localhost:5000" placeholder="http://localhost:5000"/>
-    <button class="test-btn" onclick="testServer()">🔌 Test Connection</button>
-  </div>
-
-  <!-- UPLOAD -->
   <div id="uploadSection">
     <div class="drop-zone" id="dropZone" onclick="document.getElementById('fileInput').click()" ondragover="dov(event)" ondragleave="dol(event)" ondrop="dod(event)">
       <div class="drop-icon">📸</div>
@@ -208,9 +164,7 @@ input[type=range]{width:100%;accent-color:var(--accent);height:3px}
     <input type="file" id="fileInput" accept="image/*" onchange="loadFile(this.files[0])"/>
   </div>
 
-  <!-- EDITOR -->
   <div class="editor" id="editor">
-
     <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px">
       <div class="tab-row">
         <button class="tab active" id="t-edit" onclick="sv('edit')">✏️ Edit</button>
@@ -219,10 +173,8 @@ input[type=range]{width:100%;accent-color:var(--accent);height:3px}
       <button class="act-btn" onclick="resetAll()" style="font-size:12px;padding:7px 14px">← New Image</button>
     </div>
 
-    <!-- EDIT VIEW -->
     <div id="v-edit">
       <div class="main-grid">
-        <!-- CANVAS COLUMN -->
         <div style="display:flex;flex-direction:column;gap:14px">
           <div class="panel">
             <div class="panel-hd">
@@ -247,18 +199,15 @@ input[type=range]{width:100%;accent-color:var(--accent);height:3px}
               </div>
             </div>
           </div>
-          <!-- STATS -->
           <div class="stats-row" id="statsRow" style="display:none">
             <div class="stat">📐 <strong id="sDims">—</strong></div>
             <div class="stat">⏱ <strong id="sTime">—</strong>ms</div>
             <div class="stat">🤖 Model: <strong id="sModel">—</strong></div>
-            <div class="stat" style="color:var(--success)" id="sDone" style="display:none">✓ Done!</div>
+            <div class="stat" style="color:var(--success)" id="sDone">✓ Done!</div>
           </div>
         </div>
 
-        <!-- SIDEBAR -->
         <div class="sidebar">
-          <!-- MODEL -->
           <div class="ctrl-card">
             <div class="ctrl-label">🤖 AI Model</div>
             <div class="model-grid">
@@ -285,18 +234,17 @@ input[type=range]{width:100%;accent-color:var(--accent);height:3px}
             </div>
           </div>
 
-          <!-- BACKGROUND -->
           <div class="ctrl-card">
             <div class="ctrl-label">���� Background</div>
             <div class="swatch-row">
-              <div class="swatch sel" data-c="transparent" style="background:repeating-conic-gradient(#888 0% 25%,#ccc 0% 50%) 0 0/12px 12px" onclick="selSwatch('transparent',this)" title="Transparent"></div>
-              <div class="swatch" data-c="#ffffff" style="background:#fff;border-color:#ddd" onclick="selSwatch('#ffffff',this)"></div>
-              <div class="swatch" data-c="#000000" style="background:#000" onclick="selSwatch('#000000',this)"></div>
-              <div class="swatch" data-c="#3b82f6" style="background:#3b82f6" onclick="selSwatch('#3b82f6',this)"></div>
-              <div class="swatch" data-c="#22c55e" style="background:#22c55e" onclick="selSwatch('#22c55e',this)"></div>
-              <div class="swatch" data-c="#f59e0b" style="background:#f59e0b" onclick="selSwatch('#f59e0b',this)"></div>
-              <div class="swatch" data-c="#ec4899" style="background:#ec4899" onclick="selSwatch('#ec4899',this)"></div>
-              <div class="swatch" data-c="#8b5cf6" style="background:#8b5cf6" onclick="selSwatch('#8b5cf6',this)"></div>
+              <div class="swatch sel" style="background:repeating-conic-gradient(#888 0% 25%,#ccc 0% 50%) 0 0/12px 12px" onclick="selSwatch('transparent',this)" title="Transparent"></div>
+              <div class="swatch" style="background:#fff;border-color:#ddd" onclick="selSwatch('#ffffff',this)"></div>
+              <div class="swatch" style="background:#000" onclick="selSwatch('#000000',this)"></div>
+              <div class="swatch" style="background:#3b82f6" onclick="selSwatch('#3b82f6',this)"></div>
+              <div class="swatch" style="background:#22c55e" onclick="selSwatch('#22c55e',this)"></div>
+              <div class="swatch" style="background:#f59e0b" onclick="selSwatch('#f59e0b',this)"></div>
+              <div class="swatch" style="background:#ec4899" onclick="selSwatch('#ec4899',this)"></div>
+              <div class="swatch" style="background:#8b5cf6" onclick="selSwatch('#8b5cf6',this)"></div>
             </div>
             <div class="color-row">
               <input type="color" class="color-picker" id="cpicker" value="#7c5cfc" oninput="selSwatch(this.value,null)"/>
@@ -304,7 +252,6 @@ input[type=range]{width:100%;accent-color:var(--accent);height:3px}
             </div>
           </div>
 
-          <!-- REFINEMENT -->
           <div class="ctrl-card">
             <div class="ctrl-label">🔧 Edge Refinement</div>
             <div class="sl-row">
@@ -313,7 +260,6 @@ input[type=range]{width:100%;accent-color:var(--accent);height:3px}
             </div>
           </div>
 
-          <!-- SHADOW -->
           <div class="ctrl-card">
             <div class="ctrl-label">✨ Effects</div>
             <div class="tog-row">
@@ -332,7 +278,6 @@ input[type=range]{width:100%;accent-color:var(--accent);height:3px}
             </div>
           </div>
 
-          <!-- OUTPUT -->
           <div class="ctrl-card">
             <div class="ctrl-label">📤 Output</div>
             <div style="display:flex;gap:8px;margin-bottom:10px">
@@ -349,7 +294,6 @@ input[type=range]{width:100%;accent-color:var(--accent);height:3px}
             </div>
           </div>
 
-          <!-- PROCESS -->
           <button class="process-btn" id="procBtn" onclick="processImage()">
             <span id="procIcon">✨</span> <span id="procTxt">Remove Background</span>
           </button>
@@ -359,7 +303,6 @@ input[type=range]{width:100%;accent-color:var(--accent);height:3px}
         </div>
       </div>
 
-      <!-- ACTION BAR -->
       <div class="action-bar">
         <button class="act-btn" onclick="copyImg()" id="copyBtn" disabled>📋 Copy PNG</button>
         <div style="flex:1"></div>
@@ -367,14 +310,12 @@ input[type=range]{width:100%;accent-color:var(--accent);height:3px}
         <button class="act-btn dl" onclick="dlResult()" id="dlBtn" disabled>⬇ Download</button>
       </div>
 
-      <!-- HISTORY -->
       <div id="histSection" style="margin-top:24px;display:none">
         <div style="font-family:'Syne',sans-serif;font-weight:700;font-size:15px;color:var(--muted);margin-bottom:4px">History <span id="histCount" style="font-weight:400;font-size:13px"></span></div>
         <div class="hist-grid" id="histGrid"></div>
       </div>
     </div>
 
-    <!-- COMPARE VIEW -->
     <div id="v-compare" style="display:none">
       <div class="panel">
         <div class="panel-hd"><span class="panel-title">⚡ Before / After — drag to compare</span></div>
@@ -389,7 +330,12 @@ input[type=range]{width:100%;accent-color:var(--accent);height:3px}
 <div id="toast"><span id="tIcon"></span><span id="tMsg"></span></div>
 
 <script>
-let serverUrl = 'http://localhost:5000';
+// ── AUTO-DETECT SERVER URL ───────────────────────────────
+// Works on localhost AND on HuggingFace/Railway/any deployment
+function getServer(){
+  return window.location.origin;
+}
+
 let origFile = null, origDataUrl = null;
 let resultBlob = null, resultUrl = null;
 let selModel = 'general';
@@ -397,33 +343,28 @@ let selBg = 'transparent';
 let history = [];
 let curView = 'edit';
 
-// ── SERVER ──────────────────────────────────────────────
-function getServer(){ return document.getElementById('serverUrl').value.replace(/\/$/,''); }
-
 async function testServer(){
   const url = getServer();
   const dot = document.getElementById('statusDot');
   const txt = document.getElementById('statusText');
-  dot.className = 'status-dot'; txt.textContent = 'Testing…';
+  dot.className = 'status-dot'; txt.textContent = 'Checking…';
   try {
-    const r = await fetch(url+'/health', {signal: AbortSignal.timeout(4000)});
+    const r = await fetch(url+'/health', {signal: AbortSignal.timeout(6000)});
     const d = await r.json();
     dot.className = 'status-dot online';
     txt.textContent = 'Server online ✓';
-    toast('✓','Flask server connected! Models: '+d.models.join(', '),'success');
+    toast('✓','Connected! Models: '+d.models.join(', '),'success');
   } catch(e){
     dot.className = 'status-dot offline';
     txt.textContent = 'Server offline';
-    toast('⚠','Cannot reach server at '+url,'error');
+    toast('⚠','Cannot reach server','error');
   }
 }
 
-// ── DRAG & DROP ─────────────────────────────────────────
 function dov(e){ e.preventDefault(); document.getElementById('dropZone').classList.add('over'); }
 function dol(){ document.getElementById('dropZone').classList.remove('over'); }
 function dod(e){ e.preventDefault(); dol(); const f=e.dataTransfer.files[0]; if(f&&f.type.startsWith('image/')) loadFile(f); }
 
-// ── LOAD ────────────────────────────────────────────────
 function loadFile(file){
   if(!file) return;
   origFile = file;
@@ -432,11 +373,9 @@ function loadFile(file){
     origDataUrl = e.target.result;
     document.getElementById('uploadSection').style.display='none';
     document.getElementById('editor').classList.add('show');
-    // show original
     const op = document.getElementById('origPanel');
     op.innerHTML = `<img src="${origDataUrl}"/>`;
     document.getElementById('imgMeta').textContent = file.name+' · '+(file.size<1048576?(file.size/1024).toFixed(1)+'KB':(file.size/1048576).toFixed(2)+'MB');
-    // reset result
     document.getElementById('resPanel').innerHTML = `<div class="ph" id="resPlaceholder"><div class="ph-icon">✨</div>Click "Remove Background"</div><div class="proc-overlay" id="procOverlay"><div class="spinner"></div><div class="proc-msg">Processing with rembg…</div><div class="proc-sub" id="procSub">Loading model</div></div>`;
     resultBlob=null; resultUrl=null;
     document.getElementById('dlBtn').disabled=true;
@@ -452,7 +391,6 @@ function resetAll(){
   document.getElementById('editor').classList.remove('show');
 }
 
-// ── PROCESS ─────────────────────────────────────────────
 async function processImage(){
   if(!origFile) return toast('⚠','Upload an image first','error');
   const url = getServer();
@@ -462,13 +400,12 @@ async function processImage(){
   document.getElementById('procIcon').textContent='⏳';
   document.getElementById('procTxt').textContent='Sending to rembg…';
   overlay.style.display='flex';
-  document.getElementById('resPlaceholder') && (document.getElementById('resPlaceholder').style.display='none');
+  const rp = document.getElementById('resPlaceholder');
+  if(rp) rp.style.display='none';
 
-  // Progress pulse
   const pw = document.getElementById('progWrap'); pw.style.display='block';
   const pb = document.getElementById('progBar');
   let prog=0, pInterval = setInterval(()=>{ prog=Math.min(prog+Math.random()*8,88); pb.style.width=prog+'%'; },300);
-
   const msgs=['Loading AI model…','Detecting edges…','Separating subject…','Refining mask…','Compositing result…'];
   let mi=0, mInterval = setInterval(()=>{ const el=document.getElementById('procSub'); if(el) el.textContent=msgs[mi++%msgs.length]; },1500);
 
@@ -494,7 +431,6 @@ async function processImage(){
 
     resultBlob = blob;
     resultUrl = URL.createObjectURL(blob);
-    
     const elapsed = resp.headers.get('X-Processing-Time') || (Date.now()-t0);
     const w = resp.headers.get('X-Image-Width')||'—';
     const h = resp.headers.get('X-Image-Height')||'—';
@@ -510,14 +446,12 @@ async function processImage(){
     document.getElementById('sDims').textContent=w+'×'+h;
     document.getElementById('sTime').textContent=elapsed;
     document.getElementById('sModel').textContent=selModel;
-    document.getElementById('sDone').style.display='flex';
     document.getElementById('resMeta').textContent=w+'×'+h+' '+document.getElementById('outFmt').value.toUpperCase();
-
     document.getElementById('dlBtn').disabled=false;
     document.getElementById('copyBtn').disabled=false;
     addHistory(resultUrl, origFile.name);
     if(curView==='compare') buildCompare();
-    toast('✓','Background removed by rembg!','success');
+    toast('✓','Background removed!','success');
   } catch(e){
     clearInterval(pInterval); clearInterval(mInterval);
     pw.style.display='none';
@@ -531,7 +465,6 @@ async function processImage(){
   document.getElementById('procTxt').textContent='Remove Background';
 }
 
-// ── CONTROLS ────────────────────────────────────────────
 function setModel(m,el){
   selModel=m;
   document.querySelectorAll('.model-btn').forEach(b=>b.classList.remove('active'));
@@ -544,19 +477,14 @@ function selSwatch(c,el){
   document.getElementById('hexIn').value = c==='transparent'?'':c;
   if(c!=='transparent'&&c.startsWith('#')) document.getElementById('cpicker').value=c;
 }
-function onHex(v){
-  if(/^#[0-9a-fA-F]{6}$/.test(v)) selSwatch(v,null);
-}
+function onHex(v){ if(/^#[0-9a-fA-F]{6}$/.test(v)) selSwatch(v,null); }
 function toggleShadowOpts(on){ document.getElementById('shadowOpts').style.display=on?'block':'none'; }
 
-// ── DOWNLOAD ────────────────────────────────────────────
 function dlResult(){
   if(!resultBlob) return;
   const fmt = document.getElementById('outFmt').value;
   const a = document.createElement('a');
-  a.href = resultUrl;
-  a.download = 'cutout.'+fmt;
-  a.click();
+  a.href = resultUrl; a.download = 'cutout.'+fmt; a.click();
   toast('⬇','Downloaded!','success');
 }
 
@@ -565,20 +493,17 @@ async function copyImg(){
   try {
     const png = resultBlob.type==='image/png' ? resultBlob : await convertToPng(resultBlob);
     await navigator.clipboard.write([new ClipboardItem({'image/png':png})]);
-    toast('📋','Copied to clipboard!','success');
+    toast('📋','Copied!','success');
   } catch(e){ toast('⚠','Copy failed: '+e.message,'error'); }
 }
-
 async function convertToPng(blob){
   const url=URL.createObjectURL(blob);
-  const img=await loadImg(url);
+  const img=await new Promise((res,rej)=>{ const i=new Image(); i.onload=()=>res(i); i.onerror=rej; i.src=url; });
   const c=document.createElement('canvas'); c.width=img.width; c.height=img.height;
   c.getContext('2d').drawImage(img,0,0);
   return new Promise(res=>c.toBlob(res,'image/png'));
 }
-function loadImg(src){ return new Promise((res,rej)=>{ const i=new Image(); i.onload=()=>res(i); i.onerror=rej; i.src=src; }); }
 
-// ── COMPARE ─────────────────────────────────────────────
 function sv(v){
   curView=v;
   ['edit','compare'].forEach(x=>{ document.getElementById('v-'+x).style.display=x===v?'block':'none'; document.getElementById('t-'+x).classList.toggle('active',x===v); });
@@ -589,23 +514,14 @@ function buildCompare(){
   const c=document.getElementById('cmpContainer');
   if(!resultUrl||!origDataUrl){ c.innerHTML='<div class="ph"><div class="ph-icon">⚡</div>Process an image first</div>'; return; }
   c.innerHTML=`<div class="cmp-wrap" id="cw" style="max-width:640px;width:100%"><img src="${origDataUrl}" id="cb"/><div class="cmp-after" id="ca" style="clip-path:inset(0 50% 0 0)"><img src="${resultUrl}"/></div><div class="cmp-div" id="cd" style="left:50%"><div class="cmp-handle">↔</div></div><div class="cmp-labels"><span class="clabel">Original</span><span class="clabel">Result</span></div></div>`;
-  const wrap=document.getElementById('cw'), after=document.getElementById('ca'), div=document.getElementById('cd');
+  const wrap=document.getElementById('cw'),after=document.getElementById('ca'),div=document.getElementById('cd');
   let drag=false;
   wrap.addEventListener('mousedown',()=>drag=true);
   document.addEventListener('mouseup',()=>drag=false);
-  document.addEventListener('mousemove',e=>{
-    if(!drag)return; const r=wrap.getBoundingClientRect();
-    const p=Math.max(0,Math.min(100,((e.clientX-r.left)/r.width)*100));
-    div.style.left=p+'%'; after.style.clipPath=`inset(0 ${100-p}% 0 0)`;
-  });
-  wrap.addEventListener('touchmove',e=>{
-    const r=wrap.getBoundingClientRect();
-    const p=Math.max(0,Math.min(100,((e.touches[0].clientX-r.left)/r.width)*100));
-    div.style.left=p+'%'; after.style.clipPath=`inset(0 ${100-p}% 0 0)`;
-  },{passive:true});
+  document.addEventListener('mousemove',e=>{ if(!drag)return; const r=wrap.getBoundingClientRect(); const p=Math.max(0,Math.min(100,((e.clientX-r.left)/r.width)*100)); div.style.left=p+'%'; after.style.clipPath=`inset(0 ${100-p}% 0 0)`; });
+  wrap.addEventListener('touchmove',e=>{ const r=wrap.getBoundingClientRect(); const p=Math.max(0,Math.min(100,((e.touches[0].clientX-r.left)/r.width)*100)); div.style.left=p+'%'; after.style.clipPath=`inset(0 ${100-p}% 0 0)`; },{passive:true});
 }
 
-// ── HISTORY ────────────────────────────��────────────────
 function addHistory(url,name){
   history.unshift({url,name});
   if(history.length>16) history.pop();
@@ -623,7 +539,6 @@ function restoreHist(i){
   toast('↩','Restored from history','success');
 }
 
-// ── TOAST ───────────────────────────────────────────────
 function toast(icon,msg,type=''){
   const t=document.getElementById('toast');
   document.getElementById('tIcon').textContent=icon;
@@ -632,7 +547,6 @@ function toast(icon,msg,type=''){
   t.classList.add('show'); setTimeout(()=>t.classList.remove('show'),3500);
 }
 
-// ── INIT ────────────────────────────────────────────────
 testServer();
 </script>
 </body>