Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FreeME — Magic Eraser</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg: #0a0a0f; | |
| --surface: #12121a; | |
| --surface2: #1a1a26; | |
| --border: #2a2a3d; | |
| --accent: #f97316; | |
| --accent2: #fb923c; | |
| --text: #f1f5f9; | |
| --muted: #64748b; | |
| --success: #22c55e; | |
| --error: #ef4444; | |
| --radius: 12px; | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* ── Animated BG ── */ | |
| body::before { | |
| content: ''; | |
| position: fixed; inset: 0; | |
| background: | |
| radial-gradient(ellipse 800px 600px at 20% 20%, rgba(249,115,22,0.06) 0%, transparent 70%), | |
| radial-gradient(ellipse 600px 400px at 80% 80%, rgba(249,115,22,0.04) 0%, transparent 70%); | |
| pointer-events: none; z-index: 0; | |
| } | |
| .wrap { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; } | |
| /* ── Header ── */ | |
| header { | |
| display: flex; align-items: center; justify-content: space-between; | |
| padding: 20px 0 32px; | |
| border-bottom: 1px solid var(--border); | |
| margin-bottom: 32px; | |
| } | |
| .logo { | |
| display: flex; align-items: center; gap: 10px; | |
| font-size: 1.4rem; font-weight: 800; letter-spacing: -0.5px; | |
| } | |
| .logo span { color: var(--accent); } | |
| .badge { | |
| background: rgba(249,115,22,0.15); color: var(--accent); | |
| border: 1px solid rgba(249,115,22,0.3); | |
| padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; | |
| font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; | |
| } | |
| .nav-links { display: flex; gap: 20px; } | |
| .nav-links a { | |
| color: var(--muted); text-decoration: none; font-size: 0.9rem; | |
| transition: color .2s; | |
| } | |
| .nav-links a:hover { color: var(--text); } | |
| /* ── API Key bar ── */ | |
| .api-bar { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 14px 20px; | |
| display: flex; align-items: center; gap: 12px; | |
| margin-bottom: 28px; | |
| } | |
| .api-bar label { | |
| font-size: 0.82rem; color: var(--muted); | |
| white-space: nowrap; font-weight: 600; | |
| } | |
| .api-bar input { | |
| flex: 1; background: transparent; border: none; outline: none; | |
| color: var(--text); font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.85rem; | |
| } | |
| .api-bar input::placeholder { color: var(--muted); } | |
| .usage-chip { | |
| background: var(--surface2); border: 1px solid var(--border); | |
| border-radius: 20px; padding: 4px 12px; | |
| font-size: 0.78rem; color: var(--muted); white-space: nowrap; | |
| cursor: pointer; transition: border-color .2s; | |
| } | |
| .usage-chip:hover { border-color: var(--accent); color: var(--text); } | |
| /* ── Main layout ── */ | |
| .main-grid { | |
| display: grid; grid-template-columns: 1fr 340px; gap: 20px; | |
| } | |
| /* ── Canvas panel ── */ | |
| .canvas-panel { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| } | |
| .panel-header { | |
| display: flex; align-items: center; justify-content: space-between; | |
| padding: 14px 18px; | |
| border-bottom: 1px solid var(--border); | |
| background: var(--surface2); | |
| } | |
| .panel-title { | |
| font-size: 0.82rem; font-weight: 600; color: var(--muted); | |
| letter-spacing: 0.5px; text-transform: uppercase; | |
| } | |
| .panel-actions { display: flex; gap: 8px; } | |
| .canvas-wrap { | |
| position: relative; | |
| width: 100%; aspect-ratio: 4/3; | |
| background: repeating-conic-gradient(#1a1a26 0% 25%, #12121a 0% 50%) 0 0 / 20px 20px; | |
| display: flex; align-items: center; justify-content: center; | |
| cursor: crosshair; | |
| overflow: hidden; | |
| } | |
| .canvas-wrap canvas { | |
| position: absolute; top: 0; left: 0; | |
| width: 100%; height: 100%; | |
| object-fit: contain; | |
| } | |
| #canvas-bg { z-index: 1; } | |
| #canvas-draw { z-index: 2; opacity: 0.55; } | |
| #canvas-cursor { z-index: 3; pointer-events: none; } | |
| .upload-hint { | |
| position: absolute; z-index: 10; | |
| display: flex; flex-direction: column; align-items: center; gap: 12px; | |
| pointer-events: none; | |
| } | |
| .upload-hint.hidden { display: none; } | |
| .upload-icon { | |
| width: 56px; height: 56px; | |
| border: 2px dashed var(--border); | |
| border-radius: 50%; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 1.5rem; | |
| background: var(--surface2); | |
| } | |
| .upload-hint p { color: var(--muted); font-size: 0.88rem; text-align: center; } | |
| /* ── Toolbar ── */ | |
| .toolbar { | |
| display: flex; align-items: center; gap: 10px; | |
| padding: 12px 18px; | |
| border-top: 1px solid var(--border); | |
| flex-wrap: wrap; | |
| } | |
| .tool-group { | |
| display: flex; align-items: center; gap: 6px; | |
| } | |
| .tool-label { | |
| font-size: 0.75rem; color: var(--muted); | |
| font-weight: 600; text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| width: 80px; height: 4px; | |
| background: var(--surface2); | |
| border-radius: 2px; cursor: pointer; | |
| border: 1px solid var(--border); | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 14px; height: 14px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| cursor: pointer; | |
| } | |
| .icon-btn { | |
| background: var(--surface2); border: 1px solid var(--border); | |
| color: var(--muted); border-radius: 8px; | |
| width: 32px; height: 32px; | |
| display: flex; align-items: center; justify-content: center; | |
| cursor: pointer; font-size: 0.9rem; transition: all .2s; | |
| } | |
| .icon-btn:hover { border-color: var(--accent); color: var(--text); } | |
| /* ── Right panel ── */ | |
| .right-panel { display: flex; flex-direction: column; gap: 16px; } | |
| .card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 20px; | |
| } | |
| .card-title { | |
| font-size: 0.78rem; font-weight: 700; color: var(--muted); | |
| letter-spacing: 0.8px; text-transform: uppercase; | |
| margin-bottom: 14px; | |
| } | |
| /* Model chips */ | |
| .model-chips { display: flex; flex-direction: column; gap: 8px; } | |
| .model-chip { | |
| display: flex; align-items: center; justify-content: space-between; | |
| padding: 10px 14px; | |
| background: var(--surface2); border: 1px solid var(--border); | |
| border-radius: 8px; cursor: pointer; | |
| transition: all .2s; | |
| } | |
| .model-chip:hover { border-color: var(--accent); } | |
| .model-chip.active { | |
| border-color: var(--accent); | |
| background: rgba(249,115,22,0.1); | |
| } | |
| .model-chip-name { font-size: 0.88rem; font-weight: 600; } | |
| .model-chip-desc { font-size: 0.72rem; color: var(--muted); } | |
| .model-chip-speed { | |
| font-size: 0.7rem; font-weight: 600; | |
| padding: 2px 8px; border-radius: 20px; | |
| background: rgba(249,115,22,0.15); color: var(--accent); | |
| } | |
| /* Erase button */ | |
| .erase-btn { | |
| width: 100%; padding: 14px; | |
| background: linear-gradient(135deg, var(--accent), var(--accent2)); | |
| color: white; font-family: 'Space Grotesk', sans-serif; | |
| font-size: 1rem; font-weight: 700; | |
| border: none; border-radius: 10px; cursor: pointer; | |
| transition: all .2s; letter-spacing: -0.2px; | |
| display: flex; align-items: center; justify-content: center; gap: 8px; | |
| } | |
| .erase-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(249,115,22,0.3); } | |
| .erase-btn:active { transform: translateY(0); } | |
| .erase-btn:disabled { | |
| opacity: 0.5; cursor: not-allowed; transform: none; | |
| box-shadow: none; | |
| } | |
| /* Status */ | |
| .status-card { | |
| padding: 12px 16px; | |
| border-radius: 8px; | |
| font-size: 0.85rem; | |
| display: none; | |
| } | |
| .status-card.show { display: block; } | |
| .status-card.processing { | |
| background: rgba(249,115,22,0.1); | |
| border: 1px solid rgba(249,115,22,0.3); | |
| color: var(--accent2); | |
| } | |
| .status-card.success { | |
| background: rgba(34,197,94,0.1); | |
| border: 1px solid rgba(34,197,94,0.3); | |
| color: var(--success); | |
| } | |
| .status-card.error { | |
| background: rgba(239,68,68,0.1); | |
| border: 1px solid rgba(239,68,68,0.3); | |
| color: var(--error); | |
| } | |
| /* Result */ | |
| .result-card { display: none; } | |
| .result-card.show { display: block; } | |
| .result-img-wrap { | |
| width: 100%; aspect-ratio: 1; | |
| background: repeating-conic-gradient(#1a1a26 0% 25%, #12121a 0% 50%) 0 0 / 16px 16px; | |
| border-radius: 8px; overflow: hidden; margin-bottom: 12px; | |
| display: flex; align-items: center; justify-content: center; | |
| } | |
| .result-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; } | |
| .download-btn { | |
| width: 100%; padding: 10px; | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| color: var(--text); font-family: 'Space Grotesk', sans-serif; | |
| font-size: 0.88rem; font-weight: 600; | |
| border-radius: 8px; cursor: pointer; | |
| transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 6px; | |
| } | |
| .download-btn:hover { border-color: var(--accent); color: var(--accent); } | |
| /* Spinner */ | |
| .spinner { | |
| width: 16px; height: 16px; | |
| border: 2px solid rgba(255,255,255,0.3); | |
| border-top-color: white; | |
| border-radius: 50%; | |
| animation: spin .6s linear infinite; | |
| display: inline-block; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| /* Upload area */ | |
| .upload-zone { | |
| width: 100%; padding: 20px; | |
| background: var(--surface2); border: 1px dashed var(--border); | |
| border-radius: 8px; cursor: pointer; | |
| text-align: center; color: var(--muted); | |
| font-size: 0.85rem; transition: all .2s; | |
| } | |
| .upload-zone:hover { border-color: var(--accent); color: var(--text); } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .main-grid { grid-template-columns: 1fr; } | |
| header { flex-wrap: wrap; gap: 12px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <!-- Header --> | |
| <header> | |
| <div class="logo"> | |
| 🪄 Free<span>ME</span> | |
| <div class="badge">Magic Eraser</div> | |
| </div> | |
| <nav class="nav-links"> | |
| <a href="#">Docs</a> | |
| <a href="#">Pricing</a> | |
| <a href="https://freebg.site">freebg.site</a> | |
| </nav> | |
| </header> | |
| <!-- API Key Bar --> | |
| <div class="api-bar"> | |
| <label>🔑 API KEY</label> | |
| <input type="password" id="apiKeyInput" placeholder="freebg-me-xxxx — get one at freebg.site" /> | |
| <div class="usage-chip" onclick="checkUsage()">Check Usage</div> | |
| </div> | |
| <!-- Main Grid --> | |
| <div class="main-grid"> | |
| <!-- Canvas Panel --> | |
| <div class="canvas-panel"> | |
| <div class="panel-header"> | |
| <span class="panel-title">🖌️ Paint to Erase</span> | |
| <div class="panel-actions"> | |
| <div class="icon-btn" onclick="undoStroke()" title="Undo">↩</div> | |
| <div class="icon-btn" onclick="clearMask()" title="Clear mask">🗑</div> | |
| <div class="icon-btn" onclick="document.getElementById('fileInput').click()" title="Upload">📁</div> | |
| </div> | |
| </div> | |
| <div class="canvas-wrap" id="canvasWrap" | |
| ondragover="e=>{e.preventDefault()}" | |
| ondrop="handleDrop(event)"> | |
| <canvas id="canvas-bg"></canvas> | |
| <canvas id="canvas-draw"></canvas> | |
| <canvas id="canvas-cursor"></canvas> | |
| <div class="upload-hint" id="uploadHint"> | |
| <div class="upload-icon">🖼️</div> | |
| <p>Drop image here<br>or click 📁 to upload</p> | |
| </div> | |
| </div> | |
| <div class="toolbar"> | |
| <div class="tool-group"> | |
| <span class="tool-label">Brush</span> | |
| <input type="range" id="brushSize" min="5" max="80" value="24" | |
| oninput="updateBrushDisplay(this.value)" /> | |
| <span id="brushVal" style="font-size:.75rem;color:var(--muted);width:24px;">24</span> | |
| </div> | |
| <div class="tool-group" style="margin-left:auto;"> | |
| <span style="font-size:.75rem;color:var(--muted);">Hold Shift = straight line</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel --> | |
| <div class="right-panel"> | |
| <!-- Model select --> | |
| <div class="card"> | |
| <div class="card-title">⚙️ Model</div> | |
| <div class="model-chips"> | |
| <div class="model-chip active" onclick="selectModel('fast', this)"> | |
| <div> | |
| <div class="model-chip-name">Fast</div> | |
| <div class="model-chip-desc">LaMa · CPU · Great for most objects</div> | |
| </div> | |
| <div class="model-chip-speed">~8s</div> | |
| </div> | |
| <div class="model-chip" onclick="selectModel('quality', this)"> | |
| <div> | |
| <div class="model-chip-name">Quality</div> | |
| <div class="model-chip-desc">LaMa + sharpen · Better edges</div> | |
| </div> | |
| <div class="model-chip-speed">~15s</div> | |
| </div> | |
| <div class="model-chip" onclick="selectModel('best', this)"> | |
| <div> | |
| <div class="model-chip-name">Best</div> | |
| <div class="model-chip-desc">SD1.5 on GPU · LaMa fallback on CPU</div> | |
| </div> | |
| <div class="model-chip-speed">GPU ⚡</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Erase button --> | |
| <button class="erase-btn" id="eraseBtn" onclick="doErase()"> | |
| 🪄 Erase Object | |
| </button> | |
| <!-- Status --> | |
| <div class="status-card" id="statusCard"></div> | |
| <!-- Result --> | |
| <div class="card result-card" id="resultCard"> | |
| <div class="card-title">✨ Result</div> | |
| <div class="result-img-wrap"> | |
| <img id="resultImg" src="" alt="Result" /> | |
| </div> | |
| <button class="download-btn" onclick="downloadResult()"> | |
| ⬇️ Download PNG | |
| </button> | |
| </div> | |
| <!-- Info card --> | |
| <div class="card" style="font-size:0.82rem; color:var(--muted); line-height:1.6;"> | |
| <div class="card-title">ℹ️ How to use</div> | |
| 1. Upload your photo<br> | |
| 2. Paint red over the object to remove<br> | |
| 3. Choose model quality<br> | |
| 4. Click "Erase Object"<br> | |
| 5. Download the result PNG | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hidden file input --> | |
| <input type="file" id="fileInput" accept="image/*" style="display:none" onchange="loadFile(this)" /> | |
| <script> | |
| // ── Config ───────────────────────────────────────────────────────────────── | |
| const API_BASE = localStorage.getItem('freeme_api_url') | |
| || 'https://freebg-magic-eraser.hf.space'; | |
| // ── State ────────────────────────────────────────────────────────────────── | |
| let selectedModel = 'fast'; | |
| let isDrawing = false; | |
| let lastX = 0, lastY = 0; | |
| let strokeHistory = []; | |
| let currentStroke = []; | |
| let loadedImage = null; | |
| let resultBlob = null; | |
| const canvasBg = document.getElementById('canvas-bg'); | |
| const canvasDraw = document.getElementById('canvas-draw'); | |
| const canvasCursor= document.getElementById('canvas-cursor'); | |
| const ctxBg = canvasBg.getContext('2d'); | |
| const ctxDraw = canvasDraw.getContext('2d'); | |
| const ctxCursor = canvasCursor.getContext('2d'); | |
| const wrap = document.getElementById('canvasWrap'); | |
| // ── Canvas resize ────────────────────────────────────────────────────────── | |
| function resizeCanvases() { | |
| const w = wrap.offsetWidth; | |
| const h = wrap.offsetHeight; | |
| [canvasBg, canvasDraw, canvasCursor].forEach(c => { | |
| c.width = w; c.height = h; | |
| c.style.width = w + 'px'; | |
| c.style.height = h + 'px'; | |
| }); | |
| if (loadedImage) drawImage(); | |
| redrawMask(); | |
| } | |
| window.addEventListener('resize', resizeCanvases); | |
| resizeCanvases(); | |
| // ── Image loading ────────────────────────────────────────────────────────── | |
| function loadFile(input) { | |
| const file = input.files[0]; | |
| if (!file) return; | |
| loadImageFile(file); | |
| } | |
| function handleDrop(e) { | |
| e.preventDefault(); | |
| const file = e.dataTransfer.files[0]; | |
| if (file && file.type.startsWith('image/')) loadImageFile(file); | |
| } | |
| function loadImageFile(file) { | |
| const reader = new FileReader(); | |
| reader.onload = (ev) => { | |
| const img = new Image(); | |
| img.onload = () => { | |
| loadedImage = img; | |
| document.getElementById('uploadHint').classList.add('hidden'); | |
| clearMask(); | |
| drawImage(); | |
| }; | |
| img.src = ev.target.result; | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| function drawImage() { | |
| if (!loadedImage) return; | |
| const cw = canvasBg.width, ch = canvasBg.height; | |
| const scale = Math.min(cw / loadedImage.width, ch / loadedImage.height); | |
| const dw = loadedImage.width * scale; | |
| const dh = loadedImage.height * scale; | |
| const dx = (cw - dw) / 2; | |
| const dy = (ch - dh) / 2; | |
| ctxBg.clearRect(0, 0, cw, ch); | |
| ctxBg.drawImage(loadedImage, dx, dy, dw, dh); | |
| } | |
| // ── Drawing ──────────────────────────────────────────────────────────────── | |
| function getBrushSize() { | |
| return parseInt(document.getElementById('brushSize').value); | |
| } | |
| function canvasPos(e) { | |
| const rect = canvasDraw.getBoundingClientRect(); | |
| const touch = e.touches ? e.touches[0] : e; | |
| return { | |
| x: (touch.clientX - rect.left) * (canvasDraw.width / rect.width), | |
| y: (touch.clientY - rect.top) * (canvasDraw.height / rect.height), | |
| }; | |
| } | |
| canvasDraw.addEventListener('mousedown', startDraw); | |
| canvasDraw.addEventListener('mousemove', onMove); | |
| canvasDraw.addEventListener('mouseup', endDraw); | |
| canvasDraw.addEventListener('mouseleave', endDraw); | |
| canvasDraw.addEventListener('touchstart', e => { e.preventDefault(); startDraw(e); }, {passive:false}); | |
| canvasDraw.addEventListener('touchmove', e => { e.preventDefault(); onMove(e); }, {passive:false}); | |
| canvasDraw.addEventListener('touchend', endDraw); | |
| function startDraw(e) { | |
| if (!loadedImage) return; | |
| isDrawing = true; | |
| const pos = canvasPos(e); | |
| lastX = pos.x; lastY = pos.y; | |
| currentStroke = [{x: lastX, y: lastY}]; | |
| ctxDraw.beginPath(); | |
| ctxDraw.arc(pos.x, pos.y, getBrushSize()/2, 0, Math.PI*2); | |
| ctxDraw.fillStyle = 'rgba(239, 68, 68, 0.85)'; | |
| ctxDraw.fill(); | |
| } | |
| function onMove(e) { | |
| const pos = canvasPos(e); | |
| // cursor | |
| ctxCursor.clearRect(0, 0, canvasCursor.width, canvasCursor.height); | |
| ctxCursor.beginPath(); | |
| ctxCursor.arc(pos.x, pos.y, getBrushSize()/2, 0, Math.PI*2); | |
| ctxCursor.strokeStyle = 'rgba(249,115,22,0.8)'; | |
| ctxCursor.lineWidth = 1.5; | |
| ctxCursor.stroke(); | |
| if (!isDrawing) return; | |
| currentStroke.push({x: pos.x, y: pos.y}); | |
| ctxDraw.beginPath(); | |
| ctxDraw.moveTo(lastX, lastY); | |
| ctxDraw.lineTo(pos.x, pos.y); | |
| ctxDraw.strokeStyle = 'rgba(239, 68, 68, 0.85)'; | |
| ctxDraw.lineWidth = getBrushSize(); | |
| ctxDraw.lineCap = 'round'; | |
| ctxDraw.lineJoin = 'round'; | |
| ctxDraw.stroke(); | |
| lastX = pos.x; lastY = pos.y; | |
| } | |
| function endDraw() { | |
| if (isDrawing && currentStroke.length > 0) { | |
| strokeHistory.push({ | |
| stroke: [...currentStroke], | |
| brushSize: getBrushSize(), | |
| }); | |
| } | |
| isDrawing = false; | |
| } | |
| function clearMask() { | |
| ctxDraw.clearRect(0, 0, canvasDraw.width, canvasDraw.height); | |
| strokeHistory = []; | |
| } | |
| function undoStroke() { | |
| if (strokeHistory.length === 0) return; | |
| strokeHistory.pop(); | |
| redrawMask(); | |
| } | |
| function redrawMask() { | |
| ctxDraw.clearRect(0, 0, canvasDraw.width, canvasDraw.height); | |
| for (const s of strokeHistory) { | |
| ctxDraw.beginPath(); | |
| if (s.stroke.length === 1) { | |
| ctxDraw.arc(s.stroke[0].x, s.stroke[0].y, s.brushSize/2, 0, Math.PI*2); | |
| ctxDraw.fillStyle = 'rgba(239, 68, 68, 0.85)'; | |
| ctxDraw.fill(); | |
| } else { | |
| ctxDraw.moveTo(s.stroke[0].x, s.stroke[0].y); | |
| for (let i = 1; i < s.stroke.length; i++) { | |
| ctxDraw.lineTo(s.stroke[i].x, s.stroke[i].y); | |
| } | |
| ctxDraw.strokeStyle = 'rgba(239, 68, 68, 0.85)'; | |
| ctxDraw.lineWidth = s.brushSize; | |
| ctxDraw.lineCap = 'round'; | |
| ctxDraw.lineJoin = 'round'; | |
| ctxDraw.stroke(); | |
| } | |
| } | |
| } | |
| function updateBrushDisplay(v) { | |
| document.getElementById('brushVal').textContent = v; | |
| } | |
| // ── Model selection ──────────────────────────────────────────────────────── | |
| function selectModel(model, el) { | |
| selectedModel = model; | |
| document.querySelectorAll('.model-chip').forEach(c => c.classList.remove('active')); | |
| el.classList.add('active'); | |
| } | |
| // ── Build mask PNG from draw canvas ─────────────────────────────────────── | |
| function buildMaskBlob() { | |
| return new Promise(resolve => { | |
| const maskCanvas = document.createElement('canvas'); | |
| maskCanvas.width = loadedImage.width; | |
| maskCanvas.height = loadedImage.height; | |
| const mCtx = maskCanvas.getContext('2d'); | |
| // Scale the draw canvas strokes to original image coords | |
| const cw = canvasDraw.width, ch = canvasDraw.height; | |
| const scale = Math.min(cw / loadedImage.width, ch / loadedImage.height); | |
| const dw = loadedImage.width * scale; | |
| const dh = loadedImage.height * scale; | |
| const ox = (cw - dw) / 2; | |
| const oy = (ch - dh) / 2; | |
| mCtx.fillStyle = 'black'; | |
| mCtx.fillRect(0, 0, maskCanvas.width, maskCanvas.height); | |
| mCtx.save(); | |
| // Inverse transform: canvas → original image space | |
| mCtx.translate(-ox / scale, -oy / scale); | |
| mCtx.scale(1 / scale, 1 / scale); | |
| for (const s of strokeHistory) { | |
| mCtx.beginPath(); | |
| if (s.stroke.length === 1) { | |
| mCtx.arc(s.stroke[0].x, s.stroke[0].y, s.brushSize/2, 0, Math.PI*2); | |
| mCtx.fillStyle = 'white'; | |
| mCtx.fill(); | |
| } else { | |
| mCtx.moveTo(s.stroke[0].x, s.stroke[0].y); | |
| for (let i = 1; i < s.stroke.length; i++) { | |
| mCtx.lineTo(s.stroke[i].x, s.stroke[i].y); | |
| } | |
| mCtx.strokeStyle = 'white'; | |
| mCtx.lineWidth = s.brushSize; | |
| mCtx.lineCap = 'round'; | |
| mCtx.lineJoin = 'round'; | |
| mCtx.stroke(); | |
| } | |
| } | |
| mCtx.restore(); | |
| maskCanvas.toBlob(blob => resolve(blob), 'image/png'); | |
| }); | |
| } | |
| // ── API Call ─────────────────────────────────────────────────────────────── | |
| async function doErase() { | |
| if (!loadedImage) { | |
| showStatus('error', '❌ Please upload an image first'); | |
| return; | |
| } | |
| if (strokeHistory.length === 0) { | |
| showStatus('error', '❌ Please paint over the area to erase'); | |
| return; | |
| } | |
| const apiKey = document.getElementById('apiKeyInput').value.trim(); | |
| const btn = document.getElementById('eraseBtn'); | |
| btn.disabled = true; | |
| btn.innerHTML = '<div class="spinner"></div> Erasing...'; | |
| showStatus('processing', `⏳ Processing with ${selectedModel} model...`); | |
| try { | |
| // Get original image blob | |
| const imageBlob = await new Promise(resolve => { | |
| const tmpCanvas = document.createElement('canvas'); | |
| tmpCanvas.width = loadedImage.width; | |
| tmpCanvas.height = loadedImage.height; | |
| tmpCanvas.getContext('2d').drawImage(loadedImage, 0, 0); | |
| tmpCanvas.toBlob(resolve, 'image/png'); | |
| }); | |
| const maskBlob = await buildMaskBlob(); | |
| const fd = new FormData(); | |
| fd.append('image', imageBlob, 'image.png'); | |
| fd.append('mask', maskBlob, 'mask.png'); | |
| fd.append('model', selectedModel); | |
| const headers = {}; | |
| if (apiKey) headers['X-API-Key'] = apiKey; | |
| const res = await fetch(`${API_BASE}/api/magic-erase`, { | |
| method: 'POST', | |
| headers, | |
| body: fd, | |
| }); | |
| if (!res.ok) { | |
| const err = await res.json().catch(() => ({error: 'Request failed'})); | |
| throw new Error(err.error || `HTTP ${res.status}`); | |
| } | |
| resultBlob = await res.blob(); | |
| const url = URL.createObjectURL(resultBlob); | |
| document.getElementById('resultImg').src = url; | |
| document.getElementById('resultCard').classList.add('show'); | |
| const procTime = res.headers.get('X-Processing-Time') || ''; | |
| const gpuMode = res.headers.get('X-GPU') || 'cpu'; | |
| showStatus('success', `✅ Done${procTime ? ' in ' + procTime : ''} · ${gpuMode.toUpperCase()}`); | |
| } catch (err) { | |
| showStatus('error', `❌ ${err.message}`); | |
| } finally { | |
| btn.disabled = false; | |
| btn.innerHTML = '🪄 Erase Object'; | |
| } | |
| } | |
| function downloadResult() { | |
| if (!resultBlob) return; | |
| const a = document.createElement('a'); | |
| a.href = URL.createObjectURL(resultBlob); | |
| a.download = 'freeme-result.png'; | |
| a.click(); | |
| } | |
| // ── Status ───────────────────────────────────────────────────────────────── | |
| function showStatus(type, msg) { | |
| const el = document.getElementById('statusCard'); | |
| el.className = `status-card ${type} show`; | |
| el.textContent = msg; | |
| } | |
| // ── Usage check ───────────────────────────────────────────────────────────── | |
| async function checkUsage() { | |
| const key = document.getElementById('apiKeyInput').value.trim(); | |
| if (!key) { alert('Enter your API key first'); return; } | |
| try { | |
| const res = await fetch(`${API_BASE}/api/usage`, { | |
| headers: { 'X-API-Key': key } | |
| }); | |
| const data = await res.json(); | |
| if (data.error) { alert('❌ ' + data.error); return; } | |
| alert( | |
| `📋 Plan: ${data.plan.toUpperCase()}\n` + | |
| `📊 Today: ${data.used_today} / ${data.daily_limit} used\n` + | |
| `✅ Remaining: ${data.remaining}\n` + | |
| `🤖 Models: ${data.models.join(', ')}` | |
| ); | |
| } catch (e) { | |
| alert('❌ Could not reach API: ' + e.message); | |
| } | |
| } | |
| // ── Click on canvas wrap to upload ──────────────────────────────────────── | |
| document.getElementById('uploadHint').parentElement.addEventListener('click', (e) => { | |
| if (!loadedImage && !e.target.closest('.icon-btn')) { | |
| document.getElementById('fileInput').click(); | |
| } | |
| }); | |
| // Persist API key | |
| document.getElementById('apiKeyInput').addEventListener('change', e => { | |
| // Don't store in localStorage for security — just keep in memory | |
| }); | |
| </script> | |
| </body> | |
| </html> |