Update app.py

app.py

@@ -1,11 +1,12 @@
 # app.py
 # Gridworld RL (Q-learning) with:
-# ✅ Original visualization + layout (as much as possible)
+# ✅ Original visualization + layout for the demo section (unchanged)
 # ✅ Non-flickering learning curve (always visible)
 # ✅ Obstacle density slider (auto-generate more/less blocks)
 # ✅ Train uses epsilon decay (converges); Play shows deterministic route (epsilon=0)
 # ✅ Same obstacle layout is reused for Play (stored in state)
-# ✅ NEW: header image + warehouse intro text (no other layout changes)
+# ✅ Header updated: text on the LEFT, photo on the RIGHT
+# ✅ Removed the extra "Reinforcement Learning in een Gridworld..." block as requested
 
 import time
 import numpy as np
@@ -28,10 +29,14 @@ ACTION_DELTAS = {
 }
 
 def _neighbors(r, c, n):
-    if r > 0: yield (r - 1, c)
-    if r < n - 1: yield (r + 1, c)
-    if c > 0: yield (r, c - 1)
-    if c < n - 1: yield (r, c + 1)
+    if r > 0:
+        yield (r - 1, c)
+    if r < n - 1:
+        yield (r + 1, c)
+    if c > 0:
+        yield (r, c - 1)
+    if c < n - 1:
+        yield (r, c + 1)
 
 def _has_path(size, start, goal, blocked):
     """BFS to ensure there's at least one safe path from start to goal."""
@@ -100,14 +105,17 @@ class GridWorld:
         r, c = self.pos
         nr, nc = r + dr, c + dc
 
+        # bounds check
         if nr < 0 or nr >= self.size or nc < 0 or nc >= self.size:
             nr, nc = r, c
 
+        # wall check
         if (nr, nc) in self.walls:
             nr, nc = r, c
 
         self.pos = (nr, nc)
 
+        # rewards
         if self.pos == self.goal:
             return self.pos, +10.0, True
         if self.pos in self.lava:
@@ -166,7 +174,7 @@ def draw_grid(env: GridWorld, agent: QAgent = None, show_q=False, episode=None,
 
     for r in range(n):
         for c in range(n):
-            x, y = c, n - 1 - r
+            x, y = c, n - 1 - r  # invert y so (0,0) is top-left visually
 
             tile_color = "#121a33"
             if (r, c) == env.goal:
@@ -183,17 +191,33 @@ def draw_grid(env: GridWorld, agent: QAgent = None, show_q=False, episode=None,
                     linewidth=1.0,
                     edgecolor="#2a355f",
                     facecolor=tile_color,
-                    alpha=0.95
+                    alpha=0.95,
                 )
             )
 
             if show_q and agent is not None and (r, c) not in env.walls:
                 best_a = int(np.argmax(agent.Q[r, c]))
                 qv = float(np.max(agent.Q[r, c]))
-                ax.text(x + 0.5, y + 0.55, ACTIONS[best_a], ha="center", va="center",
-                        fontsize=14, color="#d7e3ff", alpha=0.65)
-                ax.text(x + 0.5, y + 0.30, f"{qv:+.2f}", ha="center", va="center",
-                        fontsize=9, color="#a9b7e6", alpha=0.55)
+                ax.text(
+                    x + 0.5,
+                    y + 0.55,
+                    ACTIONS[best_a],
+                    ha="center",
+                    va="center",
+                    fontsize=14,
+                    color="#d7e3ff",
+                    alpha=0.65,
+                )
+                ax.text(
+                    x + 0.5,
+                    y + 0.30,
+                    f"{qv:+.2f}",
+                    ha="center",
+                    va="center",
+                    fontsize=9,
+                    color="#a9b7e6",
+                    alpha=0.55,
+                )
 
     def put_icon(rc, icon, color="#ffffff"):
         r, c = rc
@@ -253,8 +277,13 @@ def draw_learning_curve(returns, successes, window=25):
         ma = moving_average(returns, window=window)
         if len(ma) > 0:
             xs_ma = np.arange(len(returns) - len(ma) + 1, len(returns) + 1)
-            ax.plot(xs_ma, ma, linewidth=2.5, alpha=0.95,
-                    label=f"Moving avg ({min(int(window), len(returns))})")
+            ax.plot(
+                xs_ma,
+                ma,
+                linewidth=2.5,
+                alpha=0.95,
+                label=f"Moving avg ({min(int(window), len(returns))})",
+            )
 
     ax2 = ax.twinx()
     ax2.tick_params(colors="#c9d6ff")
@@ -318,7 +347,7 @@ def train_stream(
 
     frame = draw_grid(env, agent, show_q=show_q_overlay, episode=0, step_i=0, total_reward=0.0)
     last_curve = draw_learning_curve(returns, successes, window=int(curve_window))
-    status = f"Klaar om te trainen. Obstacle density={float(obstacle_density):.2f}. (Curve knippert niet.)"
+    status = f"Klaar om te trainen. Obstacle density={float(obstacle_density):.2f}."
     yield frame, last_curve, agent.Q, env_state, status
 
     CURVE_UPDATE_EVERY_STEPS = 8
@@ -362,7 +391,7 @@ def train_stream(
 
     frame = draw_grid(env, agent, show_q=show_q_overlay, episode=episodes, step_i=None, total_reward=None)
     last_curve = draw_learning_curve(returns, successes, window=int(curve_window))
-    status = "Training klaar ✅ Klik nu op ‘Play learned policy’ om de strakke kortste veilige route te zien (epsilon=0)."
+    status = "Training klaar ✅ Klik nu op ‘Play learned policy���."
     yield frame, last_curve, agent.Q, env_state, status
 
 def play_stream(q_table, env_state, speed, show_q_overlay, max_steps):
@@ -389,7 +418,7 @@ def play_stream(q_table, env_state, speed, show_q_overlay, max_steps):
 
     curve = draw_learning_curve([], [], window=25)
     frame = draw_grid(env, agent, show_q=show_q_overlay, episode="PLAY", step_i=0, total_reward=total_r)
-    yield frame, curve, "Play • epsilon=0.0 (deterministisch) • toont de geleerde route"
+    yield frame, curve, "Play • epsilon=0.0 (deterministisch)"
 
     for t in range(1, int(max_steps) + 1):
         a = agent.act_greedy(s)
@@ -406,7 +435,7 @@ def play_stream(q_table, env_state, speed, show_q_overlay, max_steps):
             break
 
     if env.pos == env.goal:
-        end = f"🏁 Goal bereikt! return {total_r:+.2f} (korter pad = minder step-penalty)."
+        end = f"🏁 Goal bereikt! return {total_r:+.2f}"
     elif env.pos in env.lava:
         end = "🔥 In lava beland. Tip: train langer of zet density lager."
     else:
@@ -416,53 +445,39 @@ def play_stream(q_table, env_state, speed, show_q_overlay, max_steps):
     yield frame, curve, end
 
 # -----------------------------
-# Gradio UI (original layout) + NEW: photo + intro text above
+# Gradio UI
 # -----------------------------
 with gr.Blocks(theme=gr.themes.Soft(), title="RL Gridworld (Q-learning)") as demo:
-    # NEW: photo (placed above everything, no layout change below)
-    gr.Image(
-        value="humanoid-robot-apptronic-1024x684.jpg.webp",
-        show_label=False,
-        height=360
-    )
-
-    # NEW: intro text (kept short and friendly)
-    gr.Markdown(
-        """
+    # Header block: text LEFT, image RIGHT
+    with gr.Row():
+        with gr.Column(scale=3):
+            gr.Markdown(
+                """
 ### 🤖 Een robot in het magazijn
 
 Stel je voor: je werkt in een groot magazijn.  
-Tussen de stellingen rijdt een robot rond die bestellingen moet ophalen en naar het inpakstation brengen.
-
-Die robot krijgt **geen kaart**, geen regels en geen instructies over wat de snelste route is.
-
-In deze demo zie je hoe zo’n robot **zelf leert** wat slim gedrag is.
+Tussen de stellingen rijdt een robot rond die bestellingen moet ophalen en naar het inpakstation brengen.  
+Die robot krijgt geen kaart, geen regels en geen instructies over wat de snelste route is.  
+In deze demo zie je hoe zo’n robot zelf leert wat slim gedrag is.
 
 In het begin rijdt hij willekeurig rond en maakt hij fouten.  
-Maar naarmate hij meer ervaring opdoet, ontdekt hij vanzelf:
-**hoe hij veilig, efficiënt en zo snel mogelijk door het magazijn kan bewegen.**
+Maar naarmate hij meer ervaring opdoet, ontdekt hij vanzelf: hoe hij veilig, efficiënt en zo snel mogelijk door het magazijn kan bewegen.
 
 Boven zie je de robot rijden tussen stellingen en gevaarlijke zones.  
 Onder zie je hoe zijn prestaties verbeteren naarmate hij leert.
 
 👉 Probeer het zelf: maak het magazijn makkelijker of moeilijker, train de robot,  
 en laat daarna zien wat hij geleerd heeft.
-        """
-    )
-
-    # Existing app description (kept; no layout changes below)
-    gr.Markdown(
-        """
-# 🤖 Reinforcement Learning in een Gridworld (real-time animatie)
-
-- **Obstacle density**: hoeveel 🧱/🔥 er in het grid staan (meer = moeilijker)
-- **Train**: agent leert (epsilon decays: eerst ontdekken, later benutten)
-- **Play learned policy**: toont wat hij geleerd heeft (**epsilon=0**)
-
-Rechts zie je een **learning curve** (return + moving average + success rate) die **niet knippert**.
-        """
-    )
+                """
+            )
+        with gr.Column(scale=2):
+            gr.Image(
+                value="humanoid-robot-apptronic-1024x684.jpg.webp",
+                show_label=False,
+                height=340,
+            )
 
+    # ---- Everything below here is your demo layout (kept the same) ----
     q_state = gr.State(None)
     env_state = gr.State(None)