add elevenlabs

client/src/App.jsx

@@ -46,6 +46,7 @@ function App() {
   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) => {
     try {
@@ -120,6 +121,48 @@ function App() {
     }
   };
 
+  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");
+
+        const audioUrl = URL.createObjectURL(audioBlob);
+        audioRef.current.src = audioUrl;
+        audioRef.current.volume = 1.0; // S'assurer que le volume est au maximum
+
+        try {
+          console.log("Attempting to play audio...");
+          await audioRef.current.play();
+          console.log("Audio playing successfully");
+        } catch (playError) {
+          console.error("Error playing audio:", playError);
+        }
+
+        // Nettoyer l'URL une fois l'audio terminé
+        audioRef.current.onended = () => {
+          URL.revokeObjectURL(audioUrl);
+          console.log("Audio finished, URL cleaned up");
+        };
+      }
+    } catch (error) {
+      console.error("Error in playAudio:", error);
+    }
+  };
+
   const handleStoryAction = async (action, choiceId = null) => {
     setIsLoading(true);
     try {
@@ -162,7 +205,10 @@ function App() {
       // 5. Désactiver le loading car l'histoire est affichée
       setIsLoading(false);
 
-      // 6. Tenter de générer l'image en arrière-plan
+      // 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,

client/src/index.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
+
 * {
   margin: 0;
   padding: 0;

client/src/layouts/Layout.jsx

@@ -1,235 +0,0 @@
-import { Box, CircularProgress, Typography } from "@mui/material";
-
-// Layout settings for different types
-export const LAYOUTS = {
-  COVER: {
-    gridCols: 1,
-    gridRows: 1,
-    panels: [
-      { width: 1024, height: 1536, gridColumn: "1", gridRow: "1" }, // Format pleine page (2:3 ratio)
-    ],
-  },
-  LAYOUT_1: {
-    gridCols: 2,
-    gridRows: 3,
-    panels: [
-      { width: 1024, height: 768, gridColumn: "1", gridRow: "1" }, // Landscape top left
-      { width: 768, height: 1024, gridColumn: "2", gridRow: "1 / span 2" }, // Portrait top right, spans 2 rows
-      { width: 768, height: 1024, gridColumn: "1", gridRow: "2 / span 2" }, // Portrait bottom left, spans 2 rows
-      { width: 1024, height: 768, gridColumn: "2", gridRow: "3" }, // Landscape bottom right
-    ],
-  },
-  LAYOUT_2: {
-    gridCols: 3,
-    gridRows: 2,
-    panels: [
-      { width: 768, height: 1024, gridColumn: "1", gridRow: "1" }, // Portrait top left
-      { width: 768, height: 1024, gridColumn: "2", gridRow: "1" }, // Portrait top middle
-      { width: 512, height: 1024, gridColumn: "3", gridRow: "1 / span 2" }, // Tall portrait right, spans full height
-      { width: 1024, height: 768, gridColumn: "1 / span 2", gridRow: "2" }, // Landscape bottom, spans 2 columns
-    ],
-  },
-  LAYOUT_3: {
-    gridCols: 3,
-    gridRows: 2,
-    panels: [
-      { width: 1024, height: 768, gridColumn: "1 / span 2", gridRow: "1" }, // Landscape top, spans 2 columns
-      { width: 768, height: 1024, gridColumn: "3", gridRow: "1" }, // Portrait top right
-      { width: 768, height: 1024, gridColumn: "1", gridRow: "2" }, // Portrait bottom left
-      { width: 1024, height: 768, gridColumn: "2 / span 2", gridRow: "2" }, // Landscape bottom right, spans 2 columns
-    ],
-  },
-  LAYOUT_4: {
-    gridCols: 8,
-    gridRows: 8,
-    panels: [
-      {
-        width: 512,
-        height: 1024,
-        gridColumn: "1 / span 6",
-        gridRow: "1 / span 2",
-      }, // Wide top
-      {
-        width: 1024,
-        height: 768,
-        gridColumn: "3 / span 6",
-        gridRow: "3 / span 1",
-      }, // Middle right
-      {
-        width: 768,
-        height: 1024,
-        gridColumn: "2 / span 6",
-        gridRow: "4 / span 2",
-      }, // Middle center
-      {
-        width: 1024,
-        height: 512,
-        gridColumn: "1 / span 8",
-        gridRow: "6 / span 2",
-      }, // Wide bottom
-    ],
-  },
-};
-
-// Function to group segments into layouts
-function groupSegmentsIntoLayouts(segments) {
-  if (segments.length === 0) return [];
-
-  const layouts = [];
-
-  // 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 = `LAYOUT_${(layouts.length % 3) + 1}`;
-      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;
-      }
-    }
-
-    currentIndex++;
-  }
-
-  console.log("Generated layouts:", layouts); // Debug log
-  return layouts;
-}
-
-export function ComicLayout({ segments }) {
-  const layouts = groupSegmentsIntoLayouts(segments);
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "row",
-        gap: 4,
-        height: "100%",
-        width: "100%",
-      }}
-    >
-      {layouts.map((layout, layoutIndex) => (
-        <Box
-          key={layoutIndex}
-          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,
-            flexShrink: 0,
-          }}
-        >
-          {/* Render all panels of the layout */}
-          {LAYOUTS[layout.type].panels.map((panel, panelIndex) => {
-            // Find the segment for this panel position if it exists
-            const segment = layout.segments[panelIndex];
-
-            return (
-              <Box
-                key={panelIndex}
-                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 ? (
-                  // If there's a segment, render image and text
-                  <>
-                    {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",
-                        }}
-                      >
-                        <CircularProgress sx={{ opacity: 0.3 }} />
-                      </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>
-            );
-          })}
-        </Box>
-      ))}
-    </Box>
-  );
-}

client/src/layouts/config.js

@@ -4,70 +4,108 @@ export const LAYOUTS = {
     gridCols: 1,
     gridRows: 1,
     panels: [
-      { width: 1024, height: 1024, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
+      { width: 512, height: 1024, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
     ],
   },
   LAYOUT_1: {
-    gridCols: 2,
-    gridRows: 2,
+    gridCols: 1,
+    gridRows: 1,
     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: 512, height: 1024, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
     ],
   },
   LAYOUT_2: {
-    gridCols: 3,
-    gridRows: 2,
+    gridCols: 1,
+    gridRows: 1,
     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: 512, height: 1024, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
     ],
   },
   LAYOUT_3: {
-    gridCols: 3,
-    gridRows: 2,
+    gridCols: 1,
+    gridRows: 1,
     panels: [
-      { width: 1024, height: 768, gridColumn: "1 / span 2", gridRow: "1" }, // 1. Landscape top left, spans 2 columns
-      { width: 768, height: 1024, gridColumn: "3", gridRow: "1" }, // 2. Portrait top right
-      { width: 768, 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: 512, height: 1024, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
     ],
   },
   LAYOUT_4: {
-    gridCols: 8,
-    gridRows: 8,
+    gridCols: 1,
+    gridRows: 1,
     panels: [
-      {
-        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,
-        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
+      { width: 512, height: 1024, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
     ],
   },
 };
 
+// export const LAYOUTS = {
+//     COVER: {
+//       gridCols: 1,
+//       gridRows: 1,
+//       panels: [
+//         { width: 1024, height: 512, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
+//       ],
+//     },
+//     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
+//       ],
+//     },
+//     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
+//       ],
+//     },
+//     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
+//       ],
+//     },
+//     LAYOUT_4: {
+//       gridCols: 8,
+//       gridRows: 8,
+//       panels: [
+//         {
+//           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,
+//           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
+//       ],
+//     },
+//   };
+
 export const defaultLayout = "LAYOUT_1";
 export const nonRandomLayouts = Object.keys(LAYOUTS).filter(
   (layout) => layout !== "random"

server/api_clients.py

@@ -61,7 +61,7 @@ class MistralClient:
 class FluxClient:
     def __init__(self, api_key: str):
         self.api_key = api_key
-        self.endpoint = os.getenv("FLUX_ENDPOINT", "https://api-inference.huggingface.co/models/stabilityai/sdxl-turbo")
+        self.endpoint = os.getenv("FLUX_ENDPOINT")
     
     def generate_image(self, 
                       prompt: str, 
@@ -92,7 +92,7 @@ class FluxClient:
                         "guidance_scale": guidance_scale,
                         "width": width,
                         "height": height,
-                        "negative_prompt": "text, watermark, logo, signature, blurry, low quality"
+                        "negative_prompt": "speech bubble, caption, subtitle"
                     }
                 }
             )

server/server.py

@@ -34,6 +34,7 @@ API_PORT = int(os.getenv("API_PORT", "8000"))
 STATIC_FILES_DIR = os.getenv("STATIC_FILES_DIR", "../client/dist")
 HF_API_KEY = os.getenv("HF_API_KEY")
 AWS_TOKEN = os.getenv("AWS_TOKEN", "VHVlIEZlYiAyNyAwOTowNzoyMiBDRVQgMjAyNA==")  # Token par défaut pour le développement
+ELEVEN_LABS_API_KEY = os.getenv("ELEVEN_LABS_API_KEY")  # Nouvelle clé d'API
 
 app = FastAPI(title="Echoes of Influence")
 
@@ -116,6 +117,10 @@ class ImageGenerationResponse(BaseModel):
     image_base64: Optional[str] = None
     error: Optional[str] = None
 
+class TextToSpeechRequest(BaseModel):
+    text: str
+    voice_id: str = "nPczCjzI2devNBz1zQrb"  # Default voice ID (Rachel)
+
 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
@@ -354,6 +359,47 @@ async def test_generate_image(request: Request, image_request: ImageGenerationRe
             "error": str(e)
         }
 
+@app.post("/api/text-to-speech")
+async def text_to_speech(request: TextToSpeechRequest):
+    """Endpoint pour convertir du texte en audio via ElevenLabs"""
+    try:
+        if not ELEVEN_LABS_API_KEY:
+            raise HTTPException(status_code=500, detail="ElevenLabs API key not configured")
+
+        # Nettoyer le texte des balises markdown **
+        clean_text = request.text.replace("**", "")
+
+        # Appel à l'API ElevenLabs
+        url = f"https://api.elevenlabs.io/v1/text-to-speech/{request.voice_id}"
+        headers = {
+            "Accept": "audio/mpeg",
+            "Content-Type": "application/json",
+            "xi-api-key": ELEVEN_LABS_API_KEY
+        }
+        data = {
+            "text": clean_text,
+            "model_id": "eleven_multilingual_v2",
+            "voice_settings": {
+                "stability": 0.5,
+                "similarity_boost": 0.75
+            }
+        }
+
+        async with aiohttp.ClientSession() as session:
+            async with session.post(url, json=data, headers=headers) as response:
+                if response.status == 200:
+                    audio_content = await response.read()
+                    # Convertir l'audio en base64 pour l'envoyer au client
+                    audio_base64 = base64.b64encode(audio_content).decode('utf-8')
+                    return {"success": True, "audio_base64": audio_base64}
+                else:
+                    error_text = await response.text()
+                    raise HTTPException(status_code=response.status, detail=error_text)
+
+    except Exception as e:
+        print(f"Error in text_to_speech: {str(e)}")
+        raise HTTPException(status_code=500, detail=str(e))
+
 @app.on_event("shutdown")
 async def shutdown_event():
     """Clean up sessions on shutdown"""