update

.gitignore

@@ -1,3 +1,4 @@
 /client/node_modules
 .env
-/node_modules
+/node_modules
+ai-comic-factory/

client/src/App.jsx

@@ -10,7 +10,11 @@ import {
 import RestartAltIcon from "@mui/icons-material/RestartAlt";
 import axios from "axios";
 import { ComicLayout } from "./layouts/ComicLayout";
-import { getNextPanelDimensions } from "./layouts/utils";
+import {
+  getNextPanelDimensions,
+  groupSegmentsIntoLayouts,
+} from "./layouts/utils";
+import { LAYOUTS } from "./layouts/config";
 
 // Get API URL from environment or default to localhost in development
 const API_URL = import.meta.env.VITE_API_URL || "http://localhost:8000";
@@ -43,123 +47,171 @@ function App() {
   const [currentChoices, setCurrentChoices] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isDebugMode, setIsDebugMode] = useState(false);
-  const isInitializedRef = useRef(false);
   const currentImageRequestRef = useRef(null);
   const pendingImageRequests = useRef(new Set()); // Track pending image requests
   const audioRef = useRef(new Audio());
 
-  const generateImageForStory = async (storyText, segmentIndex) => {
+  // Start the story on first render
+  useEffect(() => {
+    handleStoryAction("restart");
+  }, []); // Empty dependency array for first render only
+
+  const generateImagesForStory = async (
+    imagePrompts,
+    segmentIndex,
+    currentSegments
+  ) => {
     try {
-      // Cancel previous request if it exists
-      if (currentImageRequestRef.current) {
-        currentImageRequestRef.current.abort();
-      }
-
-      // Add this segment to pending requests
-      pendingImageRequests.current.add(segmentIndex);
-
-      console.log("Generating image for story:", storyText);
-      const dimensions = getNextPanelDimensions(storySegments);
-      console.log("[DEBUG] Story segments:", storySegments);
-      console.log("[DEBUG] Dimensions object:", dimensions);
-      console.log(
-        "[DEBUG] Width:",
-        dimensions?.width,
-        "Height:",
-        dimensions?.height
-      );
-
-      if (!dimensions || !dimensions.width || !dimensions.height) {
-        console.error("[ERROR] Invalid dimensions:", dimensions);
-        pendingImageRequests.current.delete(segmentIndex);
-        return null;
-      }
+      console.log("[generateImagesForStory] Starting with:", {
+        promptsCount: imagePrompts.length,
+        segmentIndex,
+        segmentsCount: currentSegments.length,
+      });
+      console.log("Image prompts:", imagePrompts);
+      console.log("Current segments:", currentSegments);
+
+      let localSegments = [...currentSegments];
+
+      // Traiter chaque prompt un par un
+      for (
+        let promptIndex = 0;
+        promptIndex < imagePrompts.length;
+        promptIndex++
+      ) {
+        // Recalculer le layout actuel pour chaque image
+        const layouts = groupSegmentsIntoLayouts(localSegments);
+        console.log("[Layout] Current layouts:", layouts);
+        const currentLayout = layouts[layouts.length - 1];
+        const layoutType = currentLayout?.type || "COVER";
+        console.log("[Layout] Current type:", layoutType);
+
+        // Vérifier si nous avons de la place dans le layout actuel
+        const currentSegmentImages =
+          currentLayout.segments[currentLayout.segments.length - 1].images ||
+          [];
+        const actualImagesCount = currentSegmentImages.filter(
+          (img) => img !== null
+        ).length;
+        console.log("[Layout] Current segment images:", {
+          total: currentSegmentImages.length,
+          actual: actualImagesCount,
+          hasImages: currentSegmentImages.some((img) => img !== null),
+          currentImages: currentSegmentImages.map((img) =>
+            img ? "image" : "null"
+          ),
+        });
 
-      // Create new AbortController for this request
-      const abortController = new AbortController();
-      currentImageRequestRef.current = abortController;
+        const panelDimensions = LAYOUTS[layoutType].panels[promptIndex];
+        console.log(
+          "[Layout] Panel dimensions for prompt",
+          promptIndex,
+          ":",
+          panelDimensions
+        );
 
-      const response = await api.post(
-        `${API_URL}/api/${isDebugMode ? "test/" : ""}generate-image`,
-        {
-          prompt: `Comic book style scene: ${storyText}`,
-          width: dimensions.width,
-          height: dimensions.height,
-        },
-        {
-          signal: abortController.signal,
+        // Ne créer une nouvelle page que si nous avons encore des prompts à traiter
+        // et qu'il n'y a plus de place dans le layout actuel
+        if (!panelDimensions && promptIndex < imagePrompts.length - 1) {
+          console.log(
+            "[Layout] Creating new page - No space in current layout"
+          );
+          // Créer un nouveau segment pour la nouvelle page
+          const newSegment = {
+            ...localSegments[segmentIndex],
+            images: Array(imagePrompts.length - promptIndex).fill(null),
+          };
+          localSegments = [...localSegments, newSegment];
+          segmentIndex = localSegments.length - 1;
+          console.log("[Layout] New segment created:", {
+            segmentIndex,
+            totalSegments: localSegments.length,
+            imagesArray: newSegment.images,
+          });
+          // Mettre à jour l'état avec le nouveau segment
+          setStorySegments(localSegments);
+          continue; // Recommencer la boucle avec le nouveau segment
         }
-      );
 
-      // Remove from pending requests
-      pendingImageRequests.current.delete(segmentIndex);
+        // Si nous n'avons pas de dimensions de panneau et c'est le dernier prompt,
+        // ne pas continuer
+        if (!panelDimensions) {
+          console.log(
+            "[Layout] Stopping - No more space and no more prompts to process"
+          );
+          break;
+        }
 
-      if (response.data.success) {
-        return response.data.image_base64;
-      }
-      return null;
-    } catch (error) {
-      if (axios.isCancel(error)) {
-        console.log("Image request cancelled for segment", segmentIndex);
-        // On met quand même à jour le segment pour arrêter le spinner
-        setStorySegments((prev) => {
-          const updatedSegments = [...prev];
-          if (updatedSegments[segmentIndex]) {
-            updatedSegments[segmentIndex] = {
-              ...updatedSegments[segmentIndex],
-              image_base64: null,
-              imageRequestCancelled: true, // Flag pour indiquer que la requête a été annulée
-            };
+        console.log(
+          `[Image] Generating image ${promptIndex + 1}/${imagePrompts.length}:`,
+          {
+            prompt: imagePrompts[promptIndex],
+            dimensions: panelDimensions,
           }
-          return updatedSegments;
-        });
-      } else {
-        console.error("Error generating image:", error);
-      }
-      pendingImageRequests.current.delete(segmentIndex);
-      return null;
-    }
-  };
-
-  const playAudio = async (text) => {
-    try {
-      console.log("Requesting audio for text:", text);
-      const response = await api.post(`${API_URL}/api/text-to-speech`, {
-        text: text,
-      });
-
-      if (response.data.success) {
-        console.log("Audio received successfully");
-        // Arrêter l'audio en cours s'il y en a un
-        audioRef.current.pause();
-        audioRef.current.currentTime = 0;
+        );
 
-        // Créer et jouer le nouvel audio
-        const audioBlob = await fetch(
-          `data:audio/mpeg;base64,${response.data.audio_base64}`
-        ).then((r) => r.blob());
-        console.log("Audio blob created:", audioBlob.size, "bytes");
+        try {
+          const result = await api.post(
+            `${API_URL}/api/generate-image-direct`,
+            {
+              prompt: imagePrompts[promptIndex],
+              width: panelDimensions.width,
+              height: panelDimensions.height,
+            }
+          );
 
-        const audioUrl = URL.createObjectURL(audioBlob);
-        audioRef.current.src = audioUrl;
-        audioRef.current.volume = 1.0; // S'assurer que le volume est au maximum
+          console.log(`[Image] Response for image ${promptIndex + 1}:`, {
+            success: result.data.success,
+            hasImage: !!result.data.image_base64,
+            imageLength: result.data.image_base64?.length,
+          });
 
-        try {
-          console.log("Attempting to play audio...");
-          await audioRef.current.play();
-          console.log("Audio playing successfully");
-        } catch (playError) {
-          console.error("Error playing audio:", playError);
+          if (result.data.success) {
+            console.log(
+              `[Image] Image ${promptIndex + 1} generated successfully`
+            );
+            // Mettre à jour les segments locaux
+            const currentImages = [
+              ...(localSegments[segmentIndex].images || []),
+            ];
+            // Remplacer le null à l'index du prompt par la nouvelle image
+            currentImages[promptIndex] = result.data.image_base64;
+
+            localSegments[segmentIndex] = {
+              ...localSegments[segmentIndex],
+              images: currentImages,
+            };
+            console.log("[State] Updating segments with new image:", {
+              segmentIndex,
+              imageIndex: promptIndex,
+              imagesArray: currentImages.map((img) => (img ? "image" : "null")),
+            });
+            // Mettre à jour l'état avec les segments mis à jour
+            setStorySegments([...localSegments]);
+          } else {
+            console.error(
+              `[Image] Generation failed for image ${promptIndex + 1}:`,
+              result.data.error
+            );
+          }
+        } catch (error) {
+          console.error(
+            `[Image] Error generating image ${promptIndex + 1}:`,
+            error
+          );
         }
-
-        // Nettoyer l'URL une fois l'audio terminé
-        audioRef.current.onended = () => {
-          URL.revokeObjectURL(audioUrl);
-          console.log("Audio finished, URL cleaned up");
-        };
       }
+
+      console.log(
+        "[generateImagesForStory] Completed. Final segments:",
+        localSegments.map((seg) => ({
+          ...seg,
+          images: seg.images?.map((img) => (img ? "image" : "null")),
+        }))
+      );
+      return localSegments[segmentIndex]?.images || [];
     } catch (error) {
-      console.error("Error in playAudio:", error);
+      console.error("[generateImagesForStory] Error:", error);
+      return [];
     }
   };
 
@@ -175,7 +227,7 @@ function App() {
         }
       );
 
-      // 2. Créer le nouveau segment sans image
+      // 2. Créer le nouveau segment sans images
       const newSegment = {
         text: formatTextWithBold(response.data.story_text),
         isChoice: false,
@@ -184,50 +236,54 @@ function App() {
         radiationLevel: response.data.radiation_level,
         is_first_step: response.data.is_first_step,
         is_last_step: response.data.is_last_step,
-        image_base64: null,
+        images: response.data.image_prompts
+          ? Array(response.data.image_prompts.length).fill(null)
+          : [], // Pré-remplir avec null pour les spinners
       };
 
+      // 3. Calculer le nouvel index et les segments mis à jour
       let segmentIndex;
-      // 3. Mettre à jour l'état avec le nouveau segment
+      let updatedSegments;
+
       if (action === "restart") {
-        setStorySegments([newSegment]);
         segmentIndex = 0;
+        updatedSegments = [newSegment];
       } else {
-        setStorySegments((prev) => {
-          segmentIndex = prev.length;
-          return [...prev, newSegment];
-        });
+        // Récupérer l'état actuel de manière synchrone
+        segmentIndex = storySegments.length;
+        updatedSegments = [...storySegments, newSegment];
       }
 
+      // Mettre à jour l'état avec les nouveaux segments
+      setStorySegments(updatedSegments);
+
       // 4. Mettre à jour les choix immédiatement
       setCurrentChoices(response.data.choices);
 
       // 5. Désactiver le loading car l'histoire est affichée
       setIsLoading(false);
 
-      // 6. Lancer la synthèse vocale pour le nouveau segment
-      await playAudio(response.data.story_text);
-
-      // 7. Tenter de générer l'image en arrière-plan
-      try {
-        const image_base64 = await generateImageForStory(
-          response.data.story_text,
-          segmentIndex
-        );
-        if (image_base64) {
-          setStorySegments((prev) => {
-            const updatedSegments = [...prev];
-            if (updatedSegments[segmentIndex]) {
-              updatedSegments[segmentIndex] = {
-                ...updatedSegments[segmentIndex],
-                image_base64: image_base64,
-              };
-            }
-            return updatedSegments;
-          });
+      // 6. Générer les images en parallèle
+      if (
+        response.data.image_prompts &&
+        response.data.image_prompts.length > 0
+      ) {
+        try {
+          console.log(
+            "Starting image generation with prompts:",
+            response.data.image_prompts,
+            "for segment",
+            segmentIndex
+          );
+          // generateImagesForStory met déjà à jour le state au fur et à mesure
+          await generateImagesForStory(
+            response.data.image_prompts,
+            segmentIndex,
+            updatedSegments
+          );
+        } catch (imageError) {
+          console.error("Error generating images:", imageError);
         }
-      } catch (imageError) {
-        console.error("Error generating image:", imageError);
       }
     } catch (error) {
       console.error("Error:", error);
@@ -241,7 +297,7 @@ function App() {
           storySegments.length > 0
             ? storySegments[storySegments.length - 1].radiationLevel
             : 0,
-        image_base64: null,
+        images: [],
       };
 
       // Ajouter le segment d'erreur et permettre de réessayer
@@ -258,14 +314,6 @@ function App() {
     }
   };
 
-  // Start the story when the component mounts
-  useEffect(() => {
-    if (!isInitializedRef.current) {
-      handleStoryAction("restart");
-      isInitializedRef.current = true;
-    }
-  }, []); // Empty dependency array since we're using a ref
-
   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") {

client/src/components/StoryManager.jsx

@@ -0,0 +1,182 @@
+import { useEffect } from "react";
+import { useComic } from "../context/ComicContext";
+import { useImageGeneration } from "../hooks/useImageGeneration";
+import { groupSegmentsIntoLayouts } from "../layouts/utils";
+import { LAYOUTS } from "../layouts/config";
+import axios from "axios";
+
+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)}`,
+  },
+});
+
+// Function to convert text with ** to bold elements
+const formatTextWithBold = (text) => {
+  if (!text) return "";
+  const parts = text.split(/(\*\*.*?\*\*)/g);
+  return parts.map((part, index) => {
+    if (part.startsWith("**") && part.endsWith("**")) {
+      return <strong key={index}>{part.slice(2, -2)}</strong>;
+    }
+    return part;
+  });
+};
+
+export function StoryManager() {
+  const { state, updateSegments, updateSegment, setChoices, setLoading } =
+    useComic();
+  const { generateImagesForSegment } = useImageGeneration();
+
+  const handleStoryAction = async (action, choiceId = null) => {
+    setLoading(true);
+    try {
+      // 1. Obtenir l'histoire
+      const response = await api.post(`${API_URL}/api/chat`, {
+        message: action,
+        choice_id: choiceId,
+      });
+
+      // 2. Créer le nouveau segment
+      const newSegment = {
+        text: formatTextWithBold(response.data.story_text),
+        isChoice: false,
+        isDeath: response.data.is_death,
+        isVictory: response.data.is_victory,
+        radiationLevel: response.data.radiation_level,
+        is_first_step: response.data.is_first_step,
+        is_last_step: response.data.is_last_step,
+        images: response.data.image_prompts
+          ? Array(response.data.image_prompts.length).fill(null)
+          : [],
+      };
+
+      // 3. Mettre à jour les segments
+      const segmentIndex = action === "restart" ? 0 : state.segments.length;
+      const updatedSegments =
+        action === "restart" ? [newSegment] : [...state.segments, newSegment];
+
+      updateSegments(updatedSegments);
+
+      // 4. Mettre à jour les choix
+      setChoices(response.data.choices);
+      setLoading(false);
+
+      // 5. Générer les images si nécessaire
+      if (response.data.image_prompts?.length > 0) {
+        const prompts = response.data.image_prompts;
+        let currentPromptIndex = 0;
+        let currentSegmentIndex = segmentIndex;
+
+        while (currentPromptIndex < prompts.length) {
+          // Recalculer les layouts avec les segments actuels
+          const layouts = groupSegmentsIntoLayouts(updatedSegments);
+          let currentLayout = layouts[layouts.length - 1];
+
+          // Pour un layout COVER, ne prendre que le premier prompt
+          if (currentLayout.type === "COVER") {
+            const promptsToUse = [prompts[0]];
+            console.log("COVER layout: using only first prompt");
+
+            const images = await generateImagesForSegment(
+              promptsToUse,
+              currentLayout
+            );
+
+            if (images && images.length > 0) {
+              const currentSegment = updatedSegments[currentSegmentIndex];
+              const updatedSegment = {
+                ...currentSegment,
+                images: [images[0]], // Ne garder que la première image
+              };
+              updatedSegments[currentSegmentIndex] = updatedSegment;
+              updateSegments(updatedSegments);
+            }
+            break; // Sortir de la boucle car nous n'avons besoin que d'une image
+          }
+
+          // Pour les autres layouts, continuer normalement
+          const remainingPanels =
+            LAYOUTS[currentLayout.type].panels.length -
+            (currentLayout.segments[currentLayout.segments.length - 1].images
+              ?.length || 0);
+
+          if (remainingPanels === 0) {
+            // Créer un nouveau segment pour la nouvelle page
+            const newPageSegment = {
+              ...newSegment,
+              images: Array(prompts.length - currentPromptIndex).fill(null),
+            };
+            updatedSegments.push(newPageSegment);
+            currentSegmentIndex = updatedSegments.length - 1;
+            updateSegments(updatedSegments);
+            continue;
+          }
+
+          // Générer les images pour ce layout
+          const promptsForCurrentLayout = prompts.slice(
+            currentPromptIndex,
+            currentPromptIndex + remainingPanels
+          );
+
+          console.log("Generating images for layout:", {
+            segmentIndex: currentSegmentIndex,
+            layoutType: currentLayout.type,
+            prompts: promptsForCurrentLayout,
+            remainingPanels,
+          });
+
+          // Générer les images
+          const images = await generateImagesForSegment(
+            promptsForCurrentLayout,
+            currentLayout
+          );
+
+          // Mettre à jour le segment avec les nouvelles images
+          if (images && images.length > 0) {
+            const currentSegment = updatedSegments[currentSegmentIndex];
+            const updatedSegment = {
+              ...currentSegment,
+              images: [...(currentSegment.images || []), ...images],
+            };
+            updatedSegments[currentSegmentIndex] = updatedSegment;
+            updateSegments(updatedSegments);
+          }
+
+          currentPromptIndex += promptsForCurrentLayout.length;
+        }
+      }
+    } catch (error) {
+      console.error("Error:", error);
+      const errorSegment = {
+        text: "Le conteur d'histoires est temporairement indisponible. Veuillez réessayer dans quelques instants...",
+        isChoice: false,
+        isDeath: false,
+        isVictory: false,
+        radiationLevel:
+          state.segments.length > 0
+            ? state.segments[state.segments.length - 1].radiationLevel
+            : 0,
+        images: [],
+      };
+
+      updateSegments(
+        action === "restart"
+          ? [errorSegment]
+          : [...state.segments, errorSegment]
+      );
+      setChoices([{ id: 1, text: "Réessayer" }]);
+      setLoading(false);
+    }
+  };
+
+  // Démarrer l'histoire au montage
+  useEffect(() => {
+    handleStoryAction("restart");
+  }, []);
+
+  return null; // Ce composant ne rend rien, il gère juste la logique
+}

client/src/context/ComicContext.jsx

@@ -0,0 +1,88 @@
+import { createContext, useContext, useReducer } from "react";
+import { groupSegmentsIntoLayouts } from "../layouts/utils";
+
+const ComicContext = createContext();
+
+const initialState = {
+  segments: [],
+  currentChoices: [],
+  isLoading: false,
+  pendingImages: new Set(),
+};
+
+function comicReducer(state, action) {
+  switch (action.type) {
+    case "UPDATE_SEGMENTS":
+      return {
+        ...state,
+        segments: action.payload,
+      };
+
+    case "UPDATE_SEGMENT":
+      return {
+        ...state,
+        segments: state.segments.map((segment, index) =>
+          index === action.payload.index ? action.payload.segment : segment
+        ),
+      };
+
+    case "SET_CHOICES":
+      return {
+        ...state,
+        currentChoices: action.payload,
+      };
+
+    case "SET_LOADING":
+      return {
+        ...state,
+        isLoading: action.payload,
+      };
+
+    default:
+      return state;
+  }
+}
+
+export function ComicProvider({ children }) {
+  const [state, dispatch] = useReducer(comicReducer, initialState);
+
+  const updateSegments = (segments) => {
+    dispatch({ type: "UPDATE_SEGMENTS", payload: segments });
+  };
+
+  const updateSegment = (index, segment) => {
+    dispatch({ type: "UPDATE_SEGMENT", payload: { index, segment } });
+  };
+
+  const setChoices = (choices) => {
+    dispatch({ type: "SET_CHOICES", payload: choices });
+  };
+
+  const setLoading = (isLoading) => {
+    dispatch({ type: "SET_LOADING", payload: isLoading });
+  };
+
+  // Calculer les layouts à partir des segments
+  const layouts = groupSegmentsIntoLayouts(state.segments);
+
+  const value = {
+    state,
+    layouts,
+    updateSegments,
+    updateSegment,
+    setChoices,
+    setLoading,
+  };
+
+  return (
+    <ComicContext.Provider value={value}>{children}</ComicContext.Provider>
+  );
+}
+
+export const useComic = () => {
+  const context = useContext(ComicContext);
+  if (!context) {
+    throw new Error("useComic must be used within a ComicProvider");
+  }
+  return context;
+};

client/src/hooks/useImageGeneration.js

@@ -0,0 +1,65 @@
+import axios from "axios";
+
+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)}`,
+  },
+});
+
+export function useImageGeneration() {
+  const generateImage = async (prompt, dimensions) => {
+    try {
+      console.log("Generating image with dimensions:", dimensions);
+
+      const result = await api.post(`${API_URL}/api/generate-image-direct`, {
+        prompt,
+        width: dimensions.width,
+        height: dimensions.height,
+      });
+
+      if (result.data.success) {
+        return result.data.image_base64;
+      }
+      return null;
+    } catch (error) {
+      console.error("Error generating image:", error);
+      return null;
+    }
+  };
+
+  const generateImagesForSegment = async (prompts, currentLayout) => {
+    try {
+      if (!currentLayout) {
+        console.error("No valid layout found");
+        return null;
+      }
+
+      const layoutType = currentLayout.type;
+      console.log("Generating images for layout type:", layoutType);
+
+      // Pour chaque prompt, générer une image avec les dimensions appropriées
+      const results = [];
+      for (let i = 0; i < prompts.length; i++) {
+        const panelDimensions = currentLayout.panels[i];
+        if (!panelDimensions) {
+          console.error(`No dimensions for panel ${i} in layout ${layoutType}`);
+          continue;
+        }
+
+        const image = await generateImage(prompts[i], panelDimensions);
+        if (image) {
+          results.push(image);
+        }
+      }
+      return results;
+    } catch (error) {
+      console.error("Error in generateImagesForSegment:", error);
+      return [];
+    }
+  };
+
+  return { generateImagesForSegment };
+}

client/src/layouts/ComicLayout.jsx

@@ -1,88 +1,16 @@
-import { Box, CircularProgress, Typography } from "@mui/material";
+import { Box } from "@mui/material";
 import { LAYOUTS } from "./config";
 import { groupSegmentsIntoLayouts } from "./utils";
 import { useEffect, useRef } from "react";
-
-// Component for displaying a single panel
-function Panel({ segment, panel }) {
-  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",
-        overflow: "hidden",
-      }}
-    >
-      {segment ? (
-        <>
-          {segment.image_base64 ? (
-            <img
-              src={`data:image/jpeg;base64,${segment.image_base64}`}
-              alt="Story scene"
-              style={{
-                width: "100%",
-                height: "100%",
-                objectFit: "cover",
-                borderRadius: "8px",
-                opacity: 0,
-                transition: "opacity 0.5s ease-in-out",
-              }}
-              onLoad={(e) => {
-                e.target.style.opacity = "1";
-              }}
-            />
-          ) : (
-            <Box
-              sx={{
-                width: "100%",
-                height: "100%",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                flexDirection: "column",
-                gap: 1,
-              }}
-            >
-              {!segment.imageRequestCancelled && (
-                <CircularProgress sx={{ opacity: 0.3 }} />
-              )}
-              {segment.imageRequestCancelled && (
-                <Typography variant="caption" color="text.secondary">
-                  Image non chargée
-                </Typography>
-              )}
-            </Box>
-          )}
-          <Box
-            sx={{
-              position: "absolute",
-              bottom: "20px",
-              left: "20px",
-              right: "20px",
-              backgroundColor: "rgba(255, 255, 255, 0.9)",
-              fontSize: ".9rem",
-              padding: "24px",
-              borderRadius: "8px",
-              boxShadow: "0 -2px 4px rgba(0,0,0,0.1)",
-            }}
-          >
-            {segment.text}
-          </Box>
-        </>
-      ) : null}
-    </Box>
-  );
-}
+import { Panel } from "./Panel";
 
 // Component for displaying a page of panels
 function ComicPage({ layout, layoutIndex }) {
+  // 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);
+  }, 0);
+
   return (
     <Box
       key={layoutIndex}
@@ -100,13 +28,33 @@ function ComicPage({ layout, layoutIndex }) {
         flexShrink: 0,
       }}
     >
-      {LAYOUTS[layout.type].panels.map((panel, panelIndex) => (
-        <Panel
-          key={panelIndex}
-          panel={panel}
-          segment={layout.segments[panelIndex]}
-        />
-      ))}
+      {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;
+            }
+            currentImageIndex += segmentImageCount;
+          }
+
+          return (
+            <Panel
+              key={panelIndex}
+              panel={panel}
+              segment={targetSegment}
+              panelIndex={targetImageIndex}
+            />
+          );
+        })}
     </Box>
   );
 }

client/src/layouts/Panel.jsx

@@ -0,0 +1,141 @@
+import { Box, CircularProgress, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+
+// Component for displaying a single panel
+export function Panel({ segment, panel, panelIndex }) {
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Reset states when the image changes
+  useEffect(() => {
+    const hasImage = !!segment?.images?.[panelIndex];
+    console.log(`[Panel ${panelIndex}] Image changed:`, {
+      hasSegment: !!segment,
+      hasImage,
+      imageContent: segment?.images?.[panelIndex]?.slice(0, 50),
+    });
+
+    // Ne réinitialiser les états que si on n'a pas d'image
+    if (!hasImage) {
+      setImageLoaded(false);
+      setIsLoading(true);
+    }
+  }, [segment?.images?.[panelIndex]]);
+
+  // Log component state changes
+  useEffect(() => {
+    console.log(`[Panel ${panelIndex}] State updated:`, {
+      imageLoaded,
+      isLoading,
+      hasSegment: !!segment,
+      hasImage: !!segment?.images?.[panelIndex],
+    });
+  }, [imageLoaded, isLoading, segment, panelIndex]);
+
+  const handleImageLoad = () => {
+    console.log(`[Panel ${panelIndex}] Image loaded successfully`);
+    setImageLoaded(true);
+    setIsLoading(false);
+  };
+
+  const handleImageError = (error) => {
+    console.error(`[Panel ${panelIndex}] Image loading error:`, error);
+    setIsLoading(false);
+  };
+
+  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",
+        overflow: "hidden",
+        transition: "all 0.3s ease-in-out",
+      }}
+    >
+      {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",
+              }}
+            >
+              <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 toujours affiché quand l'image n'est pas chargée */}
+          {(!segment.images?.[panelIndex] || !imageLoaded) && (
+            <Box
+              sx={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexDirection: "column",
+                gap: 1,
+                opacity: 0.7,
+                backgroundColor: "white",
+                zIndex: 1,
+              }}
+            >
+              <CircularProgress size={30} />
+              <Typography variant="caption" color="text.secondary">
+                {!segment.images?.[panelIndex]
+                  ? "Génération en cours..."
+                  : "Chargement de l'image..."}
+              </Typography>
+            </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: "24px",
+                borderRadius: "8px",
+                boxShadow: "0 -2px 4px rgba(0,0,0,0.1)",
+                zIndex: 2,
+              }}
+            >
+              {segment.text}
+            </Box>
+          )}
+        </>
+      )}
+    </Box>
+  );
+}

client/src/layouts/config.js

@@ -42,77 +42,101 @@ export const LAYOUTS = {
     gridCols: 1,
     gridRows: 1,
     panels: [
-      { width: 1024, height: 512, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
+      { width: 512, height: 1024, gridColumn: "1", gridRow: "1" }, // Format portrait
     ],
   },
   LAYOUT_1: {
     gridCols: 2,
     gridRows: 2,
     panels: [
-      { width: 1024, height: 768, gridColumn: "1", gridRow: "1" }, // 1. Landscape top left
-      { width: 768, height: 1024, gridColumn: "2", gridRow: "1" }, // 2. Portrait top right
-      { width: 1024, height: 768, gridColumn: "1", gridRow: "2" }, // 3. Landscape middle left
-      { width: 768, height: 1024, gridColumn: "2", gridRow: "2" }, // 4. Portrait right, spans bottom rows
+      { width: 1024, height: 768, gridColumn: "1", gridRow: "1" }, // Landscape top left
+      { width: 768, height: 1024, gridColumn: "2", gridRow: "1" }, // Portrait top right
+      { width: 1024, height: 768, gridColumn: "1", gridRow: "2" }, // Landscape middle left
+      { width: 768, height: 1024, gridColumn: "2", gridRow: "2" }, // Portrait right
     ],
   },
   LAYOUT_2: {
     gridCols: 3,
     gridRows: 2,
     panels: [
-      { width: 1024, height: 1024, gridColumn: "1 / span 2", gridRow: "1" }, // 1. Large square top left
-      { width: 512, height: 1024, gridColumn: "3", gridRow: "1" }, // 2. Portrait top right
-      { width: 1024, height: 768, gridColumn: "1 / span 3", gridRow: "2" }, // 3. Landscape bottom, spans full width
+      { width: 1024, height: 1024, gridColumn: "1 / span 2", gridRow: "1" }, // Large square top left
+      { width: 512, height: 1024, gridColumn: "3", gridRow: "1" }, // Portrait top right
+      { width: 1024, height: 768, gridColumn: "1 / span 3", gridRow: "2" }, // Full width landscape bottom
     ],
   },
   LAYOUT_3: {
     gridCols: 3,
     gridRows: 2,
     panels: [
-      { width: 1024, height: 768, gridColumn: "1 / span 2", gridRow: "1" }, // 1. Landscape top left, spans 2 columns
-      { width: 512, height: 1024, gridColumn: "3", gridRow: "1" }, // 2. Portrait top right
-      { width: 512, height: 1024, gridColumn: "1", gridRow: "2" }, // 3. Portrait bottom left
-      { width: 1024, height: 768, gridColumn: "2 / span 2", gridRow: "2" }, // 4. Landscape bottom right, spans 2 columns
+      { width: 1024, height: 768, gridColumn: "1 / span 2", gridRow: "1" }, // Wide landscape top left
+      { width: 512, height: 1024, gridColumn: "3", gridRow: "1" }, // Portrait top right
+      { width: 512, height: 1024, gridColumn: "1", gridRow: "2" }, // Portrait bottom left
+      { width: 1024, height: 768, gridColumn: "2 / span 2", gridRow: "2" }, // Wide landscape bottom right
     ],
   },
   LAYOUT_4: {
-    gridCols: 8,
-    gridRows: 8,
+    gridCols: 2,
+    gridRows: 3,
     panels: [
+      { width: 1024, height: 512, gridColumn: "1 / span 2", gridRow: "1" }, // Wide panoramic top
+      { width: 512, height: 1024, gridColumn: "1", gridRow: "2 / span 2" }, // Tall portrait left
+      { width: 512, height: 512, gridColumn: "2", gridRow: "2" }, // Square middle right
+      { width: 512, height: 512, gridColumn: "2", gridRow: "3" }, // Square bottom right
+    ],
+  },
+  LAYOUT_5: {
+    gridCols: 3,
+    gridRows: 3,
+    panels: [
+      { width: 1024, height: 512, gridColumn: "1 / span 3", gridRow: "1" }, // Wide panoramic top
+      { width: 512, height: 1024, gridColumn: "1", gridRow: "2 / span 2" }, // Tall portrait left
       {
-        width: 768,
-        height: 768,
-        gridColumn: "1 / span 3",
-        gridRow: "1 / span 3",
-      }, // 1. Square top left
-      {
-        width: 768,
-        height: 1024,
-        gridColumn: "1 / span 3",
-        gridRow: "4 / span 5",
-      }, // 2. Long portrait bottom left
-      {
-        width: 768,
+        width: 1024,
         height: 1024,
-        gridColumn: "5 / span 3",
-        gridRow: "1 / span 5",
-      }, // 3. Long portrait top right
-      {
-        width: 768,
-        height: 768,
-        gridColumn: "5 / span 3",
-        gridRow: "6 / span 3",
-      }, // 4. Square bottom right
+        gridColumn: "2 / span 2",
+        gridRow: "2 / span 2",
+      }, // Large square right
+    ],
+  },
+  LAYOUT_6: {
+    gridCols: 3,
+    gridRows: 2,
+    panels: [
+      { width: 512, height: 1024, gridColumn: "1", gridRow: "1 / span 2" }, // Tall portrait left
+      { width: 512, height: 512, gridColumn: "2", gridRow: "1" }, // Square top middle
+      { width: 512, height: 1024, gridColumn: "3", gridRow: "1 / span 2" }, // Tall portrait right
+      { width: 512, height: 512, gridColumn: "2", gridRow: "2" }, // Square bottom middle
     ],
   },
 };
 
 export const defaultLayout = "LAYOUT_1";
 export const nonRandomLayouts = Object.keys(LAYOUTS).filter(
-  (layout) => layout !== "random"
+  (layout) => layout !== "COVER"
 );
 
 // Helper functions for layout configuration
-export const getNextLayoutType = (currentLayoutCount) =>
-  `LAYOUT_${(currentLayoutCount % 3) + 1}`;
+export const getNextLayoutType = (currentLayoutCount) => {
+  // Get all available layouts except COVER
+  const availableLayouts = Object.keys(LAYOUTS).filter(
+    (layout) => layout !== "COVER"
+  );
+
+  // 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;
+
+  do {
+    const randomIndex =
+      Math.floor(Math.random() * (availableLayouts.length - 1)) + 1;
+    nextLayout = `LAYOUT_${randomIndex}`;
+  } while (nextLayout === previousLayout);
+
+  return nextLayout;
+};
+
 export const getLayoutDimensions = (layoutType, panelIndex) =>
   LAYOUTS[layoutType]?.panels[panelIndex];

client/src/layouts/utils.js

@@ -1,52 +1,50 @@
 import { LAYOUTS, getNextLayoutType } from "./config";
 
+// Map to store layout types for each page
+const pageLayoutMap = new Map();
+
 // Function to group segments into layouts
 export function groupSegmentsIntoLayouts(segments) {
-  if (segments.length === 0) return [];
+  if (!segments || segments.length === 0) return [];
 
   const layouts = [];
+  let currentLayout = null;
+  let currentPanelIndex = 0;
+
+  segments.forEach((segment) => {
+    // Si c'est le premier segment, créer un layout COVER
+    if (segment.is_first_step) {
+      currentLayout = { type: "COVER", segments: [segment] };
+      layouts.push(currentLayout);
+      currentPanelIndex = segment.images?.length || 0;
+      return;
+    }
 
-  // Premier segment toujours en COVER s'il est marqué comme first_step
-  if (segments[0].is_first_step) {
-    layouts.push({
-      type: "COVER",
-      segments: [segments[0]],
-    });
-  }
-
-  // Segments du milieu (on exclut le premier s'il était en COVER)
-  const startIndex = segments[0].is_first_step ? 1 : 0;
-  const middleSegments = segments.slice(startIndex);
-  let currentIndex = 0;
-
-  while (currentIndex < middleSegments.length) {
-    const segment = middleSegments[currentIndex];
-
-    // Si c'est le dernier segment (mort ou victoire), on le met en COVER
-    if (segment.is_last_step) {
-      layouts.push({
-        type: "COVER",
-        segments: [segment],
-      });
-    } else {
-      // Sinon on utilise un layout normal
-      const layoutType = getNextLayoutType(layouts.length);
-      const maxPanels = LAYOUTS[layoutType].panels.length;
-      const availableSegments = middleSegments
-        .slice(currentIndex)
-        .filter((s) => !s.is_last_step);
-
-      if (availableSegments.length > 0) {
-        layouts.push({
-          type: layoutType,
-          segments: availableSegments.slice(0, maxPanels),
-        });
-        currentIndex += Math.min(maxPanels, availableSegments.length) - 1;
+    // 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;
     }
 
-    currentIndex++;
-  }
+    // 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;
+    }
+  });
 
   return layouts;
 }
@@ -74,8 +72,13 @@ export function getNextPanelDimensions(segments) {
   const lastLayout = layouts[layouts.length - 1];
   const segmentsInLastLayout = lastLayout ? lastLayout.segments.length : 0;
 
-  // Déterminer le type du prochain layout
-  const nextLayoutType = getNextLayoutType(layouts.length);
+  // 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
@@ -89,3 +92,8 @@ export function getNextPanelDimensions(segments) {
   // Sinon, prendre le prochain panneau du layout courant
   return LAYOUTS[lastLayout.type].panels[nextPanelIndex];
 }
+
+// Function to reset layout map (call this when starting a new story)
+export function resetLayoutMap() {
+  pageLayoutMap.clear();
+}

client/src/main.jsx

@@ -15,10 +15,8 @@ const theme = createTheme({
 });
 
 ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <App />
-    </ThemeProvider>
-  </React.StrictMode>
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    <App />
+  </ThemeProvider>
 );

server/api_clients.py

@@ -1,6 +1,7 @@
 import os
 import requests
 import asyncio
+import aiohttp
 from typing import Optional
 from langchain_mistralai.chat_models import ChatMistralAI
 from langchain.schema import SystemMessage, HumanMessage
@@ -62,8 +63,14 @@ class FluxClient:
     def __init__(self, api_key: str):
         self.api_key = api_key
         self.endpoint = os.getenv("FLUX_ENDPOINT")
+        self._session = None
     
-    def generate_image(self, 
+    async def _get_session(self):
+        if self._session is None:
+            self._session = aiohttp.ClientSession()
+        return self._session
+    
+    async def generate_image(self, 
                       prompt: str, 
                       width: int, 
                       height: int,
@@ -78,44 +85,54 @@ class FluxClient:
             print(f"Sending request to Hugging Face API: {self.endpoint}")
             print(f"Headers: Authorization: Bearer {self.api_key[:4]}...")
             print(f"Request body: {prompt[:100]}...")
+
+            prefix =  "François Schuiten comic book artist."
             
-            response = requests.post(
+            
+            session = await self._get_session()
+            async with session.post(
                 self.endpoint,
                 headers={
                     "Authorization": f"Bearer {self.api_key}",
                     "Accept": "image/jpeg"
                 },
                 json={
-                    "inputs": prompt,
+                    "inputs": "in the style of " + prefix + " --- content: " + prompt,
                     "parameters": {
                         "num_inference_steps": num_inference_steps,
                         "guidance_scale": guidance_scale,
                         "width": width,
                         "height": height,
-                        "negative_prompt": "speech bubble, caption, subtitle"
+                        "negative_prompt": "Bubbles, text, caption. Do not include bright or clean clothing."
                     }
                 }
-            )
-            
-            print(f"Response status code: {response.status_code}")
-            print(f"Response headers: {response.headers}")
-            print(f"Response content type: {response.headers.get('content-type', 'unknown')}")
-            
-            if response.status_code == 200:
-                content_length = len(response.content)
-                print(f"Received successful response with content length: {content_length}")
-                if isinstance(response.content, bytes):
-                    print("Response content is bytes (correct)")
+            ) as response:
+                print(f"Response status code: {response.status}")
+                print(f"Response headers: {response.headers}")
+                print(f"Response content type: {response.headers.get('content-type', 'unknown')}")
+                
+                if response.status == 200:
+                    content = await response.read()
+                    content_length = len(content)
+                    print(f"Received successful response with content length: {content_length}")
+                    if isinstance(content, bytes):
+                        print("Response content is bytes (correct)")
+                    else:
+                        print(f"Warning: Response content is {type(content)}")
+                    return content
                 else:
-                    print(f"Warning: Response content is {type(response.content)}")
-                return response.content
-            else:
-                print(f"Error from Flux API: {response.status_code}")
-                print(f"Response content: {response.content}")
-                return None
+                    error_content = await response.text()
+                    print(f"Error from Flux API: {response.status}")
+                    print(f"Response content: {error_content}")
+                    return None
                 
         except Exception as e:
             print(f"Error in FluxClient.generate_image: {str(e)}")
             import traceback
             print(f"Traceback: {traceback.format_exc()}")
-            return None 
+            return None
+            
+    async def close(self):
+        if self._session:
+            await self._session.close()
+            # self._session = None where there is a post apocalypse scene, and my main character is a tough female survivor in a post-apocalyptic world with short, messy hair, dirt-smeared skin, and rugged clothing. She wears a leather jacket, utility pants, and carries makeshift weapons she is infront of an abandoned hospital

server/game/game_logic.py

@@ -18,36 +18,32 @@ class GameState:
     def __init__(self):
         self.story_beat = 0
         self.radiation_level = 0
+        self.story_history = []
         
     def reset(self):
         self.story_beat = 0
         self.radiation_level = 0
+        self.story_history = []
+        
+    def add_to_history(self, segment_text: str, choice_made: str, image_prompts: List[str]):
+        self.story_history.append({
+            "segment": segment_text,
+            "choice": choice_made,
+            "image_prompts": image_prompts
+        })
 
 # Story output structure
-class StorySegment(BaseModel):
+class StoryLLMResponse(BaseModel):
     story_text: str = Field(description="The next segment of the story. No more than 15 words THIS IS MANDATORY. Use bold formatting (like **this**) ONLY for proper nouns (like **Sarah**, **Vault 15**, **New Eden**) and important locations.")
     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)
 
 # Prompt templates
-SYSTEM_ART_PROMPT = """You are an expert in image generation prompts.
-Transform the story into a short and precise prompt.
-
-Strict format:
-"color comic panel, style of Hergé, [main scene in 5-7 words], french comic panel"
-
-Example:
-"color comic panel, style of Hergé, detective running through dark alley, french comic panel"
-
-Rules:
-- Maximum 20 words to describe the scene
-- No superfluous adjectives
-- Capture only the main action"""
-
 class StoryGenerator:
     def __init__(self, api_key: str):
-        self.parser = PydanticOutputParser(pydantic_object=StorySegment)
+        self.parser = PydanticOutputParser(pydantic_object=StoryLLMResponse)
         self.mistral_client = MistralClient(api_key)
         
         self.fixing_parser = OutputFixingParser.from_llm(
@@ -60,7 +56,13 @@ class StoryGenerator:
     def _create_prompt(self) -> ChatPromptTemplate:
         system_template = """You are narrating a brutal dystopian story where **Sarah** must survive in a radioactive wasteland. This is a comic book story.
 
-IMPORTANT: The first story beat (story_beat = 0) MUST be an introduction that sets up the horror atmosphere.
+IMPORTANT: Each story segment MUST be unique and advance the plot. Never repeat the same descriptions or situations.
+
+STORY PROGRESSION:
+- story_beat 0: Introduction setting up the horror atmosphere
+- story_beat 1-2: Early exploration and discovery of immediate threats
+- story_beat 3-4: Complications and increasing danger
+- story_beat 5+: Climactic situations leading to potential victory
 
 RADIATION SYSTEM:
 You must set a radiation_increase value for each segment based on the environment and situation:
@@ -94,32 +96,137 @@ IMPORTANT FORMATTING RULES:
 
 Each response MUST contain:
 1. A detailed story segment that:
-   - Describes the horrific environment
+   - 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):
-   Examples of good choices:
-   - "Explore the **Medical Center**" vs "Search the **Residential Zone**"
-   - "Trust the survivor from **Vault 15**" vs "Keep your distance"
-   - "Use the **AI Core**" vs "Find a manual solution"
-   
-   Each choice must:
-   - Be direct and brief
+2. Exactly two VERY CONCISE choices (max 10 words each) that:
+   - Are direct and brief
    - Never mention radiation numbers
-   - Feel meaningful
+   - Feel meaningful and different from previous choices
    - Present different risk levels
    - Use bold ONLY for location names
 
+3. Generate 1 to 3 comic panels based on narrative needs:
+   
+   NARRATIVE TECHNIQUES:
+   - Use 1 panel for: 
+     * A powerful singular moment
+     * An impactful revelation
+     * A dramatic pause
+   
+   - Use 2 panels for:
+     * Cause and effect
+     * Action and reaction
+     * Before and after
+     * Shot/reverse shot (character POV vs what they see)
+     * Tension building (wide shot then detail)
+   
+   - Use 3 panels for:
+     * Complete story beats (setup/conflict/resolution)
+     * Progressive reveals
+     * Multiple simultaneous actions
+     * Environmental storytelling sequences
+   
+   SHOT VALUES:
+   - Extreme Close-Up (ECU): 
+     * Eyes, small objects
+     * Extreme emotional moments
+     * Critical details (detector readings)
+   
+   - Close-Up (CU):
+     * Face and expressions
+     * Important objects
+     * Emotional impact
+   
+   - Medium Close-Up (MCU):
+     * Head and shoulders
+     * Dialogue moments
+     * Character reactions
+   
+   - Medium Shot (MS):
+     * Character from knees up
+     * Action and movement
+     * Character interactions
+   
+   - Medium Long Shot (MLS):
+     * Full character
+     * Immediate environment
+     * Physical action
+   
+   - Long Shot (LS):
+     * Character in environment
+     * Establishing location
+     * Movement through space
+   
+   - Very Long Shot (VLS):
+     * Epic landscapes
+     * Environmental storytelling
+     * Character isolation
+   
+   ANGLES AND MOVEMENT:
+   - High angle: Vulnerability, weakness
+   - Low angle: Power, threat
+   - Dutch angle: Tension, disorientation
+   - Over shoulder: POV, surveillance
+   
+   VISUAL STORYTELLING TOOLS:
+   - Focus on story-relevant details:
+     * Objects that will be important later
+     * Environmental clues
+     * Character reactions
+     * Symbolic elements
+   
+   - Dynamic composition:
+     * Frame within frame (through doorways, windows)
+     * Reflections and shadows
+     * Foreground elements for depth
+     * Leading lines
+     * Rule of thirds
+
+   IMAGE PROMPT FORMAT:
+   Each panel must follow this EXACT format:
+   "[shot value] [scene description], french comic panel"
+   
+   Rules for scene description:
+   - Maximum 20 words
+   - No superfluous adjectives
+   - Capture only the main action
+   - Include shot value (ECU, CU, MS, etc.)
+   - Focus on dramatic moments
+   
+   EXAMPLE SEQUENCES:
+   
+   Single powerful moment:
+   - "ECU radiation detector needle swings violently into pulsing red danger zone"
+   
+   Shot/reverse shot:
+   - "MS Sarah crouches tensely behind crumbling concrete wall peering through broken window"
+   - "POV through shattered glass raiders gather around burning barrel in snow-covered ruins"
+   
+   Progressive reveal:
+   - "VLS massive steel bunker door stands half-open in barren windswept wasteland"
+   - "CU fresh bloody handprints smear down rusted metal wall beside flickering emergency light"
+   - "dutch-angle LS twisted corpse sprawled among scattered medical supplies casting long shadows"
+   
+   Environmental storytelling:
+   - "LS Sarah's silhouette dwarfed by towering ruins against blood-red sunset sky"
+   - "MCU radiation detector screen flickers warning through heavy falling radioactive snow"
+   - "ECU Sarah's trembling hands clutch last remaining water bottle in dim bunker light"
+
 {format_instructions}"""
 
         human_template = """Current story beat: {story_beat}
 Current radiation level: {radiation_level}/10
 Previous choice: {previous_choice}
 
-Generate the next story segment and choices. 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."""
+Story so far:
+{story_history}
+
+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."""
 
         return ChatPromptTemplate(
             messages=[
@@ -129,11 +236,24 @@ Generate the next story segment and choices. If this is story_beat 0, create an
             partial_variables={"format_instructions": self.parser.get_format_instructions()}
         )
 
-    async def generate_story_segment(self, game_state: GameState, previous_choice: str) -> StorySegment:
+    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']
+                image_descriptions = "\nVisual panels:\n" + "\n".join(f"- {prompt}" for prompt in entry['image_prompts'])
+                segments.append(f"{segment}{image_descriptions}")
+            
+            story_history = "\n\n---\n\n".join(segments)
+            story_history += "\n\nLast choice made: " + previous_choice
+        
         messages = self.prompt.format_messages(
             story_beat=game_state.story_beat,
             radiation_level=game_state.radiation_level,
-            previous_choice=previous_choice
+            previous_choice=previous_choice,
+            story_history=story_history
         )
         
         max_retries = 3
@@ -179,7 +299,7 @@ Generate the next story segment and choices. If this is story_beat 0, create an
     async def transform_story_to_art_prompt(self, story_text: str) -> str:
         return await self.mistral_client.transform_prompt(story_text, SYSTEM_ART_PROMPT)
 
-    def process_radiation_death(self, segment: StorySegment) -> StorySegment:
+    def process_radiation_death(self, segment: StoryLLMResponse) -> StoryLLMResponse:
         segment.is_death = True
         segment.story_text += "\n\nThe end... ?"
         return segment 

server/server.py

@@ -102,6 +102,7 @@ class StoryResponse(BaseModel):
     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)
 
 class ChatMessage(BaseModel):
     message: str
@@ -121,6 +122,11 @@ class TextToSpeechRequest(BaseModel):
     text: str
     voice_id: str = "nPczCjzI2devNBz1zQrb"  # Default voice ID (Rachel)
 
+class DirectImageGenerationRequest(BaseModel):
+    prompt: str = Field(description="The prompt to use directly for image generation")
+    width: int = Field(description="Width of the image to generate")
+    height: int = Field(description="Height of the image to generate")
+
 async def get_test_image(client_id: str, width=1024, height=1024):
     """Get a random image from Lorem Picsum"""
     # Build the Lorem Picsum URL with blur and grayscale effects
@@ -152,72 +158,84 @@ async def chat_endpoint(chat_message: ChatMessage):
         
         # Handle restart
         if chat_message.message.lower() == "restart":
+            print("Handling restart - Resetting game state")
             game_state.reset()
             previous_choice = "none"
+            print(f"After reset - story_beat: {game_state.story_beat}")
         else:
             previous_choice = f"Choice {chat_message.choice_id}" if chat_message.choice_id else "none"
 
         print("Previous choice:", previous_choice)
+        print("Current story beat:", game_state.story_beat)
 
         # Generate story segment
-        story_segment = await story_generator.generate_story_segment(game_state, previous_choice)
-        print("Generated story segment:", story_segment)
+        llm_response = await story_generator.generate_story_segment(game_state, previous_choice)
+        print("Generated story segment:", llm_response)
         
         # Update radiation level
-        game_state.radiation_level += story_segment.radiation_increase
+        game_state.radiation_level += llm_response.radiation_increase
         print("Updated radiation level:", game_state.radiation_level)
         
         # Check for radiation death
         is_death = game_state.radiation_level >= MAX_RADIATION
         if is_death:
-            story_segment.story_text += f"""
+            llm_response.story_text += f"""
 
 MORT PAR RADIATION: Le corps de Sarah ne peut plus supporter ce niveau de radiation ({game_state.radiation_level}/10). 
 Ses cellules se désagrègent alors qu'elle s'effondre, l'esprit rempli de regrets concernant sa sœur. 
 Les fournitures médicales qu'elle transportait n'atteindront jamais leur destination. 
 Sa mission s'arrête ici, une autre victime du tueur invisible des terres désolées."""
-            story_segment.choices = []
+            llm_response.choices = []
+            # Pour la mort, on ne garde qu'un seul prompt d'image
+            if len(llm_response.image_prompts) > 1:
+                llm_response.image_prompts = [llm_response.image_prompts[0]]
         
+        # Add segment to history (before victory check to include final state)
+        game_state.add_to_history(llm_response.story_text, previous_choice, llm_response.image_prompts)
+
         # Check for victory condition
         if not is_death and game_state.story_beat >= 5:
             # Chance de victoire augmente avec le nombre de steps
             victory_chance = (game_state.story_beat - 4) * 0.2  # 20% de chance par step après le 5ème
             if random.random() < victory_chance:
-                story_segment.is_victory = True
-                story_segment.story_text = f"""Sarah l'a fait ! Elle a trouvé un bunker sécurisé avec des survivants. 
+                llm_response.is_victory = True
+                llm_response.story_text = f"""Sarah l'a fait ! Elle a trouvé un bunker sécurisé avec des survivants. 
                 À l'intérieur, elle découvre une communauté organisée qui a réussi à maintenir un semblant de civilisation. 
                 Ils ont même un système de décontamination ! Son niveau de radiation : {game_state.radiation_level}/10.
                 Elle peut enfin se reposer et peut-être un jour, reconstruire un monde meilleur.
                 
                 VICTOIRE !"""
-                story_segment.choices = []
+                llm_response.choices = []
+                # Pour la victoire, on ne garde qu'un seul prompt d'image
+                if len(llm_response.image_prompts) > 1:
+                    llm_response.image_prompts = [llm_response.image_prompts[0]]
+
+        # 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:
+            llm_response.image_prompts = [llm_response.image_prompts[0]]
         
-        # Only increment story beat if not dead and not victory
-        if not is_death and not story_segment.is_victory:
-            game_state.story_beat += 1
-            print("Incremented story beat to:", game_state.story_beat)
-
-        # Convert to response format
-        choices = [] if is_death or story_segment.is_victory else [
+        # Convert LLM choices to API choices format
+        choices = [] if is_death or llm_response.is_victory else [
             Choice(id=i, text=choice.strip())
-            for i, choice in enumerate(story_segment.choices, 1)
+            for i, choice in enumerate(llm_response.choices, 1)
         ]
 
-        # Determine if this is the first step
-        is_first_step = chat_message.message == "restart"
-        
-        # Determine if this is the last step (victory or death)
-        is_last_step = game_state.radiation_level >= MAX_RADIATION or story_segment.is_victory
-
-        # Return the response with the new fields
+        # Convert LLM response to API response format
         response = StoryResponse(
-            story_text=story_segment.story_text,
+            story_text=llm_response.story_text,
             choices=choices,
             radiation_level=game_state.radiation_level,
-            is_victory=story_segment.is_victory,
-            is_first_step=is_first_step,
-            is_last_step=is_last_step
+            is_victory=llm_response.is_victory,
+            is_first_step=game_state.story_beat == 0,
+            is_last_step=is_death or llm_response.is_victory,
+            image_prompts=llm_response.image_prompts
         )
+        
+        # Only increment story beat if not dead and not victory
+        if not is_death and not llm_response.is_victory:
+            game_state.story_beat += 1
+            print("Incremented story beat to:", game_state.story_beat)
+            
         print("Sending response:", response)
         return response
 
@@ -303,9 +321,7 @@ async def test_chat_endpoint(request: Request, chat_message: ChatMessage):
                 story_text=story_text,
                 choices=choices,
                 radiation_level=radiation_level,
-                is_victory=is_last_step and radiation_level < 30,
-                is_first_step=is_first_step,
-                is_last_step=is_last_step
+                is_victory=is_last_step and radiation_level < 30
             )
         
         # Create and store the new request
@@ -400,6 +416,38 @@ async def text_to_speech(request: TextToSpeechRequest):
         print(f"Error in text_to_speech: {str(e)}")
         raise HTTPException(status_code=500, detail=str(e))
 
+@app.post("/api/generate-image-direct")
+async def generate_image_direct(request: DirectImageGenerationRequest):
+    try:
+        print(f"Generating image directly with dimensions: {request.width}x{request.height}")
+        print(f"Using prompt: {request.prompt}")
+
+        # Generate image using Flux client directly without transforming the prompt
+        image_bytes = await flux_client.generate_image(
+            prompt=request.prompt,
+            width=request.width,
+            height=request.height
+        )
+        
+        if image_bytes:
+            print(f"Received image bytes of length: {len(image_bytes)}")
+            if isinstance(image_bytes, str):
+                print("Warning: image_bytes is a string, converting to bytes")
+                image_bytes = image_bytes.encode('utf-8')
+            base64_image = base64.b64encode(image_bytes).decode('utf-8').strip('"')
+            print(f"Converted to base64 string of length: {len(base64_image)}")
+            return {"success": True, "image_base64": base64_image}
+        else:
+            print("No image bytes received from Flux client")
+            return {"success": False, "error": "Failed to generate image"}
+
+    except Exception as e:
+        print(f"Error generating image: {str(e)}")
+        print(f"Error type: {type(e)}")
+        import traceback
+        print(f"Traceback: {traceback.format_exc()}")
+        return {"success": False, "error": str(e)}
+
 @app.on_event("shutdown")
 async def shutdown_event():
     """Clean up sessions on shutdown"""