// ... existing code ... // ... existing code ... function handleDragOver(e) { e.preventDefault(); e.currentTarget.classList.add('border-blue-500', 'bg-blue-200'); } function handleDragEnter(e) { e.preventDefault(); } function handleDragLeave(e) { e.preventDefault(); e.currentTarget.classList.remove('border-blue-500', 'bg-blue-200'); } function handleDrop(e) { e.preventDefault(); e.currentTarget.classList.remove('border-blue-500', 'bg-blue-200'); const files = e.dataTransfer.files; if (files.length > 0) { handleFileUpload(files[0]); } } // 文件选择处理 function handleFileSelect(e) { const file = e.target.files[0]; if (file) { handleFileUpload(file); } } // 全局变量 let currentTaskId = null; let pollInterval = null; let processedImageUrl = null; // 存储普通质量图片URL let processedHDImageUrl = null; // 存储HD质量图片URL // 文件转base64 function fileToBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(file); }); } // 图片URL转base64 async function imageUrlToBase64(url) { try { const response = await fetch(url); const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(blob); }); } catch (error) { throw new Error('No se pudo convertir la URL de la imagen a base64'); } } // 处理示例图片点击 async function handleExampleImageClick(imageSrc) { try { // 显示对比UI const comparisonUI = document.getElementById('comparisonUI'); comparisonUI.classList.remove('hidden'); // 滚动到处理区域 scrollToComparisonUI(); // 显示原始图片 const originalImage = document.getElementById('originalImage'); const originalImageContainer = document.getElementById('originalImageContainer'); const processedImageContainer = document.getElementById('processedImageContainer'); const processingLoader = document.getElementById('processingLoader'); // 设置原始图片 originalImage.src = imageSrc; // 显示原始图片，隐藏处理后图片，显示加载状态 originalImageContainer.classList.remove('hidden'); processedImageContainer.classList.add('hidden'); processingLoader.classList.remove('hidden'); // 淡入效果 setTimeout(() => { processingLoader.classList.remove('opacity-0'); processingLoader.classList.add('opacity-100'); }, 10); // 启动进度动画 startProgressAnimation(); // 转换图片URL为base64 const base64 = await imageUrlToBase64(imageSrc); // 提交任务 const formData = new FormData(); formData.append('image_url', base64); formData.append('prompt', PROMPT); formData.append('user_email', ''); const response = await fetch(API_ENDPOINT, { method: 'POST', body: formData }); const result = await response.json(); if (result.error) { throw new Error(result.error); } if (result.task_id) { currentTaskId = result.task_id; console.log('Tarea enviada, task_id:', currentTaskId); startPolling(); } else { throw new Error('No se obtuvo el ID de la tarea'); } } catch (error) { console.error('Procesamiento fallido:', error); window.showErrorModal(`Procesamiento fallido: ${error.message}`); // 隐藏加载状态 const processingLoader = document.getElementById('processingLoader'); processingLoader.classList.add('hidden'); } } // 文件上传处理 async function handleFileUpload(file) { // 验证文件类型 const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/bmp', 'image/tiff', 'image/tif', 'image/webp']; if (!validTypes.includes(file.type)) { alert('Por favor, sube imágenes en formato JPG, JPEG, PNG, BMP, TIFF o WebP'); return; } // 验证文件大小 (10MB) const maxSize = 10 * 1024 * 1024; if (file.size > maxSize) { alert('El tamaño del archivo no puede exceder los 10MB'); return; } try { // 显示对比UI const comparisonUI = document.getElementById('comparisonUI'); comparisonUI.classList.remove('hidden'); // 滚动到处理区域 scrollToComparisonUI(); // 显示原始图片 const originalImage = document.getElementById('originalImage'); const originalImageContainer = document.getElementById('originalImageContainer'); const processedImageContainer = document.getElementById('processedImageContainer'); const processingLoader = document.getElementById('processingLoader'); // 设置原始图片 const imageUrl = URL.createObjectURL(file); originalImage.src = imageUrl; // 显示原始图片，隐藏处理后图片，显示加载状态 originalImageContainer.classList.remove('hidden'); processedImageContainer.classList.add('hidden'); processingLoader.classList.remove('hidden'); // 淡入效果 setTimeout(() => { processingLoader.classList.remove('opacity-0'); processingLoader.classList.add('opacity-100'); }, 10); // 启动进度动画 startProgressAnimation(); // 转换为base64 const base64 = await fileToBase64(file); // 提交任务 const formData = new FormData(); formData.append('image_url', base64); formData.append('prompt', PROMPT); formData.append('user_email', ''); const response = await fetch(API_ENDPOINT, { method: 'POST', body: formData }); const result = await response.json(); if (result.error) { throw new Error(result.error); } if (result.task_id) { currentTaskId = result.task_id; console.log('Tarea enviada, task_id:', currentTaskId); startPolling(); } else { throw new Error('No se obtuvo el ID de la tarea'); } } catch (error) { console.error('Procesamiento fallido:', error); window.showErrorModal(`Procesamiento fallido: ${error.message}`); // 隐藏加载状态 const processingLoader = document.getElementById('processingLoader'); processingLoader.classList.add('hidden'); } } // 开始轮询任务状态 function startPolling() { pollInterval = setInterval(async () => { try { const formData = new FormData(); formData.append('task_id', currentTaskId); const response = await fetch(API_ENDPOINT, { method: 'POST', body: formData }); const result = await response.json(); if (result.task_status === 'SUCCEEDED') { clearInterval(pollInterval); pollInterval = null; console.log('¡Procesamiento completado! URL de la imagen:', result.url); showProcessedImage(result.url, result.hd_url); } else if (result.task_status === 'FAILED' || result.task_status === 'UNKNOWN') { clearInterval(pollInterval); pollInterval = null; const errorMsg = result.error || result.error_details || 'Procesamiento fallido'; console.error('Procesamiento fallido:', errorMsg); window.showErrorModal(`Procesamiento fallido: ${errorMsg}`); hideProcessingLoader(); } else if (result.task_status === 'RUNNING') { console.log('Procesando...'); } else { console.log('Estado de la tarea:', result.task_status); } } catch (error) { console.error('Error al consultar el estado:', error); clearInterval(pollInterval); pollInterval = null; alert(`Error al consultar el estado: ${error.message}`); hideProcessingLoader(); } }, 2000); // 每2秒查询一次 } // 显示处理后的图片 function showProcessedImage(imageUrl, hdImageUrl = null) { const processedImage = document.getElementById('processedImage'); const processedImageContainer = document.getElementById('processedImageContainer'); const processingLoader = document.getElementById('processingLoader'); const processedTab = document.getElementById('processedTab'); const title = document.getElementById('processingTitle'); const subtitle = document.getElementById('processingSubtitle'); // 保存图片URL供下载使用 processedImageUrl = imageUrl; if (hdImageUrl) { processedHDImageUrl = hdImageUrl; } else { processedHDImageUrl = imageUrl; // 如果没有HD版本，使用普通版本 } // 完成进度到100% completeProgress(); title.textContent = 'Complete!'; subtitle.textContent = 'Your image is ready!'; // 延迟一下让用户看到完成状态 setTimeout(() => { // 设置处理后的图片 processedImage.src = imageUrl; // 淡出效果 processingLoader.classList.remove('opacity-100'); processingLoader.classList.add('opacity-0'); // 完全隐藏 setTimeout(() => { processingLoader.classList.add('hidden'); }, 500); // 自动切换到处理后的标签 processedTab.click(); }, 1000); } // 隐藏加载状态 function hideProcessingLoader() { // 停止进度动画 if (progressAnimation) { clearInterval(progressAnimation); progressAnimation = null; } const processingLoader = document.getElementById('processingLoader'); // 淡出效果 processingLoader.classList.remove('opacity-100'); processingLoader.classList.add('opacity-0'); // 完全隐藏 setTimeout(() => { processingLoader.classList.add('hidden'); }, 500); } // 全局进度控制变量 let progressAnimation = null; let currentProgress = 0; // 启动进度动画 function startProgressAnimation() { currentProgress = 0; const progressBar = document.getElementById('progressBar'); progressAnimation = setInterval(() => { // 慢慢增长到80% if (currentProgress < 80) { currentProgress += Math.random() * 2 + 0.5; // 随机增加0.5-2.5% if (currentProgress > 80) currentProgress = 80; progressBar.style.width = currentProgress + '%'; } // 到80%后就停在那里等待接口响应 }, 300); // 每300ms更新一次，让进度增长更慢更自然 } // 完成进度到100% function completeProgress() { if (progressAnimation) { clearInterval(progressAnimation); progressAnimation = null; } const progressBar = document.getElementById('progressBar'); progressBar.style.width = '100%'; currentProgress = 100; } // 下载图片功能 function downloadImage(isHD = false) { try { // 如果是HD图片且全局登录检查函数存在，则先检查登录状态 if (isHD && window.checkLoginStatus && !window.checkLoginStatus()) { return; // 未登录，显示登录弹窗后终止下载 } // 根据按钮选择下载普通版或HD版 const imageUrl = isHD ? processedHDImageUrl : processedImageUrl; const filename = isHD ? 'imagen-hd.png' : 'imagen-preview.png'; if (!imageUrl) { alert('No hay imagen procesada disponible para descargar'); return; } // 构建完整URL（如果是相对路径） let fullUrl = imageUrl; if (imageUrl.startsWith('/')) { fullUrl = window.location.origin + imageUrl; } // 创建下载链接 const link = document.createElement('a'); link.href = fullUrl; link.download = filename; link.target = '_blank'; // 在新标签页打开，确保下载 // 触发下载 document.body.appendChild(link); link.click(); document.body.removeChild(link); } catch (error) { console.error('Descarga fallida:', error); alert('Descarga fallida, por favor inténtalo de nuevo más tarde'); } } // Ctrl+V 粘贴处理 document.addEventListener('paste', function(e) { const items = e.clipboardData.items; for (let i = 0; i < items.length; i++) { if (items[i].type.indexOf('image') !== -1) { const file = items[i].getAsFile(); handleFileUpload(file); break; } } }); // 图片对比UI控制 document.addEventListener('DOMContentLoaded', function() { // 显示对比UI（仅用于演示效果） const comparisonUI = document.getElementById('comparisonUI'); const originalTab = document.getElementById('originalTab'); const processedTab = document.getElementById('processedTab'); const originalImageContainer = document.getElementById('originalImageContainer'); const processedImageContainer = document.getElementById('processedImageContainer'); const closeComparison = document.getElementById('closeComparison'); // 显示对比UI的函数 (仅用于演示 - 实际使用时通过文件上传触发) function showComparisonUI() { comparisonUI.classList.remove('hidden'); // 设置示例图片用于展示效果 document.getElementById('originalImage').src = 'assets/images/examples/human2_thumb.jpg'; document.getElementById('processedImage').src = 'assets/images/examples/human2_thumb.jpg'; } // 标签切换功能 originalTab.addEventListener('click', function() { originalTab.classList.add('bg-[#f4f4f4]', 'text-gray-800'); originalTab.classList.remove('text-gray-600', 'hover:text-gray-800', 'hover:bg-gray-100'); processedTab.classList.remove('bg-[#f4f4f4]', 'text-gray-800'); processedTab.classList.add('text-gray-600', 'hover:text-gray-800', 'hover:bg-gray-100'); originalImageContainer.classList.remove('hidden'); processedImageContainer.classList.add('hidden'); }); processedTab.addEventListener('click', function() { processedTab.classList.add('bg-[#f4f4f4]', 'text-gray-800'); processedTab.classList.remove('text-gray-600', 'hover:text-gray-800', 'hover:bg-gray-100'); originalTab.classList.remove('bg-[#f4f4f4]', 'text-gray-800'); originalTab.classList.add('text-gray-600', 'hover:text-gray-800', 'hover:bg-gray-100'); originalImageContainer.classList.add('hidden'); processedImageContainer.classList.remove('hidden'); }); // 关闭按钮功能 closeComparison.addEventListener('click', function() { comparisonUI.classList.add('hidden'); }); // 下载按钮功能 const downloadButton = document.getElementById('downloadButton'); const downloadHDButton = document.getElementById('downloadHDButton'); downloadButton.addEventListener('click', function() { downloadImage(false); // 下载普通质量图片 }); downloadHDButton.addEventListener('click', function() { downloadImage(true); // 下载HD质量图片 }); // 注释掉自动演示，现在通过真实上传触发 // setTimeout(showComparisonUI, 2000); }); // 滚动到图片处理区域 function scrollToComparisonUI() { const comparisonUI = document.getElementById('comparisonUI'); // 使用平滑滚动效果 comparisonUI.scrollIntoView({ behavior: 'smooth', block: 'center' }); }

Convertir Foto en Acuarela

Transforma tus fotos en impresionantes obras de arte en acuarela con el poder de la IA.

¿No tienes una foto? Prueba una de nuestras muestras:

Procesando...