slop-detector

A chrome extension that protects you from misinformation and AI slop!

Comment

Slop-Detector

Inspiration

How often has the thought “I’m pretty sure this is AI” crossed your mind?

With the rapid rise of AI-generated content, that question is becoming more common. From this idea, we built Slop-Detector — a cross-browser extension designed to identify AI-generated content, debunk inauthentic engagement, and provide a percentage-based analysis of how likely AI was used.

By prioritizing transparency and clarity, Slop-Detector aims to combat misinformation while supporting a healthier, more trustworthy online experience.

What It Does

Slop-Detector is a web-based tool that analyzes content in real time and determines the authenticity of media.

Features

  • Image Detection
    Scan individual images directly from a webpage

  • Video / Short-Form Analysis
    Analyze clips via URL or upload

  • Article Fact-Checking
    Evaluate credibility and flag inconsistencies in webpages

  • Explainability
    Provides reasoning behind predictions instead of just a yes/no output

Instead of binary results, the tool outputs a confidence percentage and explains why content is likely AI-generated, helping users build intuition over time.

How We Built It

Frontend

  • Chrome Extension using Vanilla JS, HTML, CSS
  • Handles:
    • Image selection (click or upload)
    • Video input (URL or upload)
    • Text extraction from webpages or manual input

Backend

  • FastAPI middleware
  • Routes user input to appropriate AI services

AI Integration

  • AI or Not API → image authenticity detection
  • Google Gemini API → contextual analysis & fact-checking

Processing Flow

  1. User selects or uploads content (image, video, text, or page)
  2. Extension preprocesses data (resizing, batching, extraction)
  3. FastAPI sends requests to AI services
  4. Results are aggregated and returned with explanations

This modular pipeline allows easy swapping of models or APIs without changing the frontend.

Challenges

  • API rate limits & cost constraints
    Managing usage while avoiding excessive token costs

  • Handling diverse user input
    Selecting the right models for different data types

  • Image preprocessing
    Normalizing formats and sizes for consistent analysis

  • Frontend ↔ Backend communication
    Maintaining fast and reliable responses

Accomplishments

  • Built a fully functional cross-browser extension
  • Implemented a multi-modal detection system (image, video, text)
  • Designed explainable outputs instead of black-box predictions
  • Created a tool that feels immediately useful in everyday browsing
  • Collaborated effectively to deliver a working product quickly
  • Focused on transparency in combating misinformation

What We Learned

  • Integrating multiple AI services requires orchestration, not just API calls
  • Performance matters more than feature overload
  • Rate limits and costs are real engineering constraints
  • Simplicity > overengineering
  • Hands-on experience with:
    • Chrome Extension Development
    • Full Stack Development (HTML, CSS, JS, Python)
    • FastAPI
    • Gemini API
    • AI or Not API
    • Data preprocessing pipelines

What's Next

  • Mobile integration (Instagram, TikTok, etc.)
  • Real-time overlays while scrolling
  • Improved detection models to reduce false positives
  • User feedback system to refine accuracy

Long-Term Vision

Build a universal trust layer for online content

Built With

  • JavaScript
  • HTML / CSS
  • Python
  • FastAPI
  • Google Gemini API
  • AI or Not API

Built With

Share this project:

Updates