lodestones
/

taggerine

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>DINOv3 Tagger</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --bg:       #0f0f11;
+      --surface:  #1a1a1f;
+      --border:   #2e2e38;
+      --accent:   #7c6af7;
+      --accent2:  #a78bfa;
+      --text:     #e2e2e8;
+      --muted:    #6b6b7e;
+      --green:    #4ade80;
+      --radius:   10px;
+    }
+    body {
+      background: var(--bg);
+      color: var(--text);
+      font-family: 'Inter', system-ui, sans-serif;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 2rem 1rem 4rem;
+    }
+    h1 {
+      font-size: 1.6rem;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      margin-bottom: 0.25rem;
+    }
+    h1 span { color: var(--accent2); }
+    .subtitle {
+      color: var(--muted);
+      font-size: 0.85rem;
+      margin-bottom: 2rem;
+    }
+    .card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 1.5rem;
+      width: 100%;
+      max-width: 780px;
+    }
+    /* ---- input area ---- */
+    .input-row {
+      display: flex;
+      gap: 0.5rem;
+      margin-bottom: 1rem;
+    }
+    .input-row input[type="text"] {
+      flex: 1;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      color: var(--text);
+      font-size: 0.9rem;
+      padding: 0.6rem 0.9rem;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+    .input-row input[type="text"]:focus { border-color: var(--accent); }
+    .input-row input[type="text"]::placeholder { color: var(--muted); }
+    .btn {
+      background: var(--accent);
+      border: none;
+      border-radius: var(--radius);
+      color: #fff;
+      cursor: pointer;
+      font-size: 0.9rem;
+      font-weight: 600;
+      padding: 0.6rem 1.2rem;
+      transition: opacity 0.15s;
+      white-space: nowrap;
+    }
+    .btn:hover { opacity: 0.85; }
+    .btn:disabled { opacity: 0.4; cursor: not-allowed; }
+    /* ---- drop zone ---- */
+    #drop-zone {
+      border: 2px dashed var(--border);
+      border-radius: var(--radius);
+      color: var(--muted);
+      cursor: pointer;
+      font-size: 0.85rem;
+      padding: 1.4rem;
+      text-align: center;
+      transition: border-color 0.15s, background 0.15s;
+      margin-bottom: 1rem;
+    }
+    #drop-zone.drag-over {
+      border-color: var(--accent);
+      background: rgba(124,106,247,0.06);
+    }
+    #drop-zone input[type="file"] { display: none; }
+    /* ---- options row ---- */
+    .options-row {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      flex-wrap: wrap;
+      margin-bottom: 1.2rem;
+      font-size: 0.85rem;
+      color: var(--muted);
+    }
+    .options-row label { display: flex; align-items: center; gap: 0.4rem; }
+    .options-row input[type="number"],
+    .options-row input[type="range"] {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      color: var(--text);
+      padding: 0.3rem 0.5rem;
+      width: 70px;
+      font-size: 0.85rem;
+    }
+    .options-row input[type="range"] {
+      width: 110px;
+      padding: 0;
+      cursor: pointer;
+      accent-color: var(--accent);
+    }
+    #threshold-val { color: var(--text); min-width: 2.5ch; }
+    /* ---- mode toggle ---- */
+    .mode-toggle {
+      display: flex;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    .mode-toggle button {
+      background: none;
+      border: none;
+      color: var(--muted);
+      cursor: pointer;
+      font-size: 0.8rem;
+      padding: 0.3rem 0.7rem;
+      transition: background 0.15s, color 0.15s;
+    }
+    .mode-toggle button.active {
+      background: var(--accent);
+      color: #fff;
+    }
+    /* ---- preview + results ---- */
+    #results-area { display: none; }
+    .result-block {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 1.2rem;
+      margin-top: 1rem;
+    }
+    .preview-wrap {
+      width: 200px;
+      flex-shrink: 0;
+    }
+    .preview-wrap img {
+      border-radius: var(--radius);
+      max-width: 200px;
+      max-height: 200px;
+      object-fit: contain;
+      border: 1px solid var(--border);
+      display: block;
+    }
+    .preview-wrap .img-meta {
+      color: var(--muted);
+      font-size: 0.72rem;
+      margin-top: 0.4rem;
+      word-break: break-all;
+    }
+    .tags-wrap { min-width: 0; }
+    .tag-copy-row {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 0.7rem;
+    }
+    .tag-string {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      color: var(--muted);
+      font-size: 0.78rem;
+      flex: 1;
+      padding: 0.4rem 0.6rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
+      transition: border-color 0.15s;
+    }
+    .tag-string:hover { border-color: var(--accent); color: var(--text); }
+    .copy-btn {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      color: var(--muted);
+      cursor: pointer;
+      font-size: 0.78rem;
+      padding: 0.35rem 0.6rem;
+      transition: border-color 0.15s, color 0.15s;
+      white-space: nowrap;
+    }
+    .copy-btn:hover { border-color: var(--accent); color: var(--accent2); }
+    .copy-btn.copied { color: var(--green); border-color: var(--green); }
+    .tag-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.4rem;
+    }
+    .tag-pill {
+      align-items: center;
+      border-radius: 20px;
+      display: inline-flex;
+      font-size: 0.78rem;
+      gap: 0.35rem;
+      padding: 0.25rem 0.65rem;
+      cursor: default;
+      transition: opacity 0.1s;
+    }
+    .tag-pill:hover { opacity: 0.8; }
+    .tag-pill .score {
+      font-size: 0.68rem;
+      opacity: 0.75;
+    }
+    /* ---- spinner ---- */
+    .spinner {
+      display: none;
+      width: 22px; height: 22px;
+      border: 3px solid var(--border);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: spin 0.7s linear infinite;
+      margin: 1rem auto;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .error-msg {
+      color: #f87171;
+      font-size: 0.85rem;
+      margin-top: 0.5rem;
+      display: none;
+    }
+    @media (max-width: 520px) {
+      .result-block { grid-template-columns: 1fr; }
+      .preview-wrap { width: 100%; }
+      .preview-wrap img { max-width: 100%; }
+    }
+  </style>
+</head>
+<body>
+<h1>DINOv3 <span>Tagger</span></h1>
+<p class="subtitle">ViT-H/16+ · {{ num_tags | format_number }} tags · {{ vocab_path }}</p>
+<div class="card">
+  <!-- URL input -->
+  <div class="input-row">
+    <input type="text" id="url-input" placeholder="Paste image URL or drop a file below…" />
+    <button class="btn" id="tag-btn" onclick="runFromUrl()">Tag</button>
+  </div>
+  <!-- Drop zone -->
+  <div id="drop-zone" onclick="document.getElementById('file-input').click()">
+    <input type="file" id="file-input" accept="image/*" onchange="runFromFile(this)" />
+    Drop image here or <strong>click to browse</strong>
+  </div>
+  <!-- Options -->
+  <div class="options-row">
+    <div class="mode-toggle">
+      <button id="mode-topk" class="active" onclick="setMode('topk')">Top-K</button>
+      <button id="mode-thresh" onclick="setMode('threshold')">Threshold</button>
+    </div>
+    <label id="topk-label">
+      K =
+      <input type="number" id="topk-input" value="40" min="1" max="500" />
+    </label>
+    <label id="thresh-label" style="display:none">
+      ≥
+      <input type="range" id="thresh-input" min="0.01" max="0.99" step="0.01" value="0.35"
+             oninput="document.getElementById('threshold-val').textContent=parseFloat(this.value).toFixed(2)" />
+      <span id="threshold-val">0.35</span>
+    </label>
+    <label>
+      Max px
+      <input type="number" id="maxsize-input" value="1024" min="64" max="4096" step="16" />
+    </label>
+  </div>
+  <div class="spinner" id="spinner"></div>
+  <div class="error-msg" id="error-msg"></div>
+  <!-- Results -->
+  <div id="results-area">
+    <div class="result-block">
+      <div class="preview-wrap">
+        <img id="preview-img" src="" alt="preview" />
+        <div class="img-meta" id="img-meta"></div>
+      </div>
+      <div class="tags-wrap">
+        <div class="tag-copy-row">
+          <div class="tag-string" id="tag-string" onclick="copyTags()" title="Click to copy"></div>
+          <button class="copy-btn" id="copy-btn" onclick="copyTags()">Copy</button>
+        </div>
+        <div class="tag-list" id="tag-list"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  let currentMode = 'topk';
+  function setMode(m) {
+    currentMode = m;
+    document.getElementById('mode-topk').classList.toggle('active', m === 'topk');
+    document.getElementById('mode-thresh').classList.toggle('active', m === 'threshold');
+    document.getElementById('topk-label').style.display   = m === 'topk'      ? '' : 'none';
+    document.getElementById('thresh-label').style.display = m === 'threshold' ? '' : 'none';
+  }
+  // ---- drag & drop ----
+  const dz = document.getElementById('drop-zone');
+  dz.addEventListener('dragover',  e => { e.preventDefault(); dz.classList.add('drag-over'); });
+  dz.addEventListener('dragleave', () => dz.classList.remove('drag-over'));
+  dz.addEventListener('drop', e => {
+    e.preventDefault();
+    dz.classList.remove('drag-over');
+    const file = e.dataTransfer.files[0];
+    if (file) submitFile(file);
+  });
+  function runFromFile(input) {
+    if (input.files[0]) submitFile(input.files[0]);
+  }
+  function runFromUrl() {
+    const url = document.getElementById('url-input').value.trim();
+    if (!url) return;
+    const params = buildParams();
+    params.append('url', url);
+    submit('/tag/url', params, url);
+  }
+  function buildParams() {
+    const p = new URLSearchParams();
+    p.append('max_size', document.getElementById('maxsize-input').value);
+    if (currentMode === 'topk') {
+      p.append('topk', document.getElementById('topk-input').value);
+    } else {
+      p.append('threshold', document.getElementById('thresh-input').value);
+    }
+    return p;
+  }
+  function submitFile(file) {
+    const params = buildParams();
+    const fd = new FormData();
+    fd.append('file', file);
+    for (const [k, v] of params) fd.append(k, v);
+    // local preview
+    const reader = new FileReader();
+    reader.onload = e => setPreview(e.target.result, file.name);
+    reader.readAsDataURL(file);
+    submitFetch('/tag/upload', { method: 'POST', body: fd });
+  }
+  function submit(endpoint, params, previewUrl) {
+    setPreview(previewUrl, previewUrl);
+    submitFetch(`${endpoint}?${params}`, { method: 'POST' });
+  }
+  function submitFetch(url, opts) {
+    setLoading(true);
+    fetch(url, opts)
+      .then(r => r.ok ? r.json() : r.json().then(e => Promise.reject(e.detail || 'Server error')))
+      .then(renderResults)
+      .catch(err => showError(String(err)))
+      .finally(() => setLoading(false));
+  }
+  function setPreview(src, label) {
+    document.getElementById('preview-img').src = src;
+    document.getElementById('img-meta').textContent = label.length > 60
+      ? '…' + label.slice(-57) : label;
+  }
+  function renderResults(data) {
+    hideError();
+    const list = document.getElementById('tag-list');
+    list.innerHTML = '';
+    const tagString = data.tags.map(t => t.tag).join(', ');
+    document.getElementById('tag-string').textContent = tagString;
+    data.tags.forEach(({ tag, score }) => {
+      const hue = Math.round(260 - score * 80);   // purple → teal gradient
+      const pill = document.createElement('span');
+      pill.className = 'tag-pill';
+      pill.style.background = `hsla(${hue},60%,55%,0.18)`;
+      pill.style.border = `1px solid hsla(${hue},60%,55%,0.35)`;
+      pill.style.color = `hsl(${hue},70%,78%)`;
+      pill.innerHTML = `${tag}<span class="score">${(score * 100).toFixed(0)}%</span>`;
+      pill.title = `${tag}: ${score.toFixed(4)}`;
+      list.appendChild(pill);
+    });
+    document.getElementById('results-area').style.display = 'block';
+    document.getElementById('copy-btn').classList.remove('copied');
+  }
+  function copyTags() {
+    const text = document.getElementById('tag-string').textContent;
+    navigator.clipboard.writeText(text).then(() => {
+      const btn = document.getElementById('copy-btn');
+      btn.textContent = 'Copied!';
+      btn.classList.add('copied');
+      setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 1800);
+    });
+  }
+  function setLoading(on) {
+    document.getElementById('spinner').style.display = on ? 'block' : 'none';
+    document.getElementById('tag-btn').disabled = on;
+    if (on) document.getElementById('results-area').style.display = 'none';
+  }
+  function showError(msg) {
+    const el = document.getElementById('error-msg');
+    el.textContent = msg;
+    el.style.display = 'block';
+  }
+  function hideError() {
+    document.getElementById('error-msg').style.display = 'none';
+  }
+  // allow pressing Enter in URL box
+  document.getElementById('url-input').addEventListener('keydown', e => {
+    if (e.key === 'Enter') runFromUrl();
+  });
+</script>
+</body>
+</html>