uuz

app.py

@@ -1,5 +1,3 @@
-# --- START OF FILE GeminiChatbot/app.py ---
-
 import os
 import logging
 import base64
@@ -24,9 +22,9 @@ api_key = os.environ.get("GEMINI_API_KEY")
 if not api_key:
     logger.warning("GEMINI_API_KEY not found in environment variables")
 else:
-    genai.configure(api_key=api_key)
     logger.info("GEMINI_API_KEY found. API configured successfully.")
 
+genai.configure(api_key=api_key)
 
 # Initialize Flask app
 app = Flask(__name__)
@@ -47,194 +45,167 @@ def session_required(f):
 # Ensure upload directory exists
 os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
 
-# Initialize models only if API key is present
-model = None
-vision_model = None
-if api_key:
-    # Configure Gemini model with specific parameters for better responses
-    model = genai.GenerativeModel(
-        model_name='gemini-1.0-pro', # Changed model name as 'gemini-2.0-flash' is not standard
-        generation_config={
-            'temperature': 0.7,  # Slightly creative but still focused
-            'top_p': 0.9,        # Diverse output but not too random
-            'top_k': 40,         # Reasonable range of tokens to consider
-            'max_output_tokens': 2048  # Allow longer responses
-        }
-    )
-
-    # Configure Gemini vision model for image processing
-    # Using gemini-1.5-flash as it's generally available and supports vision
-    vision_model = genai.GenerativeModel('gemini-1.5-flash')
-else:
-     logger.error("Cannot initialize Gemini models: API Key is missing.")
+# Configure Gemini model with specific parameters for better responses
+model = genai.GenerativeModel(
+    model_name='gemini-2.0-flash',
+    generation_config={
+        'temperature': 0.7,  # Slightly creative but still focused
+        'top_p': 0.9,        # Diverse output but not too random
+        'top_k': 40,         # Reasonable range of tokens to consider
+        'max_output_tokens': 2048  # Allow longer responses
+    }
+)
 
+# Configure Gemini vision model for image processing
+vision_model = genai.GenerativeModel('gemini-2.0-vision-flash')
 
 @app.route('/')
 @session_required
 def index():
     """Render the chat interface."""
-    if not api_key:
-         return "Erreur: Clé API Gemini manquante. Veuillez configurer GEMINI_API_KEY.", 500
     return render_template('index.html')
 
 @app.route('/api/chat', methods=['POST'])
 @session_required
 def chat():
     """Process chat messages and get responses from Gemini API."""
-    if not api_key:
-        logger.error("Chat request failed: API Key is missing.")
-        return jsonify({'error': 'Configuration serveur incomplète (clé API manquante).'}), 500
-    if not model or not vision_model:
-        logger.error("Chat request failed: Models not initialized.")
-        return jsonify({'error': 'Configuration serveur incomplète (modèles non initialisés).'}), 500
-
     try:
         data = request.json
         user_message = data.get('message', '')
         chat_history = data.get('history', [])
-        image_data = data.get('image', None) # Expecting a single image base64 string for now
-
+        image_data = data.get('image', None)
+        
         if not user_message and not image_data:
             return jsonify({'error': 'Veuillez entrer un message ou joindre une image.'}), 400
-
+        
         # Log the incoming request (but not full chat history for privacy)
         session_id = session.get('session_id')
-        logger.info(f"Received chat request from session {session_id}. Message length: {len(user_message)}. Image attached: {'Yes' if image_data else 'No'}")
-
-        # Handle image processing if an image is included
+        logger.info(f"Received chat request from session {session_id}. Message length: {len(user_message)}")
+        
+        # Format conversation history for context
+        formatted_history = []
+        for msg in chat_history[-15:]:  # Use the last 15 messages for more context
+            role = "user" if msg['sender'] == 'user' else "model"
+            formatted_history.append({"role": role, "parts": [msg['text']]})
+        
+        # Handle image processing if images are included
         if image_data:
-            if not vision_model:
-                 logger.error("Vision model not available.")
-                 return jsonify({'error': 'Le modèle de vision n\'est pas configuré.'}), 500
             try:
-                # Decode image data
-                # Assuming image_data is "data:image/jpeg;base64,..."
-                image_info, image_base64 = image_data.split(',', 1)
-                mime_type = image_info.split(':')[1].split(';')[0] # Extract mime type like "image/jpeg"
-                image_bytes = base64.b64decode(image_base64) # Get raw bytes
-
-                # Create the image part as a dictionary (CORRECTED METHOD)
-                image_part = {
-                    "mime_type": mime_type,
-                    "data": image_bytes
-                }
-
-                # --- Save image (optional but good practice) ---
-                session_dir = os.path.join(app.config['UPLOAD_FOLDER'], session_id)
-                os.makedirs(session_dir, exist_ok=True)
-                timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
-                # Try to get extension from mime type
-                extension = mime_type.split('/')[-1] if '/' in mime_type else 'jpg'
-                filename = secure_filename(f"image_{timestamp}.{extension}")
-                filepath = os.path.join(session_dir, filename)
-                with open(filepath, "wb") as f:
-                    f.write(image_bytes)
-                logger.info(f"Saved uploaded image to {filepath}")
-                # --- End Save image ---
-
-                # Create message parts list for generate_content (CORRECTED METHOD)
                 parts = []
-                if user_message: # Add text first if it exists
-                     parts.append(user_message)
-                parts.append(image_part) # Add the image dictionary
-
+                
+                # Process single image or multiple images
+                if isinstance(image_data, list):
+                    # Handle multiple images
+                    for img in image_data:
+                        if isinstance(img, str) and ',' in img:
+                            # Extract the base64 part after the comma
+                            image_base64 = img.split(',')[1]
+                            # Create image part
+                            image = genai.types.Part.from_data(
+                                data=base64.b64decode(image_base64),
+                                mime_type="image/jpeg"
+                            )
+                            parts.append(image)
+                            
+                            # Save each image
+                            session_id = session.get('session_id')
+                            session_dir = os.path.join(app.config['UPLOAD_FOLDER'], session_id)
+                            os.makedirs(session_dir, exist_ok=True)
+                            
+                            timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+                            filename = secure_filename(f"image_{timestamp}_{len(parts)}.jpg")
+                            filepath = os.path.join(session_dir, filename)
+                            with open(filepath, "wb") as f:
+                                f.write(base64.b64decode(image_base64))
+                else:
+                    # Handle single image
+                    image_base64 = image_data.split(',')[1]
+                    image = genai.types.Part.from_data(
+                        data=base64.b64decode(image_base64),
+                        mime_type="image/jpeg"
+                    )
+                    parts.append(image)
+                    
+                    # Save image with timestamp in the session directory
+                    session_id = session.get('session_id')
+                    session_dir = os.path.join(app.config['UPLOAD_FOLDER'], session_id)
+                    os.makedirs(session_dir, exist_ok=True)
+                    
+                    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+                    filename = secure_filename(f"image_{timestamp}.jpg")
+                    filepath = os.path.join(session_dir, filename)
+                    with open(filepath, "wb") as f:
+                        f.write(base64.b64decode(image_base64))
+                
+                # Add text message if provided
+                if user_message:
+                    parts.append(user_message)
+                
                 # Generate response using vision model
-                logger.debug(f"Sending parts to vision model: {[type(p) if not isinstance(p, dict) else 'dict(image)' for p in parts]}")
                 response = vision_model.generate_content(parts)
-                logger.info(f"Generated vision response successfully. Response length: {len(response.text)}")
                 return jsonify({'response': response.text})
-
-            except (ValueError, IndexError) as decode_error:
-                 logger.error(f"Error decoding image data: {str(decode_error)}")
-                 return jsonify({'error': 'Format de données d\'image invalide.'}), 400
+            
             except Exception as img_error:
-                # Log the full traceback for better debugging
-                logger.exception(f"Error processing image: {str(img_error)}")
+                logger.error(f"Error processing image: {str(img_error)}")
                 return jsonify({
                     'error': 'Désolé, une erreur est survenue lors du traitement de l\'image. Veuillez réessayer.'
                 }), 500
         else:
             # Text-only processing
-            if not model:
-                 logger.error("Text model not available.")
-                 return jsonify({'error': 'Le modèle de texte n\'est pas configuré.'}), 500
-
-            # Format conversation history for context
-            formatted_history = []
-            for msg in chat_history[-15:]:  # Use the last 15 messages for more context
-                role = "user" if msg['sender'] == 'user' else "model"
-                # Ensure message text is not None or empty before adding
-                if msg.get('text'):
-                    formatted_history.append({"role": role, "parts": [msg['text']]})
-                # Note: History currently doesn't include images sent previously.
-                # Handling multimodal history requires storing image references/data
-                # and formatting them correctly for the API on subsequent turns.
-
-            try:
-                # Create a chat session with history
-                chat_session = model.start_chat(history=formatted_history)
-
-                # Generate response
-                response = chat_session.send_message(user_message)
-
-                # Log successful response
-                logger.info(f"Generated text response successfully. Response length: {len(response.text)}")
-
-                # Return the response
-                return jsonify({'response': response.text})
-
-            except genai.types.generation_types.BlockedPromptException as be:
-                 logger.warning(f"Content blocked for session {session_id}: {str(be)}")
-                 return jsonify({
-                    'error': 'Votre message ou la conversation contient du contenu potentiellement inapproprié et ne peut pas être traité.'
-                 }), 400
-            except Exception as e:
-                 logger.exception(f"Error during text generation for session {session_id}: {str(e)}")
-                 return jsonify({
-                    'error': 'Désolé, une erreur est survenue lors de la génération de la réponse texte.'
-                 }), 500
-
+            # Create a chat session with history
+            chat = model.start_chat(history=formatted_history)
+            
+            # Generate response
+            response = chat.send_message(user_message)
+            
+            # Log successful response
+            logger.info(f"Generated response successfully. Response length: {len(response.text)}")
+            
+            # Return the response
+            return jsonify({'response': response.text})
+    
+    except genai.types.generation_types.BlockedPromptException as be:
+        logger.warning(f"Content blocked: {str(be)}")
+        return jsonify({
+            'error': 'Votre message ou la conversation ne peut pas être traitée car elle contient du contenu potentiellement inapproprié.'
+        }), 400
+        
     except Exception as e:
-        # Catch-all for unexpected errors (like issues reading request JSON)
-        logger.exception(f"Unhandled error in chat endpoint: {str(e)}")
+        logger.error(f"Error in chat endpoint: {str(e)}")
         return jsonify({
-            'error': 'Désolé, j\'ai rencontré une erreur inattendue. Veuillez réessayer.'
+            'error': 'Désolé, j\'ai rencontré une erreur lors du traitement de votre demande. Veuillez réessayer.'
         }), 500
 
-
 @app.route('/api/save-chat', methods=['POST'])
 @session_required
 def save_chat():
     """Save the current chat history."""
     try:
         session_id = session.get('session_id')
-        if not session_id:
-             return jsonify({'error': 'Session introuvable.'}), 400
-
+        
         # Create session-specific directory
         session_dir = os.path.join(app.config['UPLOAD_FOLDER'], session_id)
         os.makedirs(session_dir, exist_ok=True)
-
+        
         data = request.json
         chat_history = data.get('history', [])
-
+        
         if not chat_history:
             return jsonify({'error': 'Aucune conversation à sauvegarder.'}), 400
-
+        
         # Generate filename with timestamp
         timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
         filename = f"chat_{timestamp}.json"
         filepath = os.path.join(session_dir, filename)
-
+        
         # Save chat history to file
         with open(filepath, 'w', encoding='utf-8') as f:
             json.dump(chat_history, f, ensure_ascii=False, indent=2)
-
-        logger.info(f"Chat history saved for session {session_id} to {filename}")
-        return jsonify({'success': True, 'filename': filename, 'timestamp': timestamp}) # Return timestamp too
-
+        
+        return jsonify({'success': True, 'filename': filename})
+    
     except Exception as e:
-        logger.exception(f"Error saving chat for session {session_id}: {str(e)}")
+        logger.error(f"Error saving chat: {str(e)}")
         return jsonify({
             'error': 'Désolé, une erreur est survenue lors de la sauvegarde de la conversation.'
         }), 500
@@ -245,42 +216,33 @@ def load_chats():
     """Get a list of saved chat files for current session."""
     try:
         session_id = session.get('session_id')
-        if not session_id:
-            return jsonify({'error': 'Session introuvable.'}), 400
-
+        
         # Get session-specific directory
         session_dir = os.path.join(app.config['UPLOAD_FOLDER'], session_id)
-
+        
         # If the directory doesn't exist yet, return empty list
         if not os.path.exists(session_dir):
-            logger.info(f"No chat directory found for session {session_id}")
             return jsonify({'chats': []})
-
+        
         chat_files = []
         for filename in os.listdir(session_dir):
-            # Ensure we only list chat files, not uploaded images etc.
             if filename.startswith('chat_') and filename.endswith('.json'):
-                try:
-                    # Extract timestamp from filename 'chat_YYYYMMDD_HHMMSS.json'
-                    timestamp_str = filename[5:-5] # Remove 'chat_' and '.json'
-                    # Validate timestamp format (optional but good)
-                    datetime.strptime(timestamp_str, "%Y%m%d_%H%M%S")
-                    chat_files.append({
-                        'filename': filename,
-                        'timestamp': timestamp_str # Keep original string for sorting/display
-                    })
-                except ValueError:
-                    logger.warning(f"Skipping file with unexpected format: {filename} in {session_dir}")
-
-
-        # Sort by timestamp string (lexicographical sort works for YYYYMMDD_HHMMSS)
+                # Extract timestamp from filename
+                timestamp = filename[5:-5]  # Remove 'chat_' and '.json'
+                # Add to list
+                chat_files.append({
+                    'filename': filename,
+                    'timestamp': timestamp
+                })
+        
+        # Sort by timestamp (newest first)
         chat_files.sort(key=lambda x: x['timestamp'], reverse=True)
-
+        
         logger.info(f"Loaded {len(chat_files)} chats for session {session_id}")
         return jsonify({'chats': chat_files})
-
+    
     except Exception as e:
-        logger.exception(f"Error loading chat list for session {session_id}: {str(e)}")
+        logger.error(f"Error loading chat list: {str(e)}")
         return jsonify({
             'error': 'Désolé, une erreur est survenue lors du chargement des conversations.'
         }), 500
@@ -291,58 +253,25 @@ def load_chat(filename):
     """Load a specific chat history file."""
     try:
         session_id = session.get('session_id')
-        if not session_id:
-            return jsonify({'error': 'Session introuvable.'}), 400
-
-        # Secure the filename before using it
-        safe_filename = secure_filename(filename)
-        if not safe_filename.startswith('chat_') or not safe_filename.endswith('.json'):
-             logger.warning(f"Attempt to load invalid chat filename: {filename} (secured: {safe_filename}) for session {session_id}")
-             return jsonify({'error': 'Nom de fichier de conversation invalide.'}), 400
-
+        
         # Load from session-specific directory
         session_dir = os.path.join(app.config['UPLOAD_FOLDER'], session_id)
-        filepath = os.path.join(session_dir, safe_filename)
-
+        filepath = os.path.join(session_dir, secure_filename(filename))
+        
         if not os.path.exists(filepath):
-            logger.warning(f"Chat file not found: {filepath} for session {session_id}")
             return jsonify({'error': 'Conversation introuvable.'}), 404
-
-        # Check if path is still within the intended directory (security measure)
-        if not os.path.abspath(filepath).startswith(os.path.abspath(session_dir)):
-            logger.error(f"Attempt to access file outside session directory: {filepath}")
-            return jsonify({'error': 'Accès non autorisé.'}), 403
-
+        
         with open(filepath, 'r', encoding='utf-8') as f:
             chat_history = json.load(f)
-
-        # Basic validation of loaded history format (optional)
-        if not isinstance(chat_history, list):
-            raise ValueError("Invalid chat history format in file.")
-        for item in chat_history:
-            if not isinstance(item, dict) or 'sender' not in item or 'text' not in item:
-                 # Allow for messages that might only have text or image data later
-                 if 'sender' not in item:
-                     raise ValueError("Invalid message format in chat history.")
-
-
-        logger.info(f"Loaded chat {safe_filename} for session {session_id}")
+        
+        logger.info(f"Loaded chat {filename} for session {session_id}")
         return jsonify({'history': chat_history})
-
-    except json.JSONDecodeError:
-        logger.error(f"Error decoding JSON from chat file: {safe_filename} for session {session_id}")
-        return jsonify({'error': 'Le fichier de conversation est corrompu.'}), 500
-    except ValueError as ve:
-         logger.error(f"Invalid content in chat file {safe_filename}: {str(ve)}")
-         return jsonify({'error': f'Format invalide dans le fichier de conversation: {str(ve)}'}), 500
+    
     except Exception as e:
-        logger.exception(f"Error loading chat file {safe_filename} for session {session_id}: {str(e)}")
+        logger.error(f"Error loading chat file: {str(e)}")
         return jsonify({
             'error': 'Désolé, une erreur est survenue lors du chargement de la conversation.'
         }), 500
 
 if __name__ == '__main__':
-    # Use 0.0.0.0 to be accessible on the network, debug=False for production
-    # Port 8080 is often used as an alternative to 5000
-    app.run(host='0.0.0.0', port=int(os.environ.get('PORT', 8080)), debug=os.environ.get('FLASK_DEBUG', 'False').lower() == 'true')
-# --- END OF FILE GeminiChatbot/app.py ---
+    app.run(host='0.0.0.0', port=5000, debug=True)

static/css/style.css

@@ -1,9 +1,49 @@
 /**
  * File: static/css/style.css
- * Description: Stylesheet for the Gemini Chatbot Web Application.
- * Version: Corrected for scrolling issues.
+ * Description: Stylesheet for the Mariam AI Chatbot Web Application.
+ * Version: Enhanced with PWA support and improved responsiveness.
  */
 
+/* PWA Specific Styles */
+@media (display-mode: standalone) {
+    /* Adjustments for standalone mode (when installed as PWA) */
+    body {
+        /* Add safe area insets for mobile devices */
+        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+        /* Better touch handling */
+        touch-action: manipulation;
+    }
+    
+    /* Hide browser UI when installed as PWA */
+    .top-bar {
+        padding-top: max(12px, env(safe-area-inset-top));
+    }
+    
+    /* Ensure content doesn't get hidden beneath the bottom nav bar on iOS */
+    .input-area {
+        padding-bottom: env(safe-area-inset-bottom);
+    }
+}
+
+/* Offline indicator for PWA */
+.offline-indicator {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: #FFC107;
+    color: #212121;
+    text-align: center;
+    padding: 8px;
+    font-size: 14px;
+    z-index: 9999;
+    display: none; /* Hidden by default, shown via JS when offline */
+}
+
+.offline-indicator.visible {
+    display: block;
+}
+
 /* Base Styles */
 * {
     margin: 0;
@@ -543,6 +583,7 @@ body {
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
     word-wrap: break-word; /* Allow long words to break */
     overflow-wrap: break-word; /* Better word breaking */
+    position: relative; /* For absolute positioning of action buttons */
 }
 
 .message-container.user .message-bubble {
@@ -697,6 +738,40 @@ body {
     background-color: #D32F2F;
 }
 
+/* Message actions (copy button, etc.) */
+.message-actions {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    display: flex;
+    gap: 5px;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.message-bubble:hover .message-actions {
+    opacity: 1;
+}
+
+.copy-button {
+    background-color: rgba(255, 255, 255, 0.8);
+    color: #616161;
+    border: none;
+    border-radius: 4px;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.copy-button:hover {
+    background-color: #E3F2FD;
+    color: #2196F3;
+}
+
 /* Loading Animation */
 .message-bubble.loading {
     display: flex; /* Use flex for alignment */

static/js/chat.js

@@ -18,6 +18,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const mainContent = document.querySelector('.main-content');
     const welcomeContainer = document.querySelector('.welcome-container');
     const suggestionBubbles = document.querySelectorAll('.suggestion-bubble');
+    const offlineIndicator = document.getElementById('offlineIndicator');
     
     // Templates
     const loadingTemplate = document.getElementById('loadingTemplate');
@@ -28,6 +29,33 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // State variables
     let chatHistory = [];
+    let isOffline = !navigator.onLine; // Vérifier l'état de la connexion au chargement
+    
+    // Gestion de l'état de la connexion pour PWA
+    function updateOnlineStatus() {
+        isOffline = !navigator.onLine;
+        
+        if (isOffline) {
+            // L'utilisateur est hors ligne
+            offlineIndicator.classList.add('visible');
+            // Désactiver temporairement le bouton d'envoi
+            sendButton.disabled = true;
+            sendButton.title = "Hors ligne - Reconnectez-vous pour envoyer des messages";
+        } else {
+            // L'utilisateur est en ligne
+            offlineIndicator.classList.remove('visible');
+            // Réactiver le bouton d'envoi
+            sendButton.disabled = false;
+            sendButton.title = "Envoyer";
+        }
+    }
+    
+    // Installer les événements pour détecter les changements de connectivité
+    window.addEventListener('online', updateOnlineStatus);
+    window.addEventListener('offline', updateOnlineStatus);
+    
+    // Appliquer l'état initial
+    updateOnlineStatus();
     let selectedImagesData = []; // Pour stocker plusieurs images
     let conversationStarted = false;
     
@@ -148,7 +176,11 @@ document.addEventListener('DOMContentLoaded', function() {
     // Settings button in side nav
     if (settingsButtonNav) {
         settingsButtonNav.addEventListener('click', function() {
-            alert('Fonctionnalité en cours de développement');
+            Swal.fire({
+                icon: 'info',
+                title: 'En cours de développement',
+                text: 'Cette fonctionnalité sera disponible prochainement.'
+            });
             closeSideNav();
         });
     }
@@ -215,13 +247,17 @@ document.addEventListener('DOMContentLoaded', function() {
             .then(response => response.json())
             .then(data => {
                 if (data.error) {
-                    alert(data.error);
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Erreur',
+                        text: data.error
+                    });
                     return;
                 }
                 
                 if (data.history) {
                     // Clear current chat
-                    clearChat(false); // No confirmation needed
+                    clearChatContent(); // No confirmation needed
                     
                     // Load history
                     chatHistory = data.history;
@@ -259,14 +295,22 @@ document.addEventListener('DOMContentLoaded', function() {
             })
             .catch(error => {
                 console.error('Error loading chat:', error);
-                alert('Erreur lors du chargement de la conversation.');
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Erreur',
+                    text: 'Erreur lors du chargement de la conversation.'
+                });
             });
     }
     
     // Save current chat
     saveCurrentChatButton.addEventListener('click', function() {
         if (chatHistory.length <= 1) {
-            alert('Aucune conversation à sauvegarder. Veuillez d\'abord discuter avec le chatbot.');
+            Swal.fire({
+                icon: 'info',
+                title: 'Information',
+                text: 'Aucune conversation à sauvegarder. Veuillez d\'abord discuter avec le chatbot.'
+            });
             return;
         }
         
@@ -282,15 +326,29 @@ document.addEventListener('DOMContentLoaded', function() {
         .then(response => response.json())
         .then(data => {
             if (data.error) {
-                alert(data.error);
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Erreur',
+                    text: data.error
+                });
             } else {
-                alert('Conversation sauvegardée avec succès !');
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Sauvegardé',
+                    text: 'Conversation sauvegardée avec succès !',
+                    timer: 1500,
+                    showConfirmButton: false
+                });
                 loadChatHistoryList();
             }
         })
         .catch(error => {
             console.error('Error saving chat:', error);
-            alert('Erreur lors de la sauvegarde de la conversation.');
+            Swal.fire({
+                icon: 'error',
+                title: 'Erreur',
+                text: 'Erreur lors de la sauvegarde de la conversation.'
+            });
         });
     });
     
@@ -328,21 +386,51 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Function to clear the chat history
     function clearChat(withConfirmation = true) {
-        if (!withConfirmation || (chatHistory.length > 0 && confirm('Êtes-vous sûr de vouloir effacer toute la conversation ?'))) {
-            // Clear the chat window except for the welcome message
-            while (chatWindow.childElementCount > 1) {
-                chatWindow.removeChild(chatWindow.lastChild);
-            }
-            
-            // Reset chat history but keep the welcome message
-            const welcomeMsg = chatHistory[0];
-            chatHistory = welcomeMsg ? [welcomeMsg] : [];
-            
-            // Focus on input field
-            userInput.focus();
+        if (!withConfirmation) {
+            // Clear chat immediately without confirmation
+            clearChatContent();
+            return;
+        }
+        
+        if (chatHistory.length > 0) {
+            Swal.fire({
+                title: 'Êtes-vous sûr ?',
+                text: 'Voulez-vous effacer toute la conversation ?',
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#3085d6',
+                cancelButtonColor: '#d33',
+                confirmButtonText: 'Oui, effacer',
+                cancelButtonText: 'Annuler'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    clearChatContent();
+                }
+            });
         }
     }
     
+    // Helper function to clear chat content
+    function clearChatContent() {
+        // Clear the chat window except for the welcome message
+        while (chatWindow.childElementCount > 1) {
+            chatWindow.removeChild(chatWindow.lastChild);
+        }
+        
+        // Reset chat history but keep the welcome message
+        const welcomeMsg = chatHistory[0];
+        chatHistory = welcomeMsg ? [welcomeMsg] : [];
+        
+        // Show welcome container again
+        if (welcomeContainer) {
+            welcomeContainer.style.display = 'flex';
+            conversationStarted = false;
+        }
+        
+        // Focus on input field
+        userInput.focus();
+    }
+    
     // Function to send message
     function sendMessage() {
         const message = userInput.value.trim();
@@ -352,7 +440,7 @@ document.addEventListener('DOMContentLoaded', function() {
         
         if (selectedImagesData.length > 0) {
             // Add user message with images to UI
-            addUserImageMessage(message, selectedImagesData[0]); // Pour l'instant afficher seulement la première image dans l'UI
+            addUserImageMessage(message, selectedImagesData); // Maintenant on passe toutes les images
         } else {
             // Add user text message to UI
             addUserMessage(message);
@@ -366,7 +454,8 @@ document.addEventListener('DOMContentLoaded', function() {
         const loadingElement = addLoadingIndicator();
         
         // Send message to API
-        sendToAPI(message, loadingElement, selectedImagesData.length > 0 ? selectedImagesData[0] : null);
+        const imagesToSend = selectedImagesData.length > 0 ? selectedImagesData : null;
+        sendToAPI(message, loadingElement, imagesToSend);
         
         // Clear image previews if any
         if (selectedImagesData.length > 0) {
@@ -399,8 +488,8 @@ document.addEventListener('DOMContentLoaded', function() {
         scrollToBottom();
     }
     
-    // Add user message with image to chat window
-    function addUserImageMessage(message, imageData) {
+    // Add user message with multiple images to chat window
+    function addUserImageMessage(message, imagesData) {
         // Hide welcome container if visible (first message)
         if (!conversationStarted && welcomeContainer) {
             welcomeContainer.style.display = 'none';
@@ -409,9 +498,27 @@ document.addEventListener('DOMContentLoaded', function() {
         
         const messageElement = userImageMessageTemplate.content.cloneNode(true);
         
-        // Set image source
-        const imageElement = messageElement.querySelector('.chat-image');
-        imageElement.src = imageData;
+        // Handle multiple images
+        const imageContainer = messageElement.querySelector('.image-container');
+        
+        // If imagesData is an array, add all images
+        if (Array.isArray(imagesData)) {
+            // Clear existing image elements
+            imageContainer.innerHTML = '';
+            
+            // Add each image
+            imagesData.forEach(imgData => {
+                const img = document.createElement('img');
+                img.className = 'chat-image';
+                img.src = imgData;
+                img.alt = 'Chat image';
+                imageContainer.appendChild(img);
+            });
+        } else if (imagesData) {
+            // Single image case
+            const imageElement = messageElement.querySelector('.chat-image');
+            imageElement.src = imagesData;
+        }
         
         // Set message text if any
         const textElement = messageElement.querySelector('p');
@@ -426,7 +533,7 @@ document.addEventListener('DOMContentLoaded', function() {
         // Add to chat history (we don't add the image to history, just the text)
         chatHistory.push({
             sender: 'user',
-            text: message || 'Image envoyée'  // Default text if no message provided
+            text: message || 'Images envoyées'  // Default text if no message provided
         });
         
         // Scroll to bottom
@@ -451,6 +558,35 @@ document.addEventListener('DOMContentLoaded', function() {
             messageParagraph.textContent = message;
         }
         
+        // Add copy button functionality
+        const copyButton = messageElement.querySelector('.copy-button');
+        if (copyButton) {
+            copyButton.addEventListener('click', function() {
+                // Get the text to copy (original message, not HTML)
+                navigator.clipboard.writeText(message).then(() => {
+                    // Show success notification with SweetAlert2
+                    Swal.fire({
+                        toast: true,
+                        position: 'top-end',
+                        icon: 'success',
+                        title: 'Texte copié !',
+                        showConfirmButton: false,
+                        timer: 1500
+                    });
+                }).catch(err => {
+                    console.error('Erreur lors de la copie :', err);
+                    Swal.fire({
+                        toast: true,
+                        position: 'top-end',
+                        icon: 'error',
+                        title: 'Erreur lors de la copie',
+                        showConfirmButton: false,
+                        timer: 1500
+                    });
+                });
+            });
+        }
+        
         chatWindow.appendChild(messageElement);
         
         // Add syntax highlighting to code blocks if Prism is available
@@ -528,6 +664,7 @@ document.addEventListener('DOMContentLoaded', function() {
         
         // Add image data if provided
         if (imageData) {
+            // If imageData is an array of images, send them all
             requestData.image = imageData;
         }
         
@@ -566,8 +703,16 @@ document.addEventListener('DOMContentLoaded', function() {
                 loadingElement.remove();
             }
             
-            // Add error message
-            addErrorMessage('Désolé, il y a eu un problème de connexion avec le serveur. Veuillez réessayer.', message, imageData);
+            // Add different error message based on online/offline status
+            if (!navigator.onLine) {
+                // Custom error message for offline mode
+                addErrorMessage('Vous êtes actuellement hors ligne. Connectez-vous à Internet pour discuter avec Mariam AI.', message, imageData);
+                // Update the status indicator
+                updateOnlineStatus();
+            } else {
+                // Generic error for other connection issues
+                addErrorMessage('Désolé, il y a eu un problème de connexion avec le serveur. Veuillez réessayer.', message, imageData);
+            }
         })
         .finally(() => {
             // Re-enable input

static/js/pwa.js

@@ -0,0 +1,56 @@
+// Vérifier si le navigateur prend en charge les Service Workers
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', function() {
+    navigator.serviceWorker.register('/static/js/service-worker.js')
+      .then(function(registration) {
+        console.log('Service Worker enregistré avec succès:', registration.scope);
+      })
+      .catch(function(error) {
+        console.log('Échec de l\'enregistrement du Service Worker:', error);
+      });
+  });
+}
+
+// Gestion des événements d'installation de PWA
+let deferredPrompt;
+
+window.addEventListener('beforeinstallprompt', (e) => {
+  // Empêcher Chrome 67 et versions ultérieures d'afficher automatiquement l'invite
+  e.preventDefault();
+  // Stocker l'événement pour l'utiliser plus tard
+  deferredPrompt = e;
+  
+  // Vous pouvez ajouter ici un bouton ou une bannière pour suggérer l'installation
+  // Par exemple :
+  /*
+  const installBanner = document.createElement('div');
+  installBanner.id = 'install-banner';
+  installBanner.innerHTML = `
+    <p>Installez Mariam AI sur votre appareil!</p>
+    <button id="install-button">Installer</button>
+    <button id="close-banner">✕</button>
+  `;
+  document.body.appendChild(installBanner);
+  
+  document.getElementById('install-button').addEventListener('click', (e) => {
+    // Afficher l'invite d'installation
+    deferredPrompt.prompt();
+    // Attendre que l'utilisateur réponde à l'invite
+    deferredPrompt.userChoice.then((choiceResult) => {
+      if (choiceResult.outcome === 'accepted') {
+        console.log('L\'utilisateur a accepté l\'installation');
+      } else {
+        console.log('L\'utilisateur a refusé l\'installation');
+      }
+      // Réinitialiser la variable car on ne peut utiliser l'événement qu'une fois
+      deferredPrompt = null;
+      // Cacher la bannière
+      installBanner.style.display = 'none';
+    });
+  });
+  
+  document.getElementById('close-banner').addEventListener('click', (e) => {
+    installBanner.style.display = 'none';
+  });
+  */
+});

static/js/service-worker.js

@@ -0,0 +1,75 @@
+// Nom du cache
+const CACHE_NAME = 'mariam-ai-cache-v1';
+
+// Ressources à mettre en cache
+const CACHE_ASSETS = [
+  '/',
+  '/static/css/style.css',
+  '/static/js/chat.js',
+  '/static/icons/icon-192x192.png',
+  '/static/icons/icon-512x512.png',
+  '/static/manifest.json'
+];
+
+// Installation du Service Worker
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then((cache) => {
+        return cache.addAll(CACHE_ASSETS);
+      })
+      .then(() => self.skipWaiting())
+  );
+});
+
+// Activation du Service Worker
+self.addEventListener('activate', (event) => {
+  const currentCaches = [CACHE_NAME];
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return cacheNames.filter((cacheName) => !currentCaches.includes(cacheName));
+    }).then((cachesToDelete) => {
+      return Promise.all(cachesToDelete.map((cacheToDelete) => {
+        return caches.delete(cacheToDelete);
+      }));
+    }).then(() => self.clients.claim())
+  );
+});
+
+// Stratégie de cache : "Cache, falling back to network"
+self.addEventListener('fetch', (event) => {
+  // Ne pas mettre en cache les requêtes API
+  if (event.request.url.includes('/api/')) {
+    return;
+  }
+  
+  event.respondWith(
+    caches.match(event.request)
+      .then((response) => {
+        // Cache hit - return response
+        if (response) {
+          return response;
+        }
+        
+        // Si pas dans le cache, on fait la requête au réseau
+        return fetch(event.request).then(
+          (response) => {
+            // Return the network response
+            if(!response || response.status !== 200 || response.type !== 'basic') {
+              return response;
+            }
+            
+            // On clone la réponse pour l'utiliser deux fois
+            const responseToCache = response.clone();
+            
+            caches.open(CACHE_NAME)
+              .then((cache) => {
+                cache.put(event.request, responseToCache);
+              });
+            
+            return response;
+          }
+        );
+      })
+  );
+});

static/manifest.json

@@ -0,0 +1,23 @@
+{
+  "name": "Mariam AI",
+  "short_name": "Mariam AI",
+  "description": "Assistant IA personnel alimenté par Mariam AI",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#2196F3",
+  "icons": [
+    {
+      "src": "/static/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/static/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}

static/uploads/0aac323b-143c-442a-82dd-56038be56bec/chat_20250502_073406.json

@@ -0,0 +1,10 @@
+[
+  {
+    "sender": "user",
+    "text": "Donne-moi des idées de recettes rapides pour un dîner équilibré"
+  },
+  {
+    "sender": "bot",
+    "text": "Absolument ! Voici quelques idées de recettes rapides et équilibrées pour un dîner, classées par type d'ingrédient principal, pour varier les plaisirs :\n\n**Avec du Poulet :**\n\n*   **Poulet sauté aux légumes et sauce soja:**\n    *   Coupez le poulet en dés et faites-le revenir dans une poêle avec un peu d'huile.\n    *   Ajoutez des légumes de saison coupés (brocoli, carottes, poivrons, courgettes).\n    *   Assaisonnez avec de la sauce soja, du gingembre râpé et de l'ail.\n    *   Servez avec du riz brun ou des nouilles de riz.\n*   **Salade de poulet grillé à l'avocat:**\n    *   Grillez des filets de poulet.\n    *   Préparez une salade avec de la laitue, des tomates cerises, du concombre, de l'avocat et des oignons rouges.\n    *   Coupez le poulet en tranches et ajoutez-le à la salade.\n    *   Assaisonnez avec une vinaigrette légère à base d'huile d'olive, de jus de citron et de moutarde.\n\n**Avec du Poisson :**\n\n*   **Saumon poêlé à la sauce citronnée et légumes verts:**\n    *   Faites cuire des filets de saumon à la poêle avec un peu d'huile.\n    *   Préparez une sauce rapide avec du jus de citron, du beurre (ou huile d'olive), de l'ail et des herbes fraîches.\n    *   Servez avec des légumes verts vapeur (haricots verts, brocolis, épinards).\n*   **Thon à la niçoise express:**\n    *   Utilisez du thon en conserve au naturel.\n    *   Mélangez le thon avec des tomates, des olives noires, des œufs durs, des haricots verts et des anchois (facultatif).\n    *   Assaisonnez avec de l'huile d'olive, du vinaigre de vin rouge, du sel et du poivre.\n\n**Végétarien :**\n\n*   **Curry de lentilles corail:**\n    *   Faites revenir des oignons, de l'ail et du gingembre dans une casserole.\n    *   Ajoutez des lentilles corail, du lait de coco, des tomates concassées et des épices à curry.\n    *   Laissez mijoter jusqu'à ce que les lentilles soient tendres.\n    *   Servez avec du riz basmati et de la coriandre fraîche.\n*   **Omelette aux légumes:**\n    *   Battez des œufs avec du sel, du poivre et des herbes fraîches.\n    *   Faites revenir des légumes coupés (champignons, poivrons, épinards) dans une poêle.\n    *   Versez les œufs battus sur les légumes et faites cuire l'omelette.\n    *   Servez avec une salade verte.\n*   **Pâtes aux légumes d'été et pesto:**\n    *   Faites cuire vos pâtes préférées.\n    *   Pendant ce temps, faites revenir des légumes de saison coupés (courgettes, aubergines, tomates cerises) dans une poêle avec de l'huile d'olive.\n    *   Mélangez les pâtes avec les légumes et du pesto frais.\n    *   Parsemez de parmesan râpé.\n\n**Astuces pour gagner du temps :**\n\n*   **Préparez à l'avance:** Coupez les légumes à l'avance, faites cuire du riz en grande quantité pour plusieurs repas.\n*   **Utilisez des ingrédients pré-coupés:** Achetez des légumes pré-coupés ou des salades en sachet.\n*   **Cuisinez en grande quantité:** Préparez une double portion et congelez la moitié pour un autre repas.\n*   **Simplifiez les recettes:** N'hésitez pas à adapter les recettes en fonction de ce que vous avez sous la main.\n\n**Conseils pour un dîner équilibré :**\n\n*   **Variez les sources de protéines:** Alternez entre viande, poisson, œufs, légumineuses et tofu.\n*   **Mangez des légumes à chaque repas:** Les légumes sont riches en vitamines, minéraux et fibres.\n*   **Choisissez des glucides complexes:** Privilégiez le riz brun, les pâtes complètes, le quinoa et les patates douces.\n*   **Utilisez des matières grasses saines:** Huile d'olive, avocat, noix et graines.\n*   **Limitez les aliments transformés et les sucres ajoutés.**\n\nJ'espère que ces idées vous inspireront pour préparer des dîners rapides, délicieux et équilibrés ! N'hésitez pas à me dire si vous souhaitez d'autres suggestions.\n"
+  }
+]

templates/index.html

@@ -3,10 +3,18 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Gemini Chat</title>
+    <meta name="description" content="Assistant IA personnel alimenté par Mariam AI">
+    <meta name="theme-color" content="#2196F3">
+    <title>Mariam AI Chat</title>
+    <!-- PWA support -->
+    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
+    <link rel="apple-touch-icon" href="{{ url_for('static', filename='icons/icon-192x192.png') }}">
+    <!-- Fonts et styles -->
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+    <!-- SweetAlert2 pour les alertes -->
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <!-- Marked.js pour le parsing Markdown -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"></script>
     <!-- Prism.js pour la coloration syntaxique -->
@@ -17,6 +25,11 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
 </head>
 <body>
+    <!-- Indicateur hors ligne pour PWA -->
+    <div class="offline-indicator" id="offlineIndicator">
+        <i class="bi bi-wifi-off"></i> Vous êtes hors ligne. Certaines fonctionnalités peuvent être limitées.
+    </div>
+    
     <div class="app-container">
         <!-- Side navigation bar -->
         <div class="side-nav" id="sideNav">
@@ -24,7 +37,7 @@
                 <div class="logo">
                     <i class="bi bi-stars"></i>
                 </div>
-                <h1>Gemini</h1>
+                <h1>Mariam AI</h1>
                 <button id="closeSideNavButton" class="close-button">
                     <i class="bi bi-x-lg"></i>
                 </button>
@@ -61,7 +74,7 @@
                     <button id="toggleNavButton" class="menu-button" title="Menu">
                         <i class="bi bi-list"></i>
                     </button>
-                    <h1>Assistant Gemini</h1>
+                    <h1>Assistant Mariam AI</h1>
                 </div>
                 <div class="top-bar-right">
                     <button class="icon-button" id="clearButton" title="Effacer la conversation">
@@ -78,7 +91,7 @@
                             <div class="welcome-logo">
                                 <i class="bi bi-stars"></i>
                             </div>
-                            <h2>Bienvenue sur Gemini</h2>
+                            <h2>Bienvenue sur Mariam AI</h2>
                             <p class="welcome-subtitle">Comment puis-je vous aider aujourd'hui ?</p>
                         </div>
                         
@@ -158,6 +171,11 @@
     <template id="botMessageTemplate">
         <div class="message-container bot">
             <div class="message-bubble">
+                <div class="message-actions">
+                    <button class="copy-button" title="Copier le message">
+                        <i class="bi bi-clipboard"></i>
+                    </button>
+                </div>
                 <p></p>
             </div>
         </div>
@@ -174,5 +192,7 @@
     </template>
 
     <script src="{{ url_for('static', filename='js/chat.js') }}"></script>
+    <!-- PWA Service Worker Registration -->
+    <script src="{{ url_for('static', filename='js/pwa.js') }}"></script>
 </body>
 </html>