Spaces:

Okcan
/

text-analyzer

Running

File size: 20,145 Bytes

ca3db9e

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Readability & Tone Analyzer</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: #0f0f0f;
      color: #e0e0e0;
      min-height: 100vh;
      padding: 32px 16px;
    }
    .container { max-width: 820px; margin: 0 auto; }
    h1 {
      font-size: 1.8rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 6px;
    }
    .subtitle { color: #888; font-size: 0.95rem; margin-bottom: 32px; }

    .card {
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 20px;
    }
    label {
      display: block;
      font-size: 0.85rem;
      color: #aaa;
      margin-bottom: 8px;
      font-weight: 500;
    }
    input, textarea {
      width: 100%;
      background: #111;
      border: 1px solid #333;
      border-radius: 8px;
      color: #e0e0e0;
      font-size: 0.95rem;
      padding: 12px 14px;
      outline: none;
      transition: border-color 0.2s;
      font-family: inherit;
    }
    input:focus, textarea:focus { border-color: #2eb87a; }
    textarea { resize: vertical; min-height: 180px; line-height: 1.6; }

    .token-hint { font-size: 0.78rem; color: #666; margin-top: 6px; }
    .token-hint a { color: #2eb87a; text-decoration: none; }
    .token-hint a:hover { text-decoration: underline; }

    button {
      background: #2eb87a;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 12px 28px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
      width: 100%;
      margin-top: 8px;
    }
    button:hover { background: #26a06a; }
    button:disabled { background: #444; cursor: not-allowed; }

    .status {
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 0.9rem;
      margin-top: 12px;
      display: none;
    }
    .status.info    { background: #0e2018; color: #6ee4a8; border: 1px solid #1a4a30; display: block; }
    .status.error   { background: #2a1a1a; color: #f57a7a; border: 1px solid #6a2a2a; display: block; }
    .status.success { background: #0e2018; color: #6ee4a8; border: 1px solid #2a6a48; display: block; }

    .results { display: none; }
    .results.visible { display: block; }

    /* section title */
    .section-title {
      font-size: 0.78rem;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      font-weight: 600;
      margin-bottom: 14px;
    }

    /* ── Summary card ── */
    #summaryCard { margin-bottom: 20px; }
    #summaryOut { font-size: 0.97rem; line-height: 1.7; color: #ddd; }

    /* ── Tone card ── */
    #toneCard { margin-bottom: 20px; }
    .tone-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
    .tone-chip {
      background: #222;
      border: 1px solid #333;
      border-radius: 20px;
      padding: 5px 14px;
      font-size: 0.85rem;
      color: #bbb;
      position: relative;
      overflow: hidden;
      min-width: 100px;
      text-align: center;
    }
    .tone-chip .chip-fill {
      position: absolute;
      left: 0; top: 0; bottom: 0;
      background: #2eb87a22;
      border-radius: 20px;
      transition: width 0.6s ease;
    }
    .tone-chip.top-tone {
      border-color: #2eb87a;
      color: #6ee4a8;
      font-weight: 600;
    }
    .tone-chip .chip-label { position: relative; z-index: 1; }
    .tone-chip .chip-pct { font-size: 0.72rem; color: #888; margin-left: 4px; position: relative; z-index: 1; }
    .tone-chip.top-tone .chip-pct { color: #4cad88; }

    /* ── Readability card ── */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 12px;
      margin-bottom: 20px;
    }
    .stat-box {
      background: #111;
      border: 1px solid #2a2a2a;
      border-radius: 8px;
      padding: 14px 16px;
    }
    .stat-box .stat-val {
      font-size: 1.5rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
      margin-bottom: 4px;
    }
    .stat-box .stat-lbl { font-size: 0.78rem; color: #777; }

    /* Flesch meter */
    .meter-wrap { margin-top: 4px; }
    .meter-label-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.82rem;
      color: #888;
      margin-bottom: 6px;
    }
    .meter-label-row b { color: #e0e0e0; }
    .meter-track {
      height: 10px;
      border-radius: 5px;
      background: #222;
      overflow: hidden;
      position: relative;
    }
    .meter-fill {
      height: 100%;
      border-radius: 5px;
      transition: width 0.7s ease, background 0.7s ease;
    }
    .meter-level {
      margin-top: 8px;
      font-size: 0.88rem;
      font-weight: 600;
    }

    /* ── Suggestions card ── */
    .suggestion-list { list-style: none; }
    .suggestion-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid #222;
      font-size: 0.92rem;
      color: #ccc;
      line-height: 1.5;
    }
    .suggestion-list li:last-child { border-bottom: none; }
    .suggestion-list .badge {
      flex-shrink: 0;
      font-size: 0.72rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
      margin-top: 2px;
    }
    .badge.warn  { background: #3a2800; color: #f0a832; border: 1px solid #6a4800; }
    .badge.good  { background: #0e2018; color: #6ee4a8; border: 1px solid #2a5a38; }
    .badge.count { background: #1e1e2e; color: #9a9aff; border: 1px solid #3a3a6a; }

    .spinner {
      display: inline-block;
      width: 14px; height: 14px;
      border: 2px solid #555;
      border-top-color: #6ee4a8;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      margin-right: 8px;
      vertical-align: middle;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    @media (max-width: 600px) {
      h1 { font-size: 1.4rem; }
      .stats-grid { grid-template-columns: 1fr 1fr; }
    }
  </style>
</head>
<body>
<div class="container">
  <h1>📝 Text Readability & Tone Analyzer</h1>
  <p class="subtitle">Paste any text — get a summary, tone classification, readability score, and writing suggestions.</p>

  <div class="card">
    <label>HF API Token</label>
    <input type="password" id="hfToken" placeholder="hf_..." autocomplete="off" />
    <p class="token-hint">
      Free token at <a href="https://huggingface.co/settings/tokens" target="_blank">huggingface.co/settings/tokens</a>
      — Read access is enough. Used for summarization and tone classification.
    </p>
  </div>

  <div class="card">
    <label>Your Text</label>
    <textarea id="textInput" placeholder="Paste a blog post, essay, email, report — anything. Minimum 20 words.&#10;&#10;Tip: longer texts produce more accurate results."></textarea>
    <button id="analyzeBtn" onclick="analyze()">Analyze Text</button>
    <div class="status" id="status"></div>
  </div>

  <!-- RESULTS -->
  <div class="results" id="results">

    <!-- Summary -->
    <div class="card" id="summaryCard">
      <div class="section-title">Summary</div>
      <p id="summaryOut">—</p>
    </div>

    <!-- Tone -->
    <div class="card" id="toneCard">
      <div class="section-title">Tone Classification</div>
      <div class="tone-chips" id="toneChips"></div>
    </div>

    <!-- Readability stats -->
    <div class="card">
      <div class="section-title">Readability Statistics</div>
      <div class="stats-grid" id="statsGrid">
        <div class="stat-box"><div class="stat-val" id="statWords">—</div><div class="stat-lbl">Words</div></div>
        <div class="stat-box"><div class="stat-val" id="statSentences">—</div><div class="stat-lbl">Sentences</div></div>
        <div class="stat-box"><div class="stat-val" id="statAvgWPS">—</div><div class="stat-lbl">Avg Words / Sentence</div></div>
        <div class="stat-box"><div class="stat-val" id="statSyllables">—</div><div class="stat-lbl">Syllables</div></div>
      </div>

      <!-- Flesch meter -->
      <div class="meter-wrap">
        <div class="meter-label-row">
          <span>Flesch Reading Ease</span>
          <span><b id="fleschScore">—</b> / 100</span>
        </div>
        <div class="meter-track">
          <div class="meter-fill" id="meterFill" style="width:0%"></div>
        </div>
        <div class="meter-level" id="meterLevel"></div>
      </div>
    </div>

    <!-- Writing suggestions -->
    <div class="card">
      <div class="section-title">Writing Suggestions</div>
      <ul class="suggestion-list" id="suggestionList"></ul>
    </div>

  </div><!-- /results -->
</div>

<script>
/* ───────────────────────────── helpers ───────────────────────────── */

function setStatus(msg, type) {
  const el = document.getElementById('status');
  el.innerHTML = msg;
  el.className = 'status ' + type;
}

async function hfInference(token, model, inputs, params = {}) {
  const res = await fetch(`https://api-inference.huggingface.co/models/${model}`, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ inputs, parameters: params })
  });
  if (!res.ok) {
    const err = await res.text();
    throw new Error(`HF API error ${res.status}: ${err.slice(0, 200)}`);
  }
  return res.json();
}

function chunkText(text, wordLimit = 800) {
  const words = text.split(/\s+/);
  const chunks = [];
  for (let i = 0; i < words.length; i += wordLimit) {
    chunks.push(words.slice(i, i + wordLimit).join(' '));
  }
  return chunks;
}

/* ───────────────────────────── readability (pure JS) ───────────────────────────── */

function countSyllables(word) {
  word = word.toLowerCase().replace(/[^a-z]/g, '');
  if (!word) return 0;
  if (word.length <= 3) return 1;
  // remove trailing silent e
  word = word.replace(/e$/, '');
  const matches = word.match(/[aeiouy]{1,2}/g);
  return matches ? Math.max(1, matches.length) : 1;
}

function computeReadability(text) {
  // sentences: split on . ! ?
  const sentences = text.split(/[.!?]+/).map(s => s.trim()).filter(s => s.length > 0);
  const sentenceCount = Math.max(sentences.length, 1);

  // words
  const words = text.match(/\b[a-zA-Z']+\b/g) || [];
  const wordCount = Math.max(words.length, 1);

  // syllables
  let syllableCount = 0;
  for (const w of words) syllableCount += countSyllables(w);

  const avgWPS = wordCount / sentenceCount;
  const avgSPW = syllableCount / wordCount;

  // Flesch Reading Ease = 206.835 - 1.015*(words/sentences) - 84.6*(syllables/words)
  let flesch = 206.835 - 1.015 * avgWPS - 84.6 * avgSPW;
  flesch = Math.min(100, Math.max(0, Math.round(flesch * 10) / 10));

  return { wordCount, sentenceCount, syllableCount, avgWPS: Math.round(avgWPS * 10) / 10, flesch };
}

function fleschLabel(score) {
  if (score >= 90) return { label: 'Very Easy', color: '#4caf50' };
  if (score >= 70) return { label: 'Easy',      color: '#8bc34a' };
  if (score >= 50) return { label: 'Medium',    color: '#ffc107' };
  if (score >= 30) return { label: 'Difficult', color: '#ff9800' };
  return              { label: 'Very Difficult', color: '#f44336' };
}

/* ───────────────────────────── writing suggestions (pure JS) ───────────────────────────── */

function buildSuggestions(text, stats) {
  const suggestions = [];
  const words = text.match(/\b[a-zA-Z']+\b/g) || [];
  const wordCount = words.length;

  // 1. Passive voice: was/were/been + past participle (simple heuristic)
  const passivePattern = /\b(was|were|been|is|are|am|being)\s+\w+ed\b/gi;
  const passiveMatches = text.match(passivePattern) || [];
  const passiveCount = passiveMatches.length;
  if (passiveCount === 0) {
    suggestions.push({ badge: 'good', text: 'No passive voice patterns detected — active voice throughout.' });
  } else {
    suggestions.push({
      badge: 'warn',
      text: `Passive voice: ${passiveCount} instance${passiveCount > 1 ? 's' : ''} detected (e.g. "was done", "were written"). Consider rewriting in active voice for clarity.`
    });
  }

  // 2. Long sentences (> 30 words)
  const sentences = text.split(/[.!?]+/).map(s => s.trim()).filter(s => s.length > 0);
  const longSentences = sentences.filter(s => s.split(/\s+/).length > 30);
  const longCount = longSentences.length;
  if (longCount === 0) {
    suggestions.push({ badge: 'good', text: 'No overly long sentences (>30 words) found — great sentence variety.' });
  } else {
    suggestions.push({
      badge: 'warn',
      text: `Long sentences: ${longCount} sentence${longCount > 1 ? 's' : ''} exceed 30 words. Breaking them up can improve readability.`
    });
  }

  // 3. Filler words
  const fillers = ['very', 'really', 'just', 'quite', 'basically', 'literally', 'actually'];
  let fillerCount = 0;
  const foundFillers = [];
  for (const filler of fillers) {
    const re = new RegExp(`\\b${filler}\\b`, 'gi');
    const hits = (text.match(re) || []).length;
    if (hits > 0) { fillerCount += hits; foundFillers.push(`"${filler}" ×${hits}`); }
  }
  if (fillerCount === 0) {
    suggestions.push({ badge: 'good', text: 'No filler words detected — concise and direct writing.' });
  } else {
    suggestions.push({
      badge: 'count',
      text: `Filler words: ${fillerCount} found — ${foundFillers.join(', ')}. Removing them tightens your prose.`
    });
  }

  // 4. Reading level note
  const { flesch } = stats;
  const lvl = fleschLabel(flesch);
  if (flesch >= 70) {
    suggestions.push({ badge: 'good', text: `Reading level: ${lvl.label} (Flesch ${flesch}). Your text is accessible to a broad audience.` });
  } else if (flesch >= 50) {
    suggestions.push({ badge: 'count', text: `Reading level: ${lvl.label} (Flesch ${flesch}). Suitable for high-school/college readers; simplify where possible if targeting a general audience.` });
  } else {
    suggestions.push({ badge: 'warn', text: `Reading level: ${lvl.label} (Flesch ${flesch}). Text is complex — consider shorter sentences and simpler vocabulary.` });
  }

  return suggestions;
}

/* ───────────────────────────── API calls ───────────────────────────── */

async function summarize(token, text) {
  const chunks = chunkText(text, 800).slice(0, 3);
  const summaries = [];
  for (const chunk of chunks) {
    const res = await hfInference(token, 'facebook/bart-large-cnn', chunk, {
      max_length: 160, min_length: 40, do_sample: false
    });
    if (res[0]?.summary_text) summaries.push(res[0].summary_text);
  }
  return summaries.join(' ') || 'Could not generate summary.';
}

async function classifyTone(token, text) {
  const labels = ['formal', 'casual', 'persuasive', 'informative', 'emotional', 'humorous'];
  // use first 1000 chars for zero-shot (model limit)
  const snippet = text.slice(0, 1000);
  const res = await hfInference(token, 'facebook/bart-large-mnli', snippet, {
    candidate_labels: labels,
    multi_label: false
  });
  // res has .labels and .scores arrays
  if (!res.labels) throw new Error('Unexpected tone API response.');
  return res.labels.map((l, i) => ({ label: l, score: res.scores[i] }));
}

/* ───────────────────────────── render helpers ───────────────────────────── */

function renderStats(stats) {
  document.getElementById('statWords').textContent = stats.wordCount.toLocaleString();
  document.getElementById('statSentences').textContent = stats.sentenceCount.toLocaleString();
  document.getElementById('statAvgWPS').textContent = stats.avgWPS;
  document.getElementById('statSyllables').textContent = stats.syllableCount.toLocaleString();

  const lvl = fleschLabel(stats.flesch);
  document.getElementById('fleschScore').textContent = stats.flesch;
  const fill = document.getElementById('meterFill');
  fill.style.width = stats.flesch + '%';
  fill.style.background = lvl.color;
  const levelEl = document.getElementById('meterLevel');
  levelEl.textContent = lvl.label;
  levelEl.style.color = lvl.color;
}

function renderTone(toneData) {
  const container = document.getElementById('toneChips');
  container.innerHTML = '';
  const sorted = [...toneData].sort((a, b) => b.score - a.score);
  const topLabel = sorted[0].label;
  for (const item of sorted) {
    const pct = Math.round(item.score * 100);
    const div = document.createElement('div');
    div.className = 'tone-chip' + (item.label === topLabel ? ' top-tone' : '');
    div.innerHTML = `
      <div class="chip-fill" style="width:${pct}%"></div>
      <span class="chip-label">${item.label}</span>
      <span class="chip-pct">${pct}%</span>
    `;
    container.appendChild(div);
  }
}

function renderSuggestions(suggestions) {
  const ul = document.getElementById('suggestionList');
  ul.innerHTML = '';
  for (const s of suggestions) {
    const li = document.createElement('li');
    li.innerHTML = `<span class="badge ${s.badge}">${s.badge.toUpperCase()}</span><span>${s.text}</span>`;
    ul.appendChild(li);
  }
}

/* ───────────────────────────── main entry ───────────────────────────── */

async function analyze() {
  const token = document.getElementById('hfToken').value.trim();
  const text  = document.getElementById('textInput').value.trim();

  if (!token) { setStatus('Please enter your HF API token.', 'error'); return; }
  if (!text)  { setStatus('Please paste some text to analyze.', 'error'); return; }

  const wordCount = (text.match(/\b\w+\b/g) || []).length;
  if (wordCount < 20) { setStatus('Text is too short — please provide at least 20 words.', 'error'); return; }

  const btn = document.getElementById('analyzeBtn');
  btn.disabled = true;
  document.getElementById('results').classList.remove('visible');

  try {
    // 1. Readability (instant, no API)
    setStatus('<span class="spinner"></span>Computing readability stats...', 'info');
    const stats = computeReadability(text);
    renderStats(stats);

    // 2. Summary (only if > 100 words)
    if (wordCount > 100) {
      setStatus('<span class="spinner"></span>Generating summary (BART)...', 'info');
      const summary = await summarize(token, text);
      document.getElementById('summaryOut').textContent = summary;
      document.getElementById('summaryCard').style.display = '';
    } else {
      document.getElementById('summaryOut').textContent = 'Text is under 100 words — summary skipped.';
      document.getElementById('summaryCard').style.display = '';
    }

    // 3. Tone classification
    setStatus('<span class="spinner"></span>Classifying tone (zero-shot)...', 'info');
    const toneData = await classifyTone(token, text);
    renderTone(toneData);

    // 4. Suggestions
    const suggestions = buildSuggestions(text, stats);
    renderSuggestions(suggestions);

    document.getElementById('results').classList.add('visible');
    setStatus('Analysis complete.', 'success');
  } catch (e) {
    setStatus('Error: ' + e.message, 'error');
  } finally {
    btn.disabled = false;
  }
}

// Allow Ctrl+Enter to submit
document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('textInput').addEventListener('keydown', e => {
    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) analyze();
  });
});
</script>
</body>
</html>