99 lines
3.6 KiB
JavaScript
99 lines
3.6 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const photoInput = document.getElementById('photo-input');
|
|
const uploadForm = document.getElementById('upload-form');
|
|
const imagePreview = document.getElementById('image-preview');
|
|
const previewContainer = document.getElementById('preview-container');
|
|
const uploadZone = document.querySelector('.upload-zone');
|
|
const processBtn = document.getElementById('process-btn');
|
|
const styleItems = document.querySelectorAll('.style-item');
|
|
const overlay = document.getElementById('processing-overlay');
|
|
const statusDetail = document.getElementById('status-detail');
|
|
|
|
let selectedStyle = 'penthouse-1';
|
|
let uploadedFile = null;
|
|
|
|
// Handle File Preview
|
|
photoInput.addEventListener('change', (e) => {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
uploadedFile = file;
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
imagePreview.src = e.target.result;
|
|
previewContainer.classList.remove('d-none');
|
|
uploadZone.classList.add('d-none');
|
|
processBtn.classList.remove('d-none');
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
|
|
// Style Selection
|
|
styleItems.forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
styleItems.forEach(i => i.classList.remove('active'));
|
|
item.classList.add('active');
|
|
selectedStyle = item.getAttribute('data-style');
|
|
});
|
|
});
|
|
|
|
// Reset Upload
|
|
window.resetUpload = () => {
|
|
photoInput.value = '';
|
|
uploadedFile = null;
|
|
previewContainer.classList.add('d-none');
|
|
uploadZone.classList.remove('d-none');
|
|
processBtn.classList.add('d-none');
|
|
};
|
|
|
|
// Process Logic
|
|
processBtn.addEventListener('click', async () => {
|
|
if (!uploadedFile) return;
|
|
|
|
overlay.style.display = 'flex';
|
|
|
|
// Mocking AI Steps
|
|
const steps = [
|
|
"Detecting portrait contours...",
|
|
"Isolating subject from background...",
|
|
"Matching color temperature to luxury night...",
|
|
"Applying soft cinematic depth of field...",
|
|
"Finalizing luxury textures..."
|
|
];
|
|
|
|
for (let i = 0; i < steps.length; i++) {
|
|
statusDetail.textContent = steps[i];
|
|
await new Promise(r => setTimeout(r, 1200));
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('photo', uploadedFile);
|
|
formData.append('style', selectedStyle);
|
|
|
|
try {
|
|
const response = await fetch('api/process.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
document.getElementById('upload-section').classList.add('d-none');
|
|
document.getElementById('result-section').classList.remove('d-none');
|
|
document.getElementById('original-res').src = data.original_url;
|
|
document.getElementById('processed-res').src = data.processed_url;
|
|
document.getElementById('download-btn').href = data.processed_url;
|
|
|
|
// Smooth scroll to results
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
} else {
|
|
alert("Processing failed: " + (data.error || "Unknown error"));
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert("Something went wrong with the AI engine.");
|
|
} finally {
|
|
overlay.style.display = 'none';
|
|
}
|
|
});
|
|
}); |