Update templates/index.html

templates/index.html

@@ -2,16 +2,17 @@
 <html lang="id">
 <head>
 <meta charset="UTF-8">
-<title>AI Sentiment Dashboard</title>
+<title>AI Social Media Intelligence</title>
 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script src="https://d3js.org/d3.v7.min.js"></script>
 
 <style>
 body { background:#0f172a; color:white; }
 
 .sidebar {
-    width:230px;
+    width:240px;
     height:100vh;
     position:fixed;
     background:#111827;
@@ -19,7 +20,7 @@ body { background:#0f172a; color:white; }
 }
 
 .main {
-    margin-left:250px;
+    margin-left:260px;
     padding:20px;
 }
 
@@ -37,7 +38,7 @@ table { font-size:13px; }
 
 <!-- 🔥 SIDEBAR -->
 <div class="sidebar">
-    <h4>🔥 Dashboard</h4>
+    <h4>🔥 AI Dashboard</h4>
 
     <input id="keyword" class="form-control mt-3" placeholder="Masukkan keyword">
 
@@ -47,37 +48,32 @@ table { font-size:13px; }
         <input type="radio" name="source" value="reddit"> Reddit
     </div>
 
-    <button onclick="runAnalysis()" class="btn btn-primary mt-3 w-100">
-        Analisis
-    </button>
+    <button onclick="runAnalysis()" class="btn btn-primary mt-3 w-100">Analisis</button>
 
     <hr>
 
-    <h6>Filter Sentimen</h6>
+    <h6>Filter</h6>
     <button onclick="filterData('All')" class="btn btn-dark btn-sm w-100 mt-1">All</button>
     <button onclick="filterData('Positive')" class="btn btn-success btn-sm w-100 mt-1">Positive</button>
     <button onclick="filterData('Neutral')" class="btn btn-secondary btn-sm w-100 mt-1">Neutral</button>
     <button onclick="filterData('Negative')" class="btn btn-danger btn-sm w-100 mt-1">Negative</button>
 
     <hr>
-
     <a href="/download" class="btn btn-success w-100">⬇ Download CSV</a>
 </div>
 
 <!-- 🔥 MAIN -->
 <div class="main">
 
-<h3>📊 AI Sentiment Dashboard</h3>
+<h3>📊 AI Social Media Intelligence</h3>
 
-<!-- LOADING -->
 <div id="loading" style="display:none;">
     <div class="spinner-border text-light"></div>
-    <p>Memproses data...</p>
+    <p>Loading...</p>
 </div>
 
-<!-- CHART + WORD -->
+<!-- CHART -->
 <div class="row mt-3">
-
 <div class="col-md-6">
 <div class="card p-3">
 <h5>Distribusi Sentimen</h5>
@@ -87,213 +83,277 @@ table { font-size:13px; }
 
 <div class="col-md-6">
 <div class="card p-3">
-<h5>Top Kata</h5>
+<h5>Top Words</h5>
 <ul id="topWords"></ul>
 </div>
 </div>
-
 </div>
 
-<!-- HEATMAP + WORDCLOUD -->
+<!-- IMAGE -->
 <div class="row mt-3">
-
 <div class="col-md-6">
 <div class="card p-3">
-<h5>🔥 Heatmap</h5>
-<img id="heatmap" src="/static/heatmap.png" width="100%">
+<h5>Heatmap</h5>
+<img id="heatmap" width="100%">
 </div>
 </div>
 
 <div class="col-md-6">
 <div class="card p-3">
-<h5>☁️ WordCloud</h5>
-<img id="wordcloud" src="/static/wordcloud.png" width="100%">
+<h5>Wordcloud</h5>
+<img id="wordcloud" width="100%">
 </div>
 </div>
-
 </div>
 
-<!-- TIMELINE -->
 <div class="card mt-3 p-3">
-<h5>📈 Sentiment Timeline</h5>
-<img id="timeline" src="/static/timeline.png" width="100%">
+<h5>Timeline</h5>
+<img id="timeline" width="100%">
 </div>
 
 <!-- TOPIC -->
 <div class="card mt-3 p-3">
-<h5>🧠 Topic Modeling</h5>
+<h5>Topic Modeling</h5>
 <ul id="topics"></ul>
 </div>
 
 <!-- CLUSTER -->
 <div class="card mt-3 p-3">
-<h5>🧠 Clustering Opini</h5>
+<h5>Clustering</h5>
 <div id="clusters"></div>
 </div>
 
 <!-- HOAX -->
 <div class="card mt-3 p-3">
-<h5>🚨 Deteksi Hoax</h5>
-<div id="hoaxBox"></div>
+<h5>Hoax Detection</h5>
+<div id="hoax"></div>
 </div>
 
-<!-- INSIGHT -->
+<!-- NETWORK -->
 <div class="card mt-3 p-3">
-<h5>🤖 AI Insight</h5>
-<pre id="insightBox"></pre>
+<h5>Network Graph</h5>
+<div id="graph"></div>
 </div>
 
-<!-- TABLE -->
+<!-- BOT NETWORK -->
+<div class="card mt-3 p-3">
+<h5>Bot Network</h5>
+<div id="botGraph"></div>
+</div>
+
+<div class="card mt-3 p-3">
+<h5>Bot List</h5>
+<div id="bots"></div>
+</div>
+
+<!-- GNN -->
+<div class="card mt-3 p-3">
+<h5>GNN Result</h5>
+<div id="gnn"></div>
+</div>
+
+<!-- BERT BOT -->
+<div class="card mt-3 p-3">
+<h5>BERT Bot Detection</h5>
+<div id="botBert"></div>
+</div>
+
+<!-- FAKE NEWS -->
+<div class="card mt-3 p-3">
+<h5>Fake News Detection</h5>
+<div id="fakeNews"></div>
+</div>
+
+<!-- TREND -->
 <div class="card mt-3 p-3">
-<h5>Data Komentar</h5>
+<h5>Trend</h5>
+<h4 id="trend"></h4>
+</div>
 
-<table class="table table-dark table-striped">
+<!-- TABLE -->
+<div class="card mt-3 p-3">
+<h5>Data</h5>
+<table class="table table-dark">
 <thead>
-<tr><th>No</th><th>Text</th><th>Sentiment</th><th>Source</th></tr>
+<tr><th>No</th><th>Text</th><th>Sentiment</th></tr>
 </thead>
 <tbody id="table"></tbody>
 </table>
-
 </div>
 
 </div>
 
 <script>
 
-let allData = [];
+let allData=[];
 let chart;
 
-// 🔥 ANALISIS
-function runAnalysis() {
-    const keyword = document.getElementById("keyword").value;
-    const source = document.querySelector('input[name="source"]:checked').value;
+// 🔥 ANALYSIS
+function runAnalysis(){
+    const keyword=document.getElementById("keyword").value;
+    const source=document.querySelector('input[name="source"]:checked').value;
 
-    document.getElementById("loading").style.display = "block";
+    document.getElementById("loading").style.display="block";
 
-    fetch('/analyze', {
-        method:'POST',
-        headers:{'Content-Type':'application/json'},
+    fetch("/analyze",{
+        method:"POST",
+        headers:{"Content-Type":"application/json"},
         body:JSON.stringify({keyword,source})
     })
     .then(res=>res.json())
     .then(res=>{
-        allData = res.data;
+        allData=res.data;
         updateUI(res);
-        document.getElementById("loading").style.display = "none";
+        document.getElementById("loading").style.display="none";
     });
 }
 
 // 🔥 UPDATE UI
-function updateUI(res) {
+function updateUI(res){
     renderTable(res.data);
     renderChart(res.data);
     renderTopWords(res.top_words);
     renderTopics(res.topics);
-    renderInsight(res.insight);
     renderClusters(res.clusters);
     renderHoax(res.hoax);
-
-    // 🔥 refresh image (anti cache)
-    document.getElementById("wordcloud").src = "/static/wordcloud.png?"+Math.random();
-    document.getElementById("heatmap").src = "/static/heatmap.png?"+Math.random();
-    document.getElementById("timeline").src = "/static/timeline.png?"+Math.random();
+    renderGraph(res.network);
+    renderBotNetwork(res.bot_network);
+    renderBots(res.bot_network.bots);
+    renderGNN(res.gnn);
+    renderBotBert(res.bot_bert);
+    renderFakeNews(res.fake_news);
+    document.getElementById("trend").innerText=res.trend;
+
+    document.getElementById("wordcloud").src="/static/wordcloud.png?"+Math.random();
+    document.getElementById("heatmap").src="/static/heatmap.png?"+Math.random();
+    document.getElementById("timeline").src="/static/timeline.png?"+Math.random();
 }
 
 // 🔥 TABLE
-function renderTable(data) {
-    const table = document.getElementById("table");
-    table.innerHTML="";
-
+function renderTable(data){
+    let html="";
     data.forEach((d,i)=>{
-        table.innerHTML += `
-        <tr>
-            <td>${i+1}</td>
-            <td>${d.text}</td>
-            <td>${d.sentiment}</td>
-            <td>${d.source}</td>
-        </tr>`;
+        html+=`<tr><td>${i+1}</td><td>${d.text}</td><td>${d.sentiment}</td></tr>`;
     });
+    document.getElementById("table").innerHTML=html;
 }
 
 // 🔥 CHART
-function renderChart(data) {
-    let counts = {Positive:0, Neutral:0, Negative:0};
+function renderChart(data){
+    let counts={Positive:0,Neutral:0,Negative:0};
     data.forEach(d=>counts[d.sentiment]++);
 
     if(chart) chart.destroy();
 
-    chart = new Chart(document.getElementById("chart"), {
-        type:'pie',
-        data:{
-            labels:Object.keys(counts),
-            datasets:[{data:Object.values(counts)}]
-        }
+    chart=new Chart(document.getElementById("chart"),{
+        type:"pie",
+        data:{labels:Object.keys(counts),datasets:[{data:Object.values(counts)}]}
     });
 }
 
-// 🔥 FILTER
-function filterData(type){
-    if(type==="All"){
-        renderTable(allData);
-        renderChart(allData);
-    } else {
-        const filtered = allData.filter(d=>d.sentiment===type);
-        renderTable(filtered);
-        renderChart(filtered);
-    }
-}
-
-// 🔥 TOP WORDS
+// 🔥 TOP WORD
 function renderTopWords(words){
-    const el = document.getElementById("topWords");
-    el.innerHTML="";
-    words.forEach(w=>{
-        el.innerHTML += `<li>${w.word} (${w.count})</li>`;
-    });
+    let html="";
+    words.forEach(w=>html+=`<li>${w.word} (${w.count})</li>`);
+    document.getElementById("topWords").innerHTML=html;
 }
 
 // 🔥 TOPIC
 function renderTopics(topics){
-    const el = document.getElementById("topics");
-    el.innerHTML="";
-    topics.forEach((t,i)=>{
-        el.innerHTML += `<li><b>Topik ${i+1}:</b> ${t.join(", ")}</li>`;
-    });
-}
-
-// 🔥 INSIGHT
-function renderInsight(text){
-    document.getElementById("insightBox").innerText = text;
+    let html="";
+    topics.forEach(t=>html+=`<li>${t.join(", ")}</li>`);
+    document.getElementById("topics").innerHTML=html;
 }
 
 // 🔥 CLUSTER
-function renderClusters(clusters){
-    const el = document.getElementById("clusters");
-    el.innerHTML="";
-    clusters.forEach(c=>{
-        el.innerHTML += `<b>Cluster ${c.cluster}</b><ul>` +
-            c.samples.map(s=>`<li>${s}</li>`).join("") +
-            "</ul>";
+function renderClusters(data){
+    let html="";
+    data.forEach(c=>{
+        html+=`<b>Cluster ${c.cluster}</b><ul>`;
+        c.samples.forEach(s=>html+=`<li>${s}</li>`);
+        html+="</ul>";
     });
+    document.getElementById("clusters").innerHTML=html;
 }
 
 // 🔥 HOAX
 function renderHoax(data){
-    const el = document.getElementById("hoaxBox");
-    el.innerHTML="";
-    data.slice(0,10).forEach(d=>{
-        el.innerHTML += `
-        <p><b>${d.label}</b> (score: ${d.score})<br>${d.text}</p><hr>`;
+    let html="";
+    data.forEach(d=>html+=`<p>${d.label} - ${d.text}</p>`);
+    document.getElementById("hoax").innerHTML=html;
+}
+
+// 🔥 NETWORK
+function renderGraph(data){
+    const width=400,height=300;
+    document.getElementById("graph").innerHTML="";
+    const svg=d3.select("#graph").append("svg").attr("width",width).attr("height",height);
+
+    const nodes={};
+    data.forEach(d=>{
+        nodes[d.source]={id:d.source};
+        nodes[d.target]={id:d.target};
+    });
+
+    const simulation=d3.forceSimulation(Object.values(nodes))
+        .force("link",d3.forceLink(data).id(d=>d.id))
+        .force("charge",d3.forceManyBody().strength(-100))
+        .force("center",d3.forceCenter(width/2,height/2));
+
+    const link=svg.selectAll("line").data(data).enter().append("line");
+    const node=svg.selectAll("circle").data(Object.values(nodes)).enter().append("circle").attr("r",5);
+
+    simulation.on("tick",()=>{
+        link.attr("x1",d=>d.source.x).attr("y1",d=>d.source.y)
+            .attr("x2",d=>d.target.x).attr("y2",d=>d.target.y);
+        node.attr("cx",d=>d.x).attr("cy",d=>d.y);
     });
 }
 
+// 🔥 BOT GRAPH
+function renderBotNetwork(graph){
+    renderGraph(graph.edges);
+}
+
+// 🔥 BOT LIST
+function renderBots(bots){
+    let html="";
+    bots.forEach(b=>html+=`<p>${b.score} - ${b.text}</p>`);
+    document.getElementById("bots").innerHTML=html;
+}
+
+// 🔥 GNN
+function renderGNN(data){
+    let html="";
+    data.forEach(d=>html+=`<p>Node ${d.node}: ${d.score}</p>`);
+    document.getElementById("gnn").innerHTML=html;
+}
+
+// 🔥 BERT BOT
+function renderBotBert(data){
+    let html="";
+    data.forEach(d=>html+=`<p>${d.label} (${d.score}) - ${d.text}</p>`);
+    document.getElementById("botBert").innerHTML=html;
+}
+
+// 🔥 FAKE NEWS
+function renderFakeNews(data){
+    let html="";
+    data.forEach(d=>html+=`<p>${d.label} (${d.score}) - ${d.text}</p>`);
+    document.getElementById("fakeNews").innerHTML=html;
+}
+
+// 🔥 FILTER
+function filterData(type){
+    if(type==="All") return renderTable(allData);
+    renderTable(allData.filter(d=>d.sentiment===type));
+}
+
 // 🔥 AUTO REFRESH
 setInterval(()=>{
-    const keyword = document.getElementById("keyword").value;
-    if(keyword){
-        runAnalysis();
-    }
-}, 5000);
+    const k=document.getElementById("keyword").value;
+    if(k) runAnalysis();
+},5000);
 
 </script>