-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgpu-stats.html
250 lines (234 loc) · 18.2 KB
/
gpu-stats.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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html>
<head>
<title>GPU stats</title>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<style>
body {
font-family: 'Ubuntu', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
color: #333;
}
#app {
max-width: 900px;
margin: 0 auto;
background: white;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
font-family: 'Ubuntu', sans-serif;
color: #333;
text-align: center;
}
h2 {
color: #666;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
.green {
color: green;
}
.orange {
color: orange;
}
.red {
color: red;
}
.header {
display: flex;
align-items: center;
gap: 10px; /* Adjust spacing between icon and title */
}
.st0 {
fill: #000000;
}
</style>
</head>
<body>
<div id="app">
<div class="header">
<!-- Begin SVG code for the GPU icon -->
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="64.000000pt" height="64.000000pt" viewBox="0 0 64.000000 64.000000"
preserveAspectRatio="xMidYMid meet">
<path d="M6 18c0 1.3-.7 2-2 2-1.1 0-2 .4-2 1 0 .5.9 1 2 1 1.9 0 2 .7 2 14 0 8.7.4 14 1 14s1-.9 1-2c0-1.8.7-2 7.9-2 5.4 0 8.1.4 8.5 1.2.5 1 .7 1 1.2 0 .3-.6 1.8-1.2 3.4-1.2 1.6 0 3.1.6 3.4 1.2.5 1 .7 1 1.2 0 .4-.9 4.1-1.2 13.5-1.2H60V16H33C6.7 16 6 16 6 18zm52 13v13H8V18h50v13z"/>
<path d="M16.1 22.4C7.4 27.2 11.1 41 21 41c5.1 0 10-4.9 10-9.9 0-7.5-8.3-12.4-14.9-8.7zm9.7 2.2c2.7 1.9 2.8 3.4.2 3.4-2.8 0-2.5 1.7.5 2.4 2.9.7 3.1 2.2.9 5.4-1.9 2.7-3.4 2.8-3.4.2 0-2.8-1.7-2.5-2.4.5-.7 2.9-2.2 3.1-5.4.9-2.7-1.9-2.8-3.4-.2-3.4 2.8 0 2.5-1.7-.5-2.4-2.9-.7-3.1-2.2-.9-5.4 1.9-2.7 3.4-2.8 3.4-.2 0 2.8 1.7 2.5 2.4-.5.7-2.9 2.2-3.1 5.4-.9z"/>
<path d="M20 31c0 .5.5 1 1 1 .6 0 1-.5 1-1 0-.6-.4-1-1-1-.5 0-1 .4-1 1zM40.1 22.4C31.4 27.2 35.1 41 45 41c5.1 0 10-4.9 10-9.9 0-7.5-8.3-12.4-14.9-8.7zm9.7 2.2c2.7 1.9 2.8 3.4.2 3.4-2.8 0-2.5 1.7.5 2.4 2.9.7 3.1 2.2.9 5.4-1.9 2.7-3.4 2.8-3.4.2 0-2.8-1.7-2.5-2.4.5-.7 2.9-2.2 3.1-5.4.9-2.7-1.9-2.8-3.4-.2-3.4 2.8 0 2.5-1.7-.5-2.4-2.9-.7-3.1-2.2-.9-5.4 1.9-2.7 3.4-2.8 3.4-.2 0 2.8 1.7 2.5 2.4-.5.7-2.9 2.2-3.1 5.4-.9z"/>
<path d="M44 31c0 .5.5 1 1 1 .6 0 1-.5 1-1 0-.6-.4-1-1-1-.5 0-1 .4-1 1z"/>
</svg>
<!-- End SVG code -->
<h1>GPU stats</h1>
</div>
<div>
<a href="#" @click="showServersEdit = !showServersEdit" style="color: black; text-decoration: none;">
<svg width="14px" height="14px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 3H13C13.5523 3 14 3.44772 14 4V4.56879C14 4.99659 14.2871 5.36825 14.6822 5.53228C15.0775 5.69638 15.5377 5.63384 15.8403 5.33123L16.2426 4.92891C16.6331 4.53838 17.2663 4.53838 17.6568 4.92891L19.071 6.34312C19.4616 6.73365 19.4615 7.36681 19.071 7.75734L18.6688 8.1596C18.3661 8.46223 18.3036 8.92247 18.4677 9.31774C18.6317 9.71287 19.0034 10 19.4313 10L20 10C20.5523 10 21 10.4477 21 11V13C21 13.5523 20.5523 14 20 14H19.4312C19.0034 14 18.6318 14.2871 18.4677 14.6822C18.3036 15.0775 18.3661 15.5377 18.6688 15.8403L19.071 16.2426C19.4616 16.6331 19.4616 17.2663 19.071 17.6568L17.6568 19.071C17.2663 19.4616 16.6331 19.4616 16.2426 19.071L15.8403 18.6688C15.5377 18.3661 15.0775 18.3036 14.6822 18.4677C14.2871 18.6318 14 19.0034 14 19.4312V20C14 20.5523 13.5523 21 13 21H11C10.4477 21 10 20.5523 10 20V19.4313C10 19.0034 9.71287 18.6317 9.31774 18.4677C8.92247 18.3036 8.46223 18.3661 8.1596 18.6688L7.75732 19.071C7.36679 19.4616 6.73363 19.4616 6.34311 19.071L4.92889 17.6568C4.53837 17.2663 4.53837 16.6331 4.92889 16.2426L5.33123 15.8403C5.63384 15.5377 5.69638 15.0775 5.53228 14.6822C5.36825 14.2871 4.99659 14 4.56879 14H4C3.44772 14 3 13.5523 3 13V11C3 10.4477 3.44772 10 4 10L4.56877 10C4.99658 10 5.36825 9.71288 5.53229 9.31776C5.6964 8.9225 5.63386 8.46229 5.33123 8.15966L4.92891 7.75734C4.53838 7.36681 4.53838 6.73365 4.92891 6.34313L6.34312 4.92891C6.73365 4.53839 7.36681 4.53839 7.75734 4.92891L8.15966 5.33123C8.46228 5.63386 8.9225 5.6964 9.31776 5.53229C9.71288 5.36825 10 4.99658 10 4.56876V4C10 3.44772 10.4477 3 11 3Z"
stroke="#000000" stroke-width="1.5"/>
<path d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z"
stroke="#000000" stroke-width="1.5"/>
</svg>
Servers
</a> |
<label for="refresh-interval">Refresh Interval:</label>
<select id="refresh-interval" v-model="refreshInterval">
<option value="2000">2 sec</option>
<option value="5000">5 sec</option>
<option value="10000">10 sec</option>
<option value="30000">30 sec</option>
<option value="60000">60 sec</option>
</select>
</div>
<div v-if="showServersEdit">
<textarea v-model="serverListText" rows="5" style="width: 100%;"></textarea>
<button @click="saveServers">Save</button>
</div>
<div v-for="(serverData, serverIP) in servers" :key="serverIP">
<h2>{{ serverData.hostname ? `${serverData.hostname} (${serverIP})` : serverIP }}</h2>
<table v-if="serverData.GPUs">
<tr>
<th>ID</th>
<th>
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
viewBox="0 0 512 512"><path d="M169.547 169.547v172.908h38.762v-15.208h-23.554V184.755h142.492v142.492h-98.658v15.208h113.866V169.547z"/>
<path d="M512 283.675v-55.354h-92.878v-30.256H512v-55.354h-92.878V92.879h-49.837V0h-55.354v92.879h-30.256V0h-55.354v92.879h-30.256V0h-55.354v92.879H92.879v49.836H0v55.354h92.879v30.256H0v55.354h92.879v30.256H0v55.354h92.879v49.833h49.836V512h55.354v-92.878h30.256V512h55.354v-92.878h30.256V512h55.354v-92.878h49.833v-49.838H512V313.93h-92.878v-30.256H512zM92.879 354.08H15.208v-24.938h77.671v24.938zm0-85.609H15.208v-24.938h77.671v24.938zm0-85.61H15.208v-24.938h77.671v24.938zm326.243-24.941h77.67v24.938h-77.67V157.92zM329.139 15.208h24.938v77.671h-24.938V15.208zm-85.61 0h24.938v77.671h-24.938V15.208zm-85.609 0h24.938v77.671H157.92V15.208zm24.941 481.584h-24.938v-77.67h24.938v77.67zm85.61 0h-24.938v-77.67h24.938v77.67zm60.671 0v-77.67h24.938v77.67h-24.938zm74.772-354.081h-.001v55.354h.001v30.256h-.001v55.354h.001v30.256h-.001v55.354h.001v34.63h-34.625v-.001h-55.354v.001h-30.256v-.001h-55.354v.001h-30.256v-.001h-55.354v.001h-34.628V108.088H403.915v34.623zm92.878 186.428v24.938h-77.67v-24.938h77.67zm-77.67-60.672v-24.938h77.67v24.938h-77.67z"/></svg>
Utilization
</th>
<th>
<svg width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 15.9998C11.4477 15.9998 11 16.4475 11 16.9998C11 17.5521 11.4477 17.9998 12 17.9998C12.5523 17.9998 13 17.5521 13 16.9998C13 16.4475 12.5523 15.9998 12 15.9998ZM12 15.9998L12.0071 10.5M12 16.9998L12.0071 17.0069M16 16.9998C16 19.209 14.2091 20.9998 12 20.9998C9.79086 20.9998 8 19.209 8 16.9998C8 15.9854 8.37764 15.0591 9 14.354L9 6C9 4.34315 10.3431 3 12 3C13.6569 3 15 4.34315 15 6V14.354C15.6224 15.0591 16 15.9854 16 16.9998Z"
stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Temperature
</th>
<th>
<svg width="16px" height="16px" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="_x32_"
version="1.1"
viewBox="0 0 512 512">
<path d="M165.394 285.996a4.217 4.217 0 0 0 0-5.958l-1.086-1.086a4.215 4.215 0 0 0-5.956 0l-8.247 8.232 7.058 7.05 8.231-8.238zM171.249 308.328l8.246-8.232a4.214 4.214 0 0 0 0-5.957l-1.1-1.101a4.216 4.216 0 0 0-5.957 0l-8.232 8.247 7.043 7.043zM193.581 308.225l-1.086-1.086a4.214 4.214 0 0 0-5.957 0l-8.246 8.232 7.058 7.05 8.232-8.238a4.218 4.218 0 0 0-.001-5.958zM207.667 328.276a4.194 4.194 0 0 0 .015-5.95l-1.1-1.1a4.215 4.215 0 0 0-5.958 0l-8.232 8.246 7.043 7.043 8.232-8.239zM96.035 341.255l-8.231 8.239a4.204 4.204 0 0 0 0 5.949l1.1 1.101a4.215 4.215 0 0 0 5.958 0l8.232-8.232-7.059-7.057zM110.135 355.355l-8.232 8.231a4.217 4.217 0 0 0 0 5.958l1.086 1.086a4.215 4.215 0 0 0 5.958 0l8.232-8.232-7.044-7.043zM124.221 369.441l-8.231 8.239a4.207 4.207 0 0 0 0 5.95l1.085 1.101a4.217 4.217 0 0 0 5.958 0l8.247-8.239-7.059-7.051zM138.322 383.535l-8.232 8.239a4.22 4.22 0 0 0-.015 5.95l1.1 1.093a4.217 4.217 0 0 0 5.958 0l8.232-8.232-7.043-7.05zM220.667 335.319c-1.629-1.635-4.3-1.635-5.942.008l-8.247 8.232 7.043 7.043 8.247-8.232a4.217 4.217 0 0 0 0-5.958l-1.101-1.093zM174.432 410.852l-84.56-84.56 45.265-45.266 84.56 84.56zM144.177 405.867a4.206 4.206 0 0 0 0 5.95l1.086 1.093a4.21 4.21 0 0 0 5.957 0l8.232-8.239-7.043-7.043-8.232 8.239zM260.974 190.43a4.214 4.214 0 0 0 0-5.957l-1.1-1.1a4.215 4.215 0 0 0-5.958 0l-8.232 8.246 7.043 7.043 8.247-8.232zM266.828 212.755l8.232-8.239a4.214 4.214 0 0 0 0-5.957l-1.086-1.086a4.217 4.217 0 0 0-5.958 0l-8.246 8.232 7.058 7.05zM289.161 212.653l-1.1-1.093a4.217 4.217 0 0 0-5.958 0l-8.232 8.246 7.043 7.043 8.246-8.239a4.215 4.215 0 0 0 .001-5.957zM303.247 232.704a4.217 4.217 0 0 0 0-5.958l-1.101-1.093a4.203 4.203 0 0 0-5.942.008l-8.246 8.232 7.058 7.043 8.231-8.232zM184.468 260.964a4.217 4.217 0 0 0 5.958 0l8.232-8.232-7.043-7.043-8.232 8.232c-1.643 1.643-1.658 4.314 0 5.957l1.085 1.086zM197.469 268.014a4.206 4.206 0 0 0 0 5.949l1.1 1.101a4.196 4.196 0 0 0 5.942 0l8.247-8.239-7.058-7.05-8.231 8.239zM211.57 288.065l1.086 1.086a4.215 4.215 0 0 0 5.958 0l8.232-8.232-7.043-7.043-8.232 8.232a4.213 4.213 0 0 0-.001 5.957zM233.888 287.962l-8.232 8.232a4.214 4.214 0 0 0 0 5.957l1.1 1.101a4.192 4.192 0 0 0 5.943-.008l8.246-8.232-7.057-7.05zM316.248 239.747a4.215 4.215 0 0 0-5.958 0l-8.232 8.246 7.043 7.043 8.232-8.239a4.202 4.202 0 0 0 0-5.957l-1.085-1.093zM185.452 230.715l84.546 84.554 45.266-45.267-84.561-84.553zM239.757 310.294a4.22 4.22 0 0 0-.014 5.95l1.1 1.093a4.21 4.21 0 0 0 5.957 0l8.232-8.232-7.043-7.05-8.232 8.239zM356.539 94.85a4.214 4.214 0 0 0 0-5.957l-1.086-1.086a4.217 4.217 0 0 0-5.958 0l-8.246 8.232 7.058 7.05 8.232-8.239zM362.394 117.183l8.246-8.239a4.207 4.207 0 0 0 0-5.95l-1.1-1.1a4.217 4.217 0 0 0-5.958 0l-8.232 8.246 7.044 7.043zM376.495 131.276l8.232-8.239a4.216 4.216 0 0 0 0-5.957l-1.086-1.086a4.217 4.217 0 0 0-5.958 0l-8.246 8.232 7.058 7.05zM390.581 145.37l8.232-8.239c1.643-1.644 1.658-4.307.014-5.95l-1.1-1.1a4.217 4.217 0 0 0-5.958 0l-8.232 8.239 7.044 7.05zM280.049 165.398a4.217 4.217 0 0 0 5.958 0l8.232-8.239-7.058-7.051-8.232 8.232a4.217 4.217 0 0 0 0 5.958l1.1 1.1zM301.281 164.21l-8.232 8.232a4.214 4.214 0 0 0 0 5.957l1.086 1.086a4.216 4.216 0 0 0 5.957 0l8.232-8.232-7.043-7.043zM315.367 178.296l-8.232 8.238a4.206 4.206 0 0 0 0 5.95l1.1 1.093a4.183 4.183 0 0 0 5.942 0l8.246-8.232-7.056-7.049zM329.468 192.389l-8.232 8.239a4.193 4.193 0 0 0-.014 5.95l1.101 1.093a4.213 4.213 0 0 0 5.956 0l8.232-8.232-7.043-7.05zM411.813 144.174c-1.629-1.636-4.299-1.636-5.943.008l-8.246 8.232 7.057 7.043 8.232-8.232a4.214 4.214 0 0 0 0-5.957l-1.1-1.094zM365.58 219.706l-84.56-84.56 45.266-45.266 84.56 84.56zM335.322 214.721a4.207 4.207 0 0 0 0 5.95l1.086 1.093a4.209 4.209 0 0 0 5.957 0l8.232-8.239-7.043-7.043-8.232 8.239z"
class="st0"/>
<path d="M472.31 117.322c-8.1 8.1-21.232 8.092-29.332 0-8.099-8.1-8.099-21.224 0-29.331l-27.307-27.307c-8.099 8.099-21.231 8.092-29.331 0-8.099-8.099-8.099-21.224 0-29.332L354.984.003 0 354.981l31.356 31.349c8.099-8.092 21.232-8.092 29.332 0 8.099 8.107 8.099 21.239 0 29.332l27.306 27.306c8.1-8.092 21.232-8.092 29.331 0 8.1 8.107 8.1 21.24 0 29.331l39.69 39.698L512 157.013l-39.69-39.691zm-2.715 66.917-13.675 13.682-14.894-14.9-8.965 8.965 14.893 14.894-13.675 13.682-14.893-14.9-8.966 8.966 14.893 14.893-13.675 13.675-14.893-14.893-8.965 8.958 14.894 14.9-13.676 13.675-14.893-14.893-8.965 8.958 14.893 14.9-13.675 13.675-14.894-14.893-8.965 8.957 14.893 14.9-13.675 13.676-14.893-14.894-8.966 8.95 14.893 14.908-13.675 13.675-14.893-14.893-8.965 8.958 14.894 14.9-13.675 13.675-14.894-14.893-8.965 8.958 14.893 14.9-13.675 13.675-14.893-14.9-8.966 8.958L265.845 388l-13.69 13.675-14.893-14.893-8.966 8.95 14.908 14.908-13.69 13.675-14.893-14.893-8.965 8.958 14.893 14.901-13.675 13.675-14.894-14.901-8.965 8.958 14.908 14.901-13.69 13.682-14.893-14.9-8.966 8.957 14.908 14.9-18.268 18.268-25.854-25.846c5.429-11.658 3.346-25.986-6.25-35.59-9.611-9.603-23.932-11.686-35.582-6.258l-14.805-14.79c5.429-11.658 3.346-25.986-6.251-35.589-9.611-9.604-23.931-11.688-35.582-6.258l-17.52-17.513L354.984 15.176l17.519 17.505c-5.444 11.65-3.36 25.985 6.251 35.582 9.596 9.611 23.932 11.694 35.582 6.258l14.805 14.797c-5.444 11.666-3.36 25.986 6.25 35.582 9.596 9.611 23.932 11.695 35.582 6.259l25.854 25.854-18.268 18.268-14.893-14.901-8.966 8.966 14.895 14.893z"
class="st0"/></svg>
Memory Usage
</th>
<th>
<svg fill="#000000" width="16px" height="16px" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path d="M7.493,22.862a1,1,0,0,0,1.244-.186l11-12A1,1,0,0,0,19,9H13.133l.859-6.876a1,1,0,0,0-1.8-.712l-8,11A1,1,0,0,0,5,14H9.612l-2.56,7.684A1,1,0,0,0,7.493,22.862ZM6.964,12l4.562-6.273-.518,4.149A1,1,0,0,0,12,11h4.727l-6.295,6.867,1.516-4.551A1,1,0,0,0,11,12Z"/>
</svg>
Power
</th>
</tr>
<tr v-for="gpu in serverData.GPUs" :key="gpu.gpu_id">
<td>{{ gpu.gpu_id }}</td>
<td :class="utilizationClass(gpu.gpu_util)">{{ gpu.gpu_util }}</td>
<td :class="temperatureClass(gpu.temperature)">{{ gpu.temperature }}</td>
<td>{{ gpu.memory_usage }} ({{ calculateMemoryUsage(gpu.memory_usage) }}%)</td>
<td>{{ gpu.power }}</td>
</tr>
</table>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
serverList: JSON.parse(localStorage.getItem('serverList')) || ['1.1.1.1', '2.2.2.2', '3.3.3.3'], // Add your server IPs here
servers: {},
refreshInterval: 5000, // Default refresh interval
intervalId: null,
showServersEdit: false, // Controls the visibility of the servers textarea
serverListText: '', // Holds the textarea content
};
},
methods: {
async fetchGPUData(serverIP) {
try {
const response = await axios.get(`http://${serverIP}:8998/gpustats`);
this.$set(this.servers, serverIP, response.data);
} catch (error) {
console.error('Error fetching data from', serverIP, error);
this.$set(this.servers, serverIP, {error: 'Unable to fetch data'});
}
},
startFetchingData() {
this.stopFetchingData();
this.serverList.forEach(serverIP => {
this.fetchGPUData(serverIP);
});
this.intervalId = setInterval(() => {
this.serverList.forEach(serverIP => {
this.fetchGPUData(serverIP);
});
}, this.refreshInterval);
},
stopFetchingData() {
if (this.intervalId) {
clearInterval(this.intervalId);
}
},
temperatureClass(temp) {
const temperature = parseInt(temp);
if (temperature < 40) return 'green';
if (temperature >= 40 && temperature < 60) return 'orange';
return 'red';
},
utilizationClass(util) {
const utilization = parseInt(util);
if (utilization < 40) return 'green';
if (utilization >= 40 && utilization < 60) return 'orange';
return 'red';
},
calculateMemoryUsage(memoryUsage) {
const [used, total] = memoryUsage.split(' / ').map(mem => parseFloat(mem));
return ((used / total) * 100).toFixed(2); // toFixed(2) limits the result to 2 decimal places
},
saveServers() {
this.serverList = this.serverListText.split('\n').filter(Boolean); // Update serverList based on textarea content
localStorage.setItem('serverList', JSON.stringify(this.serverList));
Object.keys(this.servers).forEach((serverIP) => {
if (!this.serverList.includes(serverIP)) {
this.$delete(this.servers, serverIP);
}
});
this.showServersEdit = false; // Hide the textarea after saving
this.startFetchingData(); // Restart data fetching with the new server list
}
},
watch: {
refreshInterval: function (newInterval, oldInterval) {
this.startFetchingData();
}
},
mounted() {
this.serverListText = this.serverList.join('\n');
this.startFetchingData();
},
beforeDestroy() {
this.stopFetchingData();
}
});
</script>
</body>
</html>