Hugging Face's logo

Spaces:
Docfile
/
Jereflexion
Sleeping

App Files Community
Jereflexion
File size: 7,993 Bytes 
0a96b12
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
 
<!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;
    }

    /* 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">
          <h2 class="text-xl font-semibold text-gray-800 mb-4">Réponse</h2>
          <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');

    toggleThinking.addEventListener('click', () => {
      const isHidden = thinking.classList.contains('hidden');
      thinking.classList.toggle('hidden');
      toggleThinking.textContent = isHidden ? 'Masquer' : 'Afficher';
      toggleThinking.setAttribute('aria-expanded', isHidden);
    });

    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>