Spaces:

Docfile
/

Jereflexion

Sleeping

App Files Files Community

Docfile commited on Feb 1

Commit

db67e3f

verified ·

1 Parent(s): 306906f

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +302 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,302 @@

+ <!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 la bonne gestion des espaces et retours à la ligne sur mobile */
+    .markdown-content {
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    /* Styles pour le rendu Markdown en CSS natif */
+    .markdown-content h1 {
+      font-size: 1.5rem; /* text-2xl */
+      font-weight: 700;  /* font-bold */
+      margin-top: 1.5rem; /* mt-6 */
+      margin-bottom: 1rem; /* mb-4 */
+    }
+    .markdown-content h2 {
+      font-size: 1.25rem; /* text-xl */
+      font-weight: 700;
+      margin-top: 1.25rem; /* mt-5 */
+      margin-bottom: 0.75rem; /* mb-3 */
+    }
+    .markdown-content h3 {
+      font-size: 1.125rem; /* text-lg */
+      font-weight: 700;
+      margin-top: 1rem; /* mt-4 */
+      margin-bottom: 0.5rem; /* mb-2 */
+    }
+    .markdown-content p {
+      margin-bottom: 1rem; /* mb-4 */
+      line-height: 1.625; /* leading-relaxed */
+    }
+    .markdown-content ul {
+      list-style-type: disc;
+      margin-left: 1.5rem; /* ml-6 */
+      margin-bottom: 1rem; /* mb-4 */
+    }
+    .markdown-content ol {
+      list-style-type: decimal;
+      margin-left: 1.5rem;
+      margin-bottom: 1rem;
+    }
+    .markdown-content li {
+      margin-bottom: 0.25rem; /* mb-1 */
+    }
+    .markdown-content a {
+      color: #2563eb; /* text-blue-600 */
+      text-decoration: underline;
+    }
+    .markdown-content a:hover {
+      color: #1d4ed8; /* text-blue-800 */
+    }
+    .markdown-content blockquote {
+      padding-left: 1rem; /* pl-4 */
+      border-left: 4px solid #D1D5DB; /* border-gray-300 */
+      font-style: italic;
+      margin: 1rem 0; /* my-4 */
+    }
+    .markdown-content code:not(pre code) {
+      background-color: #F3F4F6; /* bg-gray-100 */
+      padding: 0 0.25rem; /* px-1 */
+      border-radius: 0.25rem; /* rounded */
+      font-size: 0.875rem; /* text-sm */
+      font-family: monospace;
+    }
+    .markdown-content pre {
+      background-color: #F3F4F6;
+      padding: 1rem; /* p-4 */
+      border-radius: 0.5rem; /* rounded-lg */
+      margin-bottom: 1rem; /* mb-4 */
+      overflow-x: auto;
+    }
+    .markdown-content table {
+      width: 100%;
+      border: 1px solid #D1D5DB; /* border-gray-300 */
+      margin-bottom: 1rem;
+      border-collapse: collapse;
+    }
+    .markdown-content th,
+    .markdown-content td {
+      border-bottom: 1px solid #D1D5DB;
+      padding: 0.5rem 1rem; /* px-4 py-2 */
+      text-align: left;
+    }
+    .markdown-content th {
+      background-color: #F3F4F6;
+    }
+    .markdown-content img {
+      max-width: 100%;
+      height: auto;
+      margin: 1rem 0;
+      border-radius: 0.5rem;
+    }
+  </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 relative">
+          <div class="flex items-center justify-between mb-4">
+            <h2 class="text-xl font-semibold text-gray-800">Réponse</h2>
+            <!-- Bouton Copier -->
+            <button
+              id="copyBtn"
+              class="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition-colors"
+              title="Copier la réponse"
+              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 copyBtn = document.getElementById('copyBtn');
+    // Bouton pour basculer l'affichage du raisonnement
+    toggleThinking.addEventListener('click', () => {
+      const isHidden = thinking.classList.contains('hidden');
+      thinking.classList.toggle('hidden');
+      toggleThinking.textContent = isHidden ? 'Masquer' : 'Afficher';
+      toggleThinking.setAttribute('aria-expanded', isHidden);
+    });
+    // Bouton Copier
+    copyBtn.addEventListener('click', () => {
+      // Crée un élément temporaire pour copier le texte brut (sans HTML)
+      const tempElement = document.createElement('textarea');
+      tempElement.value = answer.innerText;
+      document.body.appendChild(tempElement);
+      tempElement.select();
+      try {
+        document.execCommand('copy');
+        copyBtn.textContent = 'Copié';
+        setTimeout(() => {
+          copyBtn.textContent = 'Copier';
+        }, 1500);
+      } catch (err) {
+        console.error('Erreur lors de la copie :', err);
+      }
+      document.body.removeChild(tempElement);
+    });
+    // Gestion de la soumission de la question
+    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('Error:', 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>