Hugging Face's logo

Spaces:
Docfile
/
Mariam-physiques
Sleeping

App Files Community
Docfile commited on
Commit
1b71f43
·
verified ·
1 Parent(s): 3f35d09

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +206 -44
templates/index.html CHANGED
@@ -1,62 +1,224 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
4
- <title>Mariam AI</title>
5
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTL/LY/sVhVKg8tvkGTl/mmexC3wpUdSZvKYE2qX" crossorigin="anonymous">
6
- <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amWiwIj8VZkb9rmKa9b9lhVencyWv" crossorigin="anonymous"></script>
7
- <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
8
- onload="renderMathInElement(document.body);"></script>
9
-
10
  <style>
 
 
 
 
 
 
 
11
  body {
12
- font-family: sans-serif;
13
- margin: 20px;
 
 
 
 
14
  }
15
- #navbar {
16
- background-color: #f0f0f0;
17
- padding: 10px;
18
- margin-bottom: 20px;
19
- border-radius: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  }
21
- #output {
22
- padding: 15px;
23
- border: 1px solid #ddd;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  border-radius: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  }
26
  </style>
27
  </head>
28
  <body>
29
- <div id="navbar">
30
- <h1>Mariam AI</h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  </div>
32
 
33
- <form method="POST" enctype="multipart/form-data">
34
- <input type="file" name="image">
35
- <input type="submit" value="Résoudre">
36
- </form>
37
- <div id="output">
38
- {{ e | safe }}
39
  </div>
40
 
 
 
 
 
 
 
 
 
 
 
 
41
 
42
- <script>
43
- // Configuration KaTeX – à mettre APRÈS le chargement de la page et du contenu
44
- window.addEventListener('load', function() { // Assurez-vous que le contenu est chargé
45
- renderMathInElement(document.body, {
46
- delimiters: [
47
- {left: "$$", right: "$$", display: true},
48
- {left: "$", right: "$", display: false},
49
- {left: "\\[", right: "\\]", display: true},
50
- {left: "\\(", right: "\\)", display: false}, // Ajouté
51
- {left: "\\begin{equation}", right: "\\end{equation}", display: true},
52
- {left: "\\begin{align}", right: "\\end{align}", display: true},
53
- {left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
54
- {left: "\\begin{gather}", right: "\\end{gather}", display: true},
55
- {left: "\\begin{CD}", right: "\\end{CD}", display: true},
56
- ],
57
- throwOnError: false // Important pour éviter les erreurs avec chemfig
58
- });
59
- });
60
- </script>
61
  </body>
62
  </html>
 
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 AI - Résolution d'exercices</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
 
 
8
  <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ font-family: 'Poppins', sans-serif;
14
+ }
15
+
16
  body {
17
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
18
+ min-height: 100vh;
19
+ display: flex;
20
+ flex-direction: column;
21
+ align-items: center;
22
+ padding: 2rem;
23
  }
24
+
25
+ .container {
26
+ max-width: 800px;
27
+ width: 100%;
28
+ background: rgba(255, 255, 255, 0.95);
29
+ padding: 2rem;
30
+ border-radius: 20px;
31
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
32
+ backdrop-filter: blur(4px);
33
+ }
34
+
35
+ .header {
36
+ text-align: center;
37
+ margin-bottom: 2rem;
38
+ }
39
+
40
+ .header h1 {
41
+ color: #1a1a1a;
42
+ font-size: 2.5rem;
43
+ margin-bottom: 0.5rem;
44
+ background: linear-gradient(45deg, #2193b0, #6dd5ed);
45
+ -webkit-background-clip: text;
46
+ -webkit-text-fill-color: transparent;
47
+ }
48
+
49
+ .header p {
50
+ color: #666;
51
+ font-size: 1.1rem;
52
+ }
53
+
54
+ .upload-section {
55
+ display: flex;
56
+ flex-direction: column;
57
+ align-items: center;
58
+ gap: 1.5rem;
59
+ margin-bottom: 2rem;
60
+ }
61
+
62
+ .file-upload {
63
+ position: relative;
64
+ display: inline-block;
65
+ }
66
+
67
+ .file-upload input[type="file"] {
68
+ display: none;
69
+ }
70
+
71
+ .upload-btn {
72
+ padding: 1rem 2rem;
73
+ background: linear-gradient(45deg, #2193b0, #6dd5ed);
74
+ color: white;
75
+ border-radius: 50px;
76
+ cursor: pointer;
77
+ transition: all 0.3s ease;
78
+ font-weight: 500;
79
+ display: inline-flex;
80
+ align-items: center;
81
+ gap: 0.5rem;
82
+ }
83
+
84
+ .upload-btn:hover {
85
+ transform: translateY(-2px);
86
+ box-shadow: 0 5px 15px rgba(33, 147, 176, 0.3);
87
  }
88
+
89
+ .submit-btn {
90
+ padding: 1rem 3rem;
91
+ background: linear-gradient(45deg, #2193b0, #6dd5ed);
92
+ color: white;
93
+ border: none;
94
+ border-radius: 50px;
95
+ cursor: pointer;
96
+ font-weight: 500;
97
+ transition: all 0.3s ease;
98
+ }
99
+
100
+ .submit-btn:hover {
101
+ transform: translateY(-2px);
102
+ box-shadow: 0 5px 15px rgba(33, 147, 176, 0.3);
103
+ }
104
+
105
+ .result {
106
+ margin-top: 2rem;
107
+ padding: 1.5rem;
108
+ background: #f8f9fa;
109
+ border-radius: 10px;
110
+ min-height: 100px;
111
+ }
112
+
113
+ .loading {
114
+ display: none;
115
+ position: fixed;
116
+ top: 0;
117
+ left: 0;
118
+ width: 100%;
119
+ height: 100%;
120
+ background: rgba(255, 255, 255, 0.9);
121
+ justify-content: center;
122
+ align-items: center;
123
+ z-index: 1000;
124
+ }
125
+
126
+ .loading-content {
127
+ text-align: center;
128
+ }
129
+
130
+ .spinner {
131
+ width: 50px;
132
+ height: 50px;
133
+ border: 5px solid #f3f3f3;
134
+ border-top: 5px solid #2193b0;
135
+ border-radius: 50%;
136
+ animation: spin 1s linear infinite;
137
+ margin: 0 auto 1rem;
138
+ }
139
+
140
+ @keyframes spin {
141
+ 0% { transform: rotate(0deg); }
142
+ 100% { transform: rotate(360deg); }
143
+ }
144
+
145
+ .selected-file {
146
+ display: none;
147
+ margin-top: 1rem;
148
+ padding: 0.5rem 1rem;
149
+ background: #e9ecef;
150
  border-radius: 5px;
151
+ font-size: 0.9rem;
152
+ color: #495057;
153
+ }
154
+
155
+ @media (max-width: 768px) {
156
+ .container {
157
+ padding: 1.5rem;
158
+ }
159
+
160
+ .header h1 {
161
+ font-size: 2rem;
162
+ }
163
+
164
+ .upload-btn, .submit-btn {
165
+ padding: 0.8rem 1.5rem;
166
+ }
167
  }
168
  </style>
169
  </head>
170
  <body>
171
+ <div class="container">
172
+ <div class="header">
173
+ <h1>Mariam AI</h1>
174
+ <p>Assistant de résolution d'exercices</p>
175
+ </div>
176
+
177
+ <form method="post" enctype="multipart/form-data" id="uploadForm">
178
+ <div class="upload-section">
179
+ <div class="file-upload">
180
+ <label for="image" class="upload-btn">
181
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
182
+ <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
183
+ <polyline points="17 8 12 3 7 8"></polyline>
184
+ <line x1="12" y1="3" x2="12" y2="15"></line>
185
+ </svg>
186
+ Sélectionner une image
187
+ </label>
188
+ <input type="file" name="image" id="image" accept="image/*" required>
189
+ </div>
190
+ <div class="selected-file" id="selectedFile"></div>
191
+ <button type="submit" class="submit-btn">Analyser</button>
192
+ </div>
193
+ </form>
194
+
195
+ <div class="result">
196
+ {{ e | safe }}
197
+ </div>
198
  </div>
199
 
200
+ <div class="loading" id="loading">
201
+ <div class="loading-content">
202
+ <div class="spinner"></div>
203
+ <p>Analyse en cours...</p>
204
+ </div>
 
205
  </div>
206
 
207
+ <script>
208
+ document.getElementById('image').addEventListener('change', function(e) {
209
+ const fileName = e.target.files[0]?.name;
210
+ const selectedFile = document.getElementById('selectedFile');
211
+ if (fileName) {
212
+ selectedFile.textContent = `Fichier sélectionné : ${fileName}`;
213
+ selectedFile.style.display = 'block';
214
+ } else {
215
+ selectedFile.style.display = 'none';
216
+ }
217
+ });
218
 
219
+ document.getElementById('uploadForm').addEventListener('submit', function() {
220
+ document.getElementById('loading').style.display = 'flex';
221
+ });
222
+ </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
223
  </body>
224
  </html>