Update templates/result.html

templates/result.html

@@ -442,6 +442,42 @@ footer {
   <p class="insight-meta" id="insight-meta"></p>
 </div>
 
+<!-- ABSA + NER -->
+<div class="main-grid" style="border-bottom:1px solid var(--b1);position:relative;z-index:1">
+  <div class="panel">
+    <div class="panel-tag">13 — Aspect-Based Sentiment Analysis (ABSA)</div>
+    <div id="absa-grid" class="empty">Memuat…</div>
+  </div>
+  <div class="panel">
+    <div class="panel-tag">14 — Named Entity Recognition (NER)</div>
+    <div id="ner-grid" class="empty">Memuat…</div>
+  </div>
+</div>
+
+<!-- STANCE + EMOTION -->
+<div class="main-grid" style="border-bottom:1px solid var(--b1);position:relative;z-index:1">
+  <div class="panel">
+    <div class="panel-tag">15 — Stance Detection</div>
+    <div id="stance-grid" class="empty">Memuat…</div>
+  </div>
+  <div class="panel">
+    <div class="panel-tag">16 — Emotion Detection</div>
+    <div id="emotion-grid" class="empty">Memuat…</div>
+  </div>
+</div>
+
+<!-- KEYWORDS + SUMMARY -->
+<div class="main-grid" style="border-bottom:1px solid var(--b1);position:relative;z-index:1">
+  <div class="panel">
+    <div class="panel-tag">17 — Keyword & Phrase Extraction</div>
+    <div id="kw-grid" class="empty">Memuat…</div>
+  </div>
+  <div class="panel">
+    <div class="panel-tag">18 — Ringkasan Otomatis per Platform</div>
+    <div id="sum-grid" class="empty">Memuat…</div>
+  </div>
+</div>
+
 <!-- FOOTER -->
 <footer>
   <div class="ft-kw">Kata kunci: <strong id="ft-kw">—</strong></div>
@@ -662,6 +698,9 @@ function render(d) {
   loadImg('static/wordcloud.png','wc-box');
   loadImg('static/heatmap.png','hm-box');
 
+  // ── NEW FEATURES ──
+  renderNewFeatures(d);
+
   // ── CROSS-PLATFORM ANALYSIS ──
   const platforms = crossData.platforms || {};
   if (Object.keys(platforms).length >= 2) {
@@ -719,6 +758,151 @@ function loadImg(src, boxId) {
   };
   img.src = '/' + src + '?t=' + Date.now();
 }
+
+// ── ABSA ──
+function renderABSA(absa) {
+  const el = $('absa-grid');
+  const top = absa.top_aspects || [];
+  if (!top.length) { el.innerHTML = '<span class="empty">Tidak ada aspek terdeteksi.</span>'; return; }
+  const COLORS = {Positive:'var(--pos)',Negative:'var(--neg)',Neutral:'var(--neu)',Uncertain:'var(--gold)'};
+  el.innerHTML = `
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem">
+      ${top.map(a => `
+        <div style="background:var(--s2);border:1px solid var(--b2);border-radius:7px;padding:0.75rem 1rem">
+          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.4rem">
+            <span style="font-weight:700;font-size:0.78rem;text-transform:capitalize">${esc(a.aspect)}</span>
+            <span style="font-family:var(--mono);font-size:0.55rem;padding:0.1rem 0.4rem;border-radius:3px;border:1px solid;color:${COLORS[a.dominant]||'var(--neu)'};border-color:${COLORS[a.dominant]||'var(--neu)'}">${a.dominant}</span>
+          </div>
+          <div style="display:flex;gap:3px;height:4px;border-radius:2px;overflow:hidden">
+            <div style="width:${a.pos_pct}%;background:var(--pos);border-radius:2px"></div>
+            <div style="width:${a.neg_pct}%;background:var(--neg);border-radius:2px"></div>
+            <div style="width:${a.neu_pct}%;background:var(--neu);border-radius:2px"></div>
+          </div>
+          <div style="font-family:var(--mono);font-size:0.5rem;color:var(--muted);margin-top:0.3rem">${a.total} sebutan · ${a.pos_pct}% pos · ${a.neg_pct}% neg</div>
+        </div>`).join('')}
+    </div>
+    <div style="font-family:var(--mono);font-size:0.58rem;color:var(--muted);margin-top:0.75rem">
+      ${absa.aspects_found || 0} aspek ditemukan dari ${absa.total_texts_analyzed || 0} komentar
+    </div>`;
+}
+
+// ── NER ──
+function renderNER(ner) {
+  const el = $('ner-grid');
+  const top = ner.top_entities || [];
+  if (!top.length) { el.innerHTML = '<span class="empty">Tidak ada entitas terdeteksi.</span>'; return; }
+  const TYPE_COLOR = {PER:'#4f9cf9',ORG:'#7b61ff',LOC:'#22c55e',PROD:'#f59e0b',EVENT:'#ef4444',MISC:'#94a3b8'};
+  const TYPE_LABEL = {PER:'Tokoh',ORG:'Institusi',LOC:'Lokasi',PROD:'Produk',EVENT:'Kejadian',MISC:'Lainnya'};
+  el.innerHTML = `
+    <div style="display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1rem">
+      ${top.map(e => `
+        <div style="display:flex;align-items:center;gap:0.4rem;background:var(--s2);border:1px solid var(--b2);border-radius:6px;padding:0.3rem 0.65rem">
+          <span style="font-family:var(--mono);font-size:0.48rem;padding:0.1rem 0.35rem;border-radius:3px;background:${TYPE_COLOR[e.type]||'#94a3b8'}22;color:${TYPE_COLOR[e.type]||'#94a3b8'};border:1px solid ${TYPE_COLOR[e.type]||'#94a3b8'}44">${TYPE_LABEL[e.type]||e.type}</span>
+          <span style="font-size:0.72rem;font-weight:600">${esc(e.entity)}</span>
+          <span style="font-family:var(--mono);font-size:0.55rem;color:var(--muted)">${e.count}×</span>
+        </div>`).join('')}
+    </div>
+    <div style="font-family:var(--mono);font-size:0.58rem;color:var(--muted)">${ner.total_entities||0} entitas unik · ${ner.total_mentions||0} total sebutan</div>`;
+}
+
+// ── STANCE ──
+function renderStance(stance) {
+  const el = $('stance-grid');
+  const c  = stance.counts || {};
+  const total = (c.Favor||0) + (c.Against||0) + (c.Neutral||0) || 1;
+  el.innerHTML = `
+    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.5rem;margin-bottom:1rem">
+      ${[['Favor','var(--pos)','Mendukung'],['Against','var(--neg)','Menolak'],['Neutral','var(--neu)','Netral']].map(([s,color,label]) => `
+        <div style="background:var(--s2);border:1px solid var(--b2);border-radius:7px;padding:0.75rem;text-align:center">
+          <div style="font-size:1.6rem;font-weight:800;color:${color};letter-spacing:-0.03em">${c[s]||0}</div>
+          <div style="font-family:var(--mono);font-size:0.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:0.2rem">${label}</div>
+          <div style="font-family:var(--mono);font-size:0.6rem;color:${color};margin-top:0.2rem">${Math.round((c[s]||0)/total*100)}%</div>
+        </div>`).join('')}
+    </div>
+    <div style="height:5px;background:var(--s2);border-radius:3px;display:flex;overflow:hidden;gap:2px">
+      <div style="width:${stance.favor_pct||0}%;background:var(--pos);border-radius:2px;transition:width 1s ease"></div>
+      <div style="width:${stance.against_pct||0}%;background:var(--neg);border-radius:2px;transition:width 1s ease"></div>
+      <div style="width:${stance.neutral_pct||0}%;background:var(--neu);border-radius:2px;transition:width 1s ease"></div>
+    </div>
+    <div style="font-family:var(--mono);font-size:0.58rem;color:var(--muted);margin-top:0.6rem">
+      Dominan: <b style="color:var(--text)">${stance.dominant||'—'}</b> · Target: <b style="color:var(--accent)">${esc(stance.target||'—')}</b>
+    </div>`;
+}
+
+// ── EMOTIONS ──
+function renderEmotions(emotions) {
+  const el   = $('emotion-grid');
+  const dist = emotions.distribution || {};
+  const EMO_ICON = {joy:'😊',anger:'😡',sadness:'😢',fear:'😨',surprise:'😮',disgust:'🤢',neutral:'😐'};
+  const EMO_COLOR = {joy:'#22c55e',anger:'#ef4444',sadness:'#4f9cf9',fear:'#f59e0b',surprise:'#7b61ff',disgust:'#94a3b8',neutral:'#5a6070'};
+  const entries = Object.entries(dist).sort((a,b)=>(b[1].count||0)-(a[1].count||0));
+  el.innerHTML = `
+    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:0.4rem;margin-bottom:0.75rem">
+      ${entries.slice(0,8).map(([emo,data]) => `
+        <div style="background:var(--s2);border:1px solid var(--b2);border-radius:7px;padding:0.6rem;text-align:center;${emotions.dominant===emo?'border-color:'+EMO_COLOR[emo]||'var(--accent)':''}">
+          <div style="font-size:1.2rem">${EMO_ICON[emo]||'❓'}</div>
+          <div style="font-family:var(--mono);font-size:0.5rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:0.2rem">${emo}</div>
+          <div style="font-size:1rem;font-weight:700;color:${EMO_COLOR[emo]||'var(--text)'}">${data.count||0}</div>
+          <div style="font-family:var(--mono);font-size:0.5rem;color:var(--muted)">${data.pct||0}%</div>
+        </div>`).join('')}
+    </div>
+    <div style="font-family:var(--mono);font-size:0.58rem;color:var(--muted)">
+      Emosi dominan: <b style="color:var(--text)">${emotions.dominant||'—'}</b> · ${emotions.emotional_pct||0}% bersifat emosional
+    </div>`;
+}
+
+// ── KEYWORDS ──
+function renderKeywords(keywords) {
+  const el = $('kw-grid');
+  if (!keywords.length) { el.innerHTML = '<span class="empty">Tidak ada frasa kunci.</span>'; return; }
+  const maxScore = keywords[0].score || 1;
+  const TYPE_COLOR = {'word':'var(--accent)','phrase':'var(--a2)','multi-phrase':'var(--gold)'};
+  el.innerHTML = `
+    <div style="display:flex;flex-wrap:wrap;gap:0.4rem">
+      ${keywords.map(kw => {
+        const sz = 0.62 + (kw.score/maxScore)*0.5;
+        const color = TYPE_COLOR[kw.type]||'var(--m2)';
+        return `<span style="font-family:var(--mono);font-size:${sz}rem;background:var(--s2);border:1px solid var(--b2);border-radius:5px;padding:0.2rem 0.55rem;color:${color};cursor:default;transition:border-color .15s" title="${kw.type} · ${kw.frequency}× · score:${kw.score}">${esc(kw.phrase)}</span>`;
+      }).join('')}
+    </div>
+    <div style="font-family:var(--mono);font-size:0.55rem;color:var(--muted);margin-top:0.75rem;display:flex;gap:1rem">
+      <span><span style="color:var(--accent)">■</span> Kata</span>
+      <span><span style="color:var(--a2)">■</span> Frasa 2 kata</span>
+      <span><span style="color:var(--gold)">■</span> Frasa 3+ kata</span>
+    </div>`;
+}
+
+// ── SUMMARIES ──
+function renderSummaries(summaries) {
+  const el = $('sum-grid');
+  if (!summaries || !Object.keys(summaries).length) {
+    el.innerHTML = '<span class="empty">Tidak ada ringkasan.</span>'; return;
+  }
+  const overall = summaries['_overall'];
+  const platforms = Object.entries(summaries).filter(([k]) => k !== '_overall');
+  el.innerHTML = `
+    ${overall ? `
+      <div style="background:var(--s2);border:1px solid rgba(79,156,249,0.2);border-radius:7px;padding:1rem;margin-bottom:0.75rem">
+        <div style="font-family:var(--mono);font-size:0.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:0.5rem">Ringkasan Keseluruhan</div>
+        <div style="font-size:0.8rem;line-height:1.65;color:var(--text)">${esc(overall.summary||'')}</div>
+        <div style="font-family:var(--mono);font-size:0.52rem;color:var(--muted);margin-top:0.4rem">${overall.text_count} komentar dirangkum</div>
+      </div>` : ''}
+    ${platforms.map(([src,data]) => `
+      <div style="background:var(--s2);border:1px solid var(--b2);border-radius:7px;padding:0.75rem;margin-bottom:0.5rem">
+        <div style="font-family:var(--mono);font-size:0.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:0.4rem">${esc(src.capitalize?.() || src)}</div>
+        <div style="font-size:0.75rem;line-height:1.6;color:var(--m2)">${esc(data.summary||'')}</div>
+      </div>`).join('')}`;
+}
+
+// ── CALL ALL NEW RENDERS ──
+function renderNewFeatures(d) {
+  if (d.absa)     renderABSA(d.absa);
+  if (d.ner)      renderNER(d.ner);
+  if (d.stance)   renderStance(d.stance);
+  if (d.emotions) renderEmotions(d.emotions);
+  if (d.keywords) renderKeywords(d.keywords);
+  if (d.summaries)renderSummaries(d.summaries);
+}
 </script>
 </body>
 </html>