Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Image Similarity Comparison</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="panels-wrapper"> | |
| <div class="left-panel"> | |
| <div class="header"> | |
| <h1>Image Similarity Comparison</h1> | |
| <p>Upload two images to calculate their visual similarity</p> | |
| </div> | |
| <div class="info-section"> | |
| <div class="info-header"> | |
| <i class="fas fa-info-circle"></i> | |
| <span>How Image Comparison Works</span> | |
| </div> | |
| <div class="info-content"> | |
| <p><i class="fas fa-brain"></i>The CLIP model generates a numerical representation (embedding) for each image, capturing its semantic meaning.</p> | |
| <p><i class="fas fa-calculator"></i>By calculating the cosine similarity between the two image embeddings, we can determine how visually similar they are.</p> | |
| <p><i class="fas fa-chart-line"></i>A higher score (closer to 100%) means the model considers the images to be more alike in content and style.</p> | |
| </div> | |
| </div> | |
| <label for="file-upload" id="drop-zone" class="upload-label"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| <span>Drag & drop images here, or click to upload</span> | |
| <small>You can drop two images at once</small> | |
| </label> | |
| <input type="file" id="file-upload" accept="image/*" multiple style="display: none;"> | |
| <div id="status-indicator"> | |
| <div class="spinner"></div> | |
| <span id="status-text"></span> | |
| </div> | |
| <div class="clear-section"> | |
| <button id="clear-btn"><i class="fas fa-trash"></i> Clear Images</button> | |
| </div> | |
| </div> | |
| <div class="right-panel"> | |
| <div class="image-display-area"> | |
| <div id="image-preview-1" class="image-preview"></div> | |
| <div id="image-preview-2" class="image-preview"></div> | |
| </div> | |
| <div id="meter-container"></div> | |
| <div class="action-buttons"> | |
| <button id="show-graph-btn" style="display: none;">Show Embeddings</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="graph-modal" class="modal"> | |
| <div class="modal-content"> | |
| <span class="close-button">×</span> | |
| <div id="graph-container-modal"></div> | |
| </div> | |
| </div> | |
| <script src="index.js" type="module"></script> | |
| </body> | |
| </html> |