yo

app.py

@@ -0,0 +1,250 @@
+import os
+import logging
+import base64
+import json
+import uuid
+import google.generativeai as genai
+from datetime import datetime
+from functools import wraps
+from flask import Flask, render_template, request, jsonify, session, redirect
+from dotenv import load_dotenv
+from werkzeug.utils import secure_filename
+
+# Configure logging
+logging.basicConfig(level=logging.DEBUG)
+logger = logging.getLogger(__name__)
+
+# Load environment variables
+load_dotenv()
+
+# Configure Google Gemini API
+api_key = os.environ.get("GEMINI_API_KEY")
+if not api_key:
+    logger.warning("GEMINI_API_KEY not found in environment variables")
+else:
+    logger.info("GEMINI_API_KEY found. API configured successfully.")
+
+genai.configure(api_key=api_key)
+
+# Initialize Flask app
+app = Flask(__name__)
+app.secret_key = os.environ.get("SESSION_SECRET", "default-dev-secret-key")
+app.config['UPLOAD_FOLDER'] = 'static/uploads'
+app.config['MAX_CONTENT_LENGTH'] = 10 * 1024 * 1024  # 10 MB max
+
+# Middleware to ensure user has a session_id
+def session_required(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if 'session_id' not in session:
+            session['session_id'] = str(uuid.uuid4())
+            logger.info(f"Created new session: {session['session_id']}")
+        return f(*args, **kwargs)
+    return decorated_function
+
+# Ensure upload directory exists
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+# 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."""
+    return render_template('index.html')
+
+@app.route('/api/chat', methods=['POST'])
+@session_required
+def chat():
+    """Process chat messages and get responses from Gemini API."""
+    try:
+        data = request.json
+        user_message = data.get('message', '')
+        chat_history = data.get('history', [])
+        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)}")
+        
+        # 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 an image is included
+        if image_data:
+            try:
+                # Process image with vision model
+                image_base64 = image_data.split(',')[1]
+                image = genai.types.Part.from_data(
+                    data=base64.b64decode(image_base64),
+                    mime_type="image/jpeg"
+                )
+                
+                # 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))
+                
+                # Create message parts with both text and image
+                parts = [image]
+                if user_message:
+                    parts.append(user_message)
+                
+                # Generate response using vision model
+                response = vision_model.generate_content(parts)
+                return jsonify({'response': response.text})
+            
+            except Exception as 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
+            # 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:
+        logger.error(f"Error in chat endpoint: {str(e)}")
+        return jsonify({
+            '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')
+        
+        # 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)
+        
+        return jsonify({'success': True, 'filename': filename})
+    
+    except Exception as 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
+
+@app.route('/api/load-chats', methods=['GET'])
+@session_required
+def load_chats():
+    """Get a list of saved chat files for current session."""
+    try:
+        session_id = session.get('session_id')
+        
+        # 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):
+            return jsonify({'chats': []})
+        
+        chat_files = []
+        for filename in os.listdir(session_dir):
+            if filename.startswith('chat_') and filename.endswith('.json'):
+                # 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.error(f"Error loading chat list: {str(e)}")
+        return jsonify({
+            'error': 'Désolé, une erreur est survenue lors du chargement des conversations.'
+        }), 500
+
+@app.route('/api/load-chat/<filename>', methods=['GET'])
+@session_required
+def load_chat(filename):
+    """Load a specific chat history file."""
+    try:
+        session_id = session.get('session_id')
+        
+        # Load from session-specific directory
+        session_dir = os.path.join(app.config['UPLOAD_FOLDER'], session_id)
+        filepath = os.path.join(session_dir, secure_filename(filename))
+        
+        if not os.path.exists(filepath):
+            return jsonify({'error': 'Conversation introuvable.'}), 404
+        
+        with open(filepath, 'r', encoding='utf-8') as f:
+            chat_history = json.load(f)
+        
+        logger.info(f"Loaded chat {filename} for session {session_id}")
+        return jsonify({'history': chat_history})
+    
+    except Exception as 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__':
+    app.run(host='0.0.0.0', port=5000, debug=True)

main.py

@@ -0,0 +1,4 @@
+from app import app  # noqa: F401
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=5000, debug=True)

static/css/style.css

@@ -0,0 +1,899 @@
+/* Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: #FFFFFF;
+    color: #212121;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+/* App Container */
+.app-container {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+/* Side Navigation Bar */
+.side-nav {
+    width: 280px;
+    height: 100%;
+    background-color: #FFFFFF;
+    border-right: 1px solid #EEEEEE;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    left: -280px; /* Hidden by default */
+    transition: left 0.3s ease;
+    z-index: 1000;
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.side-nav.active {
+    left: 0;
+}
+
+.side-nav-header {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    border-bottom: 1px solid #EEEEEE;
+    position: relative;
+}
+
+.side-nav-header .logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background-color: #E3F2FD;
+    border-radius: 50%;
+    margin-right: 12px;
+    color: #2196F3;
+}
+
+.side-nav-header h1 {
+    font-size: 20px;
+    font-weight: 600;
+    color: #424242;
+    margin: 0;
+}
+
+.close-button {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: transparent;
+    color: #9E9E9E;
+    border: none;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.close-button:hover {
+    background-color: #F5F5F5;
+    color: #757575;
+}
+
+.side-nav-section {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px 0;
+    border-bottom: 1px solid #EEEEEE;
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 16px 12px;
+}
+
+.section-header h3 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #424242;
+    margin: 0;
+}
+
+.action-button-small {
+    background-color: transparent;
+    color: #2196F3;
+    border: 1px solid #2196F3;
+    border-radius: 4px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.action-button-small:hover {
+    background-color: #E3F2FD;
+}
+
+.history-list {
+    max-height: 100%;
+    overflow-y: auto;
+}
+
+.chat-history-item {
+    padding: 12px 16px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    transition: background-color 0.2s ease;
+    border-radius: 8px;
+    margin: 0 8px 8px;
+}
+
+.chat-history-item:hover {
+    background-color: #F5F5F5;
+}
+
+.chat-history-item .icon {
+    margin-right: 12px;
+    color: #757575;
+}
+
+.chat-history-item .details {
+    flex: 1;
+}
+
+.chat-history-item .timestamp {
+    font-size: 12px;
+    color: #9E9E9E;
+    margin-top: 4px;
+}
+
+.empty-state {
+    padding: 24px 16px;
+    text-align: center;
+    color: #9E9E9E;
+    font-size: 14px;
+}
+
+.side-nav-footer {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.nav-button {
+    display: flex;
+    align-items: center;
+    padding: 10px 16px;
+    background-color: transparent;
+    color: #616161;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 14px;
+    text-align: left;
+}
+
+.nav-button i {
+    margin-right: 12px;
+    font-size: 16px;
+}
+
+.nav-button:hover {
+    background-color: #F5F5F5;
+}
+
+.nav-button#clearButtonNav:hover {
+    color: #F44336;
+}
+
+/* Main Content */
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    left: 0;
+    transition: left 0.3s ease;
+}
+
+.main-content.nav-open {
+    left: 280px;
+}
+
+/* Top Bar */
+.top-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background-color: #2196F3;
+    color: white;
+    height: 60px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+}
+
+.top-bar-left {
+    display: flex;
+    align-items: center;
+}
+
+.menu-button {
+    background-color: transparent;
+    color: white;
+    border: none;
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    margin-right: 16px;
+    font-size: 24px;
+    transition: background-color 0.2s ease;
+}
+
+.menu-button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.top-bar h1 {
+    font-size: 20px;
+    font-weight: 500;
+    margin: 0;
+    color: white;
+}
+
+.top-bar-right {
+    display: flex;
+    align-items: center;
+}
+
+.icon-button {
+    background-color: transparent;
+    color: white;
+    border: none;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.icon-button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Welcome Container with Suggestion Bubbles */
+.welcome-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 24px;
+    text-align: center;
+}
+
+.welcome-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    background-color: #E3F2FD;
+    border-radius: 50%;
+    margin-bottom: 24px;
+    color: #2196F3;
+}
+
+.welcome-logo i {
+    font-size: 32px;
+}
+
+.welcome-header h2 {
+    font-size: 28px;
+    font-weight: 600;
+    color: #212121;
+    margin-bottom: 12px;
+}
+
+.welcome-subtitle {
+    font-size: 16px;
+    color: #757575;
+    margin-bottom: 32px;
+}
+
+.suggestion-bubbles {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    max-width: 500px;
+    width: 100%;
+}
+
+.suggestion-bubble {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    background-color: #F5F5F5;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: left;
+}
+
+.suggestion-bubble i {
+    font-size: 20px;
+    color: #2196F3;
+    margin-right: 16px;
+}
+
+.suggestion-bubble span {
+    font-size: 15px;
+    color: #424242;
+}
+
+.suggestion-bubble:hover {
+    background-color: #E3F2FD;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+}
+
+/* Chat Container */
+.chat-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    background-color: #FAFAFA;
+    height: calc(100% - 60px); /* 60px is the height of top-bar */
+}
+
+/* Chat Window */
+.chat-window {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    scrollbar-width: thin;
+    scrollbar-color: #E0E0E0 #FAFAFA;
+    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS devices */
+}
+
+.chat-window::-webkit-scrollbar {
+    width: 6px;
+}
+
+.chat-window::-webkit-scrollbar-track {
+    background: #FAFAFA;
+}
+
+.chat-window::-webkit-scrollbar-thumb {
+    background-color: #E0E0E0;
+    border-radius: 10px;
+}
+
+/* Input Area */
+.input-area {
+    border-top: 1px solid #EEEEEE;
+    background-color: #FFFFFF;
+}
+
+/* Image Preview Area */
+.image-preview-area {
+    padding: 8px 16px;
+    background-color: #F8F9FA;
+    border-bottom: 1px solid #EEEEEE;
+    max-height: 130px;
+    overflow-y: auto;
+}
+
+.image-preview-area.hidden {
+    display: none;
+}
+
+.image-preview-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    padding: 5px 0;
+}
+
+.image-preview-container {
+    position: relative;
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid #EEEEEE;
+}
+
+.image-preview-container img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+}
+
+.remove-image-button {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.remove-image-button:hover {
+    background-color: rgba(0, 0, 0, 0.7);
+}
+
+/* Message Containers */
+.message-container {
+    display: flex;
+    margin: 12px 0;
+}
+
+.message-container.user {
+    justify-content: flex-end;
+}
+
+.message-container.bot {
+    justify-content: flex-start;
+}
+
+/* Message Bubbles */
+.message-bubble {
+    max-width: 80%;
+    padding: 14px 18px;
+    border-radius: 18px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    word-wrap: break-word;
+}
+
+.message-container.user .message-bubble {
+    background-color: #E3F2FD;
+    border-top-right-radius: 4px;
+}
+
+.message-container.bot .message-bubble {
+    background-color: #FFFFFF;
+    border-top-left-radius: 4px;
+    border: 1px solid #EEEEEE;
+}
+
+/* Message Text and Images */
+.message-bubble p {
+    margin: 0;
+    line-height: 1.5;
+    font-size: 15px;
+}
+
+.message-bubble .image-container {
+    margin-bottom: 8px;
+}
+
+.message-bubble .chat-image {
+    max-width: 100%;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    max-height: 300px;
+    object-fit: contain;
+}
+
+/* Markdown Styling */
+.message-bubble ul, 
+.message-bubble ol {
+    margin-left: 20px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+
+.message-bubble li {
+    margin-bottom: 4px;
+}
+
+.message-bubble h1, 
+.message-bubble h2, 
+.message-bubble h3, 
+.message-bubble h4 {
+    margin-top: 16px;
+    margin-bottom: 8px;
+    font-weight: 600;
+}
+
+.message-bubble code {
+    background-color: #F5F5F5;
+    padding: 2px 4px;
+    border-radius: 4px;
+    font-family: 'Courier New', monospace;
+    font-size: 14px;
+    color: #E91E63;
+}
+
+.message-bubble pre {
+    background-color: #F5F5F5;
+    padding: 12px;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 8px 0;
+    border: 1px solid #EEEEEE;
+}
+
+.message-bubble pre code {
+    background-color: transparent;
+    padding: 0;
+    color: inherit;
+    display: block;
+}
+
+.message-bubble a {
+    color: #2196F3;
+    text-decoration: none;
+}
+
+.message-bubble a:hover {
+    text-decoration: underline;
+}
+
+.message-bubble table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 8px 0;
+}
+
+.message-bubble th, 
+.message-bubble td {
+    border: 1px solid #EEEEEE;
+    padding: 8px;
+    text-align: left;
+}
+
+.message-bubble th {
+    background-color: #F5F5F5;
+}
+
+/* Error Message */
+.message-container.error .message-bubble {
+    background-color: #FFEBEE;
+}
+
+.retry-button {
+    display: inline-block;
+    margin-top: 8px;
+    padding: 6px 12px;
+    background-color: #F44336;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.retry-button:hover {
+    background-color: #D32F2F;
+}
+
+/* Loading Animation */
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 60px;
+}
+
+.dot-typing {
+    position: relative;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #9E9E9E;
+    color: #9E9E9E;
+    animation: dotTyping 1.5s infinite linear;
+}
+
+.dot-typing::before,
+.dot-typing::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #9E9E9E;
+    color: #9E9E9E;
+}
+
+.dot-typing::before {
+    left: -12px;
+    animation: dotTypingBefore 1.5s infinite linear;
+}
+
+.dot-typing::after {
+    left: 12px;
+    animation: dotTypingAfter 1.5s infinite linear;
+}
+
+@keyframes dotTyping {
+    0% { transform: scale(1); opacity: 0.6; }
+    25% { transform: scale(1.3); opacity: 1; }
+    50% { transform: scale(1); opacity: 0.6; }
+    100% { transform: scale(1); opacity: 0.6; }
+}
+
+@keyframes dotTypingBefore {
+    0% { transform: scale(1); opacity: 0.6; }
+    25% { transform: scale(1); opacity: 0.6; }
+    50% { transform: scale(1.3); opacity: 1; }
+    100% { transform: scale(1); opacity: 0.6; }
+}
+
+@keyframes dotTypingAfter {
+    0% { transform: scale(1); opacity: 0.6; }
+    25% { transform: scale(1); opacity: 0.6; }
+    50% { transform: scale(1); opacity: 0.6; }
+    75% { transform: scale(1.3); opacity: 1; }
+    100% { transform: scale(1); opacity: 0.6; }
+}
+
+/* Input Bar */
+.input-bar {
+    padding: 16px;
+    display: flex;
+    align-items: flex-end;
+    background-color: #FFFFFF;
+}
+
+.upload-button {
+    background-color: transparent;
+    color: #616161;
+    border: none;
+    border-radius: 50%;
+    width: 42px;
+    height: 42px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-right: 8px;
+}
+
+.upload-button:hover {
+    background-color: #F5F5F5;
+    color: #2196F3;
+}
+
+.input-container {
+    flex: 1;
+    display: flex;
+    align-items: flex-end;
+    background-color: #F5F5F5;
+    border-radius: 24px;
+    padding: 10px 16px;
+    transition: box-shadow 0.3s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.input-container:focus-within {
+    box-shadow: 0 0 0 2px #42A5F5;
+}
+
+/* Text Area */
+#userInput {
+    flex: 1;
+    border: none;
+    background: transparent;
+    padding: 8px 0;
+    max-height: 120px;
+    resize: none;
+    font-family: inherit;
+    font-size: 15px;
+    outline: none;
+}
+
+/* Send Button */
+.send-button {
+    background-color: #2196F3;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-left: 8px;
+}
+
+.send-button:hover {
+    background-color: #1976D2;
+    transform: scale(1.05);
+}
+
+.send-button:disabled {
+    background-color: #BDBDBD;
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* Overlay when side nav is open on mobile */
+.overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+}
+
+.overlay.active {
+    display: block;
+}
+
+/* Responsive adjustments */
+@media (min-width: 992px) {
+    /* For larger screens */
+    .side-nav {
+        position: relative;
+        left: 0;
+        width: 280px;
+        flex-shrink: 0;
+    }
+    
+    .main-content {
+        width: calc(100% - 280px);
+    }
+    
+    .menu-button {
+        display: none;
+    }
+}
+
+@media (max-width: 991px) {
+    /* For tablets and below */
+    .app-container {
+        flex-direction: column;
+    }
+    
+    .side-nav {
+        width: 280px;
+    }
+}
+
+@media (max-width: 768px) {
+    /* For small tablets and phones */
+    .message-bubble {
+        max-width: 85%;
+    }
+    
+    .suggestion-bubbles {
+        max-width: 100%;
+    }
+    
+    .welcome-logo {
+        width: 56px;
+        height: 56px;
+    }
+    
+    .welcome-logo i {
+        font-size: 28px;
+    }
+    
+    .welcome-header h2 {
+        font-size: 24px;
+    }
+}
+
+@media (max-width: 480px) {
+    /* For mobile phones */
+    .side-nav {
+        width: 85%;
+    }
+    
+    .message-bubble {
+        max-width: 90%;
+    }
+    
+    .chat-window {
+        padding: 12px;
+    }
+    
+    .input-bar {
+        padding: 12px;
+    }
+    
+    .top-bar {
+        padding: 10px 12px;
+        height: 56px;
+        position: sticky;
+        top: 0;
+        z-index: 100;
+    }
+    
+    .top-bar h1 {
+        font-size: 18px;
+    }
+    
+    .welcome-header h2 {
+        font-size: 22px;
+    }
+    
+    .welcome-subtitle {
+        font-size: 14px;
+    }
+    
+    .suggestion-bubble {
+        padding: 12px;
+    }
+    
+    .suggestion-bubble i {
+        font-size: 18px;
+        margin-right: 12px;
+    }
+    
+    .suggestion-bubble span {
+        font-size: 14px;
+    }
+    
+    /* Fix input bar to bottom on mobile */
+    .input-area {
+        position: sticky;
+        bottom: 0;
+        z-index: 100;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
+    }
+    
+    /* Ensure welcome container is scrollable on small screens */
+    .welcome-container {
+        height: auto;
+        min-height: calc(100% - 120px); /* Leave space for input area */
+        overflow-y: auto;
+    }
+}

static/js/chat.js

@@ -0,0 +1,602 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // DOM Elements
+    const chatWindow = document.getElementById('chatWindow');
+    const userInput = document.getElementById('userInput');
+    const sendButton = document.getElementById('sendButton');
+    const clearButton = document.getElementById('clearButton');
+    const clearButtonNav = document.getElementById('clearButtonNav');
+    const imageInput = document.getElementById('imageInput');
+    const uploadImageButton = document.getElementById('uploadImageButton');
+    const imagePreviewArea = document.getElementById('imagePreviewArea');
+    const imagePreviewContainer = document.getElementById('imagePreviewContainer');
+    const chatHistoryList = document.getElementById('chatHistoryList');
+    const saveCurrentChatButton = document.getElementById('saveCurrentChatButton');
+    const settingsButton = document.getElementById('settingsButtonNav');
+    const toggleNavButton = document.getElementById('toggleNavButton');
+    const closeSideNavButton = document.getElementById('closeSideNavButton');
+    const sideNav = document.getElementById('sideNav');
+    const mainContent = document.querySelector('.main-content');
+    const welcomeContainer = document.querySelector('.welcome-container');
+    const suggestionBubbles = document.querySelectorAll('.suggestion-bubble');
+    
+    // Templates
+    const loadingTemplate = document.getElementById('loadingTemplate');
+    const userMessageTemplate = document.getElementById('userMessageTemplate');
+    const userImageMessageTemplate = document.getElementById('userImageMessageTemplate');
+    const botMessageTemplate = document.getElementById('botMessageTemplate');
+    const errorMessageTemplate = document.getElementById('errorMessageTemplate');
+    
+    // State variables
+    let chatHistory = [];
+    let selectedImagesData = []; // Pour stocker plusieurs images
+    let conversationStarted = false;
+    
+    // --- IMAGE HANDLING ---
+    
+    // Upload image button click
+    uploadImageButton.addEventListener('click', function() {
+        imageInput.click();
+    });
+    
+    // Image input change - support for multiple images
+    imageInput.addEventListener('change', function(e) {
+        const files = Array.from(e.target.files);
+        if (!files.length) return;
+        
+        // Clear previous image container
+        imagePreviewContainer.innerHTML = '';
+        selectedImagesData = [];
+        
+        // Process each file
+        files.forEach(file => {
+            // Check file type
+            if (!file.type.startsWith('image/')) {
+                alert('Veuillez sélectionner uniquement des fichiers image valides.');
+                return;
+            }
+            
+            // Check file size (max 5MB)
+            if (file.size > 5 * 1024 * 1024) {
+                alert('La taille de chaque image ne doit pas dépasser 5 Mo.');
+                return;
+            }
+            
+            const reader = new FileReader();
+            reader.onload = function(event) {
+                // Create preview container
+                const previewContainer = document.createElement('div');
+                previewContainer.className = 'image-preview-container';
+                
+                // Create image preview
+                const imgPreview = document.createElement('img');
+                imgPreview.src = event.target.result;
+                imgPreview.alt = 'Image preview';
+                previewContainer.appendChild(imgPreview);
+                
+                // Create remove button
+                const removeBtn = document.createElement('button');
+                removeBtn.className = 'remove-image-button';
+                removeBtn.innerHTML = '<i class="bi bi-x-circle-fill"></i>';
+                previewContainer.appendChild(removeBtn);
+                
+                // Add preview to container
+                imagePreviewContainer.appendChild(previewContainer);
+                
+                // Store image data
+                const imageData = event.target.result;
+                selectedImagesData.push(imageData);
+                
+                // Add event listener to remove button
+                removeBtn.addEventListener('click', () => {
+                    // Remove this specific image
+                    const index = selectedImagesData.indexOf(imageData);
+                    if (index > -1) {
+                        selectedImagesData.splice(index, 1);
+                    }
+                    previewContainer.remove();
+                    
+                    // Hide preview area if no images left
+                    if (selectedImagesData.length === 0) {
+                        imagePreviewArea.classList.add('hidden');
+                        imageInput.value = '';
+                    }
+                });
+            };
+            reader.readAsDataURL(file);
+        });
+        
+        // Show preview area
+        imagePreviewArea.classList.remove('hidden');
+        
+        // Focus on input for caption
+        userInput.focus();
+    });
+    
+    // --- SIDE NAVIGATION HANDLING ---
+    
+    // Toggle side navigation
+    toggleNavButton.addEventListener('click', function() {
+        sideNav.classList.add('active');
+        document.body.insertAdjacentHTML('beforeend', '<div class="overlay" id="navOverlay"></div>');
+        const overlay = document.getElementById('navOverlay');
+        overlay.classList.add('active');
+        loadChatHistoryList();
+        
+        // Close side nav when clicking overlay
+        overlay.addEventListener('click', closeSideNav);
+    });
+    
+    // Close side navigation
+    closeSideNavButton.addEventListener('click', closeSideNav);
+    
+    function closeSideNav() {
+        sideNav.classList.remove('active');
+        const overlay = document.getElementById('navOverlay');
+        if (overlay) {
+            overlay.remove();
+        }
+    }
+    
+    // Clear chat from nav button
+    if (clearButtonNav) {
+        clearButtonNav.addEventListener('click', function() {
+            clearChat(true); // With confirmation
+            closeSideNav();
+        });
+    }
+    
+    // Settings button in side nav
+    if (settingsButtonNav) {
+        settingsButtonNav.addEventListener('click', function() {
+            alert('Fonctionnalité en cours de développement');
+            closeSideNav();
+        });
+    }
+    
+    // Load chat history list
+    function loadChatHistoryList() {
+        fetch('/api/load-chats')
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) {
+                    chatHistoryList.innerHTML = `<div class="empty-state">${data.error}</div>`;
+                    return;
+                }
+                
+                if (!data.chats || data.chats.length === 0) {
+                    chatHistoryList.innerHTML = '<div class="empty-state">Aucune conversation sauvegardée</div>';
+                    return;
+                }
+                
+                // Create history items
+                let historyHTML = '';
+                data.chats.forEach(chat => {
+                    // Format timestamp (YYYYMMDD_HHMMSS to readable format)
+                    const timestamp = chat.timestamp;
+                    const year = timestamp.substring(0, 4);
+                    const month = timestamp.substring(4, 6);
+                    const day = timestamp.substring(6, 8);
+                    const hour = timestamp.substring(9, 11);
+                    const minute = timestamp.substring(11, 13);
+                    const formattedDate = `${day}/${month}/${year} ${hour}:${minute}`;
+                    
+                    historyHTML += `
+                        <div class="chat-history-item" data-filename="${chat.filename}">
+                            <div class="icon"><i class="bi bi-chat-dots"></i></div>
+                            <div class="details">
+                                <div>Conversation</div>
+                                <div class="timestamp">${formattedDate}</div>
+                            </div>
+                        </div>
+                    `;
+                });
+                
+                chatHistoryList.innerHTML = historyHTML;
+                
+                // Add click event to history items
+                const historyItems = chatHistoryList.querySelectorAll('.chat-history-item');
+                historyItems.forEach(item => {
+                    item.addEventListener('click', function() {
+                        const filename = this.getAttribute('data-filename');
+                        loadChatHistory(filename);
+                        toggleHistoryDropdown();
+                    });
+                });
+            })
+            .catch(error => {
+                console.error('Error loading chat history:', error);
+                chatHistoryList.innerHTML = '<div class="empty-state">Erreur lors du chargement de l\'historique</div>';
+            });
+    }
+    
+    // Load specific chat history
+    function loadChatHistory(filename) {
+        fetch(`/api/load-chat/${filename}`)
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) {
+                    alert(data.error);
+                    return;
+                }
+                
+                if (data.history) {
+                    // Clear current chat
+                    clearChat(false); // No confirmation needed
+                    
+                    // Load history
+                    chatHistory = data.history;
+                    
+                    // Display messages
+                    data.history.forEach(msg => {
+                        if (msg.sender === 'user') {
+                            const messageElement = userMessageTemplate.content.cloneNode(true);
+                            messageElement.querySelector('p').textContent = msg.text;
+                            chatWindow.appendChild(messageElement);
+                        } else {
+                            const messageElement = botMessageTemplate.content.cloneNode(true);
+                            const messageParagraph = messageElement.querySelector('p');
+                            
+                            if (window.marked) {
+                                messageParagraph.innerHTML = marked.parse(msg.text);
+                            } else {
+                                messageParagraph.textContent = msg.text;
+                            }
+                            
+                            chatWindow.appendChild(messageElement);
+                            
+                            if (window.Prism) {
+                                const codeBlocks = messageParagraph.querySelectorAll('pre code');
+                                codeBlocks.forEach(block => {
+                                    Prism.highlightElement(block);
+                                });
+                            }
+                        }
+                    });
+                    
+                    // Scroll to bottom
+                    scrollToBottom();
+                }
+            })
+            .catch(error => {
+                console.error('Error loading chat:', error);
+                alert('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.');
+            return;
+        }
+        
+        fetch('/api/save-chat', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                history: chatHistory
+            })
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.error) {
+                alert(data.error);
+            } else {
+                alert('Conversation sauvegardée avec succès !');
+                loadChatHistoryList();
+            }
+        })
+        .catch(error => {
+            console.error('Error saving chat:', error);
+            alert('Erreur lors de la sauvegarde de la conversation.');
+        });
+    });
+    
+    // --- TEXT INPUT HANDLING ---
+    
+    // Auto-resize textarea based on content
+    userInput.addEventListener('input', function() {
+        this.style.height = 'auto';
+        this.style.height = (this.scrollHeight) + 'px';
+        // Reset height if empty
+        if (this.value === '') {
+            this.style.height = '';
+        }
+    });
+    
+    // Send message when Enter key is pressed (without shift)
+    userInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage();
+        }
+    });
+    
+    // Send message when send button is clicked
+    sendButton.addEventListener('click', sendMessage);
+    
+    // Clear chat history when clear button is clicked
+    if (clearButton) {
+        clearButton.addEventListener('click', function() {
+            clearChat(true); // With confirmation
+        });
+    }
+    
+    // --- CHAT FUNCTIONS ---
+    
+    // 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();
+        }
+    }
+    
+    // Function to send message
+    function sendMessage() {
+        const message = userInput.value.trim();
+        
+        // Require either text or images
+        if (message === '' && selectedImagesData.length === 0) return;
+        
+        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
+        } else {
+            // Add user text message to UI
+            addUserMessage(message);
+        }
+        
+        // Clear input field and reset height
+        userInput.value = '';
+        userInput.style.height = '';
+        
+        // Show loading indicator
+        const loadingElement = addLoadingIndicator();
+        
+        // Send message to API
+        sendToAPI(message, loadingElement, selectedImagesData.length > 0 ? selectedImagesData[0] : null);
+        
+        // Clear image previews if any
+        if (selectedImagesData.length > 0) {
+            imagePreviewContainer.innerHTML = '';
+            imagePreviewArea.classList.add('hidden');
+            selectedImagesData = [];
+            imageInput.value = '';
+        }
+    }
+    
+    // Add user message to chat window
+    function addUserMessage(message) {
+        // Hide welcome container if visible (first message)
+        if (!conversationStarted && welcomeContainer) {
+            welcomeContainer.style.display = 'none';
+            conversationStarted = true;
+        }
+        
+        const messageElement = userMessageTemplate.content.cloneNode(true);
+        messageElement.querySelector('p').textContent = message;
+        chatWindow.appendChild(messageElement);
+        
+        // Add to chat history
+        chatHistory.push({
+            sender: 'user',
+            text: message
+        });
+        
+        // Scroll to bottom
+        scrollToBottom();
+    }
+    
+    // Add user message with image to chat window
+    function addUserImageMessage(message, imageData) {
+        // Hide welcome container if visible (first message)
+        if (!conversationStarted && welcomeContainer) {
+            welcomeContainer.style.display = 'none';
+            conversationStarted = true;
+        }
+        
+        const messageElement = userImageMessageTemplate.content.cloneNode(true);
+        
+        // Set image source
+        const imageElement = messageElement.querySelector('.chat-image');
+        imageElement.src = imageData;
+        
+        // Set message text if any
+        const textElement = messageElement.querySelector('p');
+        if (message) {
+            textElement.textContent = message;
+        } else {
+            textElement.style.display = 'none'; // Hide text element if no message
+        }
+        
+        chatWindow.appendChild(messageElement);
+        
+        // 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
+        });
+        
+        // Scroll to bottom
+        scrollToBottom();
+    }
+    
+    // Add bot message to chat window with markdown support
+    function addBotMessage(message) {
+        // Hide welcome container if visible (first message)
+        if (!conversationStarted && welcomeContainer) {
+            welcomeContainer.style.display = 'none';
+            conversationStarted = true;
+        }
+        
+        const messageElement = botMessageTemplate.content.cloneNode(true);
+        const messageParagraph = messageElement.querySelector('p');
+        
+        // Use the marked library to parse Markdown if available
+        if (window.marked) {
+            messageParagraph.innerHTML = marked.parse(message);
+        } else {
+            messageParagraph.textContent = message;
+        }
+        
+        chatWindow.appendChild(messageElement);
+        
+        // Add syntax highlighting to code blocks if Prism is available
+        if (window.Prism) {
+            const codeBlocks = messageParagraph.querySelectorAll('pre code');
+            codeBlocks.forEach(block => {
+                Prism.highlightElement(block);
+            });
+        }
+        
+        // Add to chat history
+        chatHistory.push({
+            sender: 'bot',
+            text: message
+        });
+        
+        // Scroll to bottom
+        scrollToBottom();
+    }
+    
+    // Add loading indicator to chat window
+    function addLoadingIndicator() {
+        const loadingElement = loadingTemplate.content.cloneNode(true);
+        chatWindow.appendChild(loadingElement);
+        
+        // Scroll to bottom
+        scrollToBottom();
+        
+        // Return the loading element so it can be removed later
+        return chatWindow.lastElementChild;
+    }
+    
+    // Add error message to chat window
+    function addErrorMessage(error, retryMessage, retryImage) {
+        const errorElement = errorMessageTemplate.content.cloneNode(true);
+        errorElement.querySelector('p').textContent = error;
+        
+        // Add retry functionality if a message to retry is provided
+        if (retryMessage || retryImage) {
+            const retryButton = errorElement.querySelector('.retry-button');
+            retryButton.addEventListener('click', function() {
+                // Remove the error message
+                this.closest('.message-container').remove();
+                
+                // Show loading indicator
+                const loadingElement = addLoadingIndicator();
+                
+                // Retry sending the message
+                sendToAPI(retryMessage, loadingElement, retryImage);
+            });
+        } else {
+            // Hide retry button if no retry message
+            errorElement.querySelector('.retry-button').style.display = 'none';
+        }
+        
+        chatWindow.appendChild(errorElement);
+        
+        // Scroll to bottom
+        scrollToBottom();
+    }
+    
+    // Send message to API
+    function sendToAPI(message, loadingElement, imageData = null) {
+        // Disable input while processing
+        userInput.disabled = true;
+        sendButton.disabled = true;
+        uploadImageButton.disabled = true;
+        if (clearButton) clearButton.disabled = true;
+        
+        // Prepare request data
+        const requestData = {
+            message: message,
+            history: chatHistory
+        };
+        
+        // Add image data if provided
+        if (imageData) {
+            requestData.image = imageData;
+        }
+        
+        fetch('/api/chat', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(requestData)
+        })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`Server responded with status: ${response.status}`);
+            }
+            return response.json();
+        })
+        .then(data => {
+            // Remove loading indicator
+            if (loadingElement) {
+                loadingElement.remove();
+            }
+            
+            // Check for error
+            if (data.error) {
+                addErrorMessage(data.error, message, imageData);
+            } else {
+                // Add bot response
+                addBotMessage(data.response);
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            
+            // Remove loading indicator
+            if (loadingElement) {
+                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);
+        })
+        .finally(() => {
+            // Re-enable input
+            userInput.disabled = false;
+            sendButton.disabled = false;
+            uploadImageButton.disabled = false;
+            if (clearButton) clearButton.disabled = false;
+            userInput.focus();
+        });
+    }
+    
+    // Scroll chat window to bottom
+    function scrollToBottom() {
+        chatWindow.scrollTop = chatWindow.scrollHeight;
+    }
+    
+    // Setup suggestion bubbles click handlers
+    if (suggestionBubbles) {
+        suggestionBubbles.forEach(bubble => {
+            bubble.addEventListener('click', function() {
+                const prompt = this.getAttribute('data-prompt');
+                if (prompt) {
+                    userInput.value = prompt;
+                    sendMessage();
+                }
+            });
+        });
+    }
+    
+    // Initial focus on input field
+    userInput.focus();
+});

static/uploads/chat_20250502_065334.json

@@ -0,0 +1,10 @@
+[
+  {
+    "sender": "user",
+    "text": "Salut"
+  },
+  {
+    "sender": "bot",
+    "text": "Salut ! Comment puis-je vous aider aujourd'hui ?\n"
+  }
+]

templates/index.html

@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gemini Chat</title>
+    <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">
+    <!-- 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 -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-python.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-javascript.min.js"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <div class="app-container">
+        <!-- Side navigation bar -->
+        <div class="side-nav" id="sideNav">
+            <div class="side-nav-header">
+                <div class="logo">
+                    <i class="bi bi-stars"></i>
+                </div>
+                <h1>Gemini</h1>
+                <button id="closeSideNavButton" class="close-button">
+                    <i class="bi bi-x-lg"></i>
+                </button>
+            </div>
+            
+            <div class="side-nav-section">
+                <div class="section-header">
+                    <h3>Historique</h3>
+                    <button id="saveCurrentChatButton" class="action-button-small" title="Sauvegarder cette conversation">
+                        <i class="bi bi-save"></i>
+                    </button>
+                </div>
+                <div id="chatHistoryList" class="history-list">
+                    <!-- History items will be added here -->
+                    <div class="empty-state">Aucune conversation sauvegardée</div>
+                </div>
+            </div>
+            
+            <div class="side-nav-footer">
+                <button id="clearButtonNav" class="nav-button" title="Effacer la conversation">
+                    <i class="bi bi-trash"></i> Effacer la conversation
+                </button>
+                <button id="settingsButtonNav" class="nav-button" title="Paramètres">
+                    <i class="bi bi-gear"></i> Paramètres
+                </button>
+            </div>
+        </div>
+
+        <!-- Main content -->
+        <div class="main-content">
+            <!-- Top Bar -->
+            <div class="top-bar">
+                <div class="top-bar-left">
+                    <button id="toggleNavButton" class="menu-button" title="Menu">
+                        <i class="bi bi-list"></i>
+                    </button>
+                    <h1>Assistant Gemini</h1>
+                </div>
+                <div class="top-bar-right">
+                    <button class="icon-button" id="clearButton" title="Effacer la conversation">
+                        <i class="bi bi-trash"></i>
+                    </button>
+                </div>
+            </div>
+
+            <div class="chat-container">
+                <div class="chat-window" id="chatWindow">
+                    <!-- Welcome content with suggestion bubbles -->
+                    <div class="welcome-container">
+                        <div class="welcome-header">
+                            <div class="welcome-logo">
+                                <i class="bi bi-stars"></i>
+                            </div>
+                            <h2>Bienvenue sur Gemini</h2>
+                            <p class="welcome-subtitle">Comment puis-je vous aider aujourd'hui ?</p>
+                        </div>
+                        
+                        <div class="suggestion-bubbles">
+                            <div class="suggestion-bubble" data-prompt="Explique-moi comment fonctionne l'intelligence artificielle en termes simples">
+                                <i class="bi bi-lightbulb"></i>
+                                <span>Explique-moi comment fonctionne l'intelligence artificielle</span>
+                            </div>
+                            <div class="suggestion-bubble" data-prompt="Quelles sont les dernières avancées en matière d'énergie renouvelable ?">
+                                <i class="bi bi-wind"></i>
+                                <span>Avancées en énergie renouvelable</span>
+                            </div>
+                            <div class="suggestion-bubble" data-prompt="Donne-moi des idées de recettes rapides pour un dîner équilibré">
+                                <i class="bi bi-egg-fried"></i>
+                                <span>Idées de recettes rapides et équilibrées</span>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Messages will be dynamically inserted here -->
+                </div>
+                <div class="input-area">
+                    <!-- Image preview area -->
+                    <div id="imagePreviewArea" class="image-preview-area hidden">
+                        <div id="imagePreviewContainer" class="image-preview-list">
+                            <!-- Les miniatures d'images seront ajoutées ici dynamiquement -->
+                        </div>
+                    </div>
+                    
+                    <div class="input-bar">
+                        <button id="uploadImageButton" class="upload-button" title="Joindre une image">
+                            <i class="bi bi-image"></i>
+                        </button>
+                        <input type="file" id="imageInput" accept="image/*" multiple hidden>
+                        <div class="input-container">
+                            <textarea id="userInput" placeholder="Écrivez votre message..." rows="1"></textarea>
+                            <button id="sendButton" class="send-button" title="Envoyer">
+                                <i class="bi bi-send"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Loading indicator template -->
+    <template id="loadingTemplate">
+        <div class="message-container bot">
+            <div class="message-bubble loading">
+                <div class="dot-typing"></div>
+            </div>
+        </div>
+    </template>
+
+    <!-- User message template -->
+    <template id="userMessageTemplate">
+        <div class="message-container user">
+            <div class="message-bubble">
+                <p></p>
+            </div>
+        </div>
+    </template>
+
+    <!-- User message with image template -->
+    <template id="userImageMessageTemplate">
+        <div class="message-container user">
+            <div class="message-bubble">
+                <div class="image-container">
+                    <img src="" alt="Uploaded image" class="chat-image">
+                </div>
+                <p></p>
+            </div>
+        </div>
+    </template>
+
+    <!-- Bot message template -->
+    <template id="botMessageTemplate">
+        <div class="message-container bot">
+            <div class="message-bubble">
+                <p></p>
+            </div>
+        </div>
+    </template>
+
+    <!-- Error message template -->
+    <template id="errorMessageTemplate">
+        <div class="message-container bot error">
+            <div class="message-bubble">
+                <p></p>
+                <button class="retry-button">Réessayer</button>
+            </div>
+        </div>
+    </template>
+
+    <script src="{{ url_for('static', filename='js/chat.js') }}"></script>
+</body>
+</html>