Add demo presets gallery to UI

- Collapsible accordion showing 3 example character sheets
- Gallery view with thumbnails for Character, Demo2, Demo3
- Shows input type (Face Only / Full Body) for each demo
- Demo loading functions for future Scene Composer integration

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app.py

@@ -179,6 +179,69 @@ def load_character_preset(preset_id: str) -> Tuple[Optional[Image.Image], str, s
     return None, "", "Auto/Neutral"
 
 
+# =============================================================================
+# Demo Presets Loading
+# =============================================================================
+
+DEMOS_DIR = Path("./demos")
+
+# Demo configuration
+DEMO_PRESETS = [
+    {
+        "id": "demo1",
+        "name": "Character",
+        "folder": "demo1",
+        "input_type": "Full Body",
+        "description": "Full body character with detailed outfit"
+    },
+    {
+        "id": "demo2",
+        "name": "Demo2",
+        "folder": "demo2",
+        "input_type": "Full Body",
+        "description": "Full body character example"
+    },
+    {
+        "id": "demo3",
+        "name": "Demo3",
+        "folder": "demo3",
+        "input_type": "Face Only",
+        "description": "Face-only input with generated body"
+    },
+]
+
+
+def get_demo_thumbnail(demo_id: str) -> Optional[str]:
+    """Get the path to a demo's character sheet thumbnail."""
+    for demo in DEMO_PRESETS:
+        if demo["id"] == demo_id:
+            folder = DEMOS_DIR / demo["folder"]
+            # Find the character sheet file
+            for f in folder.glob("*_character_sheet.png"):
+                return str(f)
+    return None
+
+
+def get_all_demo_thumbnails() -> List[Tuple[str, str]]:
+    """Get all demo thumbnails as (path, caption) tuples for gallery."""
+    thumbnails = []
+    for demo in DEMO_PRESETS:
+        folder = DEMOS_DIR / demo["folder"]
+        for f in folder.glob("*_character_sheet.png"):
+            caption = f"{demo['name']} ({demo['input_type']})"
+            thumbnails.append((str(f), caption))
+            break
+    return thumbnails
+
+
+def load_demo_for_scene_composer(demo_id: str) -> Optional[Image.Image]:
+    """Load a demo character sheet for use in Scene Composer."""
+    thumb_path = get_demo_thumbnail(demo_id)
+    if thumb_path and Path(thumb_path).exists():
+        return Image.open(thumb_path)
+    return None
+
+
 # =============================================================================
 # Character Sheet Metadata
 # =============================================================================
@@ -805,6 +868,36 @@ APP_CSS = """
 .generate-btn-main:hover {
     background: linear-gradient(90deg, #00cc55, #00ee66) !important;
 }
+
+/* Demo presets gallery */
+.demo-gallery {
+    margin: 16px 0;
+}
+
+.demo-gallery .gallery-item {
+    border-radius: 8px;
+    overflow: hidden;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.demo-gallery .gallery-item:hover {
+    transform: scale(1.02);
+    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
+}
+
+.demo-section {
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 20px;
+    border: 1px solid #7c3aed;
+}
+
+.demo-label {
+    color: #a855f7;
+    font-weight: bold;
+    margin-bottom: 8px;
+}
 """
 
 
@@ -823,6 +916,34 @@ def create_ui():
         gr.Markdown("# Character Sheet Pro")
         gr.Markdown("Generate 7-view character turnaround sheets and compose scenes with your characters.")
 
+        # Demo Presets Section
+        with gr.Accordion("Example Outputs (Click to expand)", open=False, elem_classes=["demo-section"]):
+            gr.Markdown("### Demo Character Sheets")
+            gr.Markdown("These examples show what Character Sheet Pro can generate. Click on an image to view it full size.")
+
+            # Load demo thumbnails
+            demo_thumbnails = get_all_demo_thumbnails()
+
+            if demo_thumbnails:
+                demo_gallery = gr.Gallery(
+                    value=demo_thumbnails,
+                    label="Example Outputs",
+                    show_label=False,
+                    columns=3,
+                    rows=1,
+                    height=300,
+                    object_fit="contain",
+                    elem_classes=["demo-gallery"]
+                )
+
+                with gr.Row():
+                    for d in DEMO_PRESETS:
+                        with gr.Column(scale=1, min_width=150):
+                            gr.Markdown(f"**{d['name']}**")
+                            gr.Markdown(f"Input: {d['input_type']}")
+            else:
+                gr.Markdown("*Demo images not available*")
+
         # Shared controls (outside tabs)
         with gr.Row():
             backend_dropdown = gr.Dropdown(