487 lines
19 KiB
HTML
487 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Analisis Sentimen Dashboard</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
|
|
<link
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap" rel="stylesheet">
|
|
</head>
|
|
|
|
<body class="bg-gray-50 min-h-screen">
|
|
<!-- Header -->
|
|
<header class="modern-gradient text-white py-12 relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-black opacity-10"></div>
|
|
<div class="container mx-auto px-6 relative z-10">
|
|
<div class="text-center animate-fade-in">
|
|
<h1 class="text-5xl md:text-6xl font-extrabold tracking-tight font-sans">
|
|
Dashboard Analisis Sentimen
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container mx-auto px-6 py-8">
|
|
<!-- Stats Cards -->
|
|
<div
|
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12 -mt-8 relative z-10"
|
|
>
|
|
<div class="card-modern rounded-2xl p-8 animate-fade-in">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="stat-icon p-4 rounded-2xl text-white">
|
|
<i class="fas fa-comments text-2xl"></i>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-3xl font-bold text-gray-800" id="totalComments">
|
|
0
|
|
</div>
|
|
<div class="text-sm text-gray-500 font-medium">
|
|
Upload data untuk mulai
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-lg font-semibold text-gray-700 mb-2">
|
|
Total Komentar
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div
|
|
class="bg-gradient-to-r from-indigo-500 to-purple-600 h-2 rounded-full"
|
|
style="width:100%"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="card-modern rounded-2xl p-8 animate-fade-in"
|
|
style="animation-delay: 0.1s"
|
|
>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div
|
|
class="p-4 rounded-2xl text-white bg-gradient-to-r from-green-500 to-emerald-600"
|
|
>
|
|
<i class="fas fa-smile text-2xl"></i>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-3xl font-bold text-green-600" id="positiveCount">
|
|
0
|
|
</div>
|
|
<div
|
|
class="text-sm text-gray-500 font-medium"
|
|
id="positivePercent"
|
|
>
|
|
0% dari total
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-lg font-semibold text-gray-700 mb-2">
|
|
Sentimen Positif
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div
|
|
id="positiveProgress"
|
|
class="bg-gradient-to-r from-green-500 to-emerald-600 h-2 rounded-full transition-all duration-500"
|
|
style="width: 0%"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="card-modern rounded-2xl p-8 animate-fade-in"
|
|
style="animation-delay: 0.2s"
|
|
>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div
|
|
class="p-4 rounded-2xl text-white bg-gradient-to-r from-red-500 to-pink-600"
|
|
>
|
|
<i class="fas fa-frown text-2xl"></i>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-3xl font-bold text-red-600" id="negativeCount">
|
|
0
|
|
</div>
|
|
<div
|
|
class="text-sm text-gray-500 font-medium"
|
|
id="negativePercent"
|
|
>
|
|
0% dari total
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-lg font-semibold text-gray-700 mb-2">
|
|
Sentimen Negatif
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div
|
|
id="negativeProgress"
|
|
class="bg-gradient-to-r from-red-500 to-pink-600 h-2 rounded-full transition-all duration-500"
|
|
style="width: 0%"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="card-modern rounded-2xl p-8 animate-fade-in"
|
|
style="animation-delay: 0.3s"
|
|
>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div
|
|
class="p-4 rounded-2xl text-white bg-gradient-to-r from-purple-500 to-indigo-600"
|
|
>
|
|
<i class="fas fa-chart-line text-2xl"></i>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-3xl font-bold text-purple-600" id="accuracy">
|
|
76%
|
|
</div>
|
|
<div class="text-sm text-gray-500 font-medium">Model terbaru</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-lg font-semibold text-gray-700 mb-2">
|
|
Akurasi Model
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div
|
|
class="bg-gradient-to-r from-purple-500 to-indigo-600 h-2 rounded-full"
|
|
style="width: 76%"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Section -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
|
|
<!-- Sentiment Distribution Chart -->
|
|
<div class="card-modern rounded-2xl p-8 animate-fade-in">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-2xl font-bold text-gray-800">
|
|
Distribusi Sentimen
|
|
</h3>
|
|
<div
|
|
class="p-3 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-600 text-white"
|
|
>
|
|
<i class="fas fa-chart-pie text-lg"></i>
|
|
</div>
|
|
</div>
|
|
<div class="relative h-80">
|
|
<canvas id="sentimentChart"></canvas>
|
|
</div>
|
|
<div class="mt-6 grid grid-cols-2 gap-4">
|
|
<div
|
|
class="text-center p-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl"
|
|
>
|
|
<div class="text-2xl font-bold text-green-600">0%</div>
|
|
<div class="text-sm text-green-700 font-medium">Positif</div>
|
|
</div>
|
|
<div
|
|
class="text-center p-4 bg-gradient-to-r from-red-50 to-pink-50 rounded-xl"
|
|
>
|
|
<div class="text-2xl font-bold text-red-600">0%</div>
|
|
<div class="text-sm text-red-700 font-medium">Negatif</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confusion Matrix -->
|
|
<div
|
|
class="card-modern rounded-2xl p-8 animate-fade-in"
|
|
style="animation-delay: 0.1s"
|
|
>
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-2xl font-bold text-gray-800">Confusion Matrix</h3>
|
|
<div
|
|
class="p-3 rounded-xl bg-gradient-to-r from-purple-500 to-indigo-600 text-white"
|
|
>
|
|
<i class="fas fa-table text-lg"></i>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-3 text-center mb-6">
|
|
<div></div>
|
|
<div
|
|
class="font-bold text-sm text-gray-700 bg-gray-100 p-3 rounded-xl"
|
|
>
|
|
Prediksi Positif
|
|
</div>
|
|
<div
|
|
class="font-bold text-sm text-gray-700 bg-gray-100 p-3 rounded-xl"
|
|
>
|
|
Prediksi Negatif
|
|
</div>
|
|
|
|
<div
|
|
class="font-bold text-sm text-gray-700 bg-gray-100 p-3 rounded-xl"
|
|
>
|
|
Aktual Positif
|
|
</div>
|
|
<div
|
|
class="bg-gradient-to-r from-green-100 to-emerald-100 text-green-800 p-6 rounded-xl font-bold text-2xl border-2 border-green-200"
|
|
>
|
|
123
|
|
</div>
|
|
<div
|
|
class="bg-gradient-to-r from-red-100 to-pink-100 text-red-800 p-6 rounded-xl font-bold text-2xl border-2 border-red-200"
|
|
>
|
|
39
|
|
</div>
|
|
|
|
<div
|
|
class="font-bold text-sm text-gray-700 bg-gray-100 p-3 rounded-xl"
|
|
>
|
|
Aktual Negatif
|
|
</div>
|
|
<div
|
|
class="bg-gradient-to-r from-red-100 to-pink-100 text-red-800 p-6 rounded-xl font-bold text-2xl border-2 border-red-200"
|
|
>
|
|
113
|
|
</div>
|
|
<div
|
|
class="bg-gradient-to-r from-green-100 to-emerald-100 text-green-800 p-6 rounded-xl font-bold text-2xl border-2 border-green-200"
|
|
>
|
|
37
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Metrics Section -->
|
|
<div class="grid grid-cols-3 grid-rows-2 gap-4 text-center mb-8">
|
|
|
|
<!-- Precision Positif -->
|
|
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-xl">
|
|
<div class="text-lg font-bold text-blue-600">75%</div>
|
|
<div class="text-xs text-blue-700 font-medium">Precision Positif</div>
|
|
</div>
|
|
|
|
<!-- Recall Positif -->
|
|
<div class="bg-gradient-to-r from-purple-50 to-pink-50 p-4 rounded-xl">
|
|
<div class="text-lg font-bold text-purple-600">74%</div>
|
|
<div class="text-xs text-purple-700 font-medium">Recall Positif</div>
|
|
</div>
|
|
|
|
<!-- F1 Positif -->
|
|
<div class="bg-gradient-to-r from-indigo-50 to-purple-50 p-4 rounded-xl">
|
|
<div class="text-lg font-bold text-indigo-600">75%</div>
|
|
<div class="text-xs text-indigo-700 font-medium">F1-Score Positif</div>
|
|
</div>
|
|
|
|
<!-- Precision Negatif -->
|
|
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-xl">
|
|
<div class="text-lg font-bold text-blue-600">76%</div>
|
|
<div class="text-xs text-blue-700 font-medium">Precision Negatif</div>
|
|
</div>
|
|
|
|
<!-- Recall Negatif -->
|
|
<div class="bg-gradient-to-r from-purple-50 to-pink-50 p-4 rounded-xl">
|
|
<div class="text-lg font-bold text-purple-600">77%</div>
|
|
<div class="text-xs text-purple-700 font-medium">Recall Negatif</div>
|
|
</div>
|
|
|
|
<!-- F1 Negatif -->
|
|
<div class="bg-gradient-to-r from-indigo-50 to-purple-50 p-4 rounded-xl">
|
|
<div class="text-lg font-bold text-indigo-600">76%</div>
|
|
<div class="text-xs text-indigo-700 font-medium">F1-Score Negatif</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabbed Section -->
|
|
<div class="card-modern rounded-2xl p-8 animate-fade-in">
|
|
<!-- Tab Navigation -->
|
|
<div
|
|
class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8"
|
|
>
|
|
<div class="flex space-x-1 bg-gray-100 p-1 rounded-2xl mb-4 sm:mb-0">
|
|
<button
|
|
onclick="switchTab('prediction')"
|
|
id="predictionTab"
|
|
class="tab-btn px-6 py-3 rounded-xl font-semibold transition-all duration-300 bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-lg"
|
|
>
|
|
<i class="fas fa-robot mr-2"></i>
|
|
Prediksi Sentimen
|
|
</button>
|
|
<button
|
|
onclick="switchTab('data')"
|
|
id="dataTab"
|
|
class="tab-btn px-6 py-3 rounded-xl font-semibold transition-all duration-300 text-gray-600 hover:text-gray-800"
|
|
>
|
|
<i class="fas fa-table mr-2"></i>
|
|
Data Sentimen
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Import/Export buttons (only visible in data tab) -->
|
|
<div id="dataActions" class="flex flex-col sm:flex-row gap-3 hidden">
|
|
<input
|
|
type="file"
|
|
id="excelFile"
|
|
accept=".xlsx,.xls"
|
|
class="hidden"
|
|
onchange="handleFileUpload(event)"
|
|
/>
|
|
<button
|
|
onclick="document.getElementById('excelFile').click()"
|
|
class="bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white px-6 py-3 rounded-xl font-semibold transition-all duration-300 flex items-center gap-3 shadow-lg hover:shadow-xl transform hover:-translate-y-1"
|
|
>
|
|
<i class="fas fa-upload"></i>
|
|
Import Excel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Prediction Tab Content -->
|
|
<div id="predictionContent" class="tab-content">
|
|
<div class="grid grid-cols-1 gap-8">
|
|
|
|
<label class="block text-sm font-semibold text-gray-700 mb-3"
|
|
>Input Teks</label
|
|
>
|
|
<textarea
|
|
id="textInput"
|
|
placeholder="Contoh: Produk ini sangat bagus dan berkualitas tinggi, saya sangat puas dengan pembelian ini..."
|
|
class="w-full p-6 border-2 border-gray-200 rounded-2xl focus:ring-4 focus:ring-indigo-100 focus:border-indigo-500 resize-none transition-all duration-300 text-gray-700 bg-gradient-to-br from-white to-gray-50"
|
|
rows="8"
|
|
></textarea>
|
|
<div class="flex justify-between items-center mt-4">
|
|
<span class="text-sm text-gray-500" id="charCount"
|
|
>0 karakter</span
|
|
>
|
|
<button
|
|
onclick="predictSentiment()"
|
|
class="btn-modern text-white px-8 py-4 rounded-2xl font-semibold text-lg flex items-center gap-3"
|
|
>
|
|
<i class="fas fa-magic"></i>
|
|
Analisis Sentimen
|
|
</button>
|
|
</div>
|
|
|
|
<label class="block text-sm font-semibold text-gray-700 mb-3"
|
|
>Hasil Analisis</label
|
|
>
|
|
<div
|
|
id="predictionResult"
|
|
class="h-full min-h-[280px] p-6 rounded-2xl bg-gradient-to-br from-gray-50 to-white border-2 border-gray-200 flex items-center justify-center"
|
|
>
|
|
<div class="text-center text-gray-500">
|
|
<i class="fas fa-chart-line text-4xl mb-4 opacity-50"></i>
|
|
<p class="font-medium">Hasil prediksi akan muncul di sini</p>
|
|
<p class="text-sm mt-2">
|
|
Ketik teks dan klik tombol analisis
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Tab Content -->
|
|
<div id="dataContent" class="tab-content hidden">
|
|
<!-- Search and Filter -->
|
|
<div class="flex flex-col md:flex-row gap-4 mb-8">
|
|
<div class="flex-1 relative">
|
|
<div
|
|
class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
|
|
>
|
|
<i class="fas fa-search text-gray-400"></i>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
id="searchInput"
|
|
placeholder="Cari berdasarkan teks atau sentimen..."
|
|
class="search-input w-full pl-12 pr-4 py-4 rounded-2xl border-0 focus:outline-none text-gray-700 font-medium"
|
|
oninput="searchTable()"
|
|
/>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<select
|
|
id="sentimentFilter"
|
|
onchange="filterTable()"
|
|
class="search-input px-4 py-4 rounded-2xl border-0 focus:outline-none text-gray-700 font-medium"
|
|
>
|
|
<option value="">Semua Sentimen</option>
|
|
<option value="Positif">Positif</option>
|
|
<option value="Negatif">Negatif</option>
|
|
</select>
|
|
<select
|
|
id="itemsPerPage"
|
|
onchange="changeItemsPerPage()"
|
|
class="search-input px-4 py-4 rounded-2xl border-0 focus:outline-none text-gray-700 font-medium"
|
|
>
|
|
<option value="5">5 per halaman</option>
|
|
<option value="10" selected>10 per halaman</option>
|
|
<option value="25">25 per halaman</option>
|
|
<option value="50">50 per halaman</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Table -->
|
|
<div class="overflow-x-auto rounded-2xl border border-gray-200">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gradient-to-r from-gray-50 to-gray-100">
|
|
<tr>
|
|
<th
|
|
class="px-8 py-6 text-left text-sm font-bold text-gray-700 uppercase tracking-wider"
|
|
>
|
|
No
|
|
</th>
|
|
<th
|
|
class="px-8 py-6 text-left text-sm font-bold text-gray-700 uppercase tracking-wider"
|
|
>
|
|
Teks
|
|
</th>
|
|
<th
|
|
class="px-8 py-6 text-left text-sm font-bold text-gray-700 uppercase tracking-wider"
|
|
>
|
|
Sentimen
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="dataTable" class="bg-white divide-y divide-gray-100">
|
|
<!-- Data will be populated by JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div
|
|
class="flex flex-col md:flex-row justify-between items-center mt-8 gap-4"
|
|
>
|
|
<div class="text-sm text-gray-600 font-medium">
|
|
Menampilkan <span id="showingStart">1</span> -
|
|
<span id="showingEnd">10</span> dari
|
|
<span id="totalItems">0</span> data
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
id="prevBtn"
|
|
onclick="changePage(-1)"
|
|
class="pagination-btn px-4 py-2 rounded-xl bg-gray-100 text-gray-600 hover:bg-indigo-100 hover:text-indigo-600 font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
disabled
|
|
>
|
|
<i class="fas fa-chevron-left mr-2"></i>Sebelumnya
|
|
</button>
|
|
<div id="pageNumbers" class="flex gap-1">
|
|
<!-- Page numbers will be populated by JavaScript -->
|
|
</div>
|
|
<button
|
|
id="nextBtn"
|
|
onclick="changePage(1)"
|
|
class="pagination-btn px-4 py-2 rounded-xl bg-gray-100 text-gray-600 hover:bg-indigo-100 hover:text-indigo-600 font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Selanjutnya<i class="fas fa-chevron-right ml-2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
|
|
</body>
|
|
</html>
|