Spaces:

LeafCat79
/

Image_Generator_for_HTML_Games

Running

File size: 11,109 Bytes

import base64
import io
import re
import tempfile
import time
from dataclasses import dataclass
from html import escape
from urllib.parse import quote

import gradio as gr
import requests
from PIL import Image, ImageDraw, ImageFont


POLLINATIONS_URL = (
    "https://image.pollinations.ai/prompt/{prompt}"
    "?width={width}&height={height}&model=flux&nologo=true&seed={seed}"
)


STARTER_HTML = """<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Mini Forest Game</title>
  <style>
    body { margin: 0; background: #111; display: grid; place-items: center; min-height: 100vh; }
    canvas { border: 2px solid #222; background: #222; image-rendering: pixelated; }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="450"></canvas>
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

    const background = new Image();
    background.src = "sprite_background.png";
    const playerImg = new Image();
    playerImg.src = "sprite_player.png";

    const keys = new Set();
    const player = { x: 380, y: 205, w: 48, h: 48, speed: 4 };

    window.addEventListener("keydown", e => keys.add(e.key));
    window.addEventListener("keyup", e => keys.delete(e.key));

    function update() {
      if (keys.has("a") || keys.has("ArrowLeft")) player.x -= player.speed;
      if (keys.has("d") || keys.has("ArrowRight")) player.x += player.speed;
      if (keys.has("w") || keys.has("ArrowUp")) player.y -= player.speed;
      if (keys.has("s") || keys.has("ArrowDown")) player.y += player.speed;
      player.x = Math.max(0, Math.min(canvas.width - player.w, player.x));
      player.y = Math.max(0, Math.min(canvas.height - player.h, player.y));
    }

    function draw() {
      ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
      ctx.drawImage(playerImg, player.x, player.y, player.w, player.h);
      ctx.fillStyle = "white";
      ctx.font = "18px sans-serif";
      ctx.fillText("Use WASD or arrow keys", 18, 28);
    }

    function loop() {
      update();
      draw();
      requestAnimationFrame(loop);
    }
    loop();
  </script>
</body>
</html>"""


DEFAULT_ROLES = """player: top-down pixel-art adventurer hero, transparent background, bright readable silhouette
background: enchanted forest clearing game background, top-down view, soft moonlight, detailed but not too busy"""


@dataclass
class AssetSpec:
    role: str
    prompt: str
    filename: str
    width: int
    height: int


def slugify(value: str) -> str:
    value = re.sub(r"[^a-zA-Z0-9]+", "_", value.strip().lower()).strip("_")
    return value or "asset"


def parse_assets(raw_roles: str, style_hint: str) -> list[AssetSpec]:
    specs: list[AssetSpec] = []
    for line in raw_roles.splitlines():
        line = line.strip()
        if not line or line.startswith("#"):
            continue

        if ":" in line:
            role, prompt = line.split(":", 1)
        elif "=" in line:
            role, prompt = line.split("=", 1)
        else:
            role, prompt = line, line

        role = role.strip()
        prompt = prompt.strip() or role
        slug = slugify(role)
        is_background = any(word in slug for word in ("background", "backdrop", "scene", "map", "level"))
        width, height = (800, 450) if is_background else (128, 128)
        filename = f"sprite_{slug}.png"
        full_prompt = (
            f"{prompt}, {style_hint}, game asset, clean readable shape, "
            "no text, no watermark"
        ).strip(", ")
        specs.append(AssetSpec(role=role, prompt=full_prompt, filename=filename, width=width, height=height))
    return specs


def image_to_png_bytes(content: bytes, width: int, height: int) -> bytes:
    image = Image.open(io.BytesIO(content)).convert("RGBA")
    image = image.resize((width, height), Image.LANCZOS)
    out = io.BytesIO()
    image.save(out, format="PNG")
    return out.getvalue()


def png_bytes_to_data_uri(content: bytes) -> str:
    return "data:image/png;base64," + base64.b64encode(content).decode("ascii")


def write_gallery_image(content: bytes, role: str) -> str:
    handle = tempfile.NamedTemporaryFile(
        prefix=f"{slugify(role)}_",
        suffix=".png",
        delete=False,
    )
    handle.write(content)
    handle.close()
    return handle.name


def placeholder_png_bytes(role: str, width: int, height: int) -> bytes:
    label = escape(role[:18])
    image = Image.new("RGBA", (width, height), "#222222")
    draw = ImageDraw.Draw(image)
    draw.rounded_rectangle((4, 4, width - 4, height - 4), radius=12, fill="#3b82f6")
    font = ImageFont.load_default()
    bbox = draw.textbbox((0, 0), label, font=font)
    x = (width - (bbox[2] - bbox[0])) / 2
    y = (height - (bbox[3] - bbox[1])) / 2
    draw.text((x, y), label, fill="white", font=font)
    out = io.BytesIO()
    image.save(out, format="PNG")
    return out.getvalue()


def generate_asset(spec: AssetSpec, index: int) -> tuple[str, str, str | None]:
    seed = abs(hash((spec.role, spec.prompt, index))) % 999999
    url = POLLINATIONS_URL.format(
        prompt=quote(spec.prompt),
        width=spec.width,
        height=spec.height,
        seed=seed,
    )

    for attempt in range(3):
        try:
            response = requests.get(url, timeout=120)
            response.raise_for_status()
            png_content = image_to_png_bytes(response.content, spec.width, spec.height)
            return (
                png_bytes_to_data_uri(png_content),
                write_gallery_image(png_content, spec.role),
                None,
            )
        except Exception as exc:
            if attempt < 2:
                time.sleep(8)
            else:
                png_content = placeholder_png_bytes(spec.role, spec.width, spec.height)
                return (
                    png_bytes_to_data_uri(png_content),
                    write_gallery_image(png_content, spec.role),
                    str(exc),
                )
    png_content = placeholder_png_bytes(spec.role, spec.width, spec.height)
    return (
        png_bytes_to_data_uri(png_content),
        write_gallery_image(png_content, spec.role),
        "Unknown generation error",
    )


def replacement_names(spec: AssetSpec) -> set[str]:
    slug = slugify(spec.role)
    names = {
        spec.filename,
        f"{slug}.png",
        f"{slug}.jpg",
        f"{slug}.jpeg",
        f"{slug}.webp",
        f"asset_{slug}.png",
        f"{spec.role.strip()}.png",
        f"{{{{{slug}}}}}",
        f"{{{slug}}}",
    }
    if slug == "background":
        names.update({"background.png", "sprite_background.jpg", "background.jpg"})
    if slug == "player":
        names.update({"player.png", "sprite_player.jpg", "hero.png"})
    if slug == "enemy":
        names.update({"enemy.png", "monster.png", "sprite_enemy.jpg"})
    return names


def embed_assets(html_code: str, assets: dict[str, str], specs: list[AssetSpec]) -> str:
    output = html_code
    manifest_lines = ["<!-- Embedded game assets generated by Image Generator for HTML Games"]

    for spec in specs:
        data_uri = assets[spec.role]
        manifest_lines.append(f"{spec.role}: {spec.filename}")
        for name in replacement_names(spec):
            output = output.replace(f'"{name}"', f'"{data_uri}"')
            output = output.replace(f"'{name}'", f"'{data_uri}'")
            output = output.replace(name, data_uri)

    manifest_lines.append("-->")
    manifest = "\n".join(manifest_lines) + "\n"
    asset_map = ",\n".join(
        f"    {slugify(spec.role)!r}: {assets[spec.role]!r}" for spec in specs
    )
    helper_script = f"""<script>
  window.GENERATED_GAME_ASSETS = {{
{asset_map}
  }};
</script>"""

    if "</head>" in output:
        output = output.replace("</head>", helper_script + "\n</head>", 1)
    elif "<body" in output:
        output = output.replace("<body", helper_script + "\n<body", 1)
    else:
        output = helper_script + "\n" + output

    return manifest + output


def build_preview(html_code: str) -> str:
    encoded = base64.b64encode(html_code.encode("utf-8")).decode("ascii")
    return (
        f'<iframe src="data:text/html;base64,{encoded}" '
        'style="width:100%;height:560px;border:1px solid #333;border-radius:8px;background:#000;" '
        'sandbox="allow-scripts" title="Game preview"></iframe>'
    )


def generate_images_and_game(html_code: str, roles: str, style_hint: str):
    if not html_code.strip():
        return "", "Paste HTML game code first.", [], ""

    specs = parse_assets(roles, style_hint or "pixel art style")
    if not specs:
        return html_code, "Add at least one asset role, like `player: brave knight`.", [], build_preview(html_code)

    assets: dict[str, str] = {}
    gallery = []
    errors = []

    for index, spec in enumerate(specs):
        data_uri, gallery_path, error = generate_asset(spec, index)
        assets[spec.role] = data_uri
        gallery.append((gallery_path, f"{spec.role} -> {spec.filename}"))
        if error:
            errors.append(f"{spec.role}: fallback used ({error})")

    rewritten = embed_assets(html_code, assets, specs)
    status = f"Generated and embedded {len(specs)} asset(s)."
    if errors:
        status += "\n\n" + "\n".join(errors)
    return rewritten, status, gallery, build_preview(rewritten)


with gr.Blocks(title="Image Generator for HTML Games") as demo:
    gr.Markdown(
        "# Image Generator for HTML Games\n"
        "Paste an HTML canvas game, list the image roles you want, and generate a rewritten version "
        "with the images embedded directly into the code."
    )

    with gr.Row():
        with gr.Column(scale=1):
            roles = gr.Textbox(
                label="Image roles to generate",
                value=DEFAULT_ROLES,
                lines=8,
                info="One per line: role: image description. Example: player: blue robot hero",
            )
            style = gr.Textbox(
                label="Shared visual style",
                value="cohesive 2D pixel-art game style, transparent subject sprites where possible",
                lines=2,
            )
            generate_btn = gr.Button("Generate Images + Embed Game", variant="primary")
            status = gr.Markdown("Ready.")
            gallery = gr.Gallery(label="Generated assets", columns=2, height=300)

        with gr.Column(scale=2):
            html_input = gr.Code(
                label="Original HTML game code",
                value=STARTER_HTML,
                language="html",
                lines=18,
            )
            output_code = gr.Code(
                label="Rewritten HTML with embedded images",
                language="html",
                lines=18,
            )

    gr.Markdown("## Game preview")
    preview = gr.HTML(build_preview(STARTER_HTML))

    generate_btn.click(
        fn=generate_images_and_game,
        inputs=[html_input, roles, style],
        outputs=[output_code, status, gallery, preview],
    )


if __name__ == "__main__":
    demo.launch()