-
-
Your home base for The Media Problem: jump into the AI detector, the diagnostic, or the lesson library from one screen
-
Paste any article link and let the AI Bias Detector scrape, clean, and analyze the text for hidden manipulation.
-
The detector breaks down exactly which techniques were used, and shows a neutral rewrite side-by-side with the original.
-
Before you start, find out where your blind spots actually are with the Media Literacy Diagnostic.
-
Lesson one: how a completely true headline can still be written to manipulate the way you feel about it
-
Same action, different words. Seeing two framings side-by-side makes the manipulation impossible to miss
-
Can you spot the neutral headline? This is the exact skill the whole app is built to train.
-
Read the headline, then identify the exact manipulation technique being used. No guessing, just pattern recognition.
The Media Problem
https://the-media-problem.onrender.com/
Inspiration
All around us there's a constant stream of news and information, coming from every direction, all day long. From social media posts, to new headlines, these sources aren't just telling us what happened, they're trying to tell us how to feel about it. With so many sources all telling the same story differently, it's easy to just read one, form an opinion, and move on, without ever really questioning why it was written that way. This recurring issue is why I built The Media Problem, a program that doesn't just analyze and detect bias for you, it teaches you how to recognize it yourself, in your daily life.
What it does
Most media literacy tools stop at teaching you the concept of bias in the abstract, but The Media Problem is the only one that closes the loop by testing what you learned against live, real-world content you choose yourself.
The Media Problem is built around three core systems that work together:
The AI Bias Detector allows you to paste in any real web article link URL or manually copy and paste raw text contents. The detector runs token-optimized web scraping to filter layout clutter, isolates the raw text, and analyzes it for linguistic bias, emotional triggers, loaded adjectives, adjective-to-noun ratios, base-rate fallacies, contextual coupling, and factual claim verifiability. It then displays the extracted text side-by-side with objective, neutral alternative rewrites. In short, you can paste any link or article to strip away the website clutter and see exactly where the writer is using emotional words or misleading logic to manipulate you instead of presenting straight facts.
The Media Literacy Diagnostic is a comprehensive diagnostic test that evaluates your media literacy blind spots. Once you finish the test, it analyzes your answers and recommends exactly which of the chapters you should focus on to improve your skills. In other words, this test reveals exactly where your biases or blind spots are and tells you exactly which lessons to read to get better at reading the news.
The 8-Chapter Interactive Guide walks you through real-world media manipulation and framing techniques across 8 interactive chapters, covering loaded language, visual manipulation, selective time-slicing, and nominalization, using everyday scenarios to show you how a headline or image can be true yet highly biased. Simply put, this guide teaches you the exact linguistic and visual strategies writers use so you can understand how 100 percent true facts can still be spun to deceive you.
Positive Impact on the world
Misinformation does not just distort what people believe, it shapes how they vote, who they trust, and how divided a community becomes over issues that a little added context could have resolved. Most of that damage happens quietly, one shared headline at a time, to people who were never taught to notice it happening.
That is exactly why this problem needs to be solved early. By putting a real literacy tool directly in the hands of students at the exact age they are forming their news habits for the first time, The Media Problem aims to build a generation that catches manipulation on sight instead of absorbing it unnoticed.
A student who learns to spot a loaded adjective or a misleading chart at 15 carries that instinct into every article, ad, and social post they encounter for the rest of their life, and passes a sharper eye on to the people around them in the process.
The goal is not to tell anyone what to believe. It is to hand every user a set of tools they can point at anything, from a local school announcement to international news, and trust the answer they get back, because they found it themselves rather than being told what to think. A more literate reader makes a more literate group chat, a more literate classroom, and eventually, a more literate community that is a little harder to manipulate and a little more capable of disagreeing without being turned against each other by a headline neither side actually read.
How we built it
- Frontend: built on a full-stack architecture using TypeScript, React, and Vite for a highly responsive user interface
- Backend: an Express backend server
- Styling: Tailwind CSS for a custom dark slate theme, utilizing Framer Motion for elegant layout transitions and Lucide React for modern iconography
- Web scraping: the Express server handles dynamic web scraping to clean up HTML from URLs and feeds the clean text to the Google GenAI SDK
- AI classification: structured JSON prompting with the Featherless.ai Gemini models guarantees a consistent, precise classification of bias techniques instead of vague feedback
Challenges we ran into
The hardest challenge was editorial: making sure every single example I wrote was completely neutral. It is incredibly easy to write a biased headline example that itself leans a certain way, so I rewrote them using everyday topics like local zoning ordinances, school sports, and consumer product reviews to teach the pure mechanics of framing without taking sides. On the technical side, getting the web scraper to cleanly extract text from highly diverse news sites and fine-tuning Featherless.ai Gemini prompts to return highly structured, precise diagnostic metrics and objective rewrites took significant iteration.
Accomplishments that I'm proud of
I am proud that I managed to build something that feels like a practical utility rather than just another lecture. Normally, learning about media literacy means reading a list of warnings or watching a passive video. I wanted to build a complete loop where you test your own assumptions, see exactly where your blind spots are, and then use the detector to check real news articles in real time. Seeing these systems connect and work together feels incredibly rewarding because it translates abstract ideas into something you can immediately use on your daily feed.
What I learned
Building this forced me to realize how difficult it is to remain truly objective. When I was writing the examples for the chapters, I kept catching myself introducing my own subtle biases, which taught me that neutrality takes constant, deliberate effort. I also learned a lot about how to guide AI models to perform strict, structured linguistic analysis rather than just giving vague opinions. But the biggest change has been in my own habits. Now, when I scroll through social media or read a headline, I find myself automatically pausing to look at the phrasing and sentence structure in a way I never did before.
What's next for The Media Problem
- I plan to expand the AI detector to support direct image and screenshot uploads to analyze visual manipulation techniques.
- I also want to grow the lesson library with community-submitted examples of media framing.
- Eventually, I want to implement persistent progress tracking so users can watch their media literacy score improve over time.
Built With
- css
- express.js
- featherless.ai
- genai-sdk
- lucide
- motion
- node.js
- react
- tailwind
- tsx
- typescript
- vite
- web-scraping
Log in or sign up for Devpost to join the conversation.