Hugging Face's logo

Spaces:
Docfile
/
Maths
Running

App Files Community
Docfile commited on
Commit
5c971ad
·
verified ·
1 Parent(s): 1ea59f1

Update templates/math.html

Browse files
Files changed (1) hide show
  1. templates/math.html +54 -1
templates/math.html CHANGED
@@ -25,19 +25,32 @@
25
  padding: 20px;
26
  border: 1px solid #eee;
27
  }
 
 
 
 
 
 
 
 
 
28
  </style>
29
  </head>
30
  <body>
31
  <div class="container">
32
  <h1>Résolution de problème mathématique</h1>
33
  <div class="upload-form">
34
- <form id="uploadForm" action="/upload" method="POST" enctype="multipart/form-data">
35
  <input type="file" id="imageInput" name="image" accept="image/*" onchange="previewImage(event)">
36
  <br><br>
37
  <img id="preview" style="display: none;">
38
  <br>
39
  <button type="submit">Analyser l'image</button>
40
  </form>
 
 
 
 
41
  </div>
42
  <div id="result" class="result"></div>
43
  </div>
@@ -57,6 +70,46 @@
57
  reader.readAsDataURL(file);
58
  }
59
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
  </script>
61
  </body>
62
  </html>
 
25
  padding: 20px;
26
  border: 1px solid #eee;
27
  }
28
+ .loading {
29
+ display: none;
30
+ margin: 20px 0;
31
+ }
32
+ .error-message {
33
+ color: red;
34
+ margin-top: 10px;
35
+ display: none;
36
+ }
37
  </style>
38
  </head>
39
  <body>
40
  <div class="container">
41
  <h1>Résolution de problème mathématique</h1>
42
  <div class="upload-form">
43
+ <form id="uploadForm" enctype="multipart/form-data">
44
  <input type="file" id="imageInput" name="image" accept="image/*" onchange="previewImage(event)">
45
  <br><br>
46
  <img id="preview" style="display: none;">
47
  <br>
48
  <button type="submit">Analyser l'image</button>
49
  </form>
50
+ <div id="loading" class="loading">
51
+ Analyse en cours... Cette opération peut prendre quelques instants.
52
+ </div>
53
+ <div id="errorMessage" class="error-message"></div>
54
  </div>
55
  <div id="result" class="result"></div>
56
  </div>
 
70
  reader.readAsDataURL(file);
71
  }
72
  }
73
+
74
+ document.getElementById('uploadForm').addEventListener('submit', function(e) {
75
+ e.preventDefault(); // Empêche le rechargement de la page
76
+
77
+ const formData = new FormData(this);
78
+ const loading = document.getElementById('loading');
79
+ const result = document.getElementById('result');
80
+ const errorMessage = document.getElementById('errorMessage');
81
+
82
+ // Afficher le message de chargement
83
+ loading.style.display = 'block';
84
+ errorMessage.style.display = 'none';
85
+ result.innerHTML = '';
86
+
87
+ fetch('/upload', {
88
+ method: 'POST',
89
+ body: formData
90
+ })
91
+ .then(response => response.json())
92
+ .then(data => {
93
+ loading.style.display = 'none';
94
+
95
+ if (data.error) {
96
+ errorMessage.textContent = data.error;
97
+ errorMessage.style.display = 'block';
98
+ } else {
99
+ result.innerHTML = data.result;
100
+ // Recharger MathJax pour le nouveau contenu
101
+ if (window.MathJax) {
102
+ MathJax.Hub.Queue(["Typeset", MathJax.Hub, result]);
103
+ }
104
+ }
105
+ })
106
+ .catch(error => {
107
+ loading.style.display = 'none';
108
+ errorMessage.textContent = "Une erreur s'est produite lors de l'analyse.";
109
+ errorMessage.style.display = 'block';
110
+ console.error('Erreur:', error);
111
+ });
112
+ });
113
  </script>
114
  </body>
115
  </html>