ModGuard

Our icon
Main Logo
ModGuard Chrome Extension in Light Theme
ModGuard Chrome Extension in (the better) Dark Theme
ModGuard Diagram
ModGuard Censoring Explicit Content

💡Inspiration

The internet is an enormous wealth of information that has completely changed the way we all live our lives. As the internet thrives and grows, all sorts of people post all kinds of media. This influx of data and exposure could be harmful, especially if the content is not-safe-for-work (NSFW) content like pornography and gore.

Modguard aims to solve this by using machine learning models to block NSFW images that may show up when browsing, on social media, or a sketchy ad.

❓What it does

Modguard is a Chrome extension that uses lightweight Machine Learning models to scan the website DOM and identify inappropriate images with a 90% accuracy rating. Users can:

select the "tolerance" of the model by adjusting the slider (the higher the percentage the more content the model will block)
choose the type of content blocking (either remove, blur, or grayscale)
whitelist websites that shouldn't be affected by the extension
choose a color theme

⚙️ How we built it

We're using ReactJS, Nodejs, and Typescript for our front-end of the extension. The main program is primarily programmed in Typescript. For blocking NSFW content, we are using Tensorflowjs which compiles a lightweight model stored on the client-side called MobileNet. To classify the images along with the dataset, we are using NSFWjs, a JS client-side library that puts images into 5 different categories:

Neutral
Drawing
Porn
Hentai
Sexy

Depending on the tolerance selected by the user, the confidence interval between the categories shrinks or enlarges. To bundle our site and release it to the user, we are using Webpack. For tests, we are using Jest and Puppeteer, where Jest is used for creating tests and Puppeteer is used for high-level API's.

💪 Challenges we ran into

I had never created a Chrome extension, let alone one that integrates machine learning. This experience helped me understand how Chrome handles foreign code while keeping their site secure along with abstracting the Chrome extension so that most of the code other than the front-end UI wouldn't have to interact with it at all. Additionally, trying to host the Chrome extension for everyone to access was an issue, as it had a lengthy process to be approved by Google before it could be easily accessible.

👏 Accomplishments that we're proud of

We're proud of creating a fully functioning Chrome extension that works seamlessly and achieves the goals that we set out for. Considering that this was the first Chrome extension I ever used along with integrating test-driven development into my workflow, I am pleased with the results that we have achieved.

🧠 What we learned

Before this hackathon, we never realized how much of a problem explicit content is becoming, especially with the rise of children being connected to the internet earlier and earlier. Through our research and work on ModGuard, we’ve learned more about the ethical and mental implications of letting anyone be exposed to NSFW content.

On a technical side, none of us knew how to set up a client-side hosted ML model, we’ve definitely learned a lot about working together as a team and creating professional products

🛣️ What's next for Modguard?

Although we’re incredibly happy with our results, we’re planning on implementing the following in the future:

Integrate detailed Text Processing with Google's Perspective API
Be completely multi-modal by processing music, videos, letters, and more.
Build a web app alongside the Chrome extension that adds more features and possible monetization opportunities

Thank you for reading and check out the github below!