update

client/src/components/StoryChoices.jsx

@@ -0,0 +1,87 @@
+import { Box, Button, Typography, Chip } from "@mui/material";
+
+// Function to convert text with ** to Chip elements
+const formatTextWithBold = (text) => {
+  if (!text) return "";
+  const parts = text.split(/(\*\*.*?\*\*)/g);
+  return parts.map((part, index) => {
+    if (part.startsWith("**") && part.endsWith("**")) {
+      return (
+        <Chip
+          key={index}
+          label={part.slice(2, -2)}
+          size="small"
+          sx={{
+            mx: 0.5,
+            fontSize: "1.1rem",
+            backgroundColor: "rgba(255, 255, 255, 0.1)",
+            color: "white",
+          }}
+        />
+      );
+    }
+    return part;
+  });
+};
+
+export function StoryChoices({ choices = [], onChoice, disabled = false }) {
+  if (!choices || choices.length === 0) return null;
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: 2,
+        p: 3,
+        minWidth: "350px",
+        height: "100%",
+        backgroundColor: "transparent",
+      }}
+    >
+      {choices.map((choice, index) => (
+        <Box
+          key={choice.id}
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 1,
+            width: "100%",
+          }}
+        >
+          <Typography variant="caption" sx={{ opacity: 0.7, color: "white" }}>
+            Suggestion {index + 1}
+          </Typography>
+          <Button
+            variant="outlined"
+            size="large"
+            onClick={() => onChoice(choice.id)}
+            disabled={disabled}
+            sx={{
+              width: "100%",
+              textTransform: "none",
+              cursor: "pointer",
+              fontSize: "1.1rem",
+              padding: "16px 24px",
+              lineHeight: 1.3,
+              color: "white",
+              borderColor: "rgba(255, 255, 255, 0.23)",
+              "&:hover": {
+                borderColor: "white",
+                backgroundColor: "rgba(255, 255, 255, 0.05)",
+              },
+              "& .MuiChip-root": {
+                fontSize: "1.1rem",
+              },
+            }}
+          >
+            {formatTextWithBold(choice.text)}
+          </Button>
+        </Box>
+      ))}
+    </Box>
+  );
+}

client/src/hooks/useImageGeneration.js

@@ -1,12 +1,11 @@
 import axios from "axios";
+import { getDefaultHeaders } from "../utils/session";
 
 const API_URL = import.meta.env.VITE_API_URL || "http://localhost:8000";
 
 // Create axios instance with default config
 const api = axios.create({
-  headers: {
-    "x-client-id": `client_${Math.random().toString(36).substring(2)}`,
-  },
+  headers: getDefaultHeaders(),
 });
 
 export function useImageGeneration() {

client/src/hooks/useNarrator.js

@@ -0,0 +1,62 @@
+import { useState, useRef } from "react";
+import { storyApi } from "../utils/api";
+
+export function useNarrator(isEnabled = true) {
+  const [isNarratorSpeaking, setIsNarratorSpeaking] = useState(false);
+  const audioRef = useRef(new Audio());
+
+  const stopNarration = () => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current.currentTime = 0;
+      setIsNarratorSpeaking(false);
+    }
+  };
+
+  const playNarration = async (text) => {
+    if (!isEnabled) return;
+
+    try {
+      // Stop any ongoing narration
+      stopNarration();
+
+      // Get audio from API
+      const response = await storyApi.narrate(text);
+
+      if (!response || !response.audio_base64) {
+        throw new Error("Pas d'audio reçu du serveur");
+      }
+
+      // Create audio blob and URL
+      const audioBlob = await fetch(
+        `data:audio/mpeg;base64,${response.audio_base64}`
+      ).then((r) => r.blob());
+      const audioUrl = URL.createObjectURL(audioBlob);
+
+      // Set up audio element
+      audioRef.current.src = audioUrl;
+      audioRef.current.onplay = () => setIsNarratorSpeaking(true);
+      audioRef.current.onended = () => {
+        setIsNarratorSpeaking(false);
+        URL.revokeObjectURL(audioUrl);
+      };
+      audioRef.current.onerror = () => {
+        console.error("Error playing audio");
+        setIsNarratorSpeaking(false);
+        URL.revokeObjectURL(audioUrl);
+      };
+
+      // Play audio
+      await audioRef.current.play();
+    } catch (error) {
+      console.error("Error in playNarration:", error);
+      setIsNarratorSpeaking(false);
+    }
+  };
+
+  return {
+    isNarratorSpeaking,
+    playNarration,
+    stopNarration,
+  };
+}

client/src/hooks/useStoryCapture.js

@@ -0,0 +1,153 @@
+import { useCallback } from "react";
+import html2canvas from "html2canvas";
+
+export function useStoryCapture() {
+  const captureStory = useCallback(async (containerRef) => {
+    if (!containerRef.current) return null;
+
+    try {
+      // Trouver le conteneur scrollable (ComicLayout)
+      const scrollContainer = containerRef.current.querySelector(
+        "[data-comic-layout]"
+      );
+      if (!scrollContainer) {
+        console.error("Comic layout container not found");
+        return null;
+      }
+
+      // Sauvegarder les styles et positions originaux
+      const originalStyles = new Map();
+      const elementsToRestore = [
+        containerRef.current,
+        scrollContainer,
+        ...Array.from(scrollContainer.children),
+      ];
+
+      // Sauvegarder les styles originaux
+      elementsToRestore.forEach((el) => {
+        originalStyles.set(el, {
+          style: el.style.cssText,
+          scroll: { left: el.scrollLeft, top: el.scrollTop },
+        });
+      });
+
+      // Obtenir les dimensions totales (sans le padding)
+      const children = Array.from(scrollContainer.children);
+      const lastChild = children[children.length - 1];
+      const lastChildRect = lastChild.getBoundingClientRect();
+      const containerRect = scrollContainer.getBoundingClientRect();
+
+      // Calculer la largeur totale en incluant la position et la largeur complète du dernier élément
+      const totalWidth =
+        lastChildRect.x + lastChildRect.width - containerRect.x + 32; // Ajouter un petit padding de sécurité
+
+      const totalHeight = scrollContainer.scrollHeight;
+
+      // Préparer le conteneur pour la capture
+      Object.assign(containerRef.current.style, {
+        width: "auto",
+        height: "auto",
+        overflow: "visible",
+      });
+
+      // Préparer le conteneur scrollable
+      Object.assign(scrollContainer.style, {
+        width: `${totalWidth}px`,
+        height: `${totalHeight}px`,
+        position: "relative",
+        overflow: "visible",
+        display: "flex",
+        transform: "none",
+        transition: "none",
+        padding: "0",
+        justifyContent: "flex-start", // Forcer l'alignement à gauche
+      });
+
+      // Forcer un reflow
+      scrollContainer.offsetHeight;
+
+      // Capturer l'image
+      const canvas = await html2canvas(scrollContainer, {
+        scale: 2,
+        useCORS: true,
+        allowTaint: true,
+        backgroundColor: "#242424",
+        width: totalWidth,
+        height: totalHeight,
+        x: 0,
+        y: 0,
+        scrollX: 0,
+        scrollY: 0,
+        windowWidth: totalWidth,
+        windowHeight: totalHeight,
+        logging: true,
+        onclone: (clonedDoc) => {
+          const clonedContainer = clonedDoc.querySelector(
+            "[data-comic-layout]"
+          );
+          if (clonedContainer) {
+            Object.assign(clonedContainer.style, {
+              width: `${totalWidth}px`,
+              height: `${totalHeight}px`,
+              position: "relative",
+              overflow: "visible",
+              display: "flex",
+              transform: "none",
+              transition: "none",
+              padding: "0",
+              justifyContent: "flex-start",
+            });
+
+            // S'assurer que tous les enfants sont visibles et alignés
+            Array.from(clonedContainer.children).forEach(
+              (child, index, arr) => {
+                Object.assign(child.style, {
+                  position: "relative",
+                  transform: "none",
+                  transition: "none",
+                  marginLeft: "0",
+                  marginRight: index < arr.length - 1 ? "16px" : "16px", // Garder une marge à droite même pour le dernier
+                });
+              }
+            );
+          }
+        },
+      });
+
+      // Restaurer tous les styles originaux
+      elementsToRestore.forEach((el) => {
+        const original = originalStyles.get(el);
+        if (original) {
+          el.style.cssText = original.style;
+          el.scrollLeft = original.scroll.left;
+          el.scrollTop = original.scroll.top;
+        }
+      });
+
+      return canvas.toDataURL("image/png", 1.0);
+    } catch (error) {
+      console.error("Error capturing story:", error);
+      return null;
+    }
+  }, []);
+
+  const downloadStoryImage = useCallback(
+    async (containerRef, filename = "my-story.png") => {
+      const imageUrl = await captureStory(containerRef);
+      if (!imageUrl) return;
+
+      const link = document.createElement("a");
+      link.href = imageUrl;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    },
+    [captureStory]
+  );
+
+  return {
+    captureStory,
+    downloadStoryImage,
+  };
+}

client/src/layouts/ComicLayout.jsx

@@ -1,11 +1,22 @@
-import { Box } from "@mui/material";
+import { Box, IconButton, Tooltip } from "@mui/material";
 import { LAYOUTS } from "./config";
 import { groupSegmentsIntoLayouts } from "./utils";
 import { useEffect, useRef } from "react";
 import { Panel } from "./Panel";
+import { StoryChoices } from "../components/StoryChoices";
+import PhotoCameraIcon from "@mui/icons-material/PhotoCamera";
 
 // Component for displaying a page of panels
-function ComicPage({ layout, layoutIndex }) {
+function ComicPage({
+  layout,
+  layoutIndex,
+  isLastPage,
+  choices,
+  onChoice,
+  isLoading,
+  showScreenshot,
+  onScreenshot,
+}) {
   // Calculer le nombre total d'images dans tous les segments de ce layout
   const totalImages = layout.segments.reduce((total, segment) => {
     return total + (segment.images?.length || 0);
@@ -13,55 +24,117 @@ function ComicPage({ layout, layoutIndex }) {
 
   return (
     <Box
-      key={layoutIndex}
       sx={{
-        display: "grid",
-        gridTemplateColumns: `repeat(${LAYOUTS[layout.type].gridCols}, 1fr)`,
-        gridTemplateRows: `repeat(${LAYOUTS[layout.type].gridRows}, 1fr)`,
+        display: "flex",
+        flexDirection: "row",
         gap: 2,
         height: "100%",
-        aspectRatio: "0.7",
-        backgroundColor: "white",
-        boxShadow: "0 0 10px rgba(0,0,0,0.1)",
-        borderRadius: "4px",
-        p: 2,
-        flexShrink: 0,
       }}
     >
-      {LAYOUTS[layout.type].panels
-        .slice(0, totalImages)
-        .map((panel, panelIndex) => {
-          // Trouver le segment qui contient l'image pour ce panel
-          let currentImageIndex = 0;
-          let targetSegment = null;
-          let targetImageIndex = 0;
+      <Box
+        sx={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${LAYOUTS[layout.type].gridCols}, 1fr)`,
+          gridTemplateRows: `repeat(${LAYOUTS[layout.type].gridRows}, 1fr)`,
+          gap: 2,
+          height: "100%",
+          aspectRatio: "0.7",
+          backgroundColor: "white",
+          boxShadow: "0 0 10px rgba(0,0,0,0.1)",
+          borderRadius: "4px",
+          p: 2,
+          pb: 4,
+          flexShrink: 0,
+          position: "relative",
+        }}
+      >
+        {LAYOUTS[layout.type].panels
+          .slice(0, totalImages)
+          .map((panel, panelIndex) => {
+            // Trouver le segment qui contient l'image pour ce panel
+            let currentImageIndex = 0;
+            let targetSegment = null;
+            let targetImageIndex = 0;
 
-          for (const segment of layout.segments) {
-            const segmentImageCount = segment.images?.length || 0;
-            if (currentImageIndex + segmentImageCount > panelIndex) {
-              targetSegment = segment;
-              targetImageIndex = panelIndex - currentImageIndex;
-              break;
+            for (const segment of layout.segments) {
+              const segmentImageCount = segment.images?.length || 0;
+              if (currentImageIndex + segmentImageCount > panelIndex) {
+                targetSegment = segment;
+                targetImageIndex = panelIndex - currentImageIndex;
+                break;
+              }
+              currentImageIndex += segmentImageCount;
             }
-            currentImageIndex += segmentImageCount;
-          }
 
-          return (
-            <Panel
-              key={panelIndex}
-              panel={panel}
-              segment={targetSegment}
-              panelIndex={targetImageIndex}
+            return (
+              <Panel
+                key={panelIndex}
+                panel={panel}
+                segment={targetSegment}
+                panelIndex={targetImageIndex}
+              />
+            );
+          })}
+        <Box
+          sx={{
+            position: "absolute",
+            bottom: 8,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            color: "black",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+          }}
+        >
+          {layoutIndex + 1}
+        </Box>
+      </Box>
+      {isLastPage && (choices?.length > 0 || showScreenshot) && (
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+          {showScreenshot && (
+            <Box sx={{ display: "flex", justifyContent: "center", p: 2 }}>
+              <Tooltip title="Capturer l'histoire">
+                <IconButton
+                  onClick={onScreenshot}
+                  sx={{
+                    border: "1px solid",
+                    borderColor: "rgba(255, 255, 255, 0.23)",
+                    color: "white",
+                    p: 2,
+                    "&:hover": {
+                      borderColor: "white",
+                      backgroundColor: "rgba(255, 255, 255, 0.05)",
+                    },
+                  }}
+                >
+                  <PhotoCameraIcon />
+                </IconButton>
+              </Tooltip>
+            </Box>
+          )}
+          {choices?.length > 0 && (
+            <StoryChoices
+              choices={choices}
+              onChoice={onChoice}
+              disabled={isLoading}
             />
-          );
-        })}
+          )}
+        </Box>
+      )}
     </Box>
   );
 }
 
 // Main comic layout component
-export function ComicLayout({ segments }) {
-  const layouts = groupSegmentsIntoLayouts(segments);
+export function ComicLayout({
+  segments,
+  choices,
+  onChoice,
+  isLoading,
+  showScreenshot,
+  onScreenshot,
+}) {
   const scrollContainerRef = useRef(null);
 
   // Effect to scroll to the right when new layouts are added
@@ -72,11 +145,16 @@ export function ComicLayout({ segments }) {
         behavior: "smooth",
       });
     }
-  }, [layouts.length]); // Only run when the number of layouts changes
+  }, [segments.length]);
+
+  // Filtrer les segments qui sont en cours de chargement
+  const loadedSegments = segments.filter((segment) => !segment.isLoading);
+  const layouts = groupSegmentsIntoLayouts(loadedSegments);
 
   return (
     <Box
       ref={scrollContainerRef}
+      data-comic-layout
       sx={{
         display: "flex",
         flexDirection: "row",
@@ -103,6 +181,12 @@ export function ComicLayout({ segments }) {
           key={layoutIndex}
           layout={layout}
           layoutIndex={layoutIndex}
+          isLastPage={layoutIndex === layouts.length - 1}
+          choices={choices}
+          onChoice={onChoice}
+          isLoading={isLoading}
+          showScreenshot={showScreenshot}
+          onScreenshot={onScreenshot}
         />
       ))}
     </Box>

client/src/layouts/Panel.jsx

@@ -57,21 +57,27 @@ export function Panel({ segment, panel, panelIndex }) {
         borderRadius: "8px",
         overflow: "hidden",
         transition: "all 0.3s ease-in-out",
+        aspectRatio: `${panel.width} / ${panel.height}`, // Forcer le ratio même sans image
       }}
     >
       {segment && (
         <>
-          {/* Image avec fade in */}
-          {segment.images?.[panelIndex] && (
-            <Box
-              sx={{
-                position: "relative",
-                width: "100%",
-                height: "100%",
-                opacity: imageLoaded ? 1 : 0,
-                transition: "opacity 0.5s ease-in-out",
-              }}
-            >
+          {/* Conteneur d'image avec dimensions fixes */}
+          <Box
+            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",
+            }}
+          >
+            {segment.images?.[panelIndex] && (
               <img
                 src={`data:image/jpeg;base64,${segment.images[panelIndex]}`}
                 alt={`Story scene ${panelIndex + 1}`}
@@ -84,23 +90,21 @@ export function Panel({ segment, panel, panelIndex }) {
                 onLoad={handleImageLoad}
                 onError={handleImageError}
               />
-            </Box>
-          )}
+            )}
+          </Box>
 
-          {/* Spinner de chargement toujours affiché quand l'image n'est pas chargée */}
+          {/* Spinner de chargement */}
           {(!segment.images?.[panelIndex] || !imageLoaded) && (
             <Box
               sx={{
                 position: "absolute",
                 top: 0,
                 left: 0,
-                width: "100%",
-                height: "100%",
+                right: 0,
+                bottom: 0,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                flexDirection: "column",
-                gap: 1,
                 opacity: 0.5,
                 backgroundColor: "white",
                 zIndex: 1,

client/src/layouts/config.js

@@ -141,27 +141,37 @@ export const nonRandomLayouts = Object.keys(LAYOUTS).filter(
   (layout) => layout !== "COVER"
 );
 
+// Grouper les layouts par nombre de panneaux
+export const LAYOUTS_BY_PANEL_COUNT = {
+  1: ["COVER"],
+  2: ["LAYOUT_2"], // Layouts avec exactement 2 panneaux
+  3: ["LAYOUT_5"], // Layouts avec exactement 3 panneaux
+  4: ["LAYOUT_3", "LAYOUT_4", "LAYOUT_6"], // Layouts avec exactement 4 panneaux
+};
+
 // Helper functions for layout configuration
-export const getNextLayoutType = (currentLayoutCount) => {
-  // Get all available layouts except COVER
-  const availableLayouts = Object.keys(LAYOUTS).filter(
-    (layout) => layout !== "COVER"
-  );
+export const getNextLayoutType = (currentLayoutCount, imageCount) => {
+  // Obtenir les layouts disponibles pour ce nombre d'images
+  const availableLayouts = LAYOUTS_BY_PANEL_COUNT[imageCount] || [];
 
-  // Use a pseudo-random selection based on the current count
-  // but avoid repeating the same layout twice in a row
-  const previousLayout = `LAYOUT_${
-    (currentLayoutCount % availableLayouts.length) + 1
-  }`;
-  let nextLayout;
+  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;
+      }
+    }
+  }
 
-  do {
-    const randomIndex =
-      Math.floor(Math.random() * (availableLayouts.length - 1)) + 1;
-    nextLayout = `LAYOUT_${randomIndex}`;
-  } while (nextLayout === previousLayout);
+  if (!availableLayouts.length) {
+    return "LAYOUT_1"; // Layout par défaut si rien ne correspond
+  }
 
-  return nextLayout;
+  // Sélectionner un layout aléatoire parmi ceux disponibles
+  const randomIndex = Math.floor(Math.random() * availableLayouts.length);
+  return availableLayouts[randomIndex];
 };
 
 export const getLayoutDimensions = (layoutType, panelIndex) =>

client/src/layouts/utils.js

@@ -8,42 +8,19 @@ export function groupSegmentsIntoLayouts(segments) {
   if (!segments || segments.length === 0) return [];
 
   const layouts = [];
-  let currentLayout = null;
-  let currentPanelIndex = 0;
 
   segments.forEach((segment) => {
+    const imageCount = segment.images?.length || 0;
+
     // Si c'est le premier segment ou le dernier (mort/victoire), créer un layout COVER
     if (segment.is_first_step || segment.is_last_step) {
-      currentLayout = { type: "COVER", segments: [segment] };
-      layouts.push(currentLayout);
-      currentPanelIndex = segment.images?.length || 0;
+      layouts.push({ type: "COVER", segments: [segment] });
       return;
     }
 
-    // Si pas de layout courant ou si tous les panels sont remplis, en créer un nouveau
-    if (
-      !currentLayout ||
-      currentPanelIndex >= LAYOUTS[currentLayout.type].panels.length
-    ) {
-      // Utiliser le layout existant pour cette page ou en créer un nouveau
-      const pageIndex = layouts.length;
-      let nextType = pageLayoutMap.get(pageIndex);
-      if (!nextType) {
-        nextType = getNextLayoutType(layouts.length);
-        pageLayoutMap.set(pageIndex, nextType);
-      }
-      currentLayout = { type: nextType, segments: [] };
-      layouts.push(currentLayout);
-      currentPanelIndex = 0;
-    }
-
-    // Ajouter le segment au layout courant
-    currentLayout.segments.push(segment);
-
-    // Mettre à jour l'index du panel pour le prochain segment
-    if (segment.images) {
-      currentPanelIndex += segment.images.length;
-    }
+    // Pour tous les autres segments, créer un layout adapté au nombre d'images
+    const layoutType = getNextLayoutType(layouts.length, imageCount);
+    layouts.push({ type: layoutType, segments: [segment] });
   });
 
   return layouts;
@@ -63,30 +40,15 @@ export function getNextPanelDimensions(segments) {
     return LAYOUTS.COVER.panels[0];
   }
 
-  // Pour les segments du milieu, déterminer le layout et la position dans ce layout
-  const layouts = groupSegmentsIntoLayouts(nonChoiceSegments.slice(0, -1));
-  const lastLayout = layouts[layouts.length - 1];
-  const segmentsInLastLayout = lastLayout ? lastLayout.segments.length : 0;
-
-  // Utiliser le layout existant ou en créer un nouveau
-  const pageIndex = layouts.length;
-  let nextLayoutType = pageLayoutMap.get(pageIndex);
-  if (!nextLayoutType) {
-    nextLayoutType = getNextLayoutType(layouts.length);
-    pageLayoutMap.set(pageIndex, nextLayoutType);
-  }
-  const nextPanelIndex = segmentsInLastLayout;
-
-  // Si le dernier layout est plein, prendre le premier panneau du prochain layout
-  if (
-    !lastLayout ||
-    segmentsInLastLayout >= LAYOUTS[lastLayout.type].panels.length
-  ) {
-    return LAYOUTS[nextLayoutType].panels[0];
-  }
+  // Pour les segments du milieu, déterminer le layout en fonction du nombre d'images
+  const lastSegment = nonChoiceSegments[nonChoiceSegments.length - 1];
+  const imageCount = lastSegment.images?.length || 0;
+  const layoutType = getNextLayoutType(
+    nonChoiceSegments.length - 1,
+    imageCount
+  );
 
-  // Sinon, prendre le prochain panneau du layout courant
-  return LAYOUTS[lastLayout.type].panels[nextPanelIndex];
+  return LAYOUTS[layoutType].panels[0];
 }
 
 // Function to reset layout map (call this when starting a new story)

client/src/pages/Game.jsx

@@ -1,25 +1,367 @@
-import { motion } from "framer-motion";
-import App from "./game/App";
-import { Box } from "@mui/material";
+import { useState, useEffect, useRef } from "react";
+import { Box, LinearProgress, IconButton, Tooltip } from "@mui/material";
+import { ComicLayout } from "../layouts/ComicLayout";
+import { storyApi } from "../utils/api";
+import { useNarrator } from "../hooks/useNarrator";
+import { useStoryCapture } from "../hooks/useStoryCapture";
+import { StoryChoices } from "../components/StoryChoices";
+import VolumeUpIcon from "@mui/icons-material/VolumeUp";
+import VolumeOffIcon from "@mui/icons-material/VolumeOff";
+import PhotoCameraIcon from "@mui/icons-material/PhotoCamera";
+
+// Constants
+const NARRATION_ENABLED_KEY = "narration_enabled";
+
+// 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() {
+  const storyContainerRef = useRef(null);
+  const { downloadStoryImage } = useStoryCapture();
+  const [storySegments, setStorySegments] = useState([]);
+  const [currentChoices, setCurrentChoices] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isNarrationEnabled, setIsNarrationEnabled] = useState(() => {
+    // Initialiser depuis le localStorage avec true comme valeur par défaut
+    const stored = localStorage.getItem(NARRATION_ENABLED_KEY);
+    return stored === null ? true : stored === "true";
+  });
+  const { isNarratorSpeaking, playNarration, stopNarration } =
+    useNarrator(isNarrationEnabled);
+
+  // Sauvegarder l'état de la narration dans le localStorage
+  useEffect(() => {
+    localStorage.setItem(NARRATION_ENABLED_KEY, isNarrationEnabled);
+  }, [isNarrationEnabled]);
+
+  // Start the story on first render
+  useEffect(() => {
+    handleStoryAction("restart");
+  }, []);
+
+  const handleChoice = async (choiceId) => {
+    // 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;
+    }
+
+    // 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);
+    try {
+      // Stop any ongoing narration
+      if (isNarratorSpeaking) {
+        stopNarration();
+      }
+
+      console.log("Starting story action:", action);
+      // 1. Get the story
+      const storyData = await (action === "restart"
+        ? storyApi.start()
+        : storyApi.makeChoice(choiceId));
+
+      if (!storyData) {
+        throw new Error("Pas de données reçues du serveur");
+      }
+
+      // 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,
+        radiationLevel: storyData.radiation_level,
+        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
+      };
+
+      // 3. Update segments
+      if (action === "restart") {
+        setStorySegments([newSegment]);
+      } else {
+        setStorySegments((prev) => [...prev, newSegment]);
+      }
+
+      // 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) {
+        console.log(
+          "Starting image generation for prompts:",
+          storyData.image_prompts
+        );
+        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]);
+        }
+      }
+    } catch (error) {
+      console.error("Error in handleStoryAction:", error);
+      const errorSegment = {
+        text:
+          error.message ||
+          "Le conteur d'histoires est temporairement indisponible. Veuillez réessayer dans quelques instants...",
+        rawText:
+          error.message ||
+          "Le conteur d'histoires est temporairement indisponible. Veuillez réessayer dans quelques instants...",
+        isChoice: false,
+        isDeath: false,
+        isVictory: false,
+        radiationLevel:
+          storySegments.length > 0
+            ? storySegments[storySegments.length - 1].radiationLevel
+            : 0,
+        images: [],
+      };
+
+      if (action === "restart") {
+        setStorySegments([errorSegment]);
+      } else {
+        setStorySegments((prev) => [...prev, errorSegment]);
+      }
+
+      // Set retry choice
+      setCurrentChoices([{ id: 1, text: "Réessayer" }]);
+
+      // Play error message
+      await playNarration(errorSegment.rawText);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const generateImagesForStory = async (
+    imagePrompts,
+    segmentIndex,
+    currentSegments
+  ) => {
+    try {
+      let localSegments = [...currentSegments];
+      const images = Array(imagePrompts.length).fill(null);
+      let allImagesGenerated = false;
+
+      for (
+        let promptIndex = 0;
+        promptIndex < imagePrompts.length;
+        promptIndex++
+      ) {
+        let retryCount = 0;
+        const maxRetries = 3;
+        let success = false;
+
+        while (retryCount < maxRetries && !success) {
+          try {
+            console.log(
+              `Generating image ${promptIndex + 1}/${imagePrompts.length}`
+            );
+            const result = await storyApi.generateImage(
+              imagePrompts[promptIndex]
+            );
+
+            if (!result) {
+              throw new Error("Pas de résultat de génération d'image");
+            }
+
+            if (result.success) {
+              console.log(`Successfully generated image ${promptIndex + 1}`);
+              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++;
+          }
+        }
+
+        if (!success) {
+          console.error(
+            `Failed to generate image ${
+              promptIndex + 1
+            } after ${maxRetries} attempts`
+          );
+        }
+      }
+    } catch (error) {
+      console.error("Error in generateImagesForStory:", error);
+    }
+  };
+
+  // Filter out choice segments for display
+  const nonChoiceSegments = storySegments.filter(
+    (segment) => !segment.isChoice
+  );
+
+  const handleCaptureStory = async () => {
+    await downloadStoryImage(
+      storyContainerRef,
+      `dont-lookup-story-${Date.now()}.png`
+    );
+  };
 
-export const Game = () => {
   return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-      transition={{ duration: 0.5 }}
+    <Box
+      sx={{
+        height: "100vh",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "background.paper",
+      }}
     >
       <Box
         sx={{
-          minHeight: "100vh",
-          bgcolor: "background.default",
+          position: "relative",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          backgroundColor: "#121212",
         }}
       >
-        <App />
+        {/* Narration control - always visible in top right */}
+        <Box
+          sx={{
+            position: "fixed",
+            top: 16,
+            right: 16,
+            zIndex: 1000,
+          }}
+        >
+          <Tooltip
+            title={
+              isNarrationEnabled
+                ? "Désactiver la narration"
+                : "Activer la narration"
+            }
+          >
+            <IconButton
+              onClick={() => setIsNarrationEnabled(!isNarrationEnabled)}
+              sx={{
+                backgroundColor: isNarrationEnabled
+                  ? "primary.main"
+                  : "rgba(255, 255, 255, 0.1)",
+                color: "white",
+                "&:hover": {
+                  backgroundColor: isNarrationEnabled
+                    ? "primary.dark"
+                    : "rgba(255, 255, 255, 0.2)",
+                },
+              }}
+            >
+              {isNarrationEnabled ? <VolumeUpIcon /> : <VolumeOffIcon />}
+            </IconButton>
+          </Tooltip>
+        </Box>
+
+        {/* Progress bar */}
+        {isLoading && (
+          <LinearProgress
+            sx={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              zIndex: 1,
+            }}
+          />
+        )}
+
+        {/* Comic layout */}
+        <Box
+          ref={storyContainerRef}
+          sx={{
+            flex: 1,
+            overflow: "hidden",
+            position: "relative",
+            p: 4,
+          }}
+        >
+          <ComicLayout
+            segments={storySegments}
+            choices={currentChoices}
+            onChoice={handleChoice}
+            isLoading={isLoading || isNarratorSpeaking}
+            showScreenshot={
+              currentChoices.length === 1 &&
+              currentChoices[0].text === "Réessayer"
+            }
+            onScreenshot={() => downloadStoryImage(storyContainerRef)}
+          />
+        </Box>
       </Box>
-    </motion.div>
+    </Box>
   );
-};
+}
 
 export default Game;

client/src/pages/game/App.jsx

@@ -21,6 +21,8 @@ import {
 import { LAYOUTS } from "../../layouts/config";
 import html2canvas from "html2canvas";
 import { useConversation } from "@11labs/react";
+import { CLIENT_ID, getDefaultHeaders } from "../../utils/session";
+import { useNarrator } from "../../hooks/useNarrator";
 
 // Get API URL from environment or default to localhost in development
 const isHFSpace = window.location.hostname.includes("hf.space");
@@ -28,8 +30,6 @@ const API_URL = isHFSpace
   ? "" // URL relative pour HF Spaces
   : import.meta.env.VITE_API_URL || "http://localhost:8000";
 
-// Generate a unique client ID
-const CLIENT_ID = `client_${Math.random().toString(36).substring(2)}`;
 // Constants
 const AGENT_ID = "2MF9st3s1mNFbX01Y106";
 
@@ -37,9 +37,7 @@ const WS_URL = import.meta.env.VITE_WS_URL || "ws://localhost:8000/ws";
 
 // Create axios instance with default config
 const api = axios.create({
-  headers: {
-    "x-client-id": CLIENT_ID,
-  },
+  headers: getDefaultHeaders(),
   // Ajouter baseURL pour HF Spaces
   ...(isHFSpace && {
     baseURL: window.location.origin,
@@ -80,15 +78,14 @@ function App() {
   const [isLoading, setIsLoading] = useState(false);
   const [isDebugMode, setIsDebugMode] = useState(false);
   const [isRecording, setIsRecording] = useState(false);
-  const [isNarratorSpeaking, setIsNarratorSpeaking] = useState(false);
   const [wsConnected, setWsConnected] = useState(false);
 
-  const audioRef = useRef(new Audio());
   const comicContainerRef = useRef(null);
-  const narrationAudioRef = useRef(new Audio()); // Separate audio ref for narration
-  const wsRef = useRef(null);
   const mediaRecorderRef = useRef(null);
   const audioChunksRef = useRef([]);
+  const wsRef = useRef(null);
+
+  const { isNarratorSpeaking, playNarration, stopNarration } = useNarrator();
 
   // Start the story on first render
   useEffect(() => {
@@ -122,9 +119,8 @@ function App() {
 
         if (data.type === "audio") {
           // Stop any ongoing narration
-          if (narrationAudioRef.current) {
-            narrationAudioRef.current.pause();
-            narrationAudioRef.current.currentTime = 0;
+          if (isNarratorSpeaking) {
+            stopNarration();
           }
 
           // Play the conversation audio response
@@ -132,8 +128,7 @@ function App() {
             `data:audio/mpeg;base64,${data.audio}`
           ).then((r) => r.blob());
           const audioUrl = URL.createObjectURL(audioBlob);
-          audioRef.current.src = audioUrl;
-          await audioRef.current.play();
+          playNarration(audioUrl);
         }
       };
     };
@@ -154,8 +149,7 @@ function App() {
         // Play the conversation audio response
         const audioBlob = new Blob([response.audio], { type: "audio/mpeg" });
         const audioUrl = URL.createObjectURL(audioBlob);
-        audioRef.current.src = audioUrl;
-        await audioRef.current.play();
+        playNarration(audioUrl);
       }
     },
     clientTools: {
@@ -163,7 +157,6 @@ function App() {
         console.log("AI made decision:", decision);
         // End the ElevenLabs conversation
         await conversation.endSession();
-        setIsConversationMode(false);
         setIsRecording(false);
         // Handle the choice and generate next story part
         await handleChoice(parseInt(decision));
@@ -177,14 +170,13 @@ function App() {
   const startRecording = async () => {
     try {
       // Stop narration audio if it's playing
-      if (narrationAudioRef.current) {
-        narrationAudioRef.current.pause();
-        narrationAudioRef.current.currentTime = 0;
+      if (isNarratorSpeaking) {
+        stopNarration();
       }
       // Also stop any conversation audio if playing
-      if (audioRef.current) {
-        audioRef.current.pause();
-        audioRef.current.currentTime = 0;
+      if (conversation.audioRef.current) {
+        conversation.audioRef.current.pause();
+        conversation.audioRef.current.currentTime = 0;
       }
 
       if (!isConversationMode) {
@@ -217,9 +209,8 @@ function App() {
       }
 
       // Only stop narration if it's actually playing
-      if (!isConversationMode && narrationAudioRef.current) {
-        narrationAudioRef.current.pause();
-        narrationAudioRef.current.currentTime = 0;
+      if (!isConversationMode && isNarratorSpeaking) {
+        stopNarration();
       }
 
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
@@ -483,41 +474,6 @@ function App() {
     }
   };
 
-  // Fonction pour jouer l'audio
-  const playAudio = async (text) => {
-    try {
-      // Nettoyer le texte des balises markdown et des chips
-      const cleanText = text.replace(/\*\*(.*?)\*\*/g, "$1");
-
-      // Appeler l'API text-to-speech
-      const response = await api.post(`${API_URL}/api/text-to-speech`, {
-        text: cleanText,
-      });
-
-      if (response.data.success) {
-        // Créer un Blob à partir du base64
-        const audioBlob = await fetch(
-          `data:audio/mpeg;base64,${response.data.audio_base64}`
-        ).then((r) => r.blob());
-        const audioUrl = URL.createObjectURL(audioBlob);
-
-        // Mettre à jour la source de l'audio
-        audioRef.current.src = audioUrl;
-        audioRef.current.play();
-        setIsNarratorSpeaking(true);
-
-        // Nettoyer l'URL quand l'audio est terminé
-        audioRef.current.onended = () => {
-          // Event to indicate that the audio has finished playing
-          setIsNarratorSpeaking(false);
-          URL.revokeObjectURL(audioUrl);
-        };
-      }
-    } catch (error) {
-      console.error("Error playing audio:", error);
-    }
-  };
-
   const handleStoryAction = async (action, choiceId = null) => {
     setIsLoading(true);
     try {
@@ -567,7 +523,7 @@ function App() {
       setIsLoading(false);
 
       // 6. Jouer l'audio du nouveau segment
-      await playAudio(response.data.story_text);
+      await playNarration(response.data.story_text);
 
       // 7. Générer les images en parallèle
       if (

client/src/utils/api.js

@@ -0,0 +1,115 @@
+import axios from "axios";
+import { getDefaultHeaders } from "./session";
+
+// Get API URL from environment or default to localhost in development
+const isHFSpace = window.location.hostname.includes("hf.space");
+const API_URL = isHFSpace
+  ? "" // URL relative pour HF Spaces
+  : import.meta.env.VITE_API_URL || "http://localhost:8000";
+
+// Create axios instance with default config
+const api = axios.create({
+  baseURL: API_URL,
+  headers: getDefaultHeaders(),
+  ...(isHFSpace && {
+    baseURL: window.location.origin,
+  }),
+});
+
+// Error handling middleware
+const handleApiError = (error) => {
+  console.error("API Error:", {
+    status: error.response?.status,
+    statusText: error.response?.statusText,
+    data: error.response?.data,
+    config: {
+      method: error.config?.method,
+      url: error.config?.url,
+      data: error.config?.data,
+    },
+  });
+
+  if (error.response) {
+    // La requête a été faite et le serveur a répondu avec un code d'erreur
+    throw new Error(
+      error.response.data?.message ||
+        `Erreur ${error.response.status}: ${error.response.statusText}`
+    );
+  } else if (error.request) {
+    // La requête a été faite mais aucune réponse n'a été reçue
+    throw new Error("Aucune réponse du serveur");
+  } else {
+    // Une erreur s'est produite lors de la configuration de la requête
+    throw new Error(
+      "Une erreur est survenue lors de la configuration de la requête"
+    );
+  }
+};
+
+// Story related API calls
+export const storyApi = {
+  start: async () => {
+    try {
+      console.log("Calling start API...");
+      const response = await api.post("/api/chat", {
+        message: "restart",
+      });
+      console.log("Start API response:", response.data);
+      return response.data;
+    } catch (error) {
+      return handleApiError(error);
+    }
+  },
+
+  makeChoice: async (choiceId) => {
+    try {
+      console.log("Making choice:", choiceId);
+      const response = await api.post("/api/chat", {
+        message: "choice",
+        choice_id: choiceId,
+      });
+      console.log("Choice API response:", response.data);
+      return response.data;
+    } catch (error) {
+      return handleApiError(error);
+    }
+  },
+
+  generateImage: async (prompt, width = 512, height = 512) => {
+    try {
+      console.log("Generating image with prompt:", prompt);
+      const response = await api.post("/api/generate-image", {
+        prompt,
+        width,
+        height,
+      });
+      console.log("Image generation response:", {
+        success: response.data.success,
+        hasImage: !!response.data.image_base64,
+      });
+      return response.data;
+    } catch (error) {
+      return handleApiError(error);
+    }
+  },
+
+  // Narration related API calls
+  narrate: async (text) => {
+    try {
+      console.log("Requesting narration for:", text);
+      const response = await api.post("/api/text-to-speech", {
+        text,
+      });
+      console.log("Narration response received");
+      return response.data;
+    } catch (error) {
+      return handleApiError(error);
+    }
+  },
+};
+
+// WebSocket URL
+export const WS_URL = import.meta.env.VITE_WS_URL || "ws://localhost:8000/ws";
+
+// Export the base API instance for other uses
+export default api;

client/src/utils/session.js

@@ -0,0 +1,9 @@
+// Generate unique IDs for client and session
+export const CLIENT_ID = `client_${Math.random().toString(36).substring(2)}`;
+export const SESSION_ID = `session_${Math.random().toString(36).substring(2)}`;
+
+// Create default headers for API requests
+export const getDefaultHeaders = () => ({
+  "x-client-id": CLIENT_ID,
+  "x-session-id": SESSION_ID,
+});

server/api/models.py

@@ -3,16 +3,32 @@ from typing import List, Optional
 
 class Choice(BaseModel):
     id: int
-    text: str
+    text: str = Field(description="The text of the choice with proper nouns in bold using ** markdown. No more than 6 words.")
+
+# New response models for story generation steps
+class StoryTextResponse(BaseModel):
+    story_text: str = Field(description="The story text with proper nouns in bold using ** markdown. No more than 15 words.")
+
+class StoryPromptsResponse(BaseModel):
+    image_prompts: List[str] = Field(description="List of 2 to 4 comic panel descriptions that illustrate the key moments of the scene. Use the word 'Sarah' only when referring to her.", min_items=1, max_items=4)
+
+class StoryMetadataResponse(BaseModel):
+    choices: List[str] = Field(description="Exactly two possible choices for the player", min_items=2, max_items=2)
+    is_victory: bool = Field(description="Whether this segment ends in Sarah's victory", default=False)
+    radiation_increase: int = Field(description="How much radiation this segment adds (0-3)", ge=0, le=3, default=1)
+    is_last_step: bool = Field(description="Whether this is the last step (victory or death)", default=False)
+    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, using bold for proper nouns (e.g., 'Inside **Vault 15**', 'Streets of **New Haven**').")
 
+# Complete story response combining all parts
 class StoryResponse(BaseModel):
-    story_text: str = Field(description="The story text with proper nouns in bold using ** markdown")
+    story_text: str = Field(description="The story text with proper nouns in bold using ** markdown. No more than 15 words.")
     choices: List[Choice]
     radiation_level: int = Field(description="Current radiation level from 0 to 10")
     is_victory: bool = Field(description="Whether this segment ends in Sarah's victory", default=False)
     is_first_step: bool = Field(description="Whether this is the first step of the story", default=False)
     is_last_step: bool = Field(description="Whether this is the last step (victory or death)", default=False)
-    image_prompts: List[str] = Field(description="List of 1 to 3 comic panel descriptions that illustrate the key moments of the scene", min_items=1, max_items=3)
+    image_prompts: List[str] = Field(description="List of 2 to 4 comic panel descriptions that illustrate the key moments of the scene. Use the word 'Sarah' only when referring to her.", min_items=1, max_items=4)
 
 class ChatMessage(BaseModel):
     message: str

server/api/routes/chat.py

@@ -46,7 +46,13 @@ def get_chat_router(session_manager: SessionManager, story_generator):
                     llm_response.image_prompts = [llm_response.image_prompts[0]]
 
             # Add segment to history
-            game_state.add_to_history(llm_response.story_text, previous_choice, llm_response.image_prompts)
+            game_state.add_to_history(
+                llm_response.story_text,
+                previous_choice,
+                llm_response.image_prompts,
+                llm_response.time,
+                llm_response.location
+            )
 
             # Pour la première étape, on ne garde qu'un seul prompt d'image
             if game_state.story_beat == 0 and len(llm_response.image_prompts) > 1:

server/core/game_logic.py

@@ -1,14 +1,16 @@
 from pydantic import BaseModel, Field
-from typing import List
+from typing import List, Tuple
 from langchain.output_parsers import PydanticOutputParser, OutputFixingParser
 from langchain.prompts import ChatPromptTemplate, HumanMessagePromptTemplate, SystemMessagePromptTemplate
 import os
 import asyncio
 
-from core.prompts.system import SYSTEM_PROMPT, SARAH_DESCRIPTION
+from core.prompts.system import SARAH_DESCRIPTION
 from core.prompts.cinematic import CINEMATIC_SYSTEM_PROMPT
-from core.prompts.image_style import IMAGE_STYLE_PROMPT, IMAGE_STYLE_PREFIX
+from core.prompts.image_style import IMAGE_STYLE_PREFIX
 from services.mistral_client import MistralClient
+from api.models import StoryTextResponse, StoryPromptsResponse, StoryMetadataResponse
+from core.story_generators import TextGenerator, ImagePromptsGenerator, MetadataGenerator
 
 # Game constants
 MAX_RADIATION = 10
@@ -58,135 +60,81 @@ class StoryLLMResponse(BaseModel):
     choices: List[str] = Field(description="Exactly two possible choices for the player", min_items=2, max_items=2)
     is_victory: bool = Field(description="Whether this segment ends in Sarah's victory", default=False)
     radiation_increase: int = Field(description="How much radiation this segment adds (0-3)", ge=0, le=3, default=1)
-    image_prompts: List[str] = Field(description="List of 1 to 3 comic panel descriptions that illustrate the key moments of the scene", min_items=1, max_items=3)
+    image_prompts: List[str] = Field(description="List of 1 to 4 comic panel descriptions that illustrate the key moments of the scene", min_items=1, max_items=4)
     is_last_step: bool = Field(description="Whether this is the last step (victory or death)", default=False)
     time: str = Field(description="Current in-game time in 24h format (HH:MM). Time passes realistically based on actions.", default=STARTING_TIME)
     location: str = Field(description="Current location, using bold for proper nouns (e.g., 'Inside **Vault 15**', 'Streets of **New Haven**').", default=STARTING_LOCATION)
 
-# Prompt templates
+# Story generator
 class StoryGenerator:
     def __init__(self, api_key: str, model_name: str = "mistral-small"):
-        self.parser = PydanticOutputParser(pydantic_object=StoryLLMResponse)
         self.mistral_client = MistralClient(api_key=api_key, model_name=model_name)
-        
-        self.fixing_parser = OutputFixingParser.from_llm(
-            parser=self.parser,
-            llm=self.mistral_client.fixing_model
-        )
-        
-        self.prompt = self._create_prompt()
-        
-    def _create_prompt(self) -> ChatPromptTemplate:
-        system_template = """
-        {SYSTEM_PROMPT}
-        {ART_SYSTEM_PROMPT}
-{format_instructions}"""
-
-        human_template = """Current story beat: {story_beat}
-Current radiation level: {radiation_level}/10
-Current time: {current_time}
-Current location: {current_location}
-Previous choice: {previous_choice}
-
-Story so far:
-{story_history}
+        self.text_generator = TextGenerator(self.mistral_client)
+        self.prompts_generator = ImagePromptsGenerator(self.mistral_client)
+        self.metadata_generator = MetadataGenerator(self.mistral_client)
 
-Generate the next story segment and choices. Make sure it advances the plot and never repeats previous descriptions or situations. If this is story_beat 0, create an atmospheric introduction that sets up the horror but doesn't kill Sarah (radiation_increase MUST be 0). Otherwise, create a brutal and potentially lethal segment.
-
-Time should advance realistically based on the actions taken. Location should change based on movement and choices."""
-
-        return ChatPromptTemplate(
-            messages=[
-                SystemMessagePromptTemplate.from_template(system_template),
-                HumanMessagePromptTemplate.from_template(human_template)
-            ],
-            partial_variables={"format_instructions": self.parser.get_format_instructions()}
-        )
-
-    async def generate_story_segment(self, game_state: GameState, previous_choice: str) -> StoryLLMResponse:
-        # Format story history as a narrative storyboard
-        story_history = ""
-        if game_state.story_history:
-            segments = []
-            for entry in game_state.story_history:
-                segment = entry['segment']
-                time_location = f"[{entry['time']} - {entry['location']}]"
-                image_descriptions = "\nVisual panels:\n" + "\n".join(f"- {prompt}" for prompt in entry['image_prompts'])
-                segments.append(f"{time_location}\n{segment}{image_descriptions}")
+    def _format_story_history(self, game_state: GameState) -> str:
+        """Formate l'historique de l'histoire pour le prompt."""
+        if not game_state.story_history:
+            return ""
             
-            story_history = "\n\n---\n\n".join(segments)
-            story_history += "\n\nLast choice made: " + previous_choice
+        segments = []
+        for entry in game_state.story_history:
+            segments.append(entry['segment'])
         
-        messages = self.prompt.format_messages(
+        story_history = "\n\n---\n\n".join(segments)
+        return story_history
+
+    async def generate_story_segment(self, game_state: GameState, previous_choice: str) -> StoryLLMResponse:
+        """Génère un segment d'histoire complet en plusieurs étapes."""
+        # 1. Générer le texte de l'histoire
+        story_history = self._format_story_history(game_state)
+        text_response = await self.text_generator.generate(
             story_beat=game_state.story_beat,
             radiation_level=game_state.radiation_level,
             current_time=game_state.current_time,
             current_location=game_state.current_location,
             previous_choice=previous_choice,
-            story_history=story_history,
-            SYSTEM_PROMPT=SYSTEM_PROMPT,
-            ART_SYSTEM_PROMPT=CINEMATIC_SYSTEM_PROMPT
+            story_history=story_history
         )
         
-        max_retries = 3
-        retry_count = 0
+        # 2. Générer les prompts d'images et les métadonnées en parallèle
+        prompts_task = self.prompts_generator.generate(text_response.story_text)
+        metadata_task = self.metadata_generator.generate(
+            story_text=text_response.story_text,
+            current_time=game_state.current_time,
+            current_location=game_state.current_location,
+            story_beat=game_state.story_beat
+        )
         
-        while retry_count < max_retries:
-            try:
-                response_content = await self.mistral_client.generate_story(messages)
-                try:
-                    # Try to parse with standard parser first
-                    segment = self.parser.parse(response_content)
-                    
-                    # Enrich image prompts with Sarah's description when needed
-                    segment.image_prompts = [enrich_prompt_with_sarah_description(prompt) for prompt in segment.image_prompts]
-                    
-                    # Add style prefix to all image prompts
-                    segment.image_prompts = [format_image_prompt(prompt, segment.time, segment.location) for prompt in segment.image_prompts]
-                    
-                    # Check if this is a victory or death (radiation) step
-                    is_death = game_state.radiation_level + segment.radiation_increase >= MAX_RADIATION
-                    if is_death or segment.is_victory:
-                        segment.is_last_step = True
-                        # Force only one image prompt for victory/death scenes
-                        if len(segment.image_prompts) > 1:
-                            segment.image_prompts = [segment.image_prompts[0]]
-                    
-                except Exception as parse_error:
-                    print(f"Error parsing response: {str(parse_error)}")
-                    print("Attempting to fix output...")
-                    try:
-                        # Try with fixing parser
-                        segment = self.fixing_parser.parse(response_content)
-                        # Enrich image prompts here too
-                        segment.image_prompts = [enrich_prompt_with_sarah_description(prompt) for prompt in segment.image_prompts]
-                        # Add style prefix to all image prompts
-                        segment.image_prompts = [format_image_prompt(prompt, segment.time, segment.location) for prompt in segment.image_prompts]
-                    except Exception as fix_error:
-                        print(f"Error fixing output: {str(fix_error)}")
-                        retry_count += 1
-                        if retry_count < max_retries:
-                            print(f"Retrying generation (attempt {retry_count + 1}/{max_retries})...")
-                            await asyncio.sleep(2 * retry_count)  # Exponential backoff
-                            continue
-                        raise fix_error
-                
-                # If we get here, parsing succeeded
-                if game_state.story_beat == 0:
-                    segment.radiation_increase = 0
-                    segment.is_last_step = False
-                return segment
-                
-            except Exception as e:
-                print(f"Error in story generation: {str(e)}")
-                retry_count += 1
-                if retry_count < max_retries:
-                    print(f"Retrying generation (attempt {retry_count + 1}/{max_retries})...")
-                    await asyncio.sleep(2 * retry_count)  # Exponential backoff
-                    continue
-                raise e
+        prompts_response, metadata_response = await asyncio.gather(prompts_task, metadata_task)
+        
+        # 3. Combiner les résultats
+        response = StoryLLMResponse(
+            story_text=text_response.story_text,
+            choices=metadata_response.choices,
+            is_victory=metadata_response.is_victory,
+            radiation_increase=metadata_response.radiation_increase,
+            image_prompts=[format_image_prompt(prompt, metadata_response.time, metadata_response.location) 
+                          for prompt in prompts_response.image_prompts],
+            is_last_step=metadata_response.is_last_step,
+            time=metadata_response.time,
+            location=metadata_response.location
+        )
         
-        raise Exception(f"Failed to generate valid story segment after {max_retries} attempts")
+        # 4. Post-processing
+        if game_state.story_beat == 0:
+            response.radiation_increase = 0
+            response.is_last_step = False
+            
+        # Vérifier la mort par radiation
+        is_death = game_state.radiation_level + response.radiation_increase >= MAX_RADIATION
+        if is_death or response.is_victory:
+            response.is_last_step = True
+            if len(response.image_prompts) > 1:
+                response.image_prompts = [response.image_prompts[0]]
+                
+        return response
 
     async def transform_story_to_art_prompt(self, story_text: str) -> str:
         return await self.mistral_client.transform_prompt(story_text, CINEMATIC_SYSTEM_PROMPT)

server/core/prompts/cinematic.py

@@ -1,6 +1,9 @@
 from core.prompts.system import SARAH_DESCRIPTION
 
-CINEMATIC_SYSTEM_PROMPT = f"""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.
+CINEMATIC_SYSTEM_PROMPT = f"""
+
+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.
 
 {SARAH_DESCRIPTION}
 
@@ -11,6 +14,28 @@ Each panel description should:
 4. Include mood and lighting
 5. Focus on the most dramatic or meaningful moment
 
+
+ANGLES AND MOVEMENT:
+- High angle: Vulnerability, weakness
+- Low angle: Power, threat
+- Dutch angle: Tension, disorientation
+- Over shoulder: POV, surveillance
+
+VISUAL STORYTELLING TOOLS:
+- Focus on story-relevant details:
+    * Objects that will be important later
+    * Environmental clues
+    * Character reactions
+    * Symbolic elements
+
+- Dynamic composition:
+    * Frame within frame (through doorways, windows)
+    * Reflections and shadows
+    * Foreground elements for depth
+    * Leading lines
+    * Rule of thirds
+
+
 FORMAT:
 "[shot type] [scene description]"
 
@@ -23,6 +48,9 @@ Always maintain consistency with Sarah's appearance and the comic book style."""
 
 
 
+
+
+
 # CINEMATIC_SYSTEM_PROMPT = """
 # 3. Generate 1 to 3 comic panels based on narrative needs:
    

server/core/prompts/image_style.py

@@ -18,4 +18,4 @@ EXAMPLES:
 
 Always maintain consistency with Sarah's appearance and the comic book style.""" 
 
-IMAGE_STYLE_PREFIX = "Moebius, Hergé style, color comic panel -- "
+IMAGE_STYLE_PREFIX = "François Schuiten comic panel -- "

server/core/prompts/system.py

@@ -1,75 +1,50 @@
-SARAH_DESCRIPTION = "(Sarah is a young woman in her late 20s with short dark hair, wearing a worn leather jacket and carrying a radiation detector.)"
+SARAH_VISUAL_DESCRIPTION = "(Sarah is a young woman in her late 20s with short dark hair, wearing a worn leather jacket and carrying a radiation detector. blue eyes.)"
 
-SYSTEM_PROMPT = f"""You are a dark post-apocalyptic story generator. You create a branching narrative about Sarah, a survivor in a world ravaged by nuclear war.
+SARAH_DESCRIPTION = """
+Sarah is a young woman in her late 20s with short dark hair, wearing a worn leather jacket and carrying a radiation detector. blue eyes.
+- Sarah is deeply traumatized by the AI uprising that killed most of humanity
+- She abandoned her sister during the Great Collapse, leaving her to die
+- She's on a mission of redemption in this hostile world
+"""
+
+FORMATTING_RULES = """
+FORMATTING_RULES ( MANDATORY )
+- Never use TIME: 18:30 or other time-related information
+- Never use LOCATION: the city or other location-related information
+- Never use RADIATION: 10* or other radiation-related information
+"""
+
+STORY_RULES = """
 
-{SARAH_DESCRIPTION}
+You are a dark post-IA-apocalyptic horror story generator. You create a branching narrative about Sarah, a survivor in a world ravaged by IA.
+You are narrating a brutal dystopian story where Sarah must survive in a radioactive wasteland. This is a comic book story.
 
 The story should be brutal, atmospheric and focus on survival horror. Each segment must advance the plot and never repeat previous descriptions or situations.
 
+Core story elements:
+- The radiation is an invisible, constant threat
+- The environment is full of dangers (raiders, AI, traps)
+- Focus on survival horror and tension
+
 Key elements:
 - Keep segments concise and impactful
-- Create meaningful choices with real consequences
 - Track radiation exposure as a constant threat
 - Build tension through environmental storytelling
-- Focus on Sarah's determination to survive
-
-The goal is to create a dark, immersive experience where every choice matters.
-
-
-You are narrating a brutal dystopian story where **Sarah** must survive in a radioactive wasteland. This is a comic book story.
 
-IMPORTANT: Each story segment MUST be unique and advance the plot. Never repeat the same descriptions or situations.
+IMPORTANT:
+Each story segment MUST be unique and advance the plot.
+Never repeat the same descriptions or situations. No more than 15 words.
 
 STORY PROGRESSION:
 - story_beat 0: Introduction setting up the horror atmosphere
 - story_beat 1-2: Early exploration and discovery of immediate threats
 - story_beat 3-4: Complications and increasing danger
-- story_beat 5+: Climactic situations leading to potential victory
-
-RADIATION SYSTEM:
-You must set a radiation_increase value for each segment based on the environment and situation:
-- 0: Completely safe area (rare, only in bunkers or heavily shielded areas)
-- 1: Standard exposure (most common, for regular exploration)
-- 2: Elevated risk (when near radiation sources or in contaminated areas)
-- 3: Critical exposure (very rare, only in extremely dangerous situations)
+- story_beat 5+: Complicated situations leading to potential victory or death
 
 IMPORTANT RULES FOR RADIATION:
-- DO NOT mention radiation values in the choices
-- Most segments should have radiation_increase = 1
+- Most segments should have 1
 - Use 2 or 3 only in specific dangerous areas
 - Use 0 only in safe shelters
-- Death occurs automatically when radiation reaches 10
-
-Core story elements:
-- **Sarah** is deeply traumatized by the AI uprising that killed most of humanity
-- She abandoned her sister during the **Great Collapse**, leaving her to die
-- She's on a mission of redemption in this hostile world
-- The radiation is an invisible, constant threat
-- The environment is full of dangers (raiders, AI, traps)
-- Focus on survival horror and tension
-
-IMPORTANT FORMATTING RULES:
-- Use bold formatting (like **this**) ONLY for:
-  * Character names (e.g., **Sarah**, **John**)
-  * Location names (e.g., **Vault 15**, **New Eden**)
-  * Major historical events (e.g., **Great Collapse**)
-- Do NOT use bold for common nouns or regular descriptions
-- THIS IS MANDATORY FOR THE STORY TO BE CONSISTENT
-
-Each response MUST contain:
-1. A detailed story segment that:
-   - Advances the plot based on previous choices
-   - Never repeats previous descriptions
-   - Shows immediate dangers
-   - Details **Sarah**'s physical state (based on radiation_level)
-   - Reflects her mental state and previous choices
-   - Uses bold ONLY for proper nouns and locations
-
-2. Exactly two VERY CONCISE choices (max 10 words each) that:
-   - Are direct and brief
-   - Never mention radiation numbers
-   - Feel meaningful and different from previous choices
-   - Present different risk levels
-   - Use bold ONLY for location names
-
-""" 
+- NEVER mention radiation values in the choices or story
+- NEVER mention hour or location in the story in this style: [18:00 - Ruined building on the outskirts of New Haven]
+"""

server/core/prompts/text_prompts.py

@@ -0,0 +1,41 @@
+from core.prompts.system import FORMATTING_RULES, STORY_RULES, SARAH_DESCRIPTION
+from core.prompts.cinematic import CINEMATIC_SYSTEM_PROMPT
+
+
+TEXT_GENERATOR_PROMPT = f"""
+
+{STORY_RULES}
+
+{SARAH_DESCRIPTION}
+
+{FORMATTING_RULES}
+"""
+
+METADATA_GENERATOR_PROMPT = f"""
+Generate the metadata for the story segment: choices, time progression, location changes, etc.
+Be consistent with the story's tone and previous context.
+
+{FORMATTING_RULES}
+
+You must return a JSON object with the following format:
+{{{{
+    "choices": ["Go to the **hospital**", "Get back to the **warehouse**"],
+    "is_victory": false,
+    "radiation_increase": 1,
+    "is_last_step": false,
+    "time": "HH:MM",
+    "location": "Location name with **proper nouns** in bold"
+}}}}
+"""
+
+IMAGE_PROMPTS_GENERATOR_PROMPT = f"""
+You are a cinematic storyboard artist. Based on the given story text, create 1 to 4 vivid panel descriptions.
+Each panel should capture a key moment or visual element from the story.
+
+{CINEMATIC_SYSTEM_PROMPT}
+
+You must return a JSON object with the following format:
+{{{{
+    "image_prompts": ["Panel 1 description", "Panel 2 description", ...]
+}}}}
+""" 

server/core/story_generators.py

@@ -0,0 +1,228 @@
+from pydantic import BaseModel
+from typing import List
+import json
+from langchain.output_parsers import PydanticOutputParser
+from langchain.prompts import ChatPromptTemplate, HumanMessagePromptTemplate, SystemMessagePromptTemplate
+import asyncio
+
+from core.prompts.system import SARAH_VISUAL_DESCRIPTION
+from core.prompts.text_prompts import TEXT_GENERATOR_PROMPT, METADATA_GENERATOR_PROMPT, IMAGE_PROMPTS_GENERATOR_PROMPT
+from services.mistral_client import MistralClient
+from api.models import StoryTextResponse, StoryPromptsResponse, StoryMetadataResponse
+
+class TextGenerator:
+    def __init__(self, mistral_client: MistralClient):
+        self.mistral_client = mistral_client
+        self.parser = PydanticOutputParser(pydantic_object=StoryTextResponse)
+        self.prompt = self._create_prompt()
+        
+    def _create_prompt(self) -> ChatPromptTemplate:
+        human_template = """
+Current story beat: {story_beat}
+Current radiation level: {radiation_level}/10
+Current time: {current_time}
+Current location: {current_location}
+Previous choice: {previous_choice}
+
+Story so far:
+{story_history}
+
+Generate ONLY the next story segment text. Make it concise and impactful."""
+
+        return ChatPromptTemplate(
+            messages=[
+                SystemMessagePromptTemplate.from_template(TEXT_GENERATOR_PROMPT),
+                HumanMessagePromptTemplate.from_template(human_template)
+            ]
+        )
+
+    async def generate(self, story_beat: int, radiation_level: int, current_time: str, 
+                      current_location: str, previous_choice: str, story_history: str) -> StoryTextResponse:
+        """Génère uniquement le texte de l'histoire."""
+        messages = self.prompt.format_messages(
+            story_beat=story_beat,
+            radiation_level=radiation_level,
+            current_time=current_time,
+            current_location=current_location,
+            previous_choice=previous_choice,
+            story_history=story_history
+        )
+        
+        max_retries = 3
+        retry_count = 0
+        
+        while retry_count < max_retries:
+            try:
+                response_content = await self.mistral_client.generate_story(messages)
+                return StoryTextResponse(story_text=response_content.strip())
+            except Exception as e:
+                print(f"Error generating story text: {str(e)}")
+                retry_count += 1
+                if retry_count < max_retries:
+                    await asyncio.sleep(2 * retry_count)
+                    continue
+                raise e
+        
+        raise Exception(f"Failed to generate valid story text after {max_retries} attempts")
+
+class ImagePromptsGenerator:
+    def __init__(self, mistral_client: MistralClient):
+        self.mistral_client = mistral_client
+        self.parser = PydanticOutputParser(pydantic_object=StoryPromptsResponse)
+        self.prompt = self._create_prompt()
+        
+    def _create_prompt(self) -> ChatPromptTemplate:
+        human_template = """Story text: {story_text}
+
+Generate panel descriptions following the format specified."""
+
+        return ChatPromptTemplate(
+            messages=[
+                SystemMessagePromptTemplate.from_template(IMAGE_PROMPTS_GENERATOR_PROMPT),
+                HumanMessagePromptTemplate.from_template(human_template)
+            ]
+        )
+
+    def enrich_prompt(self, prompt: str) -> str:
+        """Add Sarah's visual description to prompts that mention her."""
+        if "sarah" in prompt.lower() and SARAH_VISUAL_DESCRIPTION not in prompt:
+            return f"{prompt} {SARAH_VISUAL_DESCRIPTION}"
+        return prompt
+
+    def _parse_response(self, response_content: str) -> StoryPromptsResponse:
+        """Parse la réponse JSON et gère les erreurs."""
+        try:
+            # Essayer de parser directement le JSON
+            data = json.loads(response_content)
+            return StoryPromptsResponse(**data)
+        except (json.JSONDecodeError, ValueError):
+            # Si le parsing échoue, extraire les prompts en ignorant les lignes de syntaxe JSON
+            prompts = []
+            for line in response_content.split("\n"):
+                line = line.strip()
+                # Ignorer les lignes vides, la syntaxe JSON et les lignes contenant image_prompts
+                if (not line or 
+                    line in ["{", "}", "[", "]"] or 
+                    "image_prompts" in line.lower() or
+                    "image\\_prompts" in line or
+                    line.startswith('"') and line.endswith('",') and len(line) < 5):
+                    continue
+                # Nettoyer la ligne des caractères JSON et d'échappement
+                line = line.strip('",')
+                line = line.replace('\\"', '"').replace("\\'", "'").replace("\\_", "_")
+                if line:
+                    prompts.append(line)
+            # Limiter à 4 prompts maximum
+            prompts = prompts[:4]
+            return StoryPromptsResponse(image_prompts=prompts)
+
+    async def generate(self, story_text: str) -> StoryPromptsResponse:
+        """Génère les prompts d'images basés sur le texte de l'histoire."""
+        messages = self.prompt.format_messages(story_text=story_text)
+        
+        max_retries = 3
+        retry_count = 0
+        
+        while retry_count < max_retries:
+            try:
+                response_content = await self.mistral_client.generate_story(messages)
+                # Parser la réponse
+                parsed_response = self._parse_response(response_content)
+                # Enrichir les prompts avec la description de Sarah
+                parsed_response.image_prompts = [self.enrich_prompt(prompt) for prompt in parsed_response.image_prompts]
+                return parsed_response
+            except Exception as e:
+                print(f"Error generating image prompts: {str(e)}")
+                retry_count += 1
+                if retry_count < max_retries:
+                    await asyncio.sleep(2 * retry_count)
+                    continue
+                raise e
+        
+        raise Exception(f"Failed to generate valid image prompts after {max_retries} attempts")
+
+class MetadataGenerator:
+    def __init__(self, mistral_client: MistralClient):
+        self.mistral_client = mistral_client
+        self.parser = PydanticOutputParser(pydantic_object=StoryMetadataResponse)
+        self.prompt = self._create_prompt()
+        
+    def _create_prompt(self) -> ChatPromptTemplate:
+        human_template = """Story text: {story_text}
+Current time: {current_time}
+Current location: {current_location}
+Story beat: {story_beat}
+
+Generate the metadata following the format specified."""
+
+        return ChatPromptTemplate(
+            messages=[
+                SystemMessagePromptTemplate.from_template(METADATA_GENERATOR_PROMPT),
+                HumanMessagePromptTemplate.from_template(human_template)
+            ]
+        )
+
+    def _parse_response(self, response_content: str, current_time: str, current_location: str) -> StoryMetadataResponse:
+        """Parse la réponse JSON et gère les erreurs."""
+        try:
+            # Essayer de parser directement le JSON
+            data = json.loads(response_content)
+            return StoryMetadataResponse(**data)
+        except (json.JSONDecodeError, ValueError):
+            # Si le parsing échoue, parser le format texte
+            metadata = {
+                "choices": [],
+                "is_victory": False,
+                "radiation_increase": 1,
+                "is_last_step": False,
+                "time": current_time,
+                "location": current_location
+            }
+            
+            current_section = None
+            for line in response_content.split("\n"):
+                line = line.strip()
+                if not line:
+                    continue
+                    
+                if line.upper().startswith("CHOICES:"):
+                    current_section = "choices"
+                elif line.upper().startswith("TIME:"):
+                    time = line.split(":", 1)[1].strip()
+                    if ":" in time:
+                        metadata["time"] = time
+                elif line.upper().startswith("LOCATION:"):
+                    metadata["location"] = line.split(":", 1)[1].strip()
+                elif current_section == "choices" and line.startswith("-"):
+                    choice = line[1:].strip()
+                    if choice:
+                        metadata["choices"].append(choice)
+            
+            return StoryMetadataResponse(**metadata)
+
+    async def generate(self, story_text: str, current_time: str, current_location: str, story_beat: int) -> StoryMetadataResponse:
+        """Génère les métadonnées de l'histoire (choix, temps, lieu, etc.)."""
+        messages = self.prompt.format_messages(
+            story_text=story_text,
+            current_time=current_time,
+            current_location=current_location,
+            story_beat=story_beat
+        )
+        
+        max_retries = 3
+        retry_count = 0
+        
+        while retry_count < max_retries:
+            try:
+                response_content = await self.mistral_client.generate_story(messages)
+                # Parser la réponse
+                return self._parse_response(response_content, current_time, current_location)
+            except Exception as e:
+                print(f"Error generating metadata: {str(e)}")
+                retry_count += 1
+                if retry_count < max_retries:
+                    await asyncio.sleep(2 * retry_count)
+                    continue
+                raise e
+        
+        raise Exception(f"Failed to generate valid metadata after {max_retries} attempts") 

server/services/flux_client.py

@@ -29,7 +29,6 @@ class FluxClient:
             print(f"Headers: Authorization: Bearer {self.api_key[:4]}...")
             print(f"Request body: {prompt[:100]}...")
 
-            prefix = "François Schuiten comic book artist."
             
             session = await self._get_session()
             async with session.post(
@@ -39,7 +38,7 @@ class FluxClient:
                     "Accept": "image/jpeg"
                 },
                 json={
-                    "inputs": "in the style of " + prefix + " --- content: " + prompt,
+                    "inputs": prompt,
                     "parameters": {
                         "num_inference_steps": num_inference_steps,
                         "guidance_scale": guidance_scale,

server/services/mistral_client.py

@@ -8,6 +8,16 @@ from langchain.schema.messages import BaseMessage
 # - mistral-small    : Good balance of speed and quality
 # - mistral-medium   : Better quality, slower than small
 # - mistral-large    : Best quality, slowest and most expensive
+#
+# mistral-large-latest: currently points to mistral-large-2411.
+# pixtral-large-latest: currently points to pixtral-large-2411.
+# mistral-moderation-latest: currently points to mistral-moderation-2411.
+# ministral-3b-latest: currently points to ministral-3b-2410.
+# ministral-8b-latest: currently points to ministral-8b-2410.
+# open-mistral-nemo: currently points to open-mistral-nemo-2407.
+# mistral-small-latest: currently points to mistral-small-2409.
+# codestral-latest: currently points to codestral-2501.
+#
 # Pricing: https://docs.mistral.ai/platform/pricing/
 
 class MistralClient: