-
Notifications
You must be signed in to change notification settings - Fork 0
/
resultSamplepage.html
executable file
·151 lines (148 loc) · 7.35 KB
/
resultSamplepage.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Model Description with Highcharts</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f0f2f5;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 50px auto;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
}
h1 {
text-align: center;
color: #333;
}
.chart-container {
margin-top: 50px;
opacity: 0; /* Initially hidden for animation */
}
</style>
</head>
<body>
<div class="container animate__animated animate__fadeInUp">
<h1>Model Description with Highcharts</h1>
<div id="container1" class="chart-container"></div>
<div id="container2" class="chart-container"></div>
</div>
<script>
$(document).ready(function() {
// Animate chart containers
$('#container1').css('opacity', 0).animate({ opacity: 1 }, 2000);
$('#container2').css('opacity', 0).animate({ opacity: 1 }, 2000);
Highcharts.chart('container1', {
chart: {
type: 'column'
},
title: {
text: 'Model Layer Parameters'
},
xAxis: {
categories: [
'Input Layer', 'Conv2D 1', 'Conv2D 2', 'MaxPooling2D 1', 'Conv2D 3', 'Conv2D 4',
'MaxPooling2D 2', 'Conv2D 5', 'Conv2D 6', 'MaxPooling2D 3', 'Conv2D 7', 'Conv2D 8',
'Conv2DTranspose 1', 'Concatenate 1', 'Conv2D 9', 'Conv2D 10', 'Conv2DTranspose 2',
'Concatenate 2', 'Conv2D 11', 'Conv2D 12', 'Conv2DTranspose 3', 'Concatenate 3',
'Conv2D 13', 'Conv2D 14', 'Output Layer'
]
},
yAxis: {
min: 0,
title: {
text: 'Number of Parameters'
}
},
series: [{
name: 'Parameters',
data: [
0, 1744, 2320, 0, 4640, 9248, 0, 18496, 36928, 0, 73856, 147584,
131200, 0, 295040, 147584, 32832, 0, 73792, 36928, 8224, 0, 18464, 9248, 17
]
}]
});
Highcharts.chart('container2', {
title: {
text: 'Training and Validation Metrics'
},
xAxis: {
categories: [
'Epoch 1', 'Epoch 2', 'Epoch 3', 'Epoch 4', 'Epoch 5', 'Epoch 6', 'Epoch 7', 'Epoch 8',
'Epoch 9', 'Epoch 10', 'Epoch 11', 'Epoch 12', 'Epoch 13', 'Epoch 14', 'Epoch 15',
'Epoch 16', 'Epoch 17', 'Epoch 18', 'Epoch 19', 'Epoch 20', 'Epoch 21', 'Epoch 22',
'Epoch 23', 'Epoch 24', 'Epoch 25', 'Epoch 26', 'Epoch 27', 'Epoch 28', 'Epoch 29',
'Epoch 30', 'Epoch 31', 'Epoch 32', 'Epoch 33', 'Epoch 34', 'Epoch 35', 'Epoch 36',
'Epoch 37', 'Epoch 38', 'Epoch 39', 'Epoch 40', 'Epoch 41', 'Epoch 42', 'Epoch 43',
'Epoch 44', 'Epoch 45', 'Epoch 46', 'Epoch 47', 'Epoch 48', 'Epoch 49', 'Epoch 50'
]
},
yAxis: {
title: {
text: 'Value'
}
},
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [{
name: 'Training Accuracy',
data: [
0.7817, 0.9965, 0.9977, 0.9979, 0.9973, 0.9978, 0.9983, 0.9984, 0.9986, 0.9987,
0.9987, 0.9988, 0.9988, 0.9990, 0.9986, 0.9990, 0.9991, 0.9991, 0.9992, 0.9991,
0.9991, 0.9990, 0.9989, 0.9991, 0.9992, 0.9989, 0.9992, 0.9992, 0.9993, 0.9991,
0.9992, 0.9994, 0.9993, 0.9993, 0.9994, 0.9993, 0.9994, 0.9987, 0.9992, 0.9993,
0.9993, 0.9989, 0.9993, 0.9994, 0.9994, 0.9994, 0.9994, 0.9993, 0.9994, 0.9995
]
}, {
name: 'Validation Accuracy',
data: [
0.9960, 0.9971, 0.9972, 0.9937, 0.9975, 0.9978, 0.9979, 0.9981, 0.9983, 0.9983,
0.9987, 0.9987, 0.9988, 0.9986, 0.9986, 0.9989, 0.9990, 0.9990, 0.9990, 0.9991,
0.9989, 0.9988, 0.9991, 0.9990, 0.9984, 0.9992, 0.9991, 0.9992, 0.9991, 0.9991,
0.9990, 0.9990, 0.9992, 0.9992, 0.9992, 0.9986, 0.9991, 0.9991, 0.9982, 0.9990,
0.9993, 0.9993, 0.9993, 0.9993, 0.9993, 0.9993, 0.9993, 0.9993, 0.9992, 0.9992
]
}, {
name: 'Training Loss',
data: [
0.4572, 0.0113, 0.0066, 0.0055, 0.0083, 0.0057, 0.0044, 0.0041, 0.0036, 0.0033,
0.0034, 0.0031, 0.0030, 0.0025, 0.0034, 0.0024, 0.0023, 0.0024, 0.0021, 0.0022,
0.0022, 0.0024, 0.0028, 0.0021, 0.0020, 0.0028, 0.0020, 0.0019, 0.0017, 0.0022,
0.0019, 0.0017, 0.0018, 0.0016, 0.0016, 0.0016, 0.0035, 0.0019, 0.0016, 0.0028,
0.0017, 0.0017, 0.0016, 0.0015, 0.0015, 0.0015, 0.0014, 0.0016, 0.0015, 0.0014
]
}, {
name: 'Validation Loss',
data: [
0.0114, 0.0080, 0.0076, 0.0193, 0.0062, 0.0052, 0.0050, 0.0045, 0.0045, 0.0042,
0.0034, 0.0032, 0.0029, 0.0035, 0.0033, 0.0027, 0.0025, 0.0025, 0.0024, 0.0022,
0.0027, 0.0028, 0.0023, 0.0024, 0.0038, 0.0021, 0.0022, 0.0020, 0.0021, 0.0022,
0.0024, 0.0022, 0.0021, 0.0020, 0.0019, 0.0018, 0.0035, 0.0023, 0.0022, 0.0048,
0.0024, 0.0018, 0.0017, 0.0017, 0.0017, 0.0017, 0.0017, 0.0017, 0.0016, 0.0019
]
}]
});
});
</script>
</body>
</html>