| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ImageMatch | Visual Search</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 500: '#3b82f6', |
| }, |
| secondary: { |
| 500: '#6366f1', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <style> |
| .dropzone { |
| transition: all 0.3s ease; |
| } |
| .dropzone-active { |
| border-color: #3b82f6; |
| background-color: rgba(59, 130, 246, 0.05); |
| } |
| .result-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); |
| gap: 1.5rem; |
| } |
| @media (max-width: 640px) { |
| .result-grid { |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); |
| } |
| } |
| .image-card { |
| transition: transform 0.2s ease, box-shadow 0.2s ease; |
| } |
| .image-card:hover { |
| transform: translateY(-4px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> |
| <div class="container mx-auto px-4 py-8"> |
| <header class="mb-12 text-center"> |
| <h1 class="text-4xl font-bold mb-2 bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">ImageMatch</h1> |
| <p class="text-gray-400 max-w-2xl mx-auto">Upload an image to find visually similar matches from our collection</p> |
| </header> |
|
|
| <main class="max-w-4xl mx-auto"> |
| <div class="mb-10"> |
| <div |
| id="dropzone" |
| class="dropzone border-2 border-dashed border-gray-700 rounded-xl p-8 text-center cursor-pointer hover:border-gray-600 transition-colors" |
| > |
| <div class="flex flex-col items-center justify-center"> |
| <i data-feather="upload" class="w-12 h-12 text-primary-500 mb-4"></i> |
| <h2 class="text-xl font-semibold mb-2">Drag & drop your image here</h2> |
| <p class="text-gray-400 mb-4">or click to browse files</p> |
| <input type="file" id="fileInput" class="hidden" accept="image/*"> |
| <button id="browseBtn" class="px-4 py-2 bg-primary-500 hover:bg-primary-600 rounded-md transition-colors"> |
| Select Image |
| </button> |
| </div> |
| </div> |
| <div id="previewContainer" class="mt-4 flex justify-center hidden"> |
| <div class="relative inline-block"> |
| <img id="previewImage" src="" alt="Preview" class="max-h-48 rounded-md shadow-lg"> |
| <button id="removeImageBtn" class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600 transition-colors"> |
| <i data-feather="x" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-gray-800 rounded-xl p-6 mb-10"> |
| <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6"> |
| <h3 class="text-xl font-semibold">Search Settings</h3> |
| <div class="flex items-center space-x-4"> |
| <div> |
| <label for="resultCount" class="block text-sm font-medium text-gray-300 mb-1">Number of Results</label> |
| <div class="flex items-center space-x-2"> |
| <input |
| type="range" |
| id="resultCount" |
| min="3" |
| max="10" |
| value="5" |
| class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" |
| > |
| <span id="countValue" class="w-8 text-center">5</span> |
| </div> |
| </div> |
| <button |
| id="searchBtn" |
| class="px-4 py-2 bg-secondary-500 hover:bg-secondary-600 rounded-md transition-colors flex items-center space-x-2" |
| disabled |
| > |
| <i data-feather="search" class="w-4 h-4"></i> |
| <span>Find Matches</span> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="flex items-center space-x-2 mb-4"> |
| <i data-feather="info" class="w-4 h-4 text-blue-400"></i> |
| <p class="text-sm text-gray-400">For best results, use clear, high-quality images without excessive text.</p> |
| </div> |
| </div> |
|
|
| <div id="resultsSection" class="hidden"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-semibold">Similar Images</h3> |
| <div class="flex items-center space-x-2"> |
| <span class="text-sm text-gray-400">Sort by:</span> |
| <select class="bg-gray-800 border border-gray-700 text-gray-300 rounded-md px-3 py-1 text-sm"> |
| <option>Most Similar</option> |
| <option>Color</option> |
| <option>Size</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="bg-gray-800 rounded-xl p-6"> |
| <div id="loadingIndicator" class="hidden flex justify-center items-center py-12"> |
| <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary-500"></div> |
| </div> |
|
|
| <div id="resultsContainer" class="result-grid"> |
| |
| </div> |
|
|
| <div id="noResults" class="hidden text-center py-12"> |
| <i data-feather="frown" class="w-12 h-12 mx-auto text-gray-500 mb-4"></i> |
| <h4 class="text-xl font-medium text-gray-400 mb-2">No matches found</h4> |
| <p class="text-gray-500">Try uploading a different image or adjusting your search parameters.</p> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <footer class="mt-20 text-center text-gray-500 text-sm"> |
| <p>© 2023 ImageMatch. All rights reserved.</p> |
| </footer> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| const dropzone = document.getElementById('dropzone'); |
| const fileInput = document.getElementById('fileInput'); |
| const browseBtn = document.getElementById('browseBtn'); |
| const previewContainer = document.getElementById('previewContainer'); |
| const previewImage = document.getElementById('previewImage'); |
| const removeImageBtn = document.getElementById('removeImageBtn'); |
| const searchBtn = document.getElementById('searchBtn'); |
| const resultCount = document.getElementById('resultCount'); |
| const countValue = document.getElementById('countValue'); |
| const resultsSection = document.getElementById('resultsSection'); |
| const loadingIndicator = document.getElementById('loadingIndicator'); |
| const resultsContainer = document.getElementById('resultsContainer'); |
| const noResults = document.getElementById('noResults'); |
| |
| |
| resultCount.addEventListener('input', () => { |
| countValue.textContent = resultCount.value; |
| }); |
| |
| |
| browseBtn.addEventListener('click', () => { |
| fileInput.click(); |
| }); |
| |
| |
| fileInput.addEventListener('change', (e) => { |
| handleFileSelection(e.target.files[0]); |
| }); |
| |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| dropzone.addEventListener(eventName, preventDefaults, false); |
| }); |
| |
| function preventDefaults(e) { |
| e.preventDefault(); |
| e.stopPropagation(); |
| } |
| |
| ['dragenter', 'dragover'].forEach(eventName => { |
| dropzone.addEventListener(eventName, highlight, false); |
| }); |
| |
| ['dragleave', 'drop'].forEach(eventName => { |
| dropzone.addEventListener(eventName, unhighlight, false); |
| }); |
| |
| function highlight() { |
| dropzone.classList.add('dropzone-active'); |
| } |
| |
| function unhighlight() { |
| dropzone.classList.remove('dropzone-active'); |
| } |
| |
| dropzone.addEventListener('drop', (e) => { |
| const dt = e.dataTransfer; |
| const file = dt.files[0]; |
| handleFileSelection(file); |
| }); |
| |
| |
| function handleFileSelection(file) { |
| if (!file.type.match('image.*')) { |
| alert('Please select an image file'); |
| return; |
| } |
| |
| const reader = new FileReader(); |
| |
| reader.onload = (e) => { |
| previewImage.src = e.target.result; |
| previewContainer.classList.remove('hidden'); |
| searchBtn.disabled = false; |
| }; |
| |
| reader.readAsDataURL(file); |
| } |
| |
| |
| removeImageBtn.addEventListener('click', (e) => { |
| e.stopPropagation(); |
| previewImage.src = ''; |
| previewContainer.classList.add('hidden'); |
| fileInput.value = ''; |
| searchBtn.disabled = true; |
| resultsSection.classList.add('hidden'); |
| }); |
| |
| |
| searchBtn.addEventListener('click', () => { |
| |
| resultsSection.classList.remove('hidden'); |
| loadingIndicator.classList.remove('hidden'); |
| resultsContainer.innerHTML = ''; |
| noResults.classList.add('hidden'); |
| |
| |
| setTimeout(() => { |
| loadingIndicator.classList.add('hidden'); |
| |
| |
| const mockResults = Array(parseInt(resultCount.value)).fill().map((_, i) => ({ |
| id: i, |
| similarity: (90 - (i * 5)) + '%', |
| url: `http://static.photos/technology/320x240/${100 + i}` |
| })); |
| |
| if (mockResults.length > 0) { |
| resultsContainer.innerHTML = mockResults.map(result => ` |
| <div class="image-card bg-gray-700 rounded-lg overflow-hidden group"> |
| <div class="relative pt-[100%]"> |
| <img src="${result.url}" alt="Result ${result.id}" class="absolute top-0 left-0 w-full h-full object-cover"> |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3 opacity-0 group-hover:opacity-100 transition-opacity"> |
| <div class="flex justify-between items-end"> |
| <span class="text-sm font-medium">Similarity: ${result.similarity}</span> |
| <button class="text-white hover:text-primary-500 transition-colors"> |
| <i data-feather="download" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| `).join(''); |
| |
| feather.replace(); |
| } else { |
| noResults.classList.remove('hidden'); |
| } |
| }, 1500); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
