Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta name="description" content="AI-Powered Image Classification mini-lab using pretrained Hugging Face models"> | |
| <title>AI-Powered Image Classification</title> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🖼️</text></svg>"> | |
| <link rel="stylesheet" href="./style.css?v=4"> | |
| </head> | |
| <body> | |
| <main class="page-shell"> | |
| <nav class="guide-linkbar" aria-label="Course guide"> | |
| <span>Building your own AI mini app?</span> | |
| <a href="./how-to-start.html">How to Start <span aria-hidden="true">→</span></a> | |
| </nav> | |
| <header class="hero"> | |
| <p class="eyebrow">Creative Technology · Computer Vision</p> | |
| <h1>AI-Powered Image Classification</h1> | |
| <p class="lede">Pick a tested example or upload your own image. Then choose a pretrained classifier and let AI answer: <strong>what is this image mainly about?</strong></p> | |
| <div class="lesson-strip" aria-label="Mini-lab overview"> | |
| <span><b>Task</b> Image classification</span> | |
| <span><b>Data</b> ImageNet labels or custom candidates</span> | |
| <span><b>Models</b> ResNet · ViT · CLIP</span> | |
| </div> | |
| </header> | |
| <section class="workspace" aria-label="Image classification mini-lab"> | |
| <div class="controls card"> | |
| <div class="step"> | |
| <span class="step-number">1</span> | |
| <div> | |
| <p class="control-label sample-title">Choose an image</p> | |
| <p class="helper">Start with a tested example, or try a photo of your own.</p> | |
| </div> | |
| </div> | |
| <div class="sample-head example-head"> | |
| <div> | |
| <p class="input-kicker">Start here · Example images</p> | |
| <p class="helper">Four images are drawn at random from example images.</p> | |
| </div> | |
| <button id="shuffle-examples" class="shuffle-button" type="button">Shuffle</button> | |
| </div> | |
| <div id="sample-grid" class="sample-grid" aria-label="Example images"></div> | |
| <div class="or-row"><span>or try your own</span></div> | |
| <label class="control-label" for="image-input">Upload an image</label> | |
| <p class="helper">PNG, JPEG, or WebP works best.</p> | |
| <input id="image-input" class="file-input" type="file" accept="image/png,image/jpeg,image/webp"> | |
| <div class="divider"></div> | |
| <div class="step"> | |
| <span class="step-number">2</span> | |
| <div class="grow"> | |
| <label class="control-label" for="model-select">Choose classifier</label> | |
| <select id="model-select" class="model-select"></select> | |
| <p id="model-note" class="helper"></p> | |
| <div id="clip-controls" class="clip-controls" hidden> | |
| <label class="control-label" for="candidate-labels">CLIP candidate labels</label> | |
| <textarea id="candidate-labels" rows="3" spellcheck="false">a cat, a cup of coffee, a rocket, an astronaut, a dog, a car</textarea> | |
| <p class="helper">Use 2–20 short descriptions, separated by commas or new lines.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="divider"></div> | |
| <div class="step"> | |
| <span class="step-number">3</span> | |
| <div class="grow"> | |
| <div class="slider-row"> | |
| <label class="control-label" for="top-k">Predictions to display</label> | |
| <output id="top-k-value" for="top-k">5</output> | |
| </div> | |
| <input id="top-k" type="range" min="1" max="10" value="5" step="1"> | |
| <p class="helper">Top-k changes how many high-scoring labels are shown.</p> | |
| </div> | |
| </div> | |
| <button id="run-button" class="run-button" type="button" disabled>Run AI Classification</button> | |
| <p id="status" class="status" aria-live="polite">Choose an example or upload your own image.</p> | |
| <div id="progress-wrap" class="progress-wrap" hidden> | |
| <div id="progress-bar" class="progress-bar"></div> | |
| </div> | |
| </div> | |
| <div class="result card"> | |
| <div class="result-head"> | |
| <div> | |
| <p class="section-kicker">AI prediction</p> | |
| <h2>What did the classifier predict?</h2> | |
| </div> | |
| <span id="runtime-badge" class="badge">Waiting</span> | |
| </div> | |
| <div id="preview-wrap" class="preview-wrap empty"> | |
| <img id="preview-image" alt="Selected image"> | |
| <p id="preview-placeholder">Choose an image first. It will appear here before classification.</p> | |
| </div> | |
| <div id="summary" class="summary">No predictions yet.</div> | |
| <div id="run-meta" class="run-meta" hidden> | |
| <span><b>Model</b><span id="meta-model">—</span></span> | |
| <span><b>Image</b><span id="meta-image">—</span></span> | |
| <span><b>Runtime</b><span id="meta-runtime">—</span></span> | |
| </div> | |
| <div class="table-wrap"> | |
| <table> | |
| <thead><tr><th>Rank</th><th>Label</th><th>Score</th></tr></thead> | |
| <tbody id="predictions-body"> | |
| <tr class="empty-row"><td colspan="3">Run the classifier to see details.</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="explain card"> | |
| <p class="section-kicker">What you are doing</p> | |
| <h2 class="explain-title">Use a learned AI capability instead of rebuilding the traditional task from scratch.</h2> | |
| <p class="explain-copy">ResNet and ViT choose from 1,000 fixed ImageNet classes. CLIP compares the image with descriptions that you provide. Keep the image fixed, change one setting, and explain why the output changes.</p> | |
| <div class="flow" aria-label="Image classification flow"> | |
| <span>Example or your image</span><span class="arrow">→</span> | |
| <span>Selected pretrained classifier</span><span class="arrow">→</span> | |
| <span>Labels + scores</span> | |
| </div> | |
| <p class="extension-note"><strong>Compare models:</strong> keep the image fixed, switch classifier, and observe how labels, scores, and speed change.</p> | |
| </section> | |
| <section class="history card" aria-labelledby="history-title"> | |
| <div class="history-head"> | |
| <div> | |
| <p class="section-kicker">Comparison log</p> | |
| <h2 id="history-title" class="explain-title">Keep one image fixed and compare model decisions.</h2> | |
| <p class="history-copy">Each successful run is added below. This makes the classroom comparison visible without reloading the page.</p> | |
| </div> | |
| <button id="clear-history" class="secondary-button" type="button" disabled>Clear log</button> | |
| </div> | |
| <div class="table-wrap"> | |
| <table> | |
| <thead><tr><th>Run</th><th>Image</th><th>Model</th><th>Top prediction</th><th>Score</th><th>Time</th></tr></thead> | |
| <tbody id="history-body"> | |
| <tr class="empty-row"><td colspan="6">Run two models on the same image to start a comparison.</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <footer>Hosted as a Hugging Face Static Space · Powered by Transformers.js</footer> | |
| </main> | |
| <script type="module" src="./app.js?v=5"></script> | |
| </body> | |
| </html> | |