Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Génération de Visualisation</title> | |
| </head> | |
| <body> | |
| <h1>Générateur de Graphiques</h1> | |
| <form id="uploadForm"> | |
| <label for="fileInput">Téléchargez un fichier Excel :</label> | |
| <input type="file" id="fileInput" accept=".xlsx" required> | |
| <label for="graphType">Choisissez le type de graphique :</label> | |
| <select id="graphType"> | |
| <option value="histplot">Histogramme</option> | |
| <option value="scatterplot">Nuage de points</option> | |
| <option value="lineplot">Courbe</option> | |
| <option value="barplot">Diagramme en barres</option> | |
| <option value="boxplot">Boîte à moustaches</option> | |
| </select> | |
| <button type="submit">Générer</button> | |
| </form> | |
| <h2>Résultat :</h2> | |
| <img id="resultImage" style="max-width: 100%; display: none;" alt="Visualisation générée"> | |
| <script> | |
| document.getElementById("uploadForm").addEventListener("submit", async function(event) { | |
| event.preventDefault(); | |
| let fileInput = document.getElementById("fileInput"); | |
| let graphType = document.getElementById("graphType").value; | |
| let formData = new FormData(); | |
| formData.append("file", fileInput.files[0]); | |
| formData.append("query", graphType); | |
| let response = await fetch("http://localhost:8000/generate_viz/", { | |
| method: "POST", | |
| body: formData | |
| }); | |
| if (response.ok) { | |
| let imageUrl = URL.createObjectURL(await response.blob()); | |
| let resultImage = document.getElementById("resultImage"); | |
| resultImage.src = imageUrl; | |
| resultImage.style.display = "block"; | |
| } else { | |
| alert("Erreur lors de la génération du graphique"); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |