Fix invisible hero title + add text-free atmospheric images to results

- Hero title rendered transparent (background-clip:text didn't paint);
add display:inline-block and a solid color fallback
- Generate one cinematic, explicitly text-free FLUX image per result,
embedded as a banner in the timeline/world fork card via base64 data URI
- Graceful: cards render fine if image generation is unavailable
- README updated to reflect atmospheric (no-text) imagery

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

README.md

@@ -29,9 +29,12 @@ One shared reasoning engine, two lenses on the lives and worlds we didn't live.
 - **Reasoning:** [`Qwen/Qwen2.5-7B-Instruct`](https://huggingface.co/Qwen/Qwen2.5-7B-Instruct)
   — open weights, **well under the 32B cap**, served via the HF Inference API
   (`chat_completion`). Configurable through the `MODEL_NAME_TEXT` env var.
-- **Rendering:** the model returns structured JSON, which the app renders as clean,
-  legible HTML timeline/world cards (no generated-image artifacts — diffusion
-  models can't render readable text, so we render the structure directly).
+- **Rendering:** the model returns structured JSON, rendered as an animated HTML
+  timeline (glowing year-node spine, branch cards, reflection prompts).
+- **Atmosphere:** each result is topped with a **text-free** cinematic image
+  ([`black-forest-labs/FLUX.1-schnell`](https://huggingface.co/black-forest-labs/FLUX.1-schnell)
+  via `text_to_image`). Prompts explicitly forbid lettering, so no garbled "text"
+  artifacts — just mood. Degrades gracefully if image generation is unavailable.
 - **No GPU required to run** — all inference goes through the Inference API, so the
   Space stays light and within Zero GPU limits.
 

app.py

@@ -5,16 +5,19 @@ Uses Qwen2.5-7B-Instruct (via the Hugging Face Inference API) for reasoning, and
 renders results as structured, legible HTML cards.
 """
 
+import base64
 import html
 import json
 import os
-from typing import Optional, Dict
+from io import BytesIO
+from typing import Dict, Optional
 
 import gradio as gr
 
 import config
 import prompts
 from model_client import infer_text, infer_json
+from image_client import get_image_client
 
 
 # ============================================================================
@@ -210,6 +213,49 @@ def generate_world_divergence(scenario: str) -> Dict:
 # HTML Card Rendering
 # ============================================================================
 
+# Strongly suppress any lettering — diffusion models render text as gibberish.
+_NO_TEXT = "no text, no words, no letters, no typography, no captions, no signage"
+
+
+def scene_data_uri(prompt: str) -> str:
+    """Generate a text-free atmospheric image and return it as a base64 data URI.
+
+    Returns "" on any failure so the cards still render without an image.
+    """
+    if not config.ENABLE_IMAGE_GEN:
+        return ""
+    try:
+        img = get_image_client().generate(prompt)
+        if img is None:
+            return ""
+        buf = BytesIO()
+        img.convert("RGB").save(buf, format="JPEG", quality=85)
+        b64 = base64.b64encode(buf.getvalue()).decode("ascii")
+        return f"data:image/jpeg;base64,{b64}"
+    except Exception as e:
+        print(f"[warn]scene image failed: {e}")
+        return ""
+
+
+def timeline_scene_prompt(timeline: Dict, direction: str) -> str:
+    """Build a text-free image prompt for a personal timeline."""
+    mood = "warm golden hopeful luminous sunrise" if direction.lower() == "upward" else "moody cool somber dramatic dusk"
+    title = timeline.get("title", "an alternate life")
+    return (
+        f"Atmospheric cinematic symbolic landscape representing the theme '{title}', "
+        f"{mood}, dreamlike concept art, soft volumetric light, painterly, {_NO_TEXT}"
+    )
+
+
+def world_scene_prompt(world: Dict) -> str:
+    """Build a text-free image prompt for an alternate world."""
+    title = world.get("title", "an alternate world")
+    return (
+        f"Epic cinematic establishing shot of an alternate world: '{title}', "
+        f"atmospheric concept art, dramatic lighting, highly detailed, {_NO_TEXT}"
+    )
+
+
 def _list_items(items) -> str:
     """Render a list of strings as escaped <li> elements."""
     return "".join(f"<li>{html.escape(str(i))}</li>" for i in items if str(i).strip())
@@ -228,15 +274,17 @@ def _check_items(items) -> str:
     return "".join(f"<li>{html.escape(str(i))}</li>" for i in items if str(i).strip())
 
 
-def render_timeline_html(timeline: Dict, direction: str) -> str:
+def render_timeline_html(timeline: Dict, direction: str, image_uri: str = "") -> str:
     """Render a personal counterfactual timeline as structured cards."""
     is_up = direction.lower() == "upward"
     arrow = "↑" if is_up else "↓"
     label = "The path where it went better" if is_up else "The path where it went harder"
     ret = timeline.get("return", {}) or {}
+    img = f"<img class='rd-hero-img' src='{image_uri}' alt=''>" if image_uri else ""
     return f"""
 <div class="rd-stack">
   <div class="rd-card rd-fork">
+    {img}
     <div class="rd-badge">{arrow}</div>
     <div class="rd-eyebrow">{label}</div>
     <h2 class="rd-title">{html.escape(timeline.get('title', 'Alternate Timeline'))}</h2>
@@ -266,11 +314,13 @@ def render_timeline_html(timeline: Dict, direction: str) -> str:
 """
 
 
-def render_world_html(world: Dict) -> str:
+def render_world_html(world: Dict, image_uri: str = "") -> str:
     """Render an alternate-world divergence as structured cards."""
+    img = f"<img class='rd-hero-img' src='{image_uri}' alt=''>" if image_uri else ""
     return f"""
 <div class="rd-stack">
   <div class="rd-card rd-fork">
+    {img}
     <div class="rd-badge">🌍</div>
     <div class="rd-eyebrow">Year {html.escape(str(world.get('year_divergence', '')))} · Point of divergence</div>
     <h2 class="rd-title">{html.escape(world.get('title', 'Alternate World'))}</h2>
@@ -332,14 +382,17 @@ body, .gradio-container {
 
 /* Headers */
 .hero-title {
+  display: inline-block;
   font-size: 3.5rem;
   font-weight: 800;
+  color: var(--accent-blue); /* fallback if background-clip:text is unsupported */
   background: linear-gradient(110deg, var(--accent-blue), var(--accent-purple), #F0ABFC, var(--accent-blue));
   background-size: 250% auto;
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   letter-spacing: -1px;
+  margin-top: 0.5rem;
   animation: rdHero 7s ease infinite;
 }
 @keyframes rdHero {
@@ -487,6 +540,13 @@ body, .gradio-container {
     rgba(139, 92, 246, 0.06);
 }
 
+.rd-hero-img {
+  display: block; width: 100%; height: 220px; object-fit: cover;
+  border-radius: 14px; margin: -2px 0 16px;
+  border: 1px solid var(--border);
+  box-shadow: 0 8px 30px rgba(5, 8, 22, 0.55);
+}
+
 .rd-badge {
   display: inline-flex; align-items: center; justify-content: center;
   width: 46px; height: 46px; border-radius: 50%;
@@ -665,7 +725,9 @@ def handle_choose_path(direction: str, story: str, analysis: Dict):
         return gr.update(value=msg, visible=True), gr.update(visible=False)
 
     timeline = generate_timeline(story, analysis or FALLBACK_ANALYSIS, direction)
-    return gr.update(value=render_timeline_html(timeline, direction), visible=True), gr.update(visible=True)
+    image_uri = scene_data_uri(timeline_scene_prompt(timeline, direction))
+    html_out = render_timeline_html(timeline, direction, image_uri)
+    return gr.update(value=html_out, visible=True), gr.update(visible=True)
 
 
 def handle_world_divergence(scenario: str):
@@ -674,7 +736,8 @@ def handle_world_divergence(scenario: str):
         return "<div class='rd-card'>Describe a divergence point in at least 20 characters.</div>"
 
     world = generate_world_divergence(scenario)
-    return render_world_html(world)
+    image_uri = scene_data_uri(world_scene_prompt(world))
+    return render_world_html(world, image_uri)
 
 
 # Wire events (re-enter the Blocks context so handlers attach correctly)