Spaces:

Jarvis-11
/

virtual-fitting-room-magic

Running

plz add a feature of drag and drop tooo

a89434f verified about 1 year ago

5.83 kB

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"
        };
    }
});

	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"
	};
	}
	});