Ai Powered Industrial IoT Anomaly Detection Dashboard (Django + React)

This repository contains a complete baseline for a freelance industrial IoT backend (Django REST Framework) and frontend (Vite + React + Tailwind + Recharts).
It supports:

• Real-time anomaly detection via an XGBoost model (/api/predict/) with a hybrid expert/ML pipeline.
• A digital twin IoT Simulator that streams telemetry every 10 seconds (/api/predict/) and persists results to the database.
• Persisted dashboard KPIs + charts per industrial site (Tunis / Sfax / Sousse).
• A real-time CO2 emissions simulator using an XGBoost regressor (/api/simulate-co2/).
• Energy forecasting using pre-trained Prophet models (/api/forecast/<site>/).
• A site performance leaderboard using an advanced classifier (/api/compare-sites/).

Tech Stack

Backend

• Python + Django
• Django REST Framework (DRF)
• django-cors-headers with CORS_ALLOW_ALL_ORIGINS = True
• Machine Learning:
  • joblib to load serialized models
  • pandas + sklearn/XGBoost compatibility
  • prophet for energy forecasting

Frontend

• React (functional components + hooks)
• Vite
• Tailwind CSS (dark industrial UI)
• Recharts (charts)
• lucide-react (icons)
• axios (API calls)
• react-hot-toast (global anomaly notifications)

Backend Structure (High Level)

• anomaly_backend/
  • settings.py: DRF + CORS configuration
  • urls.py: includes api/
• api/
  • models.py: MachineData model for persisted telemetry + anomaly label
  • views.py: all API endpoints (predict, forecasting, CO2 simulation, leaderboard, DB hydration/reset)
  • serializers.py: DRF serializers for request/response validation
  • prediction.py: feature alignment + engineered feature rules + inference helpers
  • apps.py: loads ML model(s) once at startup for performance
  • ML artifacts directory:
    • api/ml_models/ (XGBoost / classifier / regressor pickles)
    • api/modeles_prophet/ (Prophet JSON models)
  • ML schema endpoint:
    • GET /api/model-meta/ tells the simulator the trained feature columns

Database

Incoming telemetry from the simulator is stored in:

• api/models.py → MachineData
  • timestamp, site, shift
  • temperature_c, vibration_mms, ph, energy_kwh
  • is_anomaly (0/1)

The frontend reads persisted history via:

• GET /api/readings/

You can wipe persisted data (destructive) via:

• POST /api/reset-data/ (requires confirm_token = "RESET_DATABASE")

ML Model Inputs & Hybrid Architecture

Anomaly Detection (POST /api/predict/)

The simulator sends:

• timestamp (ISO string)
• site
• shift
• temperature_c, vibration_mms, ph, energy_kwh
• optional extra_features (dict of any additional model features)

Hybrid pipeline in api/views.py:

1. Level 1: Expert rules (hard thresholds)

   • vibration_mms > 1.2
   • temperature_c > 40.0
   • ph < 6.5 OR ph > 8.5
   • If breached:
     • persist to DB
     • return:
       • {"prediction": 1, "trigger": "expert_rule", "message": "Critical threshold breached (Physics/Rule-based)."}

2. Level 2: ML model inference (XGBoost)

   • If Level 1 passes:
     • build a feature row that matches the model’s exact training schema
     • predict 0/1
   • If predicted anomalous:
     • persist to DB
     • return:
       • {"prediction": 1, "trigger": "ml_model", "message": "Complex anomaly signature detected by AI."}

3. Level 3: Normal

   • If both Level 1 and Level 2 pass:
     • persist to DB with is_anomaly = 0
     • return:
       • {"prediction": 0, "trigger": "none", "message": "System stable."}

Feature Engineering + Schema Alignment

The project is designed to handle “wide” models trained on many columns:

• GET /api/model-meta/ exposes the model’s feature_names_in_ and default values.
• The simulator can supply those columns as extra_features.
• The backend aligns and predicts using the full trained feature row (column order included).

Forecasting & Simulation Endpoints

1) Energy Forecasting

• GET /api/forecast/<site_name>/
• Loads the Prophet JSON model:
  • URL Zone Industrielle Tunis → file api/modeles_prophet/prophet_Zone_Industrielle_Tunis.json
  • spaces are replaced with underscores for lookup
• Creates future:
  • periods = 32, freq = "45min", include_history = False
• Returns:
  • {"site": "...", "points": [{ "timestamp": "YYYY-MM-DD HH:MM", "energy_kwh": <float> }, ...]}

2) Real-Time CO2 Simulation

• POST /api/simulate-co2/
• Payload:
  • energy_kwh, temperature_c, vibration_mms
• Input feature order is strictly:
  • [['energy_kwh', 'temperature_c', 'vibration_mms']]
• Model:
  • api/ml_models/xgboost_co2_regressor.pkl
• Output:
  • {"co2_emissions_kg": <rounded>, "status": "success"}

3) Site Performance Leaderboard

• GET /api/compare-sites/
• For each site (Tunis/Sfax/Sousse):
  • reads latest averages from MachineData
  • computes derived features co2_emissions_kg and production_rate
  • runs classification_cycles_model_v2.pkl inference
  • returns:
    • [{ site, status, avg_energy, production_rate }, ...]

The backend aligns the input vector to the model’s true feature_names_in_ when available.

Frontend Structure

• frontend/src/components/Layout.jsx
  • Fixed left sidebar: Dashboard, IoT Simulator, Alert History
  • Top navbar: system health status (changes with anomalies)
  • Main content renders the active route
• frontend/src/context/SystemContext.jsx
  • Hydrates persisted readings on app startup using GET /api/readings/
  • Stores alert events and (per-site) latest CO2 prediction
  • Triggers global critical anomaly UI on prediction === 1
• frontend/src/pages/Dashboard.jsx
  • KPIs + charts filtered by a Dashboard site selector
  • Live CO2 metric filtered by site
  • Site Performance Leaderboard + Energy Forecasting sections
• frontend/src/pages/Simulator.jsx
  • Active Site selector (critical: ensures DB separation per site)
  • Expert + ML telemetry streaming to /api/predict/
  • Editable captor controls for all trained model features (extra_features)
  • Request/response console block
• frontend/src/pages/AlertHistory.jsx
  • Shows persisted anomaly events from DB

Required ML Artifacts

Place these files in the repository:

• api/ml_models/xgboost_champion.pkl (or set ML_CHAMPION_MODEL_PATH)
• api/ml_models/xgboost_co2_regressor.pkl
• api/ml_models/classification_cycles_model_v2.pkl
• api/modeles_prophet/*.json:
  • prophet_Zone_Industrielle_Tunis.json
  • prophet_Zone_Industrielle_Sfax.json
  • prophet_Zone_Industrielle_Sousse.json

Configuration

Backend environment variables

• ML_CHAMPION_MODEL_PATH
  • Optional: absolute or BASE_DIR-relative path to your anomaly classifier pickle.

Frontend environment variables

• VITE_API_URL (optional)
  • Default: http://127.0.0.1:8000

Run Instructions (Dev)

1) Backend

cd "c:\Users\Tarzen\Documents\3IA5\Mahdi"
python -m venv .venv
.venv\Scripts\Activate.ps1
python -m pip install --upgrade pip
python -m pip install -r requirements.txt
python manage.py migrate
python manage.py runserver 127.0.0.1:8000

2) Frontend

cd "c:\Users\Tarzen\Documents\3IA5\Mahdi\frontend"
npm install
npm run dev

Open:

• http://localhost:5173

API Summary (Routes)

• POST /api/predict/
• GET /api/model-meta/
• GET /api/readings/
• POST /api/reset-data/
• GET /api/forecast/<site_name>/
• POST /api/simulate-co2/
• GET /api/compare-sites/

Notes / Troubleshooting

• If you see feature-name alignment errors in /api/predict/, use:
  • the simulator “Full Model Inputs” captors to provide the exact required extra columns.
• If the site leaderboard or predictions fail due to model feature schema mismatch:
  • verify classification_cycles_model_v2.pkl exists in api/ml_models/
  • verify the model’s feature_names_in_ is satisfied (the backend aligns to it when possible).
• XGBoost pickles may emit sklearn/xgboost version warnings. Predictions still run, but for production you should export models using the same library versions you load with.