AI智能抠图 - AI工具�?/title> <style> :root { --bg: #0a0a0f; --card: #14141f; --border: #1f1f35; --text: #e8e8f0; --text2: #7c7c9a; --text3: #5a5a72; --purple: #a78bfa; --green: #34d399; --orange: #fbbf24; --red: #f87171; } * { margin:0; padding:0; box-sizing:border-box; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; min-height: 100vh; -webkit-font-smoothing: antialiased; } .nav { background: rgba(20,20,31,0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 0 16px; display: flex; align-items: center; height: 52px; gap: 12px; position: sticky; top: 0; z-index: 100; justify-content: space-between; } .nav a { color: var(--text2); text-decoration: none; font-size: 0.85rem; } .nav a:hover { color: var(--text); } .nav .logo { color: var(--purple); font-weight: 700; font-size: 1rem; } .nav .quota { font-size: 0.78rem; color: var(--text3); } .page { max-width: 800px; margin: 0 auto; padding: 24px 16px 60px; } .model-status { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 16px; margin-bottom: 16px; font-size: 0.8rem; display: flex; align-items: center; gap: 8px; } .model-status .status-dot { width: 8px; height: 8px; border-radius: 50%; } .model-status .dot-off { background: var(--border); } .model-status .dot-down { background: var(--orange); animation: pulse 1s infinite; } .model-status .dot-ready { background: var(--green); } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} } .limit-warn { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.2); border-radius: 12px; padding: 14px 18px; margin-bottom: 24px; display: none; align-items: flex-start; gap: 10px; font-size: 0.85rem; } .limit-warn.show { display: flex; } .drop-zone { border: 2px dashed var(--border); border-radius: 16px; padding: 48px 24px; text-align: center; cursor: pointer; transition: all 0.25s; background: var(--card); margin-bottom: 24px; } .drop-zone:hover, .drop-zone.drag-over { border-color: var(--purple); background: rgba(167,139,250,0.04); } .drop-zone .icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.5; } .drop-zone .title { font-size: 1.1rem; font-weight: 600; margin-bottom: 6px; } .drop-zone .sub { font-size: 0.8rem; color: var(--text2); } .drop-zone input { display: none; } .drop-zone.has-image { padding: 20px; border-style: solid; cursor: default; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .drop-zone.has-image img { max-width: 220px; max-height: 220px; border-radius: 10px; object-fit: contain; } .drop-zone.has-image .info { flex: 1; min-width: 180px; } .drop-zone.has-image .info .fname { font-size: 0.85rem; margin-bottom: 4px; word-break: break-all; } .drop-zone.has-image .info .fsize { font-size: 0.75rem; color: var(--text2); margin-bottom: 12px; } .preview-area { display: none; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .preview-area.active { display: flex; } .preview-card { flex: 1; min-width: 250px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; text-align: center; position: relative; overflow: hidden; } .preview-card .card-title { font-size: 0.78rem; color: var(--text2); font-weight: 600; margin-bottom: 12px; } .preview-card img { max-width: 100%; max-height: 350px; border-radius: 10px; object-fit: contain; } .preview-card .checkerboard { background-image: linear-gradient(45deg, #1a1a2e 25%, transparent 25%), linear-gradient(-45deg, #1a1a2e 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1a1a2e 75%), linear-gradient(-45deg, transparent 75%, #1a1a2e 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; } .loading-overlay { position: absolute; inset: 0; background: rgba(10,10,15,0.85); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 14px; } @keyframes spin { to { transform: rotate(360deg); } } .spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--purple); border-radius: 50%; animation: spin 0.8s linear infinite; } .loading-progress { width: 200px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; } .loading-progress .bar { height: 100%; background: var(--purple); border-radius: 2px; transition: width 0.3s; width: 0%; } .actions { display: flex; gap: 12px; flex-wrap: wrap; } .btn { padding: 14px 28px; border-radius: 12px; border: none; cursor: pointer; font-size: 0.95rem; font-weight: 700; font-family: inherit; transition: all 0.2s; display: flex; align-items: center; gap: 8px; } .btn-primary { background: linear-gradient(135deg, var(--purple), #7c3aed); color: #fff; box-shadow: 0 4px 20px rgba(167,139,250,0.3); flex: 1; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(167,139,250,0.45); } .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .btn-outline { background: transparent; color: var(--text2); border: 1px solid var(--border); } .btn-outline:hover { border-color: var(--purple); color: var(--text); } .quota-info { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-bottom: 24px; font-size: 0.82rem; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .quota-info .dots { display: flex; gap: 4px; } .quota-info .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); transition: all 0.3s; } .quota-info .dot.used { background: var(--border); } @media (max-width: 600px) { .preview-area { flex-direction: column; } .loading-progress { width: 150px; } } </style> <script src="../../wx-browser-guard.js"></script></head> <body> <div class="nav"> <div style="display:flex;align-items:center;gap:12px"> <a href="../../index.html" class="logo">�?AI工具�?/a> <a href="../../index.html">首页</a> <span style="color:var(--text3)">/</span> <span style="color:var(--text)">AI智能抠图</span> </div> <span class="quota" id="quotaDisplay">今日剩余: 5/5</span> </div> <div class="page"> <div class="limit-warn" id="limitWarn"> <span>🛑</span> <div> <strong>今日免费额度已用�?/strong><br> <span style="color:var(--text2)">每用户每天可免费抠图5张，明天00:00自动重置�?/span> </div> </div> <div class="model-status" id="modelStatus"> <div class="status-dot dot-off" id="statusDot"></div> <span id="statusText">AI模型未加�?/span> </div> <div class="drop-zone" id="dropZone" onclick="if(!checkLimit())return;document.getElementById('fileInput').click()"> <div class="icon">✂️</div> <div class="title">点击或拖拽上传图�?/div> <div class="sub">AI本地识别 · 纯浏览器处理 · 每人每天5�?· 首次加载模型�?5�?/div> <input type="file" id="fileInput" accept="image/*" hidden> </div> <div class="quota-info" id="quotaInfo"> <span>🖼�?今日免费额度</span> <div class="dots" id="quotaDots"></div> <span style="color:var(--text2)" id="quotaText">5/5 �?/span> </div> <div class="preview-area" id="previewArea"> <div class="preview-card"> <div class="card-title">📷 原图</div> <img id="origPreview" alt="原始图片"> </div> <div class="preview-card checkerboard"> <div class="card-title">✂️ 抠图结果（透明背景�?/div> <div class="loading-overlay" id="loadingOverlay" style="display:none"> <div class="spinner"></div> <span style="color:var(--text2)">AI本地处理�?..</span> <div class="loading-progress"><div class="bar" id="progressBar"></div></div> <span style="font-size:0.72rem;color:var(--text3)" id="progressText">正在分析图片</span> </div> <img id="cutoutPreview" alt="抠图结果" style="display:none"> </div> </div> <div class="actions" style="margin-top:8px"> <button class="btn btn-primary" id="cutoutBtn" disabled onclick="doCutout()"> 🤖 AI智能抠图 </button> <button class="btn btn-outline" id="downloadBtn" disabled onclick="downloadResult()"> 💾 下载PNG </button> <button class="btn btn-outline" onclick="resetAll()">🔄 重新选择</button> </div> </div> <script type="module"> import { removeBackground } from 'https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/browser.mjs'; const DAILY_LIMIT = 5; let currentFile = null; let resultBlob = null; let modelReady = false; // ============ 模型状�?============ function setStatus(state, text) { const dot = document.getElementById('statusDot'); dot.className = 'status-dot ' + {loading:'dot-down',ready:'dot-ready',off:'dot-off'}[state]; document.getElementById('statusText').textContent = text; } // 预加载模�?setStatus('loading', '正在下载AI模型…（首次�?5秒，后续秒开�?); const preloadStart = Date.now(); removeBackground(new ImageData(1, 1)).catch(() => {}).finally(() => { modelReady = true; setStatus('ready', `AI模型就绪（加载耗时 ${((Date.now()-preloadStart)/1000).toFixed(1)}s）�?免费无限使用`); }); // ============ 限流 ============ function getUsage() { try { const d = JSON.parse(localStorage.getItem('cutout_usage') || '{}'); const today = new Date().toDateString(); if (d.date !== today) return { date: today, count: 0 }; return d; } catch(e) { return { date: new Date().toDateString(), count: 0 }; } } function saveUsage(u) { localStorage.setItem('cutout_usage', JSON.stringify(u)); } function checkLimit() { const u = getUsage(); if (u.count >= DAILY_LIMIT) { document.getElementById('limitWarn').classList.add('show'); return false; } document.getElementById('limitWarn').classList.remove('show'); return true; } function useQuota() { const u = getUsage(); u.count++; saveUsage(u); updateQuotaUI(); } function updateQuotaUI() { const u = getUsage(); const remain = DAILY_LIMIT - u.count; document.getElementById('quotaDisplay').textContent = `今日剩余: ${remain}/${DAILY_LIMIT}`; document.getElementById('quotaText').textContent = `${remain}/${DAILY_LIMIT} 张`; document.getElementById('quotaDots').innerHTML = Array.from({length: DAILY_LIMIT}, (_, i) => `<div class="dot${i >= remain ? ' used' : ''}"></div>` ).join(''); if (remain <= 0) { document.getElementById('limitWarn').classList.add('show'); document.getElementById('cutoutBtn').disabled = true; } } updateQuotaUI(); // ============ 上传 ============ const dropZone = document.getElementById('dropZone'); const fileInput = document.getElementById('fileInput'); dropZone.addEventListener('dragover', e => { if (!checkLimit()) return; e.preventDefault(); dropZone.classList.add('drag-over'); }); dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over')); dropZone.addEventListener('drop', e => { e.preventDefault(); dropZone.classList.remove('drag-over'); if (!checkLimit()) return; const f = e.dataTransfer.files[0]; if (f?.type?.startsWith('image/')) handleFile(f); }); fileInput.addEventListener('change', () => { if (fileInput.files[0]) handleFile(fileInput.files[0]); }); document.addEventListener('paste', e => { if (!checkLimit()) return; for (const item of e.clipboardData?.items || []) { if (item.type.startsWith('image/')) { handleFile(item.getAsFile()); break; } } }); function handleFile(file) { currentFile = file; document.getElementById('cutoutBtn').disabled = false; const reader = new FileReader(); reader.onload = () => { dropZone.classList.add('has-image'); dropZone.innerHTML = ` <img src="${reader.result}" alt="预览"> <div class="info"> <div class="fname">${file.name}</div> <div class="fsize">${formatSize(file.size)}</div> <button onclick="event.stopPropagation();if(checkLimit())document.getElementById('fileInput').click()" style="padding:6px 14px;border:1px solid var(--border);border-radius:8px;font-size:.8rem;cursor:pointer;color:var(--text2);background:transparent;font-family:inherit">🔄 换一�?/button> </div> <input type="file" accept="image/*" hidden> `; document.getElementById('origPreview').src = reader.result; document.getElementById('previewArea').classList.add('active'); document.getElementById('cutoutPreview').style.display = 'none'; document.getElementById('loadingOverlay').style.display = 'none'; document.getElementById('downloadBtn').disabled = true; resultBlob = null; }; reader.readAsDataURL(file); } // ============ AI抠图 ============ window.doCutout = async function() { if (!currentFile) return; if (!checkLimit()) return; if (!modelReady) return alert('AI模型还在加载中，请等黄色指示灯变绿后再试（约15秒）'); const overlay = document.getElementById('loadingOverlay'); const preview = document.getElementById('cutoutPreview'); overlay.style.display = 'flex'; preview.style.display = 'none'; document.getElementById('progressBar').style.width = '0%'; document.getElementById('progressText').textContent = '正在分析图片�?; document.getElementById('cutoutBtn').disabled = true; try { // 模拟进度 const progressTimer = setInterval(() => { const bar = document.getElementById('progressBar'); const w = parseFloat(bar.style.width) || 0; if (w < 90) bar.style.width = (w + Math.random() * 15) + '%'; }, 600); document.getElementById('progressText').textContent = 'AI识别主体中�?; const blob = await removeBackground(currentFile, { model: 'medium', // medium质量好，small更小更快 output: { format: 'image/png' }, progress: (key, current, total) => { document.getElementById('progressText').textContent = `处理�? ${key}`; const pct = Math.round(current / total * 100); document.getElementById('progressBar').style.width = pct + '%'; } }); clearInterval(progressTimer); document.getElementById('progressBar').style.width = '100%'; document.getElementById('progressText').textContent = '完成�?; resultBlob = blob; const url = URL.createObjectURL(blob); document.getElementById('cutoutPreview').src = url; document.getElementById('cutoutPreview').style.display = 'block'; document.getElementById('loadingOverlay').style.display = 'none'; document.getElementById('downloadBtn').disabled = false; document.getElementById('cutoutBtn').disabled = false; useQuota(); updateQuotaUI(); } catch (err) { overlay.style.display = 'none'; document.getElementById('cutoutBtn').disabled = false; alert('抠图失败: ' + (err.message || '未知错误') + '\n请尝试换一张图片或刷新页面重试'); } }; window.downloadResult = function() { if (!resultBlob) return; const url = URL.createObjectURL(resultBlob); const a = document.createElement('a'); a.href = url; a.download = (currentFile?.name || 'image').replace(/\.[^.]+$/, '') + '_cutout.png'; a.click(); URL.revokeObjectURL(url); }; window.resetAll = function() { currentFile = null; resultBlob = null; dropZone.classList.remove('has-image'); dropZone.innerHTML = ` <div class="icon">✂️</div> <div class="title">点击或拖拽上传图�?/div> <div class="sub">AI本地识别 · 纯浏览器处理 · 每人每天5�?· 首次加载模型�?5�?/div> <input type="file" id="fileInputRef" accept="image/*" hidden> `; document.getElementById('previewArea').classList.remove('active'); document.getElementById('cutoutBtn').disabled = true; document.getElementById('downloadBtn').disabled = true; }; function formatSize(bytes) { if (!bytes) return '0 B'; if (bytes < 1024) return bytes + ' B'; if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB'; return (bytes / 1048576).toFixed(2) + ' MB'; } </script> </body> </html>