satriamjati/Basic-Forecasting
0
1<!DOCTYPE html>2<html lang="en">3 <head>4 <meta charset="UTF-8" />5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />7 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />8 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>9 <title>Monthly Temperature Prediction Application</title>10 </head>11 12 <body>13 <div class="bg-black text-white flex flex-row justify-end py-1">14 <button class="mx-8 font-bold tablink active rounded-2xl p-2 hover:bg-purple-500 duration-150" onclick="openModel(event, 'Model1')">Linear Regression</button>15 <button class="mx-8 font-bold tablink rounded-2xl p-2 hover:bg-purple-500 duration-150" onclick="openModel(event, 'Model2')">Auto ARIMA</button>16 </div>17 18 <div id="Model1" class="Model bg-gradient-to-r from-purple-400 to-purple-700 text-gray-800">19 <section class="flex flex-col justify-between item-center p-8 min-h-screen md:flex-row">20 <main class="bg-white p-16 rounded-lg">21 <h1 class="text-3xl font-bold mb-8">Predict the Temperature:</h1>22 23 <form enctype="multipart/form-data" class="flex flex-col" id="upload_form">24 <!-- <label for="age" class="mb-2">Age</label>25 <input type="text" name="age" placeholder="Age" required="required" class="p-4 bg-gray-100 rounded-md" /> -->26 27 <label for="predict_month" class="mt-4 mb-2">Month:</label>28 <select id="predict_month" name="predict_month" class="p-4 bg-gray-100 rounded-md">29 <option value="1">January</option>30 <option value="2">February</option>31 <option value="3">March</option>32 <option value="4">April</option>33 <option value="5" selected>May</option>34 <option value="6">June</option>35 <option value="7">July</option>36 <option value="8">August</option>37 <option value="9">September</option>38 <option value="10">October</option>39 <option value="11">November</option>40 <option value="12">December</option>41 </select>42 43 <label for="predict_year" class="mt-4 mb-2">Year:</label>44 <select id="predict_year" name="predict_year" class="p-4 bg-gray-100 rounded-md">45 <option value="2024">2024</option>46 <option value="2025">2025</option>47 <option value="2026">2026</option>48 </select>49 50 <button type="submit" class="flex justify-center align-center mt-8 p-4 bg-gradient-to-r from-purple-400 to-purple-700 text-white rounded-md">51 PREDICT NOW<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right ml-4">52 <line x1="5" y1="12" x2="19" y2="12"></line>53 <polyline points="12 5 19 12 12 19"></polyline>54 </svg>55 </button>56 </form>57 <p>*No earlier than May 2024 as data trained from January 2000 until April 2024.</p>58 </main>59 <section class="mt-8 h-full flex-auto rounded-lg md:mt-0 md:ml-8">60 <div class="bg-white p-16 rounded-lg">61 <h1 class="text-2xl mb-8">Temperature at Department of Informatics, Institut Teknologi Sepuluh Nopember:</h1>62 <h2 class="text-5xl font-bold"><span id="T2M">??.?? celcius</span></h2>63 <div class="mt-8">64 <p id="respMonth"></p>65 <p id="respYear"></p>66 </div>67 </div>68 <div class="flex justify-around p-16 rounded-lg mt-8">69 <img class="h-24 md:h-28" src="https://elib.its.ac.id/conf/cyberdas/public/assets/img/img_navbar.svg" alt="logo-dts" />70 </div>71 </section>72 </section>73 </div>74 75 <div id="Model2" class="Model">76 <p>not yet available</p>77 </div>78 79 <style>80 .active {81 background-color: rgb(124 58 237);82 }83 #Model2 {84 display: none;85 }86 </style>87 </body>88 89 <script>90 function openModel(evt, modelName) {91 var i, x, tablinks;92 x = document.getElementsByClassName("Model");93 for (i = 0; i < x.length; i++) {94 x[i].style.display = "none";95 }96 tablinks = document.getElementsByClassName("tablink");97 for (i = 0; i < x.length; i++) {98 tablinks[i].className = tablinks[i].className.replace(" active", "");99 }100 document.getElementById(modelName).style.display = "block";101 evt.currentTarget.className += " active";102 }103 </script>104 <script>105 $(document).ready(function () {106 $("#upload_form").submit(function (event) {107 event.preventDefault(); // Prevent the default form submission108 // Get the form data109 var formData = new FormData(this);110 // Make the Ajax request111 $.ajax({112 type: "POST",113 url: "https://satriamjati-basic-forecasting-backend.hf.space/predict", // Replace with the correct URL114 data: formData,115 processData: false,116 contentType: false,117 success: function (response) {118 // Handle the response data119 $('#respMonth').html("<strong>Month:</strong> " + response.predict_month);120 $('#respYear').html("<strong>Year:</strong> " + response.predict_year);121 $('#T2M').html(parseFloat(response.T2M).toFixed(2) + ' celcius');122 console.log(response);123 },124 error: function (error) {125 $('#respMonth').html("");126 $('#respYear').html("");127 $('#T2M').html("??.?? celcius");128 console.error("Error:", error);129 }130 });131 });132 });133 </script>134</html>