Spaces:
Running on Zero
Running on Zero
| <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;animation-iteration-count:1;transition-duration:.01ms}} | |
| </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 & 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,"&").replace(/</g,"<").replace(/>/g,">"); } | |
| // ── 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> |