document.addEventListener('DOMContentLoaded', function() {
// Initialize Dropzone for clothing upload with drag and drop
const clothingDropzone = new Dropzone("#clothing-dropzone", {
url: "/upload",
maxFiles: 1,
acceptedFiles: "image/*",
autoProcessQueue: false,
addRemoveLinks: true,
dictDefaultMessage: "",
dictRemoveFile: "Remove",
clickable: true,
previewTemplate: `
`,
init: function() {
this.on("dragenter", function() {
this.element.classList.add('border-purple-500');
});
this.on("dragleave", function() {
this.element.classList.remove('border-purple-500');
});
this.on("drop", function() {
this.element.classList.remove('border-purple-500');
});
this.on("addedfile", function() {
this.element.classList.remove('border-purple-500');
});
}
});
// Initialize Dropzone for person upload with drag and drop
const personDropzone = new Dropzone("#person-dropzone", {
url: "/upload",
maxFiles: 1,
acceptedFiles: "image/*",
autoProcessQueue: false,
addRemoveLinks: true,
dictDefaultMessage: "",
dictRemoveFile: "Remove",
clickable: true,
previewTemplate: `
`,
init: function() {
this.on("dragenter", function() {
this.element.classList.add('border-purple-500');
});
this.on("dragleave", function() {
this.element.classList.remove('border-purple-500');
});
this.on("drop", function() {
this.element.classList.remove('border-purple-500');
});
this.on("addedfile", function() {
this.element.classList.remove('border-purple-500');
});
}
});
const generateBtn = document.getElementById('generate-btn');
const resultImage = document.getElementById('result-image');
const resultMessage = document.getElementById('result-message');
const downloadBtn = document.getElementById('download-btn');
const resultContainer = document.getElementById('result-container');
generateBtn.addEventListener('click', async function() {
if (clothingDropzone.files.length === 0 || personDropzone.files.length === 0) {
alert('Please upload both a clothing item and your photo first!');
return;
}
// Show loading state
generateBtn.disabled = true;
generateBtn.innerHTML = ' Processing...';
feather.replace();
try {
// In a real implementation, you would call the Google Nano Banana API here
// For demo purposes, we'll simulate the API call with a timeout
// Simulate API processing delay
await new Promise(resolve => setTimeout(resolve, 2000));
// Show a sample result (in a real app, this would come from the API)
resultMessage.classList.add('hidden');
resultImage.src = "http://static.photos/fashion/640x360/123";
resultImage.classList.remove('hidden');
downloadBtn.classList.remove('hidden');
} catch (error) {
console.error('Error:', error);
alert('An error occurred while generating your virtual try-on. Please try again.');
} finally {
// Reset button state
generateBtn.disabled = false;
generateBtn.innerHTML = ' Generate Virtual Try-On';
feather.replace();
}
});
downloadBtn.addEventListener('click', function() {
if (!resultImage.src) return;
// Create a temporary link to download the image
const link = document.createElement('a');
link.href = resultImage.src;
link.download = 'virtual-tryon-result.png';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
// Handle real API integration with Google Nano Banana
async function callVirtualTryOnAPI(clothingImage, personImage) {
// This is where you would implement the actual API call
// Using the Google Nano Banana API key: AIzaSyCj5gexXMLnc3OOVQ9DiX5CFhvnI1WxGJc
// Note: In a production environment, you should never expose API keys in frontend code
// Instead, set up a backend service to handle the API calls
// For demo purposes, we're returning a placeholder
return {
success: true,
resultImageUrl: "http://static.photos/fashion/640x360/123"
};
}
});