Chatm2

Sleeping

App Files Files Community

Docfile commited on Aug 27

Commit

f6160ea

verified ·

1 Parent(s): 886c92a

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +448 -653

templates/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Chatbot Gemini Avancé</title>
     <style>
         * {
             margin: 0;
@@ -14,219 +14,169 @@
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            height: 100vh;
-            overflow: hidden;
         }
-        .container {
-            display: flex;
-            height: 100vh;
-            max-width: 1400px;
-            margin: 0 auto;
             background: rgba(255, 255, 255, 0.95);
-            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
-            backdrop-filter: blur(8px);
         }
-        .sidebar {
-            width: 300px;
-            background: rgba(255, 255, 255, 0.1);
-            border-right: 1px solid rgba(255, 255, 255, 0.2);
             padding: 20px;
-            overflow-y: auto;
-        }
-        .sidebar h2 {
-            color: #333;
-            margin-bottom: 20px;
-            font-size: 1.3em;
             text-align: center;
         }
-        .control-group {
-            margin-bottom: 20px;
-            padding: 15px;
-            background: rgba(255, 255, 255, 0.8);
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-        }
-        .control-group h3 {
-            color: #444;
             margin-bottom: 10px;
-            font-size: 1em;
-            border-bottom: 2px solid #667eea;
-            padding-bottom: 5px;
         }
-        .form-group {
-            margin-bottom: 15px;
         }
-        label {
-            display: block;
-            margin-bottom: 5px;
-            font-weight: 500;
-            color: #555;
         }
-        select, input[type="file"] {
-            width: 100%;
-            padding: 8px;
-            border: 2px solid #ddd;
-            border-radius: 5px;
-            font-size: 14px;
-            transition: border-color 0.3s;
         }
-        select:focus, input[type="file"]:focus {
-            border-color: #667eea;
-            outline: none;
         }
-        .checkbox-group {
-            display: flex;
-            align-items: center;
-            margin-bottom: 10px;
         }
-        .checkbox-group input[type="checkbox"] {
-            margin-right: 8px;
-            transform: scale(1.2);
         }
-        .checkbox-group label {
-            margin-bottom: 0;
-            cursor: pointer;
         }
-        .btn {
-            background: linear-gradient(45deg, #667eea, #764ba2);
             color: white;
-            border: none;
-            padding: 10px 15px;
-            border-radius: 5px;
             cursor: pointer;
             font-size: 14px;
-            transition: transform 0.2s, box-shadow 0.2s;
-            width: 100%;
         }
-        .btn:hover {
             transform: translateY(-2px);
-            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
-        }
-        .btn-danger {
-            background: linear-gradient(45deg, #ff6b6b, #ee5a52);
-        }
-        .btn-danger:hover {
-            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
-        }
-        .main-content {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            height: 100vh;
-        }
-        .chat-header {
-            background: rgba(255, 255, 255, 0.9);
-            padding: 20px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-            text-align: center;
         }
-        .chat-header h1 {
-            color: #333;
-            font-size: 1.5em;
-            margin-bottom: 5px;
-        }
-        .chat-status {
-            color: #666;
-            font-size: 0.9em;
-        }
-        .chat-container {
             flex: 1;
             overflow-y: auto;
             padding: 20px;
-            background: rgba(255, 255, 255, 0.05);
-        }
-        .message {
-            margin-bottom: 20px;
             display: flex;
-            animation: slideIn 0.3s ease-out;
-        }
-        @keyframes slideIn {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        .message.user {
-            justify-content: flex-end;
         }
-        .message-content {
-            max-width: 70%;
             padding: 15px 20px;
             border-radius: 18px;
-            position: relative;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         }
-        .message.user .message-content {
-            background: linear-gradient(135deg, #667eea, #764ba2);
             color: white;
-            border-bottom-right-radius: 5px;
         }
-        .message.assistant .message-content {
-            background: rgba(255, 255, 255, 0.9);
             color: #333;
-            border-bottom-left-radius: 5px;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-        }
-        .message-time {
-            font-size: 0.8em;
-            opacity: 0.7;
-            margin-top: 5px;
         }
-        .thinking-section {
-            background: rgba(255, 235, 59, 0.1);
-            border: 1px solid rgba(255, 235, 59, 0.3);
             border-radius: 10px;
-            padding: 10px;
-            margin-bottom: 10px;
             font-style: italic;
-            color: #666;
         }
-        .thinking-section::before {
-            content: "🤔 Réflexion du modèle:";
-            font-weight: bold;
-            color: #f57f17;
-            display: block;
-            margin-bottom: 5px;
         }
         .input-container {
             padding: 20px;
-            background: rgba(255, 255, 255, 0.9);
-            border-top: 1px solid rgba(255, 255, 255, 0.2);
         }
         .input-row {
@@ -235,282 +185,235 @@
             align-items: flex-end;
         }
-        .message-input {
             flex: 1;
-            padding: 12px 15px;
-            border: 2px solid #ddd;
             border-radius: 25px;
             font-size: 16px;
             resize: none;
-            min-height: 50px;
-            max-height: 120px;
-            transition: border-color 0.3s;
         }
         .message-input:focus {
             border-color: #667eea;
-            outline: none;
         }
-        .send-btn {
-            background: linear-gradient(45deg, #667eea, #764ba2);
-            color: white;
             border: none;
             border-radius: 50%;
-            width: 50px;
-            height: 50px;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
-            transition: transform 0.2s, box-shadow 0.2s;
         }
-        .send-btn:hover:not(:disabled) {
-            transform: scale(1.1);
-            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
         }
-        .send-btn:disabled {
             background: #ccc;
             cursor: not-allowed;
         }
-        .file-upload-area {
-            margin-bottom: 10px;
-            padding: 10px;
-            border: 2px dashed #ddd;
-            border-radius: 10px;
-            text-align: center;
-            transition: border-color 0.3s;
         }
-        .file-upload-area.dragover {
-            border-color: #667eea;
-            background: rgba(102, 126, 234, 0.1);
         }
-        .uploaded-file {
-            background: rgba(102, 126, 234, 0.1);
-            border: 1px solid #667eea;
-            border-radius: 5px;
-            padding: 5px 10px;
-            margin: 5px 0;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
         }
-        .remove-file {
-            background: #ff6b6b;
-            color: white;
-            border: none;
-            border-radius: 50%;
-            width: 20px;
-            height: 20px;
-            cursor: pointer;
-            font-size: 12px;
         }
         .typing-indicator {
             display: none;
-            padding: 10px 20px;
-            background: rgba(255, 255, 255, 0.9);
-            border-radius: 18px;
-            margin-bottom: 20px;
-            width: fit-content;
-        }
-        .typing-indicator.show {
-            display: block;
-            animation: slideIn 0.3s ease-out;
         }
         .typing-dots {
             display: flex;
-            gap: 4px;
         }
         .typing-dots span {
             width: 8px;
             height: 8px;
-            background: #667eea;
             border-radius: 50%;
-            animation: typing 1.4s infinite;
         }
-        .typing-dots span:nth-child(2) {
-            animation-delay: 0.2s;
-        }
-        .typing-dots span:nth-child(3) {
-            animation-delay: 0.4s;
         }
-        @keyframes typing {
-            0%, 60%, 100% {
-                transform: translateY(0);
-                opacity: 0.4;
-            }
-            30% {
-                transform: translateY(-10px);
-                opacity: 1;
-            }
         }
-        .error-message {
-            background: #ffebee;
-            color: #c62828;
-            border: 1px solid #ffcdd2;
-            border-radius: 5px;
-            padding: 10px;
             margin: 10px 0;
         }
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            .container {
-                flex-direction: column;
-            }
-            .sidebar {
-                width: 100%;
-                height: auto;
-                max-height: 40vh;
-                order: 2;
-            }
-            .main-content {
-                order: 1;
-                height: 60vh;
-            }
-            .message-content {
-                max-width: 85%;
-            }
         }
-        /* Code styling */
-        pre {
-            background: #f5f5f5;
-            border-radius: 5px;
-            padding: 10px;
-            overflow-x: auto;
-            margin: 10px 0;
         }
-        code {
-            background: #f5f5f5;
-            padding: 2px 4px;
-            border-radius: 3px;
-            font-family: 'Courier New', monospace;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <!-- Sidebar -->
-        <div class="sidebar">
-            <h2>🤖 Configuration</h2>
-            <!-- Modèle -->
-            <div class="control-group">
-                <h3>Modèle</h3>
-                <div class="form-group">
-                    <label for="model-select">Modèle Gemini:</label>
-                    <select id="model-select">
-                        {% for name, value in models.items() %}
-                        <option value="{{ value }}" {% if name == "Gemini 2.5 Flash" %}selected{% endif %}>{{ name }}</option>
-                        {% endfor %}
-                    </select>
-                </div>
-            </div>
-            <!-- Thinking Options -->
-            <div class="control-group">
-                <h3>🧠 Options de Réflexion</h3>
-                <div class="checkbox-group">
-                    <input type="checkbox" id="thinking-enabled" checked>
-                    <label for="thinking-enabled">Activer le raisonnement</label>
-                </div>
-                <div class="checkbox-group">
-                    <input type="checkbox" id="include-thoughts">
-                    <label for="include-thoughts">Afficher les pensées</label>
                 </div>
-                <p style="font-size: 0.8em; color: #666; margin-top: 5px;">
-                    🔧 Tous les outils avancés sont actifs par défaut:<br>
-                    • Exécution de code<br>
-                    • Recherche Google<br>
-                    • Contexte URL
-                </p>
-            </div>
-            <!-- File Upload -->
-            <div class="control-group">
-                <h3>📁 Upload de fichier</h3>
-                <div class="file-upload-area" id="file-upload-area">
-                    <p>Glissez un fichier ici ou cliquez pour sélectionner</p>
-                    <input type="file" id="file-input" style="display: none;" accept=".png,.jpg,.jpeg,.pdf,.mp4,.mov,.txt,.csv,.json">
-                </div>
-                <div id="uploaded-files"></div>
-            </div>
-            <!-- Actions -->
-            <div class="control-group">
-                <h3>Actions</h3>
-                <button class="btn btn-danger" onclick="resetChat()">🗑️ Réinitialiser</button>
             </div>
         </div>
-        <!-- Main Content -->
-        <div class="main-content">
-            <!-- Header -->
-            <div class="chat-header">
-                <h1>💬 Chatbot Gemini Avancé</h1>
-                <div class="chat-status" id="chat-status">Prêt à discuter</div>
-            </div>
-            <!-- Chat Container -->
-            <div class="chat-container" id="chat-container">
-                <div class="message assistant">
-                    <div class="message-content">
-                        <div>👋 Bonjour ! Je suis votre assistant Gemini avec toutes les fonctionnalités avancées activées :</div>
-                        <div style="margin-top: 10px;">
-                            ✅ <strong>Exécution de code Python</strong><br>
-                            ✅ <strong>Recherche Google en temps réel</strong><br>
-                            ✅ <strong>Analyse d'URLs</strong><br>
-                            ✅ <strong>Traitement de fichiers (images, PDF, vidéos, textes)</strong><br>
-                            ✅ <strong>Raisonnement avancé avec Thinking</strong>
-                        </div>
-                        <div style="margin-top: 10px; font-style: italic;">
-                            Comment puis-je vous aider aujourd'hui ?
-                        </div>
-                        <div class="message-time">Just now</div>
-                    </div>
-                </div>
             </div>
-            <!-- Typing Indicator -->
-            <div class="typing-indicator" id="typing-indicator">
-                <div class="typing-dots">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                </div>
             </div>
-            <!-- Input Area -->
-            <div class="input-container">
-                <div class="input-row">
                     <textarea
-                        id="message-input"
                         class="message-input"
-                        placeholder="Tapez votre message... (Shift+Entrée pour nouvelle ligne)"
-                        rows="1"></textarea>
-                    <button id="send-btn" class="send-btn">
-                        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
-                        </svg>
                     </button>
                 </div>
             </div>
@@ -518,356 +421,248 @@
     </div>
     <script>
-        // Variables globales
         let currentFile = null;
-        let isWaitingResponse = false;
-        // Éléments DOM
-        const chatContainer = document.getElementById('chat-container');
-        const messageInput = document.getElementById('message-input');
-        const sendBtn = document.getElementById('send-btn');
-        const typingIndicator = document.getElementById('typing-indicator');
-        const fileInput = document.getElementById('file-input');
-        const fileUploadArea = document.getElementById('file-upload-area');
-        const uploadedFilesDiv = document.getElementById('uploaded-files');
-        const chatStatus = document.getElementById('chat-status');
-        // Configuration du drag & drop
-        fileUploadArea.addEventListener('click', () => fileInput.click());
-        fileUploadArea.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            fileUploadArea.classList.add('dragover');
-        });
-        fileUploadArea.addEventListener('dragleave', () => {
-            fileUploadArea.classList.remove('dragover');
-        });
-        fileUploadArea.addEventListener('drop', (e) => {
-            e.preventDefault();
-            fileUploadArea.classList.remove('dragover');
-            const files = e.dataTransfer.files;
-            if (files.length > 0) {
-                handleFileUpload(files[0]);
-            }
-        });
-        // Configuration de l'input file
-        fileInput.addEventListener('change', (e) => {
-            if (e.target.files.length > 0) {
-                handleFileUpload(e.target.files[0]);
-            }
-        });
-        // Auto-resize textarea
-        messageInput.addEventListener('input', function() {
-            this.style.height = 'auto';
-            this.style.height = Math.min(this.scrollHeight, 120) + 'px';
-        });
-        // Gestion des touches
-        messageInput.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
                 sendMessage();
             }
-        });
-        // Bouton d'envoi
-        sendBtn.addEventListener('click', sendMessage);
-        // Fonctions utilitaires
-        function formatTime() {
-            return new Date().toLocaleTimeString('fr-FR', {
-                hour: '2-digit',
-                minute: '2-digit'
-            });
-        }
-        function scrollToBottom() {
-            chatContainer.scrollTop = chatContainer.scrollHeight;
-        }
-        function showTyping() {
-            typingIndicator.classList.add('show');
-            scrollToBottom();
         }
-        function hideTyping() {
-            typingIndicator.classList.remove('show');
-        }
-        function updateChatStatus(status) {
-            chatStatus.textContent = status;
-        }
-        // Gestion de l'upload de fichiers
-        async function handleFileUpload(file) {
             const formData = new FormData();
             formData.append('file', file);
-            try {
-                updateChatStatus('Upload du fichier...');
-                const response = await fetch('/upload_file', {
-                    method: 'POST',
-                    body: formData
-                });
-                const result = await response.json();
-                if (result.success) {
-                    currentFile = {
-                        id: result.file_id,
-                        name: result.filename,
-                        type: result.mime_type
-                    };
-                    displayUploadedFile(result.filename, result.mime_type);
-                    updateChatStatus('Fichier uploadé avec succès');
                 } else {
-                    showError('Erreur lors de l\'upload: ' + result.error);
-                    updateChatStatus('Erreur d\'upload');
                 }
-            } catch (error) {
-                console.error('Erreur upload:', error);
-                showError('Erreur lors de l\'upload du fichier');
-                updateChatStatus('Erreur d\'upload');
-            }
-        }
-        function displayUploadedFile(filename, mimeType) {
-            const fileIcon = getFileIcon(mimeType);
-            uploadedFilesDiv.innerHTML = `
-                <div class="uploaded-file">
-                    <span>${fileIcon} ${filename}</span>
-                    <button class="remove-file" onclick="removeFile()">×</button>
-                </div>
-            `;
-        }
-        function getFileIcon(mimeType) {
-            if (mimeType.startsWith('image/')) return '🖼️';
-            if (mimeType === 'application/pdf') return '📄';
-            if (mimeType.startsWith('video/')) return '🎥';
-            if (mimeType.includes('text')) return '📝';
-            return '📎';
         }
         function removeFile() {
             currentFile = null;
-            uploadedFilesDiv.innerHTML = '';
-            fileInput.value = '';
-            updateChatStatus('Fichier retiré');
         }
-        // Gestion des messages
-        function addMessage(content, isUser, hasThoughts = false, thoughtsContent = '') {
-            const messageDiv = document.createElement('div');
-            messageDiv.className = `message ${isUser ? 'user' : 'assistant'}`;
-            let messageHTML = `
-                <div class="message-content">
-                    ${hasThoughts ? `<div class="thinking-section">${thoughtsContent}</div>` : ''}
-                    <div>${formatMessage(content)}</div>
-                    <div class="message-time">${formatTime()}</div>
-                </div>
-            `;
-            messageDiv.innerHTML = messageHTML;
-            chatContainer.appendChild(messageDiv);
-            scrollToBottom();
-            return messageDiv;
-        }
-        function formatMessage(content) {
-            // Conversion basique markdown vers HTML
-            return content
-                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-                .replace(/\*(.*?)\*/g, '<em>$1</em>')
-                .replace(/`([^`]+)`/g, '<code>$1</code>')
-                .replace(/```([^```]+)```/g, '<pre><code>$1</code></pre>')
-                .replace(/\n/g, '<br>');
-        }
-        function showError(message) {
-            const errorDiv = document.createElement('div');
-            errorDiv.className = 'error-message';
-            errorDiv.textContent = message;
-            chatContainer.appendChild(errorDiv);
-            scrollToBottom();
-            setTimeout(() => {
-                errorDiv.remove();
-            }, 5000);
-        }
-        // Envoi de messages
-        async function sendMessage() {
-            if (isWaitingResponse) return;
-            const message = messageInput.value.trim();
-            if (!message) return;
-            const model = document.getElementById('model-select').value;
-            const thinkingEnabled = document.getElementById('thinking-enabled').checked;
-            const includeThoughts = document.getElementById('include-thoughts').checked;
-            // Afficher le message de l'utilisateur
-            addMessage(message, true);
-            // Nettoyer l'input
             messageInput.value = '';
             messageInput.style.height = 'auto';
-            // Désactiver l'envoi
-            isWaitingResponse = true;
-            sendBtn.disabled = true;
-            showTyping();
-            updateChatStatus('Génération de la réponse...');
-            try {
-                const endpoint = currentFile ? '/send_message_with_file' : '/send_message';
-                const requestBody = {
-                    message: message,
-                    model: model,
-                    thinking_enabled: thinkingEnabled,
-                    include_thoughts: includeThoughts
-                };
-                if (currentFile) {
-                    requestBody.file_id = currentFile.id;
-                }
-                const response = await fetch(endpoint, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(requestBody)
-                });
                 if (!response.ok) {
-                    throw new Error('Erreur de réseau');
                 }
                 const reader = response.body.getReader();
                 const decoder = new TextDecoder();
-                let assistantMessage = null;
-                let fullResponse = '';
-                let thoughtsContent = '';
-                hideTyping();
-                while (true) {
-                    const { done, value } = await reader.read();
-                    if (done) break;
-                    const chunk = decoder.decode(value);
-                    const lines = chunk.split('\n');
-                    for (const line of lines) {
-                        if (line.startsWith('data: ')) {
-                            try {
-                                const data = JSON.parse(line.slice(6));
-                                if (data.error) {
-                                    showError(data.error);
-                                    break;
-                                }
-                                if (data.type === 'thought') {
-                                    thoughtsContent += data.content;
-                                } else if (data.type === 'text') {
-                                    if (!assistantMessage) {
-                                        assistantMessage = addMessage('', false, includeThoughts, thoughtsContent);
-                                    }
-                                    fullResponse += data.content;
-                                    // Mettre à jour le contenu du message
-                                    const messageContent = assistantMessage.querySelector('.message-content > div:last-child');
-                                    if (messageContent) {
-                                        messageContent.innerHTML = formatMessage(fullResponse) + '<div class="message-time">' + formatTime() + '</div>';
                                     }
-                                    scrollToBottom();
-                                } else if (data.type === 'end') {
-                                    // Message terminé
-                                    updateChatStatus('Prêt à discuter');
                                 }
-                            } catch (e) {
-                                console.error('Erreur parsing JSON:', e);
                             }
                         }
-                    }
-                }
-                // Nettoyer le fichier après envoi
-                if (currentFile) {
-                    removeFile();
                 }
-            } catch (error) {
-                console.error('Erreur:', error);
-                hideTyping();
-                showError('Erreur lors de l\'envoi du message: ' + error.message);
-                updateChatStatus('Erreur de communication');
-            } finally {
-                isWaitingResponse = false;
-                sendBtn.disabled = false;
-            }
         }
-        // Reset du chat
-        async function resetChat() {
-            if (!confirm('Êtes-vous sûr de vouloir réinitialiser la conversation ?')) {
-                return;
-            }
-            try {
-                const response = await fetch('/reset_chat', {
                     method: 'POST',
                     headers: {
-                        'Content-Type': 'application/json',
-                    }
-                });
-                const result = await response.json();
-                if (result.success) {
-                    // Nettoyer l'interface
-                    chatContainer.innerHTML = `
                         <div class="message assistant">
-                            <div class="message-content">
-                                <div>👋 Nouvelle conversation démarrée ! Toutes les fonctionnalités avancées sont toujours actives.</div>
-                                <div class="message-time">${formatTime()}</div>
-                            </div>
                         </div>
                     `;
                     removeFile();
-                    updateChatStatus('Conversation réinitialisée');
-                } else {
-                    showError('Erreur lors de la réinitialisation');
-                }
-            } catch (error) {
-                console.error('Erreur reset:', error);
-                showError('Erreur lors de la réinitialisation');
             }
         }
-        // Initialisation
         document.addEventListener('DOMContentLoaded', function() {
-            updateChatStatus('Prêt à discuter');
-            messageInput.focus();
-        });
-        // Gestion de la reconnexion
-        window.addEventListener('online', () => {
-            updateChatStatus('Reconnecté');
-        });
-        window.addEventListener('offline', () => {
-            updateChatStatus('Hors ligne');
         });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gemini AI Assistant</title>
     <style>
         * {
             margin: 0;
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
         }
+        .chat-container {
+            width: 100%;
+            max-width: 800px;
+            height: 90vh;
             background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            backdrop-filter: blur(10px);
         }
+        .header {
+            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            color: white;
             padding: 20px;
             text-align: center;
+            position: relative;
         }
+        .header h1 {
+            font-size: 24px;
+            font-weight: 600;
             margin-bottom: 10px;
         }
+        .controls {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 20px;
+            margin-top: 10px;
         }
+        .thinking-toggle {
+            display: flex;
+            align-items: center;
+            gap: 10px;
         }
+        .switch {
+            position: relative;
+            display: inline-block;
+            width: 60px;
+            height: 34px;
         }
+        .switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
         }
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(255, 255, 255, 0.3);
+            transition: .4s;
+            border-radius: 34px;
+        }
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 26px;
+            width: 26px;
+            left: 4px;
+            bottom: 4px;
+            background-color: white;
+            transition: .4s;
+            border-radius: 50%;
         }
+        input:checked + .slider {
+            background-color: rgba(255, 255, 255, 0.5);
         }
+        input:checked + .slider:before {
+            transform: translateX(26px);
         }
+        .btn-reset {
+            background: rgba(255, 255, 255, 0.2);
+            border: 2px solid white;
             color: white;
+            padding: 8px 16px;
+            border-radius: 20px;
             cursor: pointer;
             font-size: 14px;
+            transition: all 0.3s ease;
         }
+        .btn-reset:hover {
+            background: rgba(255, 255, 255, 0.3);
             transform: translateY(-2px);
         }
+        .messages {
             flex: 1;
             overflow-y: auto;
             padding: 20px;
             display: flex;
+            flex-direction: column;
+            gap: 15px;
         }
+        .message {
+            max-width: 80%;
             padding: 15px 20px;
             border-radius: 18px;
+            font-size: 16px;
+            line-height: 1.5;
+            animation: fadeIn 0.3s ease;
         }
+        .message.user {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
+            align-self: flex-end;
+            margin-left: auto;
         }
+        .message.assistant {
+            background: #f8f9fa;
             color: #333;
+            align-self: flex-start;
+            border: 1px solid #e9ecef;
         }
+        .thoughts {
+            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+            color: #8b4513;
+            border-left: 4px solid #ff9a56;
+            margin: 10px 0;
+            padding: 15px;
             border-radius: 10px;
             font-style: italic;
         }
+        .thoughts-header {
+            font-weight: 600;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
         .input-container {
             padding: 20px;
+            background: #f8f9fa;
+            border-top: 1px solid #e9ecef;
         }
         .input-row {
             align-items: flex-end;
         }
+        .input-wrapper {
             flex: 1;
+            position: relative;
+        }
+        .message-input {
+            width: 100%;
+            min-height: 50px;
+            padding: 15px 60px 15px 20px;
+            border: 2px solid #e9ecef;
             border-radius: 25px;
             font-size: 16px;
             resize: none;
+            outline: none;
+            transition: all 0.3s ease;
+            font-family: inherit;
         }
         .message-input:focus {
             border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
         }
+        .send-button {
+            position: absolute;
+            right: 5px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             border: none;
             border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            color: white;
             cursor: pointer;
+            transition: all 0.3s ease;
             display: flex;
             align-items: center;
             justify-content: center;
         }
+        .send-button:hover:not(:disabled) {
+            transform: translateY(-50%) scale(1.1);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
         }
+        .send-button:disabled {
             background: #ccc;
             cursor: not-allowed;
         }
+        .file-input {
+            display: none;
         }
+        .file-button {
+            background: #28a745;
+            border: none;
+            color: white;
+            padding: 12px 20px;
+            border-radius: 25px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: all 0.3s ease;
         }
+        .file-button:hover {
+            background: #218838;
+            transform: translateY(-2px);
         }
+        .file-preview {
+            margin-top: 10px;
+            padding: 10px;
+            background: #e3f2fd;
+            border-radius: 10px;
+            display: none;
         }
         .typing-indicator {
             display: none;
+            align-items: center;
+            gap: 5px;
+            color: #666;
+            font-style: italic;
         }
         .typing-dots {
             display: flex;
+            gap: 3px;
         }
         .typing-dots span {
             width: 8px;
             height: 8px;
             border-radius: 50%;
+            background: #666;
+            animation: typing 1.4s infinite ease-in-out;
         }
+        .typing-dots span:nth-child(1) { animation-delay: 0s; }
+        .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
+        .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
+        @keyframes typing {
+            0%, 60%, 100% { transform: scale(0.8); opacity: 0.5; }
+            30% { transform: scale(1.2); opacity: 1; }
         }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
         }
+        .error {
+            background: #f8d7da;
+            color: #721c24;
+            border: 1px solid #f5c6cb;
+            padding: 15px;
+            border-radius: 10px;
             margin: 10px 0;
         }
+        .success {
+            background: #d4edda;
+            color: #155724;
+            border: 1px solid #c3e6cb;
+            padding: 15px;
+            border-radius: 10px;
+            margin: 10px 0;
+        }
+        /* Scrollbar styling */
+        .messages::-webkit-scrollbar {
+            width: 8px;
+        }
+        .messages::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 4px;
+        }
+        .messages::-webkit-scrollbar-thumb {
+            background: #c1c1c1;
+            border-radius: 4px;
         }
+        .messages::-webkit-scrollbar-thumb:hover {
+            background: #a8a8a8;
         }
+        /* Responsive */
+        @media (max-width: 768px) {
+            .chat-container {
+                height: 100vh;
+                border-radius: 0;
+            }
+            .message {
+                max-width: 90%;
+            }
+            .controls {
+                flex-direction: column;
+                gap: 10px;
+            }
         }
     </style>
 </head>
 <body>
+    <div class="chat-container">
+        <div class="header">
+            <h1>🤖 Gemini AI Assistant</h1>
+            <p>Assistant IA avancé avec outils intégrés</p>
+            <div class="controls">
+                <div class="thinking-toggle">
+                    <span>Thinking Mode:</span>
+                    <label class="switch">
+                        <input type="checkbox" id="thinkingToggle" checked>
+                        <span class="slider"></span>
+                    </label>
                 </div>
+                <button class="btn-reset" onclick="resetConversation()">
+                    🔄 Reset
+                </button>
             </div>
         </div>
+        <div class="messages" id="messages">
+            <div class="message assistant">
+                <div>👋 Bonjour ! Je suis votre assistant IA Gemini. Je peux :</div>
+                <ul style="margin-top: 10px; padding-left: 20px;">
+                    <li>💻 Exécuter du code Python</li>
+                    <li>🔍 Rechercher des informations sur Google</li>
+                    <li>📄 Analyser vos fichiers (images, PDF, vidéos, texte)</li>
+                    <li>🧠 Utiliser le mode "thinking" pour des raisonnements complexes</li>
+                    <li>🌐 Accéder au contenu d'URLs</li>
+                </ul>
+                <div style="margin-top: 10px;">Comment puis-je vous aider aujourd'hui ?</div>
             </div>
+        </div>
+        <div class="typing-indicator" id="typingIndicator">
+            <span>L'assistant réfléchit</span>
+            <div class="typing-dots">
+                <span></span>
+                <span></span>
+                <span></span>
             </div>
+        </div>
+        <div class="input-container">
+            <div class="file-preview" id="filePreview"></div>
+            <div class="input-row">
+                <input type="file" id="fileInput" class="file-input" accept="image/*,video/*,.pdf,.txt,.csv,.json" onchange="handleFileSelect(event)">
+                <button class="file-button" onclick="document.getElementById('fileInput').click()">
+                    📎 Fichier
+                </button>
+                <div class="input-wrapper">
                     <textarea
+                        id="messageInput"
                         class="message-input"
+                        placeholder="Tapez votre message ici..."
+                        rows="1"
+                        onkeydown="handleKeyDown(event)"
+                        oninput="autoResize(this)"
+                    ></textarea>
+                    <button class="send-button" id="sendButton" onclick="sendMessage()">
+                        ➤
                     </button>
                 </div>
             </div>
     </div>
     <script>
         let currentFile = null;
+        let conversationId = 'session_' + Date.now();
+        function autoResize(textarea) {
+            textarea.style.height = 'auto';
+            textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+        }
+        function handleKeyDown(event) {
+            if (event.key === 'Enter' && !event.shiftKey) {
+                event.preventDefault();
                 sendMessage();
             }
         }
+        function handleFileSelect(event) {
+            const file = event.target.files[0];
+            if (!file) return;
+            const filePreview = document.getElementById('filePreview');
             const formData = new FormData();
             formData.append('file', file);
+            fetch('/upload', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    currentFile = data;
+                    filePreview.innerHTML = `
+                        <div style="display: flex; justify-content: space-between; align-items: center;">
+                            <span>📎 ${data.filename}</span>
+                            <button onclick="removeFile()" style="background: #dc3545; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer;">✕</button>
+                        </div>
+                    `;
+                    filePreview.style.display = 'block';
                 } else {
+                    showError('Erreur lors du téléchargement: ' + data.error);
                 }
+            })
+            .catch(error => {
+                showError('Erreur lors du téléchargement: ' + error.message);
+            });
         }
         function removeFile() {
             currentFile = null;
+            document.getElementById('filePreview').style.display = 'none';
+            document.getElementById('fileInput').value = '';
         }
+        function sendMessage() {
+            const messageInput = document.getElementById('messageInput');
+            const message = messageInput.value.trim();
+            if (!message && !currentFile) return;
+            const sendButton = document.getElementById('sendButton');
+            const typingIndicator = document.getElementById('typingIndicator');
+            // Désactiver l'interface
+            messageInput.disabled = true;
+            sendButton.disabled = true;
+            // Afficher le message utilisateur
+            if (message) {
+                addMessage('user', message);
+            }
+            // Afficher l'indicateur de frappe
+            typingIndicator.style.display = 'flex';
+            // Vider l'input
             messageInput.value = '';
             messageInput.style.height = 'auto';
+            // Préparer la requête
+            const thinkingEnabled = document.getElementById('thinkingToggle').checked;
+            const endpoint = currentFile ? '/chat_with_file' : '/chat';
+            const payload = {
+                message: message || 'Analysez ce fichier',
+                thinking_enabled: thinkingEnabled,
+                conversation_id: conversationId
+            };
+            if (currentFile) {
+                payload.file_data = currentFile;
+            }
+            // Envoyer la requête avec streaming
+            fetch(endpoint, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(payload)
+            })
+            .then(response => {
                 if (!response.ok) {
+                    throw new Error('Erreur réseau');
                 }
                 const reader = response.body.getReader();
                 const decoder = new TextDecoder();
+                let buffer = '';
+                let currentMessage = '';
+                let currentThoughts = '';
+                let messageElement = null;
+                let thoughtsElement = null;
+                function processStream() {
+                    return reader.read().then(({ done, value }) => {
+                        if (done) {
+                            typingIndicator.style.display = 'none';
+                            messageInput.disabled = false;
+                            sendButton.disabled = false;
+                            messageInput.focus();
+                            removeFile();
+                            return;
+                        }
+                        buffer += decoder.decode(value, { stream: true });
+                        const lines = buffer.split('\n');
+                        buffer = lines.pop() || '';
+                        for (const line of lines) {
+                            if (line.startsWith('data: ')) {
+                                try {
+                                    const data = JSON.parse(line.substring(6));
+                                    if (data.type === 'text') {
+                                        if (!messageElement) {
+                                            messageElement = addMessage('assistant', '');
+                                        }
+                                        currentMessage += data.content;
+                                        messageElement.innerHTML = formatMessage(currentMessage);
+                                    } else if (data.type === 'thought' && thinkingEnabled) {
+                                        if (!thoughtsElement) {
+                                            thoughtsElement = addThoughts('');
+                                        }
+                                        currentThoughts += data.content;
+                                        thoughtsElement.innerHTML = `
+                                            <div class="thoughts-header">🧠 Réflexion de l'assistant:</div>
+                                            <div>${formatMessage(currentThoughts)}</div>
+                                        `;
+                                    } else if (data.type === 'error') {
+                                        showError(data.content);
+                                    } else if (data.type === 'end') {
+                                        typingIndicator.style.display = 'none';
+                                        messageInput.disabled = false;
+                                        sendButton.disabled = false;
+                                        messageInput.focus();
+                                        removeFile();
+                                        return;
                                     }
+                                } catch (e) {
+                                    console.error('Erreur parsing JSON:', e);
                                 }
                             }
                         }
+                        return processStream();
+                    });
                 }
+                return processStream();
+            })
+            .catch(error => {
+                typingIndicator.style.display = 'none';
+                messageInput.disabled = false;
+                sendButton.disabled = false;
+                showError('Erreur: ' + error.message);
+                messageInput.focus();
+            });
         }
+        function addMessage(role, content) {
+            const messagesContainer = document.getElementById('messages');
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message ${role}`;
+            messageDiv.innerHTML = formatMessage(content);
+            messagesContainer.appendChild(messageDiv);
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+            return messageDiv;
+        }
+        function addThoughts(content) {
+            const messagesContainer = document.getElementById('messages');
+            const thoughtsDiv = document.createElement('div');
+            thoughtsDiv.className = 'thoughts';
+            messagesContainer.appendChild(thoughtsDiv);
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+            return thoughtsDiv;
+        }
+        function formatMessage(content) {
+            // Simple formatting pour le markdown basique
+            return content
+                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                .replace(/\*(.*?)\*/g, '<em>$1</em>')
+                .replace(/`(.*?)`/g, '<code style="background: #f4f4f4; padding: 2px 4px; border-radius: 3px;">$1</code>')
+                .replace(/\n/g, '<br>');
+        }
+        function showError(message) {
+            const messagesContainer = document.getElementById('messages');
+            const errorDiv = document.createElement('div');
+            errorDiv.className = 'error';
+            errorDiv.textContent = message;
+            messagesContainer.appendChild(errorDiv);
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+        }
+        function resetConversation() {
+            if (confirm('Êtes-vous sûr de vouloir réinitialiser la conversation ?')) {
+                fetch('/reset_conversation', {
                     method: 'POST',
                     headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ conversation_id: conversationId })
+                })
+                .then(() => {
+                    document.getElementById('messages').innerHTML = `
                         <div class="message assistant">
+                            <div>👋 Conversation réinitialisée ! Comment puis-je vous aider ?</div>
                         </div>
                     `;
+                    conversationId = 'session_' + Date.now();
                     removeFile();
+                })
+                .catch(error => {
+                    showError('Erreur lors de la réinitialisation: ' + error.message);
+                });
             }
         }
+        // Focus automatique sur l'input au chargement
         document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('messageInput').focus();
         });
     </script>
 </body>