script.js

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: `
          <div class="dz-preview dz-file-preview p-2">
            <div class="dz-image">
              <img data-dz-thumbnail class="w-full h-auto rounded" />
            </div>
            <div class="dz-details">
              <div class="dz-filename"><span data-dz-name></span></div>
              <div class="dz-size" data-dz-size></div>
            </div>
            <a class="dz-remove" href="javascript:undefined;" data-dz-remove>Remove</a>
          </div>
        `,
        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: `
          <div class="dz-preview dz-file-preview p-2">
            <div class="dz-image">
              <img data-dz-thumbnail class="w-full h-auto rounded" />
            </div>
            <div class="dz-details">
              <div class="dz-filename"><span data-dz-name></span></div>
              <div class="dz-size" data-dz-size></div>
            </div>
            <a class="dz-remove" href="javascript:undefined;" data-dz-remove>Remove</a>
          </div>
        `,
        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 = '<i data-feather="loader" class="animate-spin mr-2"></i> 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 = '<i data-feather="magic" class="mr-2"></i> 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"
        };
    }
});