Urban-Optimizer

Inspiration

Urban energy grids are under more stress than ever before. With extreme weather events and the growing demands of modern cities, rolling blackouts and capacity breaches are becoming a real threat. We realized that traditional grid management is highly reactive. We wanted to build a proactive solution—an AI-driven system that doesn't just watch the grid fail, but actively predicts stress and automatically simulates load mitigation before the breaking point is reached.

What it does

Urban-Optimizer is an autonomous load forecasting and dispatch telemetry console. It ingests rolling 48-hour time-series vectors of historical megawatt consumption from the PJM regional grid.

Using a Bidirectional Long Short-Term Memory (BiLSTM) neural network, it predicts peak loads on a 24-hour predictive horizon. If the AI detects an upcoming threshold breach (>35,000 MW), it automatically schedules interventions—simulating smart-infrastructure dimming and pre-cooling—and calculates exactly how much load needs to be shed. All of this is visualized on a live, highly interactive military-grade telemetry dashboard.

How we built it

We split the architecture into a distinct, decoupled frontend and backend:

The AI Backend: We trained a BiLSTM neural network using historical PJM Interconnection energy consumption datasets. We wrapped this model in a live Python API and containerized it for cloud deployment on Render.

The Frontend Console: We built a highly responsive static telemetry dashboard using HTML, Tailwind CSS, and Vanilla JavaScript.

The Data Visualization: To make the math tangible, we heavily utilized Chart.js. We engineered custom stacked bar charts to show "ghost" averted loads, a system stress gradient line chart, and a dynamically normalized radar graph to simulate regional node distribution across cities like Philadelphia and Chicago. We deployed this lightweight frontend seamlessly on Vercel / Cloudflare Pages.

Challenges we ran into

Getting the AI math to perfectly translate to the frontend visualizations was a massive hurdle. Initially, our Chart.js graphs were overlapping and hiding the optimization data. We had to rewrite the rendering logic to use stacked axes and calculate precise mitigation deltas so the UI accurately reflected the AI's interventions.

Additionally, managing cloud deployments right before the deadline was intense! We ran into Git merge conflicts and branch tracking errors when trying to push our final code while Render was simultaneously trying to auto-deploy our API updates. Accomplishments that we're proud of

Successfully training a time-series forecasting model and getting it fully operational in the cloud.

Building a frontend that genuinely looks and feels like a professional, high-end infrastructure command center.

Getting the live web application to successfully poll the Render backend, ingest the JSON predictions, and map them to dynamic, breathing graphs in real-time without crashing.

What we learned

Advanced Charting: We learned how to manipulate Chart.js at a deep level, including mathematical normalization for radar charts and custom dataset layering.

Cloud Deployment Pipelines: We learned the crucial differences between deploying stateful Python APIs on Render versus deploying static frontend assets on Vercel, and how to manage the Git workflows required to keep them in sync.

Time-Series AI: We gained practical experience parsing and utilizing real-world historical grid data for machine learning.

What's next for Urban-Optimizer

Moving forward, we want to replace our historical PJM CSV dataset with a direct, live websocket connection to an actual grid operator's API. We also plan to expand the BiLSTM model's parameters to ingest local meteorological data (like real-time temperature and humidity forecasts) to make the 24-hour load predictions even more accurate.