Update templates/result.html

templates/result.html

@@ -357,7 +357,7 @@ footer {
     <div class="panel-tag">03 — Data Komentar</div>
     <div class="tbl-wrap">
       <table>
-        <thead><tr><th>#</th><th>Sumber</th><th>Komentar</th><th>Sentimen</th></tr></thead>
+        <thead><tr><th>#</th><th>Sumber</th><th>Komentar</th><th>Sentimen</th><th>Conf.</th></tr></thead>
         <tbody id="tbl"></tbody>
       </table>
     </div>
@@ -477,9 +477,11 @@ function render(d) {
   $('m-neg-p').textContent = pct(neg,tot)+'%';
   $('m-neu-p').textContent = pct(neu,tot)+'%';
 
-  const tEl = $('m-trend');
-  tEl.textContent = trend;
-  const isUp = trend && trend.toLowerCase().includes('positif');
+  // TREND — sekarang object, bukan string
+  const tEl  = $('m-trend');
+  const tObj = (typeof trend === 'object' && trend !== null) ? trend : { label: trend, dominant: '', confidence: 0 };
+  tEl.textContent = tObj.label || trend;
+  const isUp = (tObj.label || '').toLowerCase().includes('positif');
   tEl.className = 'metric-n ' + (isUp ? 'c-up' : 'c-dn');
 
   // DIST BAR
@@ -549,17 +551,21 @@ function render(d) {
     }).join('');
   } else wg.innerHTML = '<span class="empty">Tidak ada data kata.</span>';
 
-  // TABLE
+  // TABLE — dengan confidence score
   const tb = $('tbl');
   if(data.length) {
-    tb.innerHTML = data.slice(0,50).map((r,i)=>`
-      <tr>
+    tb.innerHTML = data.slice(0,50).map((r,i)=>{
+      const conf = r.confidence ? Math.round(r.confidence*100)+'%' : '—';
+      const confColor = r.confidence >= 0.8 ? 'var(--pos)' : r.confidence >= 0.6 ? 'var(--gold)' : 'var(--neg)';
+      return `<tr>
         <td style="color:var(--muted)">${i+1}</td>
         <td><span class="src-badge">${esc(r.source||'—')}</span></td>
-        <td style="max-width:280px;color:var(--m2)">${esc((r.text||'').substring(0,100))}</td>
+        <td style="max-width:240px;color:var(--m2)">${esc((r.text||'').substring(0,90))}</td>
         <td><span class="tag tag-${sc(r.sentiment)}">${r.sentiment||'—'}</span></td>
-      </tr>`).join('');
-  } else tb.innerHTML = '<tr><td colspan="4" class="empty" style="padding:.75rem">Tidak ada data.</td></tr>';
+        <td style="font-family:var(--mono);font-size:0.6rem;color:${confColor}">${conf}</td>
+      </tr>`;
+    }).join('');
+  } else tb.innerHTML = '<tr><td colspan="5" class="empty" style="padding:.75rem">Tidak ada data.</td></tr>';
 
   // TOPICS
   const tg = $('topics');
@@ -581,14 +587,18 @@ function render(d) {
       </div>`).join('');
   } else cg.innerHTML = '<span class="empty">Data tidak cukup untuk clustering.</span>';
 
-  // HOAX
+  // HOAX — dengan confidence score dan method
   const hg = $('hoax');
   if(hoax.length) {
-    hg.innerHTML = hoax.map(h=>`
-      <div class="hoax-item">
+    hg.innerHTML = hoax.map(h=>{
+      const conf = h.confidence ? Math.round(h.confidence*100)+'%' : '';
+      const method = h.method === 'ml' ? '·ML' : '·KW';
+      return `<div class="hoax-item">
         <span class="h-badge ${h.label==='Hoax'?'hb-hoax':'hb-norm'}">${h.label}</span>
-        <span class="h-text">${esc((h.text||'').substring(0,90))}</span>
-      </div>`).join('');
+        <span class="h-text">${esc((h.text||'').substring(0,80))}</span>
+        ${conf ? `<span style="font-family:var(--mono);font-size:0.5rem;color:var(--muted);white-space:nowrap;margin-left:auto">${conf}${method}</span>` : ''}
+      </div>`;
+    }).join('');
   } else hg.innerHTML = '<span class="empty">Tidak ada konten terdeteksi.</span>';
 
   // BOT
@@ -603,10 +613,14 @@ function render(d) {
       </div>`).join('');
   } else bg.innerHTML = '<span class="empty">Tidak ada bot terdeteksi.</span>';
 
-  // INSIGHT
-  const dom = pos>=neg&&pos>=neu?'positif':neg>=pos&&neg>=neu?'negatif':'netral';
-  $('insight-text').innerHTML = `Dari <em>${data.length}</em> komentar, opini publik terhadap "<em>${esc(kw)}</em>" cenderung <em>${dom}</em> — ${pct(pos,tot)}% positif, ${pct(neg,tot)}% negatif, ${pct(neu,tot)}% netral.`;
-  $('insight-meta').innerHTML = `Model: IndoBERT (w11wo/indonesian-roberta-base)<br>${new Date().toLocaleDateString('id-ID',{weekday:'long',year:'numeric',month:'long',day:'numeric'})}<br>Tren: ${trend}`;
+  // INSIGHT — gunakan trend object
+  const avgConf = data.length ? (data.reduce((s,r)=>s+(r.confidence||0),0)/data.length*100).toFixed(1) : 0;
+  const trendLabel = tObj.label || String(trend);
+  const trendSum   = tObj.summary || trendLabel;
+  const polarity   = tObj.polarity !== undefined ? tObj.polarity : '—';
+
+  $('insight-text').innerHTML = `Dari <em>${data.length}</em> komentar yang dianalisis, opini publik terhadap "<em>${esc(kw)}</em>" bersifat <em>${trendLabel.toLowerCase()}</em>. ${trendSum}`;
+  $('insight-meta').innerHTML = `Model: IndoBERT (w11wo/indonesian-roberta-base)<br>Avg. confidence: ${avgConf}% · Polarisasi: ${polarity}<br>${new Date().toLocaleDateString('id-ID',{weekday:'long',year:'numeric',month:'long',day:'numeric'})}`;
 
   // IMAGES
   loadImg('static/wordcloud.png','wc-box');