Fact Checker Ai

🎯 The Problem

Misinformation spreads rapidly on YouTube, influencing opinions and decisions. Viewers often struggle to verify content quickly without diving into extensive research.

💡 The Solution

FactChecker AI is a browser extension that automatically analyzes YouTube videos and determines if the information is true, misleading, or false using AI-powered fact-checking.

✨ Key Features

• 🔹 Real-Time Accuracy Markers- See colored indicators directly on the YouTube timeline.

• 🔹 Instant Pop-Up Insights– View timestamps with AI fact-check results in a simple UI.

• 🔹 Detailed Reports & Sources: – One click opens a full breakdown on our website.

• 🔹 AI-Powered Verification: – Combines multiple sources & NLP models for high accuracy.

• 🔹 Seamless User Experience: – Animations and a clean UI ensure smooth interaction.

📂 Project File Structure

Here’s a guide to the essential files and directories in our project:

missinformation-detector/
├── src/                          # Source code directory
│   ├── popup.tsx                 # Main entry point for the extension popup
│   ├── background.ts             # Manages background script functionality
│   ├── tabs/                     # Tab components
│   │   └── IndepthAnalysis.tsx   # Component for rendering the in-depth analysis page
│   ├── contents/                 # Content script related files
│   │   └── content.ts            # Functions for handling notifications and toasts
│   ├── utils/                    # Utility functions
│   │   └── getYtVideo.ts         # API requests to YouTube using axios
│   ├── Component/                # Reusable UI components
│   │   ├── FactCard.tsx          # Component to display fact cards
│   │   ├── ErrorComp.tsx         # Component to display error messages
│   │   ├── NotYoutubeVideo.tsx   # Message for non-YouTube video pages
│   │   ├── TimeStamp.tsx         # Component to display timestamps
│   │   └── LoadingSquares.tsx    # Loading animation component
│   ├── Sections/                 # Page section components
│   │   ├── Header.tsx            # Header section component
│   │   ├── Body.tsx              # Body section component
│   │   └── Footer.tsx            # Footer section component
│   └── types/                    # Type definitions
│       └── ApiDataTypes.ts       # Defines Percentages class for API data types
├── README.md                     # Project documentation and setup instructions
└── [other files...]              # Other project files not explicitly listed

This map will help you navigate the project and locate key files with ease!

🖼️ Screenshots & GIFs

🎬 Demo

🚀 See FactChecker AI in action! Watch our demo video to understand how it detects misinformation in real-time. 📺 Watch the Demo.

(Click Here to watch!)

💡 How It Works:

1️⃣ Install the Extension.

2️⃣ Open a YouTube Video – FactChecker AI runs automatically.

3️⃣ See the Colored Markers on the timeline indicating truthfulness.

4️⃣ Click the Pop-up for detailed timestamps & reports.

5️⃣ Explore the Full Report on our website for sources & analysis.

🔗 Try It Yourself – Installation Guide

🛠️ Innovation & Tech Stack

🔹 AI-Powered Fact-Checking – Gemini 2.0 Flash

🔹 Chrome Extension – Plasmoc [React.js] + Axios

🔹 Website – React.js

🔹 Scalable Backend – Javascript with MongoDB for efficient data storage.

🚀 Run Our Extension Locally

backend is not required to be downloaded the backend is hosted, open the repo for more info

Clone the project:

git clone https://github.com/HoussemDegachi/FactChecker-Ai

Navigate to the project directory:

cd FactChecker-Ai

install pnpm

npm install -g pnpm@latest-10

Install dependencies:

pnpm install

Start the application:

pnpm run dev

then import the extension to your browser (we would recommend you use a chrome based brwoser)

🎥 Recommended YouTube Videos for Testing

To see FactChecker AI in action, try analyzing videos that contain a mix of verified facts, misleading claims, and misinformation.
Here are some recommended test videos:

1️⃣ Microsoft goes nuclear on TypeScript codebase – Video that contains wrong information.
2️⃣ How do executive orders work? - Christina Greer – Video that contains mostly correct infromation.
3️⃣ Machine Learning vs Deep Learning – Another video with correct information

🔹 Testing on diverse content helps evaluate the AI's accuracy and performance!

⚠️ Important Notice

To ensure accurate & fast results, we recommend watching a video not longer then 5–10 minutes.
This helps mitigate potential token limitations and enhances the AI's ability to detect misinformation effectively.

Please be patient when waiting for the results as they take some time (10-20s & less then 30s in worst conditions) to be generated

👥 Contributors

Thanks to these amazing people who helped build FactChecker AI! 🚀

• Omar Abd – AI & Backend
• Houssem Degachi – Full Stack
• Fatima Ezzahra – Website
• Mostafa Yaser – Extension