Inspiration
We believed that the core reason for most of the social issues we face today are caused by a lack of education and misinformation. This applies to the majority of people whether we know it or not. This is why we wanted to develop a tool that could objectively identify the biases we consume, and give us recommendations for other articles we could read to gain a more well-rounded knowledge on the topic.
What it does
We wanted to make this app to be as simple, accessible, and informative as possible for the user. Thus we decided on a Chrome Extension since its functionality is always only one click away. Once you click on the extension, the app gives you a breakdown of how left-leaning or right-leaning the article you are reading is, then looks for other articles from different sources on the same topic so that you can strengthen your knowledge on the topic by consuming information from different points of view.
How We built it
The front-end was developed using ReactJS and utilized the Google Chrome API to get the website DOM and create the popup. From our front-end, we made API calls to our Flask back-end where we computed the amount of bias in a given article, most relevant pages corresponding to specific keywords, and much more. The amount of bias in an article was predicted using a natural language processing machine learning model which we trained on Google Cloud's NLP library by feeding in 100 paragraphs of text with labels of either 'Left' or 'Right' based on the content and the source of that paragraph.
Challenges we ran into
First of all, since everyone in our team is relatively new to Hackathons, we struggled in general as a team. However, because we kept pushing ourselves we were able to learn a significant amount in a minimal time period. We ran into an issue where we could not get the text from the current tab. Since we were using the very sophisticated @mozilla/readability library to extract the contents from each article, we needed the DOM in our popup.js file. However, due to constraints set by the Google Chrome API, only the content script is able to access the DOM and it is not capable of sending DOM objects as a message to other components. We spent a full day working on this and finally were able to solve it by sending the innerHTML string and recreating the DOM once received. We had also underestimated the amount of time it would take the Google Cloud NLP library to train on our dataset (took almost 6 hours) and thus was a little rushed near the end. We also ran into problems making API calls since we had never worked with a React - Flask stack before. However, we were able to solve these issues with barely enough time to submit!
Accomplishments that we're proud of
We are proud that we were able to meet all our goals for this project, and that we were able to get a fully functioning Chrome Extension which gives us the results we were hoping to achieve. The ML model was able to accurately detect bias 85% of the time and since we are providing each user with at least 3 more related articles, we believe this tool would be able to serve its purpose in helping users achieve a more well-rounded mindset when it comes to political issues.
What we learned
As students without a ton of hackathon experience, everything we did this hackathon was relatively new to us and we learned a lot about them. That being said, we learned how to set up a chrome extension with React, how to make GET and POST API calls from React to Flask, how to scrape the web for articles, how to generate a machine learning model using the Google Cloud API, and project management skills, in general, to deliver this hackathon on time.
What's next for Right or Left
Although we are impressed by what we were able to accomplish this weekend, we believe there is much room for Right or Left to continue to grow as a platform that can help people educate themselves on political topics, which can hopefully lead to greater change in society in general. We have also considered features such as a continuous tracker of your news consumption, adding competitive multiplayer features, and just improving upon our existing system in general. We look forward to seeing where this goes!
Built With
- chrome
- css3
- figma
- flask
- google-cloud
- google-nlp-api
- html5
- javascript
- natural-language-processing
- react
Log in or sign up for Devpost to join the conversation.