Integrated Traffic Detection and Counting System with YOLOv8 Backend

[hardihardi]

This PR transitions the Traffic Detection System from a simulation-based prototype to a functional real-time analysis system.

Key changes:

1. Backend Development: Created a Python Flask backend in the backend/ directory.

   • traffic_counter.py: Uses YOLOv8 (via ultralytics) to track vehicles and count them as they cross a virtual line. It supports two directions ('Mendekat' and 'Menjauh') and calculates SKR (Satuan Kendaraan Roda Empat) based on the PRD coefficients.
   • app.py: Provides API endpoints for uploading videos, processing YouTube URLs (using yt-dlp), and retrieving real-time statistics. It also serves a live MJPEG stream of processed frames.
   • Secure filename handling and history pruning (to prevent memory leaks) are implemented.

2. Frontend Integration:

   • TrafficDashboard: Connects to the Flask API, sends video/URL for processing, and displays the live /stream from the backend.
   • VehicleVolume & Charts: Updated to use backendStats provided by the dashboard's polling mechanism, showing real vehicle counts and SKR analysis.
   • Use of process.env.NEXT_PUBLIC_BACKEND_URL for flexible backend configuration.

3. Cleanup and Verification:

   • Removed binary weights and log files.
   • Verified the API with backend/test_api.py.

To run the system:

1. Install Python dependencies: pip install flask flask-cors opencv-python-headless ultralytics yt-dlp werkzeug.
2. Start backend: python3 backend/app.py.
3. Start frontend: npm run dev -- -p 9002.

---

PR created automatically by Jules for task 230004736315457304 started by @hardihardi

Summary by Sourcery

Integrate a YOLOv8-powered Flask backend for real-time traffic detection and counting and wire it into the existing traffic dashboard for live visualization.

New Features:

• Add a Flask-based backend service that ingests video or stream URLs, runs YOLOv8 tracking, and exposes traffic statistics and MJPEG frame streaming APIs.
• Introduce a TrafficCounter component that tracks vehicles crossing a virtual line, classifies direction, and computes SKR-based metrics over time.
• Connect the traffic dashboard to the backend for starting and stopping analyses, streaming processed video, and polling live traffic statistics to drive charts and volume displays.

Enhancements:

• Replace simulated traffic and moving-average data in the frontend with backend-driven, real vehicle counts and SKR metrics for charts and vehicle volume calculations.
• Make backend connectivity configurable in the frontend via an environment-based backend URL.

Tests:

• Add a backend API test script that spins up the Flask server and verifies basic traffic-stats, URL processing, and stop endpoints.

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
vision-pulse	Ready	Preview	Jul 13, 2026 4:45am
visionpulse	Ready	Preview	Jul 13, 2026 4:45am

[sourcery-ai]

Reviewer's Guide

Introduces a new Flask-based YOLOv8 backend for real-time vehicle detection/counting and wires the existing Next.js traffic dashboard to consume live stats/streaming frames from this backend instead of using simulated data, including SKR calculations and moving-average volume charts.

Sequence diagram for starting and running backend-powered traffic analysis

sequenceDiagram
  actor User
  participant TrafficDashboard
  participant FlaskBackend
  participant TrafficCounter
  participant VideoSource

  User->>TrafficDashboard: Select_source_and_click_Start
  alt Source_is_URL
    TrafficDashboard->>FlaskBackend: POST /process-url (url)
    FlaskBackend->>FlaskBackend: stop_existing_processing
    FlaskBackend->>TrafficCounter: reset()
    FlaskBackend->>VideoSource: resolve_stream_url
    FlaskBackend->>FlaskBackend: start_thread(process_video)
  else Source_is_file
    TrafficDashboard->>FlaskBackend: POST /upload-video (FormData(video))
    FlaskBackend->>FlaskBackend: stop_existing_processing
    FlaskBackend->>TrafficCounter: reset()
    FlaskBackend->>VideoSource: save_file_and_open
    FlaskBackend->>FlaskBackend: start_thread(process_video)
  end

  loop process_video_thread
    FlaskBackend->>VideoSource: read_frame()
    VideoSource-->>FlaskBackend: frame
    FlaskBackend->>TrafficCounter: process_frame(frame)
    TrafficCounter-->>FlaskBackend: processed_frame
    FlaskBackend->>FlaskBackend: update_current_frame
  end

  loop every_2_seconds_while_analyzing
    TrafficDashboard->>FlaskBackend: GET /traffic-stats
    FlaskBackend->>TrafficCounter: get_stats()
    TrafficCounter-->>FlaskBackend: counts_and_moving_average
    FlaskBackend-->>TrafficDashboard: stats_json
    TrafficDashboard->>TrafficDashboard: update_backendStats_and_charts
  end

  par Live_video_stream
    TrafficDashboard->>FlaskBackend: GET /stream
    loop while_processing
      FlaskBackend-->>TrafficDashboard: multipart_jpeg_frame
    end
  and User_stops_analysis
    User->>TrafficDashboard: Click_Stop
    TrafficDashboard->>FlaskBackend: POST /stop
    FlaskBackend->>FlaskBackend: is_processing = False
  end

Loading

Class diagram for YOLOv8-based TrafficCounter

classDiagram
  class TrafficCounter {
    - YOLO model
    - float line_y_ratio
    - dict counts
    - dict skr_coefficients
    - dict track_history
    - set counted_ids
    - list history_data
    + TrafficCounter(model_path, line_y)
    + float get_skr(cls_name)
    + ndarray process_frame(frame)
    + dict get_stats()
    + reset()
  }

  class YOLO {
    + track(frame, persist, verbose)
  }

  TrafficCounter --> YOLO : uses

Loading

File-Level Changes

Change	Details	Files
Wire TrafficDashboard to a configurable Flask backend that drives live stats, charts, and video stream instead of local simulation data.	Add BACKEND_URL (from NEXT_PUBLIC_BACKEND_URL with localhost fallback) and backendStats state to TrafficDashboard. Replace simulated traffic data generation with a polling loop to /traffic-stats that maps backend counts into chart-ready trafficCountData and backendStats. On start, POST either /process-url for URL sources or /upload-video for file sources; on stop, POST /stop to terminate backend processing. When analyzing, display the backend MJPEG /stream in place of the placeholder/embed and pass backendStats down to VehicleVolume and MovingAverageChart.	src/components/traffic/traffic-dashboard.tsx
Replace front-end simulated vehicle volume/PCU stats with values derived from backend traffic counts.	Extend VehicleVolume props to accept backendStats alongside coefficients. Remove random stat increment interval and instead recompute stats when backendStats or coefficients change. Map backend vehicle classes to front-end keys, aggregate Mendekat/Menjauh counts, compute per-vehicle PCU and totals, and keep a processing timer while analyzing.	src/components/traffic/vehicle-volume.tsx
Drive moving-average SKR chart from backend-provided moving_average_skr instead of random data.	Update MovingAverageChart to accept backendStats and drop the internal random data refresh interval. When analyzing and backendStats contains moving_average_skr, append/update a time-bucketed entry with Mendekat, Menjauh, and total SKR, trimming history length. Clear chart data when analysis stops and relax fixed Y-axis domain.	src/components/traffic/moving-average-chart.tsx
Introduce a Flask backend that runs YOLOv8 tracking on uploaded videos or URLs, exposes stats endpoints, and serves an MJPEG stream of processed frames.	Configure Flask app with CORS, upload directory, and global state (TrafficCounter, processing flags, current frame, locks). Implement /upload-video to securely save an uploaded file, reset counters, and start a background processing thread; implement /process-url to do the same for network streams, resolving YouTube URLs via yt-dlp. In the processing thread, open the video source with OpenCV, run frames through TrafficCounter.process_frame, store the latest processed frame, and throttle with sleep. Expose /traffic-stats to return current status and stats, /stop to flip is_processing off, and /stream to serve MJPEG frames from generate_frames().	backend/app.py
Implement YOLOv8-based vehicle tracking, directional counting, SKR calculation, and moving-average SKR computation with history pruning.	Load a YOLOv8 model, define counting line position, SKR coefficients per class, and per-track history/deques for motion tracking. For each frame, run model.track, filter to supported vehicle classes, maintain per-track trajectories, draw boxes/labels, and detect line crossings to increment Mendekat/Menjauh counts only once per track ID. Accumulate SKR events into history_data, prune to a 2-hour window, and compute total_skr and 15-minute moving_average_skr scaled to per-hour rates for both directions. Provide reset() to clear counts, history, and tracked IDs between sessions.	backend/traffic_counter.py
Add a simple API smoke-test script that exercises the Flask endpoints end-to-end via a spawned server process.	Spawn backend/app.py as a subprocess and poll /traffic-stats until it responds or a timeout is reached. Exercise /traffic-stats initial state, /process-url with a dummy URL, /traffic-stats while STARTED (asserting some Mendekat car activity), and /stop, printing responses. On failures, dump server stdout/stderr before terminating the subprocess cleanly.	backend/test_api.py

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.