Spaces:

prashantAI
/

reality-divergence

Sleeping

prashantAI Claude Opus 4.8 (1M context) commited on Jun 14

Commit

ffb4f53

1 Parent(s): f8c1b4a

Replace gibberish image artifacts with legible HTML timeline/world cards

Diffusion models can't render readable text, so the newspaper/document
artifacts came out as garbled noise. Both tabs now render the structured
JSON the model already returns as clean HTML cards (ripples, branches,
strengths, reflection question). Drops image generation from the UI;
image_client.py retained but unused.

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

Files changed (3) hide show

README.md +3 -2
STATUS.md +4 -0
app.py +162 -158

README.md CHANGED Viewed

@@ -29,8 +29,9 @@ 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.
-- **Artifacts:** [`black-forest-labs/FLUX.1-schnell`](https://huggingface.co/black-forest-labs/FLUX.1-schnell)
-  via the HF Inference API (`text_to_image`), with SDXL as fallback.
 - **No GPU required to run** — all inference goes through the Inference API, so the
   Space stays light and within Zero GPU limits.

 - **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).
 - **No GPU required to run** — all inference goes through the Inference API, so the
   Space stays light and within Zero GPU limits.

STATUS.md CHANGED Viewed

@@ -22,6 +22,10 @@ _Hugging Face "Build Small" hackathon submission. Last updated: 2026-06-14._
 2. **Gradio 5 (pinned `>=5,<6`).** The original Gradio 4.44 pin broke against the
    current dependency stack; Gradio 5.50 is verified working. README `sdk_version`
    pinned to `5.50.0` to match.
 ## Architecture

 2. **Gradio 5 (pinned `>=5,<6`).** The original Gradio 4.44 pin broke against the
    current dependency stack; Gradio 5.50 is verified working. README `sdk_version`
    pinned to `5.50.0` to match.
+3. **Dropped generated-image artifacts; render HTML cards instead.** Diffusion
+   models render gibberish "text" inside newspaper/document artifacts, which looked
+   broken. Both tabs now render the structured JSON the model already returns as
+   legible HTML timeline/world cards. `image_client.py` is retained but unused.
 ## Architecture

app.py CHANGED Viewed

@@ -1,23 +1,20 @@
 """
 Reality Divergence + Elsewhere
 AI-native platform for exploring counterfactual personal and historical timelines.
-Uses Qwen2.5-7B-Instruct for reasoning + FLUX.1-schnell for artifact generation,
-all served through the Hugging Face Inference API.
 """
 import json
 import os
-from typing import Tuple, Optional, List, Dict, Any
-from datetime import datetime
-from io import BytesIO
 import gradio as gr
-from PIL import Image
 import config
 import prompts
 from model_client import infer_text, infer_json
-from image_client import generate_artifact, get_image_client
 # ============================================================================
@@ -210,36 +207,83 @@ def generate_world_divergence(scenario: str) -> Dict:
 # ============================================================================
-# Artifact Generation
 # ============================================================================
-def generate_artifacts(timeline_data: Dict, num_artifacts: int = 3) -> List[Optional[Image.Image]]:
-    """Generate 3-6 artifact images for timeline."""
-    artifacts = []
-    try:
-        # Newspaper
-        headline = timeline_data.get("title", "Alternate Reality")
-        artifacts.append(generate_artifact("newspaper", headline=headline, subheading=timeline_data.get("divergence", "")))
-    except Exception as e:
-        print(f"[warn]Newspaper artifact failed: {e}")
-        artifacts.append(None)
-    try:
-        # Product/Ad
-        artifacts.append(generate_artifact("product", product="Alternate World Artifact", context=timeline_data.get("divergence", "")))
-    except Exception as e:
-        print(f"[warn]Product artifact failed: {e}")
-        artifacts.append(None)
-    try:
-        # Document
-        artifacts.append(generate_artifact("document", doc_type="diary entry", context=timeline_data.get("divergence", "")))
-    except Exception as e:
-        print(f"[warn]Document artifact failed: {e}")
-        artifacts.append(None)
-    return [a for a in artifacts if a is not None]
 # ============================================================================
@@ -378,6 +422,61 @@ body, .gradio-container {
     grid-template-columns: 1fr;
   }
 }
 """
@@ -412,29 +511,19 @@ with gr.Blocks(css=CSS, title="Reality Divergence") as demo:
                 )
                 submit_btn = gr.Button("Reflect", variant="primary", size="lg")
-            # Output: parallel layout
             with gr.Group():
                 with gr.Row():
-                    # Left: narrative
-                    with gr.Column(scale=1):
-                        gr.Markdown("#### Your Reflection")
-                        mirror_output = gr.Markdown(FALLBACK_MIRROR, elem_classes=["timeline-card"])
-                        # Path selection
-                        gr.Markdown("#### Choose a Path")
-                        with gr.Row():
-                            upward_btn = gr.Button("↑ What if it went better?", variant="primary")
-                            downward_btn = gr.Button("↓ What if it went worse?")
-                    # Right: potential artifacts
-                    with gr.Column(scale=1):
-                        gr.Markdown("#### Artifacts from Alternate Lives")
-                        artifact_1 = gr.Image(label="Artifact 1", type="pil", scale=1)
-                        artifact_2 = gr.Image(label="Artifact 2", type="pil", scale=1)
-                        artifact_3 = gr.Image(label="Artifact 3", type="pil", scale=1)
-                # Full timeline result (hidden until path chosen)
-                timeline_result = gr.Markdown(visible=False, elem_classes=["timeline-card"])
                 return_button = gr.Button("↩ Return to Your Actual Life", visible=False, variant="primary")
         # ========== REALITY DIVERGENCE TAB ==========
@@ -454,26 +543,10 @@ with gr.Blocks(css=CSS, title="Reality Divergence") as demo:
                 )
                 world_submit = gr.Button("Generate World", variant="primary", size="lg")
-            # Output: parallel layout
             with gr.Group():
-                with gr.Row():
-                    # Left: world narrative
-                    with gr.Column(scale=1):
-                        gr.Markdown("#### The Alternate World")
-                        world_title = gr.Markdown("", elem_classes=["world-card"])
-                        world_divergence = gr.Markdown("", elem_classes=["world-card"])
-                        world_ripples = gr.Markdown("", elem_classes=["world-card"])
-                        world_outcome = gr.Markdown("", elem_classes=["world-card"])
-                    # Right: world artifacts (museum)
-                    with gr.Column(scale=1):
-                        gr.Markdown("#### Museum Artifacts")
-                        with gr.Row():
-                            world_artifact_1 = gr.Image(label="Economic Impact", type="pil", scale=1)
-                            world_artifact_2 = gr.Image(label="Cultural Shift", type="pil", scale=1)
-                        with gr.Row():
-                            world_artifact_3 = gr.Image(label="Technology", type="pil", scale=1)
-                            world_artifact_4 = gr.Image(label="Daily Life", type="pil", scale=1)
 # ============================================================================
@@ -483,13 +556,13 @@ with gr.Blocks(css=CSS, title="Reality Divergence") as demo:
 def handle_submit_story(story: str):
     """Process personal story submission.
-    Returns: (mirror_md, artifact_1, artifact_2, artifact_3, story_state, analysis_state)
     """
     if not story or len(story.strip()) < config.MIN_STORY_LENGTH:
-        return "Please share at least 100 characters.", None, None, None, "", None
     if len(story) > config.MAX_STORY_LENGTH:
-        return "Please keep under 5000 characters.", None, None, None, "", None
     # Analyze
     analysis = analyze_story(story)
@@ -502,100 +575,31 @@ def handle_submit_story(story: str):
             "- US: 988 (Suicide & Crisis Lifeline)\n"
             "- Or contact local emergency services."
         )
-        return safety_msg, None, None, None, "", None
     # Mirror
     mirror = generate_mirror(story, analysis)
-    # Artifacts (gracefully handle if image gen fails)
-    try:
-        artifacts = generate_artifacts({"title": "Your Alternate Life", "divergence": story})
-        artifact_imgs = [artifacts[i] if i < len(artifacts) else None for i in range(3)]
-    except Exception as e:
-        print(f"[warn]Artifact generation failed: {e}")
-        artifact_imgs = [None, None, None]
-    return (
-        mirror,
-        artifact_imgs[0],
-        artifact_imgs[1],
-        artifact_imgs[2],
-        story,
-        analysis,
-    )
 def handle_choose_path(direction: str, story: str, analysis: Dict):
     """Generate timeline for chosen path."""
     if not story or len(story.strip()) < config.MIN_STORY_LENGTH:
-        return gr.update(
-            value="Please share your moment above and click **Reflect** first.",
-            visible=True,
-        ), gr.update(visible=False)
     timeline = generate_timeline(story, analysis or FALLBACK_ANALYSIS, direction)
-    result_md = f"""
-### {direction.upper()} PATH: {timeline.get('title', 'Alternate Timeline')}
-**Divergence Point:** {timeline.get('divergence', '')}
-**Ripples:**
-"""
-    for ripple in timeline.get('ripples', []):
-        result_md += f"\n- {ripple}"
-    result_md += f"\n\n**Who You Might Have Become:** {timeline.get('the_you', '')}"
-    result_md += f"\n\n**The Return**\n\n{timeline.get('return', {}).get('opening', '')}"
-    result_md += f"\n\n**Strengths in Your Actual Timeline:**\n"
-    for strength in timeline.get('return', {}).get('strengths', []):
-        result_md += f"\n- {strength}"
-    result_md += f"\n\n**Lesson:** {timeline.get('return', {}).get('lesson', '')}"
-    result_md += f"\n\n**Reflection Question:** {timeline.get('return', {}).get('reflection_question', '')}"
-    result_md += f"\n\n> *\"{timeline.get('quote', '')}\"*"
-    return gr.update(value=result_md, visible=True), gr.update(visible=True)
 def handle_world_divergence(scenario: str):
-    """Generate alternate world."""
     if not scenario or len(scenario.strip()) < 20:
-        return "", "", "", "", None, None, None, None
     world = generate_world_divergence(scenario)
-    title_md = f"## {world.get('title', 'Alternate World')}"
-    divergence_md = f"**Year {world.get('year_divergence', 'N/A')}:** {world.get('divergence_point', '')}"
-    ripples_md = "**Ripples:**\n"
-    for ripple in world.get('ripples', []):
-        ripples_md += f"\n- {ripple}"
-    outcome_md = f"**World Outcome:** {world.get('world_outcome', '')}\n\n"
-    outcome_md += f"*Economy:* {world.get('economy', '')}\n\n"
-    outcome_md += f"*Culture:* {world.get('culture', '')}\n\n"
-    outcome_md += f"*Technology:* {world.get('technology', '')}"
-    # Artifacts
-    try:
-        artifacts = generate_artifacts(world)
-        artifact_imgs = [artifacts[i] if i < len(artifacts) else None for i in range(4)]
-    except Exception as e:
-        print(f"[warn]Artifact generation failed: {e}")
-        artifact_imgs = [None, None, None, None]
-    return (
-        title_md,
-        divergence_md,
-        ripples_md,
-        outcome_md,
-        artifact_imgs[0] if len(artifact_imgs) > 0 else None,
-        artifact_imgs[1] if len(artifact_imgs) > 1 else None,
-        artifact_imgs[2] if len(artifact_imgs) > 2 else None,
-        artifact_imgs[3] if len(artifact_imgs) > 3 else None,
-    )
 # Wire events (re-enter the Blocks context so handlers attach correctly)
@@ -603,7 +607,7 @@ with demo:
     submit_btn.click(
         fn=handle_submit_story,
         inputs=[story_input],
-        outputs=[mirror_output, artifact_1, artifact_2, artifact_3, story_state, analysis_state]
     )
     upward_btn.click(
@@ -626,7 +630,7 @@ with demo:
     world_submit.click(
         fn=handle_world_divergence,
         inputs=[world_input],
-        outputs=[world_title, world_divergence, world_ripples, world_outcome, world_artifact_1, world_artifact_2, world_artifact_3, world_artifact_4]
     )

 """
 Reality Divergence + Elsewhere
 AI-native platform for exploring counterfactual personal and historical timelines.
+Uses Qwen2.5-7B-Instruct (via the Hugging Face Inference API) for reasoning, and
+renders results as structured, legible HTML cards.
 """
+import html
 import json
 import os
+from typing import Optional, Dict
 import gradio as gr
 import config
 import prompts
 from model_client import infer_text, infer_json
 # ============================================================================
 # ============================================================================
+# HTML Card Rendering
 # ============================================================================
+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())
+def render_timeline_html(timeline: Dict, direction: 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 {}
+    return f"""
+<div class="rd-stack">
+  <div class="rd-card rd-fork">
+    <div class="rd-eyebrow">{arrow} {label}</div>
+    <h2 class="rd-title">{html.escape(timeline.get('title', 'Alternate Timeline'))}</h2>
+    <p class="rd-lead">{html.escape(timeline.get('divergence', ''))}</p>
+  </div>
+  <div class="rd-card">
+    <div class="rd-eyebrow">Ripples through the years</div>
+    <ul class="rd-list">{_list_items(timeline.get('ripples', []))}</ul>
+  </div>
+  <div class="rd-card">
+    <div class="rd-eyebrow">Who you might have become</div>
+    <p>{html.escape(timeline.get('the_you', ''))}</p>
+  </div>
+  <div class="rd-card rd-return">
+    <div class="rd-eyebrow">↩ Returning to your actual life</div>
+    <p>{html.escape(ret.get('opening', ''))}</p>
+    <div class="rd-sublabel">Strengths you actually built</div>
+    <ul class="rd-list">{_list_items(ret.get('strengths', []))}</ul>
+    <p class="rd-lesson"><strong>Lesson:</strong> {html.escape(ret.get('lesson', ''))}</p>
+  </div>
+  <div class="rd-card rd-question">
+    <div class="rd-eyebrow">A question to sit with</div>
+    <p class="rd-q">{html.escape(ret.get('reflection_question', ''))}</p>
+  </div>
+  <blockquote class="rd-quote">“{html.escape(timeline.get('quote', ''))}”</blockquote>
+</div>
+"""
+def render_world_html(world: Dict) -> str:
+    """Render an alternate-world divergence as structured cards."""
+    return f"""
+<div class="rd-stack">
+  <div class="rd-card rd-fork">
+    <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>
+    <p class="rd-lead">{html.escape(world.get('divergence_point', ''))}</p>
+  </div>
+  <div class="rd-card">
+    <div class="rd-eyebrow">Ripples</div>
+    <ul class="rd-list">{_list_items(world.get('ripples', []))}</ul>
+  </div>
+  <div class="rd-card">
+    <div class="rd-eyebrow">How this world evolved</div>
+    <p>{html.escape(world.get('world_outcome', ''))}</p>
+  </div>
+  <div class="rd-grid">
+    <div class="rd-card"><div class="rd-sublabel">Economy</div><p>{html.escape(world.get('economy', ''))}</p></div>
+    <div class="rd-card"><div class="rd-sublabel">Culture</div><p>{html.escape(world.get('culture', ''))}</p></div>
+    <div class="rd-card"><div class="rd-sublabel">Technology</div><p>{html.escape(world.get('technology', ''))}</p></div>
+  </div>
+  <div class="rd-grid-2">
+    <div class="rd-card rd-winners"><div class="rd-sublabel">Who thrived</div><ul class="rd-list">{_list_items(world.get('winners', []))}</ul></div>
+    <div class="rd-card rd-losers"><div class="rd-sublabel">Who struggled</div><ul class="rd-list">{_list_items(world.get('losers', []))}</ul></div>
+  </div>
+  <div class="rd-card rd-question">
+    <div class="rd-eyebrow">What it teaches us</div>
+    <p class="rd-q">{html.escape(world.get('reflection', ''))}</p>
+  </div>
+</div>
+"""
 # ============================================================================
     grid-template-columns: 1fr;
   }
 }
+/* Structured result cards (timeline / world) */
+.rd-stack { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem; }
+.rd-card {
+  background: linear-gradient(180deg, rgba(17, 24, 39, 0.6), rgba(11, 16, 32, 0.35));
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 20px 24px;
+}
+.rd-fork { border-left: 3px solid var(--accent-blue); }
+.rd-return { border-left: 3px solid var(--accent-purple); }
+.rd-question {
+  border: 1px solid var(--accent-purple);
+  background: rgba(139, 92, 246, 0.08);
+}
+.rd-eyebrow {
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--accent-blue);
+  margin-bottom: 0.5rem;
+}
+.rd-sublabel {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin: 0.75rem 0 0.35rem;
+}
+.rd-title { font-size: 1.6rem; font-weight: 800; margin: 0.2rem 0 0.5rem; color: var(--text-primary); }
+.rd-lead { color: var(--text-secondary); font-size: 1.05rem; }
+.rd-card p { color: var(--text-primary); line-height: 1.6; margin: 0.25rem 0; }
+.rd-list { margin: 0.25rem 0 0; padding-left: 1.2rem; }
+.rd-list li { color: var(--text-primary); line-height: 1.6; margin-bottom: 0.35rem; }
+.rd-lesson { margin-top: 0.75rem; color: var(--text-secondary); }
+.rd-q { font-size: 1.1rem; font-style: italic; color: var(--text-primary); }
+.rd-quote {
+  border-left: 3px solid var(--accent-blue);
+  margin: 0.25rem 0 0;
+  padding: 0.5rem 0 0.5rem 1rem;
+  font-size: 1.2rem;
+  font-style: italic;
+  color: var(--text-primary);
+}
+.rd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
+.rd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+.rd-winners { border-left: 3px solid #34D399; }
+.rd-losers { border-left: 3px solid #F87171; }
+@media (max-width: 1024px) {
+  .rd-grid, .rd-grid-2 { grid-template-columns: 1fr; }
+}
 """
                 )
                 submit_btn = gr.Button("Reflect", variant="primary", size="lg")
+            # Output
             with gr.Group():
+                gr.Markdown("#### Your Reflection")
+                mirror_output = gr.Markdown(FALLBACK_MIRROR, elem_classes=["timeline-card"])
+                # Path selection
+                gr.Markdown("#### Choose a Path")
                 with gr.Row():
+                    upward_btn = gr.Button("↑ What if it went better?", variant="primary")
+                    downward_btn = gr.Button("↓ What if it went worse?")
+                # Full timeline result, rendered as cards (hidden until a path is chosen)
+                timeline_result = gr.HTML(visible=False)
                 return_button = gr.Button("↩ Return to Your Actual Life", visible=False, variant="primary")
         # ========== REALITY DIVERGENCE TAB ==========
                 )
                 world_submit = gr.Button("Generate World", variant="primary", size="lg")
+            # Output: structured world cards
             with gr.Group():
+                gr.Markdown("#### The Alternate World")
+                world_output = gr.HTML("")
 # ============================================================================
 def handle_submit_story(story: str):
     """Process personal story submission.
+    Returns: (mirror_md, story_state, analysis_state)
     """
     if not story or len(story.strip()) < config.MIN_STORY_LENGTH:
+        return "Please share at least 100 characters.", "", None
     if len(story) > config.MAX_STORY_LENGTH:
+        return "Please keep under 5000 characters.", "", None
     # Analyze
     analysis = analyze_story(story)
             "- US: 988 (Suicide & Crisis Lifeline)\n"
             "- Or contact local emergency services."
         )
+        return safety_msg, "", None
     # Mirror
     mirror = generate_mirror(story, analysis)
+    return mirror, story, analysis
 def handle_choose_path(direction: str, story: str, analysis: Dict):
     """Generate timeline for chosen path."""
     if not story or len(story.strip()) < config.MIN_STORY_LENGTH:
+        msg = "<div class='rd-card'>Please share your moment above and click <strong>Reflect</strong> first.</div>"
+        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)
 def handle_world_divergence(scenario: str):
+    """Generate alternate world, rendered as structured cards."""
     if not scenario or len(scenario.strip()) < 20:
+        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)
 # Wire events (re-enter the Blocks context so handlers attach correctly)
     submit_btn.click(
         fn=handle_submit_story,
         inputs=[story_input],
+        outputs=[mirror_output, story_state, analysis_state]
     )
     upward_btn.click(
     world_submit.click(
         fn=handle_world_divergence,
         inputs=[world_input],
+        outputs=[world_output]
     )