Hugging Face's logo

Spaces:
Docfile
/
Jereflexion
Sleeping

App Files Community
Docfile commited on
Commit
95fcde1
·
verified ·
1 Parent(s): d8201c9

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +49 -7
templates/index.html CHANGED
@@ -5,6 +5,10 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Mariam M-0</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
 
 
 
8
  <style>
9
  @keyframes gradient {
10
  0% { background-position: 0% 50%; }
@@ -16,6 +20,22 @@
16
  background-size: 400% 400%;
17
  animation: gradient 15s ease infinite;
18
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </style>
20
  </head>
21
  <body class="min-h-screen bg-gray-50">
@@ -45,7 +65,7 @@
45
  <div id="responseContainer" class="space-y-6">
46
  <div id="answerBox" class="hidden bg-white rounded-xl shadow-lg p-6">
47
  <h2 class="text-xl font-semibold text-gray-800 mb-4">Réponse</h2>
48
- <div id="answer" class="text-gray-700 prose prose-sm max-w-none"></div>
49
  </div>
50
 
51
  <div id="thinkingBox" class="hidden bg-white rounded-xl shadow-lg p-6">
@@ -55,12 +75,30 @@
55
  Afficher
56
  </button>
57
  </div>
58
- <div id="thinking" class="hidden text-gray-600 prose prose-sm max-w-none"></div>
59
  </div>
60
  </div>
61
  </div>
62
 
63
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  const submitBtn = document.getElementById('submitBtn');
65
  const spinner = document.getElementById('spinner');
66
  const answerBox = document.getElementById('answerBox');
@@ -80,8 +118,8 @@
80
  if (!question.trim()) return;
81
 
82
  // Reset UI
83
- answer.textContent = '';
84
- thinking.textContent = '';
85
  submitBtn.disabled = true;
86
  spinner.classList.remove('hidden');
87
  answerBox.classList.add('hidden');
@@ -110,16 +148,20 @@
110
  const data = JSON.parse(chunk);
111
  if (data.type === 'thinking') {
112
  thinkingBox.classList.remove('hidden');
113
- thinking.textContent = data.content;
114
  } else if (data.type === 'answer') {
115
  answerBox.classList.remove('hidden');
116
- answer.textContent = data.content;
 
 
 
 
117
  }
118
  });
119
  }
120
  } catch (error) {
121
  console.error('Error:', error);
122
- answer.textContent = "Une erreur est survenue. Veuillez réessayer.";
123
  } finally {
124
  submitBtn.disabled = false;
125
  spinner.classList.add('hidden');
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Mariam M-0</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/purify.min.js"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
12
  <style>
13
  @keyframes gradient {
14
  0% { background-position: 0% 50%; }
 
20
  background-size: 400% 400%;
21
  animation: gradient 15s ease infinite;
22
  }
23
+
24
+ .markdown-content h1 { @apply text-2xl font-bold mb-4 mt-6; }
25
+ .markdown-content h2 { @apply text-xl font-bold mb-3 mt-5; }
26
+ .markdown-content h3 { @apply text-lg font-bold mb-2 mt-4; }
27
+ .markdown-content p { @apply mb-4 leading-relaxed; }
28
+ .markdown-content ul { @apply list-disc ml-6 mb-4; }
29
+ .markdown-content ol { @apply list-decimal ml-6 mb-4; }
30
+ .markdown-content li { @apply mb-1; }
31
+ .markdown-content a { @apply text-blue-600 hover:text-blue-800 underline; }
32
+ .markdown-content blockquote { @apply pl-4 border-l-4 border-gray-300 italic my-4; }
33
+ .markdown-content code:not(pre code) { @apply bg-gray-100 px-1 rounded text-sm font-mono; }
34
+ .markdown-content pre { @apply bg-gray-100 p-4 rounded-lg mb-4 overflow-x-auto; }
35
+ .markdown-content table { @apply min-w-full border border-gray-300 mb-4; }
36
+ .markdown-content th { @apply bg-gray-100 border-b border-gray-300 px-4 py-2 text-left; }
37
+ .markdown-content td { @apply border-b border-gray-300 px-4 py-2; }
38
+ .markdown-content img { @apply max-w-full h-auto my-4 rounded-lg; }
39
  </style>
40
  </head>
41
  <body class="min-h-screen bg-gray-50">
 
65
  <div id="responseContainer" class="space-y-6">
66
  <div id="answerBox" class="hidden bg-white rounded-xl shadow-lg p-6">
67
  <h2 class="text-xl font-semibold text-gray-800 mb-4">Réponse</h2>
68
+ <div id="answer" class="markdown-content text-gray-700"></div>
69
  </div>
70
 
71
  <div id="thinkingBox" class="hidden bg-white rounded-xl shadow-lg p-6">
 
75
  Afficher
76
  </button>
77
  </div>
78
+ <div id="thinking" class="hidden markdown-content text-gray-600"></div>
79
  </div>
80
  </div>
81
  </div>
82
 
83
  <script>
84
+ // Configuration de marked
85
+ marked.setOptions({
86
+ highlight: function(code, lang) {
87
+ if (lang && hljs.getLanguage(lang)) {
88
+ return hljs.highlight(code, { language: lang }).value;
89
+ }
90
+ return hljs.highlightAuto(code).value;
91
+ },
92
+ breaks: true,
93
+ gfm: true
94
+ });
95
+
96
+ // Fonction pour rendre le Markdown de manière sécurisée
97
+ function renderMarkdown(content) {
98
+ const rawHtml = marked.parse(content);
99
+ return DOMPurify.sanitize(rawHtml);
100
+ }
101
+
102
  const submitBtn = document.getElementById('submitBtn');
103
  const spinner = document.getElementById('spinner');
104
  const answerBox = document.getElementById('answerBox');
 
118
  if (!question.trim()) return;
119
 
120
  // Reset UI
121
+ answer.innerHTML = '';
122
+ thinking.innerHTML = '';
123
  submitBtn.disabled = true;
124
  spinner.classList.remove('hidden');
125
  answerBox.classList.add('hidden');
 
148
  const data = JSON.parse(chunk);
149
  if (data.type === 'thinking') {
150
  thinkingBox.classList.remove('hidden');
151
+ thinking.innerHTML = renderMarkdown(data.content);
152
  } else if (data.type === 'answer') {
153
  answerBox.classList.remove('hidden');
154
+ answer.innerHTML = renderMarkdown(data.content);
155
+ // Mettre à jour la coloration syntaxique pour les nouveaux blocs de code
156
+ answer.querySelectorAll('pre code').forEach((block) => {
157
+ hljs.highlightBlock(block);
158
+ });
159
  }
160
  });
161
  }
162
  } catch (error) {
163
  console.error('Error:', error);
164
+ answer.innerHTML = renderMarkdown("❌ Une erreur est survenue. Veuillez réessayer.");
165
  } finally {
166
  submitBtn.disabled = false;
167
  spinner.classList.add('hidden');