Beiwe
Internet has changed our lives for the better and the worse. The flood of content we recieve every day is littered with undesirable images.
Millions suffer from PTSD,Phobias every year. Each trigger makes everyday life unbearable, each moment taking them back to the horrors they had to go through.
Beiwe is there to help you. Our extension sends all the images in a webpage through a machine learning model that classifies each image into categories. Just tell us the categories you want us to block, and we’ll make them vanish! Download and try out our free extension to keep stress out of your life!
Inspiration
What is PTSD?
Traumatic events can leave scars that affect a person for a lifetime. Any reminder of the event triggers flashbacks, nightmares and severe anxiety, as well as uncontrollable thoughts about the event.
What are phobias?
A phobia is a persistent, excessive, unrealistic fear of an object, person, animal, activity or situation. Like PTSD, phobias trigger symptomps that affect a person mentally. Specific phobia is the type of phobia that instills fear in a person for a particular object or an event.
How do they affect people?
Around 3.6% people in the US suffer from PTSD every year. Traumatic events have long lasting effects on a person including negative changes in thinking and mood, and changes in physical and emotional reactions. In the worst affected, the huge intensity of the effects even drive them to suicide.
This idea first came to us when one of our friends, who had acrophobia, was having trouble adjusting to social situations. He would frequently browse the internet, and whenever he unintentionally came across images associated with his phobia on a website, he would become triggered. Because we couldn't stand to watch him become more depressed every day, we thought about developing a web extension that could filter out images that would trigger him. This extension is dedicated to helping all those, like our friend, who are struggling to be independent and browse freely without any concerns/. My friend is still depressed.
What is does?
Beiwe is a chrome extension that filters out all the images in the website that is related to the labels that the user enters. After the user is signed up and logged in , he is requested to set labels that triggers him .Beiwe sends a warning if the label isnt in the database, the user is then requested to enter another synonym of the label. After the labels are set , the beiwe extension is ready to go. When you visit a webiste , beiwe shows a loading screen for a few seconds as it processes the images on the website. After the processing is done the website is ready to browse without all the images that triggers the user.
How we built this project ?
Blocks that were used to build this project
- Google CloudVision API
- MongoDB database
- Javascript Frontend
- HTML
- CSS
- Figma design tool
We used the google cloud vision api to assign labels to the images in the webpage . We used a mongoDB database to store the login credentials and the labels that are assigned by the user . The extension interface was made by using HTML, CSS and JAVASCRIPT. We used figma to make the design of the project.
Challenges that we faced
Issues that we faced in backend
- Sending images individually increases the processing time of the extension
- Batchwise Image Annotation
- Sending the post request to Flask through Ajax
- Encoded Ajax to send HTTP Request in the Flask Reqeust format
- Page Reload Time
- Stores Images flagged for labels in the Database. Next request to website retrieves result from database.
- Authentication of API call
- Authenticating Client before sending API call
- Hiding Private JSON key
- Removing private JSON key from repositry and using a more private and secure approach
- Take labels from the database according to the user requesting it
- Storing all the labels in a user database and storing the blocked webistes in Another database
- Getting a request and checking if the labels match in backend
- Logic is shifted to the backend and returning json string containing image links to block the browser
Issues we faced in frontend
- Login data and set label requests were sent at the same time, which was causing a 405 error
- Changes were made in the back-end such that it returns the session key on login
- The images were visible for a short time before beiwe processes the requests completly
- Usage of a loading screen while beiwe is filtering out the images
- Sometimes the URL size is too large to be sent to backend
- Solution
What we learnt ?
As a team, we gained a lot of knowledge while working on this project. We discovered that putting an idea into practice is much harder than we first thought. We looked at new approaches to web development, designing, and backend databases, which was a great learning experience. It was great improving ourselves as a team while working together and building the project.We also found ourselves solving complex problems that we faced in the project, which helped us greatly and increased our knowledge on how to tackle issues similar to it.
What's next for Beiwe ?
Beiwe is made for all websites but currently it works in static websites but faces issues in dynamic websites and websites with infinite scroll. We are aiming to publish beiwe in the chrome extension store and helping a lot others who are suffering with phobias.
Log in or sign up for Devpost to join the conversation.