Inspiration

Will I be able to have a graduation ceremony to recognize my years of hard work in university? Will I be graduating on Zoom? Will it be on ClubPenguin? Facetime? How will I even receive my diploma?

With all the uncertainty about whether or not a commencement will take place and how, we have created the perfect virtual graduation. No matter the location, friends, family, and close-ones from all over are able to celebrate and congratulate the graduate.

What it does

We created an application that imitates the flow of a standard graduation ceremony. Users will be given two options from the main page: Join a Ceremony or Create a Ceremony. We will be working under the assumption that students will not be creating the ceremony. Once the Create a Ceremony card is clicked, users will be redirected to a create room page. Within this page, they will be required to input information such as University name to create the room. One thing to highlight here is that only the creator of the room will be given an access to two buttons within the room: Start Graduation and Next Student. Once users click on the Join a Ceremony card, a modal containing several input boxes will pop up on the screen. One of these input boxes will be roomID, which gets generated once the room gets created. In order to access the correct room, users will have to have correct roomID.

Upon everyone joining the room, the creator of the room will be able to start the graduation by clicking on the Start Graduation button located on the upper right corner of the screen. The graduation will start out with the welcoming narration. Once the narration ends, the creator will be able to click on the Next Student button to bring up the student's webcam. From here on, everything will happen automatically. The narration will instruct students and the webcam will automatically switch. One thing that we really wanted to highlight was the idea of walking on the podium stage. Given that we will have an access to all students' webcam, we wanted to somehow make the transition of each webcam seem as if they are walking in and out of the stage. To get this effect, we took advantage of fade in and out animation. We also used ml5.js to detect a receiving motion from students. This was done to allow students to feel as if they are in a live graduation. Once the motion gets detected, a quick animation of diploma sliding will show as well. One last thing to mention is that we implemented a live-chat for everyone in the room to communicate. For a live-chat we decided to use Google Cloud Natural Language to detect any disrespectful comments. Depending on the sentiment of the message, we will either alert the user or not allow them to send the message.

How we built it

Frontend

The frontend was developed with React (Material UI and Ant Design) and consists of four primary views:

  • Main Page: consists of two clickable cards that allows users to decide whether they want to join or create a room
  • Modal: consists of several input boxes that users need to enter to join the room (one field of input will be a room ID which will be generated once the room gets created)
  • Create Room Page: consists of several input boxes that will be used within the room and to generate narration
  • Room: contains webcam and live-chat for users to communicate during the graduation

Backend

  • Socket.io: to generate graduation rooms
  • ml5.js posenet: Ml5.js is a high level interface for tensorflow. We used Posenet, one of their many pre-trained models to detect when a motion is received
  • Twilio Sendgrid Email API: to send diplomas via email once the graduation ends
  • MongoDB Atlas: to store participants information

Following GCP services were used:

  • Google Cloud Text-to-Speech: to generate graduation narration speech. We used the input from users (student full name, university name, and graduation year) to generate custom graduation speeches that emphasize the importance of the occasion.
  • Google Cloud Natural Language: to filter out and deny any disrespectful chat messages. Whenever a participant sends a message via our chatroom, we first run that message through a profanity filter to ensure there are no curse or inappropriate words. After that, we run that message through the sentiment analysis to ensure that the message is positive.

Alt text

Challenges we ran into

  • Our team had a hard time getting the animations to work properly
  • Had a hard time getting each person’s webcam to transition

Accomplishments that we're proud of

  • Being able to stream video and google text to speech audio through socket.io
  • Getting flashy designs to work

What's next for iGraduated

  • Sending a personalized diploma when we send a email to
  • Graduation cap filter in the webcam
  • Allow family and friends to participate
+ 2 more
Share this project:

Updates