Hugging Face's logo

Spaces:
Docfile
/
Mariam-cards
Running

App Files Community
1
Docfile commited on
Commit
09586cd
·
verified ·
1 Parent(s): 010586f

Delete templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +0 -323
templates/index.html DELETED
@@ -1,323 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mariam M-0 | Solution Mathématique</title>
7
-
8
- <!-- Tailwind CSS -->
9
- <script src="https://cdn.tailwindcss.com"></script>
10
-
11
- <!-- Babel -->
12
- <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
13
-
14
- <!-- KaTeX -->
15
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">
16
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script>
17
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"></script>
18
-
19
- <!-- Marked pour le Markdown -->
20
- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
21
-
22
- <!-- Police Space Grotesk -->
23
- <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap" rel="stylesheet">
24
-
25
- <style>
26
- body {
27
- font-family: 'Space Grotesk', sans-serif;
28
- }
29
- .katex { font-size: 1.1em; }
30
- .math-block { margin: 1em 0; }
31
- </style>
32
- </head>
33
- <body>
34
- <div id="root"></div>
35
-
36
- <script type="text/babel">
37
- // Définition des hooks (similaire à React)
38
- const useState = (initialValue) => {
39
- let value = initialValue;
40
- const setValue = (newValue) => {
41
- value = newValue;
42
- renderApp();
43
- };
44
- return [value, setValue];
45
- };
46
-
47
- const useRef = (initialValue) => {
48
- return { current: initialValue };
49
- };
50
-
51
- const useEffect = (callback, dependencies) => {
52
-
53
- useEffect.dependencies = useEffect.dependencies || [];
54
-
55
- let hasChanged = false;
56
- if (dependencies.length === 0) {
57
- hasChanged = true;
58
- } else {
59
- hasChanged = dependencies.some((dep, i) => {
60
- return useEffect.dependencies[i] !== dep;
61
- });
62
- }
63
-
64
- if (hasChanged) {
65
- useEffect.cleanup = useEffect.cleanup || callback();
66
- useEffect.dependencies = dependencies;
67
- }
68
- };
69
-
70
- // Fonction utilitaire pour rendre les formules LaTeX
71
- const renderMath = (content, isBlock = false) => {
72
- try {
73
- return katex.renderToString(content, {
74
- displayMode: isBlock,
75
- throwOnError: false,
76
- strict: false
77
- });
78
- } catch (e) {
79
- console.error('Erreur LaTeX:', e);
80
- return content;
81
- }
82
- };
83
-
84
- // Fonction pour traiter le contenu avec Markdown et LaTeX
85
- const processContent = (content) => {
86
- // Configuration de marked pour gérer LaTeX
87
- const renderer = new marked.Renderer();
88
-
89
- // Gestion des formules en ligne
90
- renderer.text = (text) => {
91
- return text.replace(/\$([^\$]+)\$/g, (match, latex) => {
92
- return renderMath(latex);
93
- });
94
- };
95
-
96
- // Gestion des blocs de formules
97
- renderer.paragraph = (text) => {
98
- const blockMathRegex = /\$\$([\s\S]+?)\$\$/g;
99
- text = text.replace(blockMathRegex, (match, latex) => {
100
- return `<div class="math-block">${renderMath(latex, true)}</div>`;
101
- });
102
- return `<p>${text}</p>`;
103
- };
104
-
105
- marked.setOptions({
106
- renderer: renderer,
107
- breaks: true,
108
- gfm: true
109
- });
110
-
111
- return marked(content);
112
- };
113
-
114
- function MathSolver() {
115
- const [file, setFile] = useState(null);
116
- const [loading, setLoading] = useState(false);
117
- const [showSolution, setShowSolution] = useState(false);
118
- const [previewUrl, setPreviewUrl] = useState('');
119
- const [thoughts, setThoughts] = useState('');
120
- const [answer, setAnswer] = useState('');
121
- const [isThoughtsOpen, setIsThoughtsOpen] = useState(true);
122
- const [elapsed, setElapsed] = useState(0);
123
-
124
- const timerRef = useRef(null);
125
- const startTimeRef = useRef(null);
126
- const thoughtsRef = useRef(null);
127
- const answerRef = useRef(null);
128
-
129
- const handleFileSelect = (selectedFile) => {
130
- if (!selectedFile) return;
131
- setFile(selectedFile);
132
- const reader = new FileReader();
133
- reader.onload = (e) => setPreviewUrl(e.target.result);
134
- reader.readAsDataURL(selectedFile);
135
- };
136
-
137
- const startTimer = () => {
138
- startTimeRef.current = Date.now();
139
- timerRef.current = setInterval(() => {
140
- setElapsed(Math.floor((Date.now() - startTimeRef.current) / 1000));
141
- }, 1000);
142
- };
143
-
144
- const stopTimer = () => {
145
- clearInterval(timerRef.current);
146
- startTimeRef.current = null;
147
- setElapsed(0);
148
- };
149
-
150
- // Mise à jour du contenu avec traitement LaTeX
151
- useEffect(() => {
152
- if (thoughtsRef.current) {
153
- thoughtsRef.current.innerHTML = processContent(thoughts);
154
- }
155
- if (answerRef.current) {
156
- answerRef.current.innerHTML = processContent(answer);
157
- }
158
- }, [thoughts, answer]);
159
-
160
- const handleSubmit = async (e) => {
161
- e.preventDefault();
162
- if (!file) {
163
- alert('Veuillez sélectionner une image.');
164
- return;
165
- }
166
-
167
- setLoading(true);
168
- startTimer();
169
- setShowSolution(false);
170
- setThoughts('');
171
- setAnswer('');
172
-
173
- const formData = new FormData();
174
- formData.append('image', file);
175
-
176
- try {
177
- const response = await fetch('/solve', {
178
- method: 'POST',
179
- body: formData
180
- });
181
-
182
- const reader = response.body.getReader();
183
- const decoder = new TextDecoder();
184
- let buffer = '';
185
- let currentMode = null;
186
-
187
- while (true) {
188
- const { done, value } = await reader.read();
189
- if (done) break;
190
-
191
- buffer += decoder.decode(value, { stream: true });
192
- const lines = buffer.split('\n\n');
193
- buffer = lines.pop();
194
-
195
- lines.forEach(line => {
196
- if (!line.startsWith('data:')) return;
197
- const data = JSON.parse(line.slice(5));
198
-
199
- if (data.mode) {
200
- currentMode = data.mode;
201
- setLoading(false);
202
- setShowSolution(true);
203
- }
204
-
205
- if (!data.content) return;
206
-
207
- if (currentMode === 'thinking') {
208
- setThoughts(prev => prev + data.content);
209
- } else if (currentMode === 'answering') {
210
- setAnswer(prev => prev + data.content);
211
- }
212
- });
213
- }
214
- } catch (error) {
215
- console.error('Erreur:', error);
216
- alert('Une erreur est survenue.');
217
- } finally {
218
- setLoading(false);
219
- stopTimer();
220
- }
221
- };
222
-
223
- useEffect(() => {
224
- return () => clearInterval(timerRef.current);
225
- }, []);
226
-
227
- return (
228
- `<div class="p-4">
229
- <div class="max-w-4xl mx-auto">
230
- <div class="p-6">
231
- <div class="text-center mb-8">
232
- <h1 class="text-4xl font-bold text-blue-600">Mariam M-0</h1>
233
- <p class="text-gray-600">Solution Mathématique Intelligente</p>
234
- </div>
235
-
236
- <form onsubmit="handleSubmit(event)" class="space-y-6">
237
- <div class="relative p-8 text-center bg-gray-50 border-2 border-dashed border-gray-300 hover:border-blue-500 transition-colors rounded-lg">
238
- <input
239
- type="file"
240
- onchange="handleFileSelect(event.target.files[0])"
241
- accept="image/*"
242
- class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
243
- />
244
- <div class="space-y-3">
245
- <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
246
- <svg class="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
247
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
248
- </svg>
249
- </div>
250
- <p class="text-gray-700 font-medium">Déposez votre image ici</p>
251
- <p class="text-gray-500 text-sm">ou cliquez pour sélectionner</p>
252
- </div>
253
- </div>
254
-
255
- ${previewUrl && (
256
- `<div class="text-center">
257
- <img src="${previewUrl}" alt="Prévisualisation" class="max-w-sm mx-auto h-auto object-contain" />
258
- </div>`
259
- )}
260
-
261
- <button
262
- type="submit"
263
- class="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors"
264
- >
265
- Résoudre le problème
266
- </button>
267
- </form>
268
-
269
- ${loading && (
270
- `<div class="mt-8 text-center">
271
- <div class="w-12 h-12 border-3 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto" />
272
- <p class="mt-4 text-gray-600">Analyse en cours...</p>
273
- </div>`
274
- )}
275
-
276
- ${showSolution && (
277
- `<div class="mt-8 space-y-6">
278
- <div class="border-t pt-4">
279
- <button
280
- onclick="setIsThoughtsOpen(!isThoughtsOpen)"
281
- class="w-full flex justify-between items-center p-2"
282
- >
283
- <span class="font-medium text-gray-700">Processus de Réflexion</span>
284
- ${elapsed > 0 && `<span class="text-blue-500 text-sm">${elapsed}s</span>`}
285
- </button>
286
- <div class="transition-all duration-300 overflow-hidden ${isThoughtsOpen ? 'max-h-96' : 'max-h-0'}">
287
- <div id="thoughtsRef" class="p-4 text-gray-600 overflow-y-auto" />
288
- </div>
289
- </div>
290
-
291
- <div class="border-t pt-6">
292
- <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
293
- <div id="answerRef" class="text-gray-700 overflow-y-auto max-h-96" />
294
- </div>
295
- </div>`
296
- )}
297
- </div>
298
- </div>
299
- </div>`
300
- );
301
- }
302
-
303
- // Fonction pour rendre l'application
304
- const renderApp = () => {
305
- const app = MathSolver();
306
- document.getElementById('root').innerHTML = app;
307
-
308
- // Récupération des éléments après le rendu
309
- thoughtsRef.current = document.getElementById('thoughtsRef');
310
- answerRef.current = document.getElementById('answerRef');
311
-
312
- // Exécution des effets après chaque rendu
313
- if(useEffect.cleanup) {
314
- useEffect.cleanup();
315
- useEffect.cleanup = null;
316
- }
317
- };
318
-
319
- // Premier rendu de l'application
320
- renderApp();
321
- </script>
322
- </body>
323
- </html>