Spaces:
Sleeping
Sleeping
Delete templates/generale.html
Browse files- templates/generale.html +0 -346
templates/generale.html
DELETED
@@ -1,346 +0,0 @@
|
|
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>Question Générale</title>
|
7 |
-
<!-- Style de secours pour masquer les éléments dès le début -->
|
8 |
-
<style>
|
9 |
-
.hidden { display: none !important; }
|
10 |
-
</style>
|
11 |
-
<!-- Tailwind CSS -->
|
12 |
-
<script src="https://cdn.tailwindcss.com"></script>
|
13 |
-
<!-- Marked (Markdown) -->
|
14 |
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js" defer></script>
|
15 |
-
<!-- Font Awesome -->
|
16 |
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
|
17 |
-
<!-- SweetAlert2 -->
|
18 |
-
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" defer></script>
|
19 |
-
<!-- Polyfill -->
|
20 |
-
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6" defer></script>
|
21 |
-
<!-- Anime.js -->
|
22 |
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" defer></script>
|
23 |
-
<!-- Configuration de MathJax -->
|
24 |
-
<script>
|
25 |
-
window.MathJax = {
|
26 |
-
tex: {
|
27 |
-
inlineMath: [['$', '$'], ['\\(', '\\)']],
|
28 |
-
displayMath: [['$$', '$$'], ['\\[', '\\]']],
|
29 |
-
processEscapes: true
|
30 |
-
},
|
31 |
-
options: {
|
32 |
-
skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
|
33 |
-
},
|
34 |
-
startup: {
|
35 |
-
pageReady: () => {
|
36 |
-
return MathJax.startup.defaultPageReady().then(() => {
|
37 |
-
console.log('MathJax initial typesetting complete');
|
38 |
-
});
|
39 |
-
}
|
40 |
-
}
|
41 |
-
};
|
42 |
-
</script>
|
43 |
-
<!-- MathJax -->
|
44 |
-
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" defer></script>
|
45 |
-
<style>
|
46 |
-
:root {
|
47 |
-
--primary-color: #008cba;
|
48 |
-
--background-color: #f0f8ff;
|
49 |
-
--animation-timing: 0.3s;
|
50 |
-
}
|
51 |
-
|
52 |
-
body {
|
53 |
-
margin: 0;
|
54 |
-
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
|
55 |
-
background-color: var(--background-color);
|
56 |
-
min-height: 100vh;
|
57 |
-
padding: 20px;
|
58 |
-
box-sizing: border-box;
|
59 |
-
overflow-x: hidden;
|
60 |
-
}
|
61 |
-
|
62 |
-
.navbar {
|
63 |
-
background-color: var(--primary-color);
|
64 |
-
color: white;
|
65 |
-
padding: 15px;
|
66 |
-
width: 100%;
|
67 |
-
text-align: center;
|
68 |
-
font-size: 24px;
|
69 |
-
font-weight: bold;
|
70 |
-
position: fixed;
|
71 |
-
top: 0;
|
72 |
-
left: 0;
|
73 |
-
z-index: 1000;
|
74 |
-
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
75 |
-
animation: slideDown 0.5s ease-out;
|
76 |
-
}
|
77 |
-
|
78 |
-
.container {
|
79 |
-
margin-top: 80px;
|
80 |
-
max-width: 800px;
|
81 |
-
background-color: white;
|
82 |
-
border-radius: 8px;
|
83 |
-
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
84 |
-
padding: 20px;
|
85 |
-
animation: fadeInScale 0.5s forwards;
|
86 |
-
}
|
87 |
-
|
88 |
-
.button {
|
89 |
-
background-color: var(--primary-color);
|
90 |
-
color: white;
|
91 |
-
padding: 15px;
|
92 |
-
border: none;
|
93 |
-
border-radius: 8px;
|
94 |
-
font-size: 16px;
|
95 |
-
text-align: center;
|
96 |
-
cursor: pointer;
|
97 |
-
position: relative;
|
98 |
-
overflow: hidden;
|
99 |
-
transform: translateZ(0);
|
100 |
-
will-change: transform;
|
101 |
-
transition: all var(--animation-timing) ease;
|
102 |
-
}
|
103 |
-
|
104 |
-
.button:hover {
|
105 |
-
transform: scale(1.05) translateY(-2px);
|
106 |
-
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
107 |
-
}
|
108 |
-
|
109 |
-
.button i {
|
110 |
-
margin-right: 10px;
|
111 |
-
transition: transform var(--animation-timing) ease;
|
112 |
-
}
|
113 |
-
|
114 |
-
.input-field {
|
115 |
-
width: 100%;
|
116 |
-
padding: 12px;
|
117 |
-
border: 2px solid var(--primary-color);
|
118 |
-
border-radius: 8px;
|
119 |
-
margin-bottom: 15px;
|
120 |
-
transition: all var(--animation-timing) ease;
|
121 |
-
}
|
122 |
-
|
123 |
-
.input-field:focus {
|
124 |
-
outline: none;
|
125 |
-
box-shadow: 0 0 0 3px rgba(0,140,186,0.2);
|
126 |
-
}
|
127 |
-
|
128 |
-
#response {
|
129 |
-
background-color: #f8f9fa;
|
130 |
-
border-radius: 8px;
|
131 |
-
padding: 15px;
|
132 |
-
margin-top: 20px;
|
133 |
-
animation: fadeIn 0.5s ease-out;
|
134 |
-
}
|
135 |
-
|
136 |
-
#loader {
|
137 |
-
display: flex;
|
138 |
-
justify-content: center;
|
139 |
-
align-items: center;
|
140 |
-
margin: 20px 0;
|
141 |
-
}
|
142 |
-
|
143 |
-
@keyframes fadeInScale {
|
144 |
-
0% {
|
145 |
-
opacity: 0;
|
146 |
-
transform: scale(0.5);
|
147 |
-
}
|
148 |
-
100% {
|
149 |
-
opacity: 1;
|
150 |
-
transform: scale(1);
|
151 |
-
}
|
152 |
-
}
|
153 |
-
|
154 |
-
@keyframes slideDown {
|
155 |
-
from { transform: translateY(-100%); }
|
156 |
-
to { transform: translateY(0); }
|
157 |
-
}
|
158 |
-
|
159 |
-
@keyframes fadeIn {
|
160 |
-
from { opacity: 0; }
|
161 |
-
to { opacity: 1; }
|
162 |
-
}
|
163 |
-
|
164 |
-
.url-item {
|
165 |
-
background-color: #f0f8ff;
|
166 |
-
padding: 10px;
|
167 |
-
border-radius: 6px;
|
168 |
-
margin-bottom: 8px;
|
169 |
-
display: flex;
|
170 |
-
align-items: center;
|
171 |
-
animation: fadeIn 0.3s ease-out;
|
172 |
-
}
|
173 |
-
</style>
|
174 |
-
</head>
|
175 |
-
<body>
|
176 |
-
<div class="navbar">Mariam AI</div>
|
177 |
-
|
178 |
-
<div class="container mx-auto">
|
179 |
-
<!-- En-tête -->
|
180 |
-
<div class="flex flex-col md:flex-row md:justify-between items-start md:items-center mb-6 space-y-4 md:space-y-0">
|
181 |
-
<h1 class="text-3xl font-bold text-gray-800">Poser une question générale</h1>
|
182 |
-
<button onclick="showInfo()" class="button">
|
183 |
-
<i class="fas fa-info-circle"></i> Info
|
184 |
-
</button>
|
185 |
-
</div>
|
186 |
-
|
187 |
-
<!-- Zone de question -->
|
188 |
-
<div class="mb-6">
|
189 |
-
<label for="questionInput" class="block mb-2 text-lg font-medium text-gray-700">Votre question :</label>
|
190 |
-
<textarea id="questionInput" class="input-field" rows="4" placeholder="Entrez votre question ici..."></textarea>
|
191 |
-
</div>
|
192 |
-
|
193 |
-
<!-- Zone d'ajout d'URLs -->
|
194 |
-
<div class="mb-6">
|
195 |
-
<label for="urlInput" class="block mb-2 text-lg font-medium text-gray-700">URLs (optionnel) :</label>
|
196 |
-
<div class="flex">
|
197 |
-
<input type="text" id="urlInput" class="input-field" placeholder="Entrez une URL" />
|
198 |
-
<button onclick="addUrl()" class="button ml-2">
|
199 |
-
<i class="fas fa-plus"></i> Ajouter
|
200 |
-
</button>
|
201 |
-
</div>
|
202 |
-
<div id="urlList" class="mt-2 space-y-2"></div>
|
203 |
-
</div>
|
204 |
-
|
205 |
-
<!-- Zone d'ajout de fichiers -->
|
206 |
-
<div class="mb-6">
|
207 |
-
<label for="fileUpload" class="block mb-2 text-lg font-medium text-gray-700">Fichiers (optionnel) :</label>
|
208 |
-
<input type="file" id="fileUpload" class="input-field" multiple />
|
209 |
-
</div>
|
210 |
-
|
211 |
-
<!-- Bouton de soumission -->
|
212 |
-
<button onclick="submitQuestion()" class="button w-full">
|
213 |
-
<i class="fas fa-paper-plane"></i> Soumettre
|
214 |
-
</button>
|
215 |
-
|
216 |
-
<!-- Loader -->
|
217 |
-
<div id="loader" class="hidden">
|
218 |
-
<div class="animate-spin rounded-full h-12 w-12 border-t-4 border-b-4 border-blue-500"></div>
|
219 |
-
<p class="ml-2 text-gray-600">Chargement en cours...</p>
|
220 |
-
</div>
|
221 |
-
|
222 |
-
<!-- Affichage de la réponse -->
|
223 |
-
<!-- Note : On peut soit ne pas ajouter la classe "hidden" ici,
|
224 |
-
soit la retirer dynamiquement dans le script -->
|
225 |
-
<div id="response" class="hidden"></div>
|
226 |
-
|
227 |
-
<!-- Bouton pour copier la réponse -->
|
228 |
-
<div id="copyResponseContainer" class="hidden mt-4">
|
229 |
-
<button onclick="copyResponse()" class="button w-full">
|
230 |
-
<i class="fas fa-copy"></i> Copier la réponse
|
231 |
-
</button>
|
232 |
-
</div>
|
233 |
-
</div>
|
234 |
-
|
235 |
-
<script>
|
236 |
-
function showInfo() {
|
237 |
-
Swal.fire({
|
238 |
-
title: 'Information',
|
239 |
-
html: `
|
240 |
-
<p class="mb-2">Ce formulaire vous permet de poser des questions générales.</p>
|
241 |
-
<p class="mb-2">Vous pouvez également ajouter des URLs et des fichiers pour fournir plus de contexte à votre question.</p>
|
242 |
-
<p class="mb-2">La réponse sera formatée en Markdown et peut inclure des équations LaTeX.</p>
|
243 |
-
<p>Si vous souhaitez résoudre vos exercices de mathématiques ici, signalez-le à Mariam pour une réponse en LaTeX.</p>
|
244 |
-
`,
|
245 |
-
icon: 'info',
|
246 |
-
confirmButtonText: 'Compris'
|
247 |
-
});
|
248 |
-
}
|
249 |
-
|
250 |
-
function addUrl() {
|
251 |
-
const urlInput = document.getElementById('urlInput');
|
252 |
-
const urlList = document.getElementById('urlList');
|
253 |
-
const url = urlInput.value.trim();
|
254 |
-
if (url) {
|
255 |
-
const urlItem = document.createElement('div');
|
256 |
-
urlItem.className = 'url-item flex items-center bg-gray-200 p-2 rounded-lg shadow-sm';
|
257 |
-
urlItem.innerHTML = `
|
258 |
-
<span class="flex-grow truncate">${url}</span>
|
259 |
-
<button onclick="removeUrl(this)" class="ml-2 text-red-500 hover:text-red-700">
|
260 |
-
<i class="fas fa-times"></i>
|
261 |
-
</button>
|
262 |
-
`;
|
263 |
-
urlList.appendChild(urlItem);
|
264 |
-
urlInput.value = '';
|
265 |
-
}
|
266 |
-
}
|
267 |
-
|
268 |
-
function removeUrl(button) {
|
269 |
-
const urlItem = button.closest('.url-item');
|
270 |
-
if(urlItem) urlItem.remove();
|
271 |
-
}
|
272 |
-
|
273 |
-
async function submitQuestion() {
|
274 |
-
const question = document.getElementById('questionInput').value.trim();
|
275 |
-
if (!question) return;
|
276 |
-
|
277 |
-
const loader = document.getElementById('loader');
|
278 |
-
const responseDiv = document.getElementById('response');
|
279 |
-
const copyResponseContainer = document.getElementById('copyResponseContainer');
|
280 |
-
|
281 |
-
// Afficher le loader et s'assurer que le conteneur de réponse est visible
|
282 |
-
loader.classList.remove('hidden');
|
283 |
-
responseDiv.classList.remove('hidden');
|
284 |
-
responseDiv.innerHTML = '';
|
285 |
-
responseDiv.classList.add('opacity-0');
|
286 |
-
copyResponseContainer.classList.add('hidden');
|
287 |
-
|
288 |
-
const formData = new FormData();
|
289 |
-
formData.append('question', question);
|
290 |
-
|
291 |
-
// Récupération des URLs
|
292 |
-
document.querySelectorAll('#urlList .url-item').forEach(item => {
|
293 |
-
formData.append('urls', item.querySelector('span').textContent);
|
294 |
-
});
|
295 |
-
|
296 |
-
// Récupération des fichiers
|
297 |
-
Array.from(document.getElementById('fileUpload').files).forEach(file => {
|
298 |
-
formData.append('files', file);
|
299 |
-
});
|
300 |
-
|
301 |
-
try {
|
302 |
-
const response = await fetch('/submit', {
|
303 |
-
method: 'POST',
|
304 |
-
body: formData
|
305 |
-
});
|
306 |
-
const data = await response.json();
|
307 |
-
|
308 |
-
loader.classList.add('hidden');
|
309 |
-
responseDiv.classList.remove('opacity-0');
|
310 |
-
|
311 |
-
if (data.error) {
|
312 |
-
responseDiv.innerHTML = `<p class="text-red-600">Erreur : ${data.error}</p>`;
|
313 |
-
} else {
|
314 |
-
const htmlContent = marked.parse(data.response);
|
315 |
-
responseDiv.innerHTML = htmlContent;
|
316 |
-
copyResponseContainer.classList.remove('hidden');
|
317 |
-
|
318 |
-
// Rendu de LaTeX avec MathJax
|
319 |
-
await MathJax.typesetPromise([responseDiv]);
|
320 |
-
console.log('LaTeX rendu avec succès');
|
321 |
-
}
|
322 |
-
} catch (error) {
|
323 |
-
loader.classList.add('hidden');
|
324 |
-
responseDiv.innerHTML = `<p class="text-red-600">Erreur : ${error.message}</p>`;
|
325 |
-
responseDiv.classList.remove('opacity-0');
|
326 |
-
}
|
327 |
-
}
|
328 |
-
|
329 |
-
function copyResponse() {
|
330 |
-
const responseDiv = document.getElementById('response');
|
331 |
-
const text = responseDiv.innerText;
|
332 |
-
navigator.clipboard.writeText(text).then(() => {
|
333 |
-
Swal.fire({
|
334 |
-
icon: 'success',
|
335 |
-
title: 'Copié !',
|
336 |
-
text: 'La réponse a été copiée dans le presse-papiers.',
|
337 |
-
showConfirmButton: false,
|
338 |
-
timer: 1500
|
339 |
-
});
|
340 |
-
}).catch(err => {
|
341 |
-
console.error('Erreur lors de la copie:', err);
|
342 |
-
});
|
343 |
-
}
|
344 |
-
</script>
|
345 |
-
</body>
|
346 |
-
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|