Update app.py

app.py

@@ -1,128 +1,318 @@
 import gradio as gr
 import random
-import time
-import os
+import matplotlib
+matplotlib.use('Agg')
+import matplotlib.pyplot as plt
+import matplotlib.patches as mpatches
+import numpy as np
 from datetime import datetime
-from environment import CloudCostEnv
-from inference import get_action_from_llama
 
-# ─────────────────────────────────────────
-#  Import your friend's code here (Step 3)
-#  from cloud_guardian import run_agent
-# ─────────────────────────────────────────
+# ─────────────────────────────────────────────────────
+#  DARK THEME STYLE FOR ALL CHARTS
+# ─────────────────────────────────────────────────────
+DARK = {
+    "bg":      "#0a0e1a",
+    "panel":   "#111827",
+    "cyan":    "#00e5ff",
+    "green":   "#00ff9d",
+    "amber":   "#ffb300",
+    "red":     "#ff4d6d",
+    "muted":   "#64748b",
+    "text":    "#e2e8f0",
+}
 
-def get_timestamp():
-    return datetime.now().strftime("%H:%M:%S")
+def style_ax(ax, fig):
+    fig.patch.set_facecolor(DARK["panel"])
+    ax.set_facecolor(DARK["panel"])
+    ax.tick_params(colors=DARK["muted"], labelsize=8)
+    ax.xaxis.label.set_color(DARK["muted"])
+    ax.yaxis.label.set_color(DARK["muted"])
+    for spine in ax.spines.values():
+        spine.set_edgecolor("#1e2d45")
+    ax.grid(True, color="#1e2d45", linewidth=0.5, linestyle="--", alpha=0.6)
 
+# ─────────────────────────────────────────────────────
+#  CHART 1 — Traffic & Server Scaling (Line)
+# ─────────────────────────────────────────────────────
+def make_traffic_chart(user_load):
+    steps = 90
+    t = np.arange(steps)
+    base_load = user_load * 8
+    load  = base_load + 200 * np.sin(t / 12) + np.random.normal(0, 30, steps)
+    load  = np.clip(load, 0, 1000)
+    servers = load / 70 + np.random.normal(0, 0.5, steps)
+    servers = np.clip(servers, 1, 20)
+
+    fig, ax = plt.subplots(figsize=(5, 2.6))
+    style_ax(ax, fig)
+    ax.plot(t, load,    color=DARK["green"], linewidth=1.5, label="Incoming load")
+    ax.plot(t, servers * 40, color=DARK["cyan"],  linewidth=1.5, label="Active servers (×40)", linestyle="--")
+    ax.set_xlabel("Time (steps)", fontsize=8)
+    ax.set_ylabel("Load", fontsize=8)
+    ax.set_title("Traffic & Server Scaling", color=DARK["text"], fontsize=10, pad=8)
+    p1 = mpatches.Patch(color=DARK["green"], label="Incoming load")
+    p2 = mpatches.Patch(color=DARK["cyan"],  label="Active servers")
+    ax.legend(handles=[p1, p2], fontsize=7, facecolor=DARK["panel"],
+              labelcolor=DARK["text"], edgecolor="#1e2d45", loc="upper right")
+    plt.tight_layout(pad=0.8)
+    return fig
+
+# ─────────────────────────────────────────────────────
+#  CHART 2 — Cost Efficiency (Line + target budget line)
+# ─────────────────────────────────────────────────────
+def make_cost_chart(budget_on, spot_avail):
+    steps = 90
+    t = np.arange(steps)
+    budget_line = 0.50
+    burn = 0.80 * np.exp(-t / 40) + 0.05 + np.random.normal(0, 0.02, steps)
+    if budget_on:
+        burn = np.clip(burn, None, budget_line + 0.05)
+    if spot_avail > 50:
+        burn *= 0.75
+
+    fig, ax = plt.subplots(figsize=(5, 2.6))
+    style_ax(ax, fig)
+    ax.plot(t, burn, color=DARK["red"],   linewidth=1.5, label="Hourly burn rate ($)")
+    ax.axhline(budget_line, color=DARK["amber"], linewidth=1, linestyle="--", label="Target budget")
+    ax.set_xlabel("Time (steps)", fontsize=8)
+    ax.set_ylabel("Hourly burn rate ($)", fontsize=8)
+    ax.set_title("Cost Efficiency", color=DARK["text"], fontsize=10, pad=8)
+    p1 = mpatches.Patch(color=DARK["red"],   label="Hourly burn rate ($)")
+    p2 = mpatches.Patch(color=DARK["amber"], label="Target budget")
+    ax.legend(handles=[p1, p2], fontsize=7, facecolor=DARK["panel"],
+              labelcolor=DARK["text"], edgecolor="#1e2d45")
+    plt.tight_layout(pad=0.8)
+    return fig
+
+# ─────────────────────────────────────────────────────
+#  CHART 3 — Response Performance (Line)
+# ─────────────────────────────────────────────────────
+def make_perf_chart(chaos_monkey):
+    steps = 90
+    t = np.arange(steps)
+    latency = 40 + 20 * np.sin(t / 15) + np.random.normal(0, 5, steps)
+    if chaos_monkey:
+        spikes = np.random.choice(steps, size=6, replace=False)
+        latency[spikes] += np.random.uniform(80, 160, size=6)
+    latency = np.clip(latency, 0, 200)
+
+    fig, ax = plt.subplots(figsize=(5, 2.6))
+    style_ax(ax, fig)
+    ax.plot(t, latency, color=DARK["amber"], linewidth=1.5)
+    ax.fill_between(t, latency, alpha=0.15, color=DARK["amber"])
+    ax.set_xlabel("Time (steps)", fontsize=8)
+    ax.set_ylabel("Avg latency (ms)", fontsize=8)
+    ax.set_title("Response Performance (99th pct SLA)", color=DARK["text"], fontsize=10, pad=8)
+    plt.tight_layout(pad=0.8)
+    return fig
+
+# ─────────────────────────────────────────────────────
+#  CHART 4 — Cumulative Reward (Area)
+# ─────────────────────────────────────────────────────
+def make_reward_chart(auto_scaling):
+    episodes = np.arange(1, 201)
+    if auto_scaling:
+        reward = 1000 * (1 - np.exp(-episodes / 60)) + np.random.normal(0, 20, 200)
+    else:
+        reward = 400 * (1 - np.exp(-episodes / 80)) + np.random.normal(0, 15, 200)
+    reward = np.cumsum(np.clip(reward / 200, 0, None))
+
+    fig, ax = plt.subplots(figsize=(5, 2.6))
+    style_ax(ax, fig)
+    color = DARK["cyan"] if auto_scaling else DARK["muted"]
+    ax.plot(episodes, reward, color=color, linewidth=1.5)
+    ax.fill_between(episodes, reward, alpha=0.15, color=color)
+    ax.set_xlabel("Episodes", fontsize=8)
+    ax.set_ylabel("Cumulative reward", fontsize=8)
+    ax.set_title("Cumulative Reward over Episodes", color=DARK["text"], fontsize=10, pad=8)
+    plt.tight_layout(pad=0.8)
+    return fig
+
+# ─────────────────────────────────────────────────────
+#  CHART 5 — Cost Comparison Bar (Before vs After RL)
+# ─────────────────────────────────────────────────────
+def make_comparison_chart(auto_scaling):
+    labels    = ["Static\n(Before)", "RL Agent\n(After)"]
+    spend     = [1250, 680 if auto_scaling else 1050]
+    downtime  = [35,   8   if auto_scaling else 22]
+
+    fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(5, 2.6))
+    for ax in (ax1, ax2):
+        style_ax(ax, fig)
+
+    colors = [DARK["muted"], DARK["green"] if auto_scaling else DARK["amber"]]
+    ax1.bar(labels, spend,    color=colors, width=0.5, edgecolor="#1e2d45")
+    ax1.set_title("Total spend ($)", color=DARK["text"], fontsize=9)
+    ax1.set_ylabel("$", fontsize=8)
+    for i, v in enumerate(spend):
+        ax1.text(i, v + 20, f"${v}", ha="center", color=DARK["text"], fontsize=8)
+
+    ax2.bar(labels, downtime, color=colors, width=0.5, edgecolor="#1e2d45")
+    ax2.set_title("Downtime risk (%)", color=DARK["text"], fontsize=9)
+    ax2.set_ylabel("%", fontsize=8)
+    for i, v in enumerate(downtime):
+        ax2.text(i, v + 0.5, f"{v}%", ha="center", color=DARK["text"], fontsize=8)
+
+    plt.suptitle("Before vs After RL", color=DARK["text"], fontsize=10, y=1.02)
+    plt.tight_layout(pad=0.8)
+    return fig
+
+# ─────────────────────────────────────────────────────
+#  MAIN SIMULATION FUNCTION
+# ─────────────────────────────────────────────────────
 def run_simulation(scenario, user_load, spot_avail, chaos_monkey, budget_on, auto_scaling):
-    """
-    RIGHT NOW: uses fake random data so you can see the UI work.
-    LATER: replace the inside with your friend's real function.
-    """
-    t = get_timestamp()
-
-    # Fake metrics — replace with real ones later
-    load       = int(user_load * 10)
-    servers    = random.randint(8, 20)
-    burn_rate  = round(random.uniform(0.2, 0.6), 2)
-    latency    = random.randint(30, 120)
-    score      = round(random.uniform(0.75, 1.0), 2)
-
-    spend      = "$680"  if auto_scaling else "$1,250"
-    downtime   = "🟢 Low" if auto_scaling else "🟡 Medium"
-
-    log  = f"[{t}] Load: {load} → ACTION: Add Instance (t3.medium)\n"
-    log += f"[{t}] Latency improved to {latency}ms. Budget Remaining: $12\n"
-    log += f"[{t}] Cost > Threshold → ACTION: Switch to Spot Instance\n"
-    log += f"[{t}] Final Score: {score} / 1.0"
+    t = datetime.now().strftime("%H:%M:%S")
+
+    load      = int(user_load * 10)
+    servers   = random.randint(8, 20)
+    burn      = round(random.uniform(0.2, 0.5 if budget_on else 0.8), 2)
+    latency   = random.randint(25, 80 if not chaos_monkey else 160)
+    score     = round(random.uniform(0.80, 1.0) if auto_scaling else random.uniform(0.55, 0.80), 2)
+    spend     = "$680"   if auto_scaling else "$1,250"
+    downtime  = "Low"    if auto_scaling else "Medium"
+    savings   = "45%"    if auto_scaling else "0%"
+
+    log  = f"[{t}]  Scenario   : {scenario}\n"
+    log += f"[{t}]  Load       : {load} req/s  →  Servers: {servers}\n"
+    log += f"[{t}]  Latency    : {latency} ms\n"
+    log += f"[{t}]  Burn rate  : ${burn}/hr\n"
+    log += f"[{t}]  ACTION     : {'Scale up (RL agent)' if auto_scaling else 'Static allocation'}\n"
+    log += f"[{t}]  Score      : {score} / 1.0"
+
+    traffic_fig    = make_traffic_chart(user_load)
+    cost_fig       = make_cost_chart(budget_on, spot_avail)
+    perf_fig       = make_perf_chart(chaos_monkey)
+    reward_fig     = make_reward_chart(auto_scaling)
+    comparison_fig = make_comparison_chart(auto_scaling)
 
     return (
-        f"🔥 {load} req/sec",
-        f"🖥️ {servers} instances",
-        f"💸 ${burn_rate}/hr",
+        f"📈  {load} req/s",
+        f"🖥️  {servers} instances",
+        f"💸  ${burn}/hr",
+        f"⚡  {latency} ms",
         log,
         spend,
         downtime,
-        score
+        savings,
+        score,
+        traffic_fig,
+        cost_fig,
+        perf_fig,
+        reward_fig,
+        comparison_fig,
     )
 
-# ──────────────────────────────────────────────
+# ─────────────────────────────────────────────────────
+#  CUSTOM CSS
+# ─────────────────────────────────────────────────────
+CSS = """
+body, .gradio-container {
+    background: #0a0e1a !important;
+    color: #e2e8f0 !important;
+    font-family: 'Space Grotesk', 'Segoe UI', sans-serif !important;
+}
+.gr-button-primary {
+    background: transparent !important;
+    border: 1px solid #00e5ff !important;
+    color: #00e5ff !important;
+    letter-spacing: 1px;
+    font-weight: 600;
+}
+.gr-button-primary:hover {
+    background: rgba(0,229,255,0.1) !important;
+}
+.gr-panel, .gr-box {
+    background: #111827 !important;
+    border: 0.5px solid #1e2d45 !important;
+    border-radius: 10px !important;
+}
+label, .gr-input-label { color: #64748b !important; font-size: 12px !important; }
+input, select, textarea {
+    background: #0d1525 !important;
+    color: #e2e8f0 !important;
+    border: 0.5px solid #1e2d45 !important;
+}
+.gr-plot { background: #111827 !important; border: 0.5px solid #1e2d45 !important; border-radius: 8px !important; }
+"""
+
+# ─────────────────────────────────────────────────────
 #  BUILD THE UI
-# ──────────────────────────────────────────────
-with gr.Blocks(
-    title="☁️ Cloud-Cost Guardian AI",
-    theme=gr.themes.Base(
-        primary_hue="cyan",
-        neutral_hue="slate",
-    ),
-    css="""
-    .gradio-container { max-width: 1100px !important; }
-    .metric-box { text-align: center; font-size: 1.4em; font-weight: bold; }
-    """
-) as demo:
-
-    # ── Header ──
+# ─────────────────────────────────────────────────────
+with gr.Blocks(css=CSS, title="☁️ Cloud-Cost Guardian AI") as demo:
+
     gr.Markdown("""
     # ☁️ Cloud-Cost Guardian AI
-    ### Live Simulation Dashboard
+    ### Live Simulation Dashboard — RL-Powered Auto Scaling
     ---
     """)
 
-    # ── Metric cards row ──
+    # ── Row 1: Metric cards ──
     with gr.Row():
-        load_out    = gr.Textbox(label="📈 Incoming Load",    elem_classes="metric-box", interactive=False)
-        server_out  = gr.Textbox(label="🖥️ Active Servers",  elem_classes="metric-box", interactive=False)
-        burn_out    = gr.Textbox(label="💸 Hourly Burn Rate", elem_classes="metric-box", interactive=False)
+        load_out    = gr.Textbox(label="Incoming Load",    interactive=False)
+        server_out  = gr.Textbox(label="Active Servers",   interactive=False)
+        burn_out    = gr.Textbox(label="Hourly Burn Rate", interactive=False)
+        latency_out = gr.Textbox(label="Avg Latency",      interactive=False)
 
     gr.Markdown("---")
 
-    # ── Controls + Log side by side ──
+    # ── Row 2: Controls + Log ──
     with gr.Row():
-
-        # Left column — controls
         with gr.Column(scale=1):
             gr.Markdown("### 🎮 Simulation Controls")
-
             scenario = gr.Dropdown(
                 choices=[
                     "Scenario 1: Steady Load (Easy)",
                     "Scenario 2: Daily Peak Surges (Medium)",
-                    "Scenario 3: Chaos Mode (Hard)"
+                    "Scenario 3: Chaos Mode (Hard)",
                 ],
                 value="Scenario 2: Daily Peak Surges (Medium)",
-                label="Select Scenario"
+                label="Scenario"
             )
             user_load    = gr.Slider(0, 100, value=75, step=1,  label="User Load Scale (%)")
             spot_avail   = gr.Slider(0, 100, value=40, step=1,  label="Spot Instance Availability (%)")
-            chaos_monkey = gr.Checkbox(value=False, label="🐒 Chaos Monkey (Hard Tasks)")
+            chaos_monkey = gr.Checkbox(value=False, label="🐒 Chaos Monkey")
             budget_constr= gr.Checkbox(value=True,  label="💰 Budget Constraint")
-            auto_scaling = gr.Checkbox(value=True,  label="🤖 Auto-Scaling Agent")
-
-            run_btn = gr.Button("🚀 Reset Environment & Restart Agent", variant="primary", size="lg")
+            auto_scaling = gr.Checkbox(value=True,  label="🤖 Auto-Scaling Agent (RL)")
+            run_btn      = gr.Button("🚀 Reset & Restart Agent", variant="primary", size="lg")
 
-        # Right column — outputs
         with gr.Column(scale=2):
             gr.Markdown("### 📋 Agent Action Log")
-            log_out      = gr.Textbox(lines=6,  label="Live Log",       interactive=False)
-
+            log_out = gr.Textbox(lines=7, label="Live Log", interactive=False)
             with gr.Row():
-                spend_out   = gr.Textbox(label="Total Spend",    interactive=False)
-                risk_out    = gr.Textbox(label="Downtime Risk",  interactive=False)
-
+                spend_out   = gr.Textbox(label="Total Spend",   interactive=False)
+                risk_out    = gr.Textbox(label="Downtime Risk", interactive=False)
+                savings_out = gr.Textbox(label="Cost Savings",  interactive=False)
             score_out = gr.Number(label="🏆 Final Agent Score (out of 1.0)", interactive=False)
 
-    # ── Wire button to function ──
-    run_btn.click(
-        fn=run_simulation,
-        inputs=[scenario, user_load, spot_avail, chaos_monkey, budget_constr, auto_scaling],
-        outputs=[load_out, server_out, burn_out, log_out, spend_out, risk_out, score_out]
-    )
+    gr.Markdown("---")
+    gr.Markdown("### 📊 Live Performance Graphs")
+
+    # ── Row 3: Top 3 charts ──
+    with gr.Row():
+        traffic_plot    = gr.Plot(label="Traffic & Server Scaling")
+        cost_plot       = gr.Plot(label="Cost Efficiency")
+        perf_plot       = gr.Plot(label="Response Performance")
+
+    # ── Row 4: Bottom 2 charts ──
+    with gr.Row():
+        reward_plot     = gr.Plot(label="Cumulative Reward (RL Training)")
+        comparison_plot = gr.Plot(label="Before vs After RL")
 
     gr.Markdown("""
     ---
-    > 💡 Tip: Click **Reset Environment** after changing any setting to see updated results.
+    > 💡 Adjust any control above and click **Reset & Restart Agent** to see all graphs update live.
     """)
 
-# ── Launch ──
+    # ── Wire everything up ──
+    run_btn.click(
+        fn=run_simulation,
+        inputs=[scenario, user_load, spot_avail, chaos_monkey, budget_constr, auto_scaling],
+        outputs=[
+            load_out, server_out, burn_out, latency_out,
+            log_out, spend_out, risk_out, savings_out, score_out,
+            traffic_plot, cost_plot, perf_plot, reward_plot, comparison_plot,
+        ]
+    )
+
 if __name__ == "__main__":
-    demo.launch(share=True)   # share=True gives you a public link
+    demo.launch(share=True)