Deploy optimized case study image loading

gridops/server/app.py

@@ -35,6 +35,14 @@ app = create_app(
     max_concurrent_envs=int(os.environ.get("MAX_CONCURRENT_ENVS", "10")),
 )
 
+
+@app.middleware("http")
+async def add_static_cache_headers(request, call_next):
+    response = await call_next(request)
+    if request.url.path.startswith(("/assets/", "/evals/")):
+        response.headers.setdefault("Cache-Control", "public, max-age=31536000, immutable")
+    return response
+
 # ── Shared stateful environment for HTTP dashboard ───────────────────────
 # OpenEnv HTTP /reset and /step are stateless (new env per request).
 # The dashboard needs persistent state between reset → step → step...

gridops/server/static/case-study.html

@@ -6,6 +6,7 @@
   <title>GridOps India Case Study | Capabl Machines</title>
   <meta name="description" content="GridOps is a Capabl Machines case study on AI-managed community microgrids for India's fast-growing rooftop solar future.">
   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23111827'/%3E%3Cpath d='M34 8 14 34h17l-3 22 22-30H33z' fill='%238ef2c3'/%3E%3C/svg%3E">
+  <link rel="preload" as="image" href="/assets/case_study/capabl_india_microgrid_hero.webp" type="image/webp" fetchpriority="high">
   <style>
     :root {
       --ink: #15202b;
@@ -538,12 +539,12 @@
           <div class="stat"><strong>1 crore</strong><span>national rooftop household ambition</span></div>
         </div>
         <div class="wide-image">
-          <img src="/assets/case_study/capabl_rooftop_infrastructure.webp" alt="Indian apartment society rooftop solar, battery storage, EV charging, and transformer infrastructure">
+          <img src="/assets/case_study/capabl_rooftop_infrastructure.webp" alt="Indian apartment society rooftop solar, battery storage, EV charging, and transformer infrastructure" width="1280" height="720" loading="lazy" decoding="async">
         </div>
         <p class="source-line">Context sources: <a href="https://mnre.gov.in/en/physical-progress/">MNRE Physical Achievements</a> and <a href="https://static.pib.gov.in/WriteReadData/specificdocs/documents/2025/dec/doc2025126720001.pdf">PIB India Solar Momentum</a>.</p>
         <div class="infographic" id="journey" aria-label="GridOps India solar intelligence journey infographic">
           <div class="infographic-scroll">
-            <img src="/assets/case_study/capabl_energy_journey_infographic.svg" alt="Journey from India's rooftop solar scale to local microgrid complexity, Capabl Machine dispatch, and community outcomes">
+            <img src="/assets/case_study/capabl_energy_journey_infographic.svg" alt="Journey from India's rooftop solar scale to local microgrid complexity, Capabl Machine dispatch, and community outcomes" width="2200" height="900" loading="lazy" decoding="async">
           </div>
         </div>
       </div>
@@ -566,7 +567,7 @@
           </div>
         </div>
         <div class="image-frame">
-          <img src="/assets/case_study/capabl_society_operator.webp" alt="Indian society manager and solar installer reviewing microgrid intelligence">
+          <img src="/assets/case_study/capabl_society_operator.webp" alt="Indian society manager and solar installer reviewing microgrid intelligence" width="1120" height="630" loading="lazy" decoding="async">
         </div>
       </div>
     </section>
@@ -574,7 +575,7 @@
     <section class="section light" id="machine">
       <div class="wrap split reverse">
         <div class="image-frame">
-          <img src="/assets/case_study/capabl_neighbourhood_dispatch.webp" alt="Indian neighbourhood microgrid with solar, battery, EV charging, grid connection, and local dispatch">
+          <img src="/assets/case_study/capabl_neighbourhood_dispatch.webp" alt="Indian neighbourhood microgrid with solar, battery, EV charging, grid connection, and local dispatch" width="1280" height="720" loading="lazy" decoding="async">
         </div>
         <div>
           <p class="eyebrow">What intelligence unlocks</p>
@@ -681,19 +682,19 @@
         </div>
         <div class="plots">
           <figure class="plot">
-            <img src="/evals/plots/gridops_holdout_scores.png" alt="Holdout score comparison for do-nothing, SFT, and oracle policies">
+            <img src="/evals/plots/gridops_holdout_scores.png" alt="Holdout score comparison for do-nothing, SFT, and oracle policies" width="1200" height="750" loading="lazy" decoding="async">
             <figcaption>Holdout score by task.</figcaption>
           </figure>
           <figure class="plot">
-            <img src="/evals/plots/gridops_battery_throughput.png" alt="Battery throughput by policy and task">
+            <img src="/evals/plots/gridops_battery_throughput.png" alt="Battery throughput by policy and task" width="1200" height="750" loading="lazy" decoding="async">
             <figcaption>Battery throughput confirms active dispatch.</figcaption>
           </figure>
           <figure class="plot">
-            <img src="/evals/plots/gridops_blackout_kwh.png" alt="Blackout kilowatt hours by policy and task">
+            <img src="/evals/plots/gridops_blackout_kwh.png" alt="Blackout kilowatt hours by policy and task" width="1200" height="750" loading="lazy" decoding="async">
             <figcaption>Blackout energy falls sharply versus baseline.</figcaption>
           </figure>
           <figure class="plot">
-            <img src="/evals/plots/gridops_sft_training_curve.png" alt="SFT training loss and token accuracy curve">
+            <img src="/evals/plots/gridops_sft_training_curve.png" alt="SFT training loss and token accuracy curve" width="1200" height="750" loading="lazy" decoding="async">
             <figcaption>Real training loss and token accuracy from the run.</figcaption>
           </figure>
         </div>