Spaces:

Docfile
/

Chatm

Running

App Files Files Community

Docfile commited on Feb 19

Commit

0d2d16d

verified ·

1 Parent(s): 52cdaac

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +157 -34

templates/index.html CHANGED Viewed

@@ -1,44 +1,167 @@
 <!DOCTYPE html>
-<html lang="fr">
 <head>
     <meta charset="UTF-8">
-    <title>Mariam AI!</title>
     <style>
-        body { font-family: Arial, sans-serif; margin: 2em; }
-        .chat-message { margin-bottom: 1em; padding: 0.5em; border: 1px solid #ccc; border-radius: 5px; }
-        .user { background-color: #e0f7fa; }
-        .assistant { background-color: #f1f8e9; }
-        .settings { margin-bottom: 2em; }
     </style>
 </head>
 <body>
-    <h1>Mariam AI!</h1>
-    <div class="settings">
-        <form action="{{ url_for('index') }}" method="post" enctype="multipart/form-data">
-            <label for="toggle_web_search">Activer la recherche web :</label>
-            <input type="checkbox" name="toggle_web_search" id="toggle_web_search" {% if web_search %}checked{% endif %}>
-            <br><br>
-            <label for="file">Télécharger un fichier (image/document) :</label>
-            <input type="file" name="file" id="file" accept=".jpg,.jpeg,.png,.mp4,.mp3,.pdf,.txt">
-            <br><br>
-            <label for="prompt">Hey ?</label>
-            <input type="text" name="prompt" id="prompt" required style="width: 60%;">
-            <br><br>
-            <button type="submit">Envoyer</button>
-        </form>
-    </div>
-    <hr>
-    <div>
-        <h2>Historique du Chat</h2>
-        {% for msg in chat_history %}
-            <div class="chat-message {{ msg.role }}">
-                <strong>{{ msg.role|capitalize }} :</strong>
-                <p>{{ msg.message|safe }}</p>
             </div>
-        {% endfor %}
     </div>
 </body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mariam AI</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     <style>
+        .chat-container {
+            max-width: 800px;
+            margin: 50px auto;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            padding: 20px;
+        }
+        .message {
+            margin-bottom: 10px;
+            padding: 10px;
+            border-radius: 5px;
+        }
+        .user {
+            background-color: #f0f0f0;
+            text-align: right;
+        }
+        .assistant {
+            background-color: #e0f7fa;
+            text-align: left;
+        }
+        .settings-container {
+            margin-bottom: 20px;
+        }
+        .hidden {
+            display: none;
+        }
     </style>
 </head>
 <body>
+    <div class="container">
+        <h1 class="text-center">Mariam AI</h1>
+        <div class="settings-container">
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="webSearchToggle" {% if web_search %}checked{% endif %}>
+                <label class="form-check-label" for="webSearchToggle">
+                    Activer la recherche web
+                </label>
+            </div>
+                <button id="clearChatBtn" class="btn btn-danger mt-2">Clear Chat</button>
+        </div>
+        <div class="chat-container">
+            <div id="chatMessages">
+                {% for message in chat %}
+                    <div class="message {{ message.role }}">
+                        {{ message.text }}
+                    </div>
+                {% endfor %}
+            </div>
+            <div class="form-group">
+              <label for="fileInput">Télécharger un fichier (image/document)</label>
+              <input type="file" class="form-control-file" id="fileInput">
+            </div>
+            <div class="input-group">
+                <input type="text" id="promptInput" class="form-control" placeholder="Hey?">
+                <div class="input-group-append">
+                    <button id="sendButton" class="btn btn-primary">Send</button>
+                </div>
+            </div>
+            <div id="loadingIndicator" class="spinner-border text-primary mt-2 hidden" role="status">
+                <span class="sr-only">Loading...</span>
             </div>
+        </div>
     </div>
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script>
+        $(document).ready(function() {
+            function addMessage(role, text) {
+                const messageClass = role === 'user' ? 'user' : 'assistant';
+                $('#chatMessages').append(`<div class="message ${messageClass}">${text}</div>`);
+                //Scroll to the bottom
+                $('#chatMessages').scrollTop($('#chatMessages')[0].scrollHeight);
+            }
+            $('#sendButton').click(function() {
+                const prompt = $('#promptInput').val();
+                const webSearchEnabled = $('#webSearchToggle').is(':checked');
+                const file = $('#fileInput')[0].files[0];  // Get the file
+                if (!prompt && !file) {
+                  return; // Prevent sending empty messages without a file.
+                }
+                addMessage('user', prompt);
+                $('#promptInput').val(''); // Clear input after sending
+                $("#loadingIndicator").removeClass("hidden"); // Show the spinner
+                const formData = new FormData();
+                formData.append('prompt', prompt);
+                formData.append('web_search', webSearchEnabled);
+                if (file) {
+                    formData.append('file', file);
+                }
+                $.ajax({
+                    url: '/send_message',
+                    type: 'POST',
+                    data: formData,
+                    processData: false, // Important for FormData
+                    contentType: false, // Important for FormData
+                    success: function(response) {
+                        addMessage('assistant', response.text);
+                    },
+                    error: function(xhr, status, error) {
+                        addMessage('assistant', "Error: " + xhr.responseJSON.text); // Display error
+                    },
+                    complete: function(){
+                        $("#loadingIndicator").addClass("hidden");  // Hide spinner
+                    }
+                });
+            });
+            $('#webSearchToggle').change(function() {
+                $.ajax({
+                    url: '/toggle_web_search',
+                    type: 'POST',
+                    success: function(response) {
+                        console.log("Web search toggled:", response.web_search);
+                    }
+                });
+            });
+             $("#clearChatBtn").click(function() {
+                $.ajax({
+                    url: "/clear_chat",
+                    type: "POST",
+                    success: function(response) {
+                        $("#chatMessages").empty(); // Clear the chat display
+                    },
+                    error: function(xhr) {
+                        console.error("Error clearing chat:", xhr.statusText);
+                    }
+                });
+            });
+             // Allow sending messages with Enter key
+            $('#promptInput').keypress(function (e) {
+                if (e.which == 13) {  // Enter key pressed
+                    $('#sendButton').click();
+                    return false; // Prevent default behavior
+                }
+            });
+        });
+    </script>
 </body>
+</html>