Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mariam M-0</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); | |
| background-size: 400% 400%; | |
| animation: gradient 15s ease infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50"> | |
| <div class="gradient-bg h-2 w-full fixed top-0"></div> | |
| <div class="max-w-4xl mx-auto px-4 py-8"> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-2">Mariam M-0</h1> | |
| <p class="text-gray-600">Votre assistant IA personnel</p> | |
| </header> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-8"> | |
| <textarea | |
| id="question" | |
| class="w-full h-32 p-4 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none" | |
| placeholder="Posez votre question ici..." | |
| ></textarea> | |
| <button | |
| id="submitBtn" | |
| class="mt-4 px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-blue-700 transition-all duration-200 flex items-center justify-center w-full sm:w-auto" | |
| > | |
| <span>Obtenir une réponse</span> | |
| <div id="spinner" class="hidden ml-3 animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div> | |
| </button> | |
| </div> | |
| <div id="responseContainer" class="space-y-6"> | |
| <div id="answerBox" class="hidden bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Réponse</h2> | |
| <div id="answer" class="text-gray-700 prose prose-sm max-w-none"></div> | |
| </div> | |
| <div id="thinkingBox" class="hidden bg-white rounded-xl shadow-lg p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-semibold text-gray-800">Raisonnement</h2> | |
| <button id="toggleThinking" class="text-blue-500 hover:text-blue-600"> | |
| Afficher | |
| </button> | |
| </div> | |
| <div id="thinking" class="hidden text-gray-600 prose prose-sm max-w-none"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const submitBtn = document.getElementById('submitBtn'); | |
| const spinner = document.getElementById('spinner'); | |
| const answerBox = document.getElementById('answerBox'); | |
| const thinkingBox = document.getElementById('thinkingBox'); | |
| const answer = document.getElementById('answer'); | |
| const thinking = document.getElementById('thinking'); | |
| const toggleThinking = document.getElementById('toggleThinking'); | |
| toggleThinking.addEventListener('click', () => { | |
| const isHidden = thinking.classList.contains('hidden'); | |
| thinking.classList.toggle('hidden'); | |
| toggleThinking.textContent = isHidden ? 'Masquer' : 'Afficher'; | |
| }); | |
| submitBtn.addEventListener('click', async () => { | |
| const question = document.getElementById('question').value; | |
| if (!question.trim()) return; | |
| // Reset UI | |
| answer.textContent = ''; | |
| thinking.textContent = ''; | |
| submitBtn.disabled = true; | |
| spinner.classList.remove('hidden'); | |
| answerBox.classList.add('hidden'); | |
| thinkingBox.classList.add('hidden'); | |
| try { | |
| const response = await fetch('/ask', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ question }), | |
| }); | |
| const reader = response.body.getReader(); | |
| const decoder = new TextDecoder(); | |
| while (true) { | |
| const { done, value } = await reader.read(); | |
| if (done) break; | |
| const chunks = decoder.decode(value).split('\n'); | |
| chunks.forEach(chunk => { | |
| if (!chunk) return; | |
| const data = JSON.parse(chunk); | |
| if (data.type === 'thinking') { | |
| thinkingBox.classList.remove('hidden'); | |
| thinking.textContent = data.content; | |
| } else if (data.type === 'answer') { | |
| answerBox.classList.remove('hidden'); | |
| answer.textContent = data.content; | |
| } | |
| }); | |
| } | |
| } catch (error) { | |
| console.error('Error:', error); | |
| answer.textContent = "Une erreur est survenue. Veuillez réessayer."; | |
| } finally { | |
| submitBtn.disabled = false; | |
| spinner.classList.add('hidden'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |