| | <!DOCTYPE html> |
| | <html lang="en"> |
| |
|
| | <head> |
| | <meta charset="UTF-8" /> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| | <title>Zero-Shot Image Classification</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"> |
| | </head> |
| |
|
| | <body> |
| | <div class="container"> |
| | <div class="left-panel"> |
| | <div class="header"> |
| | <h1>Zero Shot Image Classification using Transformers.js</h1> |
| | <p>Upload an image and enter labels to classify it</p> |
| | </div> |
| | <div class="labels-section"> |
| | <label for="labels-input">Enter comma-separated labels</label> |
| | <div class="input-wrapper"> |
| | <input type="text" id="labels-input" placeholder="e.g. cat, dog, car"> |
| | <button id="classify-btn"><i class="fas fa-arrow-right"></i></button> |
| | </div> |
| | </div> |
| | <div class="upload-section"> |
| | <label for="file-upload" class="upload-label"> |
| | <i class="fas fa-cloud-upload-alt"></i> |
| | <span>Drag and drop an image or click to upload</span> |
| | </label> |
| | <input type="file" id="file-upload" accept="image/*"> |
| | </div> |
| | <div class="info-section"> |
| | <div class="info-header"> |
| | <i class="fas fa-info-circle"></i> |
| | <span>How Zero-Shot Classification Works</span> |
| | </div> |
| | <div class="info-content"> |
| | <p><i class="fas fa-brain"></i> CLIP performs zero-shot classification by mapping both images and text descriptions into the same vector space.</p> |
| | <p><i class="fas fa-magic"></i> It learns this shared space by training on many image–caption pairs, so that images and the sentences describing them end up near each other.</p> |
| | <p><i class="fas fa-chart-line"></i> At test time, each class is turned into a short prompt like "a photo of a cat", embedded, and compared to the image's vector to find the highest similarity.</p> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="right-panel"> |
| | <div id="image-preview"></div> |
| | <div id="results-container"> |
| | <div class="placeholder"> |
| | <i class="fas fa-chart-pie"></i> |
| | <h2>Results will be displayed here</h2> |
| | <p>Get instant classification results</p> |
| | </div> |
| | </div> |
| | <div id="status-indicator"> |
| | <div class="spinner"></div> |
| | <span id="status-text"></span> |
| | </div> |
| | </div> |
| | </div> |
| | <script src="index.js" type="module"></script> |
| | </body> |
| |
|
| | </html> |
