<!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>&copy; 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>
