Install Python deps
From traffic-app, install Flask, numpy, pandas, and optional ultralytics if you want Detect.
Compiling the hour
Developers
The public site is Next.js 16 with Tailwind v4, App Router, and Three.js. The scientific runtime is Flask. You are allowed to love both. This page is the contract between them.
Surface
/api/hybrid_predictDate, time, scenario. Flask returns predicted speeds for the OSM graph.
/api/ppo_routeStart/end edge indices + the last hybrid window. Returns recommended_route_index and predicted_speed.
/api/route_map_fullJSON polylines colored by predicted speed for the Leaflet map. Auto-runs a demo prediction if none is stored.
/api/yolo_detectmultipart image posted to Flask YOLOv8. Returns vehicle_count and annotated_image_url under /static/uploads.
/api/influencelat, lon, place → 30×30 attention-style matrix with place-labeled roads near that spot.
/api/placesq= search string. OSM Nominatim + Overpass catalog for Thiruvananthapuram. Debounced from the UI.
/api/networkThiruvananthapuram OSM drive graph as Leaflet polylines (gray until you generate speeds).
/api/healthFlask liveness: city name, edge count, whether YOLO loaded.
Stack you can clone
App Router. React 19. Tailwind CSS v4 with an inline @theme of named variants: bone, parchment, khaki, mist, ash, stone, graphite, obsidian, ember, vapor. Space Grotesk and IBM Plex Mono via next/font. Three.js through React Three Fiber, loaded with ssr: false so the graph never tries to render in Node.
Useful platform features in use: Metadata API, Open Graph defaults, sitemap and robots, sticky layout, client islands only where the instrument must move (theme, studio, detection, canvas).
Terminal 1, from traffic-app: python app.py (Flask on port 5000). Terminal 2, from traffic-app/web: npm run dev (Next.js on port 3000). The UI calls /api/*; Next proxies every request to Flask. YOLO images are served from /static/uploads.
City deployments should put a gateway in front of predict and upload. Do not hang raw weights on the public internet. Do not log frames longer than the civic policy. The contact form on this site is a brief, not a backdoor.
If YOLO is dark, the API should say so. If a corridor is unknown, return the list. If PPO is untrained for a subgraph, fall back to Dijkstra and label the fallback. Silent success is how cities lose months.
GET /api/places?q= searches OSM (Nominatim + cached Overpass catalog for Thiruvananthapuram) with optional lat/lon. Empty query returns no dump — the UI only opens after debounced search. POST /api/route_map_full accepts start/end lat/lon, scenario, and route_mode (shortest | fastest | balanced) and returns city roads plus route path_line, alternatives, and distance_km. GET /api/influence accepts lat, lon, place and returns a labeled 30×30 matrix with road_details.
Current app.py uses generate_demo_predictions(date, time, scenario) — deterministic synthetic speeds on the OSM edge count. Same inputs → same outputs. Heavier hybrid weights can be wired later; do not document demo speeds as live Kerala traffic.
Example
POST /api/predict
{
"corridor": "MG Road",
"horizon": 12,
"family": "hybrid"
}
→ series[], mae, rmse, r2, generated_atLocal recipe
From traffic-app, install Flask, numpy, pandas, and optional ultralytics if you want Detect.
python app.py → http://127.0.0.1:5000 — watch for OSM places loaded and YOLO status.
cd web && npm install && npm run dev → http://localhost:3000
GET /api/health should report city Thiruvananthapuram and edge counts.
POST /api/route_map_full with start/end lat lon, scenario rain, route_mode fastest.
GET /api/places/catalog?refresh=true rebuilds data/tvm_osm_places.json from Overpass when online.
Common questions
Flask is probably down. Next proxies /api to port 5000 — both processes must run.
Type a query (dropdown is search-only). Ensure Flask can reach Nominatim or has the Overpass cache file.
Flask adds open CORS for local demos. Put a gateway in front for production.