PhishGuard: where ScamSpotter Kids become SafeMessage Heroes

Inspiration

The surge in online scams targeting children motivated me to build something proactive. I wanted kids aged 9–13 to learn how to spot phishing not through boring warnings, but through an engaging, empowering experience. The “cyber detective” theme emerged naturally: children love mysteries, and turning scam detection into a detective adventure felt like the perfect way to make cybersecurity education stick. Combining real AI analysis with storytelling and gamification seemed an effective way to teach practical digital safety skills while keeping it age-appropriate.

What I Learned

• Deploying a Hugging Face Transformers model in a production-like Flask backend and optimizing the loading experience.
• Building a full-stack application with zero frontend frameworks — pure HTML, CSS, and vanilla JavaScript — while keeping it responsive and interactive.
• Designing educational content that balances accuracy with accessibility: writing clear explanations, creating progressive difficulty in games, and crafting a narrative that teaches without lecturing.
• Working with SQLite for lightweight persistence and understanding trade-offs between simplicity and scalability.
• The importance of privacy-first design when building tools for children (no accounts, no tracking, everything runs locally or on-device where possible).

How I Built It

1. Backend — Flask serves a simple REST API. The core is a Hugging Face text-classification pipeline using the fine-tuned roshana1s/spam-message-classifier model, augmented with a heuristic keyword layer for more reliable kid-friendly explanations.
2. Risk scoring — Combines the model confidence with keyword matches to produce a 0–100 % danger score.
3. Database — SQLite tracks aggregate statistics and game scores (no personal data stored).
4. Frontend — Three self-contained pages:
   • index.html → real-time message scanner with visual risk meter
   • story.html → scroll-based interactive narrative with embedded examples
   • game.html → five-level classification game with streak scoring and badges
5. All pages share a custom dark theme (style.css) and communicate with the backend via Fetch API.

Challenges Faced

• Model cold-start time on first load — mitigated with clear loading messages and caching.
• Achieving high accuracy on short, informal messages typical of kids’ chats while avoiding false positives that could erode trust.
• Writing advice and explanations that are accurate yet understandable to 9-year-olds without being condescending.
• Balancing game difficulty progression so it feels rewarding rather than frustrating.
• Keeping everything client-side where possible while still providing persistent stats.

Built With

• api
• css3
• flask
• html5
• huggingface
• huggingfacepipeline
• python
• sqlite
• torch
• transformers
• vanillajavascript