EssamZarei/Animal-Lite

1// Labels for the models
2const labels = ['InceptionV3', 'DenseNet', 'VGG19'];
3
4// Data for each metric
5const accuracyData = [95, 94, 74];
6const precisionData = [96, 94.5, 76];
7const recallData = [95, 94, 74];
8const f1ScoreData = [95.5, 94, 73];
9
10// Creating the chart
11const ctx = document.getElementById('metricsChart').getContext('2d');
12new Chart(ctx, {
13  type: 'bar',
14  data: {
15    labels: labels,
16    datasets: [
17      {
18        label: 'Accuracy (%)',
19        data: accuracyData,
20        backgroundColor: 'rgba(54, 162, 235, 0.6)',
21        borderColor: 'rgba(54, 162, 235, 1)',
22        borderWidth: 1
23      },
24      {
25        label: 'Precision (%)',
26        data: precisionData,
27        backgroundColor: 'rgba(75, 192, 192, 0.6)',
28        borderColor: 'rgba(75, 192, 192, 1)',
29        borderWidth: 1
30      },
31      {
32        label: 'Recall (%)',
33        data: recallData,
34        backgroundColor: 'rgba(153, 102, 255, 0.6)',
35        borderColor: 'rgba(153, 102, 255, 1)',
36        borderWidth: 1
37      },
38      {
39        label: 'F1-Score (%)',
40        data: f1ScoreData,
41        backgroundColor: 'rgba(255, 159, 64, 0.6)',
42        borderColor: 'rgba(255, 159, 64, 1)',
43        borderWidth: 1
44      }
45    ]
46  },
47  options: {
48    responsive: true,
49    scales: {
50      y: {
51        beginAtZero: true,
52        max: 100,
53        ticks: {
54          stepSize: 10
55        }
56      }
57    },
58    plugins: {
59      title: {
60        display: true,
61        text: 'Model Performance Metrics Comparison'
62      }
63    }
64  }
65});
66