-
-
Showing how a message may be perceived as toxic, insult, threat, and/or identity attack.
-
Messages may hold different emotions from happy, sad, angry, surprise, and fear.
-
Messages may also hold positive/negative and objective/subjective tones.
-
Our logo!
Inspiration
Our team took an interest in NLP (Natural Language Processing) and wanted to explore how others may interpret messages while giving those a chance to reflect on how they come across.
What it does
Mirror is a web application that interprets messages into perspective, emotion, and sentiment categories which allows users to reflect on how others perceive their messages. Within each category, there are several attributes that could be measured such as toxicity and threat levels, varying emotional tones, polarity, and subjectivity.
How we built it
We designed Mirror from its low-fidelity to its high-fidelity and its design system through Figma. Throughout the design phase, we discovered packages that aligned closely with the main targets of our NLP analysis and adjusted our designs accordingly for reference during development. The logo was designed with Adobe Illustrator.
The website was built with HTML, CSS, JavaScript, and Bootstrap.
The perspective category was built using the Perspective API, the emotion category was built using the Text2emotion Python package, and the sentiment category was build using spaCyTextBlob. We used Flask to connect user-input retrieved by JavaScript and process through Python.
To ease the process of creating data visualizations, we used Jinja. The data visualizations were built with Chart.js and was linked with the data parameters from the mentioned packages.
Challenges we ran into
Initially we struggled with the core focus of our NLP analysis but were able to discover packages that categorized our findings. We had to decide which charts would properly display our data and while we had some unique designs, it was difficult to replicate due to our limited exposure to Chart.js. It also took some time to adjust the styling for the website, from enhancing the data visualizations to overwriting an underlying minimal Bootstrap styling to match with our designs. For one of our members, the website didn't properly appear on their end although the code was up-to-date.
Accomplishments that we're proud of
We all got to build something that was really interesting and fun! Through consistent communication between designers and developers, the website resembled closely to what we had envisioned. We also got to learn different technologies (mentioned below) and integrate their capabilities into an application.
What we learned
This was a great opportunity to learn how to connect programming languages through frameworks such as Flask! We discovered many interesting APIs and packages and how to integrate their data and display its visualization on a website. We also learned how to use Chart.js. For some members it was also a first-time exposure to build a website from a Figma design and working with NLP!
What's next for Mirror
For Mirror, we hope to introduce more attributes to provide a further in-depth NLP analysis and to further enhance the data visualizations.
Log in or sign up for Devpost to join the conversation.