Upload 4 files

main.py

@@ -0,0 +1,97 @@
+from flask import Flask, request, render_template, jsonify
+import cv2
+import numpy as np
+import tensorflow as tf
+import pandas as pd
+import base64
+import json
+
+# Initialize Flask app
+app = Flask(__name__)
+
+# Load model and data at startup
+model = tf.keras.models.load_model("sneaker_category_predictor_v2.h5")
+
+# Define expected columns for one-hot encoding
+with open("metadata.json", "r") as f:
+	METADATA_COLUMNS = json.load(f)
+
+
+def encode_metadata(data):
+    # Create DataFrame with single row
+    df = pd.DataFrame({k: [v.lower()] for k, v in data.items()})
+
+    # Initialize empty DataFrame with all possible columns
+    encoded = pd.DataFrame()
+
+    # Encode each feature maintaining consistent columns
+    for feature, possible_values in METADATA_COLUMNS.items():
+        feature_encoded = pd.get_dummies(df[feature], prefix=feature)
+        # Add missing columns with 0s
+        for value in possible_values:
+            col_name = f"{feature}_{value}"
+            if col_name not in feature_encoded.columns:
+                feature_encoded[col_name] = 0
+        encoded = pd.concat([encoded, feature_encoded], axis=1)
+
+    # Ensure consistent column order
+    all_columns = [
+        f"{feat}_{val}" for feat, vals in METADATA_COLUMNS.items() for val in vals
+    ]
+    encoded = encoded.reindex(columns=all_columns, fill_value=0)
+
+    return encoded.values.astype(np.float32)
+
+
+@app.route("/")
+def index():
+    global METADATA_COLUMNS
+    return render_template("index.html", metadata=METADATA_COLUMNS)
+
+
+@app.route("/predict", methods=["POST"])
+def predict():
+	try:
+		data = request.json
+
+		# Process image
+		img_data = base64.b64decode(data["image"])
+		img_array = np.frombuffer(img_data, np.uint8)
+		img = cv2.imdecode(img_array, cv2.IMREAD_COLOR)
+		img = cv2.resize(img, (224, 224))
+		img = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
+		img = img / 255.0
+		img = np.expand_dims(img, axis=0)
+
+		# Encode metadata with consistent columns
+		metadata = encode_metadata(
+			{
+				"brand": data["brand"],
+				"color": data["color"],
+				"gender": data["gender"],
+				"midsole": data["midsole"],
+				"upperMaterial": data["upperMaterial"],
+			}
+		)
+		# Make prediction
+		predictions = model.predict([img, metadata])
+		categories = [
+			"Lifestyle",
+			"Running",
+			"Other",
+			"Cleat",
+			"Sandal",
+			"Basketball",
+			"Boot",
+			"Skateboarding",
+		]
+		confidenceList = predictions[0].tolist()
+
+		return jsonify({"categories": categories, "confidence": confidenceList})
+
+	except Exception as e:
+		return jsonify({"error": str(e)}), 400
+
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860)

metadata.json

@@ -0,0 +1,436 @@
+{
+	"color": [
+		"Black",
+		"Blue",
+		"Brown",
+		"Copper",
+		"Cream",
+		"Gold",
+		"Green",
+		"Grey",
+		"Multi-Color",
+		"Orange",
+		"Pink",
+		"Purple",
+		"Red",
+		"Silver",
+		"Tan",
+		"Teal",
+		"White",
+		"Yellow"
+	],
+	"midsole": [
+		"",
+		"10CELL",
+		"A-Flashfoam",
+		"ABZORB",
+		"ACTEVA",
+		"Adaptive Lacing",
+		"Adiplus",
+		"Adiprene",
+		"Adiprene+",
+		"AeroCore",
+		"Air",
+		"Air Cushion",
+		"AmpliFoam",
+		"AmpliFoam+",
+		"Anima",
+		"Anima PBX",
+		"Astroride",
+		"BOOM",
+		"Bio IP Foam",
+		"BioMoGo",
+		"Blushield",
+		"Boost",
+		"Bounce",
+		"Bounce 2.0",
+		"C-CAP",
+		"CMEVA",
+		"CUSH+",
+		"CX Foam",
+		"Cell",
+		"Charged",
+		"Cloud",
+		"CloudTec",
+		"CloudTec Phase",
+		"Cloudfoam",
+		"Cloudfoam Comfort",
+		"ComfiRide",
+		"ComfyCush",
+		"Contact Cushion",
+		"Crater Foam",
+		"Crepe",
+		"Cushlon",
+		"Cushlon 3.0",
+		"Cushlon ST2",
+		"DA2 Plus",
+		"DD Anima",
+		"DMX",
+		"DMX Foam",
+		"DMX Microbubbles",
+		"DMX SHEAR",
+		"DMXRide",
+		"DNA FLASH",
+		"DNA FLASH v2",
+		"DNA GOLD",
+		"DNA LOFT",
+		"DNA LOFT v2",
+		"DNA LOFT v3",
+		"DNA Tuned",
+		"Digital Light Synthesis",
+		"Dreamstrike",
+		"Dreamstrike+",
+		"DynaSoft",
+		"ENCAP",
+		"ERS",
+		"EVA",
+		"Encap",
+		"Energized",
+		"Energy Foam",
+		"Energy Return System",
+		"EnergyCell",
+		"EnergyCell+",
+		"Enerzy",
+		"Enerzy Lite",
+		"Enerzy NXT",
+		"FF BLAST",
+		"Feet You Wear",
+		"Flightspeed",
+		"FloatPro",
+		"FloatPro Foam",
+		"Floatride",
+		"Floatride Energy",
+		"Floatride Foam",
+		"Floatride Fuel",
+		"Flow",
+		"Flyplate",
+		"FlyteFoam",
+		"FlyteFoam Blast",
+		"FlyteFoam Blast Max",
+		"FlyteFoam Blast+",
+		"FlyteFoam Blast+ Eco",
+		"FlyteFoam Propel",
+		"FlyteFoam Turbo",
+		"FlyteFoam Turbo+",
+		"Formula 23",
+		"Free",
+		"Fresh Foam",
+		"Fresh Foam X",
+		"FuelCell",
+		"FuelFoam",
+		"Fulcrum",
+		"Gel",
+		"Graphlite",
+		"GreenStride",
+		"Grid",
+		"HOVR",
+		"HOVR+",
+		"Helion",
+		"Helion HF",
+		"Hexalite",
+		"HoverSpring",
+		"Hyperlift",
+		"IMEVA",
+		"Ignite",
+		"J-Frame",
+		"LQDCell",
+		"Light Boost",
+		"Lightmotion",
+		"Lightstrike",
+		"Lightstrike 2.0",
+		"Lightstrike Pro",
+		"Lightweight Muscle",
+		"LiteRide",
+		"Lunarlon",
+		"Megaride",
+		"Micro G",
+		"Mizuno Wave",
+		"Monster CloudTec",
+		"NERGY",
+		"Nitro Elite",
+		"Nitro Foam",
+		"Nitrogen",
+		"PEBA",
+		"PROFLY-X",
+		"PUMALite",
+		"PWRRUN",
+		"PWRRUN HG",
+		"PWRRUN PB",
+		"Podulon",
+		"Popcush",
+		"Pro Flex",
+		"ProFly",
+		"ProFly+",
+		"ProFoam",
+		"ProFoam Lite",
+		"ProGrid",
+		"Profoam+",
+		"Progrid",
+		"PureGEL",
+		"QUIX",
+		"QUIX Rail",
+		"R-System",
+		"REPETITOR",
+		"REVlite",
+		"RMAT",
+		"React",
+		"ReactX",
+		"Renew",
+		"Repetitor",
+		"Repetitor+",
+		"Rider Foam",
+		"SCEVA",
+		"Shox",
+		"SoftFoam+",
+		"SoftierFoam",
+		"SoftierFoam+",
+		"Softride",
+		"Super Critical Foam",
+		"SuperFoam",
+		"Swirlfoam",
+		"TimberCush",
+		"TriZone",
+		"Trinomic",
+		"U4IC",
+		"UNILITE",
+		"UltraCush",
+		"VECTIV",
+		"VR3CUSH",
+		"Zoom Air",
+		"Zoom X",
+		"ZoomX",
+		"a3",
+		"fuzeGEL",
+		"infiniFOAM"
+	],
+	"upperMaterial": [
+		"",
+		"A-WEB",
+		"AtomKnit",
+		"Atomknit",
+		"Battleknit",
+		"Birkibuc",
+		"Birko-Flor",
+		"Calf",
+		"Canvas",
+		"Celermesh",
+		"Chenille",
+		"Clone",
+		"Confetti",
+		"Cordura",
+		"Corduroy",
+		"Cotton",
+		"Croslite",
+		"D-Skin",
+		"Denim",
+		"DynaFit",
+		"Dyneema",
+		"EVA",
+		"FantomFit",
+		"Faux Fur",
+		"Faux Shearling",
+		"Felt",
+		"Fiberskin",
+		"Fibertouch",
+		"FitWeave",
+		"Fleece",
+		"Flexion Fit",
+		"Flexweave",
+		"FlyTouch Lite",
+		"FlyTouch Plus",
+		"FlyTouch Pro",
+		"Flyknit",
+		"Flymesh",
+		"Flyweave",
+		"Foamposite",
+		"Fur",
+		"Fusionfeel",
+		"Fusionskin",
+		"GORE-TEX",
+		"Glitter",
+		"GripControl",
+		"GripControl Pro",
+		"Gripknit",
+		"Hair",
+		"Helcor",
+		"Hemp",
+		"HybridTouch",
+		"HybridTouch 2.0",
+		"Hybridfeel",
+		"HydroGuard",
+		"Hypoknit",
+		"IMEVA",
+		"IntelliKnit",
+		"Jacquard",
+		"K-BETTER",
+		"Knit",
+		"LIGHTLOCK",
+		"Leather",
+		"Leno Weave",
+		"Leno-Weave",
+		"LightSpray",
+		"Linen",
+		"Matryx",
+		"Mesh",
+		"Mono-Sock",
+		"Motion Wrap 2.0",
+		"NDure",
+		"NanoWeave",
+		"Neoprene",
+		"NikeSkin",
+		"Nubuck",
+		"Nylon",
+		"PVC",
+		"PWRTAPE",
+		"Patent Leather",
+		"Polyamide",
+		"Polyester",
+		"Polyurethane",
+		"Pony Hair",
+		"Primaloft",
+		"Primeknit",
+		"Primeknit+",
+		"Radial Knit",
+		"Raffia",
+		"ReactX",
+		"Ripstop",
+		"Rubber",
+		"Satin",
+		"SensiFit",
+		"Sequin",
+		"Shearling",
+		"Sheepskin",
+		"SkinCage",
+		"Space Waste Yarn",
+		"SpeedForm",
+		"Sprintskin",
+		"Strikeprint",
+		"Strung",
+		"Suede",
+		"Suprell",
+		"SuprellTech",
+		"Suprellsoft",
+		"Synthetic",
+		"TPE",
+		"TPU",
+		"Textile",
+		"Tweed",
+		"Twill",
+		"Ultra Shell",
+		"Ultraknit",
+		"Ultraride",
+		"Ultraweave",
+		"Vaporposite+",
+		"Vaporweave",
+		"Velvet",
+		"Warp",
+		"Warp 2.0",
+		"Wool",
+		"Woven",
+		"eVent"
+	],
+	"gender": [
+		"infant",
+		"men",
+		"women",
+		"youth"
+	],
+	"brand": [
+		"424",
+		"ASICS",
+		"Acne Studios",
+		"Air Jordan",
+		"Alexander McQueen",
+		"Ambush",
+		"Amiri",
+		"Ann Demeulemeester",
+		"Anta",
+		"BAPE",
+		"Balenciaga",
+		"Balmain",
+		"Birkenstock",
+		"Bottega Veneta",
+		"Brooks",
+		"Burberry",
+		"CELINE",
+		"Casablanca",
+		"Champion",
+		"Chanel",
+		"Chloé",
+		"Christian Louboutin",
+		"Clarks",
+		"Common Projects",
+		"Converse",
+		"Crocs",
+		"Curry Brand",
+		"Dc",
+		"Diadora",
+		"Diesel",
+		"Dior",
+		"Dolce & Gabbana",
+		"Dr. Martens",
+		"Dries Van Noten",
+		"Ewing",
+		"Fear of God",
+		"Fendi",
+		"Fila",
+		"GOAT",
+		"Givenchy",
+		"Golden Goose",
+		"Gucci",
+		"HOKA",
+		"JW Anderson",
+		"Jacquemus",
+		"Jil Sander",
+		"Karhu",
+		"Kiko Kostadinov",
+		"Lanvin",
+		"Le Coq Sportif",
+		"Lemaire",
+		"Li-Ning",
+		"Loewe",
+		"Louis Vuitton",
+		"MM6 Maison Margiela",
+		"MSCHF",
+		"Maison Margiela",
+		"Maison Mihara Yasuhiro",
+		"Market",
+		"Marni",
+		"Merrell",
+		"Miu Miu",
+		"Mizuno",
+		"Moncler",
+		"New Balance",
+		"Nike",
+		"ON",
+		"Off-White",
+		"Ohana Hatake",
+		"Onitsuka Tiger",
+		"Palm Angels",
+		"Prada",
+		"Puma",
+		"Reebok",
+		"Rick Owens",
+		"Rigorer",
+		"SOREL",
+		"Saint Laurent",
+		"Salomon",
+		"Saucony",
+		"Simone Rocha",
+		"Suicoke",
+		"Supra",
+		"The Attico",
+		"The North Face",
+		"Timberland",
+		"UGG",
+		"Under Armour",
+		"Valentino",
+		"Vans",
+		"Veja",
+		"Versace",
+		"Visvim",
+		"YZY",
+		"Yeezy",
+		"adidas"
+	]
+}

requirements.txt

@@ -0,0 +1,4 @@
+tensorflow
+numpy
+pandas
+flask

templates/index.html

@@ -0,0 +1,450 @@
+<!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 pulse">
+			AI Sneaker Predictor
+		</h1>
+
+		<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+			<div class="glass-effect p-8 rounded-xl space-y-6 col-span-1 md:col-span-2 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 animate-pulse" 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>
+				<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];
+			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);
+
+		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>