Stop The Hate

Inspiration

The internet was designed to connect us, but profanity has transformed it into a battleground of words and hate. This toxicity is measurable. A study of 51 million tweets revealed that one in 13 tweets contains curse words (Wang et al., "Cursing in English on Twitter," 2014). A 2023 Anti-Defamation League report found that 33% of American adults and 51% of teenagers experienced online harassment in the past year (ADL, "Online Hate and Harassment: The American Experience 2023"). Research has shown that profanity and hateful speech can be a detriment to mental health, especially for individuals who have pre-existing conditions such as depression (Geschke et al., 2019; Waldron, 2012). Children and teenagers are also at risk for negative mental health effects from social media or other websites with offensive content (Wachs et al., 2022). This creates the need for a product which can automatically filter out potentially harmful words or phrases online. Online aggression creates environments of mistrust and polarization, with studies showing particular impact on younger users who are still developing emotional resilience. Traditional profanity filters, which simply block specific words, fail to address the complexity of online hate speech, especially when it comes to contextual harassment, racial slurs, and subtle forms of discrimination. This inspired us to develop Stop the Hate, a Chrome extension that combines pattern recognition with AI analysis to detect not just explicit profanity, but also contextual hate speech across multiple languages. Hopefully we can give users control over their online experience, making daily online activities more inclusive and respectful.

What it does

Stop-the-hate is a Chrome extension that provides real-time hate speech and profanity detection across multiple languages. Using a hybrid approach combining pattern matching and AI analysis, it creates safer online spaces by identifying and filtering harmful content.

Key Features

Supports multiple languages (English, Chinese, Spanish, Arabic, Hindi)
Detects profanity and hate speech across different scripts.
Handles text obfuscation and variations.
Real-time pattern matching for immediate filtering
AI-powered contextual analysis using Google's Gemini API
Detects: explicit profanity, slurs, discrimination (racial, ethnic, religious, gender, sexual orientation), complex hate speech, threats.
Hover-to-reveal for user control
In-page toggle button for easy enabling/disabling
Instant local filtering for common patterns
Intelligent caching for repeated content
Minimal impact on page load times
Efficient handling of dynamic content

How we built it

Planning and Architecture

We began by identifying the core requirements of our hate speech detection system:

Real-time content analysis
Multilingual support
Minimal performance impact
Privacy-conscious design
Scalable architecture

This led us to choose a hybrid approach combining pattern matching and AI analysis, allowing for both speed and accuracy.

Tech Stack and Implementation

Technologies: JavaScript, Chrome Extensions Manifest V3, Google Gemini 1.5 Flash API, Regular Expressions, LocalStorage, DOM Mutation Observer.

Core Components

Pattern Matching: Unicode-aware regex system for fast, multilingual detection.
AI Integration: Context-aware Gemini API integration with rate limiting, fallbacks, and caching.
Performance: Optimized for speed with batch processing, debouncing, progressive scanning, and efficient caching.

Testing and Iteration

Initial prototype with basic regex filtering
Integration of AI capabilities
Performance optimization phase
Multilingual support implementation

We structured our code to be modular, well-documented, easy to debug, scalable for future enhancements

Challenges we ran into

Overall: This project presented several technical and logistical challenges. However, through iterative development, careful optimization, and effective teamwork, we successfully addressed these issues and built a robust and user-friendly content filtering solution.

Key Challenges:

Gemini API Rate Limits: Encountered frequent 429 errors due to free-tier limitations. This hindered real-time hate speech detection, especially for complex analysis. Solutions: Multi-layered approach: primary regex filtering, caching, rate limiting, graceful degradation to regex-only mode. Long-term solution: migrating to pay-as-you-go tier, leveraging Google Cloud's startup credits.
Multilingual Support: Initial regex patterns failed to accurately detect non-Latin characters, particularly in Chinese. Solution: Implemented Unicode-aware regex patterns with the 'u' flag and modified pattern construction. It was interesting how different writing systems are processed at the byte level.
Real-time Performance: Initial implementation caused page load delays and CPU spikes. Solution: Implemented batch processing, debouncing, WeakSet-based node tracking, and progressive scanning.
Content Reflow: Text replacement and blur effects led to jarring visual shifts. Solution: Implemented placeholder spans, smooth transitions, and optimized DOM manipulation.
Time Zone Differences: Proactively found common meeting times and maintained flexibility to accommodate diverse schedules.

Accomplishments that we're proud of

Hybrid Detection: regex pattern matching + Gemini API analysis. Seamless fallbacks, intelligent caching, and efficient processing.
Contextual Intelligence: Advanced prompt engineering with Gemini API for accurate, nuanced hate speech detection.
Performance Optimization: Near-instantaneous filtering with smooth handling of dynamic content updates and minimal impact on resources and page load times.
Multilingual Capability: Unicode-aware pattern matching, cross-script detection, and support for multiple writing systems.
Demonstrates the practical application of AI

What we learned

Advanced regex pattern optimization for Unicode and multilingual text processing
Real-world implementation of rate limiting and quota management strategies
Practical application of AI content moderation
Performance optimization techniques
Efficient caching strategies
Optimizing DOM operations for content-heavy applications
Effective prompt engineering
Handling API rate limits
Balancing accuracy and performance in AI-powered applications

What's next for Stop The Hate

If we were to deploy this publicly and publish it on the Chrome Web Store, we would need to implement secure API key management. Rather than embedding API keys in the client-side code, the best practice would be to develop a lightweight backend proxy service to handle all Gemini API calls securely. To ensure financial sustainability, the extension would need a tiered subscription model. Users could access basic regex-based filtering in the free tier, while premium subscribers would unlock full AI-powered detection capabilities. This would help offset API costs while keeping the basic functionality accessible to everyone. One potential feature would be Optical Character Recognition (OCR) integration. Currently, extension only detects text-based content, but with OCR capabilities, we could extend our filtering to images such as Instagram carousels. By integrating Google Cloud Vision API, we could detect and blur offensive text within images, making our extension multi-modal.