2020-2-capstone-design2 / 2014104149

Go to a project
Toggle navigation Toggle navigation pinning
Graduate
7b31367b 1 parent 50456010

Make register page

Inline Side-by-side
Showing 3 changed files with 118 additions and 44 deletions
...@@ -71,14 +71,11 @@ def register(): ...@@ -71,14 +71,11 @@ def register():
71 msg='[{id}] is registered'.format(id=student_id) 71 msg='[{id}] is registered'.format(id=student_id)
72 print(msg) 72 print(msg)
73 # image to input tensor 73 # image to input tensor
74 - file = request.files['file'] 74 + image = base64.b64decode(request.form['image'])
75 - image_bytes = file.read() 75 + image_np = np.frombuffer(image, dtype=np.uint8)
76 - image_np = np.fromstring(image_bytes, dtype=np.uint8)
77 image_np = cv2.imdecode(image_np, cv2.IMREAD_UNCHANGED) 76 image_np = cv2.imdecode(image_np, cv2.IMREAD_UNCHANGED)
78 - cv2.imwrite('./test.jpg', image_np)
79 image_np = resize(image_np) 77 image_np = resize(image_np)
80 image_np = prewhiten(image_np) 78 image_np = prewhiten(image_np)
81 - cv2.imwrite('./test2.jpg', image_np)
82 image_np = image_np.reshape(-1, image_size, image_size, 3) 79 image_np = image_np.reshape(-1, image_size, image_size, 3)
83 # get embedding 80 # get embedding
84 feed_dict = {input_placeholder:image_np, phase_train_placeholder:False } 81 feed_dict = {input_placeholder:image_np, phase_train_placeholder:False }
......
...@@ -111,34 +111,34 @@ function processVideo() { ...@@ -111,34 +111,34 @@ function processVideo() {
111 let point2 = new cv.Point(face.x + face.width, face.y + face.height); 111 let point2 = new cv.Point(face.x + face.width, face.y + face.height);
112 cv.rectangle(dst, point1, point2, [255, 0, 0, 255]); 112 cv.rectangle(dst, point1, point2, [255, 0, 0, 255]);
113 let cropped = new cv.Mat(); 113 let cropped = new cv.Mat();
114 - let rect = new cv.Rect(face.x, face.y, face.width, face.height); 114 + let rect = new cv.Rect(face.x - 22, face.y - 22, face.width + 22, face.height + 22);
115 cropped = src.roi(rect); 115 cropped = src.roi(rect);
116 let tempCanvas = document.createElement("canvas"); 116 let tempCanvas = document.createElement("canvas");
117 cv.imshow(tempCanvas,cropped); 117 cv.imshow(tempCanvas,cropped);
118 - if (tracker.register(face.x, face.y, face.width, face.height, Date.now())){ 118 + if (tracker.register(face.x, face.y, face.width, face.height, Date.now())){
119 - let b64encoded = tempCanvas.toDataURL("image/jpeg", 1.0); 119 + let b64encoded = tempCanvas.toDataURL("image/jpeg", 1.0);
120 - b64encoded = b64encoded.replace('data:image/jpeg;base64,', '') 120 + b64encoded = b64encoded.replace('data:image/jpeg;base64,', '')
121 - $.ajax({ 121 + $.ajax({
122 - type: "POST", 122 + type: "POST",
123 - url: "/verify", 123 + url: "/verify",
124 - dataType: "json", 124 + dataType: "json",
125 - data: {'image':b64encoded}, 125 + data: {'image':b64encoded},
126 - success: function(data){ 126 + success: function(data){
127 - if (data.status == "success"){ 127 + if (data.status == "success"){
128 - var newDiv = document.createElement("div"); 128 + var newDiv = document.createElement("div");
129 - var newContent = document.createTextNode("출석"); 129 + var newContent = document.createTextNode("출석");
130 - newDiv.appendChild(newContent); 130 + newDiv.appendChild(newContent);
131 - document.body.appendChild(newDiv); 131 + document.body.appendChild(newDiv);
132 - } 132 + }
133 - else{ 133 + else{
134 - var newDiv = document.createElement("div"); 134 + var newDiv = document.createElement("div");
135 - var newContent = document.createTextNode("실패"); 135 + var newContent = document.createTextNode("실패");
136 - newDiv.appendChild(newContent); 136 + newDiv.appendChild(newContent);
137 - document.body.appendChild(newDiv); 137 + document.body.appendChild(newDiv);
138 - } 138 + }
139 - } 139 + }
140 - }); 140 + });
141 - } 141 + }
142 } 142 }
143 cv.imshow('canvasOutput', dst); 143 cv.imshow('canvasOutput', dst);
144 // schedule the next one. 144 // schedule the next one.
......
...@@ -4,12 +4,90 @@ ...@@ -4,12 +4,90 @@
4 <meta name="viewport" content="width=device-width, initial-scale=1"> 4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 5 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
6 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&amp;subset=korean"> 6 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&amp;subset=korean">
7 -<script type='text/javascript' src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
8 <style> 7 <style>
9 body,h1,h2,h3,h4,h5 {font-family: "Nanum+Gothic", sans-serif} 8 body,h1,h2,h3,h4,h5 {font-family: "Nanum+Gothic", sans-serif}
10 </style> 9 </style>
11 -<body class="w3-light-grey"> 10 +<script type='text/javascript' src="{{url_for('static', filename='js/opencv.js')}}"></script>
11 +<script type='text/javascript' src="{{url_for('static', filename='js/utils.js')}}"></script>
12 +<script type='text/javascript' src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
13 +<script type='text/javascript'>
14 +let tempCanvas = document.createElement("canvas");
15 +function load_cascade()
16 +{
17 + let faceCascadeFile = 'haarcascade_frontalface_default.xml'
18 + let faceCascadeURL = "{{url_for('static', filename='js/haarcascade_frontalface_default.xml')}}"
19 + let utils = new Utils('errorMessage');
20 + utils.createFileFromUrl(faceCascadeFile, faceCascadeURL, () => {
21 + activate()
22 + });
23 +}
24 +function activate()
25 +{
26 + document.getElementById("myFile").disabled = false;
27 +}
28 +
29 +function detect_face()
30 +{
31 + let classifier = new cv.CascadeClassifier();
32 + classifier.load('haarcascade_frontalface_default.xml');
33 + let src = cv.imread('imagefile');
34 + let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4);
35 + let gray = new cv.Mat();
36 + src.copyTo(dst);
37 + cv.cvtColor(dst, gray, cv.COLOR_RGBA2GRAY, 0);
38 + let msize = new cv.Size(120, 120);
39 + // detect faces.
40 + classifier.detectMultiScale(gray, faces, 1.1, 3, 0, msize);
41 + // draw faces.
42 + for (let i = 0; i < faces.size(); ++i) {
43 + let face = faces.get(i);
44 + let point1 = new cv.Point(face.x, face.y);
45 + let point2 = new cv.Point(face.x + face.width, face.y + face.height);
46 + cv.rectangle(dst, point1, point2, [255, 0, 0, 255]);
47 + // margin 44
48 + let rect = new cv.Rect(face.x - 22, face.y - 22, face.width + 22, face.height + 22);
49 + let cropped = src.roi(rect);
50 + cv.imshow(tempCanvas,cropped);
51 + }
52 + if (faces.size() == 1)
53 + {
54 + document.getElementById("sender").disabled = false;
55 + }
56 + else if (faces.size() == 0)
57 + {
58 + alert('얼굴이 인식되지 않았습니다.');
59 + }
60 + else
61 + {
62 + alert('하나의 얼굴만 등록해주세요.')
63 + }
64 + cv.imshow('preview', dst);
65 +}
12 66
67 +function submit()
68 +{
69 + let b64encoded = tempCanvas.toDataURL('image/jpeg', 1.0);
70 + let student_id = document.getElementById('student_id').value;
71 + let student_name = document.getElementById('student_name').value;
72 + b64encoded = b64encoded.replace('data:image/jpeg;base64,', '')
73 + $.ajax({
74 + type: "POST",
75 + url: "/register",
76 + dataType: "json",
77 + data: {'image':b64encoded, 'student_id':student_id 'student_name':student_name},
78 + success: function(data){
79 + if (data.status == "success"){
80 + alert("등록 성공");
81 + }
82 + else{
83 + alert("등록 실패")
84 + }
85 + }
86 + })
87 +}
88 +
89 +</script>
90 +<body class="w3-light-grey" onload="cv['onRuntimeInitialized']=()=>{ load_cascade() }">
13 <!-- w3-content defines a container for fixed size centered content, 91 <!-- w3-content defines a container for fixed size centered content,
14 and is wrapped around the whole page content, except for the footer in this example --> 92 and is wrapped around the whole page content, except for the footer in this example -->
15 <div class="w3-content" style="max-width:1400px"> 93 <div class="w3-content" style="max-width:1400px">
...@@ -22,25 +100,24 @@ and is wrapped around the whole page content, except for the footer in this exam ...@@ -22,25 +100,24 @@ and is wrapped around the whole page content, except for the footer in this exam
22 100
23 <div class="w3-row", style='text-align:center'> 101 <div class="w3-row", style='text-align:center'>
24 <h2><b>얼굴 파일을 등록해주세요 (jpeg only)</b></h2> 102 <h2><b>얼굴 파일을 등록해주세요 (jpeg only)</b></h2>
25 -<form method="post" action="/register" enctype="multipart/form-data">
26 -학번: <input type="text" name="student_id"><br>
27 -이름: <input type="text" name="student_name"><br><br>
28 -<input type="file" name="file" onchange="loadFile(event)" autocomplete="off" accept="image/jpeg" required>
29 <div> 103 <div>
30 -<img id="preview"> 104 + 학번: <input type="text" name="student_id"><br>
105 + 이름: <input type="text" name="student_name"><br><br>
106 + <input type="file" name="file" onchange="loadFile(event)" autocomplete="off" accept="image/jpeg" required disabled>
107 + <div>
108 + <img id="imagefile" style="display:none;">
109 + <canvas id="preview"></canvas>
110 + </div>
111 + <input id="sender" type="button" onclick="submit" value="등록" disabled>
31 </div> 112 </div>
32 -<input type="submit" value="등록">
33 -</form>
34 <script> 113 <script>
35 var loadFile = function(event) { 114 var loadFile = function(event) {
36 - var output = document.getElementById('preview');
37 var reader = new FileReader(); 115 var reader = new FileReader();
38 reader.readAsDataURL(event.target.files[0]); 116 reader.readAsDataURL(event.target.files[0]);
39 - reader.result;
40 -
41 - output.src = URL.createObjectURL(event.target.files[0]);
42 output.onload = function() { 117 output.onload = function() {
43 - URL.revokeObjectURL(output.src) // free memory 118 + var output = document.getElementById('imagefile');
119 + output.src = URL.createObjectURL(event.target.files[0]);
120 + detect_face()
44 } 121 }
45 }; 122 };
46 </script> 123 </script>
......