2021-1-capstone-design2 / 2017103972

Go to a project
Toggle navigation Toggle navigation pinning
김성연
e36b1975 1 parent 5b171df1

Fix flask web code and Add weekly report

Inline Side-by-side
Showing 11 changed files with 60 additions and 98 deletions
1 -.ipynb_checkpoints/* 1 +.pynb_checkpoints/*
2 .DS_Store 2 .DS_Store
3 web/__pycache__/* 3 web/__pycache__/*
4 -web/face_emotion_recognition/__pycache__ 4 +web/face_emotion_recognition/__pycache__/*
5 web/face_emotion_recogntion/data 5 web/face_emotion_recogntion/data
6 web/face_emotion_recogntion/img 6 web/face_emotion_recogntion/img
7 web/static/* 7 web/static/*
......
...@@ -69,11 +69,18 @@ def upload_video(): ...@@ -69,11 +69,18 @@ def upload_video():
69 return redirect(url_for('test')) 69 return redirect(url_for('test'))
70 70
71 71
72 -@app.route('/faceEmotinoRecognition') 72 +@app.route('/faceEmotionRecognition', methods=('GET', 'POST'))
73 -def faceEmotinoRecognition(): 73 +def faceEmotionRecognition():
74 - face_emotion_dict = video4.videoDetector(3, 'record0') 74 + if request.method == 'POST':
75 + f = request.files.get('video')
76 + f.save("./static/video/" + secure_filename(f.filename))
77 + seconds = float(request.form['seconds'])
78 + face_emotion_dict = video4.videoDetector(
79 + seconds, secure_filename(f.filename))
75 print(face_emotion_dict) 80 print(face_emotion_dict)
76 - return render_template('result.html', face_emotion_dict=face_emotion_dict, face_imgs=find_face_imgs()) 81 + file_name = 'video/' + secure_filename(f.filename)
82 + return render_template('result.html', face_emotion_dict=face_emotion_dict, face_imgs=find_face_imgs(), file_name=file_name)
83 + return redirect(url_for('test'))
77 84
78 85
79 if __name__ == "__main__": 86 if __name__ == "__main__":
......
...@@ -44,7 +44,7 @@ def videoDetector(second, video_name): ...@@ -44,7 +44,7 @@ def videoDetector(second, video_name):
44 ], 'happy': [], 'neutral': [], 'sad': [], 'surprise': []} 44 ], 'happy': [], 'neutral': [], 'sad': [], 'surprise': []}
45 45
46 # video 정보 불러오기 46 # video 정보 불러오기
47 - video_path = 'static/video/' + video_name + '.mp4' 47 + video_path = 'static/video/' + video_name
48 cap = cv2.VideoCapture(video_path) 48 cap = cv2.VideoCapture(video_path)
49 49
50 # 동영상 크기(frame정보)를 읽어옴 50 # 동영상 크기(frame정보)를 읽어옴
......
...@@ -8,12 +8,13 @@ ...@@ -8,12 +8,13 @@
8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge">
9 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 9 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
10 integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 10 integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
11 + <link rel="stylesheet" href="{{ url_for('static', filename='css/layout.css') }}">
11 <title>Flask Face Emotion Recognition App</title> 12 <title>Flask Face Emotion Recognition App</title>
12 </head> 13 </head>
13 14
14 <body> 15 <body>
15 16
16 - <div class="container" style="margin-top: 100px"> 17 + <div class="container" style="justify-self: center; margin-top: 100px;">
17 <h3>Face Emotion Recognition Platform</h3> 18 <h3>Face Emotion Recognition Platform</h3>
18 <hr> 19 <hr>
19 20
...@@ -22,7 +23,7 @@ ...@@ -22,7 +23,7 @@
22 No face images available 23 No face images available
23 </div> 24 </div>
24 {% else %} 25 {% else %}
25 - <table class="table"> 26 + <table class="table table-bordered" style="width: 100%; height: 40%;">
26 <thead> 27 <thead>
27 <tr> 28 <tr>
28 <th scope="col ">id</th> 29 <th scope="col ">id</th>
...@@ -37,8 +38,8 @@ ...@@ -37,8 +38,8 @@
37 <tr> 38 <tr>
38 <th scope="row">{{ face_img.id }}</th> 39 <th scope="row">{{ face_img.id }}</th>
39 <td>{{ face_img.name }}</td> 40 <td>{{ face_img.name }}</td>
40 - <td><img src={{ url_for('static', filename=face_img.imgUrl) }} width="100" height="120"></td> 41 + <td><img src={{ url_for('static', filename=face_img.imgUrl) }} width="80" height="90"></td>
41 - <td><a href="/deleteFace/{{ face_img.name }}" class="btn btn-danger">Delete</a></td> 42 + <td><a href="/deleteFace/{{ face_img.name }}" class="btn btn-danger btn-sm">Delete</a></td>
42 </tr> 43 </tr>
43 {% endfor %} 44 {% endfor %}
44 </tbody> 45 </tbody>
...@@ -47,11 +48,11 @@ ...@@ -47,11 +48,11 @@
47 48
48 49
49 <form action="http://localhost:5000/uploadFace" method="POST" enctype="multipart/form-data"> 50 <form action="http://localhost:5000/uploadFace" method="POST" enctype="multipart/form-data">
50 - <div class="form-group"> 51 + <div class="form-group" style="margin-top: 100px;">
51 <label for="title" class="text-uppercase">Face Upload</label> 52 <label for="title" class="text-uppercase">Face Upload</label>
52 - <input type="file" name="file"> 53 + <input type="file" style="margin-left: 10px;" name="file">
53 - <button type="submit" class="btn btn-outline-primary">Add</button> 54 + <button type="submit" class="btn btn-primary btn-sm">Add Face Image</button>
54 - <a href="/goTest" type="button" class="btn btn-outline-dark"> 비디오 분석하러 가기 </a> 55 + <a href="/goTest" type="button" class="btn btn-primary btn-sm">Analysis Your Video </a>
55 </div> 56 </div>
56 </form> 57 </form>
57 </div> 58 </div>
......
...@@ -14,33 +14,26 @@ ...@@ -14,33 +14,26 @@
14 <body> 14 <body>
15 15
16 <div class="container" style="margin-top: 100px"> 16 <div class="container" style="margin-top: 100px">
17 - <h3>Face Emotion Recognition Platform</h3> 17 + <h3>
18 + <a href="/goTest" class="btn" style="width: 30px; color: grey;"> < </a>
19 + Face Emotion Recognition Platform</h3>
18 <hr> 20 <hr>
19 21
20 - <form action="http://localhost:5000/uploadFace" method="POST" enctype="multipart/form-data"> 22 + <video id="myVideo" autoplay currentTime=200 width="320" height="240" controls>
21 - <div class="form-group"> 23 + <!-- <source src={{ url_for('static', filename=file_name ) }} type="video/mp4"> -->
22 - <label for="title" class="text-uppercase">Video Upload</label> 24 + <source src={{ url_for('static', filename=file_name ) }}>
23 - <input type="file" name="file">
24 - <button type="submit" class="btn btn-outline-primary">Add</button>
25 - </div>
26 - </form>
27 25
28 - <video autoplay width="320" height="240" controls>
29 - <source src={{ url_for('static', filename="video/zoom_1.mp4") }} type="video/mp4">
30 </video> 26 </video>
31 27
32 - <a href="/faceEmotinoRecognition" class="btn btn-outline-primary">얼굴 감정 인식 분석하기</a>
33 -
34 -
35 <table class="table"> 28 <table class="table">
36 <thead> 29 <thead>
37 <tr> 30 <tr>
38 <th scope="col ">name</th> 31 <th scope="col ">name</th>
39 - <th scope="col">happy</th>
40 - <th scope="col">sad</th>
41 - <th scope="col">fear</th>
42 <th scope="col">angry</th> 32 <th scope="col">angry</th>
33 + <th scope="col">fear</th>
34 + <th scope="col">happy</th>
43 <th scope="col">neutral</th> 35 <th scope="col">neutral</th>
36 + <th scope="col">sad</th>
44 <th scope="col">surprise</th> 37 <th scope="col">surprise</th>
45 </tr> 38 </tr>
46 </thead> 39 </thead>
...@@ -49,71 +42,22 @@ ...@@ -49,71 +42,22 @@
49 {% for face_img in face_imgs %} 42 {% for face_img in face_imgs %}
50 <tr> 43 <tr>
51 <td scope="row">{{ face_img.name }}</td> 44 <td scope="row">{{ face_img.name }}</td>
52 - {% if face_emotion_dict[face_img.name].happy %} 45 + {% for emotion in face_emotion_dict[face_img.name] %}
53 - <td> 46 + {% if face_emotion_dict[face_img.name][emotion] %}
54 - {% for time in face_emotion_dict[face_img.name].happy %}
55 - <span>{{time}}</span>
56 - {% endfor %}
57 - </td>
58 - {% else %}
59 - <td> X </td>
60 - {% endif %}
61 -
62 - {% if face_emotion_dict[face_img.name].sad %}
63 <td> 47 <td>
64 - {% for time in face_emotion_dict[face_img.name].sad %} 48 + {% for time in face_emotion_dict[face_img.name][emotion] %}
65 - <span>{{time}}</span> 49 + <a href="#" name="time" id="{{time}}">{{time}}</a>
66 {% endfor %} 50 {% endfor %}
67 </td> 51 </td>
68 {% else %} 52 {% else %}
69 - <td> X </td> 53 + <td> x </td>
70 {% endif %} 54 {% endif %}
71 -
72 - {% if face_emotion_dict[face_img.name].fear %}
73 - <td>
74 - {% for time in face_emotion_dict[face_img.name].fear %}
75 - <span>{{time}}</span>
76 {% endfor %} 55 {% endfor %}
77 - </td>
78 - {% else %}
79 - <td> X </td>
80 - {% endif %}
81 -
82 - {% if face_emotion_dict[face_img.name].angry %}
83 - <td>
84 - {% for time in face_emotion_dict[face_img.name].angry %}
85 - <span>{{time}}</span>
86 - {% endfor %}
87 - </td>
88 - {% else %}
89 - <td> X </td>
90 - {% endif %}
91 -
92 - {% if face_emotion_dict[face_img.name].neutral %}
93 - <td>
94 - {% for time in face_emotion_dict[face_img.name].neutral %}
95 - <span>{{time}}</span>
96 - {% endfor %}
97 - </td>
98 - {% else %}
99 - <td> X </td>
100 - {% endif %}
101 -
102 - {% if face_emotion_dict[face_img.name].surprise %}
103 - <td>
104 - {% for time in face_emotion_dict[face_img.name].surprise %}
105 - <span>{{time}}</span>
106 - {% endfor %}
107 - </td>
108 - {% else %}
109 - <td> X </td>
110 - {% endif %}
111 -
112 </tr> 56 </tr>
113 {% endfor %} 57 {% endfor %}
114 </tbody> 58 </tbody>
115 </table> 59 </table>
116 - <hr/> 60 + <hr />
117 </div> 61 </div>
118 62
119 63
...@@ -126,6 +70,18 @@ ...@@ -126,6 +70,18 @@
126 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 70 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
127 integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 71 integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
128 crossorigin="anonymous"></script> 72 crossorigin="anonymous"></script>
73 + <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
74 +
75 + <script>
76 + $('a[name="time"]').on("click", function(e){
77 + e.preventDefault(); // 추가이벤트를 막아서 #의 최상위이동막음!!!
78 + const inputTimes = $(this).attr('id').split(":");
79 + let setTime = Number(inputTimes[0]) * 3600 + Number(inputTimes[1]) * 60 + Number(inputTimes[2]);
80 + document.getElementById("myVideo").currentTime = setTime;
81 + document.getElementById("myVideo").autoplay = true;
82 + })
83 +
84 + </script>
129 </body> 85 </body>
130 86
131 </html> 87 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge">
9 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 9 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
10 integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 10 integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
11 +
11 <title>Flask Face Emotion Recognition App</title> 12 <title>Flask Face Emotion Recognition App</title>
12 </head> 13 </head>
13 14
...@@ -17,21 +18,17 @@ ...@@ -17,21 +18,17 @@
17 <h3>Face Emotion Recognition Platform</h3> 18 <h3>Face Emotion Recognition Platform</h3>
18 <hr> 19 <hr>
19 20
20 - <form action="http://localhost:5000/uploadVideo" method="POST" enctype="multipart/form-data"> 21 + <form action="http://localhost:5000/faceEmotionRecognition" method="POST" enctype="multipart/form-data">
21 - <div class="form-group"> 22 + <div class="form-group" style="margin-top: 20px;">
23 + <p style="color: lightgray">mp4 확장자에 해당하는 비디오만을 추가해주세요</p>
22 <label for="title" class="text-uppercase">Video Upload</label> 24 <label for="title" class="text-uppercase">Video Upload</label>
23 - <input type="file" name="video"> 25 + <input type="file" style="margin-left: 10px;" name="video">
24 - <button type="submit" class="btn btn-outline-primary">Add</button> 26 + <p></p>
27 + <label class="text-uppercase">Input Seconds</label>
28 + <input type="text" id="seconds" name="seconds">
29 + <button type="submit" class="btn btn-primary btn-sm">Analysis Video</button>
25 </div> 30 </div>
26 </form> 31 </form>
27 -
28 - <video autoplay width="320" height="240" controls>
29 - <source src={{ url_for('static', filename="video/zoom_1.mp4") }} type="video/mp4">
30 - </video>
31 -
32 - <a href="/faceEmotinoRecognition" class="btn btn-outline-primary">얼굴 감정 인식 분석하기</a>
33 -
34 - <hr/>
35 </div> 32 </div>
36 33
37 34
...@@ -44,6 +41,7 @@ ...@@ -44,6 +41,7 @@
44 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 41 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
45 integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 42 integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
46 crossorigin="anonymous"></script> 43 crossorigin="anonymous"></script>
44 +
47 </body> 45 </body>
48 46
49 </html> 47 </html>
...\ No newline at end of file ...\ No newline at end of file
......