Update templates/result.html

templates/result.html

@@ -404,6 +404,38 @@ footer {
   </div>
 </div>
 
+<!-- CROSS-PLATFORM ANALYSIS -->
+<div class="full-row" id="cross-section" style="display:none">
+  <div class="panel" style="border-bottom:1px solid var(--b1)">
+    <div class="panel-tag">11 — Analisis Komparatif Lintas Platform</div>
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--b1);border-radius:8px;overflow:hidden;margin-bottom:1.25rem">
+      <div style="background:var(--s2);padding:1rem 1.25rem">
+        <div style="font-family:var(--mono);font-size:0.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.75rem">Platform Insights</div>
+        <div id="cross-insights" class="empty">Memuat…</div>
+      </div>
+      <div style="background:var(--s2);padding:1rem 1.25rem">
+        <div style="font-family:var(--mono);font-size:0.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.75rem">Pairwise Comparison</div>
+        <div id="cross-pairwise" class="empty">Memuat…</div>
+      </div>
+    </div>
+    <div id="cross-img-box"><div class="img-ph">Chart komparatif diproses server</div></div>
+  </div>
+</div>
+
+<!-- CONFIDENCE STATS -->
+<div class="full-row">
+  <div class="panel" style="border-bottom:1px solid var(--b1)">
+    <div class="panel-tag">12 — Statistik Confidence Model</div>
+    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--b1);border-radius:8px;overflow:hidden">
+      <div id="cs-pos" style="background:var(--s2);padding:1rem 1.25rem"></div>
+      <div id="cs-neg" style="background:var(--s2);padding:1rem 1.25rem"></div>
+      <div id="cs-neu" style="background:var(--s2);padding:1rem 1.25rem"></div>
+      <div id="cs-unc" style="background:var(--s2);padding:1rem 1.25rem"></div>
+    </div>
+    <div style="display:flex;gap:1.5rem;margin-top:1rem;flex-wrap:wrap" id="conf-buckets"></div>
+  </div>
+</div>
+
 <!-- INSIGHT -->
 <div class="insight-block">
   <p class="insight-text" id="insight-text">Mengolah data analisis…</p>
@@ -416,6 +448,7 @@ footer {
   <div class="ft-r">
     <a href="/">← Analisis Baru</a>
     <a href="/download">↓ Unduh CSV</a>
+    <a href="/download/summary" class="ft-r" style="text-decoration:none;font-family:var(--mono);font-size:0.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)">↓ Summary CSV</a>
   </div>
 </footer>
 
@@ -439,7 +472,10 @@ if(D) render(D);
 else $('insight-text').textContent = 'Tidak ada data. Kembali ke halaman utama untuk memulai analisis baru.';
 
 function render(d) {
-  const data  = d.data      || [];
+  const data       = d.data           || [];
+  const crossData  = d.cross_platform || {};
+  const confStats  = d.conf_stats     || {};
+  const expSum     = d.export_summary || {};
   const words = d.top_words || [];
   const topics= d.topics    || [];
   const clust = d.clusters  || [];
@@ -625,6 +661,54 @@ function render(d) {
   // IMAGES
   loadImg('static/wordcloud.png','wc-box');
   loadImg('static/heatmap.png','hm-box');
+
+  // ── CROSS-PLATFORM ANALYSIS ──
+  const platforms = crossData.platforms || {};
+  if (Object.keys(platforms).length >= 2) {
+    document.getElementById('cross-section').style.display = '';
+    // insights
+    const ins = crossData.insights || [];
+    const insEl = document.getElementById('cross-insights');
+    insEl.innerHTML = ins.length
+      ? ins.map(i => `<div style="font-family:var(--mono);font-size:0.65rem;color:var(--m2);line-height:1.6;margin-bottom:.4rem">• ${esc(i)}</div>`).join('')
+      : '<span class="empty">Hanya satu platform — tidak ada perbandingan.</span>';
+    // pairwise
+    const pw = crossData.pairwise || [];
+    const pwEl = document.getElementById('cross-pairwise');
+    pwEl.innerHTML = pw.length
+      ? pw.map(p => `<div style="font-family:var(--mono);font-size:0.62rem;color:var(--m2);line-height:1.7">
+          <span style="color:var(--accent)">${esc(p.platform_a)}</span> vs
+          <span style="color:var(--accent)">${esc(p.platform_b)}</span>:
+          selisih positif <strong style="color:var(--text)">${p.pos_diff}%</strong>
+        </div>`).join('')
+      : '<span class="empty">—</span>';
+    loadImg('static/comparative.png', 'cross-img-box');
+  }
+
+  // ── CONFIDENCE STATS ──
+  const byClass = confStats.by_class || {};
+  const clsMap  = [
+    ['Positive','cs-pos','var(--pos)'],
+    ['Negative','cs-neg','var(--neg)'],
+    ['Neutral', 'cs-neu','var(--neu)'],
+    ['Uncertain','cs-unc','var(--gold)'],
+  ];
+  clsMap.forEach(([cls, elId, color]) => {
+    const s = byClass[cls] || {};
+    document.getElementById(elId).innerHTML = `
+      <div style="font-family:var(--mono);font-size:0.5rem;letter-spacing:.12em;text-transform:uppercase;color:${color};margin-bottom:.5rem">${cls}</div>
+      <div style="font-size:1.6rem;font-weight:800;color:${color};letter-spacing:-0.03em">${s.count||0}</div>
+      <div style="font-family:var(--mono);font-size:0.58rem;color:var(--muted);margin-top:.35rem">
+        mean: <b style="color:var(--m2)">${s.mean||0}</b><br>
+        std: <b style="color:var(--m2)">${s.std||0}</b>
+      </div>`;
+  });
+  const buckets = confStats.buckets || {};
+  const bEl = document.getElementById('conf-buckets');
+  bEl.innerHTML = Object.entries(buckets).map(([k,v]) => `
+    <div style="font-family:var(--mono);font-size:0.6rem;background:var(--s2);border:1px solid var(--b2);border-radius:6px;padding:.4rem .8rem;color:var(--m2)">
+      ${k}: <b style="color:var(--text)">${v}</b>
+    </div>`).join('');
 }
 
 function loadImg(src, boxId) {