Hugging Face's logo

Spaces:
FatimaGr
/
AI_Web_Dev1
Sleeping

App Files Community
FatimaGr commited on
Commit
8f9b073
·
verified ·
1 Parent(s): ced8e24

add

Browse files
Files changed (1) hide show
  1. static/index.html +50 -91
static/index.html CHANGED
@@ -1,97 +1,56 @@
 
 
1
  <head>
2
  <meta charset="UTF-8">
3
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
4
- <title>Analyse de Documents et d'Images</title>
5
- <style>
6
- body { font-family: Arial, sans-serif; text-align: center; margin: 20px; }
7
- input, button, select { margin: 10px; padding: 10px; }
8
- #result { margin-top: 20px; font-weight: bold; white-space: pre-wrap; }
9
- img { max-width: 100%; margin-top: 20px; }
10
- #translateContainer {
11
- border: 2px solid #ddd;
12
-
13
-
14
-
15
-
16
-
17
-
18
- padding: 20px;
19
- border-radius: 10px;
20
- width: 50%;
21
- margin: auto;
22
- background-color: #f9f9f9;
23
-
24
-
25
- }
26
- input[type="file"] {
27
- margin: 10px 0;
28
-
29
-
30
-
31
-
32
-
33
- }
34
- button {
35
- padding: 10px 15px;
36
- font-size: 16px;
37
- cursor: pointer;
38
- border: none;
39
- border-radius: 5px;
40
- background-color: #007bff;
41
- color: white;
42
-
43
-
44
- }
45
- button:hover {
46
- background-color: #0056b3;
47
- }
48
- #translateResult {
49
- margin-top: 20px;
50
- font-weight: bold;
51
- color: #333;
52
- }
53
- #loading {
54
- display: none;
55
- font-size: 16px;
56
- color: #ff6600;
57
- font-weight: bold;
58
- }
59
- </style>
60
  </head>
61
  <body>
62
-
63
- <h2>Upload un fichier pour analyse</h2>
64
-
65
- <h3>📄 Résumé de Document</h3>
66
- <input type="file" id="documentInput" accept=".pdf, .docx, .pptx, .xlsx">
67
- <button onclick="uploadDocument()">Analyser</button>
68
- <p id="documentResult">Aucun résumé disponible</p>
69
-
70
- <h3>🖼️ Interprétation d'Image</h3>
71
- <input type="file" id="imageInput" accept="image/*">
72
- <button onclick="uploadImage()">Analyser</button>
73
- <p id="imageResult">Aucune interprétation disponible</p>
74
- <img id="uploadedImage" style="display: none;">
75
-
76
-
77
-
78
- <h3>🌍 Traduction de Document</h3>
79
- <div id="translateContainer">
80
- <input type="file" id="translateInput" accept=".pdf, .docx, .txt, .xlsx">
81
- <select id="targetLang">
82
- <option value="fr">Français</option>
83
- <option value="en">Anglais</option>
84
- <option value="es">Espagnol</option>
85
- <option value="de">Allemand</option>
86
- </select>
87
- <button onclick="uploadForTranslation()">Traduire</button>
88
- <p id="translateResult">Aucune traduction disponible</p>
89
- </div>
90
-
91
-
92
-
93
-
94
- <script src="app.js"></script>
95
-
 
 
 
 
 
 
 
 
 
 
 
96
  </body>
97
- </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>Génération de Visualisation</title>
7
+ <script defer src="script.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </head>
9
  <body>
10
+ <h1>Générateur de Graphiques</h1>
11
+ <form id="uploadForm">
12
+ <label for="fileInput">Téléchargez un fichier Excel :</label>
13
+ <input type="file" id="fileInput" accept=".xlsx" required>
14
+
15
+ <label for="graphType">Choisissez le type de graphique :</label>
16
+ <select id="graphType">
17
+ <option value="histplot">Histogramme</option>
18
+ <option value="scatterplot">Nuage de points</option>
19
+ <option value="lineplot">Courbe</option>
20
+ <option value="barplot">Diagramme en barres</option>
21
+ <option value="boxplot">Boîte à moustaches</option>
22
+
23
+ </select>
24
+
25
+ <button type="submit">Générer</button>
26
+ </form>
27
+ <h2>Résultat :</h2>
28
+ <img id="resultImage" style="max-width: 100%; display: none;" alt="Visualisation générée">
29
+
30
+ <script>
31
+ document.getElementById("uploadForm").addEventListener("submit", async function(event) {
32
+ event.preventDefault();
33
+ let fileInput = document.getElementById("fileInput");
34
+ let graphType = document.getElementById("graphType").value;
35
+ let formData = new FormData();
36
+ formData.append("file", fileInput.files[0]);
37
+ formData.append("query", graphType);
38
+
39
+ let response = await fetch("http://aiwebdev-ai-web-dev.hf.space/generate_viz/", {
40
+
41
+ method: "POST",
42
+ body: formData
43
+ });
44
+
45
+ if (response.ok) {
46
+ let imageUrl = URL.createObjectURL(await response.blob());
47
+ let resultImage = document.getElementById("resultImage");
48
+ resultImage.src = imageUrl;
49
+ resultImage.style.display = "block";
50
+ } else {
51
+ alert("Erreur lors de la génération du graphique");
52
+ }
53
+ });
54
+ </script>
55
  </body>
56
+ </html>