Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Virtual Try-On with Search</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom scrollbar for the try-on panel */ | |
| .tryon-panel::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .tryon-panel::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 4px; | |
| } | |
| .tryon-panel::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 4px; | |
| } | |
| .tryon-panel::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| /* Animation for generated result */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-out forwards; | |
| } | |
| /* Custom file input styling */ | |
| .file-input { | |
| opacity: 0; | |
| position: absolute; | |
| z-index: -1; | |
| } | |
| .file-label { | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .file-label:hover { | |
| background-color: #e2e8f0; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 h-screen overflow-hidden"> | |
| <div class="flex flex-col md:flex-row h-full"> | |
| <!-- Left Panel (60%) - Search and Results --> | |
| <div class="w-full md:w-3/5 h-3/5 md:h-full bg-white p-4 flex flex-col"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800 mb-2">Web Search</h1> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input | |
| type="text" | |
| id="searchInput" | |
| class="w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500" | |
| placeholder="Search with Google or type a URL" | |
| onkeypress="handleSearch(event)" | |
| > | |
| <button | |
| onclick="performSearch()" | |
| class="absolute right-2.5 bottom-2.5 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg text-sm px-4 py-2 transition-colors" | |
| > | |
| Google Search | |
| </button> | |
| </div> | |
| </div> | |
| <div id="searchResults" class="flex-1 border rounded-lg overflow-hidden"> | |
| <iframe | |
| id="resultFrame" | |
| src="about:blank" | |
| class="w-full h-full border-0" | |
| frameborder="0" | |
| sandbox="allow-same-origin allow-scripts allow-popups allow-forms" | |
| ></iframe> | |
| </div> | |
| </div> | |
| <!-- Right Panel (40%) - Virtual Try-On --> | |
| <div class="w-full md:w-2/5 h-2/5 md:h-full bg-gray-50 border-l border-gray-200 overflow-y-auto tryon-panel p-4"> | |
| <div class="sticky top-0 bg-gray-50 py-2 z-10"> | |
| <h1 class="text-2xl font-bold text-gray-800 mb-1">Virtual Try-On</h1> | |
| <p class="text-sm text-gray-600">Upload images to see how clothes look on you</p> | |
| </div> | |
| <!-- Person Upload --> | |
| <div class="bg-white rounded-lg shadow p-4 mb-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="font-semibold text-gray-700"> | |
| <i class="fas fa-user mr-2 text-blue-500"></i> | |
| Upload Person Image | |
| </h3> | |
| <button onclick="resetUpload('person')" class="text-red-500 hover:text-red-700 text-sm"> | |
| <i class="fas fa-times mr-1"></i>Clear | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex-1"> | |
| <input type="file" id="personUpload" class="file-input" accept="image/*" onchange="handlePersonUpload(event)"> | |
| <label for="personUpload" class="file-label flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100"> | |
| <div class="flex flex-col items-center justify-center pt-5 pb-6"> | |
| <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> | |
| <p class="text-sm text-gray-500">Click to upload</p> | |
| </div> | |
| </label> | |
| </div> | |
| <div id="personPreview" class="w-24 h-24 bg-gray-200 rounded-lg overflow-hidden hidden"> | |
| <img id="personPreviewImg" class="object-cover w-full h-full" src="" alt="Person preview"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upper Garment Upload --> | |
| <div class="bg-white rounded-lg shadow p-4 mb-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="font-semibold text-gray-700"> | |
| <i class="fas fa-tshirt mr-2 text-green-500"></i> | |
| Upload Upper Garment | |
| </h3> | |
| <button onclick="resetUpload('upper')" class="text-red-500 hover:text-red-700 text-sm"> | |
| <i class="fas fa-times mr-1"></i>Clear | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex-1"> | |
| <input type="file" id="upperUpload" class="file-input" accept="image/*" onchange="handleUpperUpload(event)"> | |
| <label for="upperUpload" class="file-label flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100"> | |
| <div class="flex flex-col items-center justify-center pt-5 pb-6"> | |
| <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> | |
| <p class="text-sm text-gray-500">Click to upload</p> | |
| </div> | |
| </label> | |
| </div> | |
| <div id="upperPreview" class="w-24 h-24 bg-gray-200 rounded-lg overflow-hidden hidden"> | |
| <img id="upperPreviewImg" class="object-cover w-full h-full" src="" alt="Upper garment preview"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lower Garment Upload --> | |
| <div class="bg-white rounded-lg shadow p-4 mb-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="font-semibold text-gray-700"> | |
| <i class="fas fa-socks mr-2 text-purple-500"></i> | |
| Upload Lower Garment | |
| </h3> | |
| <button onclick="resetUpload('lower')" class="text-red-500 hover:text-red-700 text-sm"> | |
| <i class="fas fa-times mr-1"></i>Clear | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex-1"> | |
| <input type="file" id="lowerUpload" class="file-input" accept="image/*" onchange="handleLowerUpload(event)"> | |
| <label for="lowerUpload" class="file-label flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100"> | |
| <div class="flex flex-col items-center justify-center pt-5 pb-6"> | |
| <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> | |
| <p class="text-sm text-gray-500">Click to upload</p> | |
| </div> | |
| </label> | |
| </div> | |
| <div id="lowerPreview" class="w-24 h-24 bg-gray-200 rounded-lg overflow-hidden hidden"> | |
| <img id="lowerPreviewImg" class="object-cover w-full h-full" src="" alt="Lower garment preview"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Generated Result --> | |
| <div class="bg-white rounded-lg shadow p-4 mb-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="font-semibold text-gray-700"> | |
| <i class="fas fa-magic mr-2 text-yellow-500"></i> | |
| Generated Result | |
| </h3> | |
| <button onclick="generateResult()" class="bg-blue-500 hover:bg-blue-600 text-white text-sm px-3 py-1 rounded transition-colors"> | |
| <i class="fas fa-sync-alt mr-1"></i>Generate | |
| </button> | |
| </div> | |
| <div id="resultContainer" class="flex items-center justify-center w-full h-64 bg-gray-100 rounded-lg overflow-hidden relative"> | |
| <div id="emptyResultMessage" class="text-center text-gray-500"> | |
| <i class="fas fa-images text-4xl mb-2"></i> | |
| <p>Upload images and click Generate to see the result</p> | |
| </div> | |
| <div id="resultPreview" class="hidden w-full h-full"> | |
| <img id="resultImage" class="object-contain w-full h-full fade-in" src="" alt="Virtual try-on result"> | |
| </div> | |
| <div id="loadingSpinner" class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> | |
| <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-white"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Search functionality | |
| function handleSearch(event) { | |
| if (event.key === 'Enter') { | |
| performSearch(); | |
| } | |
| } | |
| function performSearch() { | |
| const input = document.getElementById('searchInput').value.trim(); | |
| const resultFrame = document.getElementById('resultFrame'); | |
| if (input === '') return; | |
| // Check if input is a URL (starts with http://, https://, or www.) | |
| if (/^(https?:\/\/)|(www\.)/i.test(input)) { | |
| try { | |
| const url = new URL(input.startsWith('http') ? input : `https://${input}`); | |
| resultFrame.src = url.href; | |
| } catch (e) { | |
| // Fallback to Google search if URL is invalid | |
| resultFrame.src = `https://www.google.com/search?q=${encodeURIComponent(input)}`; | |
| } | |
| } else { | |
| // Perform Google search for everything else | |
| resultFrame.src = `https://www.google.com/search?q=${encodeURIComponent(input)}`; | |
| } | |
| } | |
| // Virtual Try-On functionality | |
| function handlePersonUpload(event) { | |
| const file = event.target.files[0]; | |
| if (file) { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| const preview = document.getElementById('personPreview'); | |
| const previewImg = document.getElementById('personPreviewImg'); | |
| previewImg.src = e.target.result; | |
| preview.classList.remove('hidden'); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| } | |
| function handleUpperUpload(event) { | |
| const file = event.target.files[0]; | |
| if (file) { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| const preview = document.getElementById('upperPreview'); | |
| const previewImg = document.getElementById('upperPreviewImg'); | |
| previewImg.src = e.target.result; | |
| preview.classList.remove('hidden'); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| } | |
| function handleLowerUpload(event) { | |
| const file = event.target.files[0]; | |
| if (file) { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| const preview = document.getElementById('lowerPreview'); | |
| const previewImg = document.getElementById('lowerPreviewImg'); | |
| previewImg.src = e.target.result; | |
| preview.classList.remove('hidden'); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| } | |
| function resetUpload(type) { | |
| if (type === 'person') { | |
| document.getElementById('personUpload').value = ''; | |
| document.getElementById('personPreview').classList.add('hidden'); | |
| } else if (type === 'upper') { | |
| document.getElementById('upperUpload').value = ''; | |
| document.getElementById('upperPreview').classList.add('hidden'); | |
| } else if (type === 'lower') { | |
| document.getElementById('lowerUpload').value = ''; | |
| document.getElementById('lowerPreview').classList.add('hidden'); | |
| } | |
| } | |
| function generateResult() { | |
| const personImg = document.getElementById('personPreviewImg').src; | |
| const upperImg = document.getElementById('upperPreviewImg').src; | |
| const lowerImg = document.getElementById('lowerPreviewImg').src; | |
| const emptyResult = document.getElementById('emptyResultMessage'); | |
| const resultPreview = document.getElementById('resultPreview'); | |
| const resultImage = document.getElementById('resultImage'); | |
| const loadingSpinner = document.getElementById('loadingSpinner'); | |
| // Check if at least person image is uploaded | |
| if (!personImg || personImg === '') { | |
| alert('Please upload at least a person image to generate the result'); | |
| return; | |
| } | |
| // Show loading spinner | |
| loadingSpinner.classList.remove('hidden'); | |
| emptyResult.classList.add('hidden'); | |
| resultPreview.classList.add('hidden'); | |
| // Simulate processing delay (in a real app, this would be an API call) | |
| setTimeout(() => { | |
| // For demo purposes, we'll just combine the images in a simple way | |
| // In a real app, you would use a proper virtual try-on API | |
| if (upperImg && upperImg !== '') { | |
| resultImage.src = upperImg; | |
| } else if (lowerImg && lowerImg !== '') { | |
| resultImage.src = lowerImg; | |
| } else { | |
| resultImage.src = personImg; | |
| } | |
| // Hide loading and show result | |
| loadingSpinner.classList.add('hidden'); | |
| resultPreview.classList.remove('hidden'); | |
| // Add fade-in animation | |
| resultImage.classList.add('fade-in'); | |
| setTimeout(() => { | |
| resultImage.classList.remove('fade-in'); | |
| }, 500); | |
| }, 1500); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://deepsite.hf.co/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=vimalvskl7/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |