Spaces:

Docfile
/

Jereflexion

Sleeping

App Files Files Community

Docfile commited on Feb 1

Commit

da1d472

verified ·

1 Parent(s): 73808fe

Create templates /index.html

Browse files

Files changed (1) hide show

templates /index.html +222 -0

templates /index.html ADDED Viewed

	@@ -0,0 +1,222 @@

+ <!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>
+  <!-- Intégration de Tailwind CSS -->
+  <script defer src="https://cdn.tailwindcss.com"></script>
+  <!-- Marked pour le rendu Markdown -->
+  <script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <!-- DOMPurify pour sécuriser le rendu HTML -->
+  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/purify.min.js"></script>
+  <!-- Highlight.js pour la coloration syntaxique -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
+  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></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;
+    }
+    /* Assurer un affichage correct des espaces et retours à la ligne sur mobile */
+    .markdown-content {
+      white-space: pre-wrap;
+    }
+    /* Utilisation des directives @apply de Tailwind pour le contenu Markdown */
+    .markdown-content h1 { @apply text-2xl font-bold mb-4 mt-6; }
+    .markdown-content h2 { @apply text-xl font-bold mb-3 mt-5; }
+    .markdown-content h3 { @apply text-lg font-bold mb-2 mt-4; }
+    .markdown-content p { @apply mb-4 leading-relaxed; }
+    .markdown-content ul { @apply list-disc ml-6 mb-4; }
+    .markdown-content ol { @apply list-decimal ml-6 mb-4; }
+    .markdown-content li { @apply mb-1; }
+    .markdown-content a { @apply text-blue-600 hover:text-blue-800 underline; }
+    .markdown-content blockquote { @apply pl-4 border-l-4 border-gray-300 italic my-4; }
+    .markdown-content code:not(pre code) { @apply bg-gray-100 px-1 rounded text-sm font-mono; }
+    .markdown-content pre { @apply bg-gray-100 p-4 rounded-lg mb-4 overflow-x-auto; }
+    .markdown-content table { @apply min-w-full border border-gray-300 mb-4; }
+    .markdown-content th { @apply bg-gray-100 border-b border-gray-300 px-4 py-2 text-left; }
+    .markdown-content td { @apply border-b border-gray-300 px-4 py-2; }
+    .markdown-content img { @apply max-w-full h-auto my-4 rounded-lg; }
+  </style>
+</head>
+<body class="min-h-screen bg-gray-50">
+  <!-- Barre de gradient fixe en haut de page -->
+  <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>
+    <main>
+      <section 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..."
+          aria-label="Zone de saisie de la question"
+        ></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"
+          aria-label="Obtenir une réponse"
+        >
+          <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" aria-hidden="true"></div>
+        </button>
+      </section>
+      <section id="responseContainer" class="space-y-6">
+        <article id="answerBox" 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">Réponse</h2>
+            <button
+              id="copyAnswer"
+              class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300 transition-colors duration-200 text-sm"
+              aria-label="Copier la réponse"
+            >
+              Copier
+            </button>
+          </div>
+          <div id="answer" class="markdown-content text-gray-700"></div>
+        </article>
+        <article 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 focus:outline-none"
+              aria-expanded="false"
+              aria-controls="thinking"
+            >
+              Afficher
+            </button>
+          </div>
+          <div id="thinking" class="hidden markdown-content text-gray-600"></div>
+        </article>
+      </section>
+    </main>
+  </div>
+  <script defer>
+    // Configuration de marked pour le rendu Markdown
+    marked.setOptions({
+      highlight: function(code, lang) {
+        if (lang && hljs.getLanguage(lang)) {
+          return hljs.highlight(code, { language: lang }).value;
+        }
+        return hljs.highlightAuto(code).value;
+      },
+      breaks: true,
+      gfm: true
+    });
+    /**
+     * Fonction pour rendre le Markdown de manière sécurisée.
+     * @param {string} content - Le contenu en Markdown.
+     * @returns {string} Le HTML rendu et sécurisé.
+     */
+    function renderMarkdown(content) {
+      const rawHtml = marked.parse(content);
+      return DOMPurify.sanitize(rawHtml);
+    }
+    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');
+    const copyAnswer = document.getElementById('copyAnswer');
+    toggleThinking.addEventListener('click', () => {
+      const isHidden = thinking.classList.contains('hidden');
+      thinking.classList.toggle('hidden');
+      toggleThinking.textContent = isHidden ? 'Masquer' : 'Afficher';
+      toggleThinking.setAttribute('aria-expanded', isHidden);
+    });
+    copyAnswer.addEventListener('click', () => {
+      const textToCopy = answer.innerText;
+      navigator.clipboard.writeText(textToCopy).then(() => {
+        copyAnswer.textContent = 'Copié';
+        setTimeout(() => {
+          copyAnswer.textContent = 'Copier';
+        }, 2000);
+      }).catch(err => {
+        console.error('Erreur lors de la copie :', err);
+      });
+    });
+    submitBtn.addEventListener('click', async () => {
+      const question = document.getElementById('question').value;
+      if (!question.trim()) return;
+      // Réinitialisation de l'interface utilisateur
+      answer.innerHTML = '';
+      thinking.innerHTML = '';
+      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 })
+        });
+        // Lecture du flux de réponse en continu
+        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.innerHTML = renderMarkdown(data.content);
+            } else if (data.type === 'answer') {
+              answerBox.classList.remove('hidden');
+              answer.innerHTML = renderMarkdown(data.content);
+              // Rafraîchissement de la coloration syntaxique pour les blocs de code
+              answer.querySelectorAll('pre code').forEach(block => {
+                hljs.highlightElement(block);
+              });
+            }
+          });
+        }
+      } catch (error) {
+        console.error('Erreur :', error);
+        answer.innerHTML = renderMarkdown("❌ Une erreur est survenue. Veuillez réessayer.");
+        answerBox.classList.remove('hidden');
+      } finally {
+        submitBtn.disabled = false;
+        spinner.classList.add('hidden');
+      }
+    });
+  </script>
+</body>
+</html>