Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Food Image Retrieval AI</title> | |
| <style> | |
| body{ | |
| margin:0; | |
| font-family: Arial, Helvetica, sans-serif; | |
| background:#d32222; | |
| color:white; | |
| } | |
| .container{ | |
| max-width:1200px; | |
| margin:auto; | |
| padding:40px; | |
| } | |
| h1{ | |
| font-family: 'Orbitron', sans-serif; | |
| font-size:42px; | |
| letter-spacing:2px; | |
| text-align:center; | |
| color: #103160; | |
| } | |
| .subtitle{ | |
| text-align:center; | |
| color:#191a1b; | |
| margin-bottom:40px; | |
| } | |
| /* MAIN CARD */ | |
| .main-card{ | |
| display:flex; | |
| gap:40px; | |
| background:rgba(30,41,59,0.8); | |
| backdrop-filter: blur(10px); | |
| padding:30px; | |
| border-radius:12px; | |
| } | |
| /* IMAGE PREVIEW */ | |
| .left{ | |
| flex:1; | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| } | |
| #preview{ | |
| width:380px; | |
| height:280px; | |
| border:2px dashed #475569; | |
| border-radius:10px; | |
| overflow:hidden; | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| } | |
| #preview img{ | |
| width:100%; | |
| height:100%; | |
| object-fit:cover; | |
| display:block; | |
| } | |
| /* CONTROLS */ | |
| .right{ | |
| flex:1; | |
| display:flex; | |
| flex-direction:column; | |
| justify-content:center; | |
| } | |
| button{ | |
| padding:12px 20px;; | |
| width:300px; | |
| border:none; | |
| border-radius:6px; | |
| font-size:16px; | |
| cursor:pointer; | |
| margin-bottom:15px; | |
| } | |
| .upload{ | |
| background:#044d47; | |
| color:white; | |
| } | |
| .search{ | |
| background:#4b3169; | |
| color:white; | |
| } | |
| /* PROGRESS BAR */ | |
| .progress{ | |
| width:100%; | |
| height:8px; | |
| background:#334155; | |
| border-radius:10px; | |
| overflow:hidden; | |
| display:none; | |
| } | |
| .progress-bar{ | |
| height:100%; | |
| width:0%; | |
| background:#22c55e; | |
| animation:loading 2s infinite; | |
| } | |
| @keyframes loading{ | |
| 0%{width:0%} | |
| 50%{width:80%} | |
| 100%{width:100%} | |
| } | |
| /* RESULTS */ | |
| .results-section{ | |
| margin-top:40px; | |
| } | |
| .results-title{ | |
| font-size:24px; | |
| margin-bottom:20px; | |
| font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; | |
| } | |
| .results{ | |
| display:grid; | |
| grid-template-columns:repeat(3, 1fr); | |
| gap:40px; | |
| } | |
| /* RESULT CARD */ | |
| .result-card{ | |
| position:relative; | |
| overflow:hidden; | |
| border-radius:10px; | |
| } | |
| .result-card img{ | |
| width:100%; | |
| transition:transform .3s; | |
| } | |
| .result-card:hover img{ | |
| transform:scale(1.1); | |
| } | |
| /* SCORE */ | |
| .score{ | |
| position:absolute; | |
| top:0; | |
| left:0; | |
| width:100%; | |
| background:linear-gradient(to bottom, rgba(0,0,0,.8), transparent); | |
| padding:8px; | |
| font-size:14px; | |
| font-weight:bold; | |
| } | |
| </style> | |
| </head> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap" rel="stylesheet"> | |
| <!-- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap" rel="stylesheet"> --> | |
| <!-- <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet"> --> | |
| <script> | |
| console.log("SCRIPT LOADED"); | |
| </script> | |
| <body> | |
| <div class="container"> | |
| <h1>🍔 Food Image Retrieval AI</h1> | |
| <p class="subtitle"> | |
| <!-- Upload a food image and retrieve the most visually similar images using deep learning embeddings. --> | |
| Upload a food image and retrieve the most visually similar dishes using image embeddings generated by a Vision Transformer trained with a Masked Autoencoder. | |
| </p> | |
| <div class="main-card"> | |
| <div class="left"> | |
| <div id="preview"> | |
| <p style="color:#94a3b8;">No image selected</p> | |
| </div> | |
| </div> | |
| <div class="right"> | |
| <input type="file" id="imageInput" accept="image/*" hidden> | |
| <button class="upload" onclick="document.getElementById('imageInput').click()"> | |
| Upload Image | |
| </button> | |
| <button class="search" id="searchBtn"> | |
| Search Similar Images | |
| </button> | |
| <button class="search" id="maeBtn"> | |
| Run MAE Reconstruction | |
| </button> | |
| <div class="progress" id="progress"> | |
| <div class="progress-bar"></div> | |
| </div> | |
| <div id="status"></div> | |
| </div> | |
| </div> | |
| <div class="results-section"> | |
| <!-- Combined title (first load) --> | |
| <div class="results-title" id="combinedTitle"> | |
| Top Similar Images & MAE Reconstruction | |
| </div> | |
| <!-- Individual section titles --> | |
| <div class="results-title" id="similarTitle" style="display:none;"> | |
| Top Similar Images | |
| </div> | |
| <div class="results" id="results"></div> | |
| <div class="results-title" id="maeTitle" style="display:none;"> | |
| MAE Reconstruction | |
| </div> | |
| <div class="results" id="maeResults"></div> | |
| </div> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> |