Team Ai
Apppublic

ruby0451/WS

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
script.js70 linesDownload Raw Back to frontend
1document.addEventListener('DOMContentLoaded', () => {2    const imageInput = document.getElementById('image-input');3    const processBtn = document.getElementById('process-btn');4    const fileListContainer = document.getElementById('file-list');5    const resultsContainer = document.getElementById('results-container');6    const loader = document.getElementById('loader');7 8    let selectedFiles = [];9 10    imageInput.addEventListener('change', (event) => {11        selectedFiles = Array.from(event.target.files);12        fileListContainer.innerHTML = ''; // Clear previous list13        if (selectedFiles.length > 0) {14            const list = document.createElement('ul');15            selectedFiles.forEach(file => {16                const listItem = document.createElement('li');17                listItem.textContent = file.name;18                list.appendChild(listItem);19            });20            fileListContainer.appendChild(list);21            processBtn.disabled = false;22        } else {23            processBtn.disabled = true;24        }25        resultsContainer.innerHTML = '<p>处理完成后,这里将提供下载链接。</p>'; // Reset results26    });27 28    processBtn.addEventListener('click', async () => {29        if (selectedFiles.length === 0) {30            alert('请先选择至少一张图片!');31            return;32        }33 34        processBtn.disabled = true;35        loader.style.display = 'block';36        resultsContainer.innerHTML = ''; // Clear previous results37 38        const formData = new FormData();39        selectedFiles.forEach(file => {40            formData.append('files', file);41        });42 43        try {44            const response = await fetch('/remove-watermark-batch', {45                method: 'POST',46                body: formData,47            });48 49            if (!response.ok) {50                throw new Error(`HTTP error! status: ${response.status}`);51            }52 53            const zipBlob = await response.blob();54            const downloadUrl = URL.createObjectURL(zipBlob);55            const downloadLink = document.createElement('a');56            downloadLink.href = downloadUrl;57            downloadLink.download = 'processed_images.zip';58            downloadLink.textContent = '下载处理结果 (ZIP)';59            downloadLink.className = 'download-btn';60            resultsContainer.appendChild(downloadLink);61 62        } catch (error) {63            console.error('处理图片时出错:', error);64            resultsContainer.innerHTML = `<p style="color: red;">处理失败: ${error.message}</p>`;65        } finally {66            loader.style.display = 'none';67            processBtn.disabled = false;68        }69    });70});