Civility
Hack the North: Website Link
Civility is an NLP-based text analysis web application that can help you develop and more importantly keep a healthy online presence, avoiding as much unnecessary drama and controversies as possible.
Role
Web Development
Tools
CohereAPI
Express.js
Material-UI
Next,js
React
Vercel
The Task
We took inspiration from the countless controversial social media posts that often appear online, many infamously posted by famous figures (I'm sure you can think of some). In order to prevent the spread of such heavy negativity throughout the internet and to preserve the ideal images of the celebrities we all love, we thought of a straightforward solution to help social media users keep themselves in check.
Execute
We built Civility using Next.js, React, Material-UI, Express.js, and of course, the Cohere API. We used Figma for the early mockups of the design, CSP (somewhat scuffed replacement to Adobe Illustrator) for the logo, and Git for version control and collaboration. We were able to 'train' models in Cohere using external datasets we found online: one which classifies Twitter tweets as toxic or not, and one that labels political Reddit posts with a particular political alignment.
More specifically, we were able to perform text classification using the classify endpoint and semantic search with the nearest neighbour search algorithm. Both methods produce a certain percentage of being 'correct' in regards to how accurate the label they attach to the example/input might be, which is also a statistic we show. For example - and you can try this for yourself - 'bruh' is 79% likely to be used in an offensive manner online (obviously).
Struggle
While most of us have some decent experience in frontend and even a little backend development, we had pretty much none in machine learning, NLP, or anything of the sort. Approaching the task was quite daunting at first because we had no idea where to begin. However, as always, documentation soon became our saviour. In fact, it was instrumental in our progress; the tutorials provided got us through most of what we needed to do. Besides that, we also strangely (or perhaps, expectedly) struggled with certain CSS operations. Material-UI having some very oddly documented components certainly did not alleviate any of the pain. We are sorting out the backend hosting once again since Heroku has shut down it's service.
Future?
What's next for Civility you may ask? Although most of the tests that we ran have given out somewhat accurate results, we're not done yet. We would love more time to train our models so that results can be even MORE accurate. We also want to provide our users with a personal experience with responses that are more enriching, and also that provides more valuable information that they can't get anywhere else. For instance, more indicators such as race/cultural alignment and text suggestions. Oh yeah, we also want to add a dark mode ;) and expand into the metaverse.
We learned a lot about Next.js, Express, the Cohere API, and even more about NLP! It was our first exposure to these concepts so working with them and coming out with a product was very exciting. We also learned it's sometimes better to get at least some sleep, rather than none. Also, we got reminded of how annoying CSS can be...
We are incredibly proud of our group's accomplishments mainly because we completed most of the goals and features that we wanted to accomplish in a timely manner. We haven't worked together in a LONG time, so working together, first of all, felt very fun. Coming together to work on this and having a live demo to play with made us feel amazing after. We also feel that we were much more prepared to go into this hackathon since this was our third hackathon. We brainstormed before (which then led to catching up and chilling in a call), but we thought of ideas and felt much more excited especially since HTN was in person this year! In the end, we were very proud with our final product since we actually were able to deploy the backend for the first time in a project :)
Thanks for taking the time to take a look at my work!
Like what you see?
Let's keep the conversation going!