Hugging Face's logo

Spaces:
Docfile
/
Chatm
Running

App Files Community
Docfile commited on
Commit
37619a6
·
verified ·
1 Parent(s): da7ef42

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +119 -132
templates/index.html CHANGED
@@ -1,167 +1,154 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Mariam AI</title>
7
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
8
- <style>
9
- .chat-container {
10
- max-width: 800px;
11
- margin: 50px auto;
12
- border: 1px solid #ddd;
13
- border-radius: 5px;
14
- padding: 20px;
15
- }
16
-
17
- .message {
18
- margin-bottom: 10px;
19
- padding: 10px;
20
- border-radius: 5px;
21
- }
22
-
23
- .user {
24
- background-color: #f0f0f0;
25
- text-align: right;
26
- }
27
-
28
- .assistant {
29
- background-color: #e0f7fa;
30
- text-align: left;
31
- }
32
- .settings-container {
33
- margin-bottom: 20px;
34
- }
35
- .hidden {
36
- display: none;
37
- }
38
-
39
- </style>
40
  </head>
41
- <body>
42
- <div class="container">
43
- <h1 class="text-center">Mariam AI</h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
44
 
45
- <div class="settings-container">
46
- <div class="form-check">
47
- <input class="form-check-input" type="checkbox" id="webSearchToggle" {% if web_search %}checked{% endif %}>
48
- <label class="form-check-label" for="webSearchToggle">
49
- Activer la recherche web
50
  </label>
 
51
  </div>
52
 
53
- <button id="clearChatBtn" class="btn btn-danger mt-2">Clear Chat</button>
54
-
55
- </div>
56
- <div class="chat-container">
57
- <div id="chatMessages">
58
- {% for message in chat %}
59
- <div class="message {{ message.role }}">
60
- {{ message.text }}
61
  </div>
 
62
  {% endfor %}
63
  </div>
64
 
65
- <div class="form-group">
66
- <label for="fileInput">Télécharger un fichier (image/document)</label>
67
- <input type="file" class="form-control-file" id="fileInput">
68
- </div>
69
-
70
- <div class="input-group">
71
- <input type="text" id="promptInput" class="form-control" placeholder="Hey?">
72
- <div class="input-group-append">
73
- <button id="sendButton" class="btn btn-primary">Send</button>
 
74
  </div>
75
  </div>
76
- <div id="loadingIndicator" class="spinner-border text-primary mt-2 hidden" role="status">
77
- <span class="sr-only">Loading...</span>
78
- </div>
79
  </div>
80
  </div>
81
 
82
- <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
83
  <script>
84
- $(document).ready(function() {
85
- function addMessage(role, text) {
86
- const messageClass = role === 'user' ? 'user' : 'assistant';
87
- $('#chatMessages').append(`<div class="message ${messageClass}">${text}</div>`);
88
- //Scroll to the bottom
89
- $('#chatMessages').scrollTop($('#chatMessages')[0].scrollHeight);
90
- }
91
-
92
-
93
- $('#sendButton').click(function() {
94
- const prompt = $('#promptInput').val();
95
- const webSearchEnabled = $('#webSearchToggle').is(':checked');
96
- const file = $('#fileInput')[0].files[0]; // Get the file
97
- if (!prompt && !file) {
98
- return; // Prevent sending empty messages without a file.
99
- }
100
-
 
101
 
102
- addMessage('user', prompt);
103
- $('#promptInput').val(''); // Clear input after sending
104
- $("#loadingIndicator").removeClass("hidden"); // Show the spinner
105
 
 
 
106
 
107
- const formData = new FormData();
108
- formData.append('prompt', prompt);
109
- formData.append('web_search', webSearchEnabled);
 
 
 
 
 
 
 
 
110
 
111
- if (file) {
112
- formData.append('file', file);
 
 
 
113
  }
 
 
 
 
114
 
115
- $.ajax({
116
- url: '/send_message',
117
- type: 'POST',
118
- data: formData,
119
- processData: false, // Important for FormData
120
- contentType: false, // Important for FormData
121
- success: function(response) {
122
- addMessage('assistant', response.text);
123
- },
124
- error: function(xhr, status, error) {
125
- addMessage('assistant', "Error: " + xhr.responseJSON.text); // Display error
126
- },
127
- complete: function(){
128
- $("#loadingIndicator").addClass("hidden"); // Hide spinner
129
- }
130
- });
131
- });
132
 
133
- $('#webSearchToggle').change(function() {
134
- $.ajax({
135
- url: '/toggle_web_search',
136
- type: 'POST',
137
- success: function(response) {
138
- console.log("Web search toggled:", response.web_search);
139
- }
140
- });
141
- });
142
 
143
- $("#clearChatBtn").click(function() {
144
- $.ajax({
145
- url: "/clear_chat",
146
- type: "POST",
147
- success: function(response) {
148
- $("#chatMessages").empty(); // Clear the chat display
149
- },
150
- error: function(xhr) {
151
- console.error("Error clearing chat:", xhr.statusText);
152
- }
153
  });
154
- });
155
 
156
- // Allow sending messages with Enter key
157
- $('#promptInput').keypress(function (e) {
158
- if (e.which == 13) { // Enter key pressed
159
- $('#sendButton').click();
160
- return false; // Prevent default behavior
161
  }
162
- });
163
-
 
164
  });
 
 
 
 
 
 
 
 
 
 
165
  </script>
166
  </body>
167
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="fr">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Mariam AI</title>
7
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </head>
10
+ <body class="bg-gray-100 h-screen">
11
+ <div class="container mx-auto p-4 h-full flex flex-col">
12
+ <div class="bg-white rounded-lg shadow-lg p-6 h-full flex flex-col">
13
+ <!-- Header -->
14
+ <div class="flex justify-between items-center mb-6">
15
+ <h1 class="text-2xl font-bold">Mariam AI</h1>
16
+ <div class="flex space-x-4">
17
+ <label class="flex items-center">
18
+ <input type="checkbox" id="webSearchToggle" class="mr-2">
19
+ Activer la recherche web
20
+ </label>
21
+ <button onclick="clearChat()" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">
22
+ Effacer le chat
23
+ </button>
24
+ </div>
25
+ </div>
26
 
27
+ <!-- File Upload -->
28
+ <div class="mb-4">
29
+ <input type="file" id="fileUpload" class="hidden" accept=".jpg,.jpeg,.png,.pdf,.txt,.mp3,.mp4">
30
+ <label for="fileUpload" class="cursor-pointer bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
31
+ Télécharger un fichier
32
  </label>
33
+ <span id="fileName" class="ml-2 text-gray-600"></span>
34
  </div>
35
 
36
+ <!-- Chat Messages -->
37
+ <div id="chatMessages" class="flex-1 overflow-y-auto mb-4 space-y-4">
38
+ {% for message in messages %}
39
+ <div class="flex {% if message.role == 'user' %}justify-end{% endif %}">
40
+ <div class="max-w-3/4 p-3 rounded-lg {% if message.role == 'user' %}bg-blue-500 text-white{% else %}bg-gray-200{% endif %}">
41
+ {{ message.content }}
 
 
42
  </div>
43
+ </div>
44
  {% endfor %}
45
  </div>
46
 
47
+ <!-- Input Area -->
48
+ <div class="border-t pt-4">
49
+ <div class="flex space-x-4">
50
+ <input type="text" id="messageInput"
51
+ class="flex-1 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
52
+ placeholder="Écrivez votre message...">
53
+ <button onclick="sendMessage()"
54
+ class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition duration-200">
55
+ Envoyer
56
+ </button>
57
  </div>
58
  </div>
 
 
 
59
  </div>
60
  </div>
61
 
 
62
  <script>
63
+ const messageInput = document.getElementById('messageInput');
64
+ const chatMessages = document.getElementById('chatMessages');
65
+ const webSearchToggle = document.getElementById('webSearchToggle');
66
+ const fileUpload = document.getElementById('fileUpload');
67
+ const fileName = document.getElementById('fileName');
68
+
69
+ function addMessage(content, isUser = false) {
70
+ const messageDiv = document.createElement('div');
71
+ messageDiv.className = `flex ${isUser ? 'justify-end' : ''}`;
72
+
73
+ const innerDiv = document.createElement('div');
74
+ innerDiv.className = `max-w-3/4 p-3 rounded-lg ${isUser ? 'bg-blue-500 text-white' : 'bg-gray-200'}`;
75
+ innerDiv.innerHTML = marked.parse(content);
76
+
77
+ messageDiv.appendChild(innerDiv);
78
+ chatMessages.appendChild(messageDiv);
79
+ chatMessages.scrollTop = chatMessages.scrollHeight;
80
+ }
81
 
82
+ async function sendMessage() {
83
+ const message = messageInput.value.trim();
84
+ if (!message) return;
85
 
86
+ addMessage(message, true);
87
+ messageInput.value = '';
88
 
89
+ try {
90
+ const response = await fetch('/send_message', {
91
+ method: 'POST',
92
+ headers: {
93
+ 'Content-Type': 'application/json'
94
+ },
95
+ body: JSON.stringify({
96
+ message: message,
97
+ web_search: webSearchToggle.checked
98
+ })
99
+ });
100
 
101
+ const data = await response.json();
102
+ if (data.error) {
103
+ addMessage(`Erreur: ${data.error}`);
104
+ } else {
105
+ addMessage(data.response);
106
  }
107
+ } catch (error) {
108
+ addMessage(`Erreur: ${error.message}`);
109
+ }
110
+ }
111
 
112
+ messageInput.addEventListener('keypress', (e) => {
113
+ if (e.key === 'Enter') {
114
+ sendMessage();
115
+ }
116
+ });
 
 
 
 
 
 
 
 
 
 
 
 
117
 
118
+ fileUpload.addEventListener('change', async (e) => {
119
+ const file = e.target.files[0];
120
+ if (!file) return;
 
 
 
 
 
 
121
 
122
+ fileName.textContent = file.name;
123
+ const formData = new FormData();
124
+ formData.append('file', file);
125
+
126
+ try {
127
+ const response = await fetch('/upload', {
128
+ method: 'POST',
129
+ body: formData
 
 
130
  });
 
131
 
132
+ const data = await response.json();
133
+ if (data.error) {
134
+ alert(`Erreur: ${data.error}`);
135
+ } else {
136
+ addMessage(`Fichier téléchargé: ${file.name}`);
137
  }
138
+ } catch (error) {
139
+ alert(`Erreur: ${error.message}`);
140
+ }
141
  });
142
+
143
+ async function clearChat() {
144
+ try {
145
+ await fetch('/clear_chat', { method: 'POST' });
146
+ chatMessages.innerHTML = '';
147
+ location.reload();
148
+ } catch (error) {
149
+ alert(`Erreur: ${error.message}`);
150
+ }
151
+ }
152
  </script>
153
  </body>
154
  </html>