Spaces:

thejagstudio
/

SneakerAI

Sleeping

File size: 16,005 Bytes

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI Sneaker Category Predictor</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script>
		tailwind.config = {
			theme: {
				extend: {
					colors: {
						'neo-black': '#0F1116',
						'neo-blue': '#2E3BFF'
					}
				}
			}
		}
	</script>
	<style>
		.glass-effect {
			background: rgba(255, 255, 255, 0.05);
			backdrop-filter: blur(10px);
			border: 1px solid rgba(255, 255, 255, 0.1);
			transition: all 0.3s ease;
		}

		.glass-effect:hover {
			background: rgba(255, 255, 255, 0.08);
		}

		.gradient-border {
			position: relative;
			border: double 1px transparent;
			border-radius: 0.5rem;
			background-image: linear-gradient(#0F1116, #0F1116),
				linear-gradient(to right, #2E3BFF, #7C3AED);
			background-origin: border-box;
			background-clip: padding-box, border-box;
			transition: all 0.3s ease;
		}

		.gradient-border:hover {
			background-image: linear-gradient(#0F1116, #0F1116),
				linear-gradient(to right, #3E4BFF, #8C4AFD);
		}

		.custom-select {
			position: relative;
			display: inline-block;
			width: 100%;
		}

		.custom-select select {
			display: none;
		}

		.select-selected {
			background-color: rgba(255, 255, 255, 0.05);
			padding: 0.5rem 1rem;
			border-radius: 0.5rem;
			cursor: pointer;
		}

		.select-items {
			position: absolute;
			padding: 3px;
			top: 100%;
			left: 0;
			right: 0;
			z-index: 99;
			background: rgb(0, 0, 0);
			backdrop-filter: blur(10px);
			border-radius: 0.5rem;
			margin-top: 0.5rem;
			max-height: 200px;
			overflow-y: auto;
			display: none;
		}

		.select-items div {
			padding: 0.5rem 1rem;
			cursor: pointer;
			transition: all 0.2s;
		}

		.select-items div:hover {
			background: #534dad96;
			border-radius: 0.5rem;
		}

		.drop-zone {
			border: 2px dashed rgba(46, 59, 255, 0.3);
			border-radius: 1rem;
			padding: 1rem;
			text-align: center;
			transition: all 0.3s ease;
		}

		.drop-zone.drag-over {
			border-color: #2E3BFF;
			background: rgba(46, 59, 255, 0.1);
		}

		.pulse {
			animation: pulse 2s infinite;
		}

		@keyframes pulse {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.05);
			}

			100% {
				transform: scale(1);
			}
		}

		/* Custom scrollbar */
		.select-items::-webkit-scrollbar {
			width: 6px;
		}

		.select-items::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 3px;
		}

		.select-items::-webkit-scrollbar-thumb {
			background: rgba(46, 59, 255, 0.5);
			border-radius: 3px;
		}

		.select-search {
			padding: 0.5rem;
			width: 100%;
			background: rgba(255, 255, 255, 0.05);
			border: 1px solid rgba(255, 255, 255, 0.1);
			border-radius: 0.25rem;
			color: white;
			margin-bottom: 0.5rem;
		}

		.select-search:focus {
			outline: none;
			border-color: rgba(46, 59, 255, 0.5);
		}

		.select-option-hidden {
			display: none;
		}
	</style>
</head>

<body class="bg-neo-black text-gray-100 min-h-screen">
	<div class="fixed w-full h-full">
		<div class="absolute top-0 left-0 w-96 h-96 bg-blue-500 rounded-full filter blur-[128px] opacity-20"></div>
		<div class="absolute bottom-0 right-0 w-96 h-96 bg-purple-500 rounded-full filter blur-[128px] opacity-20"></div>
	</div>

	<div class="container mx-auto px-4 py-8 w-full relative">
		<h1
			class="text-5xl font-bold text-center mb-12 bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-500">
			AI Sneaker Predictor
		</h1>

		<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
			<div class="flex flex-col items-center justify-center w-full col-span-1 md:col-span-2">
				<div class="glass-effect p-8 rounded-xl space-y-6  w-full h-fit">
					<div class="flex items-start justify-center gap-5 w-full">
						<div id="dropZone" class="drop-zone h-full aspect-square w-full flex items-center justify-center">
							<div id="imagePreview" class="hidden w-full h-full">
								<img id="preview" class="w-full h-full rounded-lg shadow-lg border border-blue-500/20 bg-gradient-to-tr from-blue-500/15 to-purple-500/15" alt="Preview">
							</div>
							<div id="dropText" class="text-blue-300">
								<svg class="w-12 h-12 mx-auto mb-4 text-blue-500" fill="none" stroke="currentColor"
									viewBox="0 0 24 24">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
										d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
								</svg>
								<p class="text-lg">Drag and drop your sneaker image here</p>
								<p class="text-sm text-blue-400 mt-2">or click to browse</p>
								<input type="file" id="imageUpload" class="hidden" accept="image/*">
							</div>
						</div>
	
						<div class="space-y-6 w-full">
							<div class="custom-select">
								<label class="block text-sm font-medium text-blue-300 mb-2">Brand</label>
								<select id="brand" required>
									{% for brand in metadata.brand %}
									<option value="{{brand}}">{{brand}}</option>
									{% endfor %}
								</select>
							</div>
	
							<div class="custom-select">
								<label class="block text-sm font-medium text-blue-300 mb-2">Color</label>
								<select id="color" required>
									{% for color in metadata.color %}
									<option value="{{color}}">{{color}}</option>
									{% endfor %}
								</select>
							</div>
	
							<div class="custom-select">
								<label class="block text-sm font-medium text-blue-300 mb-2">Gender</label>
								<select id="gender" required>
									{% for gender in metadata.gender %}
									<option value="{{gender}}">{{gender}}</option>
									{% endfor %}
								</select>
							</div>
	
							<div class="custom-select">
								<label class="block text-sm font-medium text-blue-300 mb-2">Midsole</label>
								<select id="midsole" required>
									{% for midsole in metadata.midsole %}
									<option value="{{midsole}}">{% if midsole == "" %}Null{%else%}{{midsole}}{%endif%}</option>
									{% endfor %}
								</select>
							</div>
	
							<div class="custom-select">
								<label class="block text-sm font-medium text-blue-300 mb-2">Upper Material</label>
								<select id="upperMaterial" required>
									{% for upperMaterial in metadata.upperMaterial %}
									<option value="{{upperMaterial}}">{% if upperMaterial == "" %}Null{%else%}{{upperMaterial}}{%endif%}</option>
									{% endfor %}
								</select>
							</div>
						</div>
					</div>
					<button
						class="w-full py-4 px-6 rounded-lg font-medium transition-all duration-300 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-neo-black transform hover:scale-105"
						onclick="predict()">
						<div class="flex items-center justify-center space-x-3">
							<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
									d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
							</svg>
							<span class="text-lg">Predict Category</span>
						</div>
					</button>
				</div>
				<div class="mt-8">
					<h3 class="text-xl font-semibold mb-4 text-blue-300">Example Sneakers</h3>
					<div class="grid grid-cols-3 gap-4">
						{% for product in products %}
						<div class="glass-effect p-4 rounded-xl cursor-pointer hover:scale-105 transition-transform" onclick="loadExample('{{loop.index0}}')">
							<img src="{{product.img}}" alt="{{product.name}}" class="w-full rounded-lg mb-2">
							<p class="text-sm text-blue-300">{{product.name}} ({{product.category}})</p>
						</div>
						{% endfor %}
					</div>
				</div>
			</div>

			<div>
				<div id="result" class="hidden glass-effect p-6 rounded-xl">
					<h3 class="text-xl font-semibold mb-4 text-blue-300">AI Prediction</h3>
						<div id="predictions" class="space-y-4">
							<!-- Predictions will be inserted here -->
						</div>
				</div>
			</div>
		</div>
	</div>

	<script>
		function initCustomSelects() {
			document.querySelectorAll('.custom-select select').forEach(select => {
				const div = document.createElement('div');
				div.classList.add('select-selected', 'gradient-border');
				div.textContent = select.options[select.selectedIndex].text;
				select.parentElement.appendChild(div);

				const itemsDiv = document.createElement('div');
				itemsDiv.classList.add('select-items');

				// Add search input
				const searchInput = document.createElement('input');
				searchInput.type = 'text';
				searchInput.placeholder = 'Search...';
				searchInput.classList.add('select-search');
				itemsDiv.appendChild(searchInput);

				const optionsContainer = document.createElement('div');
				Array.from(select.options).forEach(option => {
					const optionDiv = document.createElement('div');
					optionDiv.textContent = option.text;
					optionDiv.addEventListener('click', () => {
						select.value = option.value;
						div.textContent = option.text;
						itemsDiv.style.display = 'none';
					});
					optionsContainer.appendChild(optionDiv);
				});
				itemsDiv.appendChild(optionsContainer);

				// Add search functionality
				searchInput.addEventListener('input', (e) => {
					const searchText = e.target.value.toLowerCase();
					Array.from(optionsContainer.children).forEach(optionDiv => {
						const text = optionDiv.textContent.toLowerCase();
						optionDiv.classList.toggle('select-option-hidden', !text.includes(searchText));
					});
				});

				// Prevent dropdown from closing when clicking search
				searchInput.addEventListener('click', (e) => {
					e.stopPropagation();
				});

				select.parentElement.appendChild(itemsDiv);

				div.addEventListener('click', (e) => {
					e.stopPropagation();
					closeAllSelect(itemsDiv);
					itemsDiv.style.display = itemsDiv.style.display === 'block' ? 'none' : 'block';
					if (itemsDiv.style.display === 'block') {
						searchInput.focus();
						searchInput.value = '';
						// Show all options when opening dropdown
						Array.from(optionsContainer.children).forEach(optionDiv => {
							optionDiv.classList.remove('select-option-hidden');
						});
					}
				});
			});

			document.addEventListener('click', () => closeAllSelect(null));
		}

		function closeAllSelect(elmnt) {
			document.querySelectorAll('.select-items').forEach(item => {
				if (item !== elmnt) item.style.display = 'none';
			});
		}

		const dropZone = document.getElementById('dropZone');
		const imageUpload = document.getElementById('imageUpload');

		['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, () => dropZone.classList.add('drag-over'));
		});

		['dragleave', 'drop'].forEach(eventName => {
			dropZone.addEventListener(eventName, () => dropZone.classList.remove('drag-over'));
		});

		dropZone.addEventListener('drop', handleDrop);
		dropZone.addEventListener('click', () => imageUpload.click());

		function handleDrop(e) {
			const dt = e.dataTransfer;
			const file = dt.files[0];
			
			// Create a new DataTransfer object and add the file
			const dataTransfer = new DataTransfer();
			dataTransfer.items.add(file);
			
			// Set the files property of the input element
			document.getElementById('imageUpload').files = dataTransfer.files;
			
			handleFile(file);
		}

		document.getElementById('imageUpload').addEventListener('change', function (e) {
			const file = e.target.files[0];
			if (file) handleFile(file);
		});

		function handleFile(file) {
			if (file) {
				const reader = new FileReader();
				reader.onload = function (e) {
					document.getElementById('preview').src = e.target.result;
					document.getElementById('imagePreview').classList.remove('hidden');
					document.getElementById('dropText').classList.add('hidden');
				}
				reader.readAsDataURL(file);
			}
		}

		document.addEventListener('DOMContentLoaded', () => {
			initCustomSelects();
			
			// Add examples data
			window.examples = `{{ productsString | safe }}`;
			window.examples = JSON.parse(window.examples);
		});

		async function loadExample(index) {
			index = parseInt(index);
			const example = window.examples[index];
			
			// Set form values
			document.getElementById('brand').value = example.brand;
			document.getElementById('color').value = example.color;
			document.getElementById('gender').value = example.gender;
			document.getElementById('midsole').value = example.midsole;
			document.getElementById('upperMaterial').value = example.upperMaterial;

			// Update custom select displays
			document.querySelectorAll('.select-selected').forEach(div => {
				const select = div.previousElementSibling;
				div.textContent = select.options[select.selectedIndex].text;
			});

			// Load and display image
			const response = await fetch(example.img);
			const blob = await response.blob();
			const file = new File([blob], 'example.png', { type: 'image/png' });
			
			// Trigger file handler
			handleFile(file);
			
			// Update the hidden file input
			const dataTransfer = new DataTransfer();
			dataTransfer.items.add(file);
			document.getElementById('imageUpload').files = dataTransfer.files;
		}

		async function predict() {
			const imageFile = document.getElementById('imageUpload').files[0];
			if (!imageFile) {
				alert('Please select an image');
				return;
			}

			const reader = new FileReader();
			reader.onload = async function (e) {
				const base64Image = e.target.result.split(',')[1];

				const data = {
					image: base64Image,
					brand: document.getElementById('brand').value,
					color: document.getElementById('color').value,
					gender: document.getElementById('gender').value,
					midsole: document.getElementById('midsole').value,
					upperMaterial: document.getElementById('upperMaterial').value
				};

				try {
					const response = await fetch('/predict', {
						method: 'POST',
						headers: {
							'Content-Type': 'application/json'
						},
						body: JSON.stringify(data)
					});

					const result = await response.json();
					if (result.error) {
						alert('Error: ' + result.error);
					} else {
						document.getElementById('result').classList.remove('hidden');
						const predictionsContainer = document.getElementById('predictions');
						predictionsContainer.innerHTML = '';

						// Sort categories by confidence
						const predictions = result.categories.map((category, index) => ({
							category,
							confidence: result.confidence[index]
						})).sort((a, b) => b.confidence - a.confidence);

						predictions.forEach(({ category, confidence }) => {
							const confidencePercent = (confidence * 100).toFixed(2);
							const predictionHtml = `
								<div class="gradient-border p-4">
									<div class="flex items-center justify-between">
										<p>Category: <span class="font-semibold text-blue-400">${category}</span></p>
										<p>Confidence: <span class="font-semibold text-blue-400">${confidencePercent}</span>%</p>
									</div>
									<div class="w-full bg-gray-700/30 rounded-full h-4 mt-2">
										<div class="bg-gradient-to-r from-blue-500 to-purple-500 h-4 rounded-full transition-all duration-500"
											 style="width: ${confidencePercent}%"></div>
									</div>
									
								</div>`;
							predictionsContainer.innerHTML += predictionHtml;
						});
					}
				} catch (error) {
					alert('Error: ' + error.message);
				}
			};
			reader.readAsDataURL(imageFile);
		}
	</script>
</body>

</html>