Maskcognizer

Maskcognizer, 2020    Go to the Source Code
Technological Work. As the leader of the group of six, I was responsible for guiding the team, designing the interface, and doing all supporting works.

Mask-Cognizer is a multimodal user interface that utilizes the face detection and AI technology to detect the people who are not wearing a mask with a simple chatbot to keep users update information. The design inspiration and idea are to put in some effort to help to slow down the COVID-19 pandemics, which Mask-Cognizer can remind people to wear a mask and raise the public awareness of the public hygienic.
Home Page
In the home page, there are three buttons (“Mask-cognizer”, “Chatbot”, “Setting”) from the left side to the right side under the Mask-Cognizer icon. If you click on one of these buttons, it will redirect you to the corresponding page.
Mask-Cognizer
In the Mask-cognizer page, a camera screen will be displayed after hearing “hello” from the system. The camera will capture your face - if you face is detected properly, a square box is drawn on your face. The interface uses the loaded face detection modal to check whether you are wearing a mask or not. The layout description is as the left side. If you are wearing a mask, the colour of the box changes to green and the mask is detected (up); if you are not wearing a mask, the colour of the square in the camera screen will be red and the audio “Please wear your mask, thank you.” will be played to remind the user to wear a mask
Chatbot
In the Chatbot page, the layout will be very similar to the communication application, such as Whatsapp, Messenger. UI as shown on the right. There are three input method on the Bar at the Bottom of the Chatbot page.

1. Keyboard Input: There is a long white text input bar with the sentence “Input Message here ......”, which you can click on it and type the message you want to ask the chatbot by using keyboard input. Messages is pass to the bot when pressing “Send” button on the right, then the message is shown on the right-hand side of the chat record area with the teal dialogue box.

2. Audio Input: If you are not going to type your message, you can press the button on the right bottom corner and speak the message that you want to ask. After you have finish record your message, you can release the button and the message will be translated and send to the chatbot using the text-to-speech technology.

3. Menu Input: If you click on the menu button, there will be a list of preset questions that you can choose to ask the chatbot. Once you clicked on one of the questions, your question will be appeared on the dialog area and the chatbot will response to your question immediately.

Setting
If you click on the “Setting” button, the website will redirect you to the Setting page. In the Setting page, there is a form with two items, which are “Mode” and “Comment”. For the “MODE”, there are two radio buttons for you to choose, which are normal mode and the elder mode. The normal mode is the default mode of the website. If you want customised features like larger font size in the application, you can choose to use the elderly mode. The elderly mode is a mode that design for the elderly or the people who are having visual impairment problem as it provides larger font size in the application. For the “COMMENTS”, you can leave your comments or feedback in the text input bar and press the “Save” button to send your feedback to us to improve Mask-Cognizer. There is also a “Default” button on the left of the “Save” button, it allows you to change the mode back to the normal mode and clear the input text in “COMMENTS”.