fillerfilter
Inspiration
When it comes to giving a speech or presentation, many people tend to include one too many filler words such as "um, uh, like, so, basically, actually, etc) which in turn degrades the effectiveness of their speech. Given the current state of the pandemic, interviews and presentations are now all conducted through the internet rather than in person so we can no longer gather people to provide feedback. Thus, we have developed an online application that allows users to record their speech while displaying common word statistics in real-time -- all at the hands of your own computer.
What it does
When the user first opens the website, they are welcomed with an animated title screen.
On the main webpage, users have the options to start, stop, and reset recording at the bottom navigation bar. (You will need to have microphone permissions enabled). As the user speaks into the mic, live transcript is generated from using a Web Speech API. Similarly, summary statistics for words per minute (wpm), top 10 common words used, and most common filler words are updated and displayed as charts in real-time. An additional UI functionaility we implemented is a speech visualizer that generates an animated imagery that follows the frequency spectrum of the users voice.
How we built it
Our application is mainly build upon react-speech-recognition which is a react hook that converts speech from the users microphone to text. The backend part of this project was to extract and break down the results into useful components that could be delivered live to the users on the screen. The frontend portion of this project dealt mainly with providing a sleek user interface that is easy to use and pleasing to the eye.
Challenges we ran into
One of the biggest challenges we ran into was the first stage of merging conflicts. As everyone was setting up dependencies and updating files, we came to a point where a merge crashed the webpage and we all had to debug to see where it went wrong. Another challenge was perfecting the audio visualizer. Since multiple elements were being rendered in real time, there was a point where the audio visualizer stopped working. Another minor challenge was disagreements on UI styling since each member had different preferences.
Accomplishments that we're proud of
One major accomplishment was the ability to have a functioning application. As a team, we had an efficient communication system on discord where everyone is notified of a new push to github so we could stay up to date. This was to prevent many unecessary merge conflicts from occuring.
What We learned
As first time hackathon-ers, we have learned how much time and patience goes into developing applications. When we were drafting all of our ideas, it seemed like a feasible task that could be easily done in 24 hours. However, a couple of hours into the hackathon, we were struggling to fix many small bugs in order to perfect our application. We also learned that teamwork and leadership played a crucial part in our work flow. One team member takes the part of managing task distribution while everyone provides consistent updates.
What's next for fillterfilter
The next step is to implement more functionalities such as providing users tips on how they can impove their speech, ability to save recording to go over later, and maybe create a ranking system where users are given a score based on quality of speech and use of common filler words.
Log in or sign up for Devpost to join the conversation.