Featured AI / ML 2024

Accident Risk Navigator

Predicts road accident risk in real time and visualizes high-risk zones on interactive maps using machine learning.

A full-stack AI platform that predicts accident risk based on road conditions and weather, and visualizes high-risk zones on interactive maps.

#ai#road-safety#data-visualization#machine-learning#full-stack#python

Accident Risk Navigator is an intelligent road safety platform built to predict and visualize accident risks using machine learning, covering the full lifecycle from raw dataset processing and model training to a production-ready web interface.

Users enter a location and instantly receive an accident risk score powered by a trained TensorFlow/Keras binary classifier. The model factors in road type, speed limit, weather conditions, time of day, and junction type to produce a contextual risk assessment.

A Leaflet-based interactive map renders risk scores as heatmap overlays across the road network, letting users visually identify high-risk zones. A Recharts analytics dashboard displays risk distribution trends, peak accident hours, and feature importance breakdowns.

The backend is a Python Flask API serving the trained model, and the frontend is a React + TypeScript application handling map rendering, user input, and data visualization — a complete full-stack AI project built end to end.

Key Features

🎯

Real-time Risk Prediction

Enter any location and instantly receive an accident risk score from the trained TensorFlow/Keras classifier.

🗺️

Interactive Risk Heatmap

Leaflet map overlays visualize high-risk road zones using color-coded intensity layers across the road network.

🌦️

Weather-aware Scoring

Risk predictions dynamically factor in current weather conditions — rain, fog, and dry road states each shift the risk score.

🛣️

Road Feature Hazard Analysis

The model considers road type, speed limits, and junction characteristics to give a context-aware hazard breakdown per location.

📊

Analytics Dashboard

Recharts-powered dashboard showing risk distribution trends, peak accident hours, and ML feature importance breakdowns.

Tech Stack

ReactTypeScriptPythonTensorFlowKerasFlaskLeafletRecharts

Architecture

The system is split into two services: a React + TypeScript frontend responsible for map rendering, user input, and analytics visualization, and a Python Flask API that serves model predictions. The ML model is a TensorFlow/Keras binary classifier trained on historical accident datasets. Feature engineering was a significant part of the work: normalizing numerical features, one-hot encoding categoricals, and deriving features like time-of-day buckets and intersection proximity scores.

The Keras model is serialized to disk and loaded once at Flask startup, kept in memory for the lifetime of the server. Concurrent prediction requests are handled via a request queue to prevent parallel model calls. On the frontend, Leaflet heatmap layers use viewport-based data windowing — only risk data for the current map bounds is loaded, with debounced re-fetching on pan/zoom.

Challenges & Solutions

The hard problems — and how I solved them.

Feature engineering for meaningful predictions

Raw accident datasets had inconsistent formats, missing values, and a mix of numerical and categorical variables. The bulk of the modeling work was feature engineering — normalization, one-hot encoding, and deriving meaningful features like time-of-day buckets, intersection proximity, and weather severity tiers — before the model reached acceptable accuracy on the test set.

Serving the Keras model with low latency

Loading the Keras model on each prediction request introduced unacceptable latency. I resolved this by loading the model once at Flask server startup and keeping it in a global variable, with a basic request semaphore to handle concurrent calls without model state corruption.

Rendering large heatmap datasets without lag

Plotting thousands of risk data points on Leaflet simultaneously caused significant rendering lag and scroll jitter. I implemented viewport-based data windowing — the frontend only requests and renders risk data within the visible map bounds — combined with debounced re-fetching on pan and zoom events to stay responsive.

More Projects

ExtMig

An open-source developer tool designed to improve migration workflows and productivity for modern development teams.

TypeScriptNode.js

Masroufi

A full-featured mobile recruitment platform built with Flutter using Clean Architecture and BLoC, supporting three distinct user roles.

FlutterDartBLoCDio +2

Cat'aloge

An AI-powered mobile app that automatically scans your phone gallery and organizes pet photos using TensorFlow Lite inference running fully on-device.

FlutterDartTensorFlow LiteRiverpod +1

Interested in working together?

I'm always open to discussing new projects and opportunities.

Jihed Mrouki

Mobile & Flutter Developer specializing in scalable architectures and intelligent mobile solutions.

Connect

© 2026 Jihed Mrouki. All rights reserved.

Built with SvelteKit & TailwindCSS