Spaces:

usmar
/

moodring

Running

File size: 8,434 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>moodring — emotion classification</title>
<style>
  :root {
    --bg: #fcfcfb; --card: #ffffff; --ink: #2b2b2a; --muted: #6e6e6b;
    --line: #e4e4e1; --blue: #2a78d6; --orange: #eb6834;
    --blue-soft: #e8f0fb; --track: #f0f0ee;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #1a1a19; --card: #232322; --ink: #e8e8e5; --muted: #9c9c98;
      --line: #3a3a38; --blue: #3987e5; --orange: #d95926;
      --blue-soft: #1e2f44; --track: #2e2e2c;
    }
  }
  * { box-sizing: border-box; margin: 0; }
  body {
    background: var(--bg); color: var(--ink);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex; justify-content: center; padding: 28px 16px;
  }
  main { width: 100%; max-width: 780px; }
  header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
  h1 { font-size: 22px; letter-spacing: -0.02em; }
  h1 .ring { color: var(--blue); }
  .tag { color: var(--muted); font-size: 13px; }
  p.sub { color: var(--muted); font-size: 13.5px; margin-bottom: 18px; }
  .card {
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    padding: 16px; margin-bottom: 14px;
  }
  textarea {
    width: 100%; min-height: 84px; resize: vertical; border: 1px solid var(--line);
    border-radius: 8px; padding: 10px 12px; font: inherit; color: var(--ink);
    background: var(--bg); outline: none;
  }
  textarea:focus { border-color: var(--blue); }
  .row { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
  button {
    font: inherit; font-size: 14px; font-weight: 600; border-radius: 8px;
    padding: 8px 18px; cursor: pointer; border: 1px solid transparent;
  }
  #analyze { background: var(--blue); color: #fff; }
  #analyze:disabled { opacity: 0.5; cursor: default; }
  #sampleBtn { background: none; border-color: var(--line); color: var(--ink); }
  #sampleBtn:hover { border-color: var(--blue); }
  .meta { color: var(--muted); font-size: 12.5px; margin-left: auto; }
  #result { display: none; }
  .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
  .chip {
    background: var(--blue-soft); color: var(--blue); border-radius: 999px;
    font-size: 13px; font-weight: 650; padding: 3px 12px;
  }
  .chip.gold { background: none; border: 1px dashed var(--line); color: var(--muted); font-weight: 500; }
  .note { color: var(--muted); font-size: 12.5px; margin-bottom: 12px; }
  .note .warn { color: var(--orange); font-weight: 600; }
  .bars { display: grid; grid-template-columns: 110px 1fr 46px; gap: 6px 10px; align-items: center; }
  .bl { font-size: 13px; color: var(--ink); text-align: right; }
  .bl.dim { color: var(--muted); }
  .track { position: relative; height: 12px; background: var(--track); border-radius: 4px; }
  .fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--blue); min-width: 2px; }
  .fill.dim { opacity: 0.35; }
  .tick { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--orange); border-radius: 1px; }
  .bv { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .legend { display: flex; gap: 16px; margin-top: 12px; color: var(--muted); font-size: 12px; align-items: center; }
  .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--blue); margin-right: 5px; vertical-align: -1px; }
  .swt { display: inline-block; width: 2px; height: 12px; background: var(--orange); margin-right: 6px; vertical-align: -2px; }
  footer { color: var(--muted); font-size: 12px; margin-top: 4px; }
  footer a { color: var(--blue); text-decoration: none; }
</style>
</head>
<body>
<script src="./shim.js"></script>
<main>
  <header><h1>mood<span class="ring">ring</span></h1><span class="tag">multi-label emotion classification</span></header>
  <p class="sub">28 emotions from the GoEmotions taxonomy, scored by a 30k-feature linear model.
     Type something, or pull a real Reddit comment from the held-out test split.</p>

  <div class="card">
    <textarea id="text" placeholder="Type a sentence — e.g. “Thanks so much, this made my whole week!”"></textarea>
    <div class="row">
      <button id="analyze">Analyze</button>
      <button id="sampleBtn">Try a sample</button>
      <span class="meta" id="meta"></span>
    </div>
  </div>

  <div class="card" id="result">
    <div class="chips" id="chips"></div>
    <div class="note" id="note"></div>
    <div class="bars" id="bars"></div>
    <div class="legend">
      <span><span class="sw"></span>model score</span>
      <span><span class="swt"></span>decision threshold (per label, tuned on dev)</span>
    </div>
  </div>

  <footer>TF-IDF (1–2 grams) + one-vs-rest logistic regression · macro-F1 0.44 on the GoEmotions test split ·
    <a href="https://github.com/UsmarHaider/moodring">source</a></footer>
</main>
<script>
const $ = id => document.getElementById(id);
let gold = null, totalSamples = 5427;

function setBusy(b) { $('analyze').disabled = b; }

async function analyze() {
  const text = $('text').value.trim();
  if (!text) return;
  setBusy(true);
  const t0 = performance.now();
  try {
    const res = await fetch('/predict', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({text}),
    });
    if (!res.ok) throw new Error('predict failed: ' + res.status);
    render(await res.json(), performance.now() - t0);
  } catch (e) {
    $('meta').textContent = e.message;
  } finally { setBusy(false); }
}

function render(out, ms) {
  const chips = $('chips');
  chips.innerHTML = '';
  for (const label of out.labels) {
    const c = document.createElement('span');
    c.className = 'chip'; c.textContent = label; chips.appendChild(c);
  }
  if (gold) {
    for (const g of gold) {
      const c = document.createElement('span');
      c.className = 'chip gold'; c.textContent = 'gold: ' + g; chips.appendChild(c);
    }
  }
  $('note').innerHTML = out.fallback
    ? '<span class="warn">no label cleared its threshold</span> — showing the top-scoring emotion instead'
    : 'labels whose score cleared their per-label threshold';

  const entries = Object.entries(out.scores).sort((a, b) => b[1] - a[1]).slice(0, 10);
  const bars = $('bars');
  bars.innerHTML = '';
  const max = Math.max(entries[0][1], ...entries.map(e => out.thresholds[e[0]]), 0.55);
  for (const [label, score] of entries) {
    const picked = out.labels.includes(label);
    const bl = document.createElement('div');
    bl.className = 'bl' + (picked ? '' : ' dim'); bl.textContent = label;
    const track = document.createElement('div');
    track.className = 'track';
    const fill = document.createElement('div');
    fill.className = 'fill' + (picked ? '' : ' dim');
    fill.style.width = (100 * score / max) + '%';
    const tick = document.createElement('div');
    tick.className = 'tick';
    tick.style.left = 'calc(' + (100 * out.thresholds[label] / max) + '% - 1px)';
    track.append(fill, tick);
    const bv = document.createElement('div');
    bv.className = 'bv'; bv.textContent = score.toFixed(2);
    bars.append(bl, track, bv);
  }
  $('result').style.display = 'block';
  $('meta').textContent = ms.toFixed(0) + ' ms';
}

async function loadSample(index) {
  const i = index ?? Math.floor(Math.random() * totalSamples);
  try {
    const res = await fetch('/sample?index=' + i);
    if (!res.ok) throw new Error('samples unavailable on this host');
    const s = await res.json();
    totalSamples = s.total;
    $('text').value = s.text;
    gold = s.gold;
    await analyze();
    $('meta').textContent += ' · test example #' + s.index;
  } catch (e) { $('meta').textContent = e.message; }
}

$('analyze').addEventListener('click', () => { gold = null; analyze(); });
$('sampleBtn').addEventListener('click', () => loadSample());
$('text').addEventListener('keydown', e => {
  if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { gold = null; analyze(); }
});

const params = new URLSearchParams(location.search);
if (params.get('demo')) {
  const idx = params.get('sample');
  if (idx !== null) loadSample(parseInt(idx, 10));
  else { $('text').value = 'Thanks so much, this made my whole week!'; analyze(); }
}
</script>
</body>
</html>