update

client/src/components/ServiceStatus.jsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from "react";
+import { Box, Typography } from "@mui/material";
+import { styled } from "@mui/system";
+import { useServiceStatus } from "../contexts/ServiceStatusContext";
+
+const StatusDot = styled("div")(({ status }) => ({
+  width: 8,
+  height: 8,
+  borderRadius: "50%",
+  backgroundColor:
+    status === "healthy"
+      ? "#4caf50"
+      : status === "initializing"
+      ? "#FFA726"
+      : status === "unhealthy"
+      ? "#f44336"
+      : "#9e9e9e",
+  marginRight: 8,
+}));
+
+const ServiceLabel = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  marginRight: 16,
+  "& .MuiTypography-root": {
+    fontSize: "0.75rem",
+    color: "rgba(255, 255, 255, 0.7)",
+  },
+});
+
+const ServiceStatusContainer = styled("div")({
+  position: "absolute",
+  top: 16,
+  left: 16,
+  padding: 8,
+  borderRadius: 4,
+  boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+  zIndex: 1000,
+});
+
+export function ServiceStatus() {
+  const { services } = useServiceStatus();
+
+  const fetchServiceHealth = async (service) => {
+    try {
+      const response = await fetch(`/api/health/${service}`);
+      const data = await response.json();
+
+      if (response.ok) {
+        return {
+          status: data.status,
+          latency: data.latency,
+          error: null,
+        };
+      } else {
+        return {
+          status: data.status || "unhealthy",
+          latency: null,
+          error: data.error || "Service unavailable",
+        };
+      }
+    } catch (error) {
+      console.error(`Error checking ${service} health:`, error);
+      return {
+        status: "unhealthy",
+        latency: null,
+        error: error.message,
+      };
+    }
+  };
+
+  useEffect(() => {
+    const checkHealth = async () => {
+      const mistralHealth = await fetchServiceHealth("mistral");
+      const fluxHealth = await fetchServiceHealth("flux");
+
+      // Assuming you want to update the state with the fetched health data
+      // This is a placeholder and should be replaced with actual state management logic
+      console.log("Updating health status:", {
+        mistral: mistralHealth,
+        flux: fluxHealth,
+      });
+    };
+
+    // Initial check
+    checkHealth();
+
+    // Check every 30 seconds
+    const interval = setInterval(checkHealth, 30000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <ServiceStatusContainer>
+      {Object.entries(services).map(([service, { status, latency, error }]) => (
+        <ServiceLabel key={service}>
+          <StatusDot status={status} />
+          <Typography>
+            {service.charAt(0).toUpperCase() + service.slice(1)}
+            {/* {status === "healthy" && latency && ` (${Math.round(latency)}ms)`} */}
+            {/* {status === "initializing" && " (initializing...)"}
+            {status === "unhealthy" && error && ` (${error})`} */}
+          </Typography>
+        </ServiceLabel>
+      ))}
+    </ServiceStatusContainer>
+  );
+}

client/src/contexts/ServiceStatusContext.jsx

@@ -0,0 +1,102 @@
+import React, { createContext, useContext, useState, useEffect } from "react";
+
+const ServiceStatusContext = createContext();
+
+export function ServiceStatusProvider({ children }) {
+  const [services, setServices] = useState({
+    mistral: { status: "loading", latency: null },
+    flux: { status: "loading", latency: null },
+  });
+
+  const areServicesHealthy = () => {
+    return Object.values(services).every(
+      (service) => service.status === "healthy"
+    );
+  };
+
+  const fetchServiceHealth = async (service) => {
+    console.log(`Checking health for ${service} service...`);
+    try {
+      const response = await fetch(`/api/health/${service}`, {
+        method: "GET",
+        headers: {
+          Accept: "application/json",
+        },
+      });
+      console.log(`Response status for ${service}:`, response.status);
+
+      const data = await response.json();
+      console.log(`Health data for ${service}:`, data);
+
+      if (response.ok) {
+        setServices((prev) => ({
+          ...prev,
+          [service]: {
+            status: data.status,
+            latency: data.latency,
+            error: data.error,
+          },
+        }));
+      } else {
+        const errorData = data?.detail || data;
+        console.error(`Error checking ${service} health:`, errorData);
+        setServices((prev) => ({
+          ...prev,
+          [service]: {
+            status: "unhealthy",
+            latency: null,
+            error: errorData?.error || "Service unavailable",
+          },
+        }));
+      }
+    } catch (error) {
+      console.error(`Failed to check ${service} health:`, error);
+      setServices((prev) => ({
+        ...prev,
+        [service]: {
+          status: "unhealthy",
+          latency: null,
+          error: "Connection error",
+        },
+      }));
+    }
+  };
+
+  useEffect(() => {
+    console.log("ServiceStatusProvider mounted, initializing health checks...");
+    const checkHealth = () => {
+      console.log("Running health checks...");
+      fetchServiceHealth("mistral");
+      fetchServiceHealth("flux");
+    };
+
+    // Premier check immédiat
+    checkHealth();
+
+    // Mettre en place l'intervalle
+    console.log("Setting up health check interval...");
+    const interval = setInterval(checkHealth, 30000);
+
+    // Cleanup
+    return () => {
+      console.log("Cleaning up health check interval...");
+      clearInterval(interval);
+    };
+  }, []);
+
+  return (
+    <ServiceStatusContext.Provider value={{ services, areServicesHealthy }}>
+      {children}
+    </ServiceStatusContext.Provider>
+  );
+}
+
+export function useServiceStatus() {
+  const context = useContext(ServiceStatusContext);
+  if (!context) {
+    throw new Error(
+      "useServiceStatus must be used within a ServiceStatusProvider"
+    );
+  }
+  return context;
+}

client/src/main.jsx

@@ -10,6 +10,7 @@ import { Tutorial } from "./pages/Tutorial";
 import Debug from "./pages/Debug";
 import { Universe } from "./pages/Universe";
 import { SoundProvider } from "./contexts/SoundContext";
+import { ServiceStatusProvider } from "./contexts/ServiceStatusContext";
 import { GameNavigation } from "./components/GameNavigation";
 import { AppBackground } from "./components/AppBackground";
 import "./index.css";
@@ -18,17 +19,19 @@ ReactDOM.createRoot(document.getElementById("root")).render(
   <ThemeProvider theme={theme}>
     <CssBaseline />
     <SoundProvider>
-      <BrowserRouter>
-        <GameNavigation />
-        <AppBackground />
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/game" element={<Game />} />
-          <Route path="/tutorial" element={<Tutorial />} />
-          <Route path="/debug" element={<Debug />} />
-          <Route path="/universe" element={<Universe />} />
-        </Routes>
-      </BrowserRouter>
+      <ServiceStatusProvider>
+        <BrowserRouter>
+          <GameNavigation />
+          <AppBackground />
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/game" element={<Game />} />
+            <Route path="/tutorial" element={<Tutorial />} />
+            <Route path="/debug" element={<Debug />} />
+            <Route path="/universe" element={<Universe />} />
+          </Routes>
+        </BrowserRouter>
+      </ServiceStatusProvider>
     </SoundProvider>
   </ThemeProvider>
 );

client/src/pages/Home.jsx

@@ -4,16 +4,20 @@ import {
   Typography,
   useTheme,
   useMediaQuery,
+  Tooltip,
 } from "@mui/material";
 import { motion } from "framer-motion";
 import { useNavigate } from "react-router-dom";
 import { useSoundSystem } from "../contexts/SoundContext";
+import { useServiceStatus } from "../contexts/ServiceStatusContext";
 import { BlinkingText } from "../components/BlinkingText";
 import { BookPages } from "../components/BookPages";
+import { ServiceStatus } from "../components/ServiceStatus";
 
 export function Home() {
   const navigate = useNavigate();
   const { playSound } = useSoundSystem();
+  const { areServicesHealthy } = useServiceStatus();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
@@ -22,6 +26,24 @@ export function Home() {
     navigate("/tutorial");
   };
 
+  const playButton = (
+    <Button
+      color="primary"
+      size="large"
+      variant="contained"
+      onClick={handlePlay}
+      disabled={!areServicesHealthy()}
+      sx={{
+        mt: 4,
+        fontSize: isMobile ? "1rem" : "1.2rem",
+        padding: isMobile ? "8px 24px" : "12px 36px",
+        zIndex: 10,
+      }}
+    >
+      Play
+    </Button>
+  );
+
   return (
     <motion.div
       initial={{ opacity: 0 }}
@@ -35,6 +57,7 @@ export function Home() {
         overflow: "hidden",
       }}
     >
+      <ServiceStatus />
       <Box
         sx={{
           display: "flex",
@@ -43,7 +66,7 @@ export function Home() {
           justifyContent: "center",
           minHeight: "100vh",
           height: "100%",
-          width: isMobile ? "80%" : "40%", // Adjust the width of the containing block
+          width: isMobile ? "80%" : "40%",
           margin: "auto",
           position: "relative",
         }}
@@ -96,20 +119,16 @@ export function Home() {
           Experience a unique comic book where artificial intelligence brings
           your choices to life, shaping the narrative as you explore.
         </Typography>
-        <Button
-          color="primary"
-          size="large"
-          variant="contained"
-          onClick={handlePlay}
-          sx={{
-            mt: 4,
-            fontSize: isMobile ? "1rem" : "1.2rem",
-            padding: isMobile ? "8px 24px" : "12px 36px",
-            zIndex: 10,
-          }}
-        >
-          Play
-        </Button>
+        {areServicesHealthy() ? (
+          playButton
+        ) : (
+          <Tooltip
+            title="Services are currently unavailable. Please wait..."
+            arrow
+          >
+            <span>{playButton}</span>
+          </Tooltip>
+        )}
       </Box>
     </motion.div>
   );

client/vite.config.js

@@ -4,4 +4,13 @@ import react from "@vitejs/plugin-react";
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:8000",
+        changeOrigin: true,
+        secure: false,
+      },
+    },
+  },
 });

server/api/models.py

@@ -1,6 +1,8 @@
 from pydantic import BaseModel, Field, validator
-from typing import List, Optional
+from typing import List, Optional, Dict, Any, Union
 from core.constants import GameConfig
+import re
+from enum import Enum
 
 class Choice(BaseModel):
     id: int
@@ -82,3 +84,14 @@ class StoryResponse(BaseModel):
         if len(v) != 2:
             raise ValueError('Must have exactly 2 choices for story progression')
         return v
+
+class ServiceStatus(str, Enum):
+    HEALTHY = "healthy"
+    UNHEALTHY = "unhealthy"
+    INITIALIZING = "initializing"
+
+class HealthCheckResponse(BaseModel):
+    status: ServiceStatus
+    service: str
+    latency: Optional[float] = None
+    error: Optional[str] = None

server/api/routes/health.py

@@ -0,0 +1,121 @@
+import time
+import asyncio
+from fastapi import APIRouter, HTTPException
+from langchain.schema import SystemMessage
+from api.models import HealthCheckResponse
+from services.mistral_client import MistralClient
+from services.flux_client import FluxClient
+
+def get_health_router(mistral_client: MistralClient, flux_client: FluxClient) -> APIRouter:
+    router = APIRouter()
+
+    @router.get("/health/mistral", response_model=HealthCheckResponse)
+    async def check_mistral_health():
+        """Vérifie la disponibilité du service Mistral."""
+        print("Checking Mistral health...")
+        start_time = time.time()
+        try:
+            # Try to make a simple request to Mistral with a 5 second timeout
+            await asyncio.wait_for(
+                mistral_client.check_health(),
+                timeout=5.0
+            )
+            
+            latency = (time.time() - start_time) * 1000  # Convert to milliseconds
+            print(f"Mistral health check successful. Latency: {latency}ms")
+            return HealthCheckResponse(
+                status="healthy",
+                service="mistral",
+                latency=latency
+            )
+        except asyncio.TimeoutError:
+            print("Mistral health check failed: timeout")
+            raise HTTPException(
+                status_code=503,
+                detail=HealthCheckResponse(
+                    status="unhealthy",
+                    service="mistral",
+                    latency=None,
+                    error="Request timed out after 5 seconds"
+                ).dict()
+            )
+        except Exception as e:
+            print(f"Mistral health check failed: {str(e)}")
+            raise HTTPException(
+                status_code=503,
+                detail=HealthCheckResponse(
+                    status="unhealthy",
+                    service="mistral",
+                    latency=None,
+                    error=str(e)
+                ).dict()
+            )
+
+    @router.get("/health/flux", response_model=HealthCheckResponse)
+    async def check_flux_health():
+        """Vérifie la disponibilité du service Flux."""
+        print("Checking Flux health...")
+        start_time = time.time()
+        try:
+            # Try to generate a test image with a timeout
+            is_healthy, status = await asyncio.wait_for(
+                flux_client.check_health(),
+                timeout=5.0  # Même timeout que Mistral
+            )
+            
+            latency = (time.time() - start_time) * 1000  # Convert to milliseconds
+            
+            if is_healthy:
+                print(f"Flux health check successful. Latency: {latency}ms")
+                return HealthCheckResponse(
+                    status="healthy",
+                    service="flux",
+                    latency=latency
+                )
+            elif status == "initializing":
+                print("Flux service is initializing")
+                raise HTTPException(
+                    status_code=503,
+                    detail=HealthCheckResponse(
+                        status="initializing",
+                        service="flux",
+                        latency=None,
+                        error="Service is initializing"
+                    ).dict()
+                )
+            else:
+                print(f"Flux health check failed: {status}")
+                raise HTTPException(
+                    status_code=503,
+                    detail=HealthCheckResponse(
+                        status="unhealthy",
+                        service="flux",
+                        latency=None,
+                        error=status
+                    ).dict()
+                )
+                
+        except asyncio.TimeoutError:
+            print("Flux health check failed: timeout")
+            raise HTTPException(
+                status_code=503,
+                detail=HealthCheckResponse(
+                    status="unhealthy",
+                    service="flux",
+                    latency=None,
+                    error="Image generation timed out after 5 seconds"
+                ).dict()
+            )
+        except Exception as e:
+            print(f"Flux health check failed: {str(e)}")
+            raise HTTPException(
+                status_code=503,
+                detail=HealthCheckResponse(
+                    status="unhealthy",
+                    service="flux",
+                    latency=None,
+                    error=str(e)
+                ).dict()
+            )
+
+    return router 

server/core/setup.py

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

server/server.py

@@ -10,10 +10,12 @@ from core.story_generator import StoryGenerator
 from core.setup import setup_game, get_universe_generator
 from core.session_manager import SessionManager
 from services.flux_client import FluxClient
+from services.mistral_client import MistralClient
 from api.routes.chat import get_chat_router
 from api.routes.image import get_image_router
 from api.routes.speech import get_speech_router
 from api.routes.universe import get_universe_router
+from api.routes.health import get_health_router
 
 # Load environment variables
 load_dotenv()
@@ -52,6 +54,7 @@ print("Creating global SessionManager")
 session_manager = SessionManager()
 story_generator = StoryGenerator(api_key=mistral_api_key)
 flux_client = FluxClient(api_key=HF_API_KEY)
+mistral_client = MistralClient(api_key=mistral_api_key)
 
 # Health check endpoint
 @app.get("/api/health")
@@ -65,6 +68,7 @@ app.include_router(get_chat_router(session_manager, story_generator), prefix="/a
 app.include_router(get_image_router(flux_client), prefix="/api")
 app.include_router(get_speech_router(), prefix="/api")
 app.include_router(get_universe_router(session_manager, story_generator), prefix="/api")
+app.include_router(get_health_router(mistral_client, flux_client), prefix="/api")
 
 @app.on_event("startup")
 async def startup_event():

server/services/flux_client.py

@@ -1,6 +1,6 @@
 import os
 import aiohttp
-from typing import Optional
+from typing import Optional, Tuple
 
 class FluxClient:
     def __init__(self, api_key: str):
@@ -18,7 +18,7 @@ class FluxClient:
                       width: int, 
                       height: int,
                       num_inference_steps: int = 5,
-                      guidance_scale: float = 9.0) -> Optional[bytes]:
+                      guidance_scale: float = 9.0) -> Tuple[Optional[bytes], Optional[str]]:
         """Génère une image à partir d'un prompt."""
         try:
             # Ensure dimensions are multiples of 8
@@ -29,7 +29,6 @@ class FluxClient:
             print(f"Headers: Authorization: Bearer {self.api_key[:4]}...")
             print(f"Request body: {prompt[:100]}...")
 
-            
             session = await self._get_session()
             async with session.post(
                 self.endpoint,
@@ -50,30 +49,59 @@ class FluxClient:
             ) 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')}")
+                
+                # Vérifier si le modèle est en cours d'initialisation
+                if response.status == 503:
+                    error_content = await response.text()
+                    if "currently loading" in error_content.lower() or "initializing" in error_content.lower():
+                        return None, "initializing"
+                    return None, "unavailable"
                 
                 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
+                    return content, None
                 else:
                     error_content = await response.text()
                     print(f"Error from Flux API: {response.status}")
                     print(f"Response content: {error_content}")
-                    return None
+                    return None, error_content
                 
         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, str(e)
             
     async def close(self):
         if self._session:
             await self._session.close()
-            self._session = None
+            self._session = None
+
+    async def check_health(self) -> Tuple[bool, Optional[str]]:
+        """
+        Vérifie la disponibilité du service Flux en tentant de générer une petite image.
+        
+        Returns:
+            Tuple[bool, Optional[str]]: (is_healthy, status)
+            - is_healthy: True si le service est disponible
+            - status: "healthy", "initializing", ou message d'erreur
+        """
+        try:
+            # Test simple prompt pour générer une petite image
+            test_image, status = await self.generate_image(
+                prompt="test image, simple circle",
+                width=64,  # Petite image pour le test
+                height=64,
+                num_inference_steps=1  # Minimum d'étapes pour être rapide
+            )
+            
+            if test_image is not None:
+                return True, "healthy"
+            elif status == "initializing":
+                return False, "initializing"
+            else:
+                return False, status or "unavailable"
+                
+        except Exception as e:
+            print(f"Health check failed: {str(e)}")
+            return False, str(e)

server/services/mistral_client.py

@@ -47,7 +47,7 @@ class MistralValidationError(MistralAPIError):
     pass
 
 class MistralClient:
-    def __init__(self, api_key: str, model_name: str = "mistral-large-latest", max_tokens: int = 1000):
+    def __init__(self, api_key: str, model_name: str = "mistral-small-latest", max_tokens: int = 1000):
         logger.info(f"Initializing MistralClient with model: {model_name}, max_tokens: {max_tokens}")
         self.model = ChatMistralAI(
             mistral_api_key=api_key,
@@ -213,4 +213,18 @@ class MistralClient:
                     continue
                 
                 logger.error(f"Failed after {self.max_retries} attempts. Last error: {last_error or str(e)}")
-                raise Exception(f"Failed after {self.max_retries} attempts. Last error: {last_error or str(e)}") 
+                raise Exception(f"Failed after {self.max_retries} attempts. Last error: {last_error or str(e)}") 
+
+    async def check_health(self) -> bool:
+        """
+        Vérifie la disponibilité du service Mistral avec un appel simple sans retry.
+        
+        Returns:
+            bool: True si le service est disponible, False sinon
+        """
+        try:
+            response = await self.model.ainvoke([SystemMessage(content="Hi")])
+            return True
+        except Exception as e:
+            logger.error(f"Health check failed: {str(e)}")
+            raise