Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>TaskCLIP Web UI</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/> | |
| <link rel="stylesheet" href="/static/style.css?v=2"> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <aside class="sidebar"> | |
| <div class="sideTop"> | |
| <div class="sideTitle"> | |
| <span class="logo"></span> | |
| <div> | |
| <div class="title">TaskCLIP Demo</div> | |
| <div class="sub">YOLO → VLM Embedding → TaskCLIP Selection</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="sideScroll"> | |
| <form id="runForm" class="card section"> | |
| <div class="sectionTitle"> | |
| <i class="fa-solid fa-sliders"></i> | |
| <span>Controls</span> | |
| </div> | |
| <div class="grid2"> | |
| <div class="field"> | |
| <label>VLM Model</label> | |
| <select name="vlm_model"> | |
| {% for x in vlm_choices %} | |
| <option value="{{x.value}}" {% if x.value == default_vlm %}selected{% endif %}> | |
| {{x.label}} | |
| </option> | |
| {% endfor %} | |
| </select> | |
| </div> | |
| <div class="field"> | |
| <label>Score Function</label> | |
| <select name="score_function"> | |
| <option value="default" selected>default</option> | |
| <option value="HDC">HDC</option> | |
| </select> | |
| </div> | |
| <div class="field" id="hdcBitsField" style="display:none;"> | |
| <label>HDC Precision</label> | |
| <select name="hdc_bits" id="hdcBits"> | |
| <option value="1">1-bit</option> | |
| <option value="2">2-bit</option> | |
| <option value="4">4-bit</option> | |
| <option value="8">8-bit</option> | |
| <option value="16">16-bit (fp16/bf16)</option> | |
| <option value="32" selected>32-bit (fp32)</option> | |
| </select> | |
| <div class="hint">Applies to HDC score function only (weights + activations).</div> | |
| </div> | |
| <div class="field"> | |
| <label>HDV Dim</label> | |
| <select name="hdv_dim"> | |
| {% for d in hdv_dims %} | |
| <option value="{{d}}" {% if d == default_hdv_dim %}selected{% endif %}>{{d}}</option> | |
| {% endfor %} | |
| </select> | |
| <div class="hint">Only used when Score Function = HDC</div> | |
| </div> | |
| <div class="field"> | |
| <label>OD Model Size</label> | |
| <select name="od_model"> | |
| {% for x in od_choices %} | |
| <option value="{{x.value}}" {% if x.value == default_od %}selected{% endif %}> | |
| {{x.label}} | |
| </option> | |
| {% endfor %} | |
| </select> | |
| <div class="hint">YOLO backend fixed; dropdown changes checkpoint size</div> | |
| </div> | |
| <div class="field"> | |
| <label>Task</label> | |
| <select name="task_id"> | |
| {% for tid, tname in task_items %} | |
| <option value="{{tid}}">{{tid}} — {{tname}}</option> | |
| {% endfor %} | |
| </select> | |
| </div> | |
| <div class="field"> | |
| <label>Visualization</label> | |
| <select name="viz_mode"> | |
| <option value="bbox" selected>bbox</option> | |
| <option value="mask">mask</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="divider"></div> | |
| <div class="sectionTitle"> | |
| <i class="fa-solid fa-microchip"></i> | |
| <span>Noise</span> | |
| </div> | |
| <div class="tabBar"> | |
| <button type="button" class="tabBtn active" data-tab="tabInputNoise">Input noise</button> | |
| <button type="button" class="tabBtn" data-tab="tabHwNoise">Hardware related noise</button> | |
| </div> | |
| <!-- ✅ FIX: input noise UI must be INSIDE this tab panel --> | |
| <div class="tabPanel" id="tabInputNoise"> | |
| <div class="field"> | |
| <label>Input Noise</label> | |
| <select name="noise_type" id="noiseType"> | |
| <option value="none" selected>default (no noise)</option> | |
| <option value="gaussian">Gaussian noise</option> | |
| <option value="linear">Linear noise</option> | |
| <option value="adv">Simple adversarial noise</option> | |
| <option value="adv_rand_sign">Adversarial: random sign (fast)</option> | |
| <option value="adv_edge_sign">Adversarial: edge-sign (Laplacian)</option> | |
| <option value="adv_patch">Adversarial: patch occlusion/noise</option> | |
| <option value="adv_stripes">Adversarial: stripe/periodic</option> | |
| <option value="adv_jpeg">Adversarial: JPEG compression artifacts</option> | |
| </select> | |
| <div class="hint">Applies noise to the uploaded image before running YOLO/TaskCLIP</div> | |
| </div> | |
| <div class="field" id="noisePanelNone"> | |
| <label>Noise Strength</label> | |
| <div class="hint">No noise (strength ignored)</div> | |
| </div> | |
| <div class="field hidden" id="noisePanelGaussian"> | |
| <label>Gaussian Strength: <span class="mono" id="noiseValGaussian">0</span></label> | |
| <input type="range" min="0" max="100" value="0" name="noise_strength_gaussian" id="noiseGaussian" /> | |
| <div class="hint">0–100 → sigma scaling</div> | |
| </div> | |
| <div class="field hidden" id="noisePanelLinear"> | |
| <label>Linear Strength: <span class="mono" id="noiseValLinear">0</span></label> | |
| <input type="range" min="0" max="100" value="0" name="noise_strength_linear" id="noiseLinear" /> | |
| <div class="hint">0–100 → gradient amplitude</div> | |
| </div> | |
| <div class="field hidden" id="noisePanelAdv"> | |
| <label>Adversarial Strength: <span class="mono" id="noiseValAdv">0</span></label> | |
| <input type="range" min="0" max="100" value="0" name="noise_strength_adv" id="noiseAdv" /> | |
| <div class="hint">0–100 → adversarial-style perturbation strength</div> | |
| </div> | |
| <input type="hidden" name="noise_strength" id="noiseStrength" value="0" /> | |
| </div> | |
| <div class="tabPanel hidden" id="tabHwNoise"> | |
| <div class="grid2"> | |
| <div class="field"> | |
| <label>Hardware noise distribution</label> | |
| <select name="hw_noise_dist" id="hwNoiseDist"> | |
| <option value="none" selected>default (no noise)</option> | |
| <option value="gaussian">Gaussian</option> | |
| <option value="uniform">Uniform</option> | |
| <option value="laplace">Laplace</option> | |
| </select> | |
| <div class="hint">Injected into TaskCLIP scoring (score_raw) before the score function.</div> | |
| </div> | |
| <div class="field"> | |
| <label>Width: <span class="mono" id="hwNoiseWidthVal">0</span></label> | |
| <input type="range" min="0" max="100" value="0" name="hw_noise_width" id="hwNoiseWidth" /> | |
| <div class="hint">Controls σ (Gaussian), range (Uniform), b (Laplace)</div> | |
| </div> | |
| <div class="field"> | |
| <label>Strength: <span class="mono" id="hwNoiseStrengthVal">0</span></label> | |
| <input type="range" min="0" max="100" value="0" name="hw_noise_strength" id="hwNoiseStrength" /> | |
| <div class="hint">Scales injected noise amplitude</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="divider"></div> | |
| <div class="field"> | |
| <label>Upload Image</label> | |
| <input id="fileInput" name="upload" type="file" accept="image/*" class="fileHidden" required /> | |
| <div id="dropzone" class="dropzone" role="button" tabindex="0"> | |
| <div class="dzLeft"> | |
| <i class="fa-solid fa-file-arrow-up"></i> | |
| </div> | |
| <div class="dzRight"> | |
| <div class="dzTitle">Drop image here</div> | |
| <div class="dzSub">or click to choose (PNG/JPG)</div> | |
| <div class="dzMeta" id="fileMeta">No file selected</div> | |
| </div> | |
| </div> | |
| <div class="previewWrap hidden" id="previewWrap"> | |
| <img id="previewImg" alt="preview" /> | |
| </div> | |
| </div> | |
| <div class="btnRow"> | |
| <button id="runBtn" class="btn primary" type="submit"> | |
| <span class="spinner hidden" id="spinner"></span> | |
| <i class="fa-solid fa-bolt"></i> | |
| <span id="runBtnText">Run</span> | |
| </button> | |
| <button id="resetBtn" class="btn ghost" type="button"> | |
| <i class="fa-solid fa-rotate-right"></i> | |
| Reset | |
| </button> | |
| </div> | |
| </form> | |
| <div class="card section"> | |
| <div class="sectionTitle"> | |
| <i class="fa-solid fa-circle-info"></i> | |
| <span>Run Status</span> | |
| </div> | |
| <div class="statusRow"> | |
| <div class="pill" id="statusPill"> | |
| <span class="dot idle" id="statusDot"></span> | |
| <span id="statusText">Idle</span> | |
| </div> | |
| <div class="pill mono" id="jobPill">job: —</div> | |
| </div> | |
| <div class="logBox mono" id="statusLog">Waiting for input…</div> | |
| </div> | |
| </div> | |
| </aside> | |
| <main class="main"> | |
| <header class="topbar card"> | |
| <div class="topLeft"> | |
| <div class="topTitle">Results</div> | |
| <div class="topSub">Input • YOLO detections • TaskCLIP selected</div> | |
| </div> | |
| <div class="topRight"> | |
| <div class="pill"> | |
| <i class="fa-solid fa-gpu"></i> | |
| <span class="muted">Backend:</span> FastAPI | |
| </div> | |
| </div> | |
| </header> | |
| <section class="grid3"> | |
| <div class="card resultCard"> | |
| <div class="cardHeader"> | |
| <div class="cardHeaderTitle"><i class="fa-regular fa-image"></i> Input</div> | |
| <a id="dlInput" class="miniLink hidden" target="_blank" rel="noreferrer"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> open | |
| </a> | |
| </div> | |
| <div class="imgWrap"> | |
| <img id="imgInput" /> | |
| </div> | |
| </div> | |
| <div class="card resultCard"> | |
| <div class="cardHeader"> | |
| <div class="cardHeaderTitle"><i class="fa-solid fa-border-all"></i> All detections</div> | |
| <a id="dlYolo" class="miniLink hidden" target="_blank" rel="noreferrer"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> open | |
| </a> | |
| </div> | |
| <div class="imgWrap"> | |
| <img id="imgYolo" /> | |
| </div> | |
| </div> | |
| <div class="card resultCard"> | |
| <div class="cardHeader"> | |
| <div class="cardHeaderTitle"><i class="fa-solid fa-crosshairs"></i> Selected</div> | |
| <a id="dlSelected" class="miniLink hidden" target="_blank" rel="noreferrer"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> open | |
| </a> | |
| </div> | |
| <div class="imgWrap"> | |
| <img id="imgSelected" /> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="card metaCard"> | |
| <div class="cardHeader"> | |
| <div class="cardHeaderTitle"><i class="fa-solid fa-code"></i> Metadata</div> | |
| <button class="btn tinyBtn ghost" id="copyMetaBtn" type="button"> | |
| <i class="fa-regular fa-copy"></i> Copy | |
| </button> | |
| </div> | |
| <pre class="mono meta" id="meta"></pre> | |
| </section> | |
| </main> | |
| </div> | |
| <script src="/static/main.js?v=20260125_1"></script> | |
| </body> | |
| </html> | |