Spaces:

Docfile
/

Chatm

Sleeping

App Files Files Community

Docfile commited on Apr 3

Commit

d510348

verified ·

1 Parent(s): 6a9656c

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +120 -50

templates/index.html CHANGED Viewed

@@ -4,77 +4,147 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mariam AI!</title>
     <style>
-        body { font-family: sans-serif; margin: 20px; background-color: #f0f2f6; }
-        .chat-container { max-width: 800px; margin: auto; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); display: flex; flex-direction: column; height: 85vh; }
-        .chat-header { background-color: #4CAF50; color: white; padding: 15px; text-align: center; border-top-left-radius: 8px; border-top-right-radius: 8px; }
-        .chat-messages { flex-grow: 1; overflow-y: auto; padding: 20px; border-bottom: 1px solid #ddd; }
-        .message { margin-bottom: 15px; padding: 10px 15px; border-radius: 15px; max-width: 80%; word-wrap: break-word; }
-        .message.user { background-color: #DCF8C6; align-self: flex-end; margin-left: auto; border-bottom-right-radius: 0; }
-        .message.assistant { background-color: #f1f1f1; align-self: flex-start; border-bottom-left-radius: 0; white-space: pre-wrap; /* Respecte les sauts de ligne et espaces */ }
-        .message strong { font-weight: bold; display: block; margin-bottom: 5px; }
-        .chat-input { display: flex; padding: 15px; border-top: 1px solid #ddd; background-color: #f8f9fa; }
-        .chat-input input[type="text"] { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 20px; margin-right: 10px; }
-        .chat-input button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 20px; cursor: pointer; }
-        .chat-input button:hover { background-color: #45a049; }
-        .settings { padding: 15px; border-top: 1px solid #ddd; background-color: #f8f9fa; font-size: 0.9em; display: flex; justify-content: space-between; align-items: center; }
-        .settings label { margin-right: 10px;}
-        .error { color: red; text-align: center; padding: 10px; }
-        .spinner { text-align: center; padding: 10px; color: #555; font-style: italic;}
     </style>
 </head>
-<body>
-<div class="chat-container">
-    <div class="chat-header">
-        <h1>Mariam AI!</h1>
     </div>
-    <div class="chat-messages" id="chat-messages">
         {% for message in chat_history %}
-            <div class="message {{ message.role }}">
-                <strong>{{ message.role|capitalize }}</strong>
-                {{ message.text }}
             </div>
         {% endfor %}
-        <!-- Zone pour afficher "Recherche web en cours..." -->
-        {% if processing_message and web_search_active %}
-            <div class="spinner">Recherche web en cours...</div>
-        {% endif %}
-         <!-- Zone pour afficher "Génération de la réponse..." -->
-        {% if processing_message %}
-            <div class="spinner">Génération de la réponse...</div>
-        {% endif %}
     </div>
     {% if error %}
-        <div class="error">{{ error }}</div>
     {% endif %}
-    <form method="POST" action="{{ url_for('chat') }}" enctype="multipart/form-data">
-        <div class="settings">
-            <div>
-                 <label for="web_search_toggle">
-                    <input type="checkbox" id="web_search_toggle" name="web_search" value="true" {% if web_search_active %}checked{% endif %}>
                     Activer la recherche web
                 </label>
             </div>
-             <div>
-                <label for="file_upload">Uploader (jpg, png, pdf, txt):</label>
-                <input type="file" id="file_upload" name="file" accept=".jpg,.jpeg,.png,.pdf,.txt"> <!-- Limiter les types ici -->
             </div>
-        </div>
-        <div class="chat-input">
-            <input type="text" name="prompt" placeholder="Posez votre question..." required autofocus>
-            <button type="submit">Envoyer</button>
-        </div>
-    </form>
 </div>
 <script>
-    // Scroll vers le bas automatiquement
-    const chatMessages = document.getElementById('chat-messages');
-    chatMessages.scrollTop = chatMessages.scrollHeight;
 </script>
 </body>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mariam AI!</title>
+    <!-- Tailwind CSS via CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        /* Style personnalisé pour la barre de défilement (optionnel) */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+        /* Empêche le FOUC (Flash of Unstyled Content) */
+        [x-cloak] { display: none !important; }
     </style>
+    <!-- Alpine.js pour une interactivité simple (optionnel mais utile) -->
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 </head>
+<body class="bg-gray-100 flex items-center justify-center min-h-screen" x-data="{ processing: {{ 'true' if processing_message else 'false' }} }">
+<div class="chat-container bg-white rounded-lg shadow-xl w-full max-w-3xl h-[90vh] flex flex-col" x-cloak>
+    <!-- En-tête -->
+    <div class="chat-header bg-gradient-to-r from-emerald-500 to-teal-600 text-white p-4 rounded-t-lg flex justify-between items-center">
+        <h1 class="text-xl font-semibold">Mariam AI!</h1>
+        <!-- Bouton pour effacer (optionnel mais utile) -->
+        <form action="{{ url_for('clear_chat') }}" method="post" onsubmit="return confirm('Voulez-vous vraiment effacer la conversation ?');">
+             <button type="submit" title="Effacer la conversation" class="text-white hover:text-red-300 transition duration-150">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12.576 0a48.108 48.108 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                </svg>
+            </button>
+        </form>
     </div>
+    <!-- Zone des messages -->
+    <div class="chat-messages flex-grow overflow-y-auto p-4 md:p-6 space-y-4" id="chat-messages">
         {% for message in chat_history %}
+            <div class="message flex {% if message.role == 'user' %}justify-end{% else %}justify-start{% endif %}">
+                <div class="max-w-xs md:max-w-md lg:max-w-lg px-4 py-2 rounded-lg shadow {% if message.role == 'user' %}bg-emerald-500 text-white rounded-br-none{% else %}bg-gray-200 text-gray-800 rounded-bl-none{% endif %}">
+                    <p class="text-sm break-words whitespace-pre-wrap">{{ message.text }}</p>
+                </div>
             </div>
         {% endfor %}
+        <!-- Indicateur de chargement -->
+        <div x-show="processing" class="flex justify-center items-center py-4">
+            <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-emerald-500"></div>
+            <span class="ml-2 text-gray-500 italic">
+                {% if session.get('processing_web_search') %}
+                Recherche web et génération en cours...
+                {% else %}
+                Génération de la réponse...
+                {% endif %}
+            </span>
+        </div>
     </div>
+    <!-- Affichage des erreurs -->
     {% if error %}
+    <div class="error-message bg-red-100 border border-red-400 text-red-700 px-4 py-2 rounded-md mx-4 mb-2 text-sm">
+        <strong>Erreur :</strong> {{ error }}
+    </div>
     {% endif %}
+    <!-- Zone de saisie et options -->
+    <div class="chat-input-area border-t border-gray-200 p-4 bg-gray-50 rounded-b-lg">
+        <form method="POST" action="{{ url_for('chat') }}" enctype="multipart/form-data" id="chat-form" @submit="processing = true">
+            <!-- Options : Recherche Web & Upload -->
+            <div class="options flex flex-col sm:flex-row justify-between items-center mb-3 gap-3 text-sm text-gray-600">
+                 <label for="web_search_toggle" class="flex items-center cursor-pointer">
+                    <input type="checkbox" id="web_search_toggle" name="web_search" value="true" {% if web_search_active %}checked{% endif %} class="mr-2 h-4 w-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500">
                     Activer la recherche web
                 </label>
+                <label for="file_upload" class="flex items-center cursor-pointer bg-white border border-gray-300 rounded-md px-3 py-1 hover:bg-gray-50 transition duration-150">
+                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-2 text-gray-500">
+                       <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.122 2.122l7.81-7.81" />
+                     </svg>
+                    <span id="file-label-text">Joindre un fichier</span> (.jpg, .png, .pdf, .txt)
+                    <input type="file" id="file_upload" name="file" class="hidden" accept=".jpg,.jpeg,.png,.pdf,.txt" onchange="updateFileLabel(this)">
+                </label>
             </div>
+            <!-- Champ de saisie et bouton envoyer -->
+            <div class="flex items-center gap-2">
+                <input type="text" name="prompt" id="prompt-input" placeholder="Posez votre question à Mariam..." required autofocus
+                       class="flex-grow p-3 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition duration-150"
+                       :disabled="processing"> <!-- Désactivé pendant le traitement -->
+                <button type="submit" id="send-button"
+                        class="bg-emerald-500 hover:bg-emerald-600 text-white rounded-full p-3 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-1 transition duration-150 disabled:opacity-50 disabled:cursor-not-allowed"
+                        :disabled="processing"> <!-- Désactivé pendant le traitement -->
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+                    </svg>
+                </button>
             </div>
+        </form>
+    </div>
 </div>
 <script>
+    // Fonction pour faire défiler vers le bas
+    function scrollToBottom() {
+        const chatMessages = document.getElementById('chat-messages');
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+    // Fonction pour mettre à jour le label du fichier
+    function updateFileLabel(input) {
+        const fileLabel = document.getElementById('file-label-text');
+        if (input.files && input.files.length > 0) {
+            fileLabel.textContent = input.files[0].name;
+        } else {
+            fileLabel.textContent = 'Joindre un fichier';
+        }
+    }
+    // Faire défiler vers le bas au chargement initial
+    window.addEventListener('load', scrollToBottom);
+    // Optionnel : Faire défiler après un léger délai pour s'assurer que tout est rendu (peut aider sur certains navigateurs)
+    // setTimeout(scrollToBottom, 100);
+    // Optionnel : Si vous vouliez effacer le champ après envoi (ne fonctionne pas bien avec le rechargement de page standard)
+    /*
+    const chatForm = document.getElementById('chat-form');
+    const promptInput = document.getElementById('prompt-input');
+    chatForm.addEventListener('submit', function() {
+        // Déjà géré par Alpine.js : document.getElementById('send-button').disabled = true;
+        // Peut causer des problèmes si la soumission échoue avant le rechargement
+        // setTimeout(() => { promptInput.value = ''; }, 50);
+    });
+    */
 </script>
 </body>