| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>COVID-19 Data Prediction</title> |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" /> |
| </head> |
| <body> |
| <div class="container mt-5"> |
| <h1 class="mb-4">COVID-19 Data Prediction</h1> |
| <p>Enter the text to predict:</p> |
| <input type="text" id="textInput" class="form-control mb-3" placeholder="Text to predict"> |
| <button id="predictBtn" class="btn btn-primary">Predict</button> |
| </div> |
| <div class="container mt-4" id="resultContainer" style="display: none;"> |
| <h2>Prediction Result</h2> |
| <table class="table table-bordered"> |
| <thead> |
| <tr> |
| <th>Key</th> |
| <th>Value</th> |
| </tr> |
| </thead> |
| <tbody id="predictionTableBody"> |
| </tbody> |
| </table> |
| <button id="showMapBtn" class="btn btn-primary">Show Map</button> |
| <div id="map" class="mt-3" style="width: 100%; height: 400px;"></div> |
| </div> |
| |
| <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script> |
| <script> |
| $(document).ready(function() { |
| var map = null; |
| var predictionResult = null; |
| |
| $("#predictBtn").click(function() { |
| var inputText = $("#textInput").val(); |
| var apiUrl = "https://docfile-covid-19.hf.space/run/predict"; |
| var requestBody = { |
| data: [inputText] |
| }; |
| |
| $.ajax({ |
| type: "POST", |
| url: apiUrl, |
| headers: { "Content-Type": "application/json" }, |
| data: JSON.stringify(requestBody), |
| success: function(response) { |
| predictionResult = response.data[0]; |
| var translationMap = { |
| "country": "Pays", |
| "confirmed": "Confirmé", |
| "active": "Actif", |
| "deaths": "Décès", |
| "recovered": "Guéris", |
| "latitude": "Latitude", |
| "longitude": "Longitude" |
| |
| }; |
| |
| var predictionTable = ""; |
| |
| for (var key in predictionResult) { |
| var translatedKey = translationMap[key] || key; |
| var value = predictionResult[key] === null ? "Aucun" : predictionResult[key]; |
| predictionTable += "<tr><td>" + translatedKey + "</td><td>" + value + "</td></tr>"; |
| } |
| |
| $("#predictionTableBody").html(predictionTable); |
| $("#resultContainer").show(); |
| }, |
| error: function(error) { |
| console.error("Prediction error:", error); |
| } |
| }); |
| }); |
| |
| $("#showMapBtn").click(function() { |
| if (map === null && predictionResult !== null) { |
| var latitude = parseFloat(predictionResult.latitude); |
| var longitude = parseFloat(predictionResult.longitude); |
| |
| map = L.map('map').setView([latitude, longitude], 10); |
| |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' |
| }).addTo(map); |
| |
| L.marker([latitude, longitude]).addTo(map) |
| .bindPopup('Latitude: ' + latitude + '<br>Longitude: ' + longitude) |
| .openPopup(); |
| } |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
