Spaces:

feyninc
/

pulpie

Running on Zero

File size: 33,798 Bytes

c0fe08f

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#F2EDE3" />
<title>pulpie — encoder vs decoder</title>
<meta name="color-scheme" content="light" />
<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=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&family=Lora:ital@0;1&display=swap" rel="stylesheet">
<style>
  :root{
    --paper:#F2EDE3; --raised:#FBF7F0; --sunken:#ECE5D7;
    --ink:#1B1714; --body-ink:#3F382F; --soft:#756A5E;
    --orange:#C6531D; --orange-hover:#E0823A; --pine:#2F5A3C; --hairline:#D7CBB6;
    --green:#2F5A3C; --err:#8A2E16; --err-bg:#FFF3EC;
    --r:14px; --r-sm:10px; --r-lg:20px;
    --sh1:0 1px 2px rgba(27,23,20,.05), 0 1px 3px rgba(27,23,20,.04);
    --sh2:0 10px 32px -12px rgba(27,23,20,.18), 0 2px 8px -3px rgba(27,23,20,.07);
    --ring:0 0 0 3px rgba(198,83,29,.22);
    --safe-t:env(safe-area-inset-top,0px);
    color-scheme:light;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--paper);color:var(--ink)}
  body{font-family:'Inter','Helvetica Neue',Arial,sans-serif;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
  .mono{font-family:'IBM Plex Mono',monospace}
  .wrap{width:100%;max-width:920px;margin:0 auto;padding:max(30px,var(--safe-t)) 20px 28px;flex:1}
  ::selection{background:rgba(198,83,29,.18)}
  *{scrollbar-width:thin;scrollbar-color:var(--hairline) transparent}
  ::-webkit-scrollbar{width:9px;height:9px}
  ::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:20px;border:2px solid var(--raised)}
  ::-webkit-scrollbar-thumb:hover{background:var(--soft)}
  ::-webkit-scrollbar-track{background:transparent}
  a,button,select,textarea{touch-action:manipulation}

  /* ── Header ── */
  #header-block{margin-bottom:20px}
  .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
  #eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;color:var(--orange);text-transform:uppercase;font-weight:500;line-height:1.3}
  .pill{display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);background:var(--raised);border:1px solid var(--hairline);padding:6px 11px;border-radius:100px;box-shadow:var(--sh1);transition:all .2s;white-space:nowrap}
  .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(47,90,60,.15)}
  .pill.connecting .dot{background:var(--orange);box-shadow:0 0 0 3px rgba(198,83,29,.15);animation:pulse 1.1s infinite}
  .pill.error{color:var(--err);border-color:var(--orange)}
  .pill.error .dot{background:var(--err);box-shadow:0 0 0 3px rgba(138,46,22,.15)}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}
  #headline h1{font-weight:700;letter-spacing:-.035em;font-size:50px;color:var(--ink);line-height:1.02;background:linear-gradient(120deg,var(--ink) 30%,var(--orange) 145%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  #lead{font-family:'Lora',serif;font-size:18px;color:var(--body-ink);font-style:italic;max-width:620px;line-height:1.4;margin-top:6px}

  /* ── Unified race card ── */
  .race-card{background:var(--raised);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--sh2);overflow:hidden;margin-top:20px}
  .card-section{padding:18px}
  .card-divider{height:1px;background:var(--hairline)}

  /* input section */
  .input-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--soft);text-transform:uppercase;margin-bottom:11px;display:flex;align-items:center;gap:8px}
  .input-eyebrow::after{content:"";flex:1;height:1px;background:var(--hairline)}
  #input-row{display:flex;align-items:stretch;gap:12px}
  #example-select{flex:1;height:52px;background:var(--paper);border:1px solid var(--hairline);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:13px;padding:0 42px 0 16px;cursor:pointer;appearance:none;border-radius:var(--r-sm);transition:all .15s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C6531D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
  #example-select:hover{border-color:var(--orange);box-shadow:var(--sh1)}
  #example-select:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--orange)}
  #run-btn{height:52px;min-width:150px;background:linear-gradient(135deg,var(--orange) 0%,#D9642A 100%);color:#FBF7F0;border:none;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:all .18s;box-shadow:0 4px 14px -4px rgba(198,83,29,.5)}
  #run-btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 7px 22px -5px rgba(198,83,29,.55)}
  #run-btn:active:not(:disabled){transform:translateY(0)}
  #run-btn:focus-visible{outline:none;box-shadow:var(--ring)}
  #run-btn:disabled{opacity:.6;cursor:progress;transform:none}
  #run-btn .bolt{width:15px;height:15px}
  .spinner{width:15px;height:15px;border:2px solid rgba(251,247,240,.35);border-top-color:#FBF7F0;border-radius:50%;animation:spin .7s linear infinite;display:none}
  #run-btn.running .spinner{display:inline-block}
  #run-btn.running .bolt{display:none}
  @keyframes spin{to{transform:rotate(360deg)}}

  #html-accordion{margin-top:12px}
  .acc-header{display:flex;align-items:center;gap:9px;padding:7px 2px;cursor:pointer;user-select:none}
  .acc-header .chev{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);display:flex;align-items:center;gap:7px;transition:color .15s}
  .acc-header .chev .arw{display:inline-block;transition:transform .22s;color:var(--orange)}
  .acc-header:hover .chev{color:var(--ink)}
  #html-accordion.open .chev .arw{transform:rotate(90deg)}
  .acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
  #html-accordion.open .acc-body{max-height:300px}
  .acc-body-inner{padding-top:8px}
  #custom-html{width:100%;min-height:120px;background:var(--paper);border:1px solid var(--hairline);color:var(--ink);padding:13px 14px;font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.55;resize:vertical;border-radius:var(--r-sm);transition:all .15s}
  #custom-html:focus-visible{outline:none;border-color:var(--orange);box-shadow:var(--ring)}
  .acc-hint{font-family:'Lora',serif;font-style:italic;color:var(--soft);font-size:12px;margin-top:8px}

  /* comparison strip */
  .cmp-strip{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;padding:16px 18px;background:linear-gradient(180deg,var(--raised),rgba(236,229,215,.4))}
  .chip{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-sm);padding:11px 13px;display:flex;flex-direction:column;gap:8px;transition:all .25s;min-width:0}
  .chip.live{border-color:var(--orange);box-shadow:0 0 0 3px rgba(198,83,29,.09)}
  .chip.dripper.live{border-color:var(--pine);box-shadow:0 0 0 3px rgba(47,90,60,.09)}
  .chip-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .chip-name{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);display:flex;align-items:center;gap:7px;min-width:0}
  .chip-name b{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chip .led{width:8px;height:8px;border-radius:50%;flex:none;opacity:.4;transition:opacity .25s}
  .chip.pulpie .led{background:var(--orange)}
  .chip.dripper .led{background:var(--pine)}
  .chip.live .led{opacity:1;box-shadow:0 0 0 4px rgba(198,83,29,.12)}
  .chip.dripper.live .led{box-shadow:0 0 0 4px rgba(47,90,60,.12)}
  .timer{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
  .timer .running{color:var(--green);font-weight:500}
  .chip.pulpie .timer{color:var(--orange)}
  .bar{height:4px;background:var(--sunken);border-radius:4px;position:relative;overflow:hidden}
  .bar .fill{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,var(--orange),var(--orange-hover));border-radius:4px;transition:right .35s cubic-bezier(.4,0,.2,1)}
  .chip.dripper .bar .fill{background:linear-gradient(90deg,var(--pine),#4A7E55)}
  .bar .fill.indeterminate{animation:indet 1.3s ease-in-out infinite}
  @keyframes indet{0%{left:-30%;right:100%}50%{right:40%}100%{left:100%;right:-30%}}

  .cmp-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 4px;min-width:92px}
  .sp-num{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:32px;line-height:1;letter-spacing:-.03em;color:var(--orange);transition:all .3s}
  .sp-lbl{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-top:7px;line-height:1.3}
  .cmp-center.idle .sp-num{color:var(--hairline);font-size:22px}
  .cmp-center.idle .sp-lbl{opacity:0}

  /* toolbar (toggle + actions) */
  .read-toolbar{display:flex;align-items:center;gap:10px;padding:11px 18px;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);flex-wrap:wrap;background:rgba(236,229,215,.32)}
  .toggle-seg{display:flex;gap:3px;background:var(--sunken);border:1px solid var(--hairline);padding:3px;border-radius:100px}
  .toggle-seg button{border:none;background:transparent;color:var(--soft);font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;cursor:pointer;border-radius:100px;transition:all .18s;font-weight:500;display:flex;align-items:center;gap:7px}
  .toggle-seg button .led{width:7px;height:7px;border-radius:50%;opacity:.5}
  .toggle-seg button[data-model="pulpie"] .led{background:var(--orange)}
  .toggle-seg button[data-model="dripper"] .led{background:var(--pine)}
  .toggle-seg button.active{background:var(--raised);color:var(--ink);box-shadow:var(--sh1)}
  .toggle-seg button.active .led{opacity:1}
  .toolbar-spacer{flex:1}
  .mini-btn{background:var(--paper);color:var(--ink);border:1px solid var(--hairline);font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;padding:8px 12px;cursor:pointer;transition:all .15s;text-transform:uppercase;border-radius:7px;display:inline-flex;align-items:center;gap:6px;min-height:34px}
  .mini-btn:hover{color:var(--orange);border-color:var(--orange);background:var(--raised)}
  .mini-btn:focus-visible{outline:none;box-shadow:var(--ring)}
  .mini-btn:disabled{opacity:.4;cursor:not-allowed}

  /* single reading pane */
  .read-pane{min-height:280px;max-height:560px;overflow-y:auto;padding:18px 20px;-webkit-overflow-scrolling:touch}
  .read-pane .placeholder{color:var(--soft);font-style:italic;font-family:'Lora',serif;font-size:14.5px;line-height:1.5;display:flex;align-items:center;justify-content:center;min-height:220px;text-align:center;opacity:.85;padding:0 6px}
  .sk-line{height:10px;background:linear-gradient(90deg,var(--sunken),var(--hairline),var(--sunken));background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px;margin:14px 0}
  .sk-line:nth-child(1){width:55%}.sk-line:nth-child(2){width:88%}.sk-line:nth-child(3){width:72%}.sk-line:nth-child(4){width:90%}.sk-line:nth-child(5){width:40%}
  .sk-line:nth-child(2){animation-delay:.1s}.sk-line:nth-child(3){animation-delay:.2s}.sk-line:nth-child(4){animation-delay:.3s}.sk-line:nth-child(5){animation-delay:.4s}
  @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

  /* status line (errors / bad input) */
  #status-line{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--err);padding:0 20px 14px;display:none}
  #status-line.show{display:block}

  /* markdown */
  .md h1,.md h2,.md h3,.md h4,.md h5,.md h6{color:var(--ink);font-weight:700;letter-spacing:-.02em;margin:16px 0 7px;line-height:1.22}
  .md h1{font-size:25px}.md h2{font-size:20px}.md h3{font-size:18px}.md h4{font-size:15.5px}
  .md h1:first-child,.md h2:first-child{margin-top:0}
  .md p{font-family:'Lora',serif;color:var(--body-ink);margin:9px 0;line-height:1.62;font-size:15px}
  .md ul,.md ol{margin:9px 0 9px 22px;font-family:'Lora',serif;color:var(--body-ink);font-size:15px}
  .md li{margin:4px 0;line-height:1.55}
  .md a{color:var(--orange);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--hairline)}
  .md a:hover{color:var(--orange-hover);text-decoration-color:var(--orange)}
  .md code{background:var(--sunken);border:1px solid var(--hairline);padding:1px 6px;font-family:'IBM Plex Mono',monospace;font-size:.86em;color:var(--ink);border-radius:5px}
  .md pre{background:var(--sunken);border:1px solid var(--hairline);padding:13px;overflow-x:auto;margin:11px 0;border-radius:var(--r-sm);font-size:12px;line-height:1.5}
  .md pre code{background:none;border:none;padding:0;color:var(--ink)}
  .md blockquote{border-left:3px solid var(--orange);padding:2px 0 2px 14px;margin:11px 0;color:var(--body-ink);font-style:italic;font-family:'Lora',serif}
  .md img{max-width:100%;height:auto;border-radius:var(--r-sm)}
  .md table{border-collapse:collapse;margin:11px 0;font-family:'IBM Plex Mono',monospace;font-size:12.5px;width:100%;display:block;overflow-x:auto}
  .md th,.md td{border:1px solid var(--hairline);padding:7px 10px;text-align:left;white-space:nowrap}
  .md th{background:var(--sunken)}
  .md hr{border:none;border-top:1px solid var(--hairline);margin:15px 0}

  /* flash */
  .flash{background:var(--err-bg);color:var(--err);border:1px solid var(--orange);padding:12px 16px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;margin-top:14px;border-radius:var(--r-sm);display:none;align-items:center;gap:10px}
  .flash.show{display:flex}
  .flash .x{margin-left:auto;cursor:pointer;opacity:.6;padding:2px 6px}
  .flash .x:hover{opacity:1}

  /* ── Bench ── */
  #bench-well{background:var(--raised);border:1px solid var(--hairline);border-radius:var(--r);padding:20px;margin-top:18px;box-shadow:var(--sh1)}
  #bench-well .label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;color:var(--soft);margin-bottom:14px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
  #bench-well .label::after{content:"";flex:1;height:1px;background:var(--hairline)}
  .bench-row{display:grid;grid-template-columns:170px 1fr 80px;align-items:center;gap:14px;padding:8px 0}
  .bench-row .who{font-family:'Inter',sans-serif;font-size:13.5px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bench-row .who .params{color:var(--soft);font-family:'IBM Plex Mono',monospace;font-size:11px;margin-left:6px;font-weight:400}
  .bench-track{height:10px;background:var(--sunken);border-radius:6px;overflow:hidden}
  .bench-fill{height:100%;border-radius:6px;background:var(--soft);width:0;transition:width .9s cubic-bezier(.4,0,.2,1)}
  .bench-row.win .bench-fill{background:linear-gradient(90deg,var(--orange),var(--orange-hover))}
  .bench-row.dim .bench-fill{opacity:.5}
  .bench-row .score{font-family:'IBM Plex Mono',monospace;font-size:13px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
  .bench-row.win .score{color:var(--orange);font-weight:600}
  #bench-well .note{font-family:'Lora',serif;font-style:italic;color:var(--body-ink);margin-top:12px;font-size:13.5px;line-height:1.5}

  /* footer */
  #footer-mono{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:var(--soft);border-top:1px solid var(--hairline);padding-top:16px;margin-top:24px;padding-bottom:8px;display:flex;flex-wrap:wrap;gap:3px 0;align-items:center}
  #footer-mono a{color:var(--ink);text-decoration:none;padding:3px;transition:color .15s}
  #footer-mono a:hover{color:var(--orange)}
  #footer-mono .sep{opacity:.4;margin:0 5px}

  /* ── Mobile ── */
  @media (max-width:600px){
    .wrap{padding:max(20px,var(--safe-t)) 14px 22px}
    #headline h1{font-size:38px}
    #lead{font-size:16px}
    .race-card{border-radius:var(--r)}
    .card-section{padding:15px}
    #input-row{flex-direction:column}
    #example-select,#run-btn{flex:1;width:100%;min-width:0}
    /* comparison strip stacks: pulpie / speedup / dripper */
    .cmp-strip{grid-template-columns:1fr;gap:10px;padding:14px}
    .cmp-center{flex-direction:row;gap:12px;min-width:0;padding:2px 0;justify-content:flex-start}
    .cmp-center .sp-num{font-size:24px}
    .cmp-center .sp-lbl{margin-top:0}
    .chip{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
    .chip-top{flex:1;min-width:120px}
    .chip .bar{flex:1;min-width:80px}
    .read-toolbar{padding:10px 14px}
    .read-pane{padding:16px 16px;min-height:240px}
    .bench-row{grid-template-columns:1fr 60px;gap:6px 12px}
    .bench-row .who{grid-column:1/3}
    .bench-row .bench-track{grid-column:1}
    .bench-row .score{grid-column:2}
  }
  @media (max-width:420px){
    #eyebrow{font-size:9.5px}
    .pill{font-size:9px;padding:5px 9px}
    #headline h1{font-size:32px}
    .sp-num{font-size:22px}
  }

  @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
</style>
</head>
<body>
<div class="wrap">
  <!-- Header -->
  <div id="header-block">
    <div class="topbar">
      <div id="eyebrow">FEYN · CONTENT EXTRACTION · ENCODER VS DECODER</div>
      <div class="pill connecting" id="conn-pill"><span class="dot"></span><span id="conn-text">CONNECTING</span></div>
    </div>
    <div id="headline"><h1>pulpie</h1></div>
    <div id="lead">Extract main content from HTML. One forward pass, not one token at a time.</div>
  </div>

  <!-- Unified race card -->
  <div class="race-card">
    <!-- input -->
    <div class="card-section">
      <div class="input-eyebrow">EXAMPLE PAGE</div>
      <div id="input-row">
        <select id="example-select" aria-label="Example page">
          <option value="paulgraham.com">paulgraham.com</option>
          <option value="nodejs.dev">nodejs.dev</option>
          <option value="protobuf.dev">protobuf.dev</option>
          <option value="istio.io">istio.io</option>
          <option value="tutorialspoint.com">tutorialspoint.com</option>
          <option value="builtin.com">builtin.com</option>
          <option value="bbc.com">bbc.com</option>
          <option value="theguardian.com">theguardian.com</option>
          <option value="wikipedia.org">wikipedia.org</option>
          <option value="stackoverflow.com">stackoverflow.com</option>
        </select>
        <button id="run-btn">
          <svg class="bolt" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L4.5 13.5H11l-1 8.5L19.5 10H13z"/></svg>
          <span class="spinner"></span>
          <span class="btn-label">EXTRACT →</span>
        </button>
      </div>
      <div id="html-accordion">
        <div class="acc-header" id="acc-toggle" role="button" tabindex="0" aria-expanded="false">
          <span class="chev"><span class="arw">▸</span>OR PASTE RAW HTML</span>
        </div>
        <div class="acc-body"><div class="acc-body-inner">
          <textarea id="custom-html" placeholder="<html>…</html>  (2 MB max; JS-rendered SPAs will come up empty — nothing static to extract)"></textarea>
          <div class="acc-hint">If set, this overrides the example dropdown. ⌘/Ctrl+Enter to run.</div>
        </div></div>
      </div>
    </div>

    <div class="card-divider"></div>

    <!-- comparison strip (both models, always visible) -->
    <div class="cmp-strip">
      <div class="chip pulpie" id="pulpie-chip">
        <div class="chip-top">
          <div class="chip-name"><span class="led"></span>PULPIE <b>210M · ENCODER</b></div>
          <div class="timer" id="pulpie-timer"></div>
        </div>
        <div class="bar"><div class="fill" id="pulpie-bar"></div></div>
      </div>
      <div class="cmp-center idle" id="cmp-center">
        <div class="sp-num" id="sp-num">—</div>
        <div class="sp-lbl" id="sp-lbl">× FASTER · ON THIS PAGE</div>
      </div>
      <div class="chip dripper" id="dripper-chip">
        <div class="chip-top">
          <div class="chip-name"><span class="led"></span>DRIPPER <b>0.6B · DECODER</b></div>
          <div class="timer" id="dripper-timer"></div>
        </div>
        <div class="bar"><div class="fill" id="dripper-bar"></div></div>
      </div>
    </div>

    <!-- toolbar: toggle + actions -->
    <div class="read-toolbar">
      <div class="toggle-seg" role="tablist" aria-label="Which model to read">
        <button data-model="pulpie" class="active" role="tab" aria-selected="true"><span class="led"></span>PULPIE</button>
        <button data-model="dripper" role="tab" aria-selected="false"><span class="led"></span>DRIPPER</button>
      </div>
      <div class="toolbar-spacer"></div>
      <button class="mini-btn" id="copy-btn">⧉ COPY MD</button>
      <button class="mini-btn" id="diff-btn">≠ DIFF</button>
    </div>

    <!-- single reading pane -->
    <div class="read-pane" id="read-pane">
      <div class="placeholder">One encoder forward pass over every block.</div>
    </div>
    <div id="status-line"></div>
  </div>

  <div class="flash" id="flash"><span id="flash-text"></span><span class="x" id="flash-x">✕</span></div>

  <!-- Bench -->
  <div id="bench-well">
    <div class="label">WEBMAINBENCH · 6,647 PAGES · ROUGE-5 F1</div>
    <div class="bench-row win"><div class="who">pulpie orange-small<span class="params">210M</span></div><div class="bench-track"><div class="bench-fill" data-pct="86.2"></div></div><div class="score">0.862</div></div>
    <div class="bench-row"><div class="who">dripper (MinerU-HTML)<span class="params">0.6B</span></div><div class="bench-track"><div class="bench-fill" data-pct="86.4"></div></div><div class="score">0.864</div></div>
    <div class="bench-row dim"><div class="who">trafilatura<span class="params">—</span></div><div class="bench-track"><div class="bench-fill" data-pct="61.9"></div></div><div class="score">0.619</div></div>
    <div class="note">Same quality. ~$7,900 to clean 1B pages, versus ~$159,000. <span style="color:var(--soft);font-family:'IBM Plex Mono',monospace;font-style:normal;font-size:11px;letter-spacing:.05em">— 13.7 pg/s on L4 vs 0.68 pg/s</span></div>
  </div>

  <!-- Footer -->
  <div id="footer-mono">
    <span class="sep">pip install pulpie</span><span class="sep">·</span>
    <a href="https://github.com/feyninc/pulpie">GITHUB</a><span class="sep">·</span>
    <a href="https://huggingface.co/feyninc/pulpie-orange-small">MODEL</a><span class="sep">·</span>
    <a href="https://github.com/feyninc/pulpie/blob/main/BENCHMARKS.md">BENCHMARKS</a><span class="sep">·</span>
    <a href="https://usefeyn.com/blog/pulpie-pareto-optimal-models-for-cleaning-the-web/">BLOG</a><span class="sep">·</span>
    BUILT BY <a href="https://usefeyn.com">FEYN</a>
  </div>
</div>

<script type="module">
  import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
  import { marked } from "https://cdn.jsdelivr.net/npm/marked@12/lib/marked.esm.js";
  import DOMPurify from "https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.es.mjs";
  marked.setOptions({ gfm:true, breaks:false, headerIds:false, mangle:false });

  const $ = (id) => document.getElementById(id);
  const runBtn=$("run-btn"), btnLabel=runBtn.querySelector(".btn-label");
  const exampleSelect=$("example-select"), customHtml=$("custom-html");
  const readPane=$("read-pane");
  const pulpieChip=$("pulpie-chip"), dripperChip=$("dripper-chip");
  const pulpieTimer=$("pulpie-timer"), dripperTimer=$("dripper-timer");
  const pulpieBar=$("pulpie-bar"), dripperBar=$("dripper-bar");
  const cmpCenter=$("cmp-center"), spNum=$("sp-num"), spLbl=$("sp-lbl");
  const statusLine=$("status-line");
  const flashEl=$("flash"), flashText=$("flash-text");
  const connPill=$("conn-pill"), connText=$("conn-text");
  const copyBtn=$("copy-btn"), diffBtn=$("diff-btn");

  const PLACEHOLDERS = {
    pulpie:'<div class="placeholder">One encoder forward pass over every block.</div>',
    dripper:'<div class="placeholder">The same labels, one token at a time.</div>',
  };
  const SKEL = '<div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div>';
  let lastMd = { pulpie:"", dripper:"" };
  let running = false, currentModel = "pulpie";

  function renderMarkdown(md){ if(!md) return ""; return DOMPurify.sanitize(marked.parse(md)); }
  function renderRead(){
    const md = lastMd[currentModel];
    if(md) readPane.innerHTML = renderMarkdown(md);
    else if(running) readPane.innerHTML = SKEL;
    else readPane.innerHTML = PLACEHOLDERS[currentModel];
  }
  function setRunning(on){
    running = on;
    runBtn.classList.toggle("running", on); runBtn.disabled=on;
    btnLabel.textContent = on ? "EXTRACTING…" : "EXTRACT →";
    if(on || lastMd[currentModel]) renderRead();
  }
  function showError(msg){ flashText.textContent=msg; flashEl.classList.add("show"); }
  function clearError(){ flashEl.classList.remove("show"); }
  function setStatus(html){ if(!html){ statusLine.classList.remove("show"); statusLine.innerHTML=""; return; } statusLine.innerHTML=html; statusLine.classList.add("show"); }
  function setBar(bar, pct, indeterminate){
    bar.classList.toggle("indeterminate", !!indeterminate);
    if(indeterminate){ bar.style.right=""; }
    else { bar.style.right = (100-Math.max(0,Math.min(100,pct)))+"%"; }
  }
  function setSpeedupIdle(){ cmpCenter.classList.add("idle"); spNum.textContent="—"; spLbl.textContent="× FASTER · ON THIS PAGE"; }
  function setSpeedup(num){
    cmpCenter.classList.remove("idle");
    spNum.textContent = num;
    spLbl.textContent = "× FASTER · ON THIS PAGE";
  }
  // Pull the speedup token ("12x" / "9.4x") out of the backend's verdict HTML:
  //  <div ...>PULPIE 0.42s → DRIPPER 2.8s · <span ...>12x ON THIS PAGE</span></div>
  function applyVerdict(v){
    if(!v){ return; }
    const m = v.match(/<span[^>]*>\s*([\d.]+x)\s+ON THIS PAGE\s*<\/span>/);
    if(m){ setSpeedup(m[1]); setStatus(""); }
    else { setSpeedupIdle(); setStatus(v); } // plain-text verdict (bad input / error)
  }

  function resetPanes(){
    lastMd={pulpie:"",dripper:""};
    pulpieChip.classList.remove("live"); dripperChip.classList.remove("live");
    pulpieTimer.innerHTML=""; dripperTimer.innerHTML="";
    setBar(pulpieBar,0); setBar(dripperBar,0);
    setSpeedupIdle(); setStatus(""); clearError();
    renderRead();
  }

  function normalizeRecord(d){
    if(!d) return null;
    if(typeof d==="object" && !Array.isArray(d) && "pulpie_md" in d) return d;
    if(Array.isArray(d)){ for(const it of d){ if(it && typeof it==="object" && "pulpie_md" in it) return it; } }
    return null;
  }

  function applyRecord(rec){
    if(!rec) return;
    if(rec.pulpie_md!==undefined && rec.pulpie_md!==""){
      lastMd.pulpie=rec.pulpie_md;
      pulpieChip.classList.add("live");
      setBar(pulpieBar,100);
      setTimeout(()=>pulpieChip.classList.remove("live"),900);
      if(currentModel==="pulpie") renderRead();
    }
    if(rec.dripper_md!==undefined && rec.dripper_md!==""){
      lastMd.dripper=rec.dripper_md;
      dripperChip.classList.add("live");
      if(currentModel==="dripper") renderRead();
    }
    if(rec.pulpie_timer!==undefined) pulpieTimer.innerHTML=rec.pulpie_timer;
    if(rec.dripper_timer!==undefined) dripperTimer.innerHTML=rec.dripper_timer;
    // dripper progress: indeterminate while streaming, full when the verdict lands
    if(rec.dripper_md && !(rec.verdict)){ setBar(dripperBar,0,true); }
    if(rec.verdict!==undefined && rec.verdict!==""){
      applyVerdict(rec.verdict);
      dripperChip.classList.remove("live");
      setBar(dripperBar,100);
    }
  }

  // ── Connect ──
  let client=null;
  try {
    client = await Client.connect(window.location.origin, { events:["data","status"] });
    connPill.classList.remove("connecting"); connText.textContent="READY";
  } catch(e){
    connPill.classList.remove("connecting"); connPill.classList.add("error"); connText.textContent="OFFLINE";
    showError("Could not connect to backend: " + (e?.message||e));
  }

  // ── Run ──
  async function run(){
    if(!client){ showError("Backend not connected. Reload the page."); return; }
    resetPanes(); setRunning(true);
    const params = { example_name: exampleSelect.value, custom_html: customHtml.value.trim() };
    try {
      const submission = client.submit("/race", params);
      let sawData=false;
      for await (const msg of submission){
        if(msg.type==="status"){
          if(msg.stage==="pending" && msg.position!=null){
            setStatus('<span style="color:var(--soft)">QUEUED · POSITION '+msg.position+'</span>');
          } else if(msg.stage==="generating"){ if(!sawData) setStatus(""); }
          continue;
        }
        if(msg.type==="data"){ sawData=true; applyRecord(normalizeRecord(msg.data)); }
      }
      if(!sawData) showError("Backend returned no data. Check the /race endpoint and Space logs.");
    } catch(e){ showError("Race failed: " + (e?.message||e)); }
    finally { setRunning(false); }
  }
  runBtn.addEventListener("click", run);
  exampleSelect.addEventListener("keydown", e=>{ if(e.key==="Enter"){ e.preventDefault(); run(); } });
  customHtml.addEventListener("keydown", e=>{ if(e.key==="Enter" && (e.metaKey||e.ctrlKey)){ e.preventDefault(); run(); } });

  // ── Accordion ──
  const acc=$("html-accordion"), accToggle=$("acc-toggle");
  accToggle.addEventListener("click", ()=>{ const o=acc.classList.toggle("open"); accToggle.setAttribute("aria-expanded", o); });
  accToggle.addEventListener("keydown", e=>{ if(e.key==="Enter"||e.key===" "){ e.preventDefault(); accToggle.click(); } });

  // ── Model toggle ──
  document.querySelectorAll(".toggle-seg button").forEach(b=>{
    b.addEventListener("click", ()=>{
      currentModel = b.getAttribute("data-model");
      document.querySelectorAll(".toggle-seg button").forEach(x=>{ const on=x===b; x.classList.toggle("active",on); x.setAttribute("aria-selected",on); });
      renderRead();
    });
  });

  // ── Flash dismiss ──
  $("flash-x").addEventListener("click", clearError);

  // ── Copy ──
  copyBtn.addEventListener("click", async ()=>{
    const text = lastMd[currentModel];
    if(!text) return;
    try { await navigator.clipboard.writeText(text); copyBtn.textContent="✓ COPIED"; }
    catch { copyBtn.textContent="COPY FAILED"; }
    setTimeout(()=>(copyBtn.textContent="⧉ COPY MD"), 1400);
  });

  // ── Diff (against the other model, shown in the single reading pane) ──
  let diffOpen=false, diffForModel=null;
  diffBtn.addEventListener("click", ()=>{
    if(diffOpen && diffForModel===currentModel){ renderRead(); diffOpen=false; diffBtn.textContent="≠ DIFF"; return; }
    const other = currentModel==="pulpie" ? "dripper" : "pulpie";
    if(!lastMd[currentModel] || !lastMd[other]) return;
    const a=lastMd.pulpie, b=lastMd.dripper, same=a.trim()===b.trim();
    if(same){
      readPane.innerHTML = renderMarkdown(lastMd[currentModel]) +
        '<div style="font-family:\'IBM Plex Mono\',monospace;font-size:11px;color:var(--green);margin-top:14px;border-top:1px solid var(--hairline);padding-top:10px;">✓ IDENTICAL OUTPUTS — PULPIE &amp; DRIPPER MATCH</div>';
      diffBtn.textContent="IDENTICAL";
    } else {
      readPane.innerHTML = '<pre style="white-space:pre-wrap;font-family:\'IBM Plex Mono\',monospace;font-size:12px;line-height:1.5;background:var(--sunken);border:1px solid var(--hairline);padding:12px;border-radius:8px;">'+escapeHtml(lineDiff(a,b))+'</pre>';
      diffBtn.textContent="↩ BACK";
    }
    diffOpen=true; diffForModel=currentModel;
  });

  function lineDiff(a,b){
    const la=a.split("\n"), lb=b.split("\n"), n=la.length, m=lb.length;
    const dp=Array.from({length:n+1}, ()=>new Array(m+1).fill(0));
    for(let i=n-1;i>=0;i--) for(let j=m-1;j>=0;j--) dp[i][j]=la[i]===lb[j]?dp[i+1][j+1]+1:Math.max(dp[i+1][j],dp[i][j+1]);
    let i=0,j=0,out=[];
    while(i<n&&j<m){ if(la[i]===lb[j]){ out.push("  "+la[i]); i++; j++; } else if(dp[i+1][j]>=dp[i][j+1]){ out.push("- "+la[i]); i++; } else { out.push("+ "+lb[j]); j++; } }
    while(i<n) out.push("- "+la[i++]); while(j<m) out.push("+ "+lb[j++]);
    return out.slice(-400).join("\n");
  }
  function escapeHtml(s){ return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"); }

  // ── Animate benchmark bars on first paint ──
  requestAnimationFrame(()=>{ setTimeout(()=>{
    requestAnimationFrame(()=>{ document.querySelectorAll(".bench-fill").forEach(f=>{ f.style.width=(f.getAttribute("data-pct")||0)+"%"; }); });
  }, 120); });
</script>
</body>
</html>