Spaces:

Docfile
/

Covid

Running

App Files Files Community

Docfile commited on Aug 19, 2023

Commit

04aab93

1 Parent(s): ae52d5c

Update index.html

Browse files

Files changed (1) hide show

index.html +99 -17

index.html CHANGED Viewed

@@ -1,19 +1,101 @@
 <!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!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"
+                            // Ajoutez d'autres traductions si nécessaire
+                        };
+                        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: '&copy; <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>