| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> |
| <title>A grid lab in your browser · GENCO</title> |
| <meta name="description" content="Real heat waves and hurricanes on a 2,000-bus Texas grid model, solved in your browser: GENCO proposes, a full AC power flow certifies, bands quantify."> |
| <meta name="theme-color" content="#ffffff"> |
| <link rel="icon" href="assets/favicon.svg" type="image/svg+xml"> |
| <link rel="stylesheet" href="assets/vendor/maplibre-gl-5.24.0.css"> |
| <link rel="stylesheet" href="styles_v2.css"> |
| |
| |
| <style> |
| @font-face { font-family: "Mulish"; font-weight: 400; font-display: swap; src: url("assets/fonts/Mulish-Regular.ttf") format("truetype"); } |
| @font-face { font-family: "Mulish"; font-weight: 600; font-display: swap; src: url("assets/fonts/Mulish-SemiBold.ttf") format("truetype"); } |
| @font-face { font-family: "Mulish"; font-weight: 700; font-display: swap; src: url("assets/fonts/Mulish-Bold.ttf") format("truetype"); } |
| @font-face { font-family: "Mulish"; font-weight: 800; font-display: swap; src: url("assets/fonts/Mulish-ExtraBold.ttf") format("truetype"); } |
| </style> |
| <script src="assets/vendor/maplibre-gl-5.24.0.js"></script> |
| <script type="module"> |
| const sign = new URLSearchParams(location.search).get("__sign"); |
| import(sign ? `./app_v2.js?__sign=${encodeURIComponent(sign)}` : "./app_v2.js"); |
| </script> |
| </head> |
| <body> |
| <header class="hdr"> |
| <div class="hdr-in"> |
| <div class="brand"> |
| <img class="logo" src="assets/logo_mark.svg" alt="" width="36" height="36"> |
| <div class="hdr-title"> |
| <h1>A grid lab in your browser</h1> |
| <p>Texas under real heat waves and hurricanes: a synthetic 2,000-bus grid model, solved here. GENCO, a neural network, proposes; physics certifies.</p> |
| </div> |
| </div> |
| <a class="by" href="https://www.vicomtech.org" target="_blank" rel="noopener">by <img src="assets/logo_wordmark.svg" alt="Vicomtech"></a> |
| </div> |
| </header> |
|
|
| <main class="page"> |
| |
| <section id="tab-heat" class="tab"> |
| <ul class="proof" aria-label="What this page does"> |
| <li><button type="button" class="proof-i" data-how="data"><b>Real data</b><span>ERA5 heat, ERCOT load, NOAA hurricane tracks</span></button></li> |
| <li><button type="button" class="proof-i" data-how="browser"><b>In your browser</b><span>no server, no licensed solver</span></button></li> |
| <li><button type="button" class="proof-i" data-how="certified"><b>Certified</b><span>a full AC power flow checks each answer, or flags it</span></button></li> |
| <li><button type="button" class="proof-i" data-how="quantified"><b>Quantified</b><span>90% bands and Monte Carlo intervals</span></button></li> |
| </ul> |
| <div class="sec-title one"><h2 id="one-h">This what-if</h2> |
| <p>One what-if at a time: set the weather, demand, prices and outages; GENCO sets each plant's output, the dispatch.</p></div> |
| <div class="layout" role="region" aria-labelledby="one-h"> |
| <aside class="side card" aria-label="What-if"> |
| <div class="sec"> |
| <div class="sec-h"><h2>Weather</h2><button id="b-reset" class="btn text small">Start over</button></div> |
| <div id="heat-src"></div> |
| <div id="domes"></div> |
| <div id="realwx" hidden></div> |
| <div id="storm" hidden></div> |
| </div> |
| <div class="sec"> |
| <div class="sec-h"><h2>Demand, wind, sun and fuel</h2></div> |
| <div id="demand"></div> |
| <div id="prices"></div> |
| </div> |
| <div class="sec"> |
| <div class="sec-h"><h2>Outages</h2></div> |
| <p id="storm-damage" class="note" hidden></p> |
| <div id="outages"></div> |
| </div> |
| </aside> |
|
|
| <div class="main"> |
| <div class="card status-card"> |
| <div id="engine" class="engine" role="status"> |
| <div class="engine-row"><span class="dot"></span><b id="engine-title">Loading the engine in your browser</b> |
| <span id="engine-text">starting…</span><span id="engine-pct" class="engine-pct"></span></div> |
| <div class="prog"><i id="engine-bar"></i></div> |
| <p class="engine-note">Up to 74 MB the first time: GENCO, Python (Pyodide) and the grid. The sliders already move the weather.</p> |
| </div> |
| <div class="kpi-card"><div id="kpis" class="kpis"></div></div> |
| <div class="rail-card"> |
| <ol id="rail" class="rail"></ol> |
| <button id="b-how" class="btn text small how">How it works</button> |
| </div> |
| </div> |
|
|
| <div class="card map-card"> |
| <div class="map-wrap"> |
| <div id="map" class="map"></div> |
| <div class="map-over top"> |
| <div id="layers"></div> |
| <div class="map-right"><div id="range" class="range-chip"></div><div id="gen-sw"></div></div> |
| </div> |
| <div class="map-over bottom"><div id="legend" class="legend"></div></div> |
| </div> |
| <div id="map-cap" class="map-cap"></div> |
| </div> |
|
|
| <div class="card" id="storm-card" hidden> |
| <div class="card-h"><h2 id="wx-title">What the storm changed</h2></div> |
| <div id="weather"></div> |
| </div> |
| </div> |
| </div> |
| <section class="many" aria-labelledby="many-h"> |
| <div class="sec-title"><h2 id="many-h">Many what-ifs</h2> |
| <p>Whole heat waves, dome scans and hurricane draws, each what-if solved and certified in this browser, apart from the what-if above.</p></div> |
| <div id="insights" class="card insights-card" hidden></div> |
| </section> |
| </section> |
|
|
| <footer class="foot"> |
| Synthetic Texas2k grid (Texas A&M, CC BY 4.0), not ERCOT. Basemap © CARTO, © OpenStreetMap contributors. Weather: contains modified Copernicus Climate Change Service information (ERA5), via Open-Meteo (CC BY 4.0). Load and gas prices: U.S. EIA (public domain). Hurricane tracks: NOAA HURDAT2 (public domain). |
| Software: MapLibre GL (BSD), onnxruntime-web (MIT), Pyodide (MPL-2.0), SciPy, NumPy and pandas (BSD), CasADi (LGPL-3.0), Mulish (OFL); licences in assets/engine/manifest.json. Vicomtech · Apache-2.0. |
| </footer> |
| </main> |
|
|
| <dialog id="how" class="sheet" aria-labelledby="how-title"> |
| <div class="sheet-in"> |
| <div class="sheet-h"><h2 id="how-title">How it works</h2><button id="how-close" class="btn text" aria-label="Close">Close</button></div> |
| <div id="how-tabs"></div> |
| <div id="how-body"></div> |
| </div> |
| </dialog> |
| </body> |
| </html> |
|
|
