Spaces:

Docfile
/

Chatm

Running

App Files Files Community

Docfile commited on Feb 19

Commit

23f07ff

verified ·

1 Parent(s): c0834c0

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +138 -156

templates/index.html CHANGED Viewed

@@ -1,172 +1,154 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Mariam AI</title>
-  <!-- Intégration de Tailwind CSS -->
-  <script src="https://cdn.tailwindcss.com"></script>
-  <!-- Intégration d'Animate.css pour les animations -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
-  <style>
-    /* Loader personnalisé */
-    .loader {
-      border-top-color: #3498db;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
-  </style>
 </head>
-<body class="bg-gradient-to-r from-blue-500 to-purple-600 min-h-screen flex items-center justify-center">
-  <div class="bg-white rounded-xl shadow-2xl overflow-hidden w-full max-w-4xl">
-    <!-- En-tête -->
-    <header class="bg-gradient-to-r from-purple-600 to-blue-500 p-6 flex justify-between items-center">
-      <h1 class="text-white text-3xl font-bold">Mariam AI</h1>
-      <div class="flex space-x-4">
-        <label class="flex items-center text-white">
-          <input type="checkbox" id="webSearchToggle" class="mr-2">
-          Activer la recherche web
-        </label>
-        <button onclick="clearChat()" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded transition duration-200">
-          Effacer le chat
-        </button>
-      </div>
-    </header>
-    <!-- Contenu principal -->
-    <main class="p-6 flex flex-col h-96">
-      <!-- Upload de fichier -->
-      <div class="mb-4 flex items-center">
-        <input type="file" id="fileUpload" class="hidden" accept=".jpg,.jpeg,.png,.pdf,.txt,.mp3,.mp4">
-        <label for="fileUpload" class="cursor-pointer bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition duration-200">
-          Télécharger un fichier
-        </label>
-        <span id="fileName" class="ml-2 text-gray-600"></span>
-      </div>
-      <!-- Zone des messages -->
-      <div id="chatMessages" class="flex-1 overflow-y-auto space-y-4 mb-4">
-        {% for message in messages %}
-        <div class="flex {% if message.role == 'user' %}justify-end{% else %}justify-start{% endif %} animate__animated animate__fadeIn">
-          <div class="max-w-3/4 p-3 rounded-lg {% if message.role == 'user' %}bg-blue-500 text-white{% else %}bg-gray-200 text-gray-800{% endif %}">
-            {{ message.content }}
-          </div>
-        </div>
-        {% endfor %}
-      </div>
-      <!-- Loader animé -->
-      <div id="loader" class="hidden flex justify-center my-4">
-        <div class="loader border-8 border-t-8 border-gray-200 rounded-full h-12 w-12"></div>
-      </div>
-      <!-- Zone de saisie -->
-      <div class="border-t pt-4">
-        <div class="flex space-x-4">
-          <input type="text" id="messageInput" class="flex-1 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Écrivez votre message...">
-          <button onclick="sendMessage()" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg transition duration-200 transform hover:scale-105">
-            Envoyer
-          </button>
         </div>
-      </div>
-    </main>
-  </div>
-  <!-- Scripts -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
-  <script>
-    const messageInput = document.getElementById('messageInput');
-    const chatMessages = document.getElementById('chatMessages');
-    const webSearchToggle = document.getElementById('webSearchToggle');
-    const fileUpload = document.getElementById('fileUpload');
-    const fileName = document.getElementById('fileName');
-    const loader = document.getElementById('loader');
-    function addMessage(content, isUser = false) {
-      const messageDiv = document.createElement('div');
-      messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'} animate__animated animate__fadeIn`;
-      const innerDiv = document.createElement('div');
-      innerDiv.className = `max-w-3/4 p-3 rounded-lg ${isUser ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'}`;
-      innerDiv.innerHTML = marked.parse(content);
-      messageDiv.appendChild(innerDiv);
-      chatMessages.appendChild(messageDiv);
-      chatMessages.scrollTop = chatMessages.scrollHeight;
-    }
-    async function sendMessage() {
-      const message = messageInput.value.trim();
-      if (!message) return;
-      addMessage(message, true);
-      messageInput.value = '';
-      loader.classList.remove('hidden');  // Afficher le loader
-      try {
-        const response = await fetch('/send_message', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            message: message,
-            web_search: webSearchToggle.checked
-          })
-        });
-        const data = await response.json();
-        loader.classList.add('hidden');  // Masquer le loader
-        if (data.error) {
-          addMessage(`Erreur: ${data.error}`);
-        } else {
-          addMessage(data.response);
         }
-      } catch (error) {
-        loader.classList.add('hidden');
-        addMessage(`Erreur: ${error.message}`);
-      }
-    }
-    messageInput.addEventListener('keypress', (e) => {
-      if (e.key === 'Enter') {
-        sendMessage();
-      }
-    });
-    fileUpload.addEventListener('change', async (e) => {
-      const file = e.target.files[0];
-      if (!file) return;
-      fileName.textContent = file.name;
-      const formData = new FormData();
-      formData.append('file', file);
-      try {
-        const response = await fetch('/upload', {
-          method: 'POST',
-          body: formData
         });
-        const data = await response.json();
-        if (data.error) {
-          alert(`Erreur: ${data.error}`);
-        } else {
-          addMessage(`Fichier téléchargé: ${file.name}`);
-        }
-      } catch (error) {
-        alert(`Erreur: ${error.message}`);
-      }
-    });
-    async function clearChat() {
-      try {
-        await fetch('/clear_chat', { method: 'POST' });
-        chatMessages.innerHTML = '';
-        location.reload();
-      } catch (error) {
-        alert(`Erreur: ${error.message}`);
-      }
-    }
-  </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mariam AI</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
 </head>
+<body class="bg-gray-100 h-screen">
+    <div class="container mx-auto p-4 h-full flex flex-col">
+        <div class="bg-white rounded-lg shadow-lg p-6 h-full flex flex-col">
+            <!-- Header -->
+            <div class="flex justify-between items-center mb-6">
+                <h1 class="text-2xl font-bold">Mariam AI</h1>
+                <div class="flex space-x-4">
+                    <label class="flex items-center">
+                        <input type="checkbox" id="webSearchToggle" class="mr-2">
+                        Activer la recherche web
+                    </label>
+                    <button onclick="clearChat()" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">
+                        Effacer le chat
+                    </button>
+                </div>
+            </div>
+            <!-- File Upload -->
+            <div class="mb-4">
+                <input type="file" id="fileUpload" class="hidden" accept=".jpg,.jpeg,.png,.pdf,.txt,.mp3,.mp4">
+                <label for="fileUpload" class="cursor-pointer bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
+                    Télécharger un fichier
+                </label>
+                <span id="fileName" class="ml-2 text-gray-600"></span>
+            </div>
+            <!-- Chat Messages -->
+            <div id="chatMessages" class="flex-1 overflow-y-auto mb-4 space-y-4">
+                {% for message in messages %}
+                <div class="flex {% if message.role == 'user' %}justify-end{% endif %}">
+                    <div class="max-w-3/4 p-3 rounded-lg {% if message.role == 'user' %}bg-blue-500 text-white{% else %}bg-gray-200{% endif %}">
+                        {{ message.content }}
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+            <!-- Input Area -->
+            <div class="border-t pt-4">
+                <div class="flex space-x-4">
+                    <input type="text" id="messageInput"
+                           class="flex-1 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                           placeholder="Écrivez votre message...">
+                    <button onclick="sendMessage()"
+                            class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition duration-200">
+                        Envoyer
+                    </button>
+                </div>
+            </div>
         </div>
+    </div>
+    <script>
+        const messageInput = document.getElementById('messageInput');
+        const chatMessages = document.getElementById('chatMessages');
+        const webSearchToggle = document.getElementById('webSearchToggle');
+        const fileUpload = document.getElementById('fileUpload');
+        const fileName = document.getElementById('fileName');
+        function addMessage(content, isUser = false) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `flex ${isUser ? 'justify-end' : ''}`;
+            const innerDiv = document.createElement('div');
+            innerDiv.className = `max-w-3/4 p-3 rounded-lg ${isUser ? 'bg-blue-500 text-white' : 'bg-gray-200'}`;
+            innerDiv.innerHTML = marked.parse(content);
+            messageDiv.appendChild(innerDiv);
+            chatMessages.appendChild(messageDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+        async function sendMessage() {
+            const message = messageInput.value.trim();
+            if (!message) return;
+            addMessage(message, true);
+            messageInput.value = '';
+            try {
+                const response = await fetch('/send_message', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        message: message,
+                        web_search: webSearchToggle.checked
+                    })
+                });
+                const data = await response.json();
+                if (data.error) {
+                    addMessage(`Erreur: ${data.error}`);
+                } else {
+                    addMessage(data.response);
+                }
+            } catch (error) {
+                addMessage(`Erreur: ${error.message}`);
+            }
         }
+        messageInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+        fileUpload.addEventListener('change', async (e) => {
+            const file = e.target.files[0];
+            if (!file) return;
+            fileName.textContent = file.name;
+            const formData = new FormData();
+            formData.append('file', file);
+            try {
+                const response = await fetch('/upload', {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await response.json();
+                if (data.error) {
+                    alert(`Erreur: ${data.error}`);
+                } else {
+                    addMessage(`Fichier téléchargé: ${file.name}`);
+                }
+            } catch (error) {
+                alert(`Erreur: ${error.message}`);
+            }
         });
+        async function clearChat() {
+            try {
+                await fetch('/clear_chat', { method: 'POST' });
+                chatMessages.innerHTML = '';
+                location.reload();
+            } catch (error) {
+                alert(`Erreur: ${error.message}`);
+            }
+        }
+    </script>
 </body>
 </html>