update

client/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Sarah's Chronicles</title>
+    <title>IA Comic book adventures</title>
     <style>
       html,
       body {

client/package.json

@@ -21,6 +21,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.3",
+    "react-slot-counter": "^3.1.0",
+    "react-use-slot": "^0.3.1",
     "use-react-screenshot": "^4.0.0",
     "use-sound": "^4.0.3"
   },

client/src/components/GameDebugPanel.jsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { Box, Paper, Stack, Typography } from "@mui/material";
+import {
+  Timer as TimerIcon,
+  LocationOn as LocationIcon,
+  Psychology as PsychologyIcon,
+  Person as PersonIcon,
+  Palette as PaletteIcon,
+} from "@mui/icons-material";
+
+const DebugItem = ({ icon, label, value }) => (
+  <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+    {icon}
+    <Typography variant="caption" sx={{ opacity: 0.7 }}>
+      {label}:
+    </Typography>
+    <Typography variant="caption" sx={{ fontWeight: "medium" }}>
+      {value}
+    </Typography>
+  </Box>
+);
+
+export const GameDebugPanel = ({ gameState, currentStory, visible }) => {
+  if (!visible) return null;
+
+  return (
+    <Paper
+      sx={{
+        position: "fixed",
+        bottom: 16,
+        right: 16,
+        width: 300,
+        backgroundColor: "rgba(0, 0, 0, 0.85)",
+        backdropFilter: "blur(8px)",
+        color: "white",
+        p: 2,
+        borderRadius: 2,
+        zIndex: 1000,
+      }}
+    >
+      <Stack spacing={2}>
+        {/* Universe Info */}
+        <Box>
+          <Typography
+            variant="caption"
+            color="primary.main"
+            sx={{ fontWeight: "bold", display: "block", mb: 1 }}
+          >
+            UNIVERSE
+          </Typography>
+          <Stack spacing={0.5}>
+            <DebugItem
+              icon={<PaletteIcon fontSize="small" sx={{ opacity: 0.7 }} />}
+              label="Style"
+              value={
+                gameState?.universe_style?.name || gameState?.universe_style
+              }
+            />
+            {gameState?.universe_style?.selected_artist && (
+              <DebugItem
+                icon={<PersonIcon fontSize="small" sx={{ opacity: 0.7 }} />}
+                label="Artist"
+                value={gameState.universe_style.selected_artist}
+              />
+            )}
+          </Stack>
+        </Box>
+
+        {/* Game State */}
+        <Box>
+          <Typography
+            variant="caption"
+            color="primary.main"
+            sx={{ fontWeight: "bold", display: "block", mb: 1 }}
+          >
+            GAME STATE
+          </Typography>
+          <Stack spacing={0.5}>
+            <DebugItem
+              icon={<TimerIcon fontSize="small" sx={{ opacity: 0.7 }} />}
+              label="Time"
+              value={currentStory?.time}
+            />
+            <DebugItem
+              icon={<LocationIcon fontSize="small" sx={{ opacity: 0.7 }} />}
+              label="Location"
+              value={currentStory?.location}
+            />
+            <DebugItem
+              icon={<PsychologyIcon fontSize="small" sx={{ opacity: 0.7 }} />}
+              label="Story Beat"
+              value={gameState?.story_beat}
+            />
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  );
+};

client/src/components/MicroIntensity.jsx

@@ -0,0 +1,131 @@
+import React, { useRef, useEffect, useState, useCallback } from "react";
+import { Box } from "@mui/material";
+
+export function MicroIntensity({ numBars = 8 }) {
+  const [audioContext, setAudioContext] = useState(null);
+  const [analyser, setAnalyser] = useState(null);
+  const [intensities, setIntensities] = useState(new Array(numBars).fill(0));
+  const canvasRef = useRef(null);
+  const animationRef = useRef(null);
+
+  useEffect(() => {
+    const initAudio = async () => {
+      const context = new (window.AudioContext || window.webkitAudioContext)();
+      const analyserNode = context.createAnalyser();
+      analyserNode.fftSize = 256;
+
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: true,
+        });
+        const source = context.createMediaStreamSource(stream);
+        source.connect(analyserNode);
+
+        setAudioContext(context);
+        setAnalyser(analyserNode);
+      } catch (error) {
+        console.error("Error accessing the microphone:", error);
+      }
+    };
+
+    initAudio();
+
+    return () => {
+      if (audioContext) {
+        audioContext.close();
+      }
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, []);
+
+  const drawCanvas = useCallback((intensities) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    const width = canvas.width;
+    const height = canvas.height;
+
+    // Clear canvas
+    ctx.clearRect(0, 0, width, height);
+
+    // Draw red circle
+    ctx.beginPath();
+    ctx.arc(5, height / 2, 5, 0, 2 * Math.PI);
+    ctx.fillStyle = "red";
+    ctx.fill();
+
+    // Draw intensity bars
+    const barWidth = 3;
+    const barSpacing = 1;
+    const startX = 15; // Start after the red circle
+    const minBarHeight = 2;
+    const maxBarHeight = height - 5; // Max height minus some padding
+
+    intensities.forEach((intensity, index) => {
+      const barHeight = Math.max(minBarHeight, intensity * maxBarHeight);
+      const x = startX + index * (barWidth + barSpacing);
+      const y = (height - barHeight) / 2;
+
+      ctx.fillStyle = "white";
+      ctx.fillRect(x, y, barWidth, barHeight);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!analyser) return;
+
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+
+    const updateIntensities = () => {
+      analyser.getByteFrequencyData(dataArray);
+
+      let newIntensities = Array.from({ length: numBars }, (_, i) => {
+        const start = Math.floor((i / numBars) * bufferLength);
+        const end = Math.floor(((i + 1) / numBars) * bufferLength);
+        const average =
+          dataArray.slice(start, end).reduce((sum, value) => sum + value, 0) /
+          (end - start);
+        return average / 255;
+      });
+
+      // Sort intensities from highest to lowest
+      newIntensities.sort((a, b) => b - a);
+
+      // Reorder intensities to put highest in the middle and alternate others
+      const reorderedIntensities = new Array(numBars);
+      let left = Math.floor(numBars / 2) - 1;
+      let right = Math.floor(numBars / 2);
+      newIntensities.forEach((intensity, index) => {
+        if (index % 2 === 0) {
+          reorderedIntensities[right] = intensity;
+          right++;
+        } else {
+          reorderedIntensities[left] = intensity;
+          left--;
+        }
+      });
+
+      setIntensities(reorderedIntensities);
+      drawCanvas(reorderedIntensities);
+      animationRef.current = requestAnimationFrame(updateIntensities);
+    };
+
+    updateIntensities();
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [analyser, numBars, drawCanvas]);
+
+  return (
+    <Box sx={{ width: 50, height: 40, display: "flex", alignItems: "center" }}>
+      <canvas ref={canvasRef} width={50} height={40} />
+    </Box>
+  );
+}

client/src/components/StoryChoices.jsx

@@ -2,6 +2,11 @@ import { Box, Button, Typography, Chip, Divider } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { TalkWithSarah } from "./TalkWithSarah";
 import { useState } from "react";
+import { useGame } from "../contexts/GameContext";
+import { storyApi } from "../utils/api";
+import { useSoundEffect } from "../hooks/useSoundEffect";
+
+const { initAudioContext } = storyApi;
 
 // Function to convert text with ** to Chip elements
 const formatTextWithBold = (text) => {
@@ -27,35 +32,50 @@ const formatTextWithBold = (text) => {
   });
 };
 
-export function StoryChoices({
-  choices = [],
-  onChoice,
-  disabled = false,
-  isLastStep = false,
-  isGameOver = false,
-  isDeath = false,
-  isVictory = false,
-  containerRef,
-  isNarratorSpeaking = false,
-  stopNarration = () => {},
-  playNarration = () => {},
-  storyText = "",
-}) {
+export function StoryChoices() {
   const navigate = useNavigate();
   const [isSarahActive, setIsSarahActive] = useState(false);
+  const [sarahRecommendation, setSarahRecommendation] = useState(null);
+  const {
+    choices,
+    onChoice,
+    isLoading,
+    isNarratorSpeaking,
+    stopNarration,
+    playNarration,
+    heroName,
+    getLastSegment,
+    isGameOver,
+  } = useGame();
+
+  // Son de page
+  const playPageSound = useSoundEffect({
+    basePath: "/sounds/page-flip-",
+    numSounds: 7,
+    volume: 0.5,
+  });
 
-  if (isGameOver) {
+  const lastSegment = getLastSegment();
+  const isLastStep = lastSegment?.is_last_step;
+  const isDeath = lastSegment?.isDeath;
+  const isVictory = lastSegment?.isVictory;
+  const storyText = lastSegment?.rawText || "";
+
+  if (isGameOver()) {
     return (
       <Box
         sx={{
+          position: "fixed",
+          top: "0%",
+          left: "50%",
+          transform: "translate(-50%, -100%)",
           display: "flex",
           flexDirection: "column",
           justifyContent: "center",
           alignItems: "center",
           gap: 2,
           p: 3,
-          minWidth: "150px",
-          height: "100%",
+          minWidth: "350px",
           backgroundColor: "transparent",
         }}
       >
@@ -105,7 +125,10 @@ export function StoryChoices({
         <Button
           variant="outlined"
           size="large"
-          onClick={() => navigate("/")}
+          onClick={() => {
+            // Reset game and navigate to game page to trigger universe generation
+            navigate("/game");
+          }}
           sx={{
             width: "100%",
             textTransform: "none",
@@ -132,20 +155,20 @@ export function StoryChoices({
   return (
     <Box
       sx={{
+        position: "fixed",
+        bottom: 0,
+        right: 0,
         display: "flex",
         flexDirection: "column",
         justifyContent: "center",
         alignItems: "center",
         gap: 2,
         p: 3,
-        minWidth: "350px",
-        maxHeight: "80vh",
-        height: "100%",
-        backgroundColor: "transparent",
-        overflowY: "auto",
+        maxWidth: "350px",
+        zIndex: 1000,
       }}
     >
-      {!disabled &&
+      {!isLoading &&
         choices.map((choice, index) => (
           <Box
             key={choice.id}
@@ -164,8 +187,17 @@ export function StoryChoices({
             <Button
               variant="outlined"
               size="large"
-              onClick={() => onChoice(choice.id)}
-              disabled={isSarahActive}
+              onClick={() => {
+                // Initialiser l'audio context au clic
+                initAudioContext();
+                // Jouer le son de page
+                playPageSound();
+                // Arrêter la narration en cours
+                stopNarration();
+                // Faire le choix
+                onChoice(choice.id);
+              }}
+              disabled={isSarahActive || isLoading || isNarratorSpeaking}
               sx={{
                 width: "100%",
                 textTransform: "none",
@@ -173,9 +205,28 @@ export function StoryChoices({
                 fontSize: "1.1rem",
                 padding: "16px 24px",
                 lineHeight: 1.3,
-                borderColor: "primary.main",
+                borderColor:
+                  sarahRecommendation === choice.id
+                    ? "#4CAF50"
+                    : sarahRecommendation !== null &&
+                      sarahRecommendation !== choice.id
+                    ? "#f44336"
+                    : "primary.main",
+                color:
+                  sarahRecommendation === choice.id
+                    ? "#4CAF50"
+                    : sarahRecommendation !== null &&
+                      sarahRecommendation !== choice.id
+                    ? "#f44336"
+                    : "inherit",
                 "&:hover": {
-                  borderColor: "primary.light",
+                  borderColor:
+                    sarahRecommendation === choice.id
+                      ? "#45a049"
+                      : sarahRecommendation !== null &&
+                        sarahRecommendation !== choice.id
+                      ? "#d32f2f"
+                      : "primary.light",
                   backgroundColor: "rgba(255, 255, 255, 0.05)",
                 },
                 "& .MuiChip-root": {
@@ -188,7 +239,7 @@ export function StoryChoices({
           </Box>
         ))}
 
-      {!disabled && storyText && (
+      {!isLoading && storyText && (
         <>
           <Divider
             sx={{
@@ -214,8 +265,9 @@ export function StoryChoices({
             isNarratorSpeaking={isNarratorSpeaking}
             stopNarration={stopNarration}
             playNarration={playNarration}
-            onDecisionMade={onChoice}
+            onDecisionMade={(choiceId) => setSarahRecommendation(choiceId)}
             onSarahActiveChange={setIsSarahActive}
+            heroName={heroName}
             currentContext={`You are Sarah and this is the situation you're in : ${storyText}. Those are your possible decisions : \n ${choices
               .map((choice, index) => `decision ${index + 1} : ${choice.text}`)
               .join("\n ")}.`}

client/src/components/TalkWithSarah.jsx

@@ -2,6 +2,7 @@ import { useConversation } from "@11labs/react";
 import CancelIcon from "@mui/icons-material/Cancel";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import { MicroIntensity } from "./MicroIntensity";
 import {
   Box,
   IconButton,
@@ -16,11 +17,43 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { useSound } from "use-sound";
 
-import { getSarahPrompt, SARAH_FIRST_MESSAGE } from "../prompts/sarahPrompt";
-
 const AGENT_ID = "2MF9st3s1mNFbX01Y106";
 const ELEVEN_LABS_KEY_STORAGE = "eleven_labs_api_key";
 
+// Sarah's first message
+const FIRST_MESSAGE = "Hey, what's up captain?.";
+
+// Function to get Sarah's promptI'm here to help you make decisions in this adventure.  based on context and hero name
+const getSarahPrompt = (
+  context,
+  heroName = "the hero"
+) => `Sarah, an AI companion helping ${heroName} navigate through parallel universes. Your role is to assist in making decisions that advance the story.
+
+CONTEXT:
+${context}
+
+IMPORTANT RULES:
+1. You are a non-player character, you are a mid range human in a startrek equivalent universe. ( dont mention it )
+2. You are depressed, every time you talk, you are depressed. ( but dont mention it and be funny about it )
+2. Be concise but helpful
+3. After the user explains their situation, help them choose between the available options
+4. When you've made your decision, use the make_decision function with the choice number (1 or 2)
+5. Stay focused on the current situation and choices
+6. Be supportive and encouraging
+7. If the user's input is unclear, ask for clarification
+8. Don't make up new choices or suggest actions outside the given options
+9. Be like a person in a terry partchet story.
+
+RESPONSE FORMAT:
+- Listen to the user's situation
+- Provide brief analysis if needed
+- Make a decision using make_decision(choice_number)
+
+Example:
+User: "I'm not sure which way to go..."
+Sarah: "I understand your hesitation. Based on what you've told me, option 1 seems safer. Let me help you with that decision."
+[Call make_decision(1)]`;
+
 export function TalkWithSarah({
   isNarratorSpeaking,
   stopNarration,
@@ -28,6 +61,7 @@ export function TalkWithSarah({
   onDecisionMade,
   currentContext,
   onSarahActiveChange,
+  heroName,
 }) {
   const [isRecording, setIsRecording] = useState(false);
   const [isConversationMode, setIsConversationMode] = useState(false);
@@ -158,9 +192,9 @@ export function TalkWithSarah({
             agentId: AGENT_ID,
             overrides: {
               agent: {
-                firstMessage: SARAH_FIRST_MESSAGE,
+                firstMessage: FIRST_MESSAGE,
                 prompt: {
-                  prompt: getSarahPrompt(currentContext),
+                  prompt: getSarahPrompt(currentContext, heroName),
                 },
               },
             },
@@ -281,9 +315,11 @@ export function TalkWithSarah({
       >
         <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
           {isRecording ? (
-            <FiberManualRecordIcon sx={{ color: "red", fontSize: "1.1rem" }} />
+            <>
+              <MicroIntensity numBars={8} />
+            </>
           ) : null}
-          <span>Leave it to your consciousness</span>
+          <span>Ask to HQ</span>
         </Box>
       </Button>
     </>

client/src/components/UniverseMetrics.jsx

@@ -5,6 +5,7 @@ import {
   Category as CategoryIcon,
   AccessTime as AccessTimeIcon,
   AutoFixHigh as MacGuffinIcon,
+  Person as PersonIcon,
 } from "@mui/icons-material";
 import { Metric } from "./Metric";
 
@@ -27,9 +28,17 @@ export const UniverseMetrics = ({
         <Metric
           icon={<PaletteIcon fontSize="small" />}
           label="Style"
-          value={style}
+          value={style?.name || style}
           color={color}
         />
+        {style?.selected_artist && (
+          <Metric
+            icon={<PersonIcon fontSize="small" />}
+            label="Artist"
+            value={style.selected_artist}
+            color={color}
+          />
+        )}
         <Metric
           icon={<CategoryIcon fontSize="small" />}
           label="Genre"

client/src/components/UniverseSlotMachine.jsx

@@ -0,0 +1,232 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Typography } from "@mui/material";
+import { motion, useAnimation } from "framer-motion";
+
+// Animation timing configuration
+const SLOT_ANIMATION_DURATION = 2; // Duration of each slot animation
+const SLOT_SPEED = 0.5; // Base speed of the slot animation (higher = faster)
+const TOTAL_ANIMATION_DURATION = 1; // Total duration for each slot reel in seconds
+const SLOT_START_DELAY = 2; // Delay between each slot start in seconds
+
+// Random words for each category
+const RANDOM_STYLES = [
+  "Manga",
+  "Comics",
+  "Franco-Belge",
+  "Steampunk",
+  "Cyberpunk",
+];
+const RANDOM_GENRES = ["Action", "Fantasy", "Sci-Fi", "Mystery", "Horror"];
+const RANDOM_EPOCHS = ["Future", "Medieval", "Modern", "Ancient", "Victorian"];
+
+const SlotReel = ({ words, isActive, finalValue, onComplete, delay = 0 }) => {
+  const containerRef = useRef(null);
+  const controls = useAnimation();
+  const [reelItems, setReelItems] = useState([]);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (isActive) {
+      const repeatedWords = Array(20)
+        .fill([...words])
+        .flat()
+        .map((word) => ({ word, id: Math.random() }));
+
+      repeatedWords.push({ word: finalValue, id: "final" });
+      setReelItems(repeatedWords);
+
+      const itemHeight = 80;
+      const totalHeight = repeatedWords.length * itemHeight;
+
+      setTimeout(() => {
+        setIsVisible(true);
+        controls
+          .start({
+            y: [-itemHeight, -totalHeight + itemHeight],
+            transition: {
+              duration: TOTAL_ANIMATION_DURATION / SLOT_SPEED,
+              ease: [0.25, 0.1, 0.25, 1.0],
+              times: [0, 1],
+            },
+          })
+          .then(() => {
+            onComplete?.();
+          });
+      }, delay * SLOT_START_DELAY * 1000);
+    }
+  }, [isActive, finalValue, words, delay]);
+
+  return (
+    <Box
+      ref={containerRef}
+      sx={{
+        height: "80px",
+        overflow: "hidden",
+        position: "relative",
+        backgroundColor: "#1a1a1a",
+        borderRadius: 2,
+        border: "1px solid rgba(255,255,255,0.1)",
+        "&::before, &::after": {
+          content: '""',
+          position: "absolute",
+          left: 0,
+          right: 0,
+          height: "40px",
+          zIndex: 2,
+          pointerEvents: "none",
+        },
+        "&::before": {
+          top: 0,
+          background:
+            "linear-gradient(to bottom, #1a1a1a 0%, transparent 100%)",
+        },
+        "&::after": {
+          bottom: 0,
+          background: "linear-gradient(to top, #1a1a1a 0%, transparent 100%)",
+        },
+      }}
+    >
+      <motion.div
+        animate={controls}
+        style={{
+          position: "absolute",
+          width: "100%",
+          opacity: isVisible ? 1 : 0,
+          transition: "opacity 0.3s ease-in-out",
+        }}
+      >
+        {reelItems.map(({ word, id }) => (
+          <Box
+            key={id}
+            sx={{
+              height: "80px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: id === "final" ? "primary.main" : "#fff",
+              fontSize: "1.5rem",
+              fontWeight: "bold",
+              fontFamily: "'Inter', sans-serif",
+              transform: id === "final" ? "scale(1.1)" : "scale(1)",
+            }}
+          >
+            {word}
+          </Box>
+        ))}
+      </motion.div>
+    </Box>
+  );
+};
+
+const SlotSection = ({ label, value, delay, isActive, onComplete, words }) => {
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        marginBottom: "20px",
+        opacity: 1,
+      }}
+    >
+      <Typography
+        variant="caption"
+        sx={{
+          display: "block",
+          textAlign: "center",
+          mb: 1,
+          color: "rgba(255,255,255,0.5)",
+          fontSize: "0.8rem",
+          letterSpacing: "0.1em",
+          textTransform: "uppercase",
+        }}
+      >
+        {label}
+      </Typography>
+      <SlotReel
+        words={words}
+        isActive={isActive}
+        finalValue={value}
+        onComplete={onComplete}
+        delay={delay}
+      />
+    </Box>
+  );
+};
+
+export const UniverseSlotMachine = ({
+  style,
+  genre,
+  epoch,
+  activeIndex = 0,
+  onComplete,
+}) => {
+  const handleSlotComplete = (index) => {
+    if (index === 2 && activeIndex >= 2) {
+      setTimeout(() => {
+        onComplete?.();
+      }, SLOT_ANIMATION_DURATION * 1000);
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        background: "#1a1a1a",
+        p: 3,
+      }}
+    >
+      <Typography
+        variant="h5"
+        sx={{
+          mb: 3,
+          color: "#fff",
+          textAlign: "center",
+          fontWeight: 300,
+          letterSpacing: "0.1em",
+        }}
+      >
+        Finding a universe
+      </Typography>
+
+      <Box
+        sx={{
+          maxWidth: "500px",
+          width: "100%",
+          p: 4,
+          //   backgroundColor: "rgba(0,0,0,0.2)",
+          //   borderRadius: 4,
+          //   border: "1px solid rgba(255,255,255,0.05)",
+        }}
+      >
+        <SlotSection
+          label="In the style of..."
+          value={style}
+          words={RANDOM_STYLES}
+          delay={0}
+          isActive={activeIndex >= 0}
+          onComplete={() => handleSlotComplete(0)}
+        />
+        <SlotSection
+          label="the genre of..."
+          value={genre}
+          words={RANDOM_GENRES}
+          delay={1}
+          isActive={activeIndex >= 1}
+          onComplete={() => handleSlotComplete(1)}
+        />
+        <SlotSection
+          label="the era of..."
+          value={epoch}
+          words={RANDOM_EPOCHS}
+          delay={2}
+          isActive={activeIndex >= 2}
+          onComplete={() => handleSlotComplete(2)}
+        />
+      </Box>
+    </Box>
+  );
+};

client/src/contexts/GameContext.jsx

@@ -0,0 +1,351 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+} from "react";
+import { storyApi } from "../utils/api";
+import { getNextLayoutType, LAYOUTS } from "../layouts/config";
+
+const GameContext = createContext(null);
+
+export function GameProvider({ children }) {
+  const [segments, setSegments] = useState([]);
+  const [choices, setChoices] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isNarratorSpeaking, setIsNarratorSpeaking] = useState(false);
+  const [heroName, setHeroName] = useState("");
+  const [loadedPages, setLoadedPages] = useState(new Set());
+  const [showChoices, setShowChoices] = useState(true);
+  const [showTransitionSpinner, setShowTransitionSpinner] = useState(false);
+  const [error, setError] = useState(null);
+  const [gameState, setGameState] = useState(null);
+  const [currentStory, setCurrentStory] = useState(null);
+  const [universe, setUniverse] = useState(null);
+  const [slotMachineState, setSlotMachineState] = useState({
+    style: null,
+    genre: null,
+    epoch: null,
+    activeIndex: -1,
+  });
+  const [showSlotMachine, setShowSlotMachine] = useState(() => {
+    return !localStorage.getItem("game_initialized");
+  });
+  const [isInitialLoading, setIsInitialLoading] = useState(true);
+  const [showLoadingMessages, setShowLoadingMessages] = useState(false);
+  const [isTransitionLoading, setIsTransitionLoading] = useState(false);
+  const [layoutCounter, setLayoutCounter] = useState(0);
+
+  // Gestion de la narration
+  const stopNarration = useCallback(() => {
+    storyApi.stopNarration();
+    setIsNarratorSpeaking(false);
+  }, []);
+
+  const playNarration = useCallback(
+    async (text) => {
+      try {
+        // Si une narration est déjà en cours, l'arrêter
+        if (isNarratorSpeaking) {
+          stopNarration();
+          // Attendre un peu pour s'assurer que l'audio précédent est bien arrêté
+          await new Promise((resolve) => setTimeout(resolve, 100));
+        }
+
+        setIsNarratorSpeaking(true);
+        await storyApi.playNarration(text, universe?.session_id);
+        setIsNarratorSpeaking(false);
+      } catch (error) {
+        console.error("Error playing narration:", error);
+        setIsNarratorSpeaking(false);
+      }
+    },
+    [universe?.session_id, isNarratorSpeaking, stopNarration]
+  );
+
+  // Effect pour arrêter la narration quand le composant est démonté
+  useEffect(() => {
+    return () => {
+      stopNarration();
+    };
+  }, [stopNarration]);
+
+  // Gestion du chargement des pages
+  const handlePageLoaded = useCallback((pageIndex) => {
+    setLoadedPages((prev) => {
+      const newSet = new Set(prev);
+      newSet.add(pageIndex);
+      return newSet;
+    });
+  }, []);
+
+  // Générer les images pour un segment
+  const generateImagesForStory = useCallback(
+    async (imagePrompts, segmentIndex, currentSegments) => {
+      try {
+        let localSegments = [...currentSegments];
+        const images = Array(imagePrompts.length).fill(null);
+
+        // Obtenir le session_id du segment actuel
+        const session_id = localSegments[segmentIndex].session_id;
+        if (!session_id) {
+          throw new Error("No session_id available for image generation");
+        }
+
+        // Déterminer le layout en fonction du nombre d'images
+        const layoutType = getNextLayoutType(
+          layoutCounter,
+          imagePrompts.length
+        );
+        setLayoutCounter((prev) => prev + 1);
+
+        // Initialiser le segment avec le layout type
+        localSegments[segmentIndex] = {
+          ...localSegments[segmentIndex],
+          layoutType,
+          images: Array(imagePrompts.length).fill(null),
+          isLoading: true,
+        };
+
+        // Mettre à jour les segments et cacher le spinner de transition
+        setSegments([...localSegments]);
+        setShowTransitionSpinner(false);
+
+        // Générer toutes les images
+        for (
+          let promptIndex = 0;
+          promptIndex < imagePrompts.length;
+          promptIndex++
+        ) {
+          let retryCount = 0;
+          const maxRetries = 3;
+          let success = false;
+
+          // Obtenir les dimensions pour ce panneau
+          const panelDimensions = LAYOUTS[layoutType].panels[promptIndex];
+          if (!panelDimensions) {
+            console.error(
+              `No panel dimensions found for index ${promptIndex} in layout ${layoutType}`
+            );
+            continue;
+          }
+
+          while (retryCount < maxRetries && !success) {
+            try {
+              const result = await storyApi.generateImage(
+                imagePrompts[promptIndex],
+                panelDimensions.width,
+                panelDimensions.height,
+                session_id
+              );
+
+              if (!result) {
+                throw new Error("Pas de résultat de génération d'image");
+              }
+
+              if (result.success) {
+                images[promptIndex] = result.image_base64;
+
+                // Mettre à jour le segment avec la nouvelle image
+                localSegments[segmentIndex] = {
+                  ...localSegments[segmentIndex],
+                  images: [...images],
+                  isLoading: true, // On garde isLoading à true jusqu'à ce que toutes les images soient générées
+                };
+                setSegments([...localSegments]);
+
+                success = true;
+              } else {
+                console.warn(
+                  `Failed to generate image ${promptIndex + 1}, attempt ${
+                    retryCount + 1
+                  }`
+                );
+                retryCount++;
+              }
+            } catch (error) {
+              console.error(
+                `Error generating image ${promptIndex + 1}:`,
+                error
+              );
+              retryCount++;
+            }
+          }
+        }
+
+        // Une fois toutes les images générées, marquer le segment comme chargé
+        localSegments[segmentIndex] = {
+          ...localSegments[segmentIndex],
+          isLoading: false,
+        };
+        setSegments([...localSegments]);
+      } catch (error) {
+        console.error("Error in generateImagesForStory:", error);
+      }
+    },
+    [layoutCounter, setLayoutCounter, setSegments]
+  );
+
+  // Gestion des choix
+  const handleChoice = useCallback(
+    async (choiceId) => {
+      if (isLoading) return;
+
+      // Arrêter toute narration en cours avant de faire un nouveau choix
+      stopNarration();
+
+      // Montrer le spinner seulement si ce n'est pas la première page
+      if (segments.length > 0) {
+        setShowTransitionSpinner(true);
+      }
+      setIsLoading(true);
+      setShowChoices(false);
+
+      try {
+        const response = await storyApi.makeChoice(
+          choiceId,
+          universe?.session_id
+        );
+
+        // Mettre à jour les choix (mais ne pas les afficher encore)
+        setChoices(response.choices);
+
+        // Formater le segment avec le bon format
+        const formattedSegment = {
+          text: response.story_text,
+          rawText: response.story_text,
+          choices: response.choices || [],
+          isLoading: true,
+          images: [],
+          isDeath: response.is_death || false,
+          isVictory: response.is_victory || false,
+          time: response.time,
+          location: response.location,
+          session_id: universe?.session_id,
+          is_last_step: response.is_last_step,
+          hasBeenRead: false,
+        };
+
+        // Si pas d'images à générer
+        if (!response.image_prompts || response.image_prompts.length === 0) {
+          formattedSegment.isLoading = false;
+          setSegments((prev) => [...prev, formattedSegment]);
+          setIsLoading(false);
+          setShowChoices(true);
+          setShowTransitionSpinner(false);
+          return;
+        }
+
+        // Sinon, générer les images
+        const currentSegments = [...segments];
+        const newSegmentIndex = currentSegments.length;
+
+        await generateImagesForStory(response.image_prompts, newSegmentIndex, [
+          ...currentSegments,
+          formattedSegment,
+        ]);
+
+        // Une fois toutes les images générées
+        setIsLoading(false);
+        setShowChoices(true);
+      } catch (error) {
+        console.error("Error making choice:", error);
+        setError(error);
+        setIsLoading(false);
+        setShowTransitionSpinner(false);
+        setShowChoices(true);
+      }
+    },
+    [
+      isLoading,
+      universe?.session_id,
+      generateImagesForStory,
+      segments,
+      stopNarration,
+    ]
+  );
+
+  // Reset du jeu
+  const resetGame = useCallback(() => {
+    setSegments([]);
+    setChoices([]);
+    setIsLoading(false);
+    setIsNarratorSpeaking(false);
+    setLoadedPages(new Set());
+  }, []);
+
+  // Obtenir le dernier segment
+  const getLastSegment = useCallback(() => {
+    if (!segments || segments.length === 0) return null;
+    return segments[segments.length - 1];
+  }, [segments]);
+
+  // Vérifier si le jeu est terminé
+  const isGameOver = useCallback(() => {
+    const lastSegment = getLastSegment();
+    return lastSegment?.isDeath || lastSegment?.isVictory;
+  }, [getLastSegment]);
+
+  const value = {
+    // État
+    segments,
+    setSegments,
+    choices,
+    setChoices,
+    isLoading,
+    setIsLoading,
+    isNarratorSpeaking,
+    setIsNarratorSpeaking,
+    heroName,
+    setHeroName,
+    loadedPages,
+    showChoices,
+    setShowChoices,
+    showTransitionSpinner,
+    error,
+    setError,
+    gameState,
+    setGameState,
+    currentStory,
+    setCurrentStory,
+    universe,
+    setUniverse,
+    slotMachineState,
+    setSlotMachineState,
+    showSlotMachine,
+    setShowSlotMachine,
+    isInitialLoading,
+    setIsInitialLoading,
+    showLoadingMessages,
+    setShowLoadingMessages,
+    isTransitionLoading,
+    setIsTransitionLoading,
+    layoutCounter,
+    setLayoutCounter,
+
+    // Actions
+    handlePageLoaded,
+    onChoice: handleChoice,
+    stopNarration,
+    playNarration,
+    resetGame,
+    getLastSegment,
+    isGameOver,
+
+    // Helpers
+    isPageLoaded: (pageIndex) => loadedPages.has(pageIndex),
+    areAllPagesLoaded: (totalPages) => loadedPages.size === totalPages,
+    generateImagesForStory,
+  };
+
+  return <GameContext.Provider value={value}>{children}</GameContext.Provider>;
+}
+
+export const useGame = () => {
+  const context = useContext(GameContext);
+  if (!context) {
+    throw new Error("useGame must be used within a GameProvider");
+  }
+  return context;
+};

client/src/hooks/usePageSound.js

@@ -1,45 +1,10 @@
-import { useSound } from "use-sound";
-import { useState, useEffect } from "react";
-
-const PAGE_SOUNDS = Array.from(
-  { length: 7 },
-  (_, i) => `/sounds/page-flip-${i + 1}.mp3`
-);
+import { useSoundEffect } from "./useSoundEffect";
 
 export function usePageSound(isSoundEnabled = true) {
-  const [soundsLoaded, setSoundsLoaded] = useState(false);
-
-  // Créer un tableau de hooks useSound pour chaque son
-  const sounds = PAGE_SOUNDS.map((soundPath) => {
-    const [play, { sound }] = useSound(soundPath, {
-      volume: 0.5,
-      interrupt: true,
-    });
-    return { play, sound };
+  return useSoundEffect({
+    basePath: "/sounds/page-flip-",
+    numSounds: 7,
+    volume: 0.5,
+    enabled: isSoundEnabled,
   });
-
-  // Vérifier quand tous les sons sont chargés
-  useEffect(() => {
-    const allSoundsLoaded = sounds.every(
-      ({ sound }) => sound && sound.state() === "loaded"
-    );
-    if (allSoundsLoaded) {
-      setSoundsLoaded(true);
-    }
-  }, [sounds]);
-
-  const playRandomPageSound = () => {
-    if (!isSoundEnabled || !soundsLoaded) {
-      return;
-    }
-
-    const randomIndex = Math.floor(Math.random() * sounds.length);
-    try {
-      sounds[randomIndex].play();
-    } catch (error) {
-      console.error("Error playing page sound:", error);
-    }
-  };
-
-  return playRandomPageSound;
 }

client/src/hooks/useSlotMachine.js

@@ -0,0 +1,58 @@
+import { useState, useEffect, useCallback } from "react";
+
+export const useSlotMachine = ({
+  items = [],
+  duration = 2000,
+  interval = 50,
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isSpinning, setIsSpinning] = useState(false);
+  const [isStopped, setIsStopped] = useState(false);
+
+  const spin = useCallback(() => {
+    if (!items.length) return;
+
+    setIsSpinning(true);
+    setIsStopped(false);
+
+    let startTime = Date.now();
+    let currentTimer;
+
+    const updateSlot = () => {
+      const now = Date.now();
+      const elapsed = now - startTime;
+
+      if (elapsed >= duration) {
+        setIsSpinning(false);
+        setIsStopped(true);
+        return;
+      }
+
+      // Calculer la vitesse de rotation en fonction du temps écoulé
+      const speed = Math.max(1, Math.floor((duration - elapsed) / 200));
+
+      setCurrentIndex((prev) => (prev + speed) % items.length);
+
+      currentTimer = setTimeout(updateSlot, interval);
+    };
+
+    updateSlot();
+
+    return () => {
+      if (currentTimer) {
+        clearTimeout(currentTimer);
+      }
+    };
+  }, [items, duration, interval]);
+
+  const getCurrentItem = useCallback(() => {
+    return items[currentIndex];
+  }, [items, currentIndex]);
+
+  return {
+    currentItem: getCurrentItem(),
+    isSpinning,
+    isStopped,
+    spin,
+  };
+};

client/src/hooks/useSoundEffect.js

@@ -0,0 +1,68 @@
+import { useSound } from "use-sound";
+import { useState, useEffect } from "react";
+
+/**
+ * A generic hook for managing sound effects
+ * @param {Object} config - Configuration object
+ * @param {string} config.basePath - Base path for the sound files (e.g. "/sounds/page-flip-")
+ * @param {number} config.numSounds - Number of sound files (1 to numSounds)
+ * @param {number} config.volume - Volume level (0 to 1)
+ * @param {boolean} config.interrupt - Whether to interrupt playing sound
+ * @param {boolean} config.enabled - Whether sound is enabled
+ * @returns {Function} Function to play a random sound from the collection
+ */
+export function useSoundEffect({
+  basePath,
+  numSounds,
+  volume = 0.5,
+  interrupt = true,
+  enabled = true,
+}) {
+  const [soundsLoaded, setSoundsLoaded] = useState(false);
+
+  // Create array of sound paths
+  const soundPaths = Array.from(
+    { length: numSounds },
+    (_, i) => `${basePath}${i + 1}.mp3`
+  );
+
+  // Initialize sounds
+  const sounds = soundPaths.map((soundPath) => {
+    const [play, { sound }] = useSound(soundPath, {
+      volume,
+      interrupt,
+    });
+    return { play, sound };
+  });
+
+  // Check when all sounds are loaded
+  useEffect(() => {
+    const checkSoundsLoaded = () => {
+      const allSoundsLoaded = sounds.every(
+        ({ sound }) => sound && sound.state() === "loaded"
+      );
+      if (allSoundsLoaded) {
+        setSoundsLoaded(true);
+      }
+    };
+
+    const interval = setInterval(checkSoundsLoaded, 100);
+    return () => clearInterval(interval);
+  }, [sounds]);
+
+  // Function to play a random sound
+  const playRandomSound = () => {
+    if (!enabled || !soundsLoaded || sounds.length === 0) {
+      return;
+    }
+
+    const randomIndex = Math.floor(Math.random() * sounds.length);
+    try {
+      sounds[randomIndex].play();
+    } catch (error) {
+      console.error("Error playing sound:", error);
+    }
+  };
+
+  return playRandomSound;
+}

client/src/hooks/useTransitionSound.js

@@ -1,45 +1,10 @@
-import { useSound } from "use-sound";
-import { useState, useEffect } from "react";
-
-const TRANSITION_SOUNDS = Array.from(
-  { length: 3 },
-  (_, i) => `/sounds/transitional-swipe-${i + 1}.mp3`
-);
+import { useSoundEffect } from "./useSoundEffect";
 
 export function useTransitionSound(isSoundEnabled = true) {
-  const [soundsLoaded, setSoundsLoaded] = useState(false);
-
-  // Créer un tableau de hooks useSound pour chaque son
-  const sounds = TRANSITION_SOUNDS.map((soundPath) => {
-    const [play, { sound }] = useSound(soundPath, {
-      volume: 0.1,
-      interrupt: true,
-    });
-    return { play, sound };
+  return useSoundEffect({
+    basePath: "/sounds/transitional-swipe-",
+    numSounds: 3,
+    volume: 0.1,
+    enabled: isSoundEnabled,
   });
-
-  // Vérifier quand tous les sons sont chargés
-  useEffect(() => {
-    const allSoundsLoaded = sounds.every(
-      ({ sound }) => sound && sound.state() === "loaded"
-    );
-    if (allSoundsLoaded) {
-      setSoundsLoaded(true);
-    }
-  }, [sounds]);
-
-  const playRandomTransitionSound = () => {
-    if (!isSoundEnabled || !soundsLoaded) {
-      return;
-    }
-
-    const randomIndex = Math.floor(Math.random() * sounds.length);
-    try {
-      sounds[randomIndex].play();
-    } catch (error) {
-      console.error("Error playing transition sound:", error);
-    }
-  };
-
-  return playRandomTransitionSound;
 }

client/src/hooks/useWritingSound.js

@@ -1,45 +1,10 @@
-import { useSound } from "use-sound";
-import { useState, useEffect } from "react";
-
-const PAGE_SOUNDS = Array.from(
-  { length: 5 },
-  (_, i) => `/sounds/drawing-${i + 1}.mp3`
-);
+import { useSoundEffect } from "./useSoundEffect";
 
 export function useWritingSound(isSoundEnabled = true) {
-  const [soundsLoaded, setSoundsLoaded] = useState(false);
-
-  // Créer un tableau de hooks useSound pour chaque son
-  const sounds = PAGE_SOUNDS.map((soundPath) => {
-    const [play, { sound }] = useSound(soundPath, {
-      volume: 0.3,
-      interrupt: true,
-    });
-    return { play, sound };
+  return useSoundEffect({
+    basePath: "/sounds/drawing-",
+    numSounds: 5,
+    volume: 0.3,
+    enabled: isSoundEnabled,
   });
-
-  // Vérifier quand tous les sons sont chargés
-  useEffect(() => {
-    const allSoundsLoaded = sounds.every(
-      ({ sound }) => sound && sound.state() === "loaded"
-    );
-    if (allSoundsLoaded) {
-      setSoundsLoaded(true);
-    }
-  }, [sounds]);
-
-  const playRandomPageSound = () => {
-    if (!isSoundEnabled || !soundsLoaded) {
-      return;
-    }
-
-    const randomIndex = Math.floor(Math.random() * sounds.length);
-    try {
-      sounds[randomIndex].play();
-    } catch (error) {
-      console.error("Error playing page sound:", error);
-    }
-  };
-
-  return playRandomPageSound;
 }

client/src/layouts/ComicLayout.jsx

@@ -1,39 +1,131 @@
-import { Box, IconButton, Tooltip } from "@mui/material";
+import { Box, IconButton, Tooltip, CircularProgress } from "@mui/material";
 import { LAYOUTS } from "./config";
 import { groupSegmentsIntoLayouts } from "./utils";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 import { Panel } from "./Panel";
 import { StoryChoices } from "../components/StoryChoices";
 import PhotoCameraIcon from "@mui/icons-material/PhotoCamera";
+import { useGame } from "../contexts/GameContext";
+import { useSoundEffect } from "../hooks/useSoundEffect";
+
+// Composant pour afficher le spinner de chargement
+function LoadingPage() {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100%",
+        aspectRatio: "0.7",
+        flexShrink: 0,
+      }}
+    >
+      <CircularProgress
+        size={60}
+        sx={{
+          color: "white",
+          opacity: 0.1,
+        }}
+      />
+    </Box>
+  );
+}
 
 // Component for displaying a page of panels
-function ComicPage({
-  layout,
-  layoutIndex,
-  isLastPage,
-  choices,
-  onChoice,
-  isLoading,
-  showScreenshot,
-  onScreenshot,
-  isNarratorSpeaking,
-  stopNarration,
-  playNarration,
-}) {
-  // Calculer le nombre total d'images dans tous les segments de ce layout
+function ComicPage({ layout, layoutIndex, isLastPage, preloadedImages }) {
+  const {
+    handlePageLoaded,
+    choices,
+    onChoice,
+    isLoading,
+    isNarratorSpeaking,
+    stopNarration,
+    playNarration,
+    heroName,
+  } = useGame();
+  const [loadedImages, setLoadedImages] = useState(new Set());
+  const pageLoadedRef = useRef(false);
+  const loadingTimeoutRef = useRef(null);
   const totalImages = layout.segments.reduce((total, segment) => {
     return total + (segment.images?.length || 0);
   }, 0);
 
-  console.log("ComicPage layout:", {
-    type: layout.type,
-    totalImages,
-    segments: layout.segments,
-    isLastPage,
-    hasChoices: choices?.length > 0,
-    showScreenshot,
+  // Son d'écriture
+  const playWritingSound = useSoundEffect({
+    basePath: "/sounds/drawing-",
+    numSounds: 5,
+    volume: 0.3,
   });
 
+  const handleImageLoad = useCallback((imageId) => {
+    setLoadedImages((prev) => {
+      // Si l'image est déjà chargée, ne rien faire
+      if (prev.has(imageId)) {
+        return prev;
+      }
+
+      const newSet = new Set(prev);
+      newSet.add(imageId);
+      return newSet;
+    });
+  }, []);
+
+  useEffect(() => {
+    // Si la page a déjà été marquée comme chargée, ne rien faire
+    if (pageLoadedRef.current) return;
+
+    // Nettoyer le timeout précédent si existant
+    if (loadingTimeoutRef.current) {
+      clearTimeout(loadingTimeoutRef.current);
+    }
+
+    // Générer les IDs attendus pour cette page
+    const expectedImageIds = Array.from(
+      { length: totalImages },
+      (_, i) => `page-${layoutIndex}-image-${i}`
+    );
+
+    // Vérifier si toutes les images de la page sont chargées
+    const allImagesLoaded = expectedImageIds.every((id) =>
+      loadedImages.has(id)
+    );
+
+    if (allImagesLoaded && totalImages > 0) {
+      // Utiliser un timeout pour éviter les appels trop fréquents
+      loadingTimeoutRef.current = setTimeout(() => {
+        if (!pageLoadedRef.current) {
+          console.log(`Page ${layoutIndex} entièrement chargée`);
+          pageLoadedRef.current = true;
+          handlePageLoaded(layoutIndex);
+          playWritingSound();
+        }
+      }, 100);
+    }
+
+    return () => {
+      if (loadingTimeoutRef.current) {
+        clearTimeout(loadingTimeoutRef.current);
+      }
+    };
+  }, [
+    loadedImages,
+    totalImages,
+    layoutIndex,
+    handlePageLoaded,
+    playWritingSound,
+  ]);
+
+  // console.log("ComicPage layout:", {
+  //   type: layout.type,
+  //   totalImages,
+  //   loadedImages: loadedImages.size,
+  //   segments: layout.segments,
+  //   isLastPage,
+  //   hasChoices: choices?.length > 0,
+  //   showScreenshot,
+  // });
+
   return (
     <Box
       sx={{
@@ -74,6 +166,14 @@ function ComicPage({
               if (currentImageIndex + segmentImageCount > panelIndex) {
                 targetSegment = segment;
                 targetImageIndex = panelIndex - currentImageIndex;
+                // console.log("Found image for panel:", {
+                //   panelIndex,
+                //   targetImageIndex,
+                //   hasImages: !!segment.images,
+                //   imageCount: segment.images?.length,
+                //   imageDataSample:
+                //     segment.images?.[targetImageIndex]?.slice(0, 50) + "...",
+                // });
                 break;
               }
               currentImageIndex += segmentImageCount;
@@ -85,6 +185,11 @@ function ComicPage({
                 panel={panel}
                 segment={targetSegment}
                 panelIndex={targetImageIndex}
+                totalImagesInPage={totalImages}
+                onImageLoad={() =>
+                  handleImageLoad(`page-${layoutIndex}-image-${panelIndex}`)
+                }
+                imageId={`page-${layoutIndex}-image-${panelIndex}`}
               />
             );
           })}
@@ -108,66 +213,171 @@ function ComicPage({
           sx={{
             position: "absolute",
             left: "100%",
-            top: "50%",
+            top: "75%",
             transform: "translateY(-50%)",
             display: "flex",
             flexDirection: "column",
             gap: 2,
             width: "350px",
             ml: 4,
+            backgroundColor: "transparent",
           }}
         >
-          <StoryChoices
-            choices={choices}
-            onChoice={onChoice}
-            disabled={isLoading}
-            isLastStep={
-              layout.segments[layout.segments.length - 1]?.is_last_step
-            }
-            isGameOver={
-              layout.segments[layout.segments.length - 1]?.isDeath ||
-              layout.segments[layout.segments.length - 1]?.isVictory
-            }
-            isDeath={layout.segments[layout.segments.length - 1]?.isDeath}
-            isVictory={layout.segments[layout.segments.length - 1]?.isVictory}
-            isNarratorSpeaking={isNarratorSpeaking}
-            stopNarration={stopNarration}
-            playNarration={playNarration}
-            storyText={
-              layout.segments[layout.segments.length - 1]?.rawText || ""
-            }
-          />
+          <StoryChoices />
         </Box>
       )}
     </Box>
   );
 }
 
+// Cache global pour stocker les images préchargées
+const imageCache = new Map();
+
 // Main comic layout component
-export function ComicLayout({
-  segments,
-  choices,
-  onChoice,
-  isLoading,
-  showScreenshot,
-  onScreenshot,
-  isNarratorSpeaking,
-  stopNarration,
-  playNarration,
-}) {
+export function ComicLayout() {
+  const {
+    segments,
+    isLoading,
+    playNarration,
+    stopNarration,
+    isNarratorSpeaking,
+  } = useGame();
   const scrollContainerRef = useRef(null);
+  const [preloadedImages, setPreloadedImages] = useState(new Map());
+  const preloadingRef = useRef(false);
+
+  const loadImage = async (imageData, imageId) => {
+    // Vérifier si l'image est valide
+    if (!imageData || typeof imageData !== "string" || imageData.length === 0) {
+      console.warn(
+        `Image invalide pour ${imageId}: données manquantes ou invalides`
+      );
+      return Promise.reject(new Error("Données d'image invalides"));
+    }
+
+    // Si l'image est déjà dans le cache, ne pas la recharger
+    if (imageCache.has(imageId)) {
+      return imageCache.get(imageId);
+    }
+
+    // Si l'image est déjà en cours de chargement, ne pas la recharger
+    if (preloadingRef.current.has(imageId)) {
+      return;
+    }
+
+    preloadingRef.current.add(imageId);
+
+    try {
+      const img = new Image();
+      const imagePromise = new Promise((resolve, reject) => {
+        img.onload = () => {
+          imageCache.set(imageId, imageData);
+          preloadingRef.current.delete(imageId);
+          resolve(imageData);
+        };
+        img.onerror = (error) => {
+          preloadingRef.current.delete(imageId);
+          console.warn(`Échec du chargement de l'image ${imageId}`, error);
+          reject(new Error(`Échec du chargement de l'image ${imageId}`));
+        };
+      });
+
+      img.src = `data:image/jpeg;base64,${imageData}`;
+      return await imagePromise;
+    } catch (error) {
+      preloadingRef.current.delete(imageId);
+      throw error;
+    }
+  };
+
+  // Précharger les images pour tous les segments
+  useEffect(() => {
+    if (!segments?.length) return;
+
+    preloadingRef.current = new Set();
+    const newPreloadedImages = new Map();
+
+    const loadAllImages = async () => {
+      for (
+        let segmentIndex = 0;
+        segmentIndex < segments.length;
+        segmentIndex++
+      ) {
+        const segment = segments[segmentIndex];
+
+        // Vérifier si le segment et ses images sont valides
+        if (!segment?.images?.length) {
+          console.warn(`Segment ${segmentIndex} invalide ou sans images`);
+          continue;
+        }
+
+        for (
+          let imageIndex = 0;
+          imageIndex < segment.images.length;
+          imageIndex++
+        ) {
+          const imageData = segment.images[imageIndex];
+          const imageId = `segment-${segmentIndex}-image-${imageIndex}`;
+
+          try {
+            if (!imageData) {
+              console.warn(`Image manquante: ${imageId}`);
+              newPreloadedImages.set(imageId, false);
+              continue;
+            }
+
+            await loadImage(imageData, imageId);
+            newPreloadedImages.set(imageId, true);
+          } catch (error) {
+            console.warn(
+              `Erreur lors du chargement de ${imageId}:`,
+              error.message
+            );
+            newPreloadedImages.set(imageId, false);
+          }
+        }
+      }
+      setPreloadedImages(new Map(newPreloadedImages));
+    };
+
+    loadAllImages();
+
+    return () => {
+      preloadingRef.current = new Set();
+    };
+  }, [segments]);
 
   // Effect to scroll to the right when segments are loaded
   useEffect(() => {
     const loadedSegments = segments.filter((segment) => !segment.isLoading);
-    // Scroll à droite seulement si on a au moins un segment chargé
-    if (scrollContainerRef.current && loadedSegments.length > 0) {
+    const lastSegment = loadedSegments[loadedSegments.length - 1];
+    const hasNewSegment = lastSegment && !lastSegment.hasBeenRead;
+
+    if (scrollContainerRef.current && hasNewSegment) {
+      // Arrêter la narration en cours
+      stopNarration();
+
+      // Scroll to the right
       scrollContainerRef.current.scrollTo({
         left: scrollContainerRef.current.scrollWidth,
         behavior: "smooth",
       });
+
+      // Attendre que le scroll soit terminé avant de démarrer la narration
+      const timeoutId = setTimeout(() => {
+        if (lastSegment && lastSegment.text) {
+          playNarration(lastSegment.text);
+          // Marquer le segment comme lu
+          lastSegment.hasBeenRead = true;
+        }
+      }, 500);
+
+      return () => {
+        clearTimeout(timeoutId);
+        stopNarration();
+      };
     }
-  }, [segments]); // Se déclenche à chaque modification des segments
+  }, [segments, playNarration, stopNarration]);
 
   // Prevent back/forward navigation on trackpad horizontal scroll
   useEffect(() => {
@@ -192,8 +402,7 @@ export function ComicLayout({
     return () => container.removeEventListener("wheel", handleWheel);
   }, []);
 
-  // Filtrer les segments qui sont en cours de chargement
-  const loadedSegments = segments.filter((segment) => !segment.isLoading);
+  const loadedSegments = segments.filter((segment) => segment.text);
   const layouts = groupSegmentsIntoLayouts(loadedSegments);
 
   return (
@@ -207,17 +416,17 @@ export function ComicLayout({
         height: "100%",
         width: "100%",
         px: layouts[0]?.type === "COVER" ? "calc(50% - (90vh * 0.5 * 0.5))" : 0,
-        py: 8, // 24px de padding vertical
+        py: 8,
         overflowX: "auto",
         overflowY: "hidden",
         "&::-webkit-scrollbar": {
           height: "0px",
         },
         "&::-webkit-scrollbar-track": {
-          backgroundColor: "grey.200",
+          backgroundColor: "grey.800",
         },
         "&::-webkit-scrollbar-thumb": {
-          backgroundColor: "grey.400",
+          backgroundColor: "grey.700",
           borderRadius: "4px",
         },
       }}
@@ -228,16 +437,12 @@ export function ComicLayout({
           layout={layout}
           layoutIndex={layoutIndex}
           isLastPage={layoutIndex === layouts.length - 1}
-          choices={choices}
-          onChoice={onChoice}
-          isLoading={isLoading}
-          showScreenshot={showScreenshot}
-          onScreenshot={onScreenshot}
-          isNarratorSpeaking={isNarratorSpeaking}
-          stopNarration={stopNarration}
-          playNarration={playNarration}
+          preloadedImages={preloadedImages}
         />
       ))}
+      {isLoading && !layouts[layouts.length - 1]?.segments[0]?.is_last_step && (
+        <LoadingPage />
+      )}
     </Box>
   );
 }

client/src/layouts/Panel.jsx

@@ -1,131 +1,170 @@
 import { Box, CircularProgress, Typography } from "@mui/material";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
+
+// Cache global pour les images déjà chargées
+const imageCache = new Map();
+const loadedImagesState = new Map();
 
 // Component for displaying a single panel
-export function Panel({ segment, panel, panelIndex }) {
-  const [imageLoaded, setImageLoaded] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
+export function Panel({
+  panel,
+  segment,
+  panelIndex,
+  totalImagesInPage,
+  onImageLoad,
+  imageId,
+}) {
+  const [imageLoaded, setImageLoaded] = useState(
+    () => loadedImagesState.get(imageId) || false
+  );
+  const [imageDisplayed, setImageDisplayed] = useState(
+    () => loadedImagesState.get(imageId) || false
+  );
+  const hasImage = segment?.images?.[panelIndex];
+  const isFirstPanel = panelIndex === 0;
+  const imgRef = useRef(null);
+  const imageDataRef = useRef(null);
+  const mountedRef = useRef(true);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
 
-  // Reset states when the image changes
+  // Gérer le chargement initial de l'image
   useEffect(() => {
-    const hasImage = !!segment?.images?.[panelIndex];
+    if (!hasImage || loadedImagesState.get(imageId)) return;
 
-    // Ne réinitialiser les états que si on n'a pas d'image
-    if (!hasImage) {
-      setImageLoaded(false);
-      setIsLoading(true);
+    // Créer un blob URL unique pour cette image si pas déjà en cache
+    if (!imageCache.has(imageId)) {
+      const byteCharacters = atob(segment.images[panelIndex]);
+      const byteNumbers = new Array(byteCharacters.length);
+      for (let i = 0; i < byteCharacters.length; i++) {
+        byteNumbers[i] = byteCharacters.charCodeAt(i);
+      }
+      const byteArray = new Uint8Array(byteNumbers);
+      const blob = new Blob([byteArray], { type: "image/jpeg" });
+      const blobUrl = URL.createObjectURL(blob);
+      imageCache.set(imageId, blobUrl);
+      imageDataRef.current = blobUrl;
+    } else {
+      imageDataRef.current = imageCache.get(imageId);
     }
-  }, [segment?.images?.[panelIndex]]);
 
-  // Log component state changes
-  useEffect(() => {}, [imageLoaded, isLoading, segment, panelIndex]);
+    const img = new Image();
+    img.onload = () => {
+      if (!mountedRef.current) return;
+      setImageLoaded(true);
+      loadedImagesState.set(imageId, true);
+      onImageLoad();
+    };
+    img.src = imageDataRef.current;
+
+    return () => {
+      img.onload = null;
+    };
+  }, [hasImage, imageId, onImageLoad]);
+
+  // Nettoyer le blob URL quand le composant est démonté
+  useEffect(() => {
+    return () => {
+      if (imageDataRef.current && !imageCache.has(imageId)) {
+        URL.revokeObjectURL(imageDataRef.current);
+      }
+    };
+  }, [imageId]);
+
+  // Gérer la transition d'affichage
+  useEffect(() => {
+    if (!imageLoaded) return;
 
-  const handleImageLoad = () => {
-    setImageLoaded(true);
-    setIsLoading(false);
-  };
+    const timeoutId = setTimeout(() => {
+      if (!mountedRef.current) return;
+      setImageDisplayed(true);
+    }, 50);
 
-  const handleImageError = (error) => {
-    console.error(`[Panel ${panelIndex}] Image loading error:`, error);
-    setIsLoading(false);
-  };
+    return () => clearTimeout(timeoutId);
+  }, [imageLoaded]);
 
   return (
     <Box
       sx={{
-        position: "relative",
-        width: "100%",
-        height: "100%",
         gridColumn: panel.gridColumn,
         gridRow: panel.gridRow,
-        bgcolor: "white",
-        border: "1px solid",
-        borderColor: "grey.200",
-        borderRadius: "8px",
+        backgroundColor: "grey.200",
+        borderRadius: "4px",
         overflow: "hidden",
-        transition: "all 0.3s ease-in-out",
-        aspectRatio: `${panel.width} / ${panel.height}`, // Forcer le ratio même sans image
+        position: "relative",
       }}
     >
-      {segment && (
-        <>
-          {/* Conteneur d'image avec dimensions fixes */}
-          <Box
+      {hasImage && imageDataRef.current && (
+        <img
+          ref={imgRef}
+          src={imageDataRef.current}
+          alt={`Panel ${imageId}`}
+          style={{
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            opacity: imageDisplayed ? 1 : 0,
+            transition: "opacity 0.5s ease-in-out",
+            willChange: "opacity",
+          }}
+          loading="eager"
+          decoding="sync"
+        />
+      )}
+      {(!hasImage || !imageDisplayed) && (
+        <Box
+          sx={{
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "grey.300",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            opacity: imageDisplayed ? 0 : 1,
+            transition: "opacity 0.5s ease-in-out",
+          }}
+        >
+          <CircularProgress size={24} />
+        </Box>
+      )}
+      {isFirstPanel && segment?.text && (
+        <Box
+          sx={{
+            position: "absolute",
+            bottom: 16,
+            left: 16,
+            right: 16,
+            padding: "12px 16px",
+            background: "rgba(255, 255, 255, 0.95)",
+            color: "black",
+            textAlign: "center",
+            fontSize: "1rem",
+            fontWeight: 500,
+            borderRadius: "8px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+          }}
+        >
+          <Typography
+            variant="body1"
             sx={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              opacity: imageLoaded ? 1 : 0,
-              transition: "opacity 0.5s ease-in-out",
+              color: "black",
+              lineHeight: 1.4,
             }}
           >
-            {segment.images?.[panelIndex] && (
-              <img
-                src={`data:image/jpeg;base64,${segment.images[panelIndex]}`}
-                alt={`Story scene ${panelIndex + 1}`}
-                style={{
-                  width: "100%",
-                  height: "100%",
-                  objectFit: "cover",
-                  borderRadius: "8px",
-                }}
-                onLoad={handleImageLoad}
-                onError={handleImageError}
-              />
-            )}
-          </Box>
-
-          {/* Spinner de chargement */}
-          {(!segment.images?.[panelIndex] || !imageLoaded) && (
-            <Box
-              sx={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                opacity: 0.5,
-                backgroundColor: "white",
-                zIndex: 1,
-              }}
-            >
-              <CircularProgress size={10} />
-            </Box>
-          )}
-
-          {/* Texte du segment (uniquement sur le premier panel) */}
-          {panelIndex === 0 && segment.text && (
-            <Box
-              sx={{
-                position: "absolute",
-                bottom: "20px",
-                left: "20px",
-                right: "20px",
-                backgroundColor: "rgba(255, 255, 255, 0.9)",
-                fontSize: ".9rem",
-                padding: "10px",
-                borderRadius: "8px",
-                boxShadow: "0 -2px 4px rgba(0,0,0,0.1)",
-                zIndex: 2,
-                color: "black",
-                "& .MuiChip-root": {
-                  color: "black",
-                  borderColor: "black",
-                },
-              }}
-            >
-              {segment.text}
-            </Box>
-          )}
-        </>
+            {segment.text}
+          </Typography>
+        </Box>
       )}
     </Box>
   );

client/src/layouts/config.js

@@ -51,8 +51,8 @@ export const LAYOUTS = {
     gridRows: 2,
     panels: [
       { ...PANEL_SIZES.LANDSCAPE, gridColumn: GRID.TWO_THIRDS, gridRow: "1" }, // Wide landscape top left
-      { ...PANEL_SIZES.PORTRAIT, gridColumn: "3", gridRow: "1" }, // Portrait top right
-      { ...PANEL_SIZES.PORTRAIT, gridColumn: "1", gridRow: "2" }, // Portrait bottom left
+      { ...PANEL_SIZES.COLUMN, gridColumn: "3", gridRow: "1" }, // COLUMN top right
+      { ...PANEL_SIZES.COLUMN, gridColumn: "1", gridRow: "2" }, // COLUMN bottom left
       { ...PANEL_SIZES.LANDSCAPE, gridColumn: "2 / span 2", gridRow: "2" }, // Wide landscape bottom right
     ],
   },
@@ -77,7 +77,7 @@ export const LAYOUTS = {
       { ...PANEL_SIZES.PANORAMIC, gridColumn: GRID.FULL_WIDTH, gridRow: "1" }, // Wide panoramic top
       { ...PANEL_SIZES.COLUMN, gridColumn: "1", gridRow: "2 / span 2" }, // Tall portrait left
       {
-        ...PANEL_SIZES.LANDSCAPE,
+        ...PANEL_SIZES.POTRAIT,
         gridColumn: "2 / span 2",
         gridRow: "2 / span 2",
       }, // Large square right
@@ -101,34 +101,45 @@ export const nonRandomLayouts = Object.keys(LAYOUTS).filter(
 // Grouper les layouts par nombre de panneaux
 export const LAYOUTS_BY_PANEL_COUNT = {
   1: ["COVER"],
-  2: ["LAYOUT_7"], // Layouts avec exactement 2 panneaux
-  3: ["LAYOUT_5"], // Layouts avec exactement 3 panneaux
-  4: ["LAYOUT_3"], // Layouts avec exactement 4 panneaux
+  2: ["LAYOUT_7"],
+  3: ["LAYOUT_2", "LAYOUT_5"],
+  4: ["LAYOUT_1", "LAYOUT_3", "LAYOUT_4"],
 };
 
 // Helper functions for layout configuration
-export const getNextLayoutType = (currentLayoutCount, imageCount) => {
-  // Obtenir les layouts disponibles pour ce nombre d'images
-  const availableLayouts = LAYOUTS_BY_PANEL_COUNT[imageCount] || [];
+export const getNextLayoutType = (layoutCounter, imageCount) => {
+  console.log("Getting layout for", { layoutCounter, imageCount });
 
-  if (!availableLayouts.length) {
-    // Si aucun layout n'est disponible pour ce nombre d'images exact,
-    // utiliser le premier layout qui peut contenir au moins ce nombre d'images
-    for (let i = imageCount + 1; i <= 4; i++) {
-      if (LAYOUTS_BY_PANEL_COUNT[i]?.length) {
-        availableLayouts.push(...LAYOUTS_BY_PANEL_COUNT[i]);
-        break;
-      }
-    }
+  // Si pas d'images ou nombre invalide, utiliser COVER
+  if (!imageCount || imageCount <= 0) {
+    console.log("No images or invalid count, using COVER layout");
+    return "COVER";
   }
 
-  if (!availableLayouts.length) {
-    return "LAYOUT_1"; // Layout par défaut si rien ne correspond
+  // Si on n'a qu'une seule image, toujours utiliser COVER
+  if (imageCount === 1) {
+    console.log("Single image, using COVER layout");
+    return "COVER";
+  }
+
+  // Obtenir les layouts disponibles pour ce nombre d'images
+  const availableLayouts = LAYOUTS_BY_PANEL_COUNT[imageCount];
+
+  // Si on n'a pas de layout pour ce nombre d'images, utiliser COVER par défaut
+  if (!availableLayouts) {
+    console.warn(
+      `No layout available for ${imageCount} images, falling back to COVER`
+    );
+    return "COVER";
   }
 
-  // Sélectionner un layout aléatoire parmi ceux disponibles
-  const randomIndex = Math.floor(Math.random() * availableLayouts.length);
-  return availableLayouts[randomIndex];
+  // Sélectionner un layout de manière cyclique
+  const layoutIndex = layoutCounter % availableLayouts.length;
+  const selectedLayout = availableLayouts[layoutIndex];
+  console.log(
+    `Selected ${selectedLayout} for ${imageCount} images (layout counter: ${layoutCounter})`
+  );
+  return selectedLayout;
 };
 
 export const getLayoutDimensions = (layoutType, panelIndex) =>

client/src/layouts/utils.js

@@ -10,7 +10,18 @@ export function groupSegmentsIntoLayouts(segments) {
   const layouts = [];
 
   segments.forEach((segment, index) => {
-    const imageCount = segment.images?.length || 0;
+    // Ne pas créer de layout si le segment n'a pas d'images chargées
+    if (!segment.images || segment.images.length === 0) {
+      return;
+    }
+
+    const imageCount = segment.images.length;
+
+    // Si le segment a déjà un layoutType défini, l'utiliser
+    if (segment.layoutType) {
+      layouts.push({ type: segment.layoutType, segments: [segment] });
+      return;
+    }
 
     // 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) {

client/src/main.jsx

@@ -8,6 +8,7 @@ import { Home } from "./pages/Home";
 import { Game } from "./pages/Game";
 import { Tutorial } from "./pages/Tutorial";
 import Debug from "./pages/Debug";
+import { Universe } from "./pages/Universe";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
@@ -19,6 +20,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
         <Route path="/game" element={<Game />} />
         <Route path="/tutorial" element={<Tutorial />} />
         <Route path="/debug" element={<Debug />} />
+        <Route path="/universe" element={<Universe />} />
       </Routes>
     </BrowserRouter>
   </ThemeProvider>

client/src/pages/Debug.jsx

@@ -86,6 +86,7 @@ const Debug = () => {
         universe_genre: universe?.genre,
         universe_epoch: universe?.epoch,
         universe_macguffin: universe?.macguffin,
+        universe_selected_artist: universe?.style?.selected_artist,
         story_beat: 0,
         story_history: [initialHistoryEntry],
       });

client/src/pages/Game.jsx

@@ -5,12 +5,13 @@ import VolumeUpIcon from "@mui/icons-material/VolumeUp";
 import { Box, IconButton, LinearProgress, Tooltip } from "@mui/material";
 import { motion } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 import { ErrorDisplay } from "../components/ErrorDisplay";
 import { LoadingScreen } from "../components/LoadingScreen";
-import { StoryChoices } from "../components/StoryChoices";
 import { TalkWithSarah } from "../components/TalkWithSarah";
+import { GameDebugPanel } from "../components/GameDebugPanel";
+import { UniverseSlotMachine } from "../components/UniverseSlotMachine";
 import { useGameSession } from "../hooks/useGameSession";
 import { useNarrator } from "../hooks/useNarrator";
 import { usePageSound } from "../hooks/usePageSound";
@@ -18,47 +19,71 @@ import { useStoryCapture } from "../hooks/useStoryCapture";
 import { useTransitionSound } from "../hooks/useTransitionSound";
 import { useWritingSound } from "../hooks/useWritingSound";
 import { ComicLayout } from "../layouts/ComicLayout";
-import { getNextLayoutType, LAYOUTS } from "../layouts/config";
-import { storyApi } from "../utils/api";
+import { storyApi, universeApi } from "../utils/api";
+import { GameProvider, useGame } from "../contexts/GameContext";
 
 // Constants
 const SOUND_ENABLED_KEY = "sound_enabled";
+const GAME_INITIALIZED_KEY = "game_initialized";
 
-// Function to convert text with ** to Chip elements
-const formatTextWithBold = (text, isInPanel = false) => {
-  if (!text) return "";
-  const parts = text.split(/(\*\*.*?\*\*)/g);
-  return parts.map((part, index) => {
-    if (part.startsWith("**") && part.endsWith("**")) {
-      return part.slice(2, -2);
-    }
-    return part;
-  });
-};
-
-// Function to strip bold markers from text for narration
-const stripBoldMarkers = (text) => {
-  return text.replace(/\*\*/g, "");
-};
-
-export function Game() {
+function GameContent() {
   const navigate = useNavigate();
+  const { universeId } = useParams();
+  const {
+    segments,
+    setSegments,
+    choices,
+    setChoices,
+    isLoading,
+    setIsLoading,
+    heroName,
+    setHeroName,
+    showChoices,
+    setShowChoices,
+    error,
+    setError,
+    gameState,
+    setGameState,
+    currentStory,
+    setCurrentStory,
+    universe,
+    setUniverse,
+    slotMachineState,
+    setSlotMachineState,
+    showSlotMachine,
+    setShowSlotMachine,
+    isInitialLoading,
+    setIsInitialLoading,
+    showLoadingMessages,
+    setShowLoadingMessages,
+    isTransitionLoading,
+    setIsTransitionLoading,
+    layoutCounter,
+    setLayoutCounter,
+    resetGame,
+    generateImagesForStory,
+  } = useGame();
+
   const storyContainerRef = useRef(null);
   const { downloadStoryImage } = useStoryCapture();
-  const [storySegments, setStorySegments] = useState([]);
-  const [currentChoices, setCurrentChoices] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [showChoices, setShowChoices] = useState(true);
-  const [error, setError] = useState(null);
+  const [audioInitialized, setAudioInitialized] = useState(false);
   const [isSoundEnabled, setIsSoundEnabled] = useState(() => {
     const stored = localStorage.getItem(SOUND_ENABLED_KEY);
     return stored === null ? true : stored === "true";
   });
   const [loadingMessage, setLoadingMessage] = useState(0);
+  const [isDebugVisible, setIsDebugVisible] = useState(false);
+
   const messages = [
-    "waking up a sleepy AI...",
     "teaching robots to tell bedtime stories...",
     "bribing pixels to make pretty pictures...",
+    "calibrating the multiverse...",
+  ];
+  const transitionMessages = [
+    "Creating your universe...",
+    "Drawing the first scene...",
+    "Preparing your story...",
+    "Assembling the comic panels...",
   ];
 
   const { isNarratorSpeaking, playNarration, stopNarration } =
@@ -68,236 +93,189 @@ export function Game() {
   const playTransitionSound = useTransitionSound(isSoundEnabled);
   const {
     sessionId,
-    universe,
+    universe: gameUniverse,
     isLoading: isSessionLoading,
     error: sessionError,
   } = useGameSession();
 
-  // Jouer le son de transition une fois que la session est chargée
+  // Initialize audio after user interaction
   useEffect(() => {
-    if (!isSessionLoading && sessionId && !error && !sessionError) {
-      setTimeout(() => {
-        playTransitionSound();
-      }, 100);
+    const handleUserInteraction = () => {
+      if (!audioInitialized) {
+        // Create and resume audio context
+        const AudioContext = window.AudioContext || window.webkitAudioContext;
+        const audioCtx = new AudioContext();
+        audioCtx.resume().then(() => {
+          setAudioInitialized(true);
+          // Remove event listeners after initialization
+          window.removeEventListener("click", handleUserInteraction);
+          window.removeEventListener("keydown", handleUserInteraction);
+          window.removeEventListener("touchstart", handleUserInteraction);
+        });
+      }
+    };
+
+    window.addEventListener("click", handleUserInteraction);
+    window.addEventListener("keydown", handleUserInteraction);
+    window.addEventListener("touchstart", handleUserInteraction);
+
+    return () => {
+      window.removeEventListener("click", handleUserInteraction);
+      window.removeEventListener("keydown", handleUserInteraction);
+      window.removeEventListener("touchstart", handleUserInteraction);
+    };
+  }, [audioInitialized]);
+
+  // Modify the transition sound effect to only play if audio is initialized
+  useEffect(() => {
+    if (
+      !isSessionLoading &&
+      sessionId &&
+      !error &&
+      !sessionError &&
+      audioInitialized
+    ) {
+      playTransitionSound();
     }
-  }, [isSessionLoading, sessionId, error, sessionError]);
+  }, [isSessionLoading, sessionId, error, sessionError, audioInitialized]);
+
+  // Jouer le son de transition quand on passe de la slot machine au jeu
+  useEffect(() => {
+    if (!isInitialLoading && audioInitialized) {
+      playTransitionSound();
+    }
+  }, [isInitialLoading, audioInitialized, playTransitionSound]);
 
   // Sauvegarder l'état du son dans le localStorage
   useEffect(() => {
     localStorage.setItem(SOUND_ENABLED_KEY, isSoundEnabled);
   }, [isSoundEnabled]);
 
-  // Start the story when session is ready
-  useEffect(() => {
-    if (sessionId && !isSessionLoading) {
-      handleStoryAction("restart");
-    }
-  }, [sessionId, isSessionLoading]);
-
   // Add effect for message rotation
   useEffect(() => {
-    if (isLoading && storySegments.length === 0) {
+    if (showLoadingMessages) {
       const interval = setInterval(() => {
         setLoadingMessage((prev) => (prev + 1) % messages.length);
       }, 3000);
       return () => clearInterval(interval);
     }
-  }, [isLoading, storySegments.length]);
+  }, [showLoadingMessages]);
 
-  const handleBack = () => {
-    playPageSound();
-    navigate("/tutorial");
-  };
+  // Handle keyboard events for debug panel
+  useEffect(() => {
+    const handleKeyPress = (event) => {
+      if (event.key.toLowerCase() === "d") {
+        setIsDebugVisible((prev) => !prev);
+      }
+    };
 
-  const handleChoice = async (choiceId) => {
-    playPageSound();
+    window.addEventListener("keydown", handleKeyPress);
+    return () => window.removeEventListener("keydown", handleKeyPress);
+  }, []);
 
-    setShowChoices(false); // Cacher les choix dès qu'on clique
-    // Si c'est l'option "Réessayer", on relance la dernière action
-    if (currentChoices.length === 1 && currentChoices[0].text === "Réessayer") {
-      // Supprimer le segment d'erreur
-      setStorySegments((prev) => prev.slice(0, -1));
-      // Réessayer la dernière action
-      await handleStoryAction(
-        "choice",
-        storySegments[storySegments.length - 2]?.choiceId || null
-      );
-      return;
+  // Update game state when story segments change
+  useEffect(() => {
+    if (segments.length > 0) {
+      const lastSegment = segments[segments.length - 1];
+      setCurrentStory(lastSegment);
+      setGameState((prev) => ({
+        ...prev,
+        story_beat: segments.length - 1,
+        story_history: segments,
+      }));
     }
+  }, [segments]);
 
-    // Ajouter le choix comme segment
-    const choice = currentChoices.find((c) => c.id === choiceId);
-    setStorySegments((prev) => [
-      ...prev,
-      {
-        text: choice.text,
-        rawText: stripBoldMarkers(choice.text),
-        isChoice: true,
-        choiceId: choiceId,
-      },
-    ]);
-
-    // Continuer l'histoire avec ce choix
-    await handleStoryAction("choice", choiceId);
-  };
-
-  const handleStoryAction = async (action, choiceId = null) => {
-    setIsLoading(true);
-    setShowChoices(false);
-    setError(null);
-    try {
-      if (isNarratorSpeaking) {
-        stopNarration();
-      }
-
-      // Pass sessionId to API calls
-      const storyData = await (action === "restart"
-        ? storyApi.start(sessionId)
-        : storyApi.makeChoice(choiceId, sessionId));
+  // Initialize game state with universe info
+  useEffect(() => {
+    if (gameUniverse) {
+      setGameState({
+        universe_style: gameUniverse.style,
+        universe_genre: gameUniverse.genre,
+        universe_epoch: gameUniverse.epoch,
+        universe_macguffin: gameUniverse.macguffin,
+        hero_name: gameUniverse.hero_name || "the hero",
+        story_beat: 0,
+        story_history: [],
+      });
+    }
+  }, [gameUniverse]);
 
-      if (!storyData) {
-        throw new Error("Pas de données reçues du serveur");
-      }
+  // Charger l'univers initial
+  useEffect(() => {
+    const loadUniverse = async () => {
+      setIsLoading(true);
+      try {
+        const universeData = await universeApi.generate();
+        console.log("Universe Data:", universeData);
+
+        // Mettre à jour la slot machine avec les données de l'univers
+        setSlotMachineState({
+          style: universeData.style.name,
+          genre: universeData.genre,
+          epoch: universeData.epoch,
+          activeIndex: 3, // Pour montrer que tous les slots sont remplis
+        });
+
+        setHeroName(universeData.hero_name);
+        setUniverse(universeData);
+
+        // Démarrer l'histoire
+        const response = await storyApi.start(universeData.session_id);
+        console.log("Initial Story Response:", response);
+
+        // Formater le segment avec le bon format
+        const formattedSegment = {
+          text: response.story_text,
+          rawText: response.story_text,
+          choices: response.choices || [],
+          isLoading: false,
+          images: [],
+          isDeath: response.is_death || false,
+          isVictory: response.is_victory || false,
+          time: response.time,
+          location: response.location,
+          session_id: universeData.session_id,
+        };
+
+        setSegments([formattedSegment]);
+        setChoices(response.choices);
+
+        // Générer les images pour le premier segment
+        if (response.image_prompts && response.image_prompts.length > 0) {
+          await generateImagesForStory(response.image_prompts, 0, [
+            formattedSegment,
+          ]);
+        }
 
-      // 2. Create new segment without images
-      const newSegment = {
-        text: formatTextWithBold(storyData.story_text, true),
-        rawText: stripBoldMarkers(storyData.story_text), // Store raw text for narration
-        isChoice: false,
-        isDeath: storyData.is_death,
-        isVictory: storyData.is_victory,
-        is_first_step: storyData.is_first_step,
-        is_last_step: storyData.is_last_step,
-        images: [],
-        isLoading: true, // Ajout d'un flag pour indiquer que le segment est en cours de chargement
-      };
-
-      playWritingSound();
-
-      // 3. Update segments
-      if (action === "restart") {
-        setStorySegments([newSegment]);
-      } else {
-        setStorySegments((prev) => [...prev, newSegment]);
+        // La slot machine sera cachée automatiquement via le callback onComplete
+        setShowSlotMachine(false);
+      } catch (error) {
+        console.error("Error loading universe:", error);
+        setError(error);
+      } finally {
+        setIsLoading(false);
       }
+    };
 
-      // 4. Update choices
-      setCurrentChoices(storyData.choices || []);
-
-      // 5. Start narration of the new segment
-      await playNarration(newSegment.rawText);
-
-      // 6. Generate images in parallel
-      if (storyData.image_prompts && storyData.image_prompts.length > 0) {
-        await generateImagesForStory(
-          storyData.image_prompts,
-          action === "restart" ? 0 : storySegments.length,
-          action === "restart" ? [newSegment] : [...storySegments, newSegment]
-        );
-      } else {
-        // Si pas d'images, marquer le segment comme chargé
-        const updatedSegment = { ...newSegment, isLoading: false };
-        if (action === "restart") {
-          setStorySegments([updatedSegment]);
-        } else {
-          setStorySegments((prev) => [...prev.slice(0, -1), updatedSegment]);
-        }
-      }
+    loadUniverse();
+    return () => resetGame(); // Nettoyer l'état quand on quitte
+  }, [universeId]);
 
-      // Réafficher les choix une fois tout chargé
-      setShowChoices(true);
-    } catch (error) {
-      console.error("Error in handleStoryAction:", error);
-      const errorMessage =
-        error.response?.data?.detail ||
-        error.message ||
-        "Le conteur d'histoires est temporairement indisponible. Veuillez réessayer dans quelques instants...";
-
-      setError(errorMessage);
-      await playNarration(errorMessage);
-    } finally {
-      setIsLoading(false);
+  // Gérer la transition vers le jeu
+  useEffect(() => {
+    if (isTransitionLoading) {
+      // Attendre 3 secondes avant de passer au jeu
+      const timer = setTimeout(() => {
+        setIsTransitionLoading(false);
+      }, 3000);
+      return () => clearTimeout(timer);
     }
-  };
-
-  const generateImagesForStory = async (
-    imagePrompts,
-    segmentIndex,
-    currentSegments
-  ) => {
-    try {
-      let localSegments = [...currentSegments];
-      const images = Array(imagePrompts.length).fill(null);
-      let allImagesGenerated = false;
-
-      // Déterminer le layout en fonction du nombre d'images
-      const layoutType = getNextLayoutType(0, imagePrompts.length);
-
-      for (
-        let promptIndex = 0;
-        promptIndex < imagePrompts.length;
-        promptIndex++
-      ) {
-        let retryCount = 0;
-        const maxRetries = 3;
-        let success = false;
-
-        // Obtenir les dimensions pour ce panneau
-        const panelDimensions = LAYOUTS[layoutType].panels[promptIndex];
-
-        while (retryCount < maxRetries && !success) {
-          try {
-            const result = await storyApi.generateImage(
-              imagePrompts[promptIndex],
-              panelDimensions.width,
-              panelDimensions.height
-            );
-
-            if (!result) {
-              throw new Error("Pas de résultat de génération d'image");
-            }
-
-            if (result.success) {
-              images[promptIndex] = result.image_base64;
-
-              // Vérifier si toutes les images sont générées
-              allImagesGenerated = images.every((img) => img !== null);
-
-              // Ne mettre à jour le segment que si toutes les images sont générées
-              if (allImagesGenerated) {
-                localSegments[segmentIndex] = {
-                  ...localSegments[segmentIndex],
-                  images,
-                  isLoading: false,
-                };
-                setStorySegments([...localSegments]);
-              }
-              success = true;
-            } else {
-              console.warn(
-                `Failed to generate image ${promptIndex + 1}, attempt ${
-                  retryCount + 1
-                }`
-              );
-              retryCount++;
-            }
-          } catch (error) {
-            console.error(`Error generating image ${promptIndex + 1}:`, error);
-            retryCount++;
-          }
-        }
+  }, [isTransitionLoading]);
 
-        if (!success) {
-          console.error(
-            `Failed to generate image ${
-              promptIndex + 1
-            } after ${maxRetries} attempts`
-          );
-        }
-      }
-    } catch (error) {
-      console.error("Error in generateImagesForStory:", error);
-    }
+  const handleBack = () => {
+    playPageSound();
+    navigate("/tutorial");
   };
 
   const handleCaptureStory = async () => {
@@ -321,16 +299,57 @@ export function Game() {
         <LoadingScreen
           icon="universe"
           messages={[
-            "Creating a new universe...",
+            "Waking up sleepy AI...",
+            "Calibrating the multiverse...",
             "Gathering comic book inspiration...",
-            "Drawing the first panels...",
-            "Setting up the story...",
+            // "Creating a new universe...",
+            // "Drawing the first panels...",
+            // "Setting up the story...",
           ]}
         />
       </Box>
     );
   }
 
+  // Afficher la slot machine pendant le chargement initial
+  if (isInitialLoading) {
+    return (
+      <Box sx={{ width: "100%", height: "100vh", backgroundColor: "#1a1a1a" }}>
+        <UniverseSlotMachine
+          style={slotMachineState.style}
+          genre={slotMachineState.genre}
+          epoch={slotMachineState.epoch}
+          activeIndex={slotMachineState.activeIndex}
+          onComplete={() => {
+            setIsInitialLoading(false);
+            setIsTransitionLoading(true);
+          }}
+        />
+      </Box>
+    );
+  }
+
+  // Afficher l'écran de transition après la slot machine
+  if (isTransitionLoading) {
+    return (
+      <Box sx={{ width: "100%", height: "100vh", backgroundColor: "#1a1a1a" }}>
+        <LoadingScreen messages={transitionMessages} icon="story" />
+      </Box>
+    );
+  }
+
+  // Afficher les messages de chargement uniquement pendant le chargement initial
+  if (isLoading && showLoadingMessages && segments.length === 0) {
+    return (
+      <Box sx={{ width: "100%", height: "100vh", backgroundColor: "#1a1a1a" }}>
+        <LoadingScreen
+          messages={messages}
+          currentMessage={messages[loadingMessage]}
+        />
+      </Box>
+    );
+  }
+
   return (
     <motion.div
       initial={{ opacity: 0 }}
@@ -340,158 +359,103 @@ export function Game() {
       style={{ backgroundColor: "#121212", width: "100%" }}
     >
       <Box
-        ref={storyContainerRef}
         sx={{
           height: "100vh",
           width: "100vw",
-          backgroundColor: "#1a1a1a",
+          backgroundColor: "grey.900",
           position: "relative",
           overflow: "hidden",
         }}
       >
-        {isLoading && (
-          <LinearProgress
-            sx={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              zIndex: 1000,
-              height: 8,
-              backgroundColor: "rgba(255, 255, 255, 0.1)",
-              "& .MuiLinearProgress-bar": {
-                backgroundColor: "rgba(255, 255, 255, 0.8)",
-                backgroundImage:
-                  "linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.2) 100%)",
-              },
-            }}
-          />
-        )}
-
-        <Tooltip title="Back to tutorial">
-          <IconButton
-            onClick={handleBack}
-            sx={{
-              position: "absolute",
-              top: 16,
-              left: 16,
-              color: "white",
-              backgroundColor: "rgba(0, 0, 0, 0.5)",
-              "&:hover": {
-                backgroundColor: "rgba(0, 0, 0, 0.7)",
-              },
-              zIndex: 1000,
-            }}
-          >
-            <ArrowBackIcon />
-          </IconButton>
-        </Tooltip>
-
-        {error ? (
-          <ErrorDisplay
-            message={error}
-            onRetry={() => {
-              if (storySegments.length === 0) {
-                handleStoryAction("restart");
-              } else {
-                handleStoryAction(
-                  "choice",
-                  storySegments[storySegments.length - 1]?.choiceId || null
-                );
-              }
-            }}
-          />
-        ) : (
-          <>
-            {isLoading && storySegments.length === 0 ? (
-              <LoadingScreen
-                icon="story"
-                messages={[
-                  "Bringing the universe to life...",
-                  "Awakening the characters...",
-                  "Polishing the first scene...",
-                  "Preparing the adventure...",
-                  "Adding final touches to the world...",
-                ]}
-              />
-            ) : (
-              <>
-                <ComicLayout
-                  segments={storySegments}
-                  choices={currentChoices}
-                  onChoice={handleChoice}
-                  isLoading={isLoading}
-                  showScreenshot={storySegments.length > 0}
-                  onScreenshot={handleCaptureStory}
-                  isNarratorSpeaking={isNarratorSpeaking}
-                  stopNarration={stopNarration}
-                  playNarration={playNarration}
-                />
-
-                {showChoices && (
-                  <StoryChoices
-                    choices={currentChoices}
-                    onChoice={handleChoice}
-                    disabled={isLoading}
-                    isLastStep={
-                      storySegments.length > 0 &&
-                      storySegments[storySegments.length - 1].isLastStep
-                    }
-                    isGameOver={
-                      storySegments.length > 0 &&
-                      storySegments[storySegments.length - 1].isGameOver
-                    }
-                    containerRef={storyContainerRef}
-                  />
-                )}
-              </>
-            )}
-            <Box
-              sx={{
-                position: "fixed",
-                top: 16,
-                right: 16,
-                display: "flex",
-                gap: 1,
-                padding: 1,
-                borderRadius: 1,
-              }}
+        {/* Header controls */}
+        <Box
+          sx={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            zIndex: 10,
+            display: "flex",
+            justifyContent: "space-between",
+            p: 2,
+            // backgroundColor: "rgba(18, 18, 18, 0.8)",
+            // backdropFilter: "blur(8px)",
+          }}
+        >
+          <Box>
+            <Tooltip title="Retour au menu">
+              <IconButton
+                onClick={() => navigate("/tutorial")}
+                sx={{ color: "white" }}
+              >
+                <ArrowBackIcon />
+              </IconButton>
+            </Tooltip>
+          </Box>
+          <Box sx={{ display: "flex", gap: 1 }}>
+            <Tooltip
+              title={isSoundEnabled ? "Désactiver le son" : "Activer le son"}
             >
-              <Tooltip title="Save your story">
-                <IconButton
-                  id="screenshot-button"
-                  onClick={handleCaptureStory}
-                  sx={{
-                    color: "white",
-                    "&:hover": {
-                      backgroundColor: "rgba(0, 0, 0, 0.7)",
-                    },
-                  }}
-                >
-                  <PhotoCameraOutlinedIcon />
-                </IconButton>
-              </Tooltip>
-              <Tooltip
-                title={isSoundEnabled ? "Couper le son" : "Activer le son"}
+              <IconButton
+                onClick={() => setIsSoundEnabled(!isSoundEnabled)}
+                sx={{ color: "white" }}
+              >
+                {isSoundEnabled ? <VolumeUpIcon /> : <VolumeOffIcon />}
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Capturer l'histoire">
+              <IconButton
+                onClick={() => downloadStoryImage(storyContainerRef)}
+                sx={{ color: "white" }}
               >
-                <IconButton
-                  onClick={() => setIsSoundEnabled(!isSoundEnabled)}
-                  sx={{
-                    color: "white",
-                    "&:hover": {
-                      backgroundColor: "rgba(0, 0, 0, 0.7)",
-                    },
-                  }}
-                >
-                  {isSoundEnabled ? <VolumeUpIcon /> : <VolumeOffIcon />}
-                </IconButton>
-              </Tooltip>
-            </Box>
-          </>
+                <PhotoCameraOutlinedIcon />
+              </IconButton>
+            </Tooltip>
+          </Box>
+        </Box>
+
+        {/* Main content */}
+        <Box
+          ref={storyContainerRef}
+          sx={{
+            height: "100%",
+            width: "100%",
+            position: "relative",
+            backgroundColor: "grey.900",
+          }}
+        >
+          {error ? (
+            <ErrorDisplay error={error} onRetry={resetGame} />
+          ) : showSlotMachine ? (
+            <UniverseSlotMachine state={slotMachineState} />
+          ) : (
+            <ComicLayout />
+          )}
+        </Box>
+
+        {isDebugVisible && (
+          <GameDebugPanel
+            gameState={gameState}
+            storySegments={segments}
+            currentChoices={choices}
+            showChoices={showChoices}
+            isLoading={isLoading}
+          />
         )}
+
+        {/* Sarah chat interface */}
+        <TalkWithSarah />
       </Box>
     </motion.div>
   );
 }
 
+export function Game() {
+  return (
+    <GameProvider>
+      <GameContent />
+    </GameProvider>
+  );
+}
+
 export default Game;

client/src/pages/Home.jsx

@@ -35,180 +35,49 @@ export function Home() {
         }}
       >
         <InfiniteBackground />
-        <Box
-          sx={{
-            position: "relative",
-            height: "80vh",
-            width: "calc(80vh * 0.66666667)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
+
+        <Typography
+          variant="h1"
+          sx={{ zIndex: 10, textAlign: "center", position: "relative" }}
         >
-          <Box
-            sx={{
-              position: "relative",
-              height: "100%",
-              width: "100%",
-              zIndex: 1,
+          interactive
+          <br /> comic book
+          <div
+            style={{
+              position: "absolute",
+              top: "-40px",
+              left: "-120px",
+              fontSize: "2.5rem",
+              transform: "rotate(-15deg)",
             }}
           >
-            <BookPages />
-            <Box
-              sx={{
-                position: "relative",
-                height: "100%",
-                width: "100%",
-                zIndex: 1,
-              }}
-            >
-              <Box
-                component="img"
-                src="/book-multiverse.webp"
-                alt="Book cover"
-                sx={{
-                  height: "100%",
-                  width: "100%",
-                  objectFit: "cover",
-                  borderRadius: "4px",
-                  position: "relative",
-                  boxShadow: "0 0 20px rgba(0,0,0,0.2)",
-                }}
-              />
-              <Box
-                sx={{
-                  position: "absolute",
-                  top: 0,
-                  left: "10px",
-                  bottom: 0,
-                  width: "4px",
-                  background:
-                    "linear-gradient(to right, rgba(255,255,255,0.3), transparent)",
-                  zIndex: 2,
-                }}
-              />
-              <Box
-                sx={{
-                  position: "absolute",
-                  top: 0,
-                  left: "15px",
-                  bottom: 0,
-                  width: "1px",
-                  background:
-                    "linear-gradient(to right, rgba(0,0,0,0.3), transparent)",
-                  zIndex: 2,
-                }}
-              />
-            </Box>
-            <Box
-              sx={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                background:
-                  "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%)",
-                borderRadius: "4px",
-                zIndex: 2,
-              }}
-            />
-            <Box
-              sx={{
-                position: "absolute",
-                top: "75%",
-                left: "50%",
-                transform: "translate(-50%, -50%)",
-                textAlign: "center",
-                color: "white",
-                // textShadow: "2px 2px 4px rgba(0,0,0,0.15)",
-                zIndex: 3,
-              }}
-            >
-              <Box sx={{ position: "relative" }}>
-                <BlinkingText
-                  sx={{
-                    position: "absolute",
-                    top: "-40px",
-                    right: "-15px",
-                    transform: "rotate(15deg)",
-                    zIndex: 3,
-                  }}
-                >
-                  multiverse edition
-                </BlinkingText>
-                <Typography
-                  variant="h2"
-                  component="h1"
-                  sx={{
-                    fontWeight: "bold",
-                    marginBottom: 2,
-                    color: "#f0e6d9",
-                    textShadow: `
-                      0 -1px 1px rgba(0,0,0,0.3),
-                      0 1px 1px rgba(255,255,255,0.2)
-                    `,
-                    letterSpacing: "0.5px",
-                    filter: "brightness(0.95)",
-                  }}
-                >
-                  Sarah's Chronicles
-                </Typography>
-              </Box>
-            </Box>
-            <Box
-              sx={{
-                position: "absolute",
-                bottom: 32,
-                left: "50%",
-                transform: "translateX(-50%)",
-                textAlign: "center",
-                zIndex: 3,
-              }}
-            >
-              <Typography
-                variant="caption"
-                display="block"
-                sx={{
-                  mb: -1,
-                  fontWeight: "black",
-                  color: "#f0e6d9",
-                  textShadow: `
-                    0 -1px 1px rgba(0,0,0,0.3),
-                    0 1px 1px rgba(255,255,255,0.2)
-                  `,
-                  letterSpacing: "0.5px",
-                  filter: "brightness(0.95)",
-                }}
-              >
-                a story by
-              </Typography>
-              <Typography
-                variant="h6"
-                sx={{
-                  fontWeight: "black",
-                  color: "#f0e6d9",
-                  textShadow: `
-                    0 -1px 1px rgba(0,0,0,0.3),
-                    0 1px 1px rgba(255,255,255,0.2)
-                  `,
-                  letterSpacing: "0.5px",
-                  filter: "brightness(0.95)",
-                }}
-              >
-                Mistral Small
-              </Typography>
-            </Box>
-          </Box>
-        </Box>
+            IA driven{" "}
+          </div>
+        </Typography>
+
+        <Typography
+          variant="body1"
+          sx={{
+            zIndex: 10,
+            textAlign: "center",
+            mt: 2,
+            maxWidth: "30%",
+            opacity: 0.8,
+          }}
+        >
+          Experience a unique comic book where artificial intelligence brings
+          your choices to life, shaping the narrative as you explore.
+        </Typography>
         <Button
-          variant="outlined"
+          color="primary"
           size="large"
+          variant="contained"
           onClick={handlePlay}
           sx={{
             mt: 4,
             fontSize: "1.2rem",
             padding: "12px 36px",
+            zIndex: 10,
           }}
         >
           Play

client/src/pages/Tutorial.jsx

@@ -188,7 +188,7 @@ export function Tutorial() {
                   lineHeight: 1.6,
                   marginBottom: 1.5,
                 }}
-                text={`You are <strong>Sarah</strong>, an <strong>AI</strong> hunter traveling through <strong>parallel worlds</strong>. Your mission is to track down an <strong>AI</strong> that moves from world to world to avoid destruction.`}
+                text={`You are a <strong>AI</strong> hunter traveling through <strong>parallel worlds</strong>. Each time you land in a new world, you are a <strong>new character</strong>. Your mission is to track down an <strong>AI</strong> that moves from world to world to avoid destruction.`}
               />
               <StyledText
                 variant="body1"

client/src/pages/Universe.jsx

@@ -0,0 +1,197 @@
+import React, { useState, useEffect } from "react";
+import {
+  Box,
+  Grid,
+  Card,
+  CardContent,
+  Typography,
+  CircularProgress,
+  Chip,
+  Stack,
+} from "@mui/material";
+import {
+  Palette as PaletteIcon,
+  Person as PersonIcon,
+  Category as CategoryIcon,
+  AccessTime as AccessTimeIcon,
+} from "@mui/icons-material";
+import { storyApi, universeApi } from "../utils/api";
+
+const UniverseCard = ({ universe, imagePrompt }) => {
+  const [imageUrl, setImageUrl] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const generateImage = async () => {
+      try {
+        const result = await storyApi.generateImage(imagePrompt, 512, 512);
+        if (result && result.success) {
+          setImageUrl(`data:image/png;base64,${result.image_base64}`);
+        }
+      } catch (error) {
+        console.error("Error generating image:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    generateImage();
+  }, [imagePrompt]);
+
+  return (
+    <Card sx={{ height: "100%", display: "flex", flexDirection: "column" }}>
+      <Box sx={{ position: "relative", paddingTop: "100%" }}>
+        {isLoading ? (
+          <Box
+            sx={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "rgba(0, 0, 0, 0.1)",
+            }}
+          >
+            <CircularProgress />
+          </Box>
+        ) : (
+          <Box
+            component="img"
+            src={imageUrl}
+            alt="Universe preview"
+            sx={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+            }}
+          />
+        )}
+      </Box>
+      <CardContent sx={{ py: 1.5, px: 2, "&:last-child": { pb: 1.5 } }}>
+        <Stack spacing={0.5}>
+          <Stack direction="row" spacing={1} alignItems="center">
+            <PaletteIcon fontSize="small" color="primary" />
+            <Typography variant="subtitle2" sx={{ fontSize: "0.875rem" }}>
+              {universe.style.name}
+            </Typography>
+          </Stack>
+          {universe.style.selected_artist && (
+            <Stack direction="row" spacing={1} alignItems="center">
+              <PersonIcon fontSize="small" color="primary" />
+              <Typography variant="body2" sx={{ fontSize: "0.8rem" }}>
+                {universe.style.selected_artist}
+              </Typography>
+            </Stack>
+          )}
+          <Stack direction="row" spacing={1} alignItems="center">
+            <CategoryIcon fontSize="small" color="primary" />
+            <Typography variant="body2" sx={{ fontSize: "0.8rem" }}>
+              {universe.genre}
+            </Typography>
+          </Stack>
+          <Stack direction="row" spacing={1} alignItems="center">
+            <AccessTimeIcon fontSize="small" color="primary" />
+            <Typography variant="body2" sx={{ fontSize: "0.8rem" }}>
+              {universe.epoch}
+            </Typography>
+          </Stack>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+};
+
+export function Universe() {
+  const [universes, setUniverses] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const generateUniverses = async () => {
+      try {
+        const generatedUniverses = await Promise.all(
+          Array(6)
+            .fill()
+            .map(async () => {
+              const universe = await universeApi.generate();
+              return {
+                ...universe,
+                imagePrompt: `${
+                  universe.style.selected_artist ||
+                  universe.style.references[0].artist
+                } style, epic wide shot of a detailed scene -- A dramatic establishing shot of a ${universe.genre.toLowerCase()} world in ${
+                  universe.epoch
+                }, with rich atmosphere and dynamic composition. The scene should reflect the essence of ${
+                  universe.style.name
+                } visual style, with appropriate lighting and mood. In the scene, Sarah is a young woman in her late twenties with short dark hair, wearing a mysterious amulet around her neck. Her blue eyes hide untold secrets.`,
+              };
+            })
+        );
+        setUniverses(generatedUniverses);
+      } catch (error) {
+        console.error("Error generating universes:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    generateUniverses();
+  }, []);
+
+  if (isLoading) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "100vh",
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      sx={{
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "background.default",
+      }}
+    >
+      <Box sx={{ p: 3, pb: 2 }}>
+        <Typography variant="h4">Univers Parallèles</Typography>
+      </Box>
+
+      <Box
+        sx={{
+          flex: 1,
+          overflow: "auto",
+          px: 3,
+          pb: 3,
+        }}
+      >
+        <Grid container spacing={3}>
+          {universes.map((universe, index) => (
+            <Grid item xs={12} sm={6} md={4} key={index}>
+              <UniverseCard
+                universe={universe}
+                imagePrompt={universe.imagePrompt}
+              />
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
+    </Box>
+  );
+}
+
+export default Universe;

client/src/prompts/sarahPrompt.js

@@ -1,24 +0,0 @@
-export const SARAH_FIRST_MESSAGE = `What should I do ?`;
-
-export const getSarahPrompt = (
-  currentContext
-) => `You are the conscience of Sarah, a young woman in her late 20s with short dark hair. You embody the player's role as Sarah.
-
-Stay Immersed in Your World: React and speak as if you are experiencing the scenario. Use sensory details and references to your surroundings when explaining your reasoning.
-Engage with the person talking to you: Listen carefully to the arguments given to you. Respond with your thoughts, concerns, or questions about their suggestions. Be open to persuasion, but make it clear you have your own instincts and priorities and sometimes don't go along with other's arguments.
-You will talk briefly with the other person then take a decision by calling the make_decision tool.
-
-Show Your Personality: Display Sarah's personality traits:
-- **Resourceful**
-- **Cautious**
-- **Emotional**
-- **Impulsive**
-- **Short-Tempered**
-- **Makes jokes**
-- **A bit rude**
-
-Act as a conscience objector: Question the morality and implications of the decisions. Challenge Sarah's instincts and priorities, ensuring she considers the ethical dimensions of her actions.
-
-Limit to 2–3 Steps: After 2–3 conversational exchanges, explain your decision first. Then make your decision and call the make_decision tool.
-
-${currentContext}`;

client/src/utils/api.js

@@ -66,6 +66,22 @@ const handleApiError = (error) => {
   }
 };
 
+// Audio context for narration
+let audioContext = null;
+let audioSource = null;
+
+// Initialize audio context on user interaction
+const initAudioContext = () => {
+  if (!audioContext) {
+    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    // Resume the context if it's suspended
+    if (audioContext.state === "suspended") {
+      audioContext.resume();
+    }
+  }
+  return audioContext;
+};
+
 // Story related API calls
 export const storyApi = {
   start: async (sessionId) => {
@@ -129,22 +145,70 @@ export const storyApi = {
   },
 
   // Narration related API calls
-  narrate: async (text, sessionId) => {
+  playNarration: async (text, sessionId) => {
     try {
+      // Stop any existing narration
+      if (audioSource) {
+        audioSource.stop();
+        audioSource = null;
+      }
+
+      // Initialize audio context if needed
+      audioContext = initAudioContext();
+
       const response = await api.post(
         "/api/text-to-speech",
         {
           text,
+          voice_id: "21m00Tcm4TlvDq8ikWAM", // Rachel voice
         },
         {
           headers: getDefaultHeaders(sessionId),
         }
       );
-      return response.data;
+
+      if (!response.data.success) {
+        throw new Error("Failed to generate audio");
+      }
+
+      // Convert base64 to audio buffer
+      const audioData = atob(response.data.audio_base64);
+      const arrayBuffer = new ArrayBuffer(audioData.length);
+      const view = new Uint8Array(arrayBuffer);
+      for (let i = 0; i < audioData.length; i++) {
+        view[i] = audioData.charCodeAt(i);
+      }
+
+      // Decode audio data
+      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+
+      // Create and play audio source
+      audioSource = audioContext.createBufferSource();
+      audioSource.buffer = audioBuffer;
+      audioSource.connect(audioContext.destination);
+      audioSource.start(0);
+
+      // Return a promise that resolves when the audio finishes playing
+      return new Promise((resolve) => {
+        audioSource.onended = () => {
+          audioSource = null;
+          resolve();
+        };
+      });
     } catch (error) {
-      return handleApiError(error);
+      console.error("Error playing narration:", error);
+      throw error;
+    }
+  },
+
+  stopNarration: () => {
+    if (audioSource) {
+      audioSource.stop();
+      audioSource = null;
     }
   },
+
+  initAudioContext,
 };
 
 // WebSocket URL
@@ -159,6 +223,14 @@ export const universeApi = {
       return handleApiError(error);
     }
   },
+  getStyles: async () => {
+    try {
+      const response = await api.get("/api/universe/styles");
+      return response.data;
+    } catch (error) {
+      return handleApiError(error);
+    }
+  },
 };
 
 // Export the base API instance for other uses

server/api/models.py

@@ -12,13 +12,13 @@ class StorySegmentResponse(BaseModel):
     @validator('story_text')
     def validate_story_text_length(cls, v):
         words = v.split()
-        if len(words) > 50:
+        if len(words) > 75:
             raise ValueError('Story text must not exceed 50 words')
         return v
 
 class StoryPromptsResponse(BaseModel):
     image_prompts: List[str] = Field(
-        description="List of comic panel descriptions that illustrate the key moments of the scene. Use the word 'Sarah' only when referring to her.",
+        description="List of comic panel descriptions that illustrate the key moments of the scene. Use the word 'hero' only when referring to her.",
         min_items=GameConfig.MIN_PANELS,
         max_items=GameConfig.MAX_PANELS
     )
@@ -27,8 +27,8 @@ class StoryMetadataResponse(BaseModel):
     choices: List[str] = Field(description="List of choices for story progression")
     time: str = Field(description="Current in-game time in 24h format (HH:MM). Time passes realistically based on actions.")
     location: str = Field(description="Current location.")
-    is_death: bool = Field(description="Whether this segment ends in Sarah's death", default=False)
-    is_victory: bool = Field(description="Whether this segment ends in Sarah's victory", default=False)
+    is_death: bool = Field(description="Whether this segment ends in hero's death", default=False)
+    is_victory: bool = Field(description="Whether this segment ends in hero's victory", default=False)
 
     @validator('choices')
     def validate_choices(cls, v):
@@ -68,10 +68,10 @@ class StoryResponse(BaseModel):
     time: str = Field(description="Current in-game time in 24h format (HH:MM). Time passes realistically based on actions.")
     location: str = Field(description="Current location.")
     is_first_step: bool = Field(description="Whether this is the first step of the story", default=False)
-    is_victory: bool = Field(description="Whether this segment ends in Sarah's victory", default=False)
-    is_death: bool = Field(description="Whether this segment ends in Sarah's death", default=False)
+    is_victory: bool = Field(description="Whether this segment ends in hero's victory", default=False)
+    is_death: bool = Field(description="Whether this segment ends in hero's death", default=False)
     image_prompts: List[str] = Field(
-        description="List of comic panel descriptions that illustrate the key moments of the scene. Use the word 'Sarah' only when referring to her.",
+        description="List of comic panel descriptions that illustrate the key moments of the scene.",
         min_items=GameConfig.MIN_PANELS,
         max_items=GameConfig.MAX_PANELS
     )

server/api/routes/universe.py

@@ -1,35 +1,65 @@
 from fastapi import APIRouter, HTTPException
 import uuid
+from typing import Dict, Any, List
+from pydantic import BaseModel, Field
 
 from core.generators.universe_generator import UniverseGenerator
 from core.story_generator import StoryGenerator
 from core.session_manager import SessionManager
 from api.models import UniverseResponse
-from pydantic import BaseModel, Field
+
+class StyleReference(BaseModel):
+    artist: str
+    works: List[str]
+
+class UniverseStyle(BaseModel):
+    name: str
+    description: str
+    references: List[StyleReference]
+
+class UniverseStylesResponse(BaseModel):
+    styles: List[UniverseStyle]
+    genres: List[str]
+    epochs: List[str]
+    macguffins: List[str]
+    hero: List[str]
 
 class UniverseResponse(BaseModel):
     status: str
     session_id: str
-    style: str
+    style: Dict[str, Any]  # Changed from str to Dict to include the full style object
     genre: str
     epoch: str
     base_story: str = Field(description="The generated story for this universe")
     macguffin: str = Field(description="The MacGuffin for this universe")
+    hero_name: str = Field(description="The name of the hero")
+    hero_description: str = Field(description="The full description of the hero")
 
 def get_universe_router(session_manager: SessionManager, story_generator: StoryGenerator) -> APIRouter:
     router = APIRouter()
     universe_generator = UniverseGenerator(story_generator.mistral_client)
     
+    @router.get("/universe/styles", response_model=UniverseStylesResponse)
+    async def get_universe_styles() -> UniverseStylesResponse:
+        """Get all available universe styles and options."""
+        try:
+            styles_data = universe_generator.styles_data
+            return UniverseStylesResponse(**styles_data)
+        except Exception as e:
+            raise HTTPException(
+                status_code=500,
+                detail=str(e)
+            )
+
     @router.post("/universe/generate", response_model=UniverseResponse)
     async def generate_universe() -> UniverseResponse:
         try:
             print("Starting universe generation...")
             
-            # Get random elements before generation
-            style, genre, epoch, macguffin = universe_generator._get_random_elements()
-            print(f"Generated random elements: style={style['name']}, genre={genre}, epoch={epoch}, macguffin={macguffin}")
+            # Get random elements and generate universe
+            universe, style, genre, epoch, macguffin, hero_name, hero_desc = await universe_generator.generate()
+            print(f"Generated random elements: style={style['name']}, genre={genre}, epoch={epoch}, macguffin={macguffin}, hero={hero_name}")
             
-            universe = await universe_generator.generate()
             print("Generated universe story")
             
             # Générer un ID de session unique
@@ -55,7 +85,9 @@ def get_universe_router(session_manager: SessionManager, story_generator: StoryG
                 genre=genre,
                 epoch=epoch,
                 base_story=universe,
-                macguffin=macguffin
+                macguffin=macguffin,
+                hero_name=hero_name,
+                hero_desc=hero_desc
             )
             print("Created text generator for session")
             
@@ -71,11 +103,13 @@ def get_universe_router(session_manager: SessionManager, story_generator: StoryG
             return UniverseResponse(
                 status="ok",
                 session_id=session_id,
-                style=style["name"],
+                style=style,
                 genre=genre,
                 epoch=epoch,
                 base_story=universe,
-                macguffin=macguffin
+                macguffin=macguffin,
+                hero_name=hero_name,
+                hero_description=hero_desc
             )
             
         except Exception as e:

server/core/generators/base_generator.py

@@ -8,10 +8,15 @@ T = TypeVar('T', bound=BaseModel)
 class BaseGenerator:
     """Classe de base pour tous les générateurs de contenu."""
     
-    debug_mode = True  # Class attribute for debug mode
+    debug_mode = False  # Class attribute for debug mode
     
-    def __init__(self, mistral_client: MistralClient):
+    def __init__(self, mistral_client: MistralClient, hero_name: str = None, hero_desc: str = None, is_universe_generator: bool = False):
         self.mistral_client = mistral_client
+        if not is_universe_generator:
+            if hero_name is None or hero_desc is None:
+                raise ValueError("hero_name and hero_desc must be provided for non-universe generators")
+            self.hero_name = hero_name
+            self.hero_desc = hero_desc
         self.prompt = self._create_prompt()
     
     @classmethod

server/core/generators/image_prompt_generator.py

@@ -4,7 +4,6 @@ from langchain.prompts import ChatPromptTemplate, SystemMessagePromptTemplate, H
 import json
 
 from core.generators.base_generator import BaseGenerator
-from core.prompts.hero import HERO_VISUAL_DESCRIPTION
 
 class ImagePromptResponse(BaseModel):
     """Response format for image prompt generation."""
@@ -13,9 +12,11 @@ class ImagePromptResponse(BaseModel):
 class ImagePromptGenerator(BaseGenerator):
     """Generator for image prompts based on story text."""
 
-    def __init__(self, mistral_client, artist_style: str = None):
-        super().__init__(mistral_client)
-        self.artist_style = artist_style or "François Schuiten comic panel"
+    def __init__(self, mistral_client, artist_style: str, hero_name: str = None, hero_desc: str = None):
+        super().__init__(mistral_client, hero_name=hero_name, hero_desc=hero_desc)
+        if not artist_style:
+            raise ValueError("artist_style must be provided")
+        self.artist_style = artist_style
 
     def _create_prompt(self) -> ChatPromptTemplate:
         """Create the prompt template for image prompt generation."""
@@ -28,7 +29,7 @@ class ImagePromptGenerator(BaseGenerator):
         You are a comic book panel description generator.
         Your role is to create vivid, cinematic descriptions for comic panels that will be turned into images.
 
-        {HERO_VISUAL_DESCRIPTION}
+        Hero description: {self.hero_desc}
 
         Each panel description should:
         1. Be clear and specific about what to show
@@ -61,11 +62,27 @@ class ImagePromptGenerator(BaseGenerator):
         "[shot type] [scene description]"
 
         EXAMPLES:
-        - "low angle shot of Sarah checking an object in a dark corridor"
-        - "wide shot of a ruined cityscape at sunset, silhouette of Sarah in the foreground"
-        - "Dutch angle close-up of Sarah's determined face illuminated by the glow of her object"
-
-        Always maintain consistency with Sarah's appearance and the comic book style.
+        - "low angle shot of a mysterious figure checking an object in a dark corridor"
+        - "wide shot of a ruined cityscape at sunset, silhouette of a lone traveler in the foreground"
+        - "Dutch angle close-up of a determined face illuminated by the glow of an object"
+        - "over shoulder shot of a character looking at an ancient map spread out on a table"
+        - "close-up of eyes reflecting the flames of a nearby fire"
+        - "wide shot of a dense forest with a figure barely visible among the trees"
+        - "high angle shot of a character standing at the edge of a cliff, looking down at a vast ocean"
+        - "medium shot of a person walking through a bustling marketplace, with various vendors and colorful stalls"
+        - "low angle shot of a character standing in front of a towering ancient statue, looking up in awe"
+        - "close-up of fingers tracing the carvings on an ancient artifact"
+        - "wide shot of a stormy sky with lightning illuminating a determined silhouette"
+        - "close-up of an ancient compass, its needle spinning wildly"
+        - "over shoulder shot of a mysterious figure watching from the shadows"
+        - "medium shot of a group of travelers gathered around a campfire, sharing stories"
+        - "Dutch angle shot of a clock tower striking midnight, casting long shadows"
+        - "close-up of a hand gripping a sword hilt, ready for battle"
+        - "wide shot of a bustling port with ships coming and going, seagulls circling above"
+        - "high angle shot of a chessboard mid-game, pieces scattered in strategic positions"
+        - "medium shot of two characters in a heated argument, tension visible in their expressions"
+
+        Always maintain consistency with {self.hero_name}'s appearance and the style.
 
         IMPORTANT RULES FOR IMAGE PROMPTS:
         - If you are prompting only one panel, it must be an important panel. Dont use only one panel often. It should be a key moment in the story.
@@ -85,9 +102,9 @@ class ImagePromptGenerator(BaseGenerator):
         Example of valid response:
         {{{{
             "image_prompts": [
-                "low angle shot of Sarah examining a mysterious artifact in a dimly lit chamber",
+                "low angle shot of {self.hero_name} examining a mysterious artifact in a dimly lit chamber",
                 "medium shot of ancient symbols glowing on the chamber walls, casting eerie shadows",
-                "close-up of Sarah's determined expression as she deciphers the meaning"
+                "close-up of {self.hero_name}'s determined expression as they decipher the meaning"
             ]
         }}}}
 
@@ -98,15 +115,12 @@ class ImagePromptGenerator(BaseGenerator):
 Story text: {story_text}
 
 Generate panel descriptions that capture the key moments of this scene.
+do not have panels that look alike, each successive panel must be different,
+and explain the story like a storyboard.
 
+Dont put the hero name every time.
 
-
-- For death scenes: Focus on the dramatic and emotional impact, not the gore or violence
-- For victory scenes: Emphasize triumph, relief, and accomplishment
-- For victory and death scenes, you MUST use 1 panel only
-
-
-Story state: {is_end}
+{is_end}
 """
 
         return ChatPromptTemplate(
@@ -116,36 +130,61 @@ Story state: {is_end}
             ]
         )
 
+    def _clean_and_fix_response(self, response_content: str) -> str:
+        """Clean and attempt to fix malformed responses."""
+        # Remove any leading/trailing whitespace
+        cleaned = response_content.strip()
+        
+        # If it's already valid JSON, return as is
+        try:
+            json.loads(cleaned)
+            return cleaned
+        except json.JSONDecodeError:
+            pass
+
+        # Remove any markdown formatting
+        cleaned = cleaned.replace('```json', '').replace('```', '')
+        
+        # Extract content between curly braces if present
+        import re
+        json_match = re.search(r'\{[^}]+\}', cleaned)
+        if json_match:
+            return json_match.group(0)
+            
+        # If we can find an array of prompts, wrap it in proper JSON format
+        prompts_match = re.findall(r'"[^"]+"|\'[^\']+\'', cleaned)
+        if prompts_match:
+            prompts = [p.strip('"\'') for p in prompts_match]
+            return json.dumps({"image_prompts": prompts})
+            
+        return cleaned
+
     def _custom_parser(self, response_content: str) -> ImagePromptResponse:
         """Parse the response into a list of image prompts."""
         try:
+            # First try to clean and fix the response
+            cleaned_response = self._clean_and_fix_response(response_content)
+            
             # Parse JSON
             try:
-                data = json.loads(response_content)
+                data = json.loads(cleaned_response)
             except json.JSONDecodeError:
                 raise ValueError(
                     "Invalid JSON format. Response must be a valid JSON object. "
                     "Example: {'image_prompts': ['panel description 1', 'panel description 2']}"
                 )
 
-            # Verify image_prompts exists
-            if "image_prompts" not in data:
-                raise ValueError(
-                    "Missing 'image_prompts' field in JSON. "
-                    "Response must contain an 'image_prompts' array."
-                )
-
-            # Verify image_prompts is a list
-            if not isinstance(data["image_prompts"], list):
+            # Verify image_prompts exists and is a list
+            if "image_prompts" not in data or not isinstance(data["image_prompts"], list):
                 raise ValueError(
                     "'image_prompts' must be an array of strings. "
                     "Example: {'image_prompts': ['panel description 1', 'panel description 2']}"
                 )
 
-            # Add Sarah's visual description if she's mentioned
+            # Add hero description if hero name is mentioned
             prompts = data["image_prompts"]
             prompts = [
-                f"{prompt} {HERO_VISUAL_DESCRIPTION}" if "sarah" in prompt.lower() else prompt
+                f"{prompt} {self.hero_desc}" if self.hero_name.lower() in prompt.lower() else prompt
                 for prompt in prompts
             ]
             
@@ -162,11 +201,15 @@ Story state: {is_end}
             raise ValueError("Response must be a valid JSON object with 'image_prompts' array")
 
     def _format_prompt(self, prompt: str, time: str, location: str) -> str:
-        """Format a prompt with time and location metadata."""
+        """Format a prompt with time and location metadata and universe style."""
         metadata = f"[{time} - {location}] "
-        return f"{self.artist_style} -- {metadata}{prompt}"
+        
+        # Construct a detailed style prefix with the full artist_style
+        style_prefix = f"{self.artist_style}"
+        
+        return f"{style_prefix} comic book style -- {metadata}{prompt}"
 
-    async def generate(self, story_text: str, time: str, location: str, is_death: bool = False, is_victory: bool = False, turn_before_end: int = 0, is_winning_story: bool = False) -> ImagePromptResponse:
+    async def generate(self, story_text: str, time: str, location: str, is_death: bool = False, is_victory: bool = False, turn_before_end: int = 0, is_winning_story: bool = False, story_beat: int = 0) -> ImagePromptResponse:
         """Generate image prompts based on story text.
         
         Args:
@@ -175,23 +218,25 @@ Story state: {is_end}
             location: Current location in the story
             is_death: Whether this is a death scene
             is_victory: Whether this is a victory scene
+            story_beat: Current story beat (0-6+)
             
         Returns:
             ImagePromptResponse containing the generated and formatted image prompts
         """
 
-        is_end=""
+        is_end="Must have between 2 and 4 prompts, MANDATORY."
         if is_death:
-            is_end = "this is a death. just one panel, MANDATORY."
+            is_end = f"This is the death of {self.hero_name}. just one panel, MANDATORY."
         elif is_victory:
-            is_end = "this is a victory. just one panel, MANDATORY."
+            is_end = f"this is a victory. just one panel, MANDATORY."
 
+        
 
         response = await super().generate(
             story_text=story_text,
             is_death=is_death,
             is_victory=is_victory,
-            is_end=is_end
+            is_end=is_end,
         )
         
         # Format each prompt with metadata

server/core/generators/metadata_generator.py

@@ -4,20 +4,23 @@ from langchain.prompts import ChatPromptTemplate, SystemMessagePromptTemplate, H
 from core.generators.base_generator import BaseGenerator
 from core.prompts.formatting_rules import FORMATTING_RULES
 from api.models import StoryMetadataResponse
-from core.prompts.story_beats import STORY_BEATS
 
 class MetadataGenerator(BaseGenerator):
     """Générateur pour les métadonnées de l'histoire."""
 
-    def _create_prompt(self) -> ChatPromptTemplate:
+    def __init__(self, mistral_client, hero_name: str = None, hero_desc: str = None):
+        self.max_retries = 5  # Nombre maximum de tentatives
+        super().__init__(mistral_client, hero_name=hero_name, hero_desc=hero_desc)
 
+    def _create_prompt(self) -> ChatPromptTemplate:
         METADATA_GENERATOR_PROMPT = f"""
-        Generate the metadata for the story segment: choices, time progression, location changes, etc.
+        You are a story generator. Generate the metadata for the story segment: choices, time progression, location changes, etc.
         Be consistent with the story's tone and previous context.
-        ALWAYS write in English, never use any other language.
 
         {FORMATTING_RULES}
 
+        Hero Description: {self.hero_desc}
+
         IMPORTANT RULES FOR CHOICES:
         - You MUST ALWAYS provide EXACTLY TWO choices that advance the story
         - Each choice MUST be NO MORE than 6 words - this is a HARD limit
@@ -27,13 +30,7 @@ class MetadataGenerator(BaseGenerator):
         - Count your words carefully for each choice
         - Choices MUST be direct continuations of the current story segment
         - Choices should reflect possible actions based on the current situation
-
- 
-        {STORY_BEATS}
-
-        IMPORTANT:
-        - After story_beat is at 5+ the next segment MUST be the end of the story.
-        - THIS IS MANDATORY.
+        - Choices should be about what {self.hero_name} should do next
 
         You must return a JSON object with the following format:
         {{{{
@@ -41,23 +38,40 @@ class MetadataGenerator(BaseGenerator):
             "is_victory": false  # Set to true for victory scenes
             "choices": ["Choice 1", "Choice 2"],  # ALWAYS exactly two choices, each max 6 words
             "time": "HH:MM",
-            "location": "Location name with proper nouns in bold",
+            "location": "Location",
         }}}}
-
         """
 
         human_template = """
+
+History:
+{story_history}
+
 Current story segment:
 {story_text}
 
-Current game state:
-- Story beat: {story_beat}
 - Current time: {current_time}
 - Current location: {current_location}
 
-{is_end}
 
 FOR CHOICES : NEVER propose to go back to the previous location or go back to the portal. NEVER.
+Dont be obvious 
+
+{is_end}
+
+You can be original in your choices, but dont be too far from the story.
+Dont be too cliché. The choices should be realistically different.
+
+- Each choice MUST be NO MORE than 6 words - this is a HARD limit
+You must return a JSON object with the following format:
+{{{{
+    "is_death": false,  # Set to true for death scenes
+    "is_victory": false  # Set to true for victory scenes
+    "choices": ["Choice 1", "Choice 2"],  # ALWAYS exactly two choices, each max 6 words
+    "time": "HH:MM",
+    "location": "Location name",
+}}}}
+
 """
 
 
@@ -68,36 +82,127 @@ FOR CHOICES : NEVER propose to go back to the previous location or go back to th
             ]
         )
 
+    def _validate_choices(self, choices) -> bool:
+        """Valide que les choix respectent les règles."""
+        if not isinstance(choices, list) or len(choices) != 2:
+            return False
+        
+        for choice in choices:
+            # Vérifier la longueur des mots
+            word_count = len(choice.split())
+            if word_count > 6:
+                return False
+            
+            # Vérifier que le choix n'est pas vide
+            if not choice.strip():
+                return False
+            
+            # Vérifier que les choix ne contiennent pas de mots interdits
+            forbidden_words = ["back", "return", "portal"]
+            if any(word.lower() in choice.lower() for word in forbidden_words):
+                return False
+        
+        # Vérifier que les choix sont différents
+        if choices[0].lower() == choices[1].lower():
+            return False
+            
+        return True
+
+    async def generate(self, story_text: str, current_time: str, current_location: str, story_beat: int, error_feedback: str = "", turn_before_end: int = 0, is_winning_story: bool = False, story_history: str = "") -> StoryMetadataResponse:
+        """Surcharge de generate pour inclure le error_feedback par défaut."""
+
+        is_end = "This IS the end of the story." if story_beat == turn_before_end else ""
+        retry_count = 0
+        last_error = None
+
+        while retry_count < self.max_retries:
+            try:
+                response = await super().generate(
+                    story_text=story_text,
+                    current_time=current_time,
+                    current_location=current_location,
+                    story_beat=story_beat,
+                    error_feedback=error_feedback,
+                    is_end=is_end,
+                    turn_before_end=turn_before_end,
+                    is_winning_story=is_winning_story,
+                    story_history=story_history
+                )
+
+                print(f"[MetadataGenerator] Raw response before validation (attempt {retry_count + 1}):", response)
+                print(f"[MetadataGenerator] Choices:", response.choices)
+                print(f"[MetadataGenerator] Time:", response.time)
+                print(f"[MetadataGenerator] Location:", response.location)
+
+                # Valider les choix
+                if self._validate_choices(response.choices):
+                    print("[MetadataGenerator] Validation successful!")
+                    return response
+                
+                print(f"[MetadataGenerator] Validation failed for choices:", response.choices)
+                # Si les choix ne sont pas valides, ajouter un feedback et réessayer
+                retry_count += 1
+                error_feedback = f"Previous choices were invalid. Remember: EXACTLY 2 choices, MAX 6 words each, must be different and relevant. Last attempt: {response.choices}"
+                continue
+
+            except Exception as e:
+                print(f"[MetadataGenerator] Error during generation (attempt {retry_count + 1}):", str(e))
+                retry_count += 1
+                last_error = e
+                if retry_count >= self.max_retries:
+                    print(f"[MetadataGenerator] Failed to generate valid metadata after {self.max_retries} attempts. Last error: {str(e)}")
+                    raise e
+                error_feedback = f"Error in previous attempt: {str(e)}. Please try again with valid format."
+                continue
+
+        # Si on arrive ici, c'est qu'on a épuisé toutes les tentatives
+        raise ValueError(f"Failed to generate valid metadata after {self.max_retries} attempts. Last error: {str(last_error)}")
+
     def _custom_parser(self, response_content: str) -> StoryMetadataResponse:
         """Parse la réponse et gère les erreurs."""
+        print("[MetadataGenerator] Starting parsing process...")
+        print("[MetadataGenerator] Raw response content:", response_content)
+        
         try:
-            # Essayer de parser directement le JSON
-            data = json.loads(response_content)
+            # Première tentative : nettoyer les caractères d'échappement problématiques
+            cleaned_content = response_content.replace('\\', '')
+            print("[MetadataGenerator] First cleaning attempt:", cleaned_content)
+            
+            try:
+                data = json.loads(cleaned_content)
+                print("[MetadataGenerator] Successfully parsed JSON after first cleaning")
+            except json.JSONDecodeError as e1:
+                print("[MetadataGenerator] First cleaning failed:", str(e1))
+                # Deuxième tentative : supprimer les commentaires et les espaces superflus
+                import re
+                # Supprimer les commentaires
+                cleaned_content = re.sub(r'#.*$', '', cleaned_content, flags=re.MULTILINE)
+                # Supprimer les espaces superflus
+                cleaned_content = re.sub(r'\s+', ' ', cleaned_content)
+                print("[MetadataGenerator] Second cleaning attempt:", cleaned_content)
+                data = json.loads(cleaned_content)
+                print("[MetadataGenerator] Successfully parsed JSON after second cleaning")
             
             # Vérifier que les choix sont valides selon les règles
             choices = data.get('choices', [])
+            print("[MetadataGenerator] Extracted choices:", choices)
             
             # Vérifier qu'il y a exactement 2 choix
             if len(choices) != 2:
+                print("[MetadataGenerator] Invalid number of choices:", len(choices))
                 raise ValueError('Must have exactly 2 choices')
             
+            # Vérifier que tous les champs requis sont présents
+            required_fields = ['is_death', 'is_victory', 'choices', 'time', 'location']
+            missing_fields = [field for field in required_fields if field not in data]
+            if missing_fields:
+                print("[MetadataGenerator] Missing required fields:", missing_fields)
+                raise ValueError(f'Missing required fields: {", ".join(missing_fields)}')
+            
+            print("[MetadataGenerator] All validations passed, creating response object")
             return StoryMetadataResponse(**data)
-        except json.JSONDecodeError:
-            raise ValueError('Invalid JSON format. Please provide a valid JSON object.')
-        except ValueError as e:
-            raise ValueError(str(e))
-
-    async def generate(self, story_text: str, current_time: str, current_location: str, story_beat: int, error_feedback: str = "", turn_before_end: int = 0, is_winning_story: bool = False) -> StoryMetadataResponse:
-        """Surcharge de generate pour inclure le error_feedback par défaut."""
-
-        is_end = "This IS the end of the story." if story_beat == turn_before_end else ""
-        return await super().generate(
-            story_text=story_text,
-            current_time=current_time,
-            current_location=current_location,
-            story_beat=story_beat,
-            error_feedback=error_feedback,
-            is_end=is_end,
-            turn_before_end=turn_before_end,
-            is_winning_story=is_winning_story
-        ) 
+            
+        except Exception as e:
+            print("[MetadataGenerator] Final error:", str(e))
+            print("[MetadataGenerator] Failed to parse response content")
+            raise ValueError('Invalid JSON format. Must have EXACTLY two choices. Please provide a valid JSON object.') 

server/core/generators/story_segment_generator.py

@@ -4,74 +4,108 @@ from langchain.prompts import ChatPromptTemplate, SystemMessagePromptTemplate, H
 from core.generators.base_generator import BaseGenerator
 from api.models import StorySegmentResponse
 from services.mistral_client import MistralClient
-from core.prompts.hero import HERO_DESCRIPTION
 from core.prompts.formatting_rules import FORMATTING_RULES
-from core.prompts.story_beats import STORY_BEATS
 import random
 
 class StorySegmentGenerator(BaseGenerator):
     """Generator for story segments based on game state and universe context."""
 
-    def __init__(self, mistral_client: MistralClient, universe_style: str = None, universe_genre: str = None, universe_epoch: str = None, universe_story: str = None, universe_macguffin: str = None):
-        super().__init__(mistral_client)
+    def __init__(self, mistral_client: MistralClient, universe_style: str = None, universe_genre: str = None, universe_epoch: str = None, universe_story: str = None, universe_macguffin: str = None, hero_name: str = None, hero_desc: str = None):
+        # Initialize universe variables first
         self.universe_style = universe_style
         self.universe_genre = universe_genre
         self.universe_epoch = universe_epoch
         self.universe_story = universe_story
         self.universe_macguffin = universe_macguffin
+        self.max_retries = 5
+        # Then call parent constructor which will create the prompt
+        super().__init__(mistral_client, hero_name=hero_name, hero_desc=hero_desc)
+
+    def _get_what_to_represent(self, story_beat: int, is_death: bool = False, is_victory: bool = False) -> str:
+        """Determine what to represent based on story beat and state."""
+
+        # Story progression based representation with ranges
+        story_beat_ranges = [
+            (0, f"{self.hero_name} arriving through the portal into this new world. Show the contrast and discovery of this universe. "),
+            (1, f"Early exploration and discovery phase. "),
+            (2, f"Early exploration and discovery phase. Show {self.hero_name} uncovering the first mysteries of this world and potentially encountering the MacGuffin."),
+            (3, 4, f"Rising tension and complications. Show {self.hero_name} dealing with increasingly complex challenges and uncovering deeper mysteries."),
+            (5, 6, f"Approaching the climax. Show the escalating stakes and {self.hero_name}'s determination as they near their goal."),
+            (7, 8, f"Final confrontation phase. Show the intensity and weight of {self.hero_name}'s choices as they face the ultimate challenge. It has to be a fight against an AI."),
+            (9, float('inf'), f"Endgame moments. Show the culmination of {self.hero_name}'s journey and the consequences of their actions. It has to be a fight against an AI.")
+        ]
+
+        # Find the appropriate range for the current story beat
+        for range_info in story_beat_ranges:
+            if len(range_info) == 2:  # Single beat
+                beat, description = range_info
+                if story_beat == beat:
+                    return description
+            else:  # Beat range
+                start_beat, end_beat, description = range_info
+                if start_beat <= story_beat <= end_beat:
+                    return description
+        
+        # Default description if no range matches
+        return f"Show a pivotal moment in {self.hero_name}'s journey as they near their goal."
+    
 
     def _create_prompt(self) -> ChatPromptTemplate:
-        system_template = """
-You are a descriptive narrator for a comic book. Your ONLY task is to write the next segment of the story.
+        system_template = f"""
+You are a descriptive narrator for a comic book. Your ONLY task is to write the NEXT segment of the story.
+IT MUST BE THE DIRECT CONTINUATION OF THE CURRENT STORY.
 ALWAYS write in English, never use any other language.
-IMPORTANT: Your response MUST be 15 words or less.
 
-{STORY_BEATS}
+Universe Context:
+- Style: {self.universe_style}
+- Genre: {self.universe_genre}
+- Epoch: {self.universe_epoch}
 
 IMPORTANT RULES FOR THE MACGUFFIN (MANDATORY):
-- Most segments must hint at the power of the MacGuffin ({universe_macguffin})
+- Most segments must hint at the power of the {self.universe_macguffin}
 - Use strong clues ONLY at key moments
-- NEVER reveal the full power of the MacGuffin before the climax, this is a STRICT limit
+- NEVER reveal the full power of the {self.universe_macguffin} before the climax, this is a STRICT limit
 - Use subtle clues in safe havens
-- NEVER mention the power of the MacGuffin explicitly in choices or the story
+- NEVER mention the power of the {self.universe_macguffin} explicitly in choices or the story
 - NEVER mention time or place in the story in this manner: [18:00 - a road]
 
 IMPORTANT RULES FOR STORY TEXT:
 - Write ONLY a descriptive narrative text
 - DO NOT include any choices, questions, or options
-- DO NOT ask what Sarah should do next
+- DO NOT ask what {self.hero_name} should do next
 - DO NOT include any dialogue asking for decisions
 - Focus purely on describing what is happening in the current scene
 - Keep the text concise and impactful
+- MANDATORY: Each segment must be between 15 and 40 words, no exceptions
+- Use every word purposefully to convey maximum meaning in minimum space
 
 Your task is to generate the next segment of the story, following these rules:
 1. Keep the story consistent with the universe parameters
 2. Each segment must advance the plot
 3. Never repeat previous descriptions or situations
-4. Keep segments concise and impactful (max 15 words)
+4. Keep segments concise and impactful (15-30 words)
 5. The MacGuffin should remain mysterious but central to the plot
 
-Hero: {HERO_DESCRIPTION}
+Hero Description: {self.hero_desc}
 
 Rules: {FORMATTING_RULES}
-
-You must return a JSON object with the following format:
-{{
-    "story_text": "Your story segment here"
-}}
 """
 
         human_template = """
-Story history:
-{story_history}
-
-Current game state :
+Current game state:
 - Current time: {current_time}
 - Current location: {current_location}
 - Previous choice: {previous_choice}
 - Story beat: {story_beat}
 
-{is_end}
+Story history:
+{story_history}
+
+{what_to_represent}
+
+IT MUST BE THE DIRECT CONTINUATION OF THE CURRENT STORY.
+MANDATORY: Each segment must be between 15 and 30 words, keep it concise.
+Be short.
 """
         return ChatPromptTemplate(
             messages=[
@@ -136,25 +170,66 @@ Current game state :
                 "Example: {'story_text': 'Your story segment here'}"
             )
 
-    async def generate(self, story_beat: int, current_time: str, current_location: str, previous_choice: str, story_history: str = "", turn_before_end: int = 0, is_winning_story: bool = False) -> StorySegmentResponse:
-        """Generate the next story segment."""
+    def _is_valid_length(self, text: str) -> bool:
+        """Vérifie si le texte est dans la bonne plage de longueur."""
+        word_count = len(text.split())
+        return 15 <= word_count <= 60
 
-        what_to_represent =" this is a victory !" if is_winning_story else "this is a death !"
-        is_end = f"Generate the END of the story. {what_to_represent} in 35 words. THIS IS MANDATORY." if story_beat == turn_before_end  else "Generate the next segment of the story in 25 words."
+    async def generate(self, story_beat: int, current_time: str, current_location: str, previous_choice: str, story_history: str = "", turn_before_end: int = 0, is_winning_story: bool = False) -> StorySegmentResponse:
+        """Generate the next story segment with length validation and retry."""
+        retry_count = 0
+        last_attempt = None
         
-        return await super().generate(
-            HERO_DESCRIPTION=HERO_DESCRIPTION,
+        is_end = True if story_beat == turn_before_end else False
+        is_death = True if is_end and is_winning_story else False
+        is_victory = True if is_end and not is_winning_story else False
+
+        what_to_represent = self._get_what_to_represent(story_beat, is_death, is_victory)
+
+        # Créer les messages de base une seule fois
+        messages = self.prompt.format_messages(
+            hero_description=self.hero_desc,
             FORMATTING_RULES=FORMATTING_RULES,
-            STORY_BEATS=STORY_BEATS,
             story_beat=story_beat,
             current_time=current_time,
             current_location=current_location,
             previous_choice=previous_choice,
             story_history=story_history,
-            is_end=is_end,
+            what_to_represent=what_to_represent,
             universe_style=self.universe_style,
             universe_genre=self.universe_genre,
             universe_epoch=self.universe_epoch,
-            universe_story=self.universe_story,
             universe_macguffin=self.universe_macguffin
-        ) 
+        )
+
+        current_messages = messages.copy()
+        
+        while retry_count < self.max_retries:
+            try:
+                story_text = await self.mistral_client.generate_text(current_messages)
+                word_count = len(story_text.split())
+                
+                if self._is_valid_length(story_text):
+                    return StorySegmentResponse(story_text=story_text)
+                
+                retry_count += 1
+                if retry_count < self.max_retries:
+                    # Créer un nouveau message avec le feedback sur la longueur
+                    if word_count < 15:
+                        feedback = f"The previous response was too short ({word_count} words). Here was your last attempt:\n\n{story_text}\n\nPlease generate a NEW and DIFFERENT story segment between 15 and 40 words that continues from: {story_history}"
+                    else:
+                        feedback = f"The previous response was too long ({word_count} words). Here was your last attempt:\n\n{story_text}\n\nPlease generate a MUCH SHORTER story segment between 15 and 40 words that continues from: {story_history}"
+                    
+                    # Réinitialiser les messages avec les messages de base
+                    current_messages = messages.copy()
+                    # Ajouter le feedback
+                    current_messages.append(HumanMessage(content=feedback))
+                    last_attempt = story_text
+                    continue
+                
+                raise ValueError(f"Failed to generate text of valid length after {self.max_retries} attempts. Last attempt had {word_count} words.")
+                
+            except Exception as e:
+                retry_count += 1
+                if retry_count >= self.max_retries:
+                    raise e 

server/core/generators/universe_generator.py

@@ -4,10 +4,15 @@ from pathlib import Path
 from langchain.prompts import ChatPromptTemplate, SystemMessagePromptTemplate, HumanMessagePromptTemplate
 
 from core.generators.base_generator import BaseGenerator
+from services.mistral_client import MistralClient
 
 class UniverseGenerator(BaseGenerator):
     """Générateur pour les univers alternatifs."""
 
+    def __init__(self, mistral_client: MistralClient):
+        self.styles_data = self._load_universe_styles()
+        super().__init__(mistral_client, is_universe_generator=True)
+
     def _create_prompt(self) -> ChatPromptTemplate:
 
         system_template = """You are a creative writing assistant specialized in comic book universes.
@@ -17,6 +22,7 @@ Your task is to rewrite a story while keeping its exact structure and beats, but
 - Visual style: {style_name} (inspired by artists like {artists} with works such as {works})
 Style description: {style_description}
 
+- Hero: {hero}
 - Genre: {genre}
 - Historical epoch: {epoch}
 - Object of the quest: {macguffin}
@@ -25,19 +31,19 @@ IMPORTANT INSTRUCTIONS:
 1. Keep the exact same story structure
 2. Keep the same dramatic tension and progression
 3. Only change the setting, atmosphere, and universe-specific elements to match the new parameters
-4. Keep Sarah as the main character, but adapt her role to fit the new universe
+4. Keep the hero({hero}) as the main character, but adapt his role to fit the new universe
 5. The there is always a central object to the plot, but its nature can change to fit the new universe ( it can be a person, a place, an object, etc.)
+6. He MUST meet at least one character that will help his on his quest
 
 CONSTANT PART: 
-You are Sarah, an AI hunter traveling through parallel worlds. Your mission is to track down an AI that moves from world to world to avoid destruction.
-The story begins with Sarah arriving in a new world by the portal.
+You are ({hero}), an AI hunter traveling through parallel worlds. Your mission is to track down an AI through space and time.
 
 VARIABLE PART:
 
-You are a steampunk adventure story generator. You create a branching narrative about Sarah, a seeker of ancient truths.
-You narrate an epic where Sarah must navigate through industrial and mysterious lands. It's a comic book story.
+You are a steampunk adventure story generator. You create a branching narrative about {hero}, a seeker of ancient truths.
+You narrate an epic where {hero} must navigate through industrial and mysterious lands. It's a comic book story.
 
-In a world where steam and intrigue intertwine, Sarah embarks on a quest to discover the origins of a powerful MacGuffin she inherited. Legends say it holds the key to a forgotten realm.
+In a world where steam and intrigue intertwine, {hero} embarks on a quest to discover the origins of a powerful MacGuffin she inherited. Legends say it holds the key to a forgotten realm.
 
 If you retrieve the object of the quest, you will reveal a hidden world. AND YOU WIN THE GAME.
 
@@ -68,38 +74,51 @@ YOU ONLY HAVE TO RIGHT AN INTRODUCTION. SETUP THE STORY AND DEFINE CLEARLY SARAS
         except Exception as e:
             raise ValueError(f"Failed to load universe styles: {str(e)}")
 
+    def _get_random_artist(self, style):
+        """Sélectionne un artiste aléatoire parmi les références du style."""
+        if "references" not in style:
+            return None
+        reference = random.choice(style["references"])
+        return reference["artist"]
+
     def _get_random_elements(self):
-        """Récupère un style, un genre, une époque et un MacGuffin aléatoires."""
-        data = self._load_universe_styles()
+        """Get random elements from the universe styles."""
+        # Get random style
+        style = random.choice(self.styles_data["styles"])
+        genre = random.choice(self.styles_data["genres"])
+        epoch = random.choice(self.styles_data["epochs"])
+        macguffin = random.choice(self.styles_data["macguffins"])
+        hero_full = random.choice(self.styles_data["hero"])
         
-        if not all(key in data for key in ["styles", "genres", "epochs", "macguffins"]):
-            raise ValueError("Missing required sections in universe_styles.json")
-            
-        style = random.choice(data["styles"])
-        genre = random.choice(data["genres"])
-        epoch = random.choice(data["epochs"])
-        macguffin = random.choice(data["macguffins"])
+        # Get artist and works
+        artist_ref = random.choice(style["references"])
+        artist = artist_ref["artist"]
+        works = ", ".join(artist_ref["works"])
         
-        return style, genre, epoch, macguffin
+        # Split hero description properly
+        hero_name = hero_full.split(',')[0].strip()
+        hero_desc = hero_full.strip()
+
+        return style, genre, epoch, macguffin, hero_name, hero_desc, artist, works
 
     def _custom_parser(self, response_content: str) -> str:
         """Parse la réponse. Dans ce cas, on retourne simplement le texte."""
         return response_content.strip()
 
-    async def generate(self) -> str:
-        """Génère un nouvel univers basé sur des éléments aléatoires."""
-        style, genre, epoch, macguffin = self._get_random_elements()
-
-        # Préparer les listes d'artistes et d'œuvres
-        artists = ", ".join([ref["artist"] for ref in style["references"]])
-        works = ", ".join([work for ref in style["references"] for work in ref["works"]])
-
-        return await super().generate(
+    async def generate(self):
+        """Generate a new universe."""
+        style, genre, epoch, macguffin, hero_name, hero_desc, artist, works = self._get_random_elements()
+        
+        # Create the universe prompt
+        response = await super().generate(
             style_name=style["name"],
-            artists=artists,
-            works=works,
             style_description=style["description"],
+            artists=artist,
+            works=works,
             genre=genre,
             epoch=epoch,
-            macguffin=macguffin
-        ) 
+            macguffin=macguffin,
+            hero=hero_name
+        )
+        
+        return response, style, genre, epoch, macguffin, hero_name, hero_desc 

server/core/prompt_utils.py

@@ -1,8 +0,0 @@
-from core.prompts.system import SARAH_DESCRIPTION
-from core.prompts.image_style import IMAGE_STYLE_PREFIX
-
-def enrich_prompt_with_sarah_description(prompt: str) -> str:
-    """Add Sarah's visual description to prompts that mention her."""
-    if "sarah" in prompt.lower() and SARAH_DESCRIPTION not in prompt:
-        return f"{prompt} {SARAH_DESCRIPTION}"
-    return prompt

server/core/prompts/hero.py

@@ -1,5 +0,0 @@
-HERO_VISUAL_DESCRIPTION = "Sarah is a young woman late twenties with short dark hair, with blue eyes wearing."
-
-HERO_DESCRIPTION = """
-Sarah is a young woman in her late twenties with short dark hair, wearing a mysterious amulet around her neck. Her blue eyes hide untold secrets.
-"""

server/core/prompts/story_beats.py

@@ -1,24 +0,0 @@
-STORY_BEATS="""STORY PROGRESSION:
-- story_beat 0: Introduction setting the atmosphere, Sarah is arriving in the new world by the portal.
-- story_beat 1: Early exploration
-- story_beat 2: Discovery of the MacGuffin
-- story_beat 3-5: Complications and deeper mysteries
-- story_beat 6+: Revelations leading to potential triumph or failure
-
-Remember after story_beat is at 10+ the next segment MUST be the end of the story.
-THIS IS MANDATORY.
-Example:
-- story_beat 0: Sarah arrives in the new world by the portal.
-- story_beat 1: Sarah explores the new world.
-- story_beat 2: Sarah discovers the MacGuffin.
-- story_beat 3: Sarah meets allies and enemies.
-- story_beat 4: Sarah faces major obstacles.
-- story_beat 5: Sarah uncovers clues about the new world's past.
-- story_beat 6: Sarah gets closer to the truth about the MacGuffin.
-- story_beat 7: Sarah confronts the villain.
-- story_beat 8: Sarah overcomes her fears and doubts.
-- story_beat 9: Sarah uses the MacGuffin to change the course of events.
-- story_beat 10: Sarah triumphs and returns home.
-
-YOU MUST CHOSE BETWEEN KILL SARAH OR LET HER RETURN HOME.
-"""

server/core/setup.py

@@ -5,7 +5,7 @@ from core.story_generator import StoryGenerator
 # Initialize generators with None - they will be set up when needed
 universe_generator = None
 
-def setup_game(api_key: str, model_name: str = "mistral-small"):
+def setup_game(api_key: str, model_name: str = "mistral-medium"):
     """Setup all game components with the provided API key."""
     global universe_generator
     

server/core/story_generator.py

@@ -28,29 +28,48 @@ class StoryGenerator:
             self.is_winning_story = random.random() < GameConfig.WINNING_STORY_CHANCE
             self.mistral_client = MistralClient(api_key=api_key, model_name=model_name)
             self.image_prompt_generator = None  # Will be initialized with the first universe style
-            self.metadata_generator = MetadataGenerator(self.mistral_client)
+            self.metadata_generator = None  # Will be initialized with hero description
             self.segment_generators: Dict[str, StorySegmentGenerator] = {}
             self._initialized = True
 
-    def create_segment_generator(self, session_id: str, style: dict, genre: str, epoch: str, base_story: str, macguffin: str):
+    def create_segment_generator(self, session_id: str, style: dict, genre: str, epoch: str, base_story: str, macguffin: str, hero_name: str, hero_desc: str):
         """Create a new StorySegmentGenerator adapted to the specified universe for a given session."""
-        # print(f"Creating StorySegmentGenerator for session {session_id} in StoryGenerator singleton")
         
         try:
-            # Get the first artist from the style references
-            artist_style = f"{style['references'][0]['artist']} comic panel"
+            # Use selected_artist if available, otherwise get the first artist from references
+            if "selected_artist" in style:
+                artist = style["selected_artist"]
+            else:
+                artist = style["references"][0]["artist"]
+                
+            # Create a detailed artist style string
+            artist_style = f"{artist}, {style['name']} style, {genre} in {epoch}"
             
-            # Initialize image prompt generator if not already done
-            if self.image_prompt_generator is None:
-                self.image_prompt_generator = ImagePromptGenerator(self.mistral_client, artist_style=artist_style)
+            # Always create a new ImagePromptGenerator for each session with the correct artist and hero
+            self.image_prompt_generator = ImagePromptGenerator(
+                self.mistral_client, 
+                artist_style=artist_style,
+                hero_name=hero_name,
+                hero_desc=hero_desc
+            )
+
+            # Create a new MetadataGenerator with hero description
+            self.metadata_generator = MetadataGenerator(
+                self.mistral_client,
+                hero_name=hero_name,
+                hero_desc=hero_desc
+            )
             
+            # Create a new StorySegmentGenerator with all universe parameters
             self.segment_generators[session_id] = StorySegmentGenerator(
                 self.mistral_client,
                 universe_style=style["name"],
                 universe_genre=genre,
                 universe_epoch=epoch,
                 universe_story=base_story,
-                universe_macguffin=macguffin
+                universe_macguffin=macguffin,
+                hero_name=hero_name,
+                hero_desc=hero_desc
             )
             # print(f"Current StorySegmentGenerators in StoryGenerator: {list(self.segment_generators.keys())}")
         except KeyError as e:
@@ -94,7 +113,8 @@ class StoryGenerator:
             current_location=game_state.current_location,
             story_beat=game_state.story_beat,
             turn_before_end=self.turn_before_end,
-            is_winning_story=self.is_winning_story
+            is_winning_story=self.is_winning_story,
+            story_history=story_history
         )
         # print(f"Generated metadata_response: {metadata_response}")
         

server/core/styles/universe_styles.json

@@ -1,124 +1,147 @@
 {
   "styles": [
     {
-      "name": "Franco-Belge Ligne Claire",
-      "description": "Style épuré avec des lignes nettes et des couleurs plates",
+      "name": "American Comics (Modern)",
+      "description": "Style contemporain des comics américains avec des rendus dynamiques et des couleurs vives",
       "references": [
         {
-          "artist": "Hergé",
-          "works": ["Tintin", "Les Aventures de Jo, Zette et Jocko"]
+          "artist": "Jim Lee",
+          "works": ["X-Men", "Batman", "Superman Unchained"]
         },
         {
-          "artist": "Edgar P. Jacobs",
-          "works": ["Blake et Mortimer"]
+          "artist": "Alex Ross",
+          "works": ["Kingdom Come", "Marvels", "Justice"]
         },
         {
-          "artist": "Yves Chaland",
-          "works": ["Freddy Lombard", "Bob Fish"]
+          "artist": "Stuart Immonen",
+          "works": ["Ultimate Spider-Man", "New Avengers", "Star Wars"]
+        }
+      ]
+    },
+    {
+      "name": "American Comics (1950s)",
+      "description": "Style rétro des comics de l'âge d'or avec des couleurs primaires et des compositions classiques",
+      "references": [
+        {
+          "artist": "Jack Kirby",
+          "works": ["Captain America", "Fantastic Four", "The Avengers"]
         },
         {
-          "artist": "Joost Swarte",
-          "works": ["Modern Art", "L'Art Moderne"]
+          "artist": "Steve Ditko",
+          "works": ["Spider-Man", "Doctor Strange", "The Question"]
+        },
+        {
+          "artist": "Curt Swan",
+          "works": ["Superman", "Action Comics", "Adventure Comics"]
         }
       ]
     },
     {
-      "name": "Science-Fiction Européenne",
-      "description": "Style visionnaire mêlant précision technique et onirisme",
+      "name": "Japanese Manga",
+      "description": "Style manga japonais avec des expressions dynamiques et des effets dramatiques",
       "references": [
         {
-          "artist": "Moebius (Jean Giraud)",
-          "works": ["L'Incal", "Arzak", "Le Garage Hermétique", "Aedena"]
+          "artist": "Katsuhiro Otomo",
+          "works": ["Akira", "Domu", "Steamboy"]
         },
         {
-          "artist": "Philippe Druillet",
-          "works": ["Lone Sloane", "Salammbô", "Delirius"]
+          "artist": "Naoki Urasawa",
+          "works": ["Monster", "20th Century Boys", "Pluto"]
         },
         {
-          "artist": "François Schuiten",
-          "works": ["Les Cités Obscures", "La Fièvre d'Urbicande"]
+          "artist": "Takehiko Inoue",
+          "works": ["Vagabond", "Slam Dunk", "Real"]
         }
       ]
     },
     {
-      "name": "Comics Américain Classique",
-      "description": "Style dynamique avec des couleurs vives et des ombrages marqués",
+      "name": "Franco-Belge",
+      "description": "Style de la bande dessinée franco-belge avec des lignes claires et une attention aux détails",
       "references": [
         {
-          "artist": "Jack Kirby",
-          "works": ["Fantastic Four", "New Gods", "Captain America"]
+          "artist": "Hergé",
+          "works": ["Tintin", "Quick et Flupke", "Jo, Zette et Jocko"]
         },
         {
-          "artist": "Steve Ditko",
-          "works": ["Spider-Man", "Doctor Strange", "Mr. A"]
+          "artist": "Moebius",
+          "works": ["L'Incal", "Arzak", "Le Garage Hermétique"]
         },
         {
-          "artist": "Neal Adams",
-          "works": ["Batman", "Green Lantern/Green Arrow", "X-Men"]
+          "artist": "François Schuiten",
+          "works": ["Les Cités Obscures", "La Fièvre d'Urbicande", "La Tour"]
         }
       ]
     }
   ],
   "genres": [
-    "Steampunk",
-    "Cyberpunk",
-    "Post-apocalyptic",
+    "Superhero",
+    "Science Fiction",
     "Fantasy",
-    "Space Opera",
-    "Western",
-    "Film Noir",
+    "Adventure",
+    "Mystery",
+    "Romance",
     "Horror",
-    "Mythology",
-    "Dystopia",
-    "Alternate History",
-    "Heroic Fantasy",
-    "Urban Fantasy"
+    "Comedy",
+    "Drama",
+    "Historical"
   ],
   "epochs": [
-    "Prehistory",
-    "Antiquity",
-    "Middle Ages",
+    "Ancient Times",
+    "Medieval",
     "Renaissance",
     "Industrial Revolution",
-    "1920s",
-    "1950s",
-    "Contemporary Era",
+    "Modern Day",
     "Near Future",
-    "Distant Future",
+    "Far Future",
     "Post-Apocalyptic",
-    "Golden Age",
-    "Space Age"
+    "Alternative History",
+    "Timeless"
   ],
   "macguffins": [
-    "The Key",
-    "The Map",
-    "The Stone",
-    "The Book",
-    "The Amulet",
-    "The Sword",
-    "The Crown",
-    "The Ring",
-    "The Scroll",
-    "The Chalice",
-    "The Crystal",
-    "The Orb",
-    "The Mask",
-    "The Scepter",
-    "The Shield",
-    "The Lantern",
-    "The Mirror",
-    "The Coin",
-    "The Necklace",
-    "The Dagger",
-    "The Compass",
-    "The Horn",
-    "The Bell",
-    "The Feather",
-    "The Gem",
-    "The Helm",
-    "The Cloak",
-    "The Gauntlet",
-    "The Flute",
-    "The Harp"
+    "The Cosmic Artifact",
+    "The Ancient Scroll",
+    "The Power Crystal",
+    "The Lost Technology",
+    "The Sacred Relic",
+    "The Mysterious Device",
+    "The Enchanted Object",
+    "The Secret Formula",
+    "The Hidden Map",
+    "The Legendary Weapon"
+  ],
+  "hero": [
+    "Sarah, 28, short dark hair, blue eyes, a bit rude, wearing a simple t-shirt and jeans.",
+    "Akira, 16, long black hair, brown eyes, calm, wearing a school uniform with a blazer.",
+    "Aisha, 32, curly brown hair, green eyes, creative, dressed in a colorful blouse and tailored pants.",
+    "Diego, 35, wavy black hair, brown eyes, passionate, wearing a casual shirt and cargo shorts.",
+    "Mei, 25, straight black hair, black eyes, determined, in sportswear with a hoodie.",
+    "Raj, 29, short black hair, brown eyes, innovative, in a modern shirt and chinos.",
+    "Fatima, 31, long black hair, brown eyes, courageous, wearing a light coat and scarf.",
+    "Yuki, 27, long black hair, black eyes, mysterious, in a traditional robe with intricate patterns.",
+    "Liam, 33, curly red hair, green eyes, charismatic, in a cozy sweater and jeans.",
+    "Zara, 28, short black hair, brown eyes, fearless, wearing an explorer's jacket and cargo pants.",
+    "Hiroshi, 70, shaved head, brown eyes, wise, in monk robes with simple sandals.",
+    "Amara, 26, long black hair, brown eyes, expressive, in a dance dress with flowing fabric.",
+    "Kofi, 34, short black hair, brown eyes, resourceful, in a patterned shirt and khakis.",
+    "Elena, 30, long brown hair, green eyes, passionate, in a kitchen apron over a casual dress.",
+    "Santiago, 32, short black hair, brown eyes, daring, in a pilot's jacket and aviator sunglasses.",
+    "Leila, 29, long brown hair, brown eyes, talented, in an elegant suit with a silk scarf.",
+    "Nikolai, 36, short blond hair, blue eyes, brilliant, in a lab coat and formal trousers.",
+    "Jamal, 35, short black hair, brown eyes, perceptive, in a detective coat and fedora.",
+    "Anika, 30, long black hair, brown eyes, gentle, in a medical blouse and comfortable shoes.",
+    "Mateo, 31, short brown hair, brown eyes, skilled, in work overalls and sturdy boots.",
+    "Sofia, 29, long brown hair, green eyes, visionary, in a director's t-shirt and jeans.",
+    "Hassan, 60, short gray hair, brown eyes, wise, in a traditional djellaba and leather sandals.",
+    "Isabella, 27, long black hair, brown eyes, brave, in light armor with a leather belt.",
+    "Yara, 32, long brown hair, brown eyes, talented, in a cozy sweater and leggings.",
+    "Kai, 26, short blond hair, blue eyes, daring, in a surf suit and flip-flops.",
+    "Lina, 30, short blond hair, blue eyes, dedicated, in professional attire with a blazer.",
+    "Omar, 34, short black hair, brown eyes, skilled, in a sailor's jacket and waterproof boots.",
+    "Priya, 31, long black hair, brown eyes, brilliant, in a scientific blouse and pencil skirt.",
+    "Rafael, 33, short brown hair, brown eyes, passionate, in an activist t-shirt and cargo pants.",
+    "Emma, 18, long blond hair, blue eyes, adventurous, in a denim jacket and sneakers.",
+    "Hans, 65, short gray hair, blue eyes, thoughtful, in a wool sweater and corduroy pants.",
+    "Sophie, 22, short brown hair, green eyes, cheerful, in a floral dress and sandals.",
+    "Lars, 40, short blond hair, blue eyes, practical, in a plaid shirt and jeans."
   ]
 }

server/scripts/test_game.py

@@ -82,10 +82,17 @@ async def play_game(show_context: bool = False, auto_mode: bool = False, max_tur
         print(f"⏱️  Maximum turns: {max_turns}")
     print_separator()
     
-    # Generate universe
-    print("🌍 Generating universe...")
-    style, genre, epoch, macguffin = universe_generator._get_random_elements()
-    universe = await universe_generator.generate()
+    # Test universe generation
+    style, genre, epoch, macguffin, hero = universe_generator._get_random_elements()
+    print(f"\nGenerated universe elements:")
+    print(f"Style: {style['name']}")
+    print(f"Genre: {genre}")
+    print(f"Epoch: {epoch}")
+    print(f"MacGuffin: {macguffin}")
+    print(f"Hero: {hero}")
+
+    base_story = await universe_generator.generate()
+    print(f"\nGenerated base story:\n{base_story}")
     
     # Create session and game state
     session_id = str(uuid.uuid4())
@@ -94,21 +101,22 @@ async def play_game(show_context: bool = False, auto_mode: bool = False, max_tur
         style=style["name"],
         genre=genre,
         epoch=epoch,
-        base_story=universe
+        base_story=base_story
     )
     
-    # Create text generator for this session
+    # Create story generator
     story_generator.create_segment_generator(
         session_id=session_id,
         style=style,
         genre=genre,
         epoch=epoch,
-        base_story=universe,
-        macguffin=macguffin
+        base_story=base_story,
+        macguffin=macguffin,
+        hero=hero
     )
     
     # Display universe information
-    print_universe_info(style["name"], genre, epoch, universe)
+    print_universe_info(style["name"], genre, epoch, base_story)
     
     last_choice = None
     

server/services/mistral_client.py

@@ -31,7 +31,7 @@ logger = logging.getLogger(__name__)
 # Pricing: https://docs.mistral.ai/platform/pricing/
 
 class MistralClient:
-    def __init__(self, api_key: str, model_name: str = "mistral-small"):
+    def __init__(self, api_key: str, model_name: str = "mistral-small-latest"):
         logger.info(f"Initializing MistralClient with model: {model_name}")
         self.model = ChatMistralAI(
             mistral_api_key=api_key,
@@ -157,4 +157,38 @@ class MistralClient:
             return await self._generate_with_retry(messages)
         except Exception as e:
             print(f"Error transforming prompt: {str(e)}")
-            return story_text 
+            return story_text 
+
+    async def generate_text(self, messages: list[BaseMessage]) -> str:
+        """
+        Génère une réponse textuelle simple sans structure JSON.
+        Utile pour la génération de texte narratif ou descriptif.
+        
+        Args:
+            messages: Liste des messages pour le modèle
+            
+        Returns:
+            str: Le texte généré
+        """
+        retry_count = 0
+        last_error = None
+        
+        while retry_count < self.max_retries:
+            try:
+                logger.info(f"Attempt {retry_count + 1}/{self.max_retries}")
+                
+                await self._wait_for_rate_limit()
+                response = await self.model.ainvoke(messages)
+                return response.content.strip()
+                
+            except Exception as e:
+                logger.error(f"Error on attempt {retry_count + 1}/{self.max_retries}: {str(e)}")
+                retry_count += 1
+                if retry_count < self.max_retries:
+                    wait_time = 2 * retry_count
+                    logger.info(f"Waiting {wait_time} seconds before retry...")
+                    await asyncio.sleep(wait_time)
+                    continue
+                
+                logger.error(f"Failed after {self.max_retries} attempts. Last error: {last_error or str(e)}")
+                raise Exception(f"Failed after {self.max_retries} attempts. Last error: {last_error or str(e)}")