| <!DOCTYPE html> |
| <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{ |
| display:flex; |
| gap:40px; |
| background:rgba(30,41,59,0.8); |
| backdrop-filter: blur(10px); |
| padding:30px; |
| border-radius:12px; |
| } |
| |
| |
| |
| .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; |
| } |
| |
| |
| |
| .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{ |
| 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-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{ |
| position:relative; |
| overflow:hidden; |
| border-radius:10px; |
| } |
| |
| .result-card img{ |
| width:100%; |
| transition:transform .3s; |
| } |
| |
| .result-card:hover img{ |
| transform:scale(1.1); |
| } |
| |
| |
| |
| .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"> |
| |
| |
|
|
| <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 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"> |
|
|
| |
| <div class="results-title" id="combinedTitle"> |
| Top Similar Images & MAE Reconstruction |
| </div> |
|
|
| |
| <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> |
