MIF_E31230820/resources/views/dashboard.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Dashboard</title>

    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-green-50">

<div class="p-10">

    <h1 class="text-4xl font-bold text-green-700 mb-8">
        Dashboard Klasifikasi Daun Padi
    </h1>

    <!-- Statistik -->

    <div class="grid md:grid-cols-5 gap-6 mb-10">

        <div class="bg-white p-6 rounded-xl shadow">
            <h2 class="text-gray-500">Total Prediksi</h2>
            <p class="text-4xl font-bold text-green-700 mt-2">
                {{ $totalPrediksi }}
            </p>
        </div>

        <div class="bg-white p-6 rounded-xl shadow">
            <h2 class="text-gray-500">Blast</h2>
            <p class="text-4xl font-bold text-red-600 mt-2">
                {{ $blast }}
            </p>
        </div>

        <div class="bg-white p-6 rounded-xl shadow">
            <h2 class="text-gray-500">Blight</h2>
            <p class="text-4xl font-bold text-yellow-600 mt-2">
                {{ $blight }}
            </p>
        </div>

        <div class="bg-white p-6 rounded-xl shadow">
            <h2 class="text-gray-500">Healthy</h2>
            <p class="text-4xl font-bold text-green-600 mt-2">
                {{ $healthy }}
            </p>
        </div>

        <div class="bg-white p-6 rounded-xl shadow">
            <h2 class="text-gray-500">Tungro</h2>
            <p class="text-4xl font-bold text-orange-600 mt-2">
                {{ $tungro }}
            </p>
        </div>

    </div>

    <!-- Evaluasi Model -->

    <div class="grid md:grid-cols-4 gap-6 mb-10">

        <div class="bg-white p-6 rounded-2xl shadow">
            <h2 class="text-gray-500 mb-2">Accuracy</h2>
            <p class="text-4xl font-bold text-green-600">
                96%
            </p>
        </div>

        <div class="bg-white p-6 rounded-2xl shadow">
            <h2 class="text-gray-500 mb-2">Precision</h2>
            <p class="text-4xl font-bold text-blue-600">
                95%
            </p>
        </div>

        <div class="bg-white p-6 rounded-2xl shadow">
            <h2 class="text-gray-500 mb-2">Recall</h2>
            <p class="text-4xl font-bold text-yellow-500">
                94%
            </p>
        </div>

        <div class="bg-white p-6 rounded-2xl shadow">
            <h2 class="text-gray-500 mb-2">F1-Score</h2>
            <p class="text-4xl font-bold text-red-500">
                95%
            </p>
        </div>

    </div>

    <!-- Chart -->

    <div class="bg-white p-6 rounded-xl shadow mb-10">

        <h2 class="text-2xl font-bold mb-6 text-green-700">
            Statistik Penyakit
        </h2>

        <canvas id="chartPenyakit"></canvas>

    </div>

    <!-- Confusion Matrix -->

    <div class="bg-white p-8 rounded-3xl shadow mb-10">

        <h2 class="text-3xl font-bold text-green-700 mb-6">
            Confusion Matrix
        </h2>

        <img src="https://miro.medium.com/v2/resize:fit:1200/1*Z54JgbS4DUwWSknhDCvNTQ.png"
             class="rounded-2xl shadow-lg mx-auto">

    </div>

    <!-- Tabel -->

    <div class="bg-white p-6 rounded-xl shadow">

        <h2 class="text-2xl font-bold mb-6 text-green-700">
            Prediksi Terbaru
        </h2>

        <table class="w-full">

            <thead>

                <tr class="bg-green-600 text-white">

                    <th class="p-3">Gambar</th>
                    <th class="p-3">Penyakit</th>
                    <th class="p-3">Confidence</th>
                    <th class="p-3">Tanggal</th>

                </tr>

            </thead>

            <tbody>

                @foreach($terbaru as $item)

                <tr class="border-b text-center">

                    <td class="p-3">
                        <img src="{{ asset('uploads/' . $item->gambar) }}"
                             class="w-20 h-20 object-cover rounded mx-auto">
                    </td>

                    <td class="p-3 font-semibold">
                        {{ $item->penyakit }}
                    </td>

                    <td class="p-3">
                        {{ $item->confidence }}%
                    </td>

                    <td class="p-3">
                        {{ $item->created_at }}
                    </td>

                </tr>

                @endforeach

            </tbody>

        </table>

    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

const ctx = document.getElementById('chartPenyakit');

new Chart(ctx, {
    type: 'bar',

    data: {
        labels: ['Blast', 'Blight', 'Healthy', 'Tungro'],

        datasets: [{
            label: 'Jumlah Data',

            data: [
                {{ $blast }},
                {{ $blight }},
                {{ $healthy }},
                {{ $tungro }}
            ],

            borderWidth: 1
        }]
    },

    options: {
        responsive: true
    }
});

</script>

</body>
</html>