Spaces:

LeafCat79
/

Image_Generator_for_HTML_Games

Sleeping

App Files Files Community

LeafCat79 commited on 29 days ago

Commit

567019b

verified ·

1 Parent(s): 2897473

Improve style-aware asset generation

Browse files

Files changed (1) hide show

app.py +270 -15

app.py CHANGED Viewed

@@ -3,6 +3,7 @@ import hashlib
 import io
 import json
 import math
 import random
 import re
 import tempfile
@@ -10,9 +11,10 @@ import time
 from dataclasses import dataclass
 from html import escape
 from urllib.parse import quote
 import gradio as gr
-from PIL import Image, ImageDraw, ImageFont
 STARTER_HTML = """<!DOCTYPE html>
@@ -83,11 +85,112 @@ class AssetSpec:
     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():
@@ -108,10 +211,7 @@ def parse_assets(raw_roles: str, style_hint: str) -> list[AssetSpec]:
         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
@@ -148,6 +248,16 @@ def write_gallery_image(content: bytes, role: str) -> str:
 def palette_for(text: str) -> list[tuple[int, int, int]]:
     lowered = text.lower()
     themed = [
         (("lava", "fire", "volcano", "hell"), [(139, 28, 18), (239, 84, 34), (42, 18, 16), (255, 198, 71)]),
         (("ice", "snow", "frost", "arctic"), [(75, 151, 191), (187, 235, 255), (24, 63, 96), (240, 252, 255)]),
@@ -189,6 +299,98 @@ def palette_for(text: str) -> list[tuple[int, int, int]]:
     ]
 def draw_background(spec: AssetSpec, rng: random.Random) -> bytes:
     colors = palette_for(spec.prompt)
     image = Image.new("RGBA", (spec.width, spec.height), colors[2] + (255,))
@@ -530,8 +732,10 @@ def local_asset_png(spec: AssetSpec, index: int, run_id: int) -> bytes:
     seed_text = f"{spec.role}|{spec.prompt}|{index}|{run_id}"
     rng = random.Random(seed_text)
     if is_background_spec(spec):
-        return draw_background(spec, rng)
-    return draw_sprite(spec, rng)
 def placeholder_png_bytes(role: str, width: int, height: int) -> bytes:
@@ -549,12 +753,52 @@ def placeholder_png_bytes(role: str, width: int, height: int) -> bytes:
     return out.getvalue()
 def generate_asset(spec: AssetSpec, index: int, run_id: int) -> tuple[str, str, str | None]:
-    png_content = local_asset_png(spec, index, run_id)
     return (
         png_bytes_to_data_uri(png_content),
         write_gallery_image(png_content, spec.role),
-        None,
     )
@@ -696,13 +940,17 @@ def build_preview(html_code: str) -> str:
     )
 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 = []
@@ -717,10 +965,12 @@ def generate_images_and_game(html_code: str, roles: str, style_hint: str):
             errors.append(f"{spec.role}: fallback used ({error})")
     rewritten = embed_assets(html_code, assets, specs)
-    status = f"Generated and embedded {len(specs)} fresh local asset(s). Run {str(run_id)[-6:]}."
     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:
@@ -759,6 +1009,11 @@ with gr.Blocks(title="Image Generator for HTML Games") as demo:
                 language="html",
                 lines=18,
             )
     gr.Markdown("## Game preview")
     preview = gr.HTML(build_preview(STARTER_HTML))
@@ -766,7 +1021,7 @@ with gr.Blocks(title="Image Generator for HTML Games") as demo:
     generate_btn.click(
         fn=generate_images_and_game,
         inputs=[html_input, roles, style],
-        outputs=[output_code, status, gallery, preview],
     )

 import io
 import json
 import math
+import os
 import random
 import re
 import tempfile
 from dataclasses import dataclass
 from html import escape
 from urllib.parse import quote
+from urllib.request import Request, urlopen
 import gradio as gr
+from PIL import Image, ImageDraw, ImageEnhance, ImageFilter, ImageFont
 STARTER_HTML = """<!DOCTYPE html>
     height: int
+@dataclass
+class StylePlan:
+    medium: str
+    palette: str
+    texture: str
+    lighting: str
+    linework: str
+    camera: str
+    tags: tuple[str, ...]
+HF_TOKEN = os.environ.get("HF_TOKEN", "")
+HF_IMAGE_MODEL = os.environ.get("HF_IMAGE_MODEL", "black-forest-labs/FLUX.1-schnell")
+HF_IMAGE_ENDPOINT = f"https://api-inference.huggingface.co/models/{HF_IMAGE_MODEL}"
 def slugify(value: str) -> str:
     value = re.sub(r"[^a-zA-Z0-9]+", "_", value.strip().lower()).strip("_")
     return value or "asset"
+def interpret_style_hint(style_hint: str) -> StylePlan:
+    text = (style_hint or "").lower()
+    tags: list[str] = []
+    def has(*words: str) -> bool:
+        return any(word in text for word in words)
+    if has("watercolor", "ink wash", "gouache", "paper"):
+        tags.append("watercolor")
+        medium = "watercolor game illustration on textured paper"
+        palette = "soft layered washes, muted pigments, gentle color bleed"
+        texture = "visible paper grain, translucent edges, organic brush pooling"
+        lighting = "soft ambient light with low contrast"
+        linework = "loose ink accents, imperfect hand-painted contour lines"
+    elif has("vector", "flat", "icon", "logo"):
+        tags.append("vector")
+        medium = "clean vector game art"
+        palette = "flat separated color fields with bold accent colors"
+        texture = "smooth fills, no painterly grain"
+        lighting = "graphic cel shading with crisp highlights"
+        linework = "thick precise outlines and hard-edged silhouettes"
+    elif has("clay", "claymation", "stop motion", "plasticine"):
+        tags.append("clay")
+        medium = "claymation stop-motion game asset"
+        palette = "chunky colored clay with warm handmade tones"
+        texture = "fingerprint-like clay bumps, rounded sculpted forms"
+        lighting = "soft studio light with small specular highlights"
+        linework = "no ink outlines, shape defined by soft shadows"
+    elif has("oil", "painterly", "impasto", "canvas"):
+        tags.append("oil")
+        medium = "oil-painted fantasy game art"
+        palette = "rich blended colors with deep shadows"
+        texture = "visible bristle strokes and canvas-like texture"
+        lighting = "dramatic directional light"
+        linework = "painted edges instead of hard outlines"
+    elif has("pixel", "8-bit", "16-bit", "retro"):
+        tags.append("pixel")
+        medium = "retro pixel-art game asset"
+        palette = "limited palette with readable color ramps"
+        texture = "sharp square pixels and no anti-aliasing"
+        lighting = "simple two-tone pixel shading"
+        linework = "one-pixel dark outline and blocky silhouette"
+    elif has("anime", "manga"):
+        tags.append("anime")
+        medium = "anime game illustration"
+        palette = "clean saturated colors with expressive accents"
+        texture = "smooth cel-shaded surfaces"
+        lighting = "bright rim light and glossy highlights"
+        linework = "confident manga-style outlines"
+    elif has("cyber", "neon", "synthwave"):
+        tags.append("vector")
+        tags.append("neon")
+        medium = "neon cyberpunk arcade game art"
+        palette = "electric cyan, magenta, violet, and black"
+        texture = "glowing edges, glossy panels, light bloom"
+        lighting = "high contrast neon rim lighting"
+        linework = "hard sci-fi outlines with luminous accents"
+    else:
+        tags.append("illustration")
+        medium = "cohesive 2D game illustration"
+        palette = "distinct theme-driven colors with clear value contrast"
+        texture = "clean readable game asset finish"
+        lighting = "balanced game lighting"
+        linework = "clear readable silhouette and controlled edges"
+    if has("top-down", "top down", "shooter", "rpg", "arena"):
+        camera = "top-down readable game camera"
+    elif has("platformer", "side-scroller", "side scroller"):
+        camera = "side-view platformer camera"
+    else:
+        camera = "game-ready camera angle matching the role"
+    return StylePlan(medium, palette, texture, lighting, linework, camera, tuple(tags))
+def build_asset_prompt(role: str, prompt: str, style_hint: str) -> str:
+    plan = interpret_style_hint(style_hint)
+    return (
+        f"{role} asset: {prompt}. Style interpretation: {plan.medium}; {plan.palette}; "
+        f"{plan.texture}; {plan.lighting}; {plan.linework}; {plan.camera}. "
+        "Transparent background for characters and items unless the role is a background. "
+        "Game asset, readable at small size, no text, no watermark."
+    )
 def parse_assets(raw_roles: str, style_hint: str) -> list[AssetSpec]:
     specs: list[AssetSpec] = []
     for line in raw_roles.splitlines():
         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 = build_asset_prompt(role, prompt, style_hint)
         specs.append(AssetSpec(role=role, prompt=full_prompt, filename=filename, width=width, height=height))
     return specs
 def palette_for(text: str) -> list[tuple[int, int, int]]:
     lowered = text.lower()
+    if any(word in lowered for word in ("watercolor", "ink wash", "gouache", "paper grain")):
+        return [(113, 151, 168), (207, 180, 158), (241, 232, 214), (154, 118, 148)]
+    if any(word in lowered for word in ("clay", "claymation", "stop-motion", "plasticine")):
+        return [(204, 105, 83), (238, 175, 104), (107, 72, 61), (242, 213, 151)]
+    if any(word in lowered for word in ("oil", "painterly", "impasto", "canvas")):
+        return [(98, 45, 122), (213, 154, 70), (38, 28, 42), (230, 212, 156)]
+    if any(word in lowered for word in ("vector", "flat", "logo")):
+        return [(42, 125, 246), (255, 81, 128), (18, 24, 38), (255, 221, 64)]
+    if any(word in lowered for word in ("anime", "manga")):
+        return [(78, 151, 236), (255, 139, 173), (42, 45, 76), (255, 238, 166)]
     themed = [
         (("lava", "fire", "volcano", "hell"), [(139, 28, 18), (239, 84, 34), (42, 18, 16), (255, 198, 71)]),
         (("ice", "snow", "frost", "arctic"), [(75, 151, 191), (187, 235, 255), (24, 63, 96), (240, 252, 255)]),
     ]
+def style_tags_for(prompt: str) -> set[str]:
+    lowered = prompt.lower()
+    tags = set()
+    groups = {
+        "watercolor": ("watercolor", "ink wash", "gouache", "paper grain"),
+        "vector": ("vector", "flat", "logo", "hard-edged", "graphic"),
+        "clay": ("clay", "claymation", "stop-motion", "plasticine", "sculpted"),
+        "oil": ("oil", "painterly", "impasto", "canvas", "bristle"),
+        "pixel": ("pixel", "8-bit", "16-bit", "retro"),
+        "anime": ("anime", "manga", "cel-shaded"),
+        "neon": ("neon", "cyberpunk", "synthwave", "glowing"),
+    }
+    for tag, words in groups.items():
+        if any(word in lowered for word in words):
+            tags.add(tag)
+    return tags
+def apply_style_finish(content: bytes, spec: AssetSpec, rng: random.Random) -> bytes:
+    tags = style_tags_for(spec.prompt)
+    if not tags:
+        return content
+    image = Image.open(io.BytesIO(content)).convert("RGBA")
+    draw = ImageDraw.Draw(image, "RGBA")
+    is_bg = is_background_spec(spec)
+    if "watercolor" in tags:
+        wash = Image.new("RGBA", image.size, (245, 238, 220, 34 if is_bg else 12))
+        image = Image.alpha_composite(image, wash)
+        draw = ImageDraw.Draw(image, "RGBA")
+        for _ in range(60 if is_bg else 18):
+            x = rng.randint(-20, image.width)
+            y = rng.randint(-20, image.height)
+            r = rng.randint(10, 70 if is_bg else 24)
+            color = rng.choice(palette_for(spec.prompt)) + (rng.randint(18, 55),)
+            draw.ellipse((x - r, y - r, x + r, y + r), fill=color)
+        image = image.filter(ImageFilter.GaussianBlur(0.45))
+    if "oil" in tags:
+        for _ in range(120 if is_bg else 34):
+            x = rng.randint(0, image.width)
+            y = rng.randint(0, image.height)
+            length = rng.randint(8, 38 if is_bg else 16)
+            color = rng.choice(palette_for(spec.prompt)) + (rng.randint(75, 145),)
+            draw.line((x, y, x + rng.randint(-length, length), y + rng.randint(-length, length)), fill=color, width=rng.randint(2, 5))
+        image = ImageEnhance.Contrast(image).enhance(1.12)
+    if "clay" in tags:
+        image = ImageEnhance.Color(image).enhance(0.82)
+        image = ImageEnhance.Contrast(image).enhance(1.18)
+        draw = ImageDraw.Draw(image, "RGBA")
+        for _ in range(45 if is_bg else 14):
+            x = rng.randint(0, image.width)
+            y = rng.randint(0, image.height)
+            r = rng.randint(3, 18 if is_bg else 8)
+            draw.ellipse((x - r, y - r, x + r, y + r), outline=(255, 238, 205, rng.randint(25, 70)), width=2)
+        image = image.filter(ImageFilter.SMOOTH_MORE)
+    if "vector" in tags:
+        image = ImageEnhance.Contrast(image).enhance(1.35)
+        image = ImageEnhance.Color(image).enhance(1.25)
+        if not is_bg:
+            alpha = image.getchannel("A")
+            outline = alpha.filter(ImageFilter.MaxFilter(7)).filter(ImageFilter.GaussianBlur(0.2))
+            outlined = Image.new("RGBA", image.size, (12, 16, 28, 255))
+            outlined.putalpha(outline)
+            image = Image.alpha_composite(outlined, image)
+    if "anime" in tags:
+        image = ImageEnhance.Color(image).enhance(1.35)
+        image = ImageEnhance.Contrast(image).enhance(1.18)
+        draw = ImageDraw.Draw(image, "RGBA")
+        for _ in range(8 if is_bg else 4):
+            x = rng.randint(0, image.width)
+            y = rng.randint(0, image.height)
+            draw.line((x, y, x + rng.randint(20, 80), y - rng.randint(10, 50)), fill=(255, 255, 255, 80), width=2)
+    if "neon" in tags:
+        glow = image.filter(ImageFilter.GaussianBlur(4 if is_bg else 3))
+        image = Image.blend(glow, image, 0.72)
+        image = ImageEnhance.Color(image).enhance(1.45)
+    if "pixel" in tags:
+        small = image.resize((max(1, image.width // 4), max(1, image.height // 4)), Image.Resampling.NEAREST)
+        image = small.resize(image.size, Image.Resampling.NEAREST)
+    out = io.BytesIO()
+    image.save(out, format="PNG")
+    return out.getvalue()
 def draw_background(spec: AssetSpec, rng: random.Random) -> bytes:
     colors = palette_for(spec.prompt)
     image = Image.new("RGBA", (spec.width, spec.height), colors[2] + (255,))
     seed_text = f"{spec.role}|{spec.prompt}|{index}|{run_id}"
     rng = random.Random(seed_text)
     if is_background_spec(spec):
+        content = draw_background(spec, rng)
+    else:
+        content = draw_sprite(spec, rng)
+    return apply_style_finish(content, spec, rng)
 def placeholder_png_bytes(role: str, width: int, height: int) -> bytes:
     return out.getvalue()
+def hf_image_png(spec: AssetSpec, index: int, run_id: int) -> bytes | None:
+    if not HF_TOKEN:
+        return None
+    payload = {
+        "inputs": spec.prompt,
+        "parameters": {
+            "width": spec.width,
+            "height": spec.height,
+            "num_inference_steps": 4,
+            "guidance_scale": 0.0,
+            "seed": abs(hash(f"{spec.role}|{spec.prompt}|{index}|{run_id}")) % 2147483647,
+        },
+        "options": {"wait_for_model": True},
+    }
+    request = Request(
+        HF_IMAGE_ENDPOINT,
+        data=json.dumps(payload).encode("utf-8"),
+        headers={
+            "Authorization": f"Bearer {HF_TOKEN}",
+            "Content-Type": "application/json",
+            "Accept": "image/png",
+        },
+        method="POST",
+    )
+    try:
+        with urlopen(request, timeout=90) as response:
+            content_type = response.headers.get("content-type", "")
+            content = response.read()
+        if "image" not in content_type:
+            return None
+        return image_to_png_bytes(content, spec.width, spec.height)
+    except Exception:
+        return None
 def generate_asset(spec: AssetSpec, index: int, run_id: int) -> tuple[str, str, str | None]:
+    png_content = hf_image_png(spec, index, run_id)
+    source = "hf"
+    if png_content is None:
+        png_content = local_asset_png(spec, index, run_id)
+        source = "local style fallback"
     return (
         png_bytes_to_data_uri(png_content),
         write_gallery_image(png_content, spec.role),
+        None if source == "hf" else source,
     )
     )
+def build_prompt_preview(specs: list[AssetSpec]) -> str:
+    return "\n\n".join(f"{spec.role}:\n{spec.prompt}" for spec in specs)
 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.append(f"{spec.role}: fallback used ({error})")
     rewritten = embed_assets(html_code, assets, specs)
+    using_hf = bool(HF_TOKEN)
+    source = f"HF image model `{HF_IMAGE_MODEL}`" if using_hf else "local style fallback"
+    status = f"Generated and embedded {len(specs)} fresh asset(s) using {source}. Run {str(run_id)[-6:]}."
     if errors:
+        status += "\n\n" + "\n".join(f"{item}: no HF image returned, used local style fallback" for item in [e.split(':', 1)[0] for e in errors])
+    return rewritten, status, gallery, build_prompt_preview(specs), build_preview(rewritten)
 with gr.Blocks(title="Image Generator for HTML Games") as demo:
                 language="html",
                 lines=18,
             )
+            prompt_preview = gr.Textbox(
+                label="Interpreted image prompts",
+                lines=8,
+                interactive=False,
+            )
     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, prompt_preview, preview],
     )