387 lines
12 KiB
HTML
387 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Akurasi Model</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
|
<style>
|
|
/* Basic Styling */
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f4f6f9;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Header Styling */
|
|
header {
|
|
background-color: #3498db;
|
|
color: white;
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Back Button Styling */
|
|
.back-button {
|
|
font-size: 35px;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 8%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.back-button i {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* Header Container */
|
|
.header-container h1 {
|
|
font-size: 40px;
|
|
margin-bottom: 10px;
|
|
color: white;
|
|
}
|
|
|
|
/* Content for Accuracy Metrics */
|
|
.main-content {
|
|
padding: 20px;
|
|
padding-top: 80px;
|
|
text-align: center;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Accuracy Metrics Container */
|
|
.accuracy-metrics {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* Individual Metric Section */
|
|
.accuracy-section {
|
|
flex: 1; /* Make each section take equal space */
|
|
text-align: center;
|
|
padding: 20px;
|
|
background-color: #6c5ce7;
|
|
color: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
|
|
margin: 10px; /* Added margin between sections */
|
|
}
|
|
|
|
/* Logo Styling */
|
|
.accuracy-section img {
|
|
width: 60px; /* Adjust the logo width */
|
|
height: 60px; /* Adjust the logo height */
|
|
margin-bottom: 0px;
|
|
object-fit: contain; /* Ensure the logo fits well without distortion */
|
|
}
|
|
|
|
/* Metric Text Styling */
|
|
.accuracy-section p {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.accuracy-value {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: #2ecc71;
|
|
}
|
|
|
|
.accuracy-section .section-title {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Footer Styling */
|
|
footer {
|
|
background-color: #3498db;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 20px;
|
|
font-size: 14px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Footer Links Styling */
|
|
footer .social-icons {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
footer .social-icons a {
|
|
color: white;
|
|
font-size: 20px;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
footer .social-icons a:hover {
|
|
color: #f39c12;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.accuracy-metrics {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.accuracy-section p {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.accuracy-value {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
/* Confusion Matrix Table Styling */
|
|
.confusion-matrices {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
justify-content: space-between;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.matrix-section {
|
|
flex: 1;
|
|
min-width: 250px;
|
|
background-color: #f7f7f7;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.matrix-section table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.matrix-section table th, .matrix-section table td {
|
|
padding: 8px;
|
|
text-align: center;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.matrix-section table th {
|
|
background-color: #3498db;
|
|
color: white;
|
|
}
|
|
|
|
.matrix-section h2 {
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header>
|
|
<div class="header-container">
|
|
<a href="/" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1>Akurasi Model</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Content Section -->
|
|
<div class="main-content">
|
|
<div class="accuracy-metrics">
|
|
<!-- Instagram Metrics Section -->
|
|
<div class="accuracy-section">
|
|
<img src="static/images/instagram.png" alt="Instagram Logo">
|
|
<p class="section-title">Akurasi Model Instagram Sebelum Balanced</p>
|
|
<div class="accuracy-value">{{ instagram_accuracy_unbalanced | round(2) }}%</div>
|
|
<p>Precision: {{ instagram_precision_unbalanced | round(2) }}</p>
|
|
<p>Recall: {{ instagram_recall_unbalanced | round(2) }}</p>
|
|
<p>F1 Score: {{ instagram_f1_unbalanced | round(2) }}</p>
|
|
</div>
|
|
|
|
<!-- Twitter Metrics Section -->
|
|
<div class="accuracy-section">
|
|
<img src="static/images/twitter.png" alt="X Logo">
|
|
<p class="section-title">Akurasi Model Twitter Sebelum Balanced</p>
|
|
<div class="accuracy-value">{{ twitter_accuracy_unbalanced | round(2) }}%</div>
|
|
<p>Precision: {{ twitter_precision_unbalanced | round(2) }}</p>
|
|
<p>Recall: {{ twitter_recall_unbalanced | round(2) }}</p>
|
|
<p>F1 Score: {{ twitter_f1_unbalanced | round(2) }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accuracy-metrics">
|
|
<!-- Instagram Metrics Section (Balanced) -->
|
|
<div class="accuracy-section">
|
|
<img src="static/images/instagram.png" alt="Instagram Logo" alt="Instagram Logo">
|
|
<p class="section-title">Akurasi Model Instagram Setelah Balanced</p>
|
|
<div class="accuracy-value">{{ instagram_accuracy_balanced | round(2) }}%</div>
|
|
<p>Precision: {{ instagram_precision_balanced | round(2) }}</p>
|
|
<p>Recall: {{ instagram_recall_balanced | round(2) }}</p>
|
|
<p>F1 Score: {{ instagram_f1_balanced | round(2) }}</p>
|
|
</div>
|
|
|
|
<!-- Twitter Metrics Section (Balanced) -->
|
|
<div class="accuracy-section">
|
|
<img src="static/images/twitter.png" alt="X Logo">
|
|
<p class="section-title">Akurasi Model Twitter Setelah Balanced</p>
|
|
<div class="accuracy-value">{{ twitter_accuracy_balanced | round(2) }}%</div>
|
|
<p>Precision: {{ twitter_precision_balanced | round(2) }}</p>
|
|
<p>Recall: {{ twitter_recall_balanced | round(2) }}</p>
|
|
<p>F1 Score: {{ twitter_f1_balanced | round(2) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Confusion Matrix Section -->
|
|
<div class="confusion-matrices">
|
|
<div class="matrix-section">
|
|
<h2>Instagram Confusion Matrix (Unbalanced)</h2>
|
|
<table>
|
|
<tr>
|
|
<th></th>
|
|
<th>Predicted Positif</th>
|
|
<th>Predicted Negatif</th>
|
|
<th>Predicted Netral</th> <!-- Tambahkan kolom untuk Netral -->
|
|
</tr>
|
|
<tr>
|
|
<th>Actual Positif</th>
|
|
<td>{{ instagram_conf_matrix_unbalanced[0][0] }}</td>
|
|
<td>{{ instagram_conf_matrix_unbalanced[0][1] }}</td>
|
|
<td>{{ instagram_conf_matrix_unbalanced[0][2] }}</td> <!-- Tambahkan kolom untuk Netral -->
|
|
</tr>
|
|
<tr>
|
|
<th>Actual Negatif</th>
|
|
<td>{{ instagram_conf_matrix_unbalanced[1][0] }}</td>
|
|
<td>{{ instagram_conf_matrix_unbalanced[1][1] }}</td>
|
|
<td>{{ instagram_conf_matrix_unbalanced[1][2] }}</td> <!-- Tambahkan kolom untuk Netral -->
|
|
</tr>
|
|
<tr>
|
|
<th>Actual Netral</th>
|
|
<td>{{ instagram_conf_matrix_unbalanced[2][0] }}</td> <!-- Tambahkan baris untuk Netral -->
|
|
<td>{{ instagram_conf_matrix_unbalanced[2][1] }}</td>
|
|
<td>{{ instagram_conf_matrix_unbalanced[2][2] }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="matrix-section">
|
|
<h2>Instagram Confusion Matrix (Balanced)</h2>
|
|
<table>
|
|
<tr>
|
|
<th></th>
|
|
<th>Predicted Positif</th>
|
|
<th>Predicted Negatif</th>
|
|
<th>Predicted Netral</th> <!-- Tambahkan kolom untuk Netral -->
|
|
</tr>
|
|
<tr>
|
|
<th>Actual Positif</th>
|
|
<td>{{ instagram_conf_matrix_balanced[0][0] }}</td>
|
|
<td>{{ instagram_conf_matrix_balanced[0][1] }}</td>
|
|
<td>{{ instagram_conf_matrix_balanced[0][2] }}</td> <!-- Tambahkan kolom untuk Netral -->
|
|
</tr>
|
|
<tr>
|
|
<th>Actual Negatif</th>
|
|
<td>{{ instagram_conf_matrix_balanced[1][0] }}</td>
|
|
<td>{{ instagram_conf_matrix_balanced[1][1] }}</td>
|
|
<td>{{ instagram_conf_matrix_balanced[1][2] }}</td> <!-- Tambahkan kolom untuk Netral -->
|
|
</tr>
|
|
<tr>
|
|
<th>Actual Netral</th>
|
|
<td>{{ instagram_conf_matrix_balanced[2][0] }}</td> <!-- Tambahkan baris untuk Netral -->
|
|
<td>{{ instagram_conf_matrix_balanced[2][1] }}</td>
|
|
<td>{{ instagram_conf_matrix_balanced[2][2] }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="matrix-section">
|
|
<h2>Twitter Confusion Matrix (Unbalanced)</h2>
|
|
<table>
|
|
<tr>
|
|
<th></th>
|
|
<th>Predicted Positif</th>
|
|
<th>Predicted Negatif</th>
|
|
<th>Predicted Netral</th> <!-- Tambahkan kolom untuk Netral -->
|
|
</tr>
|
|
<tr>
|
|
<th>Actual Positif</th>
|
|
<td>{{ twitter_conf_matrix_unbalanced[0][0] }}</td>
|
|
<td>{{ twitter_conf_matrix_unbalanced[0][1] }}</td>
|
|
<td>{{ twitter_conf_matrix_unbalanced[0][2] }}</td> <!-- Tambahkan kolom untuk Netral -->
|
|
</tr>
|
|
<tr>
|
|
<th>Actual Negatif</th>
|
|
<td>{{ twitter_conf_matrix_unbalanced[1][0] }}</td>
|
|
<td>{{ twitter_conf_matrix_unbalanced[1][1] }}</td>
|
|
<td>{{ twitter_conf_matrix_unbalanced[1][2] }}</td> <!-- Tambahkan kolom untuk Netral -->
|
|
</tr>
|
|
<tr>
|
|
<th>Actual Netral</th>
|
|
<td>{{ twitter_conf_matrix_unbalanced[2][0] }}</td> <!-- Tambahkan baris untuk Netral -->
|
|
<td>{{ twitter_conf_matrix_unbalanced[2][1] }}</td>
|
|
<td>{{ twitter_conf_matrix_unbalanced[2][2] }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="matrix-section">
|
|
<h2>Twitter Confusion Matrix (Balanced)</h2>
|
|
<table>
|
|
<tr>
|
|
<th></th>
|
|
<th>Predicted Positif</th>
|
|
<th>Predicted Negatif</th>
|
|
<th>Predicted Netral</th> <!-- Tambahkan kolom untuk Netral -->
|
|
</tr>
|
|
<tr>
|
|
<th>Actual Positif</th>
|
|
<td>{{ twitter_conf_matrix_balanced[0][0] }}</td>
|
|
<td>{{ twitter_conf_matrix_balanced[0][1] }}</td>
|
|
<td>{{ twitter_conf_matrix_balanced[0][2] }}</td> <!-- Tambahkan kolom untuk Netral -->
|
|
</tr>
|
|
<tr>
|
|
<th>Actual Negatif</th>
|
|
<td>{{ twitter_conf_matrix_balanced[1][0] }}</td>
|
|
<td>{{ twitter_conf_matrix_balanced[1][1] }}</td>
|
|
<td>{{ twitter_conf_matrix_balanced[1][2] }}</td> <!-- Tambahkan kolom untuk Netral -->
|
|
</tr>
|
|
<tr>
|
|
<th>Actual Netral</th>
|
|
<td>{{ twitter_conf_matrix_balanced[2][0] }}</td> <!-- Tambahkan baris untuk Netral -->
|
|
<td>{{ twitter_conf_matrix_balanced[2][1] }}</td>
|
|
<td>{{ twitter_conf_matrix_balanced[2][2] }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<footer>
|
|
<p>© 2025 Sentiment Analysis App. All rights reserved.</p>
|
|
<div class="social-icons">
|
|
<a href="#" class="fab fa-instagram"></a>
|
|
<a href="#" class="fab fa-twitter"></a>
|
|
<a href="#" class="fab fa-linkedin"></a>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|