AI Traffic Prediction System

A modern, AI-powered traffic prediction interface with real-time visualization and machine learning forecasting.

Features

• Interactive Map: Real-time traffic visualization with Leaflet.js
• Live Traffic Feed: Auto-updating traffic events every 5 seconds
• AI Predictions: Machine learning-based traffic forecasting
• Analytics Dashboard: Comprehensive traffic metrics and charts
• Multiple Map Layers: Street, satellite, and traffic visualization
• Responsive Design: Works on desktop, tablet, and mobile devices
• Dark Theme: Modern UI with orange and cyan accents

Project Structure

``` traffic-predictor/ ├── index.html # Main HTML file ├── style.css # Styling ├── script.js # Frontend JavaScript ├── predictions.json # AI predictions data ├── grid_index.json # Traffic grid data ├── traffic_history.csv # Historical traffic data ├── train_and_forecast.py # ML training script └── README.md # This file ```

Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Python 3.7+ (optional, for ML training)

Installation

1. Clone or download the project ```bash git clone cd traffic-predictor ```

2. Open in VS Code ```bash code . ```

3. Run with Live Server

   • Install the "Live Server" extension in VS Code
   • Right-click on index.html and select "Open with Live Server"
   • The app will open at http://localhost:5500

Alternative: Run Locally

```bash

Using Python's built-in server

python -m http.server 8000

Then open http://localhost:8000 in your browser

```

Usage

Map Controls

• Zoom In/Out: Use the +/- buttons in the bottom-right corner
• Switch Layers: Click the layer buttons (Street, Satellite, Traffic)
• Get Route: Enter source and destination, click "Get Route"

Traffic Predictions

• View real-time traffic events in the live feed
• Check predicted delays and congestion levels
• Analyze traffic trends with the prediction chart

ML Training (Optional)

```bash python train_and_forecast.py ```

This will:

1. Load historical traffic data from traffic_history.csv
2. Train a simple forecasting model
3. Generate 24-hour predictions
4. Save results to predictions.json

Data Files

predictions.json

Contains AI-generated traffic predictions with confidence scores.

grid_index.json

Traffic grid data with congestion levels and incident counts.

traffic_history.csv

Historical traffic data for model training.

Technologies Used

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Mapping: Leaflet.js
• Charts: Chart.js
• Icons: Font Awesome
• Backend: Python (optional ML)
• Data: JSON, CSV

API Integration

To connect real traffic data:

1. Update script.js with your API endpoints
2. Replace sample data with live API calls
3. Update traffic events every 5 seconds with real data

Example: ```javascript fetch('/api/traffic-events') .then(res => res.json()) .then(data => updateTrafficEvents(data)) ```

Customization

Change Colors

Edit the CSS variables in style.css: ```css :root { --primary: #ff6b35; /* Orange / --secondary: #00d4ff; / Cyan / --dark: #0a0e27; / Dark blue */ } ```

Update Map Center

In script.js, change the initial map view: ```javascript map = L.map('map').setView([40.7128, -74.0060], 13); // [latitude, longitude], zoom level ```

Add More Traffic Events

Edit the addTrafficEvents() function in script.js to add more markers.

Performance Tips

• Use CDN links for libraries (already included)
• Optimize images and assets
• Lazy load components
• Cache predictions data

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

License

MIT License - Feel free to use and modify

Support

For issues or questions:

1. Check the browser console for errors
2. Verify all files are in the correct directory
3. Ensure you're using a modern browser
4. Check internet connection for CDN resources

Future Enhancements

• Real-time API integration
• User authentication
• Route optimization
• Mobile app
• Advanced ML models
• Traffic incident reporting
• Historical data analysis

---

Built with ❤️ for better traffic prediction