Update app.py

app.py

@@ -3,12 +3,11 @@ Text-to-Game Generator
 Pipeline:
   Theme --> [Groq Llama] --> HTML5 game code (with sprite_NAME.png refs)
   Theme --> [Groq Llama acting as Z-Image-Engineer] --> cinematic image prompts
-         --> [FLUX.1-schnell via nscale] --> sprite images
+         --> [FLUX.1-schnell via Pollinations] --> sprite images
          --> injected as base64 into game HTML
 
 Secrets needed:
   GROQ_API_KEY  - console.groq.com (free, no credit card)
-  HF_TOKEN      - huggingface.co/settings/tokens (for FLUX via nscale)
 """
 
 import os
@@ -16,7 +15,10 @@ import re
 import io
 import base64
 import traceback
+import time
+from urllib.parse import quote
 
+import requests
 import gradio as gr
 from openai import OpenAI
 from PIL import Image
@@ -33,6 +35,10 @@ PROMPT_MODEL = "llama-3.3-70b-versatile"   # Groq — creative prompts
 # Pollinations.AI — completely free, no API key, no signup needed
 POLLINATIONS_URL = "https://image.pollinations.ai/prompt/{prompt}?width={w}&height={h}&model=flux&nologo=true&seed={seed}"
 
+# Canvas dimensions — iframe is fixed to these so game fits perfectly
+CANVAS_W = 800
+CANVAS_H = 450
+
 
 def get_groq_client():
     if not GROQ_API_KEY:
@@ -65,107 +71,74 @@ Z_ENGINEER_SYSTEM = (
 )
 
 # ---------------------------------------------------------------------------
-# Game type configs
+# Game type configs — Platformer and Top-Down Shooter only
 # ---------------------------------------------------------------------------
 
 GAME_TYPES = {
     "Platformer": {
-        "description": "Jump over enemies and obstacles to reach the goal.",
+        "description": "Reach the goal platform while avoiding wandering monsters.",
         "prompt_template": (
             "Create a complete, self-contained HTML5 platformer game with the theme: {theme}.\n"
-            "Requirements:\n"
-            "- Single HTML file with all CSS and JavaScript inline.\n"
-            "- Use an HTML5 canvas (id='gameCanvas') sized 800x450.\n"
-            "- Player moves left/right with arrow keys or WASD and jumps.\n"
-            "- At least 5 platforms, 2 moving enemies, and a goal to reach.\n"
-            "- Show score/lives on the canvas.\n"
-            "- Use requestAnimationFrame for the game loop.\n"
-            "- Use new Image() with src='sprite_player.png' for the player character.\n"
-            "- Use new Image() with src='sprite_background.png' for the background.\n"
-            "- Use new Image() with src='sprite_enemy.png' for enemies.\n"
-            "- Draw images with ctx.drawImage(img, x, y, w, h).\n"
-            "- Draw platforms and UI with canvas shapes.\n"
+            "EXACT GAME RULES — implement every one precisely:\n"
+            "- Canvas: id='gameCanvas', size 800x450.\n"
+            "- PLATFORMS: at least 6 platforms drawn with ctx.drawImage(platformImg, x, y, w, h). "
+            "  Include one full-width ground platform at y=420 height=20. "
+            "  Place 5 elevated platforms at varied x/y positions. "
+            "  Use new Image() with src='sprite_platform.png' for ALL platforms.\n"
+            "- TARGET/GOAL: a glowing star or chest sprite at the top-right platform. "
+            "  Use new Image() with src='sprite_goal.png'. "
+            "  When player bounding box overlaps goal: show WIN screen with score and Restart button.\n"
+            "- PLAYER: starts bottom-left. Size 40x40. "
+            "  Move left/right with A/D or ArrowLeft/ArrowRight (speed 4). "
+            "  Jump with W, ArrowUp, or Space (velY = -12, only when grounded). "
+            "  Gravity: velY += 0.5 every frame. "
+            "  Platform collision: set grounded=false BEFORE loop; inside loop if player feet hit platform top set grounded=true velY=0. "
+            "  Keep player inside canvas horizontally.\n"
+            "- MONSTERS: 3 monsters, each patrolling back-and-forth on its own platform. "
+            "  Size 32x32. Speed 1.5 px/frame. Reverse direction at platform edges. "
+            "  Use new Image() with src='sprite_enemy.png'. "
+            "  If monster bounding box overlaps player: player lives -= 1, respawn player at start. "
+            "  0 lives = GAME OVER screen with Restart button.\n"
+            "- HUD: lives top-left, score top-right.\n"
+            "- IMAGES: declare all at top of script before anything else: "
+            "  const playerImg = new Image(); playerImg.src = 'sprite_player.png'; "
+            "  const bgImg = new Image(); bgImg.src = 'sprite_background.png'; "
+            "  const enemyImg = new Image(); enemyImg.src = 'sprite_enemy.png'; "
+            "  const platformImg = new Image(); platformImg.src = 'sprite_platform.png'; "
+            "  const goalImg = new Image(); goalImg.src = 'sprite_goal.png'; "
+            "  Use Promise.all([loadImg(playerImg),loadImg(bgImg),loadImg(enemyImg),loadImg(platformImg),loadImg(goalImg)]).then(startGame).\n"
+            "- Define ALL functions at TOP LEVEL, not inside Promise.then or startGame.\n"
+            "- Add window keydown/keyup listeners to a keys Set inside startGame().\n"
             "- NO external libraries, NO CDN links.\n"
-            "- Theme colors and labels to match: {theme}.\n"
             "Output ONLY the raw HTML. No explanation, no markdown fences."
         ),
     },
     "Top-Down Shooter": {
-        "description": "Shoot waves of enemies before they reach you.",
+        "description": "Shoot monsters coming from the top before they reach you.",
         "prompt_template": (
             "Create a complete, self-contained HTML5 top-down shooter game with the theme: {theme}.\n"
-            "Requirements:\n"
-            "- Single HTML file with all CSS and JavaScript inline.\n"
-            "- Use an HTML5 canvas (id='gameCanvas') sized 800x450.\n"
-            "- Player moves with WASD/arrows; shoots with Space or click.\n"
-            "- Enemies spawn from edges in escalating waves.\n"
-            "- Display health, score, and wave on canvas.\n"
-            "- Game-over screen with score and restart button.\n"
-            "- Use requestAnimationFrame for the game loop.\n"
-            "- Use new Image() with src='sprite_player.png' for the player.\n"
-            "- Use new Image() with src='sprite_background.png' for the background.\n"
-            "- Use new Image() with src='sprite_enemy.png' for enemies.\n"
-            "- Draw images with ctx.drawImage(img, x, y, w, h).\n"
-            "- NO external libraries, NO CDN links.\n"
-            "- Theme colors and labels to match: {theme}.\n"
-            "Output ONLY the raw HTML. No explanation, no markdown fences."
-        ),
-    },
-    "Puzzle / Maze": {
-        "description": "Navigate a maze or solve a tile puzzle to escape.",
-        "prompt_template": (
-            "Create a complete, self-contained HTML5 maze/tile-puzzle game with the theme: {theme}.\n"
-            "Requirements:\n"
-            "- Single HTML file with all CSS and JavaScript inline.\n"
-            "- Use an HTML5 canvas (id='gameCanvas') sized 800x450.\n"
-            "- Player navigates with arrow keys or WASD.\n"
-            "- At least 15x10 tile grid, collectible keys, and a locked exit.\n"
-            "- Show a move counter or timer.\n"
-            "- Win screen when player collects all keys and exits.\n"
-            "- Use new Image() with src='sprite_player.png' for the player.\n"
-            "- Use new Image() with src='sprite_background.png' for the background.\n"
-            "- Draw tiles and UI with canvas shapes.\n"
-            "- NO external libraries, NO CDN links.\n"
-            "- Theme colors and labels to match: {theme}.\n"
-            "Output ONLY the raw HTML. No explanation, no markdown fences."
-        ),
-    },
-    "Arcade / Dodge": {
-        "description": "Dodge falling obstacles and survive as long as possible.",
-        "prompt_template": (
-            "Create a complete, self-contained HTML5 arcade dodge game with the theme: {theme}.\n"
-            "Requirements:\n"
-            "- Single HTML file with all CSS and JavaScript inline.\n"
-            "- Use an HTML5 canvas (id='gameCanvas') sized 800x450.\n"
-            "- Player moves with arrow keys or WASD; obstacles increase in speed over time.\n"
-            "- Collision ends the game; show time survived as score.\n"
-            "- High score stored in a JS variable; restart button on game-over screen.\n"
-            "- Use requestAnimationFrame for the game loop.\n"
-            "- Use new Image() with src='sprite_player.png' for the player.\n"
-            "- Use new Image() with src='sprite_background.png' for the background.\n"
-            "- Draw obstacles and UI with canvas shapes.\n"
-            "- NO external libraries, NO CDN links.\n"
-            "- Theme colors and labels to match: {theme}.\n"
-            "Output ONLY the raw HTML. No explanation, no markdown fences."
-        ),
-    },
-    "Surprise Me!": {
-        "description": "Let the AI invent the genre - could be anything!",
-        "prompt_template": (
-            "Create a complete, self-contained HTML5 browser game with the theme: {theme}.\n"
-            "Pick any fun arcade genre: breakout, snake, flappy-style, space invaders, etc.\n"
-            "Requirements:\n"
-            "- Single HTML file with all CSS and JavaScript inline.\n"
-            "- Use an HTML5 canvas (id='gameCanvas') sized 800x450.\n"
-            "- Keyboard or mouse controlled.\n"
-            "- Clear win/lose conditions and a score display.\n"
-            "- Game-over / win screen with a restart button.\n"
-            "- Use requestAnimationFrame for the game loop.\n"
-            "- Use new Image() with src='sprite_player.png' for the player.\n"
-            "- Use new Image() with src='sprite_background.png' for the background.\n"
-            "- Draw other elements with canvas shapes.\n"
+            "EXACT GAME RULES — implement every one precisely:\n"
+            "- Canvas: id='gameCanvas', size 800x450.\n"
+            "- MONSTERS spawn at random x positions along the TOP edge (y=0) and move DOWNWARD only (y += speed each frame).\n"
+            "- Monster size: 32x32. Monster speed: 1-2 px/frame (slower than player speed of 4).\n"
+            "- PLAYER starts at bottom-center, moves left/right only with A/D or ArrowLeft/ArrowRight keys.\n"
+            "- Player size: 48x48. Player speed: 4 px/frame. Keep player inside canvas bounds.\n"
+            "- LEFT MOUSE CLICK fires one bullet from player position toward the click point.\n"
+            "  Bullet speed: 10 px/frame. Remove bullets that leave canvas.\n"
+            "- BULLET HIT: if a bullet rect overlaps a monster rect, remove BOTH the bullet and the monster. Score += 10.\n"
+            "- MONSTER COLLISION: if a monster rect overlaps the player rect, remove the monster. Player health -= 1.\n"
+            "- MONSTER ESCAPED: if a monster reaches y > canvas.height remove it (no health loss).\n"
+            "- New monsters spawn every 90 frames. Spawn rate increases every 500 points.\n"
+            "- HUD: draw score top-left, health top-right (show as hearts or number).\n"
+            "- GAME OVER when health reaches 0: show score and a Restart button.\n"
+            "- NO gravity, NO velY += 0.5, NO grounded, NO jumping.\n"
+            "- Use new Image() with src='sprite_player.png' for the player (48x48).\n"
+            "- Use new Image() with src='sprite_background.png' for the background (full canvas).\n"
+            "- Use new Image() with src='sprite_enemy.png' for monsters (32x32).\n"
+            "- Declare all images at top of script, use Promise.all to wait before starting gameLoop.\n"
+            "- Define all functions at TOP LEVEL, not inside Promise.then or startGame.\n"
+            "- Add window keydown/keyup listeners to a keys Set inside startGame().\n"
             "- NO external libraries, NO CDN links.\n"
-            "- Theme colors and labels vividly to match: {theme}.\n"
             "Output ONLY the raw HTML. No explanation, no markdown fences."
         ),
     },
@@ -175,10 +148,7 @@ GAME_TYPE_NAMES = list(GAME_TYPES.keys())
 
 THEME_EXAMPLES = {
     "Platformer":       [["Jungle temple with ancient traps"], ["Neon cyberpunk rooftops"], ["Underwater pirate shipwreck"]],
-    "Top-Down Shooter": [["Alien desert invasion"], ["Viking village under siege"], ["Steampunk robot uprising"]],
-    "Puzzle / Maze":    [["Haunted library with secret doors"], ["Ice cave with frozen keys"], ["Egyptian pyramid tiles"]],
-    "Arcade / Dodge":   [["Asteroid field in a tiny rocket"], ["Chef dodging ingredients"], ["Time traveller avoiding paradox storms"]],
-    "Surprise Me!":     [["A sentient library that rearranges itself"], ["Deep sea bioluminescent creatures"], ["Retro space diner on a comet"]],
+    "Top-Down Shooter": [["Ancient Egyptian tomb raid with cursed mummies"], ["Alien desert invasion"], ["Viking village under siege"]],
 }
 
 # ---------------------------------------------------------------------------
@@ -186,19 +156,15 @@ THEME_EXAMPLES = {
 # ---------------------------------------------------------------------------
 
 def generate_image_prompts(theme: str, game_type: str) -> dict:
-    """
-    Use Groq with Z-Image-Engineer system prompt to generate
-    cinematic image prompts for player and background sprites.
-    Returns dict: { 'sprite_player.png': prompt, 'sprite_background.png': prompt, 'sprite_enemy.png': prompt }
-    """
     client = get_groq_client()
-
     seeds = {
         "sprite_player.png":     f"pixel-art game player character for a {theme} themed {game_type} game, front-facing sprite, vibrant colors, clear silhouette, 64x64 pixel style",
         "sprite_background.png": f"2D game background scene for a {theme} themed {game_type} game, wide landscape, atmospheric, game art style, 800x450",
         "sprite_enemy.png":      f"pixel-art enemy character for a {theme} themed {game_type} game, menacing, clear silhouette, 64x64 pixel style",
     }
-
+    if game_type == "Platformer":
+        seeds["sprite_platform.png"] = f"pixel-art solid platform tile for a {theme} themed platformer game, rectangular, textured surface, 128x24 pixel style"
+        seeds["sprite_goal.png"]     = f"pixel-art goal or treasure chest for a {theme} themed platformer game, glowing, clearly visible, 40x40 pixel style"
     prompts = {}
     for sprite_name, seed in seeds.items():
         try:
@@ -214,18 +180,15 @@ def generate_image_prompts(theme: str, game_type: str) -> dict:
             prompts[sprite_name] = response.choices[0].message.content.strip()
         except Exception as exc:
             print(f"[Z-Engineer] Failed {sprite_name}: {exc}")
-            prompts[sprite_name] = seed  # fallback to raw seed
+            prompts[sprite_name] = seed
     return prompts
 
 # ---------------------------------------------------------------------------
-# Step 2: Generate images via FLUX.1-schnell
+# Step 2: Generate images via Pollinations.AI
 # ---------------------------------------------------------------------------
 
 def _pil_to_data_uri(pil_image: Image.Image, size: tuple = None) -> str:
-    if size:
-        img = pil_image.resize(size, Image.LANCZOS)
-    else:
-        img = pil_image
+    img = pil_image.resize(size, Image.LANCZOS) if size else pil_image
     buf = io.BytesIO()
     img.save(buf, format="PNG")
     return "data:image/png;base64," + base64.b64encode(buf.getvalue()).decode()
@@ -245,28 +208,16 @@ def _colored_placeholder(name: str) -> str:
 
 
 def generate_sprites(image_prompts: dict) -> tuple:
-    """Generate images via Pollinations.AI (free, no API key, no signup).
-    Returns (sprite_map, errors_list)"""
-    import requests
-    from urllib.parse import quote
-
     sprite_map = {}
-    errors = []
-
+    errors     = []
     for i, (sprite_name, prompt) in enumerate(image_prompts.items()):
-        # Wait 20s between requests — Pollinations free tier allows 1 per 15s
         if i > 0:
-            import time
             time.sleep(20)
         try:
-            is_bg  = "background" in sprite_name
-            w, h   = (800, 450) if is_bg else (64, 64)
-            seed   = abs(hash(sprite_name)) % 99999
-            url    = POLLINATIONS_URL.format(
-                prompt=quote(prompt),
-                w=w, h=h, seed=seed
-            )
-            # Retry up to 3 times with increasing timeout
+            is_bg = "background" in sprite_name
+            w, h  = (CANVAS_W, CANVAS_H) if is_bg else (64, 64)
+            seed  = abs(hash(sprite_name)) % 99999
+            url   = POLLINATIONS_URL.format(prompt=quote(prompt), w=w, h=h, seed=seed)
             for attempt in range(3):
                 try:
                     response = requests.get(url, timeout=120)
@@ -274,7 +225,6 @@ def generate_sprites(image_prompts: dict) -> tuple:
                     break
                 except Exception as retry_exc:
                     if attempt < 2:
-                        import time
                         time.sleep(20)
                     else:
                         raise retry_exc
@@ -287,7 +237,6 @@ def generate_sprites(image_prompts: dict) -> tuple:
             errors.append(f"{sprite_name}: {error_msg}")
             print(f"[Pollinations] FAILED {sprite_name}: {error_msg}")
             sprite_map[sprite_name] = _colored_placeholder(sprite_name.replace(".png", ""))
-
     return sprite_map, errors
 
 # ---------------------------------------------------------------------------
@@ -295,7 +244,6 @@ def generate_sprites(image_prompts: dict) -> tuple:
 # ---------------------------------------------------------------------------
 
 def _inject_sprites(html_code: str, sprite_map: dict) -> str:
-    # Step 1: Direct string replacement of filename with base64 data URI
     for fname, data_uri in sprite_map.items():
         html_code = html_code.replace('"' + fname + '"', '"' + data_uri + '"')
         html_code = html_code.replace("'" + fname + "'", "'" + data_uri + "'")
@@ -342,6 +290,8 @@ CODE_SYSTEM = (
     "   const dist = Math.sqrt(dx*dx+dy*dy); "
     "   bullets.push({x: player.x, y: player.y, vx: dx/dist*10, vy: dy/dist*10}); } "
     "   FOR PLATFORMER: use gravity velY += 0.5, grounded checks, jump with ArrowUp. "
+    "   Set grounded=false BEFORE platform loop. Set grounded=true and velY=0 only on landing. "
+    "   Always include full-width ground platform at y=420. "
     "6. Draw background FIRST each frame: ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height). "
     "7. Draw player/enemies with ctx.drawImage(playerImg, x, y, w, h). "
     "8. Always keep player inside canvas boundaries. "
@@ -354,10 +304,10 @@ def generate_game_code(game_type: str, theme: str, temperature: float, max_new_t
         return "", "", "Please enter a theme first.", _placeholder_html("Enter a theme and generate a game.")
 
     try:
-        client       = get_groq_client()
-        user_prompt  = GAME_TYPES[game_type]["prompt_template"].format(theme=theme.strip())
+        client      = get_groq_client()
+        user_prompt = GAME_TYPES[game_type]["prompt_template"].format(theme=theme.strip())
 
-        # -- Code generation (Llama) --
+        # Code generation
         code_resp = client.chat.completions.create(
             model=CODE_MODEL,
             messages=[
@@ -373,35 +323,24 @@ def generate_game_code(game_type: str, theme: str, temperature: float, max_new_t
         if "<html" not in code.lower() and "<!doctype" not in code.lower():
             code = _wrap_in_html(code, theme)
 
-        # -- Image prompt generation (Z-Image-Engineer via Groq) --
+        # Image prompts
         image_prompts = generate_image_prompts(theme.strip(), game_type)
 
-        # -- Sprite generation (FLUX.1-schnell) --
+        # Sprites
         sprite_map, sprite_errors = generate_sprites(image_prompts)
 
-        # -- Inject sprites --
+        # Inject
         final_code = _inject_sprites(code, sprite_map)
 
         n_real     = sum(1 for v in sprite_map.values() if "image/png" in v)
         n_fallback = len(sprite_map) - n_real
 
         if sprite_errors:
-            error_detail = " | ".join(sprite_errors)
-            status = (
-                f"Code generated. Images: {n_real} by Pollinations/FLUX, {n_fallback} fallback. "
-                f"FLUX errors: {error_detail}"
-            )
+            status = f"Code done. Images: {n_real} FLUX, {n_fallback} fallback. Errors: {' | '.join(sprite_errors)}"
         else:
-            status = (
-                f"Done! {n_real} sprite(s) generated by Pollinations/FLUX. "
-                "Click Launch Game to play."
-            )
-
-        # Show the enhanced prompts that were used
-        prompt_summary = "\n\n".join(
-            f"**{k}:**\n{v}" for k, v in image_prompts.items()
-        )
+            status = f"Done! {n_real} sprite(s) by Pollinations/FLUX. Click Launch Game to play."
 
+        prompt_summary = "\n\n".join(f"**{k}:**\n{v}" for k, v in image_prompts.items())
         return final_code, prompt_summary, status, _build_preview(final_code)
 
     except Exception as exc:
@@ -423,11 +362,11 @@ def generate_game_code(game_type: str, theme: str, temperature: float, max_new_t
 def _placeholder_html(message: str) -> str:
     safe = message.replace("<", "&lt;").replace(">", "&gt;")
     return (
-        '<div style="display:flex;align-items:center;justify-content:center;'
-        'width:100%;height:460px;background:#0d0d0d;border-radius:12px;'
-        'border:2px dashed #333;color:#555;font-family:monospace;font-size:14px;'
-        'text-align:center;padding:24px;box-sizing:border-box;">'
-        '<pre style="margin:0;white-space:pre-wrap;">' + safe + '</pre></div>'
+        f'<div style="display:flex;align-items:center;justify-content:center;'
+        f'width:{CANVAS_W}px;height:{CANVAS_H}px;background:#0d0d0d;border-radius:12px;'
+        f'border:2px dashed #333;color:#555;font-family:monospace;font-size:14px;'
+        f'text-align:center;padding:24px;box-sizing:border-box;">'
+        f'<pre style="margin:0;white-space:pre-wrap;">{safe}</pre></div>'
     )
 
 
@@ -444,8 +383,8 @@ def _wrap_in_html(snippet: str, theme: str) -> str:
 def _build_preview(html_code: str) -> str:
     encoded = base64.b64encode(html_code.encode("utf-8")).decode("ascii")
     return (
-        '<iframe src="data:text/html;base64,' + encoded + '" '
-        'style="width:100%;height:460px;border:none;border-radius:12px;background:#000;" '
+        f'<iframe src="data:text/html;base64,{encoded}" '
+        f'style="width:{CANVAS_W}px;height:{CANVAS_H}px;border:none;border-radius:12px;background:#000;display:block;" '
         'sandbox="allow-scripts" title="Game Preview"></iframe>'
     )
 
@@ -478,9 +417,8 @@ def build_ui():
         gr.Markdown(
             "# Game Generator\n"
             "Type a theme — the AI writes the game code, generates cinematic image prompts "
-            "using **Z-Image-Engineer V4** style, then **FLUX.1-schnell** renders the sprites.\n\n"
-            "> Secrets needed: `GROQ_API_KEY` (console.groq.com, free) "
-            "and `HF_TOKEN` (huggingface.co/settings/tokens, for FLUX images)."
+            "using **Z-Image-Engineer V4** style, then **FLUX/Pollinations** renders the sprites.\n\n"
+            "> Secrets needed: `GROQ_API_KEY` (console.groq.com, free, no credit card)."
         )
 
         with gr.Row():
@@ -522,26 +460,26 @@ def build_ui():
                 generate_btn = gr.Button("Generate Game + Sprites", variant="primary")
                 gen_status   = gr.Markdown(value="_No game generated yet._")
 
-                gr.Markdown("## 3. Generated image prompts")
-                prompt_display = gr.Markdown(
-                    value="_Image prompts will appear here after generation._"
-                )
-
             # ── Right: code + game ────────────────────────────────────────
             with gr.Column(scale=2, min_width=500):
 
-                gr.Markdown("## 4. Generated code (editable)")
-
-                code_box = gr.Code(
-                    label="HTML source (sprites embedded as base64)",
-                    language="html",
-                    lines=12,
-                    interactive=True,
-                )
+                # Collapsible code window
+                with gr.Accordion("3. Generated code — click to expand/hide", open=False):
+                    code_box = gr.Code(
+                        label="HTML source (sprites embedded as base64)",
+                        language="html",
+                        lines=12,
+                        interactive=True,
+                    )
+                    launch_btn = gr.Button("Launch Game", variant="secondary")
 
-                launch_btn = gr.Button("Launch Game", variant="secondary")
+                # Collapsible image prompts window
+                with gr.Accordion("3b. Generated image prompts — click to expand/hide", open=False):
+                    prompt_display = gr.Markdown(
+                        value="_Image prompts will appear here after generation._"
+                    )
 
-                gr.Markdown("## 5. Live game window")
+                gr.Markdown("## 4. Live game window")
 
                 game_frame = gr.HTML(
                     value=_placeholder_html("Generate a game to see it here."),
@@ -571,8 +509,9 @@ def build_ui():
         gr.Markdown(
             "---\n"
             "**Pipeline:** Theme → [Groq Llama] game code + [Groq 70B as Z-Image-Engineer] "
-            "cinematic prompts → [Pollinations.AI/FLUX] sprites → embedded in game. "
-            "Edit the HTML and click **Launch Game** to hot-reload."
+            "cinematic prompts → [Pollinations/FLUX] sprites → embedded in game. "
+            f"Game window fixed to {CANVAS_W}×{CANVAS_H}px — matches canvas exactly. "
+            "Edit HTML and click **Launch Game** to hot-reload."
         )
 
     return demo