initial commit clean (no LFS)
This commit is contained in:
shelaawhy
commit
4793e8a9fc
|
|
@ -0,0 +1,11 @@
|
|||
FROM python:3.10
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY . .
|
||||
|
||||
RUN pip install --no-cache-dir -r requirements.txt
|
||||
|
||||
EXPOSE 7860
|
||||
|
||||
CMD ["python", "app.py"]
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: Analisis Sentimen KNN
|
||||
emoji: 📚
|
||||
colorFrom: purple
|
||||
colorTo: purple
|
||||
sdk: docker
|
||||
pinned: false
|
||||
short_description: Dashboar Analisis Sentimen Tunjangan Kinerja Dosen
|
||||
---
|
||||
|
||||
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import pickle
|
||||
from flask import Flask, request, jsonify, render_template
|
||||
from flask_cors import CORS
|
||||
|
||||
# Load model
|
||||
with open("model/model_knn.pkl", "rb") as f:
|
||||
knn_model = pickle.load(f)
|
||||
|
||||
with open("model/vectorizer.pkl", "rb") as f:
|
||||
vectorizer = pickle.load(f)
|
||||
|
||||
app = Flask(__name__, template_folder='templates')
|
||||
CORS(app)
|
||||
|
||||
labels_map = {0: "Negatif", 1: "Positif"}
|
||||
|
||||
def predict_knn(text):
|
||||
tfidf_input = vectorizer.transform([text])
|
||||
|
||||
pred_label = knn_model.predict(tfidf_input)[0]
|
||||
probabilities = knn_model.predict_proba(tfidf_input)[0]
|
||||
|
||||
confidence = max(probabilities) * 100
|
||||
|
||||
return {
|
||||
"label": labels_map.get(pred_label, str(pred_label)),
|
||||
"confidence": round(confidence, 2)
|
||||
}
|
||||
|
||||
@app.route("/")
|
||||
def index():
|
||||
return render_template("index.html")
|
||||
|
||||
@app.route("/predict", methods=["POST"])
|
||||
def predict():
|
||||
data = request.get_json(force=True)
|
||||
text = data.get("text", "")
|
||||
|
||||
if not text:
|
||||
return jsonify({"error": "No text provided"}), 400
|
||||
|
||||
result = predict_knn(text)
|
||||
return jsonify(result)
|
||||
|
||||
if __name__ == "__main__":
|
||||
app.run(host="0.0.0.0", port=7860)
|
||||
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,6 @@
|
|||
flask
|
||||
flask-cors
|
||||
scikit-learn
|
||||
numpy
|
||||
pandas
|
||||
gunicorn
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
body {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
h1{
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
background-color: #338be3; /* Modern Blue */
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
margin-bottom: 3rem; /* jarak */
|
||||
}
|
||||
.modern-gradient h1 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
header div.rounded-full{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.card-modern {
|
||||
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card-modern:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
|
||||
border-color: rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.btn-modern {
|
||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.btn-modern:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #6366f1;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.pagination-btn:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.table-row {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(99, 102, 241, 0.05) 0%,
|
||||
rgba(139, 92, 246, 0.05) 100%
|
||||
);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||
}
|
||||
|
|
@ -0,0 +1,482 @@
|
|||
// Empty data initially - will be populated from uploaded files
|
||||
let sentimentData = [];
|
||||
|
||||
let filteredData = [...sentimentData];
|
||||
let currentPage = 1;
|
||||
let itemsPerPage = 10;
|
||||
|
||||
// Initialize charts
|
||||
let sentimentChart;
|
||||
function initCharts() {
|
||||
const ctx = document.getElementById("sentimentChart").getContext("2d");
|
||||
sentimentChart = new Chart(ctx, {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels: ["Sentimen Positif", "Sentimen Negatif"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Jumlah Data",
|
||||
data: [0, 0],
|
||||
backgroundColor: [
|
||||
"rgba(16, 185, 129, 0.8)",
|
||||
"rgba(239, 68, 68, 0.8)",
|
||||
],
|
||||
borderColor: ["rgb(16, 185, 129)", "rgb(239, 68, 68)"],
|
||||
borderWidth: 2,
|
||||
borderRadius: 8,
|
||||
borderSkipped: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: "rgba(0, 0, 0, 0.1)",
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 12,
|
||||
weight: "bold",
|
||||
},
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 12,
|
||||
weight: "bold",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
duration: 2000,
|
||||
easing: "easeOutBounce",
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Character counter for textarea
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const textInput = document.getElementById("textInput");
|
||||
const charCount = document.getElementById("charCount");
|
||||
|
||||
textInput.addEventListener("input", function () {
|
||||
const count = this.value.length;
|
||||
charCount.textContent = `${count} karakter`;
|
||||
|
||||
if (count > 500) {
|
||||
charCount.classList.add("text-red-500");
|
||||
charCount.classList.remove("text-gray-500");
|
||||
} else {
|
||||
charCount.classList.add("text-gray-500");
|
||||
charCount.classList.remove("text-red-500");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Enhanced predict sentiment function
|
||||
async function predictSentiment() {
|
||||
const text = document.getElementById("textInput").value.trim();
|
||||
if (!text) {
|
||||
showNotification("Silakan masukkan teks untuk dianalisis", "warning");
|
||||
return;
|
||||
}
|
||||
|
||||
// Show loading state
|
||||
document.getElementById("predictionResult").innerHTML = `
|
||||
<div class="text-center">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto mb-4"></div>
|
||||
<p class="text-gray-600 font-medium">Menganalisis sentimen...</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
try {
|
||||
// Panggil Flask API untuk prediksi
|
||||
const response = await fetch("/predict", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ text }),
|
||||
});
|
||||
const result = await response.json();
|
||||
|
||||
let sentiment = result.label || "Netral";
|
||||
let gradientClass, iconClass;
|
||||
let confidence = Math.random() * 20 + 80; // Dummy confidence, bisa diupdate jika API mengirimkan
|
||||
|
||||
if (sentiment === "Positif") {
|
||||
gradientClass = "from-green-400 to-emerald-600";
|
||||
iconClass = "fas fa-smile";
|
||||
} else if (sentiment === "Negatif") {
|
||||
gradientClass = "from-red-400 to-pink-600";
|
||||
iconClass = "fas fa-frown";
|
||||
} else {
|
||||
gradientClass = "from-yellow-400 to-orange-500";
|
||||
iconClass = "fas fa-meh";
|
||||
}
|
||||
|
||||
document.getElementById("predictionResult").innerHTML = `
|
||||
<div class="text-center animate-fade-in">
|
||||
<div class="mb-6">
|
||||
<div class="w-20 h-20 mx-auto rounded-full bg-gradient-to-r ${gradientClass} flex items-center justify-center text-white text-2xl mb-4">
|
||||
<i class="${iconClass}"></i>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-gray-800 mb-2">
|
||||
${sentiment}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} catch (error) {
|
||||
document.getElementById("predictionResult").innerHTML = `
|
||||
<div class="text-center text-red-600 font-semibold">
|
||||
Terjadi kesalahan saat memproses prediksi.
|
||||
</div>
|
||||
`;
|
||||
showNotification(
|
||||
"Gagal memprediksi sentimen. Pastikan server Flask berjalan.",
|
||||
"error"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Search functionality
|
||||
function searchTable() {
|
||||
const searchTerm = document
|
||||
.getElementById("searchInput")
|
||||
.value.toLowerCase();
|
||||
const sentimentFilter =
|
||||
document.getElementById("sentimentFilter").value;
|
||||
|
||||
filteredData = sentimentData.filter((item) => {
|
||||
const matchesSearch =
|
||||
item.text.toLowerCase().includes(searchTerm) ||
|
||||
item.sentiment.toLowerCase().includes(searchTerm);
|
||||
const matchesFilter =
|
||||
!sentimentFilter || item.sentiment === sentimentFilter;
|
||||
return matchesSearch && matchesFilter;
|
||||
});
|
||||
|
||||
currentPage = 1;
|
||||
updateTable();
|
||||
updatePagination();
|
||||
}
|
||||
|
||||
// Filter functionality
|
||||
function filterTable() {
|
||||
searchTable(); // Reuse search logic
|
||||
}
|
||||
|
||||
// Change items per page
|
||||
function changeItemsPerPage() {
|
||||
itemsPerPage = parseInt(document.getElementById("itemsPerPage").value);
|
||||
currentPage = 1;
|
||||
updateTable();
|
||||
updatePagination();
|
||||
}
|
||||
|
||||
// Pagination functions
|
||||
function changePage(direction) {
|
||||
const totalPages = Math.ceil(filteredData.length / itemsPerPage);
|
||||
const newPage = currentPage + direction;
|
||||
|
||||
if (newPage >= 1 && newPage <= totalPages) {
|
||||
currentPage = newPage;
|
||||
updateTable();
|
||||
updatePagination();
|
||||
}
|
||||
}
|
||||
|
||||
function goToPage(page) {
|
||||
currentPage = page;
|
||||
updateTable();
|
||||
updatePagination();
|
||||
}
|
||||
|
||||
// Enhanced update table function
|
||||
function updateTable() {
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
const pageData = filteredData.slice(startIndex, endIndex);
|
||||
|
||||
const tableBody = document.getElementById("dataTable");
|
||||
tableBody.innerHTML = pageData
|
||||
.map(
|
||||
(item, index) => `
|
||||
<tr class="table-row">
|
||||
<td class="px-8 py-6 whitespace-nowrap text-sm font-semibold text-gray-900">${
|
||||
startIndex + index + 1
|
||||
}</td>
|
||||
<td class="px-8 py-6 text-sm text-gray-700 max-w-md break-words">
|
||||
<div title="${item.text}">${item.text}</div>
|
||||
</td>
|
||||
<td class="px-8 py-6 whitespace-nowrap">
|
||||
<span class="px-4 py-2 inline-flex text-sm font-bold rounded-full ${
|
||||
item.sentiment === "Positif"
|
||||
? "bg-gradient-to-r from-green-100 to-emerald-100 text-green-800 border border-green-200"
|
||||
: "bg-gradient-to-r from-red-100 to-pink-100 text-red-800 border-red-200"
|
||||
}">
|
||||
<i class="fas ${
|
||||
item.sentiment === "Positif" ? "fa-smile" : "fa-frown"
|
||||
} mr-2"></i>
|
||||
${item.sentiment}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
|
||||
// Update showing info
|
||||
const showingStart = filteredData.length === 0 ? 0 : startIndex + 1;
|
||||
const showingEnd = Math.min(endIndex, filteredData.length);
|
||||
document.getElementById("showingStart").textContent = showingStart;
|
||||
document.getElementById("showingEnd").textContent = showingEnd;
|
||||
document.getElementById("totalItems").textContent = filteredData.length;
|
||||
}
|
||||
|
||||
// Update pagination
|
||||
function updatePagination() {
|
||||
const totalPages = Math.ceil(filteredData.length / itemsPerPage);
|
||||
const pageNumbers = document.getElementById("pageNumbers");
|
||||
|
||||
// Update prev/next buttons
|
||||
document.getElementById("prevBtn").disabled = currentPage === 1;
|
||||
document.getElementById("nextBtn").disabled =
|
||||
currentPage === totalPages || totalPages === 0;
|
||||
|
||||
// Generate page numbers
|
||||
let paginationHTML = "";
|
||||
const maxVisiblePages = 5;
|
||||
let startPage = Math.max(
|
||||
1,
|
||||
currentPage - Math.floor(maxVisiblePages / 2)
|
||||
);
|
||||
let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
|
||||
|
||||
if (endPage - startPage + 1 < maxVisiblePages) {
|
||||
startPage = Math.max(1, endPage - maxVisiblePages + 1);
|
||||
}
|
||||
|
||||
for (let i = startPage; i <= endPage; i++) {
|
||||
paginationHTML += `
|
||||
<button
|
||||
onclick="goToPage(${i})"
|
||||
class="pagination-btn px-4 py-2 rounded-xl font-medium transition-all duration-200 ${
|
||||
i === currentPage
|
||||
? "bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-lg"
|
||||
: "bg-gray-100 text-gray-600 hover:bg-indigo-100 hover:text-indigo-600"
|
||||
}"
|
||||
>
|
||||
${i}
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
pageNumbers.innerHTML = paginationHTML;
|
||||
}
|
||||
|
||||
// Enhanced file upload
|
||||
function handleFileUpload(event) {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
showNotification("Mengupload file...", "info");
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
try {
|
||||
const data = new Uint8Array(e.target.result);
|
||||
const workbook = XLSX.read(data, { type: "array" });
|
||||
const sheetName = workbook.SheetNames[0];
|
||||
const worksheet = workbook.Sheets[sheetName];
|
||||
const jsonData = XLSX.utils.sheet_to_json(worksheet);
|
||||
|
||||
sentimentData = jsonData.map((row, index) => ({
|
||||
text:
|
||||
row.Teks || row.Text || row.teks || `Sample text ${index + 1}`,
|
||||
sentiment:
|
||||
row.Sentimen ||
|
||||
row.Sentiment ||
|
||||
(Math.random() > 0.5 ? "Positif" : "Negatif"),
|
||||
}));
|
||||
|
||||
filteredData = [...sentimentData];
|
||||
currentPage = 1;
|
||||
updateTable();
|
||||
updatePagination();
|
||||
updateStats();
|
||||
showNotification(
|
||||
`Berhasil mengimport ${sentimentData.length} data dari Excel!`,
|
||||
"success"
|
||||
);
|
||||
} catch (error) {
|
||||
showNotification(
|
||||
"Error membaca file Excel. Pastikan format file benar.",
|
||||
"error"
|
||||
);
|
||||
}
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
}
|
||||
|
||||
// Enhanced export function
|
||||
function exportToExcel() {
|
||||
const ws = XLSX.utils.json_to_sheet(
|
||||
filteredData.map((item, index) => ({
|
||||
No: index + 1,
|
||||
Teks: item.text,
|
||||
Sentimen: item.sentiment,
|
||||
}))
|
||||
);
|
||||
|
||||
const wb = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(wb, ws, "Data Sentimen");
|
||||
XLSX.writeFile(
|
||||
wb,
|
||||
`analisis_sentimen_${new Date().toISOString().split("T")[0]}.xlsx`
|
||||
);
|
||||
showNotification("Data berhasil diexport ke Excel!", "success");
|
||||
}
|
||||
|
||||
// Update stats and chart
|
||||
function updateStats() {
|
||||
const total = sentimentData.length;
|
||||
const positive = sentimentData.filter(
|
||||
(item) => item.sentiment === "Positif"
|
||||
).length;
|
||||
const negative = total - positive;
|
||||
const accuracy = 76; // Static accuracy
|
||||
|
||||
// Calculate percentages
|
||||
const positivePercent =
|
||||
total > 0 ? Math.round((positive / total) * 100) : 0;
|
||||
const negativePercent =
|
||||
total > 0 ? Math.round((negative / total) * 100) : 0;
|
||||
|
||||
// Update stats cards
|
||||
document.getElementById("totalComments").textContent =
|
||||
total.toLocaleString();
|
||||
document.getElementById("positiveCount").textContent =
|
||||
positive.toLocaleString();
|
||||
document.getElementById("negativeCount").textContent =
|
||||
negative.toLocaleString();
|
||||
document.getElementById("accuracy").textContent = accuracy + "%";
|
||||
|
||||
// Update percentage text in cards
|
||||
document.getElementById("positivePercent").textContent =
|
||||
positivePercent + "% dari total";
|
||||
document.getElementById("negativePercent").textContent =
|
||||
negativePercent + "% dari total";
|
||||
|
||||
// Update progress bars
|
||||
document.getElementById("positiveProgress").style.width =
|
||||
positivePercent + "%";
|
||||
document.getElementById("negativeProgress").style.width =
|
||||
negativePercent + "%";
|
||||
|
||||
// Update chart
|
||||
if (sentimentChart) {
|
||||
sentimentChart.data.datasets[0].data = [positive, negative];
|
||||
sentimentChart.update();
|
||||
}
|
||||
|
||||
// Update percentage displays in chart section
|
||||
document.querySelector(
|
||||
".grid.grid-cols-2.gap-4.mt-6 .text-center:first-child .text-2xl"
|
||||
).textContent = positivePercent + "%";
|
||||
document.querySelector(
|
||||
".grid.grid-cols-2.gap-4.mt-6 .text-center:last-child .text-2xl"
|
||||
).textContent = negativePercent + "%";
|
||||
}
|
||||
|
||||
// Notification system
|
||||
function showNotification(message, type = "info") {
|
||||
const notification = document.createElement("div");
|
||||
const bgColor = {
|
||||
success: "bg-green-500",
|
||||
error: "bg-red-500",
|
||||
warning: "bg-yellow-500",
|
||||
info: "bg-blue-500",
|
||||
}[type];
|
||||
|
||||
notification.className = `fixed top-4 right-4 ${bgColor} text-white px-6 py-4 rounded-xl shadow-lg z-50 transform translate-x-full transition-transform duration-300`;
|
||||
notification.innerHTML = `
|
||||
<div class="flex items-center gap-3">
|
||||
<i class="fas ${
|
||||
type === "success"
|
||||
? "fa-check-circle"
|
||||
: type === "error"
|
||||
? "fa-exclamation-circle"
|
||||
: type === "warning"
|
||||
? "fa-exclamation-triangle"
|
||||
: "fa-info-circle"
|
||||
}"></i>
|
||||
<span class="font-medium">${message}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
setTimeout(() => {
|
||||
notification.classList.remove("translate-x-full");
|
||||
}, 100);
|
||||
|
||||
setTimeout(() => {
|
||||
notification.classList.add("translate-x-full");
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(notification);
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Tab switching functionality
|
||||
function switchTab(tabName) {
|
||||
// Hide all tab contents
|
||||
document.getElementById("predictionContent").classList.add("hidden");
|
||||
document.getElementById("dataContent").classList.add("hidden");
|
||||
|
||||
// Reset all tab buttons
|
||||
document.getElementById("predictionTab").className =
|
||||
"tab-btn px-6 py-3 rounded-xl font-semibold transition-all duration-300 text-gray-600 hover:text-gray-800";
|
||||
document.getElementById("dataTab").className =
|
||||
"tab-btn px-6 py-3 rounded-xl font-semibold transition-all duration-300 text-gray-600 hover:text-gray-800";
|
||||
|
||||
// Show selected tab content and activate button
|
||||
if (tabName === "prediction") {
|
||||
document
|
||||
.getElementById("predictionContent")
|
||||
.classList.remove("hidden");
|
||||
document.getElementById("predictionTab").className =
|
||||
"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";
|
||||
document.getElementById("dataActions").classList.add("hidden");
|
||||
} else if (tabName === "data") {
|
||||
document.getElementById("dataContent").classList.remove("hidden");
|
||||
document.getElementById("dataTab").className =
|
||||
"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";
|
||||
document.getElementById("dataActions").classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize on page load
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
initCharts();
|
||||
updateTable();
|
||||
updatePagination();
|
||||
updateStats();
|
||||
});
|
||||
|
|
@ -0,0 +1,486 @@
|
|||
<!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>
|
||||
Loading…
Reference in New Issue