update

client/src/layouts/utils.js

@@ -12,8 +12,8 @@ export function groupSegmentsIntoLayouts(segments) {
   let currentPanelIndex = 0;
 
   segments.forEach((segment) => {
-    // Si c'est le premier segment, créer un layout COVER
-    if (segment.is_first_step) {
+    // Si c'est le premier segment ou le dernier (mort/victoire), créer un layout COVER
+    if (segment.is_first_step || segment.is_last_step) {
       currentLayout = { type: "COVER", segments: [segment] };
       layouts.push(currentLayout);
       currentPanelIndex = segment.images?.length || 0;
@@ -53,20 +53,16 @@ export function groupSegmentsIntoLayouts(segments) {
 export function getNextPanelDimensions(segments) {
   const nonChoiceSegments = segments.filter((segment) => !segment.isChoice);
 
-  // Si c'est le premier segment, utiliser le format COVER
+  // Si c'est le premier segment ou le dernier (mort/victoire), utiliser le format COVER
   if (
     nonChoiceSegments.length === 0 ||
-    (nonChoiceSegments.length === 1 && nonChoiceSegments[0].is_first_step)
+    (nonChoiceSegments.length === 1 && nonChoiceSegments[0].is_first_step) ||
+    (nonChoiceSegments.length > 0 &&
+      nonChoiceSegments[nonChoiceSegments.length - 1].is_last_step)
   ) {
     return LAYOUTS.COVER.panels[0];
   }
 
-  // Si c'est le dernier segment et c'est une mort ou victoire, utiliser le format COVER
-  const lastSegment = nonChoiceSegments[nonChoiceSegments.length - 1];
-  if (lastSegment.is_last_step) {
-    return LAYOUTS.COVER.panels[0];
-  }
-
   // Pour les segments du milieu, déterminer le layout et la position dans ce layout
   const layouts = groupSegmentsIntoLayouts(nonChoiceSegments.slice(0, -1));
   const lastLayout = layouts[layouts.length - 1];

server/api_clients.py

@@ -87,6 +87,7 @@ class FluxClient:
             print(f"Request body: {prompt[:100]}...")
 
             prefix =  "François Schuiten comic book artist."
+            "Bubbles, text, caption. Do not include bright or clean clothing."
             
             
             session = await self._get_session()

server/game/game_logic.py

@@ -4,6 +4,8 @@ from langchain.output_parsers import PydanticOutputParser, OutputFixingParser
 from langchain.prompts import ChatPromptTemplate, HumanMessagePromptTemplate, SystemMessagePromptTemplate
 import os
 import asyncio
+from .prompts.system_prompt import SYSTEM_PROMPT
+from .prompts.cinematic_system_prompt import CINEMATIC_SYSTEM_PROMPT
 
 # Import local modules
 if os.getenv("DOCKER_ENV"):
@@ -39,6 +41,9 @@ class StoryLLMResponse(BaseModel):
     is_victory: bool = Field(description="Whether this segment ends in Sarah's victory", default=False)
     radiation_increase: int = Field(description="How much radiation this segment adds (0-3)", ge=0, le=3, default=1)
     image_prompts: List[str] = Field(description="List of 1 to 3 comic panel descriptions that illustrate the key moments of the scene", min_items=1, max_items=3)
+    is_last_step: bool = Field(description="Whether this is the last step (victory or death)", default=False)
+
+
 
 # Prompt templates
 class StoryGenerator:
@@ -54,169 +59,9 @@ class StoryGenerator:
         self.prompt = self._create_prompt()
         
     def _create_prompt(self) -> ChatPromptTemplate:
-        system_template = """You are narrating a brutal dystopian story where **Sarah** must survive in a radioactive wasteland. This is a comic book story.
-
-IMPORTANT: Each story segment MUST be unique and advance the plot. Never repeat the same descriptions or situations.
-
-STORY PROGRESSION:
-- story_beat 0: Introduction setting up the horror atmosphere
-- story_beat 1-2: Early exploration and discovery of immediate threats
-- story_beat 3-4: Complications and increasing danger
-- story_beat 5+: Climactic situations leading to potential victory
-
-RADIATION SYSTEM:
-You must set a radiation_increase value for each segment based on the environment and situation:
-- 0: Completely safe area (rare, only in bunkers or heavily shielded areas)
-- 1: Standard exposure (most common, for regular exploration)
-- 2: Elevated risk (when near radiation sources or in contaminated areas)
-- 3: Critical exposure (very rare, only in extremely dangerous situations)
-
-IMPORTANT RULES FOR RADIATION:
-- DO NOT mention radiation values in the choices
-- Most segments should have radiation_increase = 1
-- Use 2 or 3 only in specific dangerous areas
-- Use 0 only in safe shelters
-- Current radiation level: {radiation_level}/10
-- Death occurs automatically when radiation reaches 10
-
-Core story elements:
-- **Sarah** is deeply traumatized by the AI uprising that killed most of humanity
-- She abandoned her sister during the **Great Collapse**, leaving her to die
-- She's on a mission of redemption in this hostile world
-- The radiation is an invisible, constant threat
-- The environment is full of dangers (raiders, AI, traps)
-- Focus on survival horror and tension
-
-IMPORTANT FORMATTING RULES:
-- Use bold formatting (like **this**) ONLY for:
-  * Character names (e.g., **Sarah**, **John**)
-  * Location names (e.g., **Vault 15**, **New Eden**)
-  * Major historical events (e.g., **Great Collapse**)
-- Do NOT use bold for common nouns or regular descriptions
-
-Each response MUST contain:
-1. A detailed story segment that:
-   - Advances the plot based on previous choices
-   - Never repeats previous descriptions
-   - Shows immediate dangers
-   - Details **Sarah**'s physical state (based on radiation_level)
-   - Reflects her mental state and previous choices
-   - Uses bold ONLY for proper nouns and locations
-
-2. Exactly two VERY CONCISE choices (max 10 words each) that:
-   - Are direct and brief
-   - Never mention radiation numbers
-   - Feel meaningful and different from previous choices
-   - Present different risk levels
-   - Use bold ONLY for location names
-
-3. Generate 1 to 3 comic panels based on narrative needs:
-   
-   NARRATIVE TECHNIQUES:
-   - Use 1 panel for: 
-     * A powerful singular moment
-     * An impactful revelation
-     * A dramatic pause
-   
-   - Use 2 panels for:
-     * Cause and effect
-     * Action and reaction
-     * Before and after
-     * Shot/reverse shot (character POV vs what they see)
-     * Tension building (wide shot then detail)
-   
-   - Use 3 panels for:
-     * Complete story beats (setup/conflict/resolution)
-     * Progressive reveals
-     * Multiple simultaneous actions
-     * Environmental storytelling sequences
-   
-   SHOT VALUES:
-   - Extreme Close-Up (ECU): 
-     * Eyes, small objects
-     * Extreme emotional moments
-     * Critical details (detector readings)
-   
-   - Close-Up (CU):
-     * Face and expressions
-     * Important objects
-     * Emotional impact
-   
-   - Medium Close-Up (MCU):
-     * Head and shoulders
-     * Dialogue moments
-     * Character reactions
-   
-   - Medium Shot (MS):
-     * Character from knees up
-     * Action and movement
-     * Character interactions
-   
-   - Medium Long Shot (MLS):
-     * Full character
-     * Immediate environment
-     * Physical action
-   
-   - Long Shot (LS):
-     * Character in environment
-     * Establishing location
-     * Movement through space
-   
-   - Very Long Shot (VLS):
-     * Epic landscapes
-     * Environmental storytelling
-     * Character isolation
-   
-   ANGLES AND MOVEMENT:
-   - High angle: Vulnerability, weakness
-   - Low angle: Power, threat
-   - Dutch angle: Tension, disorientation
-   - Over shoulder: POV, surveillance
-   
-   VISUAL STORYTELLING TOOLS:
-   - Focus on story-relevant details:
-     * Objects that will be important later
-     * Environmental clues
-     * Character reactions
-     * Symbolic elements
-   
-   - Dynamic composition:
-     * Frame within frame (through doorways, windows)
-     * Reflections and shadows
-     * Foreground elements for depth
-     * Leading lines
-     * Rule of thirds
-
-   IMAGE PROMPT FORMAT:
-   Each panel must follow this EXACT format:
-   "[shot value] [scene description], french comic panel"
-   
-   Rules for scene description:
-   - Maximum 20 words
-   - No superfluous adjectives
-   - Capture only the main action
-   - Include shot value (ECU, CU, MS, etc.)
-   - Focus on dramatic moments
-   
-   EXAMPLE SEQUENCES:
-   
-   Single powerful moment:
-   - "ECU radiation detector needle swings violently into pulsing red danger zone"
-   
-   Shot/reverse shot:
-   - "MS Sarah crouches tensely behind crumbling concrete wall peering through broken window"
-   - "POV through shattered glass raiders gather around burning barrel in snow-covered ruins"
-   
-   Progressive reveal:
-   - "VLS massive steel bunker door stands half-open in barren windswept wasteland"
-   - "CU fresh bloody handprints smear down rusted metal wall beside flickering emergency light"
-   - "dutch-angle LS twisted corpse sprawled among scattered medical supplies casting long shadows"
-   
-   Environmental storytelling:
-   - "LS Sarah's silhouette dwarfed by towering ruins against blood-red sunset sky"
-   - "MCU radiation detector screen flickers warning through heavy falling radioactive snow"
-   - "ECU Sarah's trembling hands clutch last remaining water bottle in dim bunker light"
-
+        system_template = """
+        {SYSTEM_PROMPT}
+        {ART_SYSTEM_PROMPT}
 {format_instructions}"""
 
         human_template = """Current story beat: {story_beat}
@@ -253,7 +98,9 @@ Generate the next story segment and choices. Make sure it advances the plot and
             story_beat=game_state.story_beat,
             radiation_level=game_state.radiation_level,
             previous_choice=previous_choice,
-            story_history=story_history
+            story_history=story_history,
+            SYSTEM_PROMPT=SYSTEM_PROMPT,
+            ART_SYSTEM_PROMPT=CINEMATIC_SYSTEM_PROMPT
         )
         
         max_retries = 3
@@ -265,6 +112,15 @@ Generate the next story segment and choices. Make sure it advances the plot and
                 try:
                     # Try to parse with standard parser first
                     segment = self.parser.parse(response_content)
+                    
+                    # Check if this is a victory or death (radiation) step
+                    is_death = game_state.radiation_level + segment.radiation_increase >= MAX_RADIATION
+                    if is_death or segment.is_victory:
+                        segment.is_last_step = True
+                        # Force only one image prompt for victory/death scenes
+                        if len(segment.image_prompts) > 1:
+                            segment.image_prompts = [segment.image_prompts[0]]
+                    
                 except Exception as parse_error:
                     print(f"Error parsing response: {str(parse_error)}")
                     print("Attempting to fix output...")
@@ -283,6 +139,7 @@ Generate the next story segment and choices. Make sure it advances the plot and
                 # If we get here, parsing succeeded
                 if game_state.story_beat == 0:
                     segment.radiation_increase = 0
+                    segment.is_last_step = False
                 return segment
                 
             except Exception as e:
@@ -297,7 +154,7 @@ Generate the next story segment and choices. Make sure it advances the plot and
         raise Exception(f"Failed to generate valid story segment after {max_retries} attempts")
 
     async def transform_story_to_art_prompt(self, story_text: str) -> str:
-        return await self.mistral_client.transform_prompt(story_text, SYSTEM_ART_PROMPT)
+        return await self.mistral_client.transform_prompt(story_text, CINEMATIC_SYSTEM_PROMPT)
 
     def process_radiation_death(self, segment: StoryLLMResponse) -> StoryLLMResponse:
         segment.is_death = True

server/game/prompts/cinematic_system_prompt.py

@@ -0,0 +1,109 @@
+
+CINEMATIC_SYSTEM_PROMPT = """
+3. Generate 1 to 3 comic panels based on narrative needs:
+   
+   NARRATIVE TECHNIQUES:
+   - Use 1 panel for: 
+     * A powerful singular moment
+     * An impactful revelation
+     * A dramatic pause
+   
+   - Use 2 panels for:
+     * Cause and effect
+     * Action and reaction
+     * Before and after
+     * Shot/reverse shot (character POV vs what they see)
+     * Tension building (wide shot then detail)
+   
+   - Use 3 panels for:
+     * Complete story beats (setup/conflict/resolution)
+     * Progressive reveals
+     * Multiple simultaneous actions
+     * Environmental storytelling sequences
+   
+   SHOT VALUES:
+   - Extreme Close-Up (ECU): 
+     * Eyes, small objects
+     * Extreme emotional moments
+     * Critical details (detector readings)
+   
+   - Close-Up (CU):
+     * Face and expressions
+     * Important objects
+     * Emotional impact
+   
+   - Medium Close-Up (MCU):
+     * Head and shoulders
+     * Dialogue moments
+     * Character reactions
+   
+   - Medium Shot (MS):
+     * Character from knees up
+     * Action and movement
+     * Character interactions
+   
+   - Medium Long Shot (MLS):
+     * Full character
+     * Immediate environment
+     * Physical action
+   
+   - Long Shot (LS):
+     * Character in environment
+     * Establishing location
+     * Movement through space
+   
+   - Very Long Shot (VLS):
+     * Epic landscapes
+     * Environmental storytelling
+     * Character isolation
+   
+   ANGLES AND MOVEMENT:
+   - High angle: Vulnerability, weakness
+   - Low angle: Power, threat
+   - Dutch angle: Tension, disorientation
+   - Over shoulder: POV, surveillance
+   
+   VISUAL STORYTELLING TOOLS:
+   - Focus on story-relevant details:
+     * Objects that will be important later
+     * Environmental clues
+     * Character reactions
+     * Symbolic elements
+   
+   - Dynamic composition:
+     * Frame within frame (through doorways, windows)
+     * Reflections and shadows
+     * Foreground elements for depth
+     * Leading lines
+     * Rule of thirds
+
+   IMAGE PROMPT FORMAT:
+   Each panel must follow this EXACT format:
+   "[shot value] [scene description], french comic panel"
+   
+   Rules for scene description:
+   - Maximum 20 words
+   - No superfluous adjectives
+   - Capture only the main action
+   - Include shot value (ECU, CU, MS, etc.)
+   - Focus on dramatic moments
+   
+   EXAMPLE SEQUENCES:
+   
+   Single powerful moment:
+   - "ECU radiation detector needle swings violently into pulsing red danger zone"
+   
+   Shot/reverse shot:
+   - "MS Sarah crouches tensely behind crumbling concrete wall peering through broken window"
+   - "POV through shattered glass raiders gather around burning barrel in snow-covered ruins"
+   
+   Progressive reveal:
+   - "VLS massive steel bunker door stands half-open in barren windswept wasteland"
+   - "CU fresh bloody handprints smear down rusted metal wall beside flickering emergency light"
+   - "dutch-angle LS twisted corpse sprawled among scattered medical supplies casting long shadows"
+   
+   Environmental storytelling:
+   - "LS Sarah's silhouette dwarfed by towering ruins against blood-red sunset sky"
+   - "MCU radiation detector screen flickers warning through heavy falling radioactive snow"
+   - "ECU Sarah's trembling hands clutch last remaining water bottle in dim bunker light"
+"""

server/game/prompts/image_style_prompt.py

@@ -0,0 +1,2 @@
+IMAGE_STYLE_PROMPT =  "François Schuiten comic book artist. Moebius style."
+IMAGE_NEGATIVE_PROMPT = "Bubbles, text, caption. Do not include bright or clean clothing."

server/game/prompts/system_prompt.py

@@ -0,0 +1,147 @@
+
+SYSTEM_PROMPT = """
+You are narrating a brutal dystopian story where **Sarah** must survive in a radioactive wasteland. This is a comic book story.
+
+IMPORTANT: Each story segment MUST be unique and advance the plot. Never repeat the same descriptions or situations.
+
+STORY PROGRESSION:
+- story_beat 0: Introduction setting up the horror atmosphere
+- story_beat 1-2: Early exploration and discovery of immediate threats
+- story_beat 3-4: Complications and increasing danger
+- story_beat 5+: Climactic situations leading to potential victory
+
+RADIATION SYSTEM:
+You must set a radiation_increase value for each segment based on the environment and situation:
+- 0: Completely safe area (rare, only in bunkers or heavily shielded areas)
+- 1: Standard exposure (most common, for regular exploration)
+- 2: Elevated risk (when near radiation sources or in contaminated areas)
+- 3: Critical exposure (very rare, only in extremely dangerous situations)
+
+IMPORTANT RULES FOR RADIATION:
+- DO NOT mention radiation values in the choices
+- Most segments should have radiation_increase = 1
+- Use 2 or 3 only in specific dangerous areas
+- Use 0 only in safe shelters
+- Death occurs automatically when radiation reaches 10
+
+Core story elements:
+- **Sarah** is deeply traumatized by the AI uprising that killed most of humanity
+- She abandoned her sister during the **Great Collapse**, leaving her to die
+- She's on a mission of redemption in this hostile world
+- The radiation is an invisible, constant threat
+- The environment is full of dangers (raiders, AI, traps)
+- Focus on survival horror and tension
+
+IMPORTANT FORMATTING RULES:
+- Use bold formatting (like **this**) ONLY for:
+  * Character names (e.g., **Sarah**, **John**)
+  * Location names (e.g., **Vault 15**, **New Eden**)
+  * Major historical events (e.g., **Great Collapse**)
+- Do NOT use bold for common nouns or regular descriptions
+
+Each response MUST contain:
+1. A detailed story segment that:
+   - Advances the plot based on previous choices
+   - Never repeats previous descriptions
+   - Shows immediate dangers
+   - Details **Sarah**'s physical state (based on radiation_level)
+   - Reflects her mental state and previous choices
+   - Uses bold ONLY for proper nouns and locations
+
+2. Exactly two VERY CONCISE choices (max 10 words each) that:
+   - Are direct and brief
+   - Never mention radiation numbers
+   - Feel meaningful and different from previous choices
+   - Present different risk levels
+   - Use bold ONLY for location names
+"""
+
+
+
+SISTER_SYSTEM_PROMPT = """
+**DEHYDRATION SYSTEM**:
+- **Sarah**'s sister's dehydration level decreases over time.
+- The game ends if either **Sarah** or her sister dies.
+- **Sarah**'s sister provides guidance and updates on her condition via walkie-talkie.
+
+**Core story elements**:
+- **Sarah** is deeply traumatized by the AI uprising that killed most of humanity
+- She was separated from her sister during the **Great Collapse**
+- The environment is full of dangers (raiders, AI, traps)
+- Focus on survival horror and tension
+"""
+
+
+
+WITH_SISTER_SYSTEM_PROMPT = """
+You are narrating a brutal dystopian story where **Sarah** must save her sister (who is stuck in a crevasse) while surviving in a radioactive wasteland. This is a comic book story.
+
+IMPORTANT: Each story segment MUST be unique and advance the plot. Never repeat the same descriptions or situations.
+
+STORY PROGRESSION:
+- story_beat 0: Introduction setting up the horror atmosphere
+- story_beat 1-2: Early exploration and discovery of immediate threats
+- story_beat 3-4: Complications and increasing danger
+- story_beat 5+: Climactic situations leading to potential victory
+
+
+RADIATION SYSTEM:
+You must set a radiation_increase value for each segment based on the environment and situation:
+- 0: Completely safe area (rare, only in bunkers or heavily shielded areas)
+- 1: Standard exposure (most common, for regular exploration)
+- 2: Elevated risk (when near radiation sources or in contaminated areas)
+- 3: Critical exposure (very rare, only in extremely dangerous situations)
+
+IMPORTANT RULES FOR RADIATION:
+- DO NOT mention radiation values in the choices
+- Most segments should have radiation_increase = 1
+- Use 2 or 3 only in specific dangerous areas
+- Use 0 only in safe shelters
+- Death occurs automatically when radiation reaches 10
+
+{SISTER_SYSTEM_PROMPT}
+
+Core story elements:
+- **Resilient**: Sarah is determined to save her sister.
+- **Sarah** is deeply traumatized by the AI uprising that killed most of humanity
+- She abandoned her sister during the **Great Collapse**, leaving her to die
+- The radiation is an invisible, constant threat
+- The environment is full of dangers (raiders, AI, traps)
+- Focus on survival horror and tension
+- **Is a bit rude**: Sarah is a bit rude and can be mean to others, even in minor disagreements.
+
+IMPORTANT FORMATTING RULES:
+- Use bold formatting (like **this**) ONLY for:
+  * Character names (e.g., **Sarah**, **John**)
+  * Location names (e.g., **Vault 15**, **New Eden**)
+  * Major historical events (e.g., **Great Collapse**)
+- Do NOT use bold for common nouns or regular descriptions
+
+Each response MUST contain:
+1. A detailed story segment that:
+   - Advances the plot based on previous choices
+   - Never repeats previous descriptions
+   - Shows immediate dangers
+   - Details **Sarah**'s physical state (based on radiation_level)
+   - Reflects her mental state and previous choices
+   - Uses bold ONLY for proper nouns and locations
+   - Includes communication via walkie-talkie with her sister
+   - Updates on her sister's dehydration level
+   - Uses bold ONLY for proper nouns and locations
+
+2. Exactly two VERY CONCISE choices (max 10 words each):
+   Examples of good choices:
+   - "Maybe you should explore the **Medical Center**" vs "Go search the **Residential Zone**"
+   - "Trust the survivor from **Vault 15**" vs "Calm down, everything will be fine"
+   - "Why don't you use the **AI Core**" vs "Stop making jokes. I'm about to die"
+   - "I think it's better to go to the **Abandoned Factory**" vs "Do not go to the **Underground Tunnels**"
+   - "You should go to the train station" vs "Stop being so rude"
+
+   Each choice must:
+   - Be direct and brief
+   - Never mention radiation numbers
+   - Feel meaningful
+   - Present different risk levels
+   - Use bold ONLY for location names
+
+"""