Hugging Face's logo

Spaces:
Docfile
/
Mariam-physiques
Sleeping

App Files Community
Docfile commited on
Commit
c8b9113
·
verified ·
1 Parent(s): 4c4251c

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +19 -59
templates/index.html CHANGED
@@ -1,6 +1,5 @@
1
  <!DOCTYPE html>
2
  <html lang="fr">
3
-
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,58 +10,7 @@
11
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
12
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
13
  <style>
14
- @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
15
-
16
- body {
17
- font-family: 'Poppins', sans-serif;
18
- }
19
-
20
- .loader {
21
- width: 48px;
22
- height: 48px;
23
- border: 5px solid #FFF;
24
- border-bottom-color: #3B82F6;
25
- border-radius: 50%;
26
- display: inline-block;
27
- box-sizing: border-box;
28
- animation: rotation 1s linear infinite;
29
- }
30
-
31
- @keyframes rotation {
32
- 0% {
33
- transform: rotate(0deg);
34
- }
35
-
36
- 100% {
37
- transform: rotate(360deg);
38
- }
39
- }
40
-
41
- .math-content {
42
- font-size: 1.1em;
43
- line-height: 1.6;
44
- overflow-x: auto;
45
- }
46
-
47
- .math-content p {
48
- margin-bottom: 1rem;
49
- }
50
-
51
- .math-content .MathJax {
52
- overflow-x: auto;
53
- overflow-y: hidden;
54
- padding: 0.5rem 0;
55
- }
56
-
57
- @media (max-width: 640px) {
58
- .math-content .MathJax {
59
- font-size: 0.9em;
60
- }
61
- }
62
-
63
- .math-hidden {
64
- visibility: hidden;
65
- }
66
  </style>
67
  <script>
68
  // Configuration de marked
@@ -159,7 +107,7 @@
159
  </div>
160
 
161
  <script>
162
- document.getElementById('image-input').addEventListener('change', function (e) {
163
  const file = e.target.files[0];
164
  if (file) {
165
  // Show preview
@@ -180,12 +128,24 @@
180
  const formData = new FormData();
181
  formData.append('image', file);
182
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
183
 
184
- const eventSource = new EventSource('/generate', {
185
- method: 'POST',
186
- body: formData
187
- });
188
-
189
  let completeResponse = '';
190
 
191
  eventSource.onmessage = function (event) {
 
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">
 
10
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
11
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
12
  <style>
13
+ /* ... (votre CSS ici) ... */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  </style>
15
  <script>
16
  // Configuration de marked
 
107
  </div>
108
 
109
  <script>
110
+ document.getElementById('image-input').addEventListener('change', async function (e) {
111
  const file = e.target.files[0];
112
  if (file) {
113
  // Show preview
 
128
  const formData = new FormData();
129
  formData.append('image', file);
130
 
131
+ // Envoyer l'image avec fetch
132
+ const response = await fetch('/generate', {
133
+ method: 'POST',
134
+ body: formData
135
+ });
136
+
137
+ const data = await response.json();
138
+
139
+ if (data.error) {
140
+ console.error('Erreur:', data.error);
141
+ document.getElementById('loading').classList.add('hidden');
142
+ document.getElementById('result').innerHTML = data.error;
143
+ return;
144
+ }
145
+
146
+ // Se connecter à la route de streaming avec EventSource
147
+ const eventSource = new EventSource(`/stream/${data.request_id}`);
148
 
 
 
 
 
 
149
  let completeResponse = '';
150
 
151
  eventSource.onmessage = function (event) {