LazyReader - a TL;DR machine that runs entirely in your browser (no servers, no keys, no excuses)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LazyReader - TL;DR anything, right in your browser</title>
<meta name="description" content="LazyReader summarizes long articles locally in your browser with open-source AI. No accounts, no API keys, no servers. Paste text, get a TL;DR.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="wrap">
  <header>
    <h1>LazyReader<span class="zzz">💤</span></h1>
    <p class="tagline">Too long; didn't read? Paste it. We'll read it for you.<br>
    <strong>100% local, open-source AI.</strong> Your text never leaves this tab.</p>
  </header>

  <section class="card">
    <label for="input">Drop your wall of text here</label>
    <textarea id="input" rows="10" placeholder="Paste a long article, essay, Terms & Conditions, that 40-page PDF your professor assigned..."></textarea>
    <div class="row">
      <div class="wordcount" id="wordcount">0 words</div>
      <div class="length-picker">
        TL;DR size:
        <select id="length">
          <option value="short">One breath</option>
          <option value="medium" selected>A sip of coffee</option>
          <option value="long">Still lazy, but thorough</option>
        </select>
      </div>
      <button id="go" disabled>Summarize for me 😴</button>
    </div>
  </section>

  <section class="card hidden" id="statuscard">
    <div id="status">Loading the brain (one-time download)...</div>
    <div class="bar"><div id="barfill"></div></div>
  </section>

  <section class="card hidden" id="resultcard">
    <h2>Your TL;DR ☕</h2>
    <div id="output"></div>
    <button id="copy">Copy it and go back to bed</button>
  </section>

  <footer>
    <p>Built with <a href="https://huggingface.co/docs/transformers.js" target="_blank" rel="noopener">Transformers.js</a> and the open-weight
    <a href="https://huggingface.co/sshleifer/distilbart-cnn-12-6" target="_blank" rel="noopener">DistilBART</a> model.
    No accounts. No tracking. No servers..</p>
  </footer>
</main>
<script type="module" src="app.js"></script>
</body>
</html>

import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';

env.allowLocalModels = false;

const input = document.getElementById('input');
const go = document.getElementById('go');
const wc = document.getElementById('wordcount');
const statuscard = document.getElementById('statuscard');
const status = document.getElementById('status');
const barfill = document.getElementById('barfill');
const resultcard = document.getElementById('resultcard');
const output = document.getElementById('output');
const copyBtn = document.getElementById('copy');

const LENGTHS = {
  short:  { max: 60,  min: 20 },
  medium: { max: 140, min: 50 },
  long:   { max: 280, min: 110 },
};

let summarizer = null;

input.addEventListener('input', () => {
  const words = input.value.trim().split(/\s+/).filter(Boolean).length;
  wc.textContent = words + ' words';
  go.disabled = words < 30;
  if (words > 0 && words < 30) wc.textContent += ' (need at least 30 - go on, paste something longer)';
});

async function getSummarizer() {
  if (summarizer) return summarizer;
  statuscard.classList.remove('hidden');
  status.textContent = 'Waking up the brain (one-time download, ~100 MB)...';
  summarizer = await pipeline('summarization', 'Xenova/distilbart-cnn-12-6', {
    progress_callback: (p) => {
      if (p.status === 'progress' && p.total) {
        const pct = Math.round((p.loaded / p.total) * 100);
        barfill.style.width = pct + '%';
        status.textContent = 'Downloading the brain... ' + pct + '% (' + p.file + ')';
      } else if (p.status === 'ready') {
        status.textContent = 'Brain loaded. Reading so you don\'t have to...';
      }
    },
  });
  return summarizer;
}

function chunkText(text, maxWords = 550) {
  const paras = text.split(/\n+/).map(s => s.trim()).filter(Boolean);
  const chunks = [];
  let cur = [], curWords = 0;
  for (const p of paras) {
    const w = p.split(/\s+/).length;
    if (curWords + w > maxWords && cur.length) { chunks.push(cur.join(' ')); cur = []; curWords = 0; }
    if (w > maxWords) {
      const words = p.split(/\s+/);
      for (let i = 0; i < words.length; i += maxWords) chunks.push(words.slice(i, i + maxWords).join(' '));
    } else { cur.push(p); curWords += w; }
  }
  if (cur.length) chunks.push(cur.join(' '));
  return chunks;
}

go.addEventListener('click', async () => {
  const text = input.value.trim();
  if (!text) return;
  go.disabled = true;
  resultcard.classList.add('hidden');
  try {
    const sum = await getSummarizer();
    const chunks = chunkText(text);
    const len = LENGTHS[document.getElementById('length').value];
    const partials = [];
    for (let i = 0; i < chunks.length; i++) {
      status.textContent = chunks.length > 1
        ? 'Reading part ' + (i + 1) + ' of ' + chunks.length + '...'
        : 'Reading so you don\'t have to...';
      const out = await sum(chunks[i], { max_new_tokens: len.max, min_new_tokens: len.min });
      partials.push(out[0].summary_text.trim());
      barfill.style.width = Math.round(((i + 1) / chunks.length) * 100) + '%';
    }
    let final = partials.join(' ');
    if (chunks.length > 3 && final.split(/\s+/).length > len.max * 1.5) {
      status.textContent = 'Condensing the condensation...';
      const out = await sum(final, { max_new_tokens: len.max, min_new_tokens: len.min });
      final = out[0].summary_text.trim();
    }
    output.textContent = final;
    resultcard.classList.remove('hidden');
    statuscard.classList.add('hidden');
    barfill.style.width = '0%';
  } catch (e) {
    status.textContent = 'Even the AI got lazy and errored out: ' + e.message;
  } finally {
    go.disabled = false;
  }
});

copyBtn.addEventListener('click', async () => {
  await navigator.clipboard.writeText(output.textContent);
  copyBtn.textContent = 'Copied. Sweet dreams.';
  setTimeout(() => copyBtn.textContent = 'Copy it and go back to bed', 2000);
});