Spaces:

Okcan
/

review-analyzer

Running

App Files Files Community

okcan commited on Jul 27

Commit

543484d

unverified ·

0 Parent(s):

Initial commit

Browse files

Files changed (2) hide show

README.md +21 -0
index.html +629 -0

README.md ADDED Viewed

	@@ -0,0 +1,21 @@

+---
+title: review-analyzer
+emoji: ⭐
+colorFrom: yellow
+colorTo: green
+sdk: static
+pinned: false
+license: apache-2.0
+---
+# Product Review Analyzer
+Paste product reviews and get instant AI-powered analysis:
+- **Sentiment analysis** via `cardiffnlp/twitter-roberta-base-sentiment-latest` (positive / neutral / negative %)
+- **Predicted star rating** (1–5) mapped from sentiment scores
+- **Pros & Cons** extracted from review sentences
+- **Aspect sentiment grid** — quality, price, shipping, packaging, size, color, material, customer service, durability
+- **AI summary** via `facebook/bart-large-cnn` for reviews over 100 words
+Supports multiple reviews separated by `---` or blank lines.

index.html ADDED Viewed

	@@ -0,0 +1,629 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Product Review 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: 860px; 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: #2ecc71; }
+    textarea { resize: vertical; min-height: 160px; }
+    .token-hint { font-size: 0.78rem; color: #666; margin-top: 6px; }
+    .token-hint a { color: #2ecc71; text-decoration: none; }
+    .token-hint a:hover { text-decoration: underline; }
+    button {
+      background: #2ecc71;
+      color: #0f0f0f;
+      border: none;
+      border-radius: 8px;
+      padding: 13px 28px;
+      font-size: 1rem;
+      font-weight: 700;
+      cursor: pointer;
+      transition: background 0.2s;
+      width: 100%;
+      margin-top: 8px;
+    }
+    button:hover { background: #27ae60; }
+    button:disabled { background: #333; color: #666; cursor: not-allowed; }
+    .status {
+      padding: 12px 16px;
+      border-radius: 8px;
+      font-size: 0.9rem;
+      margin-top: 12px;
+      display: none;
+    }
+    .status.info    { background: #0d1f17; color: #7af5b0; border: 1px solid #1a4a30; display: block; }
+    .status.error   { background: #2a1a1a; color: #f57a7a; border: 1px solid #6a2a2a; display: block; }
+    .status.success { background: #0d1f17; color: #2ecc71; border: 1px solid #1a5a30; display: block; }
+    .spinner {
+      display: inline-block;
+      width: 14px; height: 14px;
+      border: 2px solid #444;
+      border-top-color: #2ecc71;
+      border-radius: 50%;
+      animation: spin 0.7s linear infinite;
+      margin-right: 8px;
+      vertical-align: middle;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    /* Results */
+    .results { display: none; }
+    .results.visible { display: block; }
+    .review-block {
+      background: #1a1a1a;
+      border: 1px solid #2a2a2a;
+      border-radius: 12px;
+      padding: 24px;
+      margin-bottom: 24px;
+    }
+    .review-block-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 20px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid #252525;
+    }
+    .review-number {
+      background: #2ecc71;
+      color: #0f0f0f;
+      font-weight: 700;
+      font-size: 0.8rem;
+      padding: 4px 10px;
+      border-radius: 20px;
+    }
+    .review-snippet {
+      color: #666;
+      font-size: 0.85rem;
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    /* Star rating */
+    .stars-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 20px;
+    }
+    .stars {
+      display: flex;
+      gap: 3px;
+    }
+    .star {
+      font-size: 1.5rem;
+      color: #333;
+      transition: color 0.3s;
+    }
+    .star.filled { color: #f1c40f; }
+    .star.half   { color: #f1c40f; opacity: 0.5; }
+    .star-label {
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: #f1c40f;
+    }
+    .star-sub { font-size: 0.8rem; color: #666; }
+    /* Sentiment bar */
+    .section-label {
+      font-size: 0.78rem;
+      color: #888;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+    .sentiment-bar {
+      height: 10px;
+      border-radius: 5px;
+      background: #222;
+      overflow: hidden;
+      display: flex;
+      margin-bottom: 6px;
+    }
+    .bar-pos { background: #2ecc71; transition: width 0.5s; }
+    .bar-neu { background: #888; transition: width 0.5s; }
+    .bar-neg { background: #e74c3c; transition: width 0.5s; }
+    .sentiment-labels {
+      display: flex;
+      justify-content: space-between;
+      font-size: 0.8rem;
+      color: #777;
+      margin-bottom: 20px;
+    }
+    .sentiment-labels .lbl-pos b { color: #2ecc71; }
+    .sentiment-labels .lbl-neu b { color: #aaa; }
+    .sentiment-labels .lbl-neg b { color: #e74c3c; }
+    /* Pros / Cons */
+    .pros-cons {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+    @media (max-width: 580px) { .pros-cons { grid-template-columns: 1fr; } }
+    .pros-col, .cons-col {
+      background: #111;
+      border-radius: 8px;
+      padding: 14px;
+      border: 1px solid #252525;
+    }
+    .pros-col .col-title { color: #2ecc71; font-size: 0.8rem; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
+    .cons-col .col-title { color: #e74c3c; font-size: 0.8rem; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
+    .phrase-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 6px;
+      font-size: 0.88rem;
+      color: #ccc;
+      margin-bottom: 6px;
+      line-height: 1.4;
+    }
+    .phrase-item:last-child { margin-bottom: 0; }
+    .phrase-dot-pos { color: #2ecc71; font-size: 0.7rem; margin-top: 4px; flex-shrink: 0; }
+    .phrase-dot-neg { color: #e74c3c; font-size: 0.7rem; margin-top: 4px; flex-shrink: 0; }
+    .empty-phrase { color: #555; font-size: 0.85rem; font-style: italic; }
+    /* Aspect grid */
+    .aspect-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 20px;
+    }
+    .aspect-chip {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      background: #111;
+      border: 1px solid #2a2a2a;
+      border-radius: 8px;
+      padding: 7px 12px;
+      font-size: 0.83rem;
+    }
+    .aspect-name { color: #bbb; text-transform: capitalize; }
+    .aspect-sentiment {
+      font-weight: 700;
+      font-size: 0.78rem;
+      padding: 2px 7px;
+      border-radius: 12px;
+    }
+    .asp-pos { background: #0d2a18; color: #2ecc71; }
+    .asp-neg { background: #2a0d0d; color: #e74c3c; }
+    .asp-mix { background: #1a1a0d; color: #f39c12; }
+    .asp-neutral { background: #1a1a1a; color: #666; }
+    /* Summary */
+    .summary-box {
+      background: #111;
+      border: 1px solid #1e3a2a;
+      border-radius: 8px;
+      padding: 14px;
+      font-size: 0.92rem;
+      color: #ccc;
+      line-height: 1.65;
+    }
+    .summary-box.loading { color: #555; font-style: italic; }
+    .section-divider {
+      border: none;
+      border-top: 1px solid #252525;
+      margin: 18px 0;
+    }
+    .badge-row {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      margin-bottom: 6px;
+    }
+    .badge {
+      font-size: 0.75rem;
+      padding: 3px 10px;
+      border-radius: 12px;
+      font-weight: 600;
+    }
+    .badge-green { background: #0d2a18; color: #2ecc71; border: 1px solid #1a4a28; }
+    .badge-gray  { background: #1a1a1a; color: #888;    border: 1px solid #2a2a2a; }
+  </style>
+</head>
+<body>
+<div class="container">
+  <h1>⭐ Product Review Analyzer</h1>
+  <p class="subtitle">Paste product reviews to get sentiment, star rating, pros &amp; cons, aspect breakdown, and AI summary.</p>
+  <div class="card">
+    <label>Hugging Face API Token</label>
+    <input type="password" id="hfToken" placeholder="hf_..." />
+    <p class="token-hint">
+      Get a free token at <a href="https://huggingface.co/settings/tokens" target="_blank">huggingface.co/settings/tokens</a>
+      — Read access is sufficient.
+    </p>
+  </div>
+  <div class="card">
+    <label>Product Reviews</label>
+    <textarea id="reviewsInput" placeholder="Paste one or more product reviews here.&#10;&#10;Separate multiple reviews with a blank line or ---&#10;&#10;Example:&#10;Great product! The quality is excellent and shipping was fast. Packaging was a bit flimsy though.&#10;&#10;---&#10;&#10;Terrible experience. The item broke after two days and customer service was unhelpful."></textarea>
+    <p class="token-hint" style="margin-top:6px;">Separate multiple reviews with a blank line or <code style="color:#2ecc71;background:#0d1f17;padding:1px 5px;border-radius:3px;">---</code></p>
+    <button id="analyzeBtn" onclick="analyzeReviews()">Analyze Reviews</button>
+    <div class="status" id="status"></div>
+  </div>
+  <div class="results" id="results"></div>
+</div>
+<script>
+// ── Aspect keywords ──────────────────────────────────────────────────────────
+const ASPECTS = {
+  quality:          ['quality','durable','build','material','construction','sturdy','flimsy','solid','cheap','premium','well-made','poorly made'],
+  price:            ['price','cost','expensive','cheap','affordable','value','worth','overpriced','bargain','deal','money'],
+  shipping:         ['shipping','delivery','arrived','fast','slow','late','quick','dispatch','courier','package arrived'],
+  packaging:        ['packaging','package','box','wrapped','packing','unboxing','damaged box','bubble wrap'],
+  size:             ['size','small','large','big','tiny','fits','dimensions','compact','oversized','too small','too big'],
+  color:            ['color','colour','shade','bright','dark','faded','vibrant','matches','looks'],
+  material:         ['material','fabric','plastic','metal','leather','cotton','rubber','glass','wood','texture','feel'],
+  'customer service':['customer service','support','refund','return','helpful','rude','responsive','ignored','resolved','staff'],
+  durability:       ['durability','lasted','broke','broken','held up','long lasting','fell apart','still works','years','months','days'],
+};
+const POS_WORDS = new Set([
+  'great','good','excellent','amazing','fantastic','wonderful','love','loved','perfect','best',
+  'awesome','superb','outstanding','quality','recommend','satisfied','happy','pleased','fast',
+  'quick','smooth','easy','nice','solid','sturdy','premium','reliable','accurate','beautiful',
+  'well','works','helpful','professional','friendly','impressive','comfortable','clean','clear',
+  'effective','efficient','lightweight','durable','worth','affordable','value','bargain',
+]);
+const NEG_WORDS = new Set([
+  'bad','poor','terrible','awful','horrible','worst','hate','broken','broke','cheap','flimsy',
+  'slow','late','difficult','hard','ugly','disappointing','disappointed','useless','waste',
+  'defective','damaged','wrong','missing','misleading','fake','overpriced','expensive','rude',
+  'unhelpful','ignored','failed','fails','stopped','fell','apart','crack','scratch','smells',
+  'sticky','loose','wobbly','blurry','noisy','loud','heavy','bulky','small','tight',
+]);
+// ── Helpers ──────────────────────────────────────────────────────────────────
+function setStatus(msg, type) {
+  const el = document.getElementById('status');
+  el.innerHTML = msg;
+  el.className = 'status ' + type;
+}
+function splitReviews(raw) {
+  // Split on "---" separator or double blank lines
+  return raw
+    .split(/\n\s*---\s*\n|\n{2,}/)
+    .map(r => r.trim())
+    .filter(r => r.length > 20);
+}
+function wordCount(text) {
+  return text.trim().split(/\s+/).length;
+}
+// ── HF API ───────────────────────────────────────────────────────────────────
+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();
+}
+// ── Sentiment via HF ─────────────────────────────────────────────────────────
+async function getSentiment(token, text) {
+  // Truncate to ~500 chars for the model
+  const snippet = text.slice(0, 512);
+  try {
+    const res = await hfInference(token, 'cardiffnlp/twitter-roberta-base-sentiment-latest', snippet);
+    const arr = Array.isArray(res[0]) ? res[0] : res;
+    const scores = { positive: 0, neutral: 0, negative: 0 };
+    for (const item of arr) {
+      const label = item.label?.toLowerCase();
+      if (label in scores) scores[label] = item.score;
+    }
+    const total = scores.positive + scores.neutral + scores.negative || 1;
+    return {
+      positive: Math.round(scores.positive / total * 100),
+      neutral:  Math.round(scores.neutral  / total * 100),
+      negative: Math.round(scores.negative / total * 100),
+      raw: scores,
+    };
+  } catch (e) {
+    return { positive: 33, neutral: 34, negative: 33, raw: {}, error: e.message };
+  }
+}
+// ── Star rating (JS mapping) ─────────────────────────────────────────────────
+function sentimentToStars(sentiment) {
+  // Weighted formula: positive pulls toward 5, negative toward 1
+  const score = (sentiment.positive * 5 + sentiment.neutral * 3 + sentiment.negative * 1) / 100;
+  return Math.max(1, Math.min(5, score));
+}
+// ── Aspect extraction (JS) ───────────────────────────────────────────────────
+function extractAspects(text) {
+  const lower = text.toLowerCase();
+  const words  = lower.match(/\b[a-z]+\b/g) || [];
+  const results = {};
+  for (const [aspect, keywords] of Object.entries(ASPECTS)) {
+    let found = false;
+    for (const kw of keywords) {
+      if (lower.includes(kw)) { found = true; break; }
+    }
+    if (!found) continue;
+    // Score the sentiment of surrounding words
+    let pos = 0, neg = 0;
+    for (let i = 0; i < words.length; i++) {
+      const w = words[i];
+      if (keywords.includes(w)) {
+        // Look at window of ±5 words
+        const window = words.slice(Math.max(0, i - 5), i + 6);
+        for (const ww of window) {
+          if (POS_WORDS.has(ww)) pos++;
+          if (NEG_WORDS.has(ww)) neg++;
+        }
+      }
+    }
+    const sentiment = pos > 0 && neg > 0 ? 'mixed' : pos > 0 ? 'positive' : neg > 0 ? 'negative' : 'neutral';
+    results[aspect] = { pos, neg, sentiment };
+  }
+  return results;
+}
+// ── Pros & Cons (JS) ─────────────────────────────────────────────────────────
+function extractProsConsFromText(text) {
+  const sentences = text.match(/[^.!?]+[.!?]?/g) || [text];
+  const pros = [], cons = [];
+  for (const sent of sentences) {
+    const lower = sent.toLowerCase();
+    const words  = lower.match(/\b[a-z]+\b/g) || [];
+    let posCount = 0, negCount = 0;
+    for (const w of words) {
+      if (POS_WORDS.has(w)) posCount++;
+      if (NEG_WORDS.has(w)) negCount++;
+    }
+    const trimmed = sent.trim().replace(/^[-•*]+\s*/, '');
+    if (trimmed.length < 10) continue;
+    if (posCount > negCount && posCount > 0) pros.push(trimmed);
+    else if (negCount > posCount && negCount > 0) cons.push(trimmed);
+  }
+  return {
+    pros: pros.slice(0, 5),
+    cons: cons.slice(0, 5),
+  };
+}
+// ── HF Summarization ─────────────────────────────────────────────────────────
+async function summarizeText(token, text) {
+  const res = await hfInference(token, 'facebook/bart-large-cnn', text.slice(0, 1024), {
+    max_length: 130,
+    min_length: 30,
+    do_sample: false,
+  });
+  return res[0]?.summary_text || null;
+}
+// ── Render helpers ────────────────────────────────────────────────────────────
+function renderStars(rating) {
+  const full = Math.floor(rating);
+  const hasHalf = (rating - full) >= 0.4;
+  let html = '';
+  for (let i = 1; i <= 5; i++) {
+    if (i <= full)           html += `<span class="star filled">★</span>`;
+    else if (i === full + 1 && hasHalf) html += `<span class="star half">★</span>`;
+    else                     html += `<span class="star">★</span>`;
+  }
+  return html;
+}
+function renderSentimentBar(s) {
+  return `
+    <div class="section-label">Sentiment Analysis</div>
+    <div class="sentiment-bar">
+      <div class="bar-pos" style="width:${s.positive}%"></div>
+      <div class="bar-neu" style="width:${s.neutral}%"></div>
+      <div class="bar-neg" style="width:${s.negative}%"></div>
+    </div>
+    <div class="sentiment-labels">
+      <span class="lbl-pos">Positive <b>${s.positive}%</b></span>
+      <span class="lbl-neu">Neutral <b>${s.neutral}%</b></span>
+      <span class="lbl-neg">Negative <b>${s.negative}%</b></span>
+    </div>`;
+}
+function renderPros(phrases) {
+  if (!phrases.length) return `<span class="empty-phrase">None detected</span>`;
+  return phrases.map(p => `<div class="phrase-item"><span class="phrase-dot-pos">●</span>${p}</div>`).join('');
+}
+function renderCons(phrases) {
+  if (!phrases.length) return `<span class="empty-phrase">None detected</span>`;
+  return phrases.map(p => `<div class="phrase-item"><span class="phrase-dot-neg">●</span>${p}</div>`).join('');
+}
+function renderAspects(aspects) {
+  const entries = Object.entries(aspects);
+  if (!entries.length) return `<span style="color:#555;font-size:0.85rem;font-style:italic;">No product aspects detected.</span>`;
+  return entries.map(([name, data]) => {
+    const cls  = { positive: 'asp-pos', negative: 'asp-neg', mixed: 'asp-mix', neutral: 'asp-neutral' }[data.sentiment] || 'asp-neutral';
+    const label = data.sentiment.charAt(0).toUpperCase() + data.sentiment.slice(1);
+    return `<div class="aspect-chip">
+      <span class="aspect-name">${name}</span>
+      <span class="aspect-sentiment ${cls}">${label}</span>
+    </div>`;
+  }).join('');
+}
+// ── Main analyze ─────────────────────────────────────────────────────────────
+async function analyzeReviews() {
+  const token = document.getElementById('hfToken').value.trim();
+  if (!token) { setStatus('HF API token is required.', 'error'); return; }
+  const raw = document.getElementById('reviewsInput').value.trim();
+  if (!raw) { setStatus('Please paste at least one review.', 'error'); return; }
+  const reviews = splitReviews(raw);
+  if (!reviews.length) { setStatus('No valid reviews found (each review must be at least 20 characters).', 'error'); return; }
+  const btn = document.getElementById('analyzeBtn');
+  btn.disabled = true;
+  const resultsEl = document.getElementById('results');
+  resultsEl.innerHTML = '';
+  resultsEl.classList.remove('visible');
+  try {
+    for (let i = 0; i < reviews.length; i++) {
+      const review = reviews[i];
+      setStatus(`<span class="spinner"></span>Analyzing review ${i + 1} of ${reviews.length}…`, 'info');
+      // 1. Sentiment (HF)
+      const sentiment = await getSentiment(token, review);
+      // 2. Star rating (JS)
+      const starRating = sentimentToStars(sentiment);
+      // 3. Aspects (JS)
+      const aspects = extractAspects(review);
+      // 4. Pros & Cons (JS)
+      const { pros, cons } = extractProsConsFromText(review);
+      // 5. Summary (HF) — only if > 100 words
+      let summary = null;
+      const wc = wordCount(review);
+      if (wc > 100) {
+        setStatus(`<span class="spinner"></span>Generating summary for review ${i + 1}…`, 'info');
+        try {
+          summary = await summarizeText(token, review);
+        } catch (e) {
+          summary = `(Summary unavailable: ${e.message})`;
+        }
+      }
+      // ── Build block HTML ────────────────────────────────────────────────
+      const ratingFixed = starRating.toFixed(1);
+      const snippet = review.slice(0, 80).replace(/</g, '&lt;') + (review.length > 80 ? '…' : '');
+      const summaryHtml = summary
+        ? `<hr class="section-divider">
+           <div class="section-label">AI Summary (BART)</div>
+           <div class="summary-box">${summary}</div>`
+        : (wc <= 100
+           ? `<hr class="section-divider">
+              <div class="section-label">AI Summary</div>
+              <div class="summary-box" style="color:#555;font-style:italic;">Review too short for summarization (&lt;100 words).</div>`
+           : '');
+      const blockHtml = `
+        <div class="review-block">
+          <div class="review-block-header">
+            <span class="review-number">Review ${i + 1}</span>
+            <span class="review-snippet">${snippet}</span>
+          </div>
+          <div class="stars-row">
+            <div class="stars">${renderStars(starRating)}</div>
+            <span class="star-label">${ratingFixed}</span>
+            <span class="star-sub">/ 5.0 predicted</span>
+          </div>
+          ${renderSentimentBar(sentiment)}
+          <hr class="section-divider">
+          <div class="pros-cons">
+            <div class="pros-col">
+              <div class="col-title">✓ Pros</div>
+              ${renderPros(pros)}
+            </div>
+            <div class="cons-col">
+              <div class="col-title">✗ Cons</div>
+              ${renderCons(cons)}
+            </div>
+          </div>
+          <hr class="section-divider">
+          <div class="section-label">Aspect Sentiment</div>
+          <div class="aspect-grid">${renderAspects(aspects)}</div>
+          ${summaryHtml}
+        </div>`;
+      resultsEl.innerHTML += blockHtml;
+      resultsEl.classList.add('visible');
+    }
+    setStatus(`Analysis complete — ${reviews.length} review${reviews.length > 1 ? 's' : ''} analyzed.`, 'success');
+  } catch (e) {
+    setStatus('Error: ' + e.message, 'error');
+  } finally {
+    btn.disabled = false;
+  }
+}
+</script>
+</body>
+</html>