Spaces:

Docfile
/

Jereflexion

Sleeping

App Files Files Community

Docfile commited on Jan 28

Commit

d8201c9

verified ·

1 Parent(s): cf07f0f

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +130 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,130 @@

+<!DOCTYPE html>
+<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>