Update templates/index.html

templates/index.html

@@ -1,28 +1,253 @@
 <!DOCTYPE html>
-<html>
+<html lang="id">
 <head>
-    <title>Sentiment Analysis</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<meta charset="UTF-8">
+<title>AI Sentiment Dashboard</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>
+
+<style>
+body { background:#0f172a; color:white; }
+.sidebar {
+    width:230px;
+    height:100vh;
+    position:fixed;
+    background:#111827;
+    padding:20px;
+}
+.main {
+    margin-left:250px;
+    padding:20px;
+}
+.card {
+    background:#1f2937;
+    color:white;
+    border-radius:10px;
+}
+table { font-size: 13px; }
+</style>
+
 </head>
-<body class="bg-dark text-white">
 
-<div class="container mt-5 text-center">
-    <h1>🔥 Sentiment Analysis Multi-Platform</h1>
+<body>
+
+<!-- 🔥 SIDEBAR -->
+<div class="sidebar">
+    <h4>🔥 Dashboard</h4>
+
+    <input id="keyword" class="form-control mt-3" placeholder="Masukkan keyword">
+
+    <div class="mt-3">
+        <input type="radio" name="source" value="all" checked> Semua<br>
+        <input type="radio" name="source" value="youtube"> YouTube<br>
+        <input type="radio" name="source" value="reddit"> Reddit
+    </div>
+
+    <button onclick="runAnalysis()" class="btn btn-primary mt-3 w-100">
+        Analisis
+    </button>
+
+    <hr>
+
+    <h6>Filter Sentimen</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>
 
-    <form method="POST">
-        <input class="form-control mt-3" name="keyword" placeholder="Contoh: Jokowi" required>
+<!-- LOADING -->
+<div id="loading" style="display:none;">
+    <div class="spinner-border text-light"></div>
+    <p>Memproses data...</p>
+</div>
+
+<!-- CHART + WORD -->
+<div class="row mt-3">
+
+<div class="col-md-6">
+    <div class="card p-3">
+        <h5>Distribusi Sentimen</h5>
+        <canvas id="chart"></canvas>
+    </div>
+</div>
+
+<div class="col-md-6">
+    <div class="card p-3">
+        <h5>Top Kata (Trend)</h5>
+        <ul id="topWords"></ul>
+    </div>
+</div>
+
+</div>
+
+<!-- HEATMAP + WORDCLOUD -->
+<div class="row mt-3">
 
-        <div class="mt-4">
-            <label>Pilih Sumber:</label><br>
+<div class="col-md-6">
+    <div class="card p-3">
+        <h5>🔥 Heatmap</h5>
+        <img src="/static/heatmap.png" width="100%">
+    </div>
+</div>
 
-            <input type="radio" name="source" value="all" checked> Semua
-            <input type="radio" name="source" value="youtube"> YouTube
-            <input type="radio" name="source" value="reddit"> Reddit
-        </div>
+<div class="col-md-6">
+    <div class="card p-3">
+        <h5>☁️ WordCloud</h5>
+        <img src="/static/wordcloud.png" width="100%">
+    </div>
+</div>
 
-        <button class="btn btn-primary mt-4">Analisis</button>
-    </form>
 </div>
 
+<!-- TOPIC -->
+<div class="card mt-3 p-3">
+    <h5>🧠 Topic Modeling</h5>
+    <ul id="topics"></ul>
+</div>
+
+<!-- INSIGHT -->
+<div class="card mt-3 p-3">
+    <h5>🤖 AI Insight</h5>
+    <pre id="insightBox"></pre>
+</div>
+
+<!-- TABLE -->
+<div class="card mt-3 p-3">
+<h5>Data Komentar</h5>
+
+<table class="table table-dark table-striped">
+<thead>
+<tr><th>No</th><th>Text</th><th>Sentiment</th><th>Source</th></tr>
+</thead>
+<tbody id="table"></tbody>
+</table>
+
+</div>
+
+</div>
+
+<script>
+
+let allData = [];
+let chart;
+
+// 🔥 RUN ANALYSIS
+function runAnalysis() {
+    const keyword = document.getElementById("keyword").value;
+    const source = document.querySelector('input[name="source"]:checked').value;
+
+    document.getElementById("loading").style.display = "block";
+
+    fetch('/analyze', {
+        method:'POST',
+        headers:{'Content-Type':'application/json'},
+        body:JSON.stringify({keyword,source})
+    })
+    .then(res=>res.json())
+    .then(res=>{
+        allData = res.data;
+        updateUI(res.data, res.top_words, res.topics, res.insight);
+        document.getElementById("loading").style.display = "none";
+    });
+}
+
+// 🔥 UPDATE UI
+function updateUI(data, topWords, topics, insight) {
+    renderTable(data);
+    renderChart(data);
+    renderTopWords(topWords);
+    renderTopics(topics);
+    renderInsight(insight);
+}
+
+// 🔥 TABLE
+function renderTable(data) {
+    const table = document.getElementById("table");
+    table.innerHTML="";
+
+    data.forEach((d,i)=>{
+        table.innerHTML += `
+        <tr>
+            <td>${i+1}</td>
+            <td>${d.text}</td>
+            <td>${d.sentiment}</td>
+            <td>${d.source}</td>
+        </tr>`;
+    });
+}
+
+// 🔥 CHART DINAMIS
+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)}]
+        }
+    });
+}
+
+// 🔥 FILTER
+function filterData(type){
+    if(type==="All"){
+        updateUI(allData, [], [], "");
+    } else {
+        const filtered = allData.filter(d=>d.sentiment===type);
+        updateUI(filtered, [], [], "");
+    }
+}
+
+// 🔥 TOP WORDS
+function renderTopWords(words){
+    const list = document.getElementById("topWords");
+    list.innerHTML="";
+
+    words.forEach(w=>{
+        list.innerHTML += `<li>${w.word} (${w.count})</li>`;
+    });
+}
+
+// 🔥 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;
+}
+
+// 🔥 AUTO REFRESH (REAL-TIME)
+setInterval(()=>{
+    const keyword = document.getElementById("keyword").value;
+    if(keyword){
+        runAnalysis();
+    }
+}, 5000);
+
+</script>
+
 </body>
 </html>