Spaces:

Okcan
/

text-analyzer

Running

App Files Files Community

okcan commited on Jul 27

Commit

ca3db9e

unverified ·

0 Parent(s):

Initial commit

Browse files

Files changed (2) hide show

README.md +34 -0
index.html +568 -0

README.md ADDED Viewed

	@@ -0,0 +1,34 @@

+---
+title: text-analyzer
+emoji: 📝
+colorFrom: green
+colorTo: teal
+sdk: static
+pinned: false
+license: apache-2.0
+---
+# Text Readability & Tone Analyzer
+Paste any text — blog post, essay, email, or report — and get instant analysis powered by the Hugging Face Inference API.
+## Features
+- **Summary** — Condensed version of long texts via `facebook/bart-large-cnn` (skipped for texts under 100 words)
+- **Tone Classification** — Zero-shot classification with `facebook/bart-large-mnli` across six tones: formal, casual, persuasive, informative, emotional, humorous
+- **Readability Statistics** — Word count, sentence count, average words per sentence, syllable count, and Flesch Reading Ease score with a visual meter
+- **Writing Suggestions** — Passive voice detection, long sentence flagging (>30 words), filler word counts
+## How to use
+1. Enter your free HF token from [huggingface.co/settings/tokens](https://huggingface.co/settings/tokens) (Read access is sufficient)
+2. Paste your text
+3. Click **Analyze Text** or press `Ctrl+Enter`
+## Models used
+| Task | Model |
+|------|-------|
+| Summarization | `facebook/bart-large-cnn` |
+| Tone classification | `facebook/bart-large-mnli` |
+| Readability & suggestions | Pure JavaScript (no API) |

index.html ADDED Viewed

	@@ -0,0 +1,568 @@

+<!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>