Update app.py

app.py

@@ -1,11 +1,11 @@
-# app.py — Crowd Behavior Lab (autostart + bewegende bolletjes, rechthoek-obstakels)
-# ----------------------------------------------------------------------------------
-# Fixes:
-# - Autostart via demo.load(...) → sim draait meteen bij Space-start
-# - Timer + demo.queue() → frames blijven doorlopen (bewegende dots)
-# - Geen richtingpijlen (alleen bolletjes, optionele trails/heatmap)
+# app.py — Crowd Behavior Lab (animated GIF, bolletjes-only)
+# ----------------------------------------------------------
+# Focus in deze stap:
+# - Altijd bewegende bolletjes via één geanimeerde GIF (server-side gerenderd).
+# - Autostart bij openen van de Space (demo.load).
+# - Geen pijlen, geen slider/timer — zo vermijden we event-/queue-problemen.
 #
-# Vereist in requirements.txt:
+# Vereisten (requirements.txt):
 # gradio>=4.44.0
 # numpy>=1.24
 # matplotlib>=3.8
@@ -15,8 +15,10 @@
 from __future__ import annotations
 
 import io
+import os
 import json
 import math
+import tempfile
 from dataclasses import dataclass, asdict
 from typing import List, Tuple, Optional, Dict
 
@@ -25,11 +27,12 @@ from PIL import Image
 import matplotlib
 matplotlib.use("Agg")
 import matplotlib.pyplot as plt
+import imageio.v2 as imageio
 import gradio as gr
 
 
 # ---------------------------
-# Theme & CSS (full width, clean)
+# Theme & CSS
 # ---------------------------
 THEME = gr.themes.Soft(primary_hue="indigo", secondary_hue="violet")
 CUSTOM_CSS = """
@@ -38,66 +41,46 @@ CUSTOM_CSS = """
 #title h1 { font-weight: 800; letter-spacing: -0.02em; }
 .card { box-shadow: var(--shadow); border-radius: 18px; padding: 10px; background: white; }
 .legend-dot { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:6px; vertical-align:middle; }
-.legend-green { background:#1db954; } /* groen */
-.legend-orange { background:#ff9f1a; } /* oranje */
-.legend-red { background:#e02424; }    /* rood */
-.stat-badge {
-  display:inline-block; padding:6px 10px; background:#f5f5ff; border-radius:12px; margin-right:8px;
-  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
-}
+.legend-green { background:#1db954; } .legend-orange { background:#ff9f1a; } .legend-red { background:#e02424; }
+.stat-badge { display:inline-block; padding:6px 10px; background:#f5f5ff; border-radius:12px; margin-right:8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); }
 """
 
 
 # ---------------------------
-# Crowd simulation primitives
+# Obstakels (rechthoek-basic)
 # ---------------------------
 @dataclass
 class RectObstacle:
-    x: float
-    y: float
-    w: float
-    h: float
-
+    x: float; y: float; w: float; h: float
     def contains(self, px: float, py: float) -> bool:
         return self.x <= px <= self.x + self.w and self.y <= py <= self.y + self.h
-
     def nearest_point(self, p: np.ndarray) -> np.ndarray:
         qx = np.clip(p[0], self.x, self.x + self.w)
         qy = np.clip(p[1], self.y, self.y + self.h)
         return np.array([qx, qy], dtype=np.float32)
-
     def to_json(self) -> Dict:
-        return asdict(self)
-
+        d = asdict(self); return d
 
 @dataclass
 class World:
-    width: float = 20.0
-    height: float = 12.0
-    obstacles: List[RectObstacle] = None
-
+    width: float = 20.0; height: float = 12.0; obstacles: List[RectObstacle] = None
     def __post_init__(self):
-        if self.obstacles is None:
-            self.obstacles = []
-
+        if self.obstacles is None: self.obstacles = []
 
 @dataclass
 class Agent:
-    pos: np.ndarray  # (2,)
-    vel: np.ndarray  # (2,)
-    goal: np.ndarray  # (2,)
+    pos: np.ndarray; vel: np.ndarray; goal: np.ndarray
 
 
 # ---------------------------
-# Parameters & presets
+# Presets (incl. taps toelopende hals)
 # ---------------------------
 def funnel_presets():
     presets = {}
-
-    # Taps toelopende flessenhals (opgebouwd uit segmenten -> kanaal wordt smaller)
+    # Taps toelopende flessenhals met segmenten
     obs = []
     world_w, world_h = 20.0, 12.0
-    left_x = 2.0; right_x = 18.0
+    left_x, right_x = 2.0, 18.0
     steps = 8
     top_y0, bot_y0 = 9.5, 2.5
     top_y1, bot_y1 = 6.8, 5.2
@@ -107,8 +90,8 @@ def funnel_presets():
         t = i / (steps - 1)
         top_y = (1 - t) * top_y0 + t * top_y1
         bot_y = (1 - t) * bot_y0 + t * bot_y1
-        obs.append(RectObstacle(x0, top_y, x1 - x0, world_h - top_y))  # bovenwand
-        obs.append(RectObstacle(x0, 0.0, x1 - x0, bot_y))               # onderwand
+        obs.append(RectObstacle(x0, top_y, x1 - x0, world_h - top_y))
+        obs.append(RectObstacle(x0, 0.0, x1 - x0, bot_y))
     presets["Flessenhals (taps)"] = obs
 
     # Dubbele funnel
@@ -133,7 +116,6 @@ def funnel_presets():
         obs2.append(RectObstacle(x0, top_y, x1 - x0, 12.0 - top_y))
         obs2.append(RectObstacle(x0, 0.0, x1 - x0, bot_y))
     presets["Dubbele funnel (taps)"] = obs2
-
     return presets
 
 PRESETS = {
@@ -145,14 +127,10 @@ PRESETS = {
 }
 
 DEFAULT_PARAMS = dict(
-    desired_speed=1.3,     # m/s
-    relax_time=0.6,        # s
-    people_repulsion=4.0,
-    people_range=1.2,
-    obstacle_repulsion=8.0,
-    obstacle_range=1.0,
-    noise=0.08,
-    bounce_walls=True,
+    desired_speed=1.3, relax_time=0.6,
+    people_repulsion=4.0, people_range=1.2,
+    obstacle_repulsion=8.0, obstacle_range=1.0,
+    noise=0.08, bounce_walls=True,
 )
 
 
@@ -160,13 +138,12 @@ DEFAULT_PARAMS = dict(
 # Helpers
 # ---------------------------
 def parse_obstacles(json_text: str) -> List[RectObstacle]:
-    if not json_text or not json_text.strip():
-        return []
+    if not json_text or not json_text.strip(): return []
     data = json.loads(json_text)
     return [RectObstacle(float(d["x"]), float(d["y"]), float(d["w"]), float(d["h"])) for d in data]
 
 def obstacles_to_json(obstacles: List[RectObstacle]) -> str:
-    return json.dumps([ob.to_json() for ob in obstacles], indent=2)
+    return json.dumps([asdict(ob) for ob in obstacles], indent=2)
 
 def init_agents(n_agents: int, world: World, layout: str, seed: int = 42) -> List[Agent]:
     rng = np.random.default_rng(seed)
@@ -189,7 +166,7 @@ def init_agents(n_agents: int, world: World, layout: str, seed: int = 42) -> Lis
 
 
 # ---------------------------
-# Physics step (simplified social-force)
+# Social-force step
 # ---------------------------
 def social_force_step(agents: List[Agent], world: World, params: dict, dt: float = 0.12) -> None:
     positions = np.array([a.pos for a in agents])
@@ -206,16 +183,15 @@ def social_force_step(agents: List[Agent], world: World, params: dict, dt: float
 
     forces = np.zeros_like(positions)
 
-    # Driving force (naar doelen)
+    # Driving force
     goals = np.array([a.goal for a in agents])
     to_goal = goals - positions
     dist_goal = np.linalg.norm(to_goal, axis=1) + 1e-6
     desired_dir = (to_goal.T / dist_goal).T
     desired_vel = desired_speed * desired_dir
-    driving = (desired_vel - velocities) / max(1e-6, relax_time)
-    forces += driving
+    forces += (desired_vel - velocities) / max(1e-6, relax_time)
 
-    # Repulsie tussen mensen
+    # Repulsie mensen
     for i in range(len(agents)):
         diff = positions[i] - positions
         d = np.linalg.norm(diff, axis=1) + 1e-6
@@ -227,8 +203,7 @@ def social_force_step(agents: List[Agent], world: World, params: dict, dt: float
 
     # Repulsie obstakels
     for i in range(len(agents)):
-        p = positions[i]
-        f = np.zeros(2, dtype=np.float32)
+        p = positions[i]; f = np.zeros(2, dtype=np.float32)
         for ob in world.obstacles:
             q = ob.nearest_point(p)
             diff = p - q
@@ -242,21 +217,19 @@ def social_force_step(agents: List[Agent], world: World, params: dict, dt: float
     # Ruis
     forces += noise * np.random.randn(*forces.shape)
 
-    # Integratie
+    # Integratie + limiet
     new_vel = velocities + dt * forces
     speeds = np.linalg.norm(new_vel, axis=1) + 1e-6
-    max_speed = desired_speed * 1.8
-    new_vel = (new_vel.T * np.minimum(1.0, max_speed / speeds)).T
+    new_vel = (new_vel.T * np.minimum(1.0, (desired_speed * 1.8) / speeds)).T
     new_pos = positions + dt * new_vel
 
-    # Obstakel-collisions: push out
+    # Collisions met obstakels
     for i in range(len(agents)):
         for ob in world.obstacles:
             if ob.contains(new_pos[i, 0], new_pos[i, 1]):
                 q = ob.nearest_point(new_pos[i])
                 dir_ = new_pos[i] - q
-                if np.linalg.norm(dir_) < 1e-6:
-                    dir_ = np.array([0.5, 0.0], dtype=np.float32)
+                if np.linalg.norm(dir_) < 1e-6: dir_ = np.array([0.5, 0.0], dtype=np.float32)
                 dir_ = dir_ / (np.linalg.norm(dir_) + 1e-6)
                 new_pos[i] = q + 0.06 * dir_
 
@@ -270,85 +243,57 @@ def social_force_step(agents: List[Agent], world: World, params: dict, dt: float
 
     # Commit
     for i, a in enumerate(agents):
-        a.pos = new_pos[i]
-        a.vel = new_vel[i]
+        a.pos = new_pos[i]; a.vel = new_vel[i]
 
 
 # ---------------------------
-# Visual metrics: stress & density
+# Visual metrics & kleur
 # ---------------------------
 def k3_distance(point: np.ndarray, all_points: np.ndarray) -> float:
     dists = np.linalg.norm(all_points - point, axis=1)
     dists = np.sort(dists[dists > 0])
-    if len(dists) == 0:
-        return 1.0
-    if len(dists) < 3:
-        return dists[-1]
+    if len(dists) == 0: return 1.0
+    if len(dists) < 3: return dists[-1]
     return dists[2]
 
 def min_obstacle_distance(p: np.ndarray, world: World) -> float:
-    if not world.obstacles:
-        return 5.0
-    ds = []
-    for ob in world.obstacles:
-        q = ob.nearest_point(p)
-        ds.append(np.linalg.norm(p - q))
-    return min(ds) if ds else 5.0
+    if not world.obstacles: return 5.0
+    return min(np.linalg.norm(p - ob.nearest_point(p)) for ob in world.obstacles)
 
 def stress_score(p: np.ndarray, v: np.ndarray, all_points: np.ndarray, world: World, desired_speed: float) -> float:
     sv = min(1.0, (np.linalg.norm(v) / max(1e-6, desired_speed)))
-    k3 = k3_distance(p, all_points)
-    sd = 1.0 / (k3 + 1e-3)
-    sd = np.clip(sd / 2.0, 0.0, 1.0)
-    d_obs = min_obstacle_distance(p, world)
-    so = math.exp(-d_obs / 1.2)
-    stress = np.clip(0.5 * sv + 0.3 * sd + 0.2 * so, 0.0, 1.0)
-    return float(stress)
-
-def stress_to_color(stress: float) -> str:
-    if stress < 0.33:
-        return "#1db954"   # groen
-    elif stress < 0.66:
-        return "#ff9f1a"   # oranje
-    else:
-        return "#e02424"   # rood
+    k3 = k3_distance(p, all_points); sd = np.clip((1.0 / (k3 + 1e-3)) / 2.0, 0.0, 1.0)
+    so = math.exp(-min_obstacle_distance(p, world) / 1.2)
+    return float(np.clip(0.5 * sv + 0.3 * sd + 0.2 * so, 0.0, 1.0))
+
+def stress_to_color(s: float) -> str:
+    if s < 0.33: return "#1db954"
+    elif s < 0.66: return "#ff9f1a"
+    return "#e02424"
 
 
 # ---------------------------
-# Rendering (on-demand, bolletjes-only)
+# Rendering (één frame)
 # ---------------------------
-def render_frame(
-    positions: np.ndarray,
-    velocities: np.ndarray,
-    world: World,
-    params: dict,
-    trail_positions: List[np.ndarray],
-    show_trails: bool = True,
-    show_heatmap: bool = False,
-    show_risk_tiles: bool = False,
-    performance_mode: bool = True,
-) -> Image.Image:
-    dpi = 95 if performance_mode else 120
+def render_frame(positions: np.ndarray, velocities: np.ndarray, world: World, params: dict,
+                 trail_positions: List[np.ndarray], show_trails=True, show_heatmap=False,
+                 show_risk_tiles=False, performance_mode=True) -> Image.Image:
+    dpi = 100 if performance_mode else 120
     figsize = (10, 5.6) if performance_mode else (11, 6.2)
     trail_steps = (4 if performance_mode else 8)
     draw_halos = (False if performance_mode else True)
     heatmap_grid = (80, 48) if performance_mode else (100, 60)
 
     fig, ax = plt.subplots(figsize=figsize)
-    ax.set_xlim(0, world.width)
-    ax.set_ylim(0, world.height)
-    ax.set_aspect("equal")
-    ax.set_facecolor("#f9fafb")
+    ax.set_xlim(0, world.width); ax.set_ylim(0, world.height)
+    ax.set_aspect("equal"); ax.set_facecolor("#f9fafb")
 
     # Obstacles
     for ob in world.obstacles:
-        rect = plt.Rectangle(
-            (ob.x, ob.y), ob.w, ob.h,
-            facecolor="#6b7280", alpha=0.20, edgecolor="#1f2937", linewidth=1.0 if performance_mode else 1.2
-        )
+        rect = plt.Rectangle((ob.x, ob.y), ob.w, ob.h, facecolor="#6b7280", alpha=0.20, edgecolor="#1f2937", linewidth=1.0)
         ax.add_patch(rect)
 
-    # Heatmap
+    # Heatmap (optioneel)
     if show_heatmap and len(positions) > 3:
         gx, gy = np.mgrid[0:world.width:complex(heatmap_grid[0]), 0:world.height:complex(heatmap_grid[1])]
         grid = np.zeros_like(gx, dtype=np.float32)
@@ -358,57 +303,43 @@ def render_frame(
             if 0 <= ix < grid.shape[0] and 0 <= iy < grid.shape[1]:
                 grid[ix, iy] += 1.0
         grid = (np.roll(grid, 1, 0) + grid + np.roll(grid, -1, 0) + np.roll(grid, 1, 1) + grid + np.roll(grid, -1, 1)) / 6.0
-        ax.imshow(
-            grid.T, extent=(0, world.width, 0, world.height),
-            origin="lower", cmap="magma", alpha=0.33 if performance_mode else 0.38, interpolation="bilinear",
-        )
+        ax.imshow(grid.T, extent=(0, world.width, 0, world.height), origin="lower", cmap="magma", alpha=0.35, interpolation="bilinear")
 
-    # Risicovakken
+    # Risico tiles (optioneel)
     if show_risk_tiles:
-        tiles_x, tiles_y = (16, 10) if performance_mode else (20, 12)
-        tx = world.width / tiles_x
-        ty = world.height / tiles_y
+        tiles_x, tiles_y = 16, 10
+        tx = world.width / tiles_x; ty = world.height / tiles_y
         for ix in range(tiles_x):
             for iy in range(tiles_y):
-                mask = (positions[:, 0] >= ix * tx) & (positions[:, 0] < (ix + 1) * tx) & \
-                       (positions[:, 1] >= iy * ty) & (positions[:, 1] < (iy + 1) * ty)
-                count = np.count_nonzero(mask)
-                if count >= (5 if performance_mode else 4):
-                    rect = plt.Rectangle((ix * tx, iy * ty), tx, ty, facecolor="#ef4444", alpha=0.10, edgecolor=None)
-                    ax.add_patch(rect)
-
-    # Trails
+                mask = (positions[:,0]>=ix*tx)&(positions[:,0]<(ix+1)*tx)&(positions[:,1]>=iy*ty)&(positions[:,1]<(iy+1)*ty)
+                if np.count_nonzero(mask) >= 5:
+                    ax.add_patch(plt.Rectangle((ix*tx,iy*ty),tx,ty,facecolor="#ef4444",alpha=0.1,edgecolor=None))
+
+    # Trails (optioneel)
     if show_trails and trail_positions:
         steps = min(trail_steps, len(trail_positions))
         for t_back in range(steps):
             alpha = 0.10 + 0.10 * (t_back / steps)
             pts = trail_positions[-1 - t_back]
-            ax.scatter(pts[:, 0], pts[:, 1], s=14, c="#111827", alpha=alpha, linewidths=0)
+            ax.scatter(pts[:,0], pts[:,1], s=14, c="#111827", alpha=alpha, linewidths=0)
 
-    # Stress & dots (bolletjes!)
-    stresses = [stress_score(p, v, positions, world, params.get("desired_speed", 1.3))
-                for p, v in zip(positions, velocities)]
-    sizes = (24 if performance_mode else 28) + (40 if performance_mode else 50) * np.array(stresses)
+    # Dots met stress-kleur
+    stresses = [stress_score(p, v, positions, world, params.get("desired_speed", 1.3)) for p,v in zip(positions, velocities)]
+    sizes = 26 + 46 * np.array(stresses)
     colors = [stress_to_color(s) for s in stresses]
-    ax.scatter(positions[:, 0], positions[:, 1], s=sizes, c=colors, edgecolors="#111827",
-               linewidths=0.5 if performance_mode else 0.6, zorder=3)
+    ax.scatter(positions[:,0], positions[:,1], s=sizes, c=colors, edgecolors="#111827", linewidths=0.5, zorder=3)
 
-    # Halo optioneel
     if draw_halos:
-        for p, c in zip(positions, colors):
-            ax.scatter([p[0]], [p[1]], s=200, c=c, alpha=0.08, linewidths=0, zorder=2)
-            ax.scatter([p[0]], [p[1]], s=120, c=c, alpha=0.08, linewidths=0, zorder=2)
-
-    ax.grid(alpha=0.10 if performance_mode else 0.12)
-    ax.set_xticks([]); ax.set_yticks([])
+        for p,c in zip(positions,colors):
+            ax.scatter([p[0]],[p[1]],s=200,c=c,alpha=0.08,linewidths=0,zorder=2)
+            ax.scatter([p[0]],[p[1]],s=120,c=c,alpha=0.08,linewidths=0,zorder=2)
 
-    # Stats overlay
+    ax.grid(alpha=0.10); ax.set_xticks([]); ax.set_yticks([])
     mean_speed = float(np.linalg.norm(velocities, axis=1).mean())
     pct_panic = 100.0 * (np.array(stresses) >= 0.66).mean()
     max_density_inv = max(1e-6, np.min([k3_distance(p, positions) for p in positions]))
     crowd_index = 1.0 / max_density_inv
-    title = f"Snelheid gem.: {mean_speed:.2f} m/s   •   % paniek: {pct_panic:.0f}%   •   Dichtheidsindex: {crowd_index:.2f}"
-    ax.set_title(title, fontsize=11, color="#374151")
+    ax.set_title(f"Snelheid gem.: {mean_speed:.2f} m/s • % paniek: {pct_panic:.0f}% • Dichtheidsindex: {crowd_index:.2f}", fontsize=11, color="#374151")
 
     buf = io.BytesIO()
     plt.tight_layout()
@@ -419,11 +350,11 @@ def render_frame(
 
 
 # ---------------------------
-# Simulation (states only)
+# Simulatie → lijst frames → GIF
 # ---------------------------
 def simulate_states(n_agents: int, steps: int, world: World, params: dict, layout: str):
     agents = init_agents(n_agents, world, layout)
-    states = []  # list of dicts: {"pos": (N,2), "vel": (N,2)}
+    states = []
     for _ in range(steps):
         pos = np.array([a.pos.copy() for a in agents])
         vel = np.array([a.vel.copy() for a in agents])
@@ -431,146 +362,70 @@ def simulate_states(n_agents: int, steps: int, world: World, params: dict, layou
         social_force_step(agents, world, params, dt=0.12)
     return states
 
-
-def render_from_states(states, idx, world: World, params: dict,
+def states_to_gif_path(states, world: World, params: dict,
                        show_trails=True, show_heatmap=False, show_risk_tiles=False,
-                       performance_mode=True):
-    idx = max(0, min(idx, len(states) - 1))
-    # trails opbouwen
-    trail_positions = []
-    if show_trails:
-        start = max(0, idx - 12)
-        for j in range(start, idx + 1):
-            trail_positions.append(states[j]["pos"])
-    return render_frame(
-        positions=states[idx]["pos"],
-        velocities=states[idx]["vel"],
-        world=world,
-        params=params,
-        trail_positions=trail_positions,
-        show_trails=show_trails,
-        show_heatmap=show_heatmap,
-        show_risk_tiles=show_risk_tiles,
-        performance_mode=performance_mode,
-    )
+                       performance_mode=True, fps: float = 12.0) -> str:
+    frames_np = []
+    trail_positions: List[np.ndarray] = []
+    for i, st in enumerate(states):
+        # bouw korte trail
+        trail_positions.append(st["pos"])
+        if len(trail_positions) > 12: trail_positions.pop(0)
+        img = render_frame(st["pos"], st["vel"], world, params, trail_positions,
+                           show_trails=show_trails, show_heatmap=show_heatmap,
+                           show_risk_tiles=show_risk_tiles, performance_mode=performance_mode)
+        frames_np.append(np.array(img))
+
+    tmp = tempfile.NamedTemporaryFile(delete=False, suffix=".gif")
+    tmp_path = tmp.name; tmp.close()
+    # duration = seconden per frame
+    duration = 1.0 / max(1.0, fps)
+    imageio.mimsave(tmp_path, frames_np, format="GIF", duration=duration, loop=0)
+    return tmp_path
 
 
 # ---------------------------
-# Gradio Callbacks
+# Gradio callbacks
 # ---------------------------
 def build_world(preset_name: str, obstacles_json: str) -> World:
     obstacles = list(PRESETS.get(preset_name, [])) + parse_obstacles(obstacles_json)
     return World(obstacles=obstacles)
 
-def run_sim(
+def run_sim_to_gif(
     preset: str, obstacles_json: str, n_agents: int, steps: int, layout: str,
     desired_speed: float, relax_time: float, people_repulsion: float, people_range: float,
     obstacle_repulsion: float, obstacle_range: float, noise: float, bounce: bool,
-    show_trails: bool, show_heatmap: bool, show_risk_tiles: bool,
-    performance_mode: bool,
+    show_trails: bool, show_heatmap: bool, show_risk_tiles: bool, performance_mode: bool,
+    fps: float
 ):
     world = build_world(preset, obstacles_json)
-    params = dict(
-        desired_speed=desired_speed, relax_time=relax_time, people_repulsion=people_repulsion,
-        people_range=people_range, obstacle_repulsion=obstacle_repulsion, obstacle_range=obstacle_range,
-        noise=noise, bounce_walls=bounce
-    )
-    # Alleen STATES simuleren (snel)
+    params = dict(desired_speed=desired_speed, relax_time=relax_time,
+                  people_repulsion=people_repulsion, people_range=people_range,
+                  obstacle_repulsion=obstacle_repulsion, obstacle_range=obstacle_range,
+                  noise=noise, bounce_walls=bounce)
     states = simulate_states(n_agents, steps, world, params, layout)
-    # Eerste frame renderen on-demand
-    img0 = render_from_states(states, 0, world, params,
-                              show_trails, show_heatmap, show_risk_tiles,
-                              performance_mode)
-    slider_update = gr.update(value=0, minimum=0, maximum=max(0, len(states)-1), step=1)
+    gif_path = states_to_gif_path(states, world, params,
+                                  show_trails=show_trails, show_heatmap=show_heatmap,
+                                  show_risk_tiles=show_risk_tiles, performance_mode=performance_mode,
+                                  fps=fps)
     badge_html = f"<span class='stat-badge'>{len(world.obstacles)} obstakels</span>"
-    sim_state = dict(
-        states=states, world=world, params=params,
-        layers=dict(trails=show_trails, heatmap=show_heatmap, risk=show_risk_tiles),
-        perf=performance_mode,
-    )
-    return img0, gr.State(sim_state), slider_update, badge_html
-
-def scrub_frame(frame_idx: int, sim_state: dict):
-    if not sim_state:
-        raise gr.Error("Geen simulatiestaten. Run eerst de simulatie.")
-    states = sim_state["states"]
-    world = sim_state["world"]
-    params = sim_state["params"]
-    layers = sim_state["layers"]
-    perf = sim_state["perf"]
-    return render_from_states(states, frame_idx, world, params,
-                              layers["trails"], layers["heatmap"], layers["risk"], perf)
-
-def add_obstacle_click(evt: gr.SelectData, world_w: float, world_h: float, start_xy: Optional[Tuple[float, float]], obstacles_json: str):
-    if evt is None:
-        return obstacles_json, None, gr.Info("Geen klik gedetecteerd.")
-
-    img_w, img_h = evt.image_size  # pixels
-    px, py = evt.index           # pixels
-    wx = (px / max(1, img_w)) * world_w
-    wy = (py / max(1, img_h)) * world_h
-
-    obs = parse_obstacles(obstacles_json)
-
-    if start_xy is None:
-        return obstacles_to_json(obs), (wx, wy), gr.Info(f"Beginpunt obstakel: ({wx:.2f}, {wy:.2f})")
-    else:
-        x0, y0 = start_xy
-        x1, y1 = wx, wy
-        x = min(x0, x1)
-        y = min(y0, y1)
-        w = abs(x1 - x0)
-        h = abs(y1 - y0)
-        if w < 0.2 or h < 0.2:
-            return obstacles_to_json(obs), None, gr.Warning("Obstakel is te klein; minimaal 0.2 × 0.2 aub.")
-        obs.append(RectObstacle(x, y, w, h))
-        return obstacles_to_json(obs), None, gr.Info(f"Obstakel toegevoegd: x={x:.2f}, y={y:.2f}, w={w:.2f}, h={h:.2f}")
-
-def undo_obstacle(obstacles_json: str):
-    obs = parse_obstacles(obstacles_json)
-    if not obs:
-        return obstacles_json, gr.Warning("Geen obstakels om te verwijderen.")
-    obs.pop()
-    return obstacles_to_json(obs), gr.Info("Laatste obstakel verwijderd.")
-
-def clear_obstacles():
-    return "[]", gr.Info("Alle obstakels gewist.")
-
-def refresh_after_obstacle_change(
-    preset: str, obstacles_json: str, n_agents: int, steps: int, layout: str,
-    desired_speed: float, relax_time: float, people_repulsion: float, people_range: float,
-    obstacle_repulsion: float, obstacle_range: float, noise: float, bounce: bool,
-    show_trails: bool, show_heatmap: bool, show_risk_tiles: bool,
-    performance_mode: bool,
-):
-    img, sim_state, slider_update, _badge = run_sim(
-        preset, obstacles_json, n_agents, steps, layout,
-        desired_speed, relax_time, people_repulsion, people_range,
-        obstacle_repulsion, obstacle_range, noise, bounce,
-        show_trails, show_heatmap, show_risk_tiles,
-        performance_mode,
-    )
-    return img, sim_state, slider_update, f"<span class='stat-badge'>{len(parse_obstacles(obstacles_json))} obstakels</span>"
-
-# AUTOPLAY tick: verhoog index en render als 'playing' aan staat
-def tick_play(sim_state: dict, frame_idx: int, playing: bool):
-    if not playing or not sim_state:
-        return gr.update(), gr.update()
-    states = sim_state["states"]
-    if not states:
-        return gr.update(), gr.update()
-    new_idx = (frame_idx + 1) % len(states)
-    world = sim_state["world"]; params = sim_state["params"]
-    layers = sim_state["layers"]; perf = sim_state["perf"]
-    img = render_from_states(states, new_idx, world, params,
-                             layers["trails"], layers["heatmap"], layers["risk"], perf)
-    return img, gr.update(value=new_idx)
+    return gif_path, badge_html
+
+# Autostart bij load
+def do_autostart(preset, obstacles_json, n_agents, steps, layout,
+                 desired_speed, relax_time, people_repulsion, people_range,
+                 obstacle_repulsion, obstacle_range, noise, bounce,
+                 show_trails, show_heatmap, show_risk_tiles, performance_mode, fps):
+    return run_sim_to_gif(preset, obstacles_json, n_agents, steps, layout,
+                          desired_speed, relax_time, people_repulsion, people_range,
+                          obstacle_repulsion, obstacle_range, noise, bounce,
+                          show_trails, show_heatmap, show_risk_tiles, performance_mode, fps)
 
 
 # ---------------------------
 # UI
 # ---------------------------
-with gr.Blocks(theme=THEME, css=CUSTOM_CSS, title="Crowd Behavior Lab", fill_height=True) as demo:
+with gr.Blocks(theme=THEME, css=CUSTOM_CSS, title="Crowd Behavior Lab — GIF") as demo:
     gr.Markdown("""
     <div id='title' class='card' style='margin-bottom:12px'>
       <h1>👥 Crowd Behavior Lab</h1>
@@ -579,23 +434,22 @@ with gr.Blocks(theme=THEME, css=CUSTOM_CSS, title="Crowd Behavior Lab", fill_hei
         <span class="legend-dot legend-orange" style="margin-left:12px;"></span>Stress
         <span class="legend-dot legend-red" style="margin-left:12px;"></span>Paniek
       </div>
+      <p style="margin-top:6px">Deze versie rendert een geanimeerde GIF voor gegarandeerde beweging.</p>
     </div>
     """)
 
     with gr.Row(equal_height=False):
         with gr.Column(scale=1):
             gr.Markdown("### Scène & parameters", elem_classes=["card"])
-            preset = gr.Dropdown(list(PRESETS.keys()), value="Lege ruimte", label="Obstakelpreset")
-            obstacles_json = gr.Textbox(label="Obstakels (JSON)", value="[]", lines=4)
+            preset = gr.Dropdown(list(PRESETS.keys()), value="Flessenhals (taps)", label="Obstakelpreset")
+            obstacles_json = gr.Textbox(label="Extra obstakels (JSON)", value="[]", lines=4)
 
-            layout = gr.Radio(
-                ["Links→Rechts", "Rechts→Links", "Twee-richtingen", "Willekeurig"],
-                value="Twee-richtingen", label="Stroomrichting"
-            )
+            layout = gr.Radio(["Links→Rechts","Rechts→Links","Twee-richtingen","Willekeurig"],
+                              value="Twee-richtingen", label="Stroomrichting")
 
             with gr.Row():
-                n_agents = gr.Slider(5, 200, value=60, step=1, label="Aantal agenten")
-                steps = gr.Slider(30, 500, value=180, step=10, label="Simulatiestappen")
+                n_agents = gr.Slider(5, 200, value=80, step=1, label="Aantal agenten")
+                steps = gr.Slider(30, 500, value=200, step=10, label="Simulatiestappen")
 
             with gr.Accordion("Krachten & gedrag", open=False):
                 desired_speed = gr.Slider(0.5, 2.5, value=1.3, step=0.05, label="Gewenste snelheid (m/s)")
@@ -607,141 +461,42 @@ with gr.Blocks(theme=THEME, css=CUSTOM_CSS, title="Crowd Behavior Lab", fill_hei
                 noise = gr.Slider(0.0, 0.6, value=0.08, step=0.01, label="Gedragsruis")
                 bounce = gr.Checkbox(value=True, label="Veerkrachtige muren (bounce)")
 
-            gr.Markdown("### Visualisatie lagen", elem_classes=["card"])
+            gr.Markdown("### Visualisatie", elem_classes=["card"])
             show_trails = gr.Checkbox(value=True, label="Trails")
             show_heatmap = gr.Checkbox(value=False, label="Density heatmap")
             show_risk_tiles = gr.Checkbox(value=False, label="Risicozones (tiles)")
-            performance_mode = gr.Checkbox(value=True, label="🔋 Performance-modus (sneller renderen)")
-
-            run_btn = gr.Button("▶️ Run simulatie", variant="primary")
+            performance_mode = gr.Checkbox(value=True, label="🔋 Performance-modus")
+            fps = gr.Slider(5, 30, value=12, step=1, label="GIF FPS (frames/seconde)")
 
-            with gr.Row():
-                undo_btn = gr.Button("↩️ Undo obstakel")
-                clear_btn = gr.Button("🧹 Clear obstakels")
-
-            obstacle_status = gr.Markdown("", elem_classes=["card"])
+            run_btn = gr.Button("▶️ Genereer animatie", variant="primary")
 
-        with gr.Column(scale=2):
-            gr.Markdown("### Visualisatie & besturing", elem_classes=["card"])
-            canvas = gr.Image(label="Simulatie", format="png", interactive=True)
-
-            with gr.Row():
-                frame_slider = gr.Slider(0, 100, value=0, step=1, label="Tijd")
-                playing = gr.Checkbox(value=True, label="▶️ Play")
-
-            sim_state = gr.State({})   # dict met states/world/params/layers
             badge = gr.Markdown("<span class='stat-badge'>0 obstakels</span>")
 
-            start_xy = gr.State(None)  # (x,y) eerste klik
-            world_w = gr.Number(value=20.0, visible=False)
-            world_h = gr.Number(value=12.0, visible=False)
-
-            # Timer voor autoplay (±12 fps -> 0.08s)
-            timer = gr.Timer(0.08)
-
-    # --- AUTOSTART: run sim meteen bij laden van de Space ---
-    def _auto_start(
-        preset_v=preset.value, obstacles_json_v="[]", n_agents_v=60, steps_v=180, layout_v="Twee-richtingen",
-        desired_speed_v=1.3, relax_time_v=0.6, people_repulsion_v=4.0, people_range_v=1.2,
-        obstacle_repulsion_v=8.0, obstacle_range_v=1.0, noise_v=0.08, bounce_v=True,
-        show_trails_v=True, show_heatmap_v=False, show_risk_tiles_v=False, performance_mode_v=True
-    ):
-        # Let op: demo.load krijgt de actuele widgetwaarden via inputs (hieronder),
-        # maar we houden defaults voor lokale run zonder UI.
-        return run_sim(
-            preset_v, obstacles_json_v, n_agents_v, steps_v, layout_v,
-            desired_speed_v, relax_time_v, people_repulsion_v, people_range_v,
-            obstacle_repulsion_v, obstacle_range_v, noise_v, bounce_v,
-            show_trails_v, show_heatmap_v, show_risk_tiles_v, performance_mode_v
-        )
+        with gr.Column(scale=2):
+            gr.Markdown("### Geanimeerde simulatie", elem_classes=["card"])
+            # Belangrijk: GIF tonen als filepath
+            canvas = gr.Image(label="Simulatie (GIF)", format="png", interactive=False)  # format negeren; pad eindigt op .gif
 
+    # Autostart bij openen
     demo.load(
-        fn=_auto_start,
-        inputs=[
-            preset, obstacles_json, n_agents, steps, layout,
-            desired_speed, relax_time, people_repulsion, people_range,
-            obstacle_repulsion, obstacle_range, noise, bounce,
-            show_trails, show_heatmap, show_risk_tiles, performance_mode
-        ],
-        outputs=[canvas, sim_state, frame_slider, badge],
+        fn=do_autostart,
+        inputs=[preset, obstacles_json, n_agents, steps, layout,
+                desired_speed, relax_time, people_repulsion, people_range,
+                obstacle_repulsion, obstacle_range, noise, bounce,
+                show_trails, show_heatmap, show_risk_tiles, performance_mode, fps],
+        outputs=[canvas, badge],
     )
 
-    # --- Events ---
+    # Handmatige run
     run_btn.click(
-        fn=run_sim,
-        inputs=[
-            preset, obstacles_json, n_agents, steps, layout,
-            desired_speed, relax_time, people_repulsion, people_range,
-            obstacle_repulsion, obstacle_range, noise, bounce,
-            show_trails, show_heatmap, show_risk_tiles, performance_mode
-        ],
-        outputs=[canvas, sim_state, frame_slider, badge]
-    )
-
-    # Scrub (render één frame on-demand)
-    frame_slider.release(fn=scrub_frame, inputs=[frame_slider, sim_state], outputs=[canvas])
-
-    # Autoplay tick (loopt door zolang 'playing' aan staat)
-    timer.tick(
-        fn=tick_play,
-        inputs=[sim_state, frame_slider, playing],
-        outputs=[canvas, frame_slider],
-    )
-
-    # Klik om obstakels te tekenen (2-kliks)
-    canvas.select(
-        fn=add_obstacle_click,
-        inputs=[world_w, world_h, start_xy, obstacles_json],  # evt komt automatisch als 1e arg
-        outputs=[obstacles_json, start_xy, obstacle_status]
-    ).then(
-        fn=refresh_after_obstacle_change,
-        inputs=[
-            preset, obstacles_json, n_agents, steps, layout,
-            desired_speed, relax_time, people_repulsion, people_range,
-            obstacle_repulsion, obstacle_range, noise, bounce,
-            show_trails, show_heatmap, show_risk_tiles, performance_mode
-        ],
-        outputs=[canvas, sim_state, frame_slider, badge]
-    )
-
-    # Undo/Clear
-    undo_btn.click(fn=undo_obstacle, inputs=[obstacles_json], outputs=[obstacles_json, obstacle_status])\
-        .then(fn=refresh_after_obstacle_change,
-              inputs=[preset, obstacles_json, n_agents, steps, layout,
-                      desired_speed, relax_time, people_repulsion, people_range,
-                      obstacle_repulsion, obstacle_range, noise, bounce,
-                      show_trails, show_heatmap, show_risk_tiles, performance_mode],
-              outputs=[canvas, sim_state, frame_slider, badge])
-
-    clear_btn.click(fn=clear_obstacles, inputs=None, outputs=[obstacles_json, obstacle_status])\
-        .then(fn=refresh_after_obstacle_change,
-              inputs=[preset, obstacles_json, n_agents, steps, layout,
-                      desired_speed, relax_time, people_repulsion, people_range,
-                      obstacle_repulsion, obstacle_range, noise, bounce,
-                      show_trails, show_heatmap, show_risk_tiles, performance_mode],
-              outputs=[canvas, sim_state, frame_slider, badge])
-
-    # Preset change → laad basisobstakels als er nog niets staat
-    def load_preset_obs(preset_name: str, current_json: str):
-        base = list(PRESETS.get(preset_name, []))
-        if base and (not current_json.strip() or current_json.strip() == "[]"):
-            return obstacles_to_json(base), gr.Info("Preset-obstakels geladen.")
-        return current_json, gr.Info("Preset gekozen. Huidige obstakels blijven behouden.")
-
-    preset.change(fn=load_preset_obs, inputs=[preset, obstacles_json], outputs=[obstacles_json, obstacle_status])
-
-    # Handmatige wijziging in obstakel JSON → resimulate
-    obstacles_json.change(
-        fn=refresh_after_obstacle_change,
+        fn=run_sim_to_gif,
         inputs=[preset, obstacles_json, n_agents, steps, layout,
                 desired_speed, relax_time, people_repulsion, people_range,
                 obstacle_repulsion, obstacle_range, noise, bounce,
-                show_trails, show_heatmap, show_risk_tiles, performance_mode],
-        outputs=[canvas, sim_state, frame_slider, badge]
+                show_trails, show_heatmap, show_risk_tiles, performance_mode, fps],
+        outputs=[canvas, badge]
     )
 
-
 if __name__ == "__main__":
-    # Timer/autoplay werkt alleen betrouwbaar met queue aan
-    demo.queue()
+    # Geen timer/queue meer nodig voor animatie — GIF speelt in de browser.
     demo.launch()