|
|
<!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> |
|
|
|
