Detecting Violent Content with AI: A Simple Image Analyzer Using APILayer & React

#react #javascript #tutorial #api

🚀 Introduction

With the rise of AI, analyzing images for violent content is now possible! I built a Violence Detection App using React.js, APILayer API, and Imgbb to help users identify potentially harmful images before sharing them online.

👉 Live Demo

👉 GitHub Repo

🎯 How It Works

1️⃣ Upload an image (or use Imgbb to generate a URL).

2️⃣ Analyze the image using the APILayer Violence Detection API.

3️⃣ Get a detailed risk assessment based on AI analysis.

💡 Risk Levels:

✅ Safe (Very Unlikely or Unlikely to contain violence).

⚠️ Needs Review (Possible violence detected).

🚨 Flagged (Likely or Highly Likely to contain violence).

// Fetching image analysis result from APILayer
fetch(`https://api.apilayer.com/violence_detection/url?url=${imageUrl}`, {
  method: "GET",
  headers: {
    apikey: process.env.REACT_APP_API_KEY,
  },
})
  .then((response) => response.json())
  .then((data) => console.log(data));

🎨 Cool Features

✅ Broken border design around analysis steps.
✅ Animated "Go Back" button for smooth user experience.
✅ Easy-to-use image upload system (Imgbb integration).
✅ Professional UI/UX with real-time analysis results.

🖥 Building This Yourself?

🔹 Fork the GitHub repo, add your APILayer API key, and deploy it!
🔹 Feel free to improve or add features! Contributions welcome.

🔥 Final Thoughts

This project can be useful for social media platforms, parental control apps, and content moderation tools. AI-powered safety measures can help prevent exposure to harmful content online.

💬 What do you think? Drop a comment if you have ideas for improvement! 🚀