{"id":136,"date":"2024-03-16T16:08:45","date_gmt":"2024-03-16T21:08:45","guid":{"rendered":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teame0\/?p=136"},"modified":"2024-03-16T16:08:45","modified_gmt":"2024-03-16T21:08:45","slug":"arnavs-status-report-for-3-16","status":"publish","type":"post","link":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teame0\/2024\/03\/16\/arnavs-status-report-for-3-16\/","title":{"rendered":"Arnav&#8217;s Status Report for 3\/16"},"content":{"rendered":"<p><span style=\"font-weight: 400\">This week I focused on integrating the camera data with the Django backend and React frontend in real-time. I worked mainly on getting the yawning feature to work and the other ones should be easily integrated now that I have the template in place. The current flow looks like the following:\u00a0<\/span><span style=\"font-weight: 400\">the run.py file which is used for detecting all distractions (gaze, yawn, phone pickups, microsleep) now sends a post request for the data to <\/span><a href=\"http:\/\/127.0.0.1:8000\/api\/detections\/\"><span style=\"font-weight: 400\">http:\/\/127.0.0.1:8000\/api\/detections\/<\/span><\/a><span style=\"font-weight: 400\"> and also sends a post request for the current session to <\/span><a href=\"http:\/\/127.0.0.1:8000\/api\/current_session\"><span style=\"font-weight: 400\">http:\/\/127.0.0.1:8000\/api\/current_session<\/span><\/a><span style=\"font-weight: 400\">. <\/span><span style=\"font-weight: 400\">The current_session is used to ensure that previous data is not shown for the current session the user is working on. <\/span><span style=\"font-weight: 400\">The data packet that is currently sent includes the session_id, user_id, distraction_type, timestamp, and aspect_ratio. For the backend, I created a\u00a0 DetectionEventView, CurrentSessionView, and YawningDataView that handles the POST and GET requests and orders the data accordingly. Finally, the frontend fetches the data from these endpoints using fetch(&#8216;<\/span><a href=\"http:\/\/127.0.0.1:8000\/api\/current_session\"><span style=\"font-weight: 400\">http:\/\/127.0.0.1:8000\/api\/current_session<\/span><\/a><span style=\"font-weight: 400\">&#8216;) and fetch(`<\/span><a href=\"http:\/\/127.0.0.1:8000\/api\/yawning-data\/?session_id=$%7BsessionId\"><span style=\"font-weight: 400\">http:\/\/127.0.0.1:8000\/api\/yawning-data\/?session_id=${sessionId<\/span><\/a><span style=\"font-weight: 400\">}`) and polls the data every 1 second to ensure that it catches any distraction event in real-time. Below is a picture of the data that is shown on the react page every time a user yawns during a work session:<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-137\" src=\"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teame0\/wp-content\/uploads\/sites\/302\/2024\/03\/Screenshot-2024-03-16-at-4.59.36-PM-300x160.png\" alt=\"\" width=\"300\" height=\"160\" srcset=\"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teame0\/wp-content\/uploads\/sites\/302\/2024\/03\/Screenshot-2024-03-16-at-4.59.36-PM-300x160.png 300w, http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teame0\/wp-content\/uploads\/sites\/302\/2024\/03\/Screenshot-2024-03-16-at-4.59.36-PM-768x411.png 768w, http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teame0\/wp-content\/uploads\/sites\/302\/2024\/03\/Screenshot-2024-03-16-at-4.59.36-PM-1024x547.png 1024w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p><span style=\"font-weight: 400\">The data is ordered so that the latest timestamps are shown first. Once I have all the distractions displayed, then I will work on making the data look more presentable.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">My progress is on schedule and during the next week, I will continue to work on the backend to ensure that all the data is displayed and I will put the real-time data in a tabular format. I will also try to add a button to the frontend so that it automatically triggers the run.py file so that it does not need to be run manually.\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This week I focused on integrating the camera data with the Django backend and React frontend in real-time. I worked mainly on getting the yawning feature to work and the other ones should be easily integrated now that I have the template in place. The current flow looks like the following:\u00a0the run.py file which is &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teame0\/2024\/03\/16\/arnavs-status-report-for-3-16\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Arnav&#8217;s Status Report for 3\/16&#8221;<\/span><\/a><\/p>\n","protected":false},"author":819,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[3],"_links":{"self":[{"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teame0\/wp-json\/wp\/v2\/posts\/136"}],"collection":[{"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teame0\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teame0\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teame0\/wp-json\/wp\/v2\/users\/819"}],"replies":[{"embeddable":true,"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teame0\/wp-json\/wp\/v2\/comments?post=136"}],"version-history":[{"count":1,"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teame0\/wp-json\/wp\/v2\/posts\/136\/revisions"}],"predecessor-version":[{"id":138,"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teame0\/wp-json\/wp\/v2\/posts\/136\/revisions\/138"}],"wp:attachment":[{"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teame0\/wp-json\/wp\/v2\/media?parent=136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teame0\/wp-json\/wp\/v2\/categories?post=136"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teame0\/wp-json\/wp\/v2\/tags?post=136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}