File size: 5,827 Bytes
c2ec23a a89434f c2ec23a d5af557 a89434f c2ec23a a89434f c2ec23a d5af557 a89434f c2ec23a d5af557 c2ec23a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 | 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"
};
}
}); |