2020-1-capstone-design1 / Define_Project1

Go to a project
Toggle navigation Toggle navigation pinning
Hong
0ce36940 1 parent 3635d05b

addvideo,chart

Inline Side-by-side
Showing 4 changed files with 160 additions and 514 deletions
1 (function($) { 1 (function($) {
2 - // Set new default font family and font color to mimic Bootstrap's default styling
3 - Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
4 - Chart.defaults.global.defaultFontColor = '#858796';
5 2
6 - function number_format(number, decimals, dec_point, thousands_sep) { 3 + $(document).on('click', '.test-btn', function(e) {
7 - // * example: number_format(1234.56, 2, ',', ' '); 4 + $('.container-video').empty()
8 - // * return: '1 234,56' 5 + let v = '<video src="data/output2.avi" width="400" controls autoplay></video>'
9 - number = (number + '').replace(',', '').replace(' ', ''); 6 + $('.container-video').append(v);
10 - var n = !isFinite(+number) ? 0 : +number, 7 + $('.container-kmeans').empty()
11 - prec = !isFinite(+decimals) ? 0 : Math.abs(decimals), 8 + let i = '<img src="data/test3_kmeans.png" style="width: 100%;" alt="Kmeans Image">'
12 - sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, 9 + $('.container-kmeans').append(i);
13 - dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
14 - s = '',
15 - toFixedFix = function(n, prec) {
16 - var k = Math.pow(10, prec);
17 - return '' + Math.round(n * k) / k;
18 - };
19 - // Fix for IE parseFloat(0.55).toFixed(0) = 0;
20 - s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
21 - if (s[0].length > 3) {
22 - s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
23 - }
24 - if ((s[1] || '').length < prec) {
25 - s[1] = s[1] || '';
26 - s[1] += new Array(prec - s[1].length + 1).join('0');
27 - }
28 - return s.join(dec);
29 - }
30 10
31 - let createAmountLineChart = function(cflist, cbflist) {
32 - let arrx = ['0-10000', '10000-20000', '20000-30000', '30000-40000', '40000-50000', '50000-100000', '100000-'];
33 - let cfAreaY = Array.apply(null, new Array(arrx.length)).map(Number.prototype.valueOf, 0);
34 - let cbfAreaY = Array.apply(null, new Array(arrx.length)).map(Number.prototype.valueOf, 0);
35 -
36 - for (let cfy of cflist) {
37 - if (cfy.amount < 10000 && cfy.amount >= 0) {
38 - cfAreaY[0] += 1;
39 - } else if (cfy.amount < 20000 && cfy.amount >= 10000) {
40 - cfAreaY[1] += 1;
41 - } else if (cfy.amount < 30000 && cfy.amount >= 20000) {
42 - cfAreaY[2] += 1;
43 - } else if (cfy.amount < 40000 && cfy.amount >= 30000) {
44 - cfAreaY[3] += 1;
45 - } else if (cfy.amount < 50000 && cfy.amount >= 40000) {
46 - cfAreaY[4] += 1;
47 - } else if (cfy.amount < 100000 && cfy.amount >= 50000) {
48 - cfAreaY[5] += 1;
49 - } else {
50 - cfAreaY[6] += 1;
51 - }
52 - }
53 - for (let cbfy of cbflist) {
54 - if (cbfy.amount < 10000 && cbfy.amount >= 0) {
55 - cbfAreaY[0] += 1;
56 - } else if (cbfy.amount < 20000 && cbfy.amount >= 10000) {
57 - cbfAreaY[1] += 1;
58 - } else if (cbfy.amount < 30000 && cbfy.amount >= 20000) {
59 - cbfAreaY[2] += 1;
60 - } else if (cbfy.amount < 40000 && cbfy.amount >= 30000) {
61 - cbfAreaY[3] += 1;
62 - } else if (cbfy.amount < 50000 && cbfy.amount >= 40000) {
63 - cbfAreaY[4] += 1;
64 - } else if (cbfy.amount < 100000 && cbfy.amount >= 50000) {
65 - cbfAreaY[5] += 1;
66 - } else {
67 - cbfAreaY[6] += 1;
68 - }
69 - }
70 - console.log(cbfAreaY);
71 - // areaChart Start
72 - var ctx = document.getElementById("myAmountChart");
73 - var myLineChart = new Chart(ctx, {
74 - type: 'line',
75 - data: {
76 - labels: arrx,
77 - datasets: [{
78 - label: "Collaborative filtering",
79 - lineTension: 0.3,
80 - backgroundColor: "rgba(78, 115, 223, 0.05)",
81 - borderColor: "rgba(78, 115, 223, 1)",
82 - pointRadius: 3,
83 - pointBackgroundColor: "rgba(78, 115, 223, 1)",
84 - pointBorderColor: "rgba(78, 115, 223, 1)",
85 - pointHoverRadius: 3,
86 - pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
87 - pointHoverBorderColor: "rgba(78, 115, 223, 1)",
88 - pointHitRadius: 10,
89 - pointBorderWidth: 2,
90 - data: cfAreaY,
91 - }, {
92 - label: "Content Based filtering",
93 - lineTension: 0.3,
94 - backgroundColor: "rgba(115, 223, 78, 0.05)",
95 - borderColor: "rgba(115, 223, 78, 1)",
96 - pointRadius: 3,
97 - pointBackgroundColor: "rgba(115, 223, 78, 1)",
98 - pointBorderColor: "rgba(115, 223, 78, 1)",
99 - pointHoverRadius: 3,
100 - pointHoverBackgroundColor: "rgba(115, 223, 78, 1)",
101 - pointHoverBorderColor: "rgba(115, 223, 78, 1)",
102 - pointHitRadius: 10,
103 - pointBorderWidth: 2,
104 - data: cbfAreaY,
105 - }],
106 - },
107 - options: {
108 - maintainAspectRatio: false,
109 - layout: {
110 - padding: {
111 - left: 10,
112 - right: 25,
113 - top: 25,
114 - bottom: 0
115 - }
116 - },
117 - legend: {
118 - display: true,
119 - position: 'top',
120 - labels: {
121 - fontColor: 'black'
122 - }
123 - },
124 - scales: {
125 - xAxes: [{
126 - display: true,
127 - scaleLabel: {
128 - display: true,
129 - labelString: 'Amount'
130 - }
131 - }],
132 - yAxes: [{
133 - ticks: {
134 - maxTicksLimit: 5,
135 - padding: 10,
136 - // Include a dollar sign in the ticks
137 - callback: function(value, index, values) {
138 - return number_format(value);
139 - }
140 - },
141 - gridLines: {
142 - color: "rgb(234, 236, 244)",
143 - zeroLineColor: "rgb(234, 236, 244)",
144 - drawBorder: false,
145 - borderDash: [2],
146 - zeroLineBorderDash: [2]
147 - }
148 - }],
149 - },
150 - tooltips: {
151 - backgroundColor: "rgb(255,255,255)",
152 - bodyFontColor: "#858796",
153 - titleMarginBottom: 10,
154 - titleFontColor: '#6e707e',
155 - titleFontSize: 14,
156 - borderColor: '#dddfeb',
157 - borderWidth: 1,
158 - xPadding: 15,
159 - yPadding: 15,
160 - displayColors: false,
161 - intersect: false,
162 - mode: 'index',
163 - caretPadding: 10,
164 - callbacks: {
165 - label: function(tooltipItem, chart) {
166 - var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
167 - return datasetLabel + ': ' + number_format(tooltipItem.yLabel);
168 - }
169 - }
170 - }
171 - }
172 - });
173 - // areaChart End
174 - }
175 -
176 - let createCategoryLineChart = function(arrx, cflist, cbflist) {
177 -
178 - let cfAreaY = Array.apply(null, new Array(arrx.length)).map(Number.prototype.valueOf, 0);
179 - let cbfAreaY = Array.apply(null, new Array(arrx.length)).map(Number.prototype.valueOf, 0);
180 -
181 - for (let idx in arrx) {
182 - for (let cfy of cflist) {
183 - if (cfy.category == arrx[idx]) {
184 - cfAreaY[idx] += 1;
185 - }
186 - }
187 - for (let cbfy of cbflist) {
188 - if (cbfy.category == arrx[idx]) {
189 - cbfAreaY[idx] += 1;
190 - }
191 - }
192 - }
193 - console.log(cbfAreaY);
194 - // areaChart Start
195 - var ctx = document.getElementById("myCategoryChart");
196 - var myLineChart = new Chart(ctx, {
197 - type: 'line',
198 - data: {
199 - labels: arrx,
200 - datasets: [{
201 - label: "Collaborative filtering",
202 - lineTension: 0.3,
203 - backgroundColor: "rgba(78, 115, 223, 0.05)",
204 - borderColor: "rgba(78, 115, 223, 1)",
205 - pointRadius: 3,
206 - pointBackgroundColor: "rgba(78, 115, 223, 1)",
207 - pointBorderColor: "rgba(78, 115, 223, 1)",
208 - pointHoverRadius: 3,
209 - pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
210 - pointHoverBorderColor: "rgba(78, 115, 223, 1)",
211 - pointHitRadius: 10,
212 - pointBorderWidth: 2,
213 - data: cfAreaY,
214 - }, {
215 - label: "Content Based filtering",
216 - lineTension: 0.3,
217 - backgroundColor: "rgba(115, 223, 78, 0.05)",
218 - borderColor: "rgba(115, 223, 78, 1)",
219 - pointRadius: 3,
220 - pointBackgroundColor: "rgba(115, 223, 78, 1)",
221 - pointBorderColor: "rgba(115, 223, 78, 1)",
222 - pointHoverRadius: 3,
223 - pointHoverBackgroundColor: "rgba(115, 223, 78, 1)",
224 - pointHoverBorderColor: "rgba(115, 223, 78, 1)",
225 - pointHitRadius: 10,
226 - pointBorderWidth: 2,
227 - data: cbfAreaY,
228 - }],
229 - },
230 - options: {
231 - maintainAspectRatio: false,
232 - layout: {
233 - padding: {
234 - left: 10,
235 - right: 25,
236 - top: 25,
237 - bottom: 0
238 - }
239 - },
240 - legend: {
241 - display: true,
242 - position: 'top',
243 - labels: {
244 - fontColor: 'black'
245 - }
246 - },
247 - scales: {
248 - xAxes: [{
249 - display: true,
250 - scaleLabel: {
251 - display: true,
252 - labelString: 'Category'
253 - }
254 - }],
255 - yAxes: [{
256 - ticks: {
257 - maxTicksLimit: 5,
258 - padding: 10,
259 - // Include a dollar sign in the ticks
260 - callback: function(value, index, values) {
261 - return number_format(value);
262 - }
263 - },
264 - gridLines: {
265 - color: "rgb(234, 236, 244)",
266 - zeroLineColor: "rgb(234, 236, 244)",
267 - drawBorder: false,
268 - borderDash: [2],
269 - zeroLineBorderDash: [2]
270 - }
271 - }],
272 - },
273 - tooltips: {
274 - backgroundColor: "rgb(255,255,255)",
275 - bodyFontColor: "#858796",
276 - titleMarginBottom: 10,
277 - titleFontColor: '#6e707e',
278 - titleFontSize: 14,
279 - borderColor: '#dddfeb',
280 - borderWidth: 1,
281 - xPadding: 15,
282 - yPadding: 15,
283 - displayColors: false,
284 - intersect: false,
285 - mode: 'index',
286 - caretPadding: 10,
287 - callbacks: {
288 - label: function(tooltipItem, chart) {
289 - var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
290 - return datasetLabel + ': ' + number_format(tooltipItem.yLabel);
291 - }
292 - }
293 - }
294 - }
295 - });
296 - // areaChart End
297 - }
298 -
299 - let createScoreLineChart = function(arrx, cflist, cbflist) {
300 -
301 - let cfAreaY = Array.apply(null, new Array(arrx.length)).map(Number.prototype.valueOf, 0);
302 - let cbfAreaY = Array.apply(null, new Array(arrx.length)).map(Number.prototype.valueOf, 0);
303 -
304 - for (let idx in arrx) {
305 - for (let cfy of cflist) {
306 - if (cfy.name == arrx[idx]) {
307 - cfAreaY[idx] = cfy.score;
308 - }
309 - }
310 - for (let cbfy of cbflist) {
311 - if (cbfy.name == arrx[idx]) {
312 - cbfAreaY[idx] = cbfy.score;
313 - }
314 - }
315 - }
316 - // areaChart Start
317 - var ctx = document.getElementById("myScoreChart");
318 - var myLineChart = new Chart(ctx, {
319 - type: 'line',
320 - data: {
321 - labels: arrx,
322 - datasets: [{
323 - label: "Collaborative filtering",
324 - lineTension: 0.3,
325 - backgroundColor: "rgba(78, 115, 223, 0.05)",
326 - borderColor: "rgba(78, 115, 223, 1)",
327 - pointRadius: 3,
328 - pointBackgroundColor: "rgba(78, 115, 223, 1)",
329 - pointBorderColor: "rgba(78, 115, 223, 1)",
330 - pointHoverRadius: 3,
331 - pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
332 - pointHoverBorderColor: "rgba(78, 115, 223, 1)",
333 - pointHitRadius: 10,
334 - pointBorderWidth: 2,
335 - data: cfAreaY,
336 - }, {
337 - label: "Content Based filtering",
338 - lineTension: 0.3,
339 - backgroundColor: "rgba(115, 223, 78, 0.05)",
340 - borderColor: "rgba(115, 223, 78, 1)",
341 - pointRadius: 3,
342 - pointBackgroundColor: "rgba(115, 223, 78, 1)",
343 - pointBorderColor: "rgba(115, 223, 78, 1)",
344 - pointHoverRadius: 3,
345 - pointHoverBackgroundColor: "rgba(115, 223, 78, 1)",
346 - pointHoverBorderColor: "rgba(115, 223, 78, 1)",
347 - pointHitRadius: 10,
348 - pointBorderWidth: 2,
349 - data: cbfAreaY,
350 - }],
351 - },
352 - options: {
353 - maintainAspectRatio: false,
354 - layout: {
355 - padding: {
356 - left: 10,
357 - right: 25,
358 - top: 25,
359 - bottom: 0
360 - }
361 - },
362 - legend: {
363 - display: true,
364 - position: 'top',
365 - labels: {
366 - fontColor: 'black'
367 - }
368 - },
369 - scales: {
370 - xAxes: [{
371 - display: true,
372 - scaleLabel: {
373 - display: true,
374 - labelString: 'name'
375 - }
376 - }],
377 - yAxes: [{
378 - ticks: {
379 - maxTicksLimit: 5,
380 - padding: 10,
381 - // Include a dollar sign in the ticks
382 - callback: function(value, index, values) {
383 - return number_format(value) + '%';
384 - }
385 - },
386 - gridLines: {
387 - color: "rgb(234, 236, 244)",
388 - zeroLineColor: "rgb(234, 236, 244)",
389 - drawBorder: false,
390 - borderDash: [2],
391 - zeroLineBorderDash: [2]
392 - }
393 - }],
394 - },
395 - tooltips: {
396 - backgroundColor: "rgb(255,255,255)",
397 - bodyFontColor: "#858796",
398 - titleMarginBottom: 10,
399 - titleFontColor: '#6e707e',
400 - titleFontSize: 14,
401 - borderColor: '#dddfeb',
402 - borderWidth: 1,
403 - xPadding: 15,
404 - yPadding: 15,
405 - displayColors: false,
406 - intersect: false,
407 - mode: 'index',
408 - caretPadding: 10,
409 - callbacks: {
410 - label: function(tooltipItem, chart) {
411 - var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
412 - return datasetLabel + ': ' + number_format(tooltipItem.yLabel) + '%';
413 - }
414 - }
415 - }
416 - }
417 - });
418 - // areaChart End
419 - }
420 -
421 - $(document).on('click', '.search-btn', function(e) {
422 - let user_id = $('#user-input').text();
423 - $('.cf-item').empty();
424 - let cflist = [];
425 - let cbflist = [];
426 - let arrName = new Set();
427 - let arrCategory = new Set();
428 - $.ajax({
429 - method: "GET",
430 - url: "http://localhost:3000/api/filtering/cf",
431 - async: false,
432 - data: { user_id: user_id },
433 - success: function(data) {
434 - for (let i of data.item) {
435 - cflist.push(i);
436 - arrName.add(i.name);
437 - arrCategory.add(i.category);
438 - let at = ' <div class="col-xl-3 col-md-6 mb-4">\
439 - <div class="card border-left-info shadow h-100 py-2">\
440 - <div class="card-body">\
441 - <div class="row no-gutters align-items-center">\
442 - <div class="col mr-2">\
443 - <div class="text-s font-weight-bold text-info text-uppercase mb-1">' + i.name + '</div>\
444 - <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">' + i.amount + '원</div>\
445 - <div class="row no-gutters align-items-center">\
446 - <div class="col-auto">\
447 - <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">' + i.score + '%</div>\
448 - </div>\
449 - <div class="col">\
450 - <div class="progress progress-sm mr-2">\
451 - <div class="progress-bar bg-info" role="progressbar" style="width: ' + i.score + '%" aria-valuenow="' + i.score + '" aria-valuemin="0" aria-valuemax="100"></div>\
452 - </div>\
453 - </div>\
454 - </div>\
455 - </div>\
456 - <div class="col-auto">\
457 - <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>\
458 - </div>\
459 - </div>\
460 - </div>\
461 - </div>\
462 - </div>';
463 -
464 - $('.cf-item').append(at);
465 - }
466 - }
467 - });
468 - $('.cbf-item').empty();
469 - $.ajax({
470 - method: "GET",
471 - url: "http://localhost:3000/api/filtering/cbf",
472 - async: false,
473 - data: { user_id: user_id },
474 - success: function(data) {
475 - for (let i of data.item) {
476 - cbflist.push(i);
477 - arrName.add(i.name);
478 - arrCategory.add(i.category);
479 - let at = ' <div class="col-xl-3 col-md-6 mb-4">\
480 - <div class="card border-left-info shadow h-100 py-2">\
481 - <div class="card-body">\
482 - <div class="row no-gutters align-items-center">\
483 - <div class="col mr-2">\
484 - <div class="text-s font-weight-bold text-info text-uppercase mb-1">' + i.name + '</div>\
485 - <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">' + i.amount + '원</div>\
486 - <div class="row no-gutters align-items-center">\
487 - <div class="col-auto">\
488 - <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">' + i.score + '%</div>\
489 - </div>\
490 - <div class="col">\
491 - <div class="progress progress-sm mr-2">\
492 - <div class="progress-bar bg-info" role="progressbar" style="width: ' + i.score + '%" aria-valuenow="' + i.score + '" aria-valuemin="0" aria-valuemax="100"></div>\
493 - </div>\
494 - </div>\
495 - </div>\
496 - </div>\
497 - <div class="col-auto">\
498 - <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>\
499 - </div>\
500 - </div>\
501 - </div>\
502 - </div>\
503 - </div>';
504 -
505 - $('.cbf-item').append(at);
506 - }
507 - }
508 - });
509 - createScoreLineChart(Array.from(arrName), cflist, cbflist);
510 - createCategoryLineChart(Array.from(arrCategory), cflist, cbflist);
511 - createAmountLineChart(cflist, cbflist);
512 }); 11 });
513 12
514 })(jQuery); 13 })(jQuery);
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -25,7 +25,7 @@ router.get('/', function(req, res, next) { ...@@ -25,7 +25,7 @@ router.get('/', function(req, res, next) {
25 }); 25 });
26 26
27 // 2. 파일 업로드 처리 27 // 2. 파일 업로드 처리
28 -router.post('/create', upload.single("File"), function(req, res, next) { 28 +router.post('/create', upload.single("File"), async(req, res) => {
29 // 3. 파일 객체 29 // 3. 파일 객체
30 var file = req.file 30 var file = req.file
31 31
......
...@@ -74,13 +74,23 @@ ...@@ -74,13 +74,23 @@
74 <!-- End of Topbar --> 74 <!-- End of Topbar -->
75 75
76 <!-- Begin Page Content --> 76 <!-- Begin Page Content -->
77 - <div class="container-fluid"> 77 + <div class="container row">
78 - <form action="/create" method="post" enctype="multipart/form-data"> 78 + <div class="col-md-8">
79 - <input type="file" name="File"> 79 + <form action="/create" method="post" enctype="multipart/form-data">
80 - <input type="submit" value="파일 업로드하기"> 80 + <input type="file" name="File">
81 - </form> 81 + <input type="submit" value="파일 업로드하기">
82 + </form>
83 + </div>
84 + <div class="col-md-2"></div>
85 + <div class="test col-md-2"><button class="btn-circle test-btn">Test</button></div>
82 </div> 86 </div>
87 + <div class="p-5"></div>
83 <!-- /.container-fluid --> 88 <!-- /.container-fluid -->
89 + <div class="container row">
90 + <div class="container-video col-md-6"></div>
91 + <div class="container-kmeans col-md-6"></div>
92 + </div>
93 + <div class="container-kibana"></div>
84 94
85 </div> 95 </div>
86 <!-- End of Main Content --> 96 <!-- End of Main Content -->
......
1 +<!DOCTYPE html>
2 +<html lang="en">
3 +
4 +<head>
5 +
6 + <meta charset="utf-8">
7 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9 + <meta name="description" content="">
10 + <meta name="author" content="">
11 +
12 + <title>유동 인구 분석</title>
13 + <!-- Custom fonts for this template-->
14 + <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
15 + <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
16 +
17 + <!-- Custom styles for this template-->
18 + <link href="stylesheets/sb-admin-2.min.css" rel="stylesheet">
19 +
20 +</head>
21 +
22 +<body id="page-top">
23 +
24 + <!-- Page Wrapper -->
25 + <div id="wrapper">
26 +
27 + <!-- Sidebar -->
28 + <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
29 +
30 + <!-- Sidebar - Brand -->
31 + <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
32 + <div class="sidebar-brand-icon rotate-n-15">
33 + <i class="fas fa-thumbs-up"></i>
34 + </div>
35 + <div class="sidebar-brand-text mx-3">유동 인구 분석</div>
36 + </a>
37 +
38 + <!-- Divider -->
39 + <hr class="sidebar-divider my-0">
40 +
41 + <!-- Nav Item - Dashboard -->
42 + <li class="nav-item active">
43 + <a class="nav-link" href="index.html">
44 + <i class="fas fa-fw fa-tachometer-alt"></i>
45 + <span>Dashboard</span></a>
46 + </li>
47 +
48 + <!-- Divider -->
49 + <hr class="sidebar-divider">
50 +
51 + <!-- Sidebar Toggler (Sidebar) -->
52 + <div class="text-center d-none d-md-inline">
53 + <button class="rounded-circle border-0" id="sidebarToggle"></button>
54 + </div>
55 +
56 + </ul>
57 + <!-- End of Sidebar -->
58 +
59 + <!-- Content Wrapper -->
60 + <div id="content-wrapper" class="d-flex flex-column">
61 +
62 + <!-- Main Content -->
63 + <div id="content">
64 +
65 + <!-- Topbar -->
66 + <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
67 +
68 + <!-- Sidebar Toggle (Topbar) -->
69 + <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
70 + <i class="fa fa-bars"></i>
71 + </button>
72 +
73 + </nav>
74 + <!-- End of Topbar -->
75 +
76 + <!-- Begin Page Content -->
77 + <div class="container row">
78 + <div class="col-md-8">
79 + <form action="/create" method="post" enctype="multipart/form-data">
80 + <input type="file" name="File">
81 + <input type="submit" value="파일 업로드하기">
82 + </form>
83 + </div>
84 + </div>
85 + <div class="p-5"></div>
86 + <!-- /.container-fluid -->
87 + <div class="container row">
88 + <div class="container-video col-md-6">
89 + <video src="data/output2.avi" width="400" controls autoplay></video>
90 + </div>
91 + <div class="container-kmeans col-md-6">
92 + <img src="data/test3_kmeans.png" style="width: 100%;" alt="Kmeans Image">
93 + </div>
94 + </div>
95 + <div class="container-kibana"></div>
96 +
97 + </div>
98 + <!-- End of Main Content -->
99 +
100 + <!-- Footer -->
101 + <footer class="sticky-footer bg-white">
102 + <div class="container my-auto">
103 + <div class="copyright text-center my-auto">
104 + </div>
105 + </div>
106 + </footer>
107 + <!-- End of Footer -->
108 +
109 + </div>
110 + <!-- End of Content Wrapper -->
111 +
112 + </div>
113 + <!-- End of Page Wrapper -->
114 +
115 + <!-- Scroll to Top Button-->
116 + <a class="scroll-to-top rounded" href="#page-top">
117 + <i class="fas fa-angle-up"></i>
118 + </a>
119 +
120 + <!-- Bootstrap core JavaScript-->
121 + <script src="vendor/jquery/jquery.min.js"></script>
122 + <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
123 +
124 + <!-- Core plugin JavaScript-->
125 + <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
126 +
127 + <!-- Custom scripts for all pages-->
128 + <script src="javascripts/sb-admin-2.min.js"></script>
129 +
130 + <!-- Page level plugins -->
131 + <script src="vendor/chart.js/Chart.min.js"></script>
132 +
133 + <!-- Page level custom scripts -->
134 + <!-- <script src="javascripts/demo/chart-pie-demo.js"></script> -->
135 +</body>
136 +
137 +</html>
...\ No newline at end of file ...\ No newline at end of file