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