Upload 7 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+smol.xlsx filter=lfs diff=lfs merge=lfs -text

final_model.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0be10d7857f34827dc002f2ca4f5fea8dc2392f9c342bbce81309fe18327f851
+size 134408

main.py

@@ -0,0 +1,220 @@
+# -*- coding: utf-8 -*-
+"""flaskProto.ipynb
+
+Automatically generated by Colaboratory.
+
+Original file is located at
+    https://colab.research.google.com/drive/1VC7pgAb9uuRwD0Bm89x8sAvKi7uliBoF
+"""
+
+#cd drive/'My Drive'/datasetDevhack
+import os
+import flask
+import pandas as pd
+import tensorflow as tf
+from keras.models import load_model
+import requests
+import datetime
+from sklearn import preprocessing
+import numpy as np
+from sklearn.preprocessing import StandardScaler
+import json
+import pickle
+from sklearn.pipeline import Pipeline
+
+# instantiate flask 
+app = flask.Flask(__name__)
+
+# load the model, and pass in the custom metric function
+global graph
+graph = tf.get_default_graph()
+
+holidays_tt = ["2020-01-01",
+                "2020-01-15",
+                "2020-01-26",
+                "2020-02-21",
+                "2020-03-10",
+                "2020-03-25",
+                "2020-04-02",
+                "2020-04-06",
+                "2020-04-10",
+                "2020-05-01",
+                "2020-05-07",
+                "2020-05-25",
+                "2020-06-23",
+                "2020-08-01",
+                "2020-08-03",
+                "2020-08-12",
+                "2020-08-15",
+                "2020-08-22",
+                "2020-08-30",
+                "2020-08-31",
+                "2020-10-02",
+                "2020-10-25",
+                "2020-10-30",
+                "2020-11-14",
+                "2020-11-30",
+                "2020-12-25"
+                ]
+url = "https://api.openweathermap.org/data/2.5/weather?q=Bengaluru,in&APPID=b1a275b64af38a8f9823800a58345b93"
+# homepage
+@app.route("/", methods=["GET","POST"])
+def homepage():
+    return flask.render_template("index.html")
+
+# define a predict function as an endpoint 
+# @app.route("/feedback", methods=["POST"])
+# def predict():  
+#     formFinal = []
+#     formData1 = int(flask.request.form['formData1'])
+#     print(formData1)
+#     formData2 = int(flask.request.form['formData2'])
+#     print(formData2)
+#     formFinal.append(formData1)
+#     formFinal.append(formData2)
+#     print(formFinal)
+
+
+mar = [0.14,0.53,0.24,0.13,0.67,0.87,0.22,0.23,0.12,0.56,0.23,0.25,0.78,0.12]
+model = load_model('final_model.h5')
+
+
+@app.route("/predict", methods=["POST"])
+def predict():
+    dat = flask.request.form['date']
+    #print(dat)
+    time = flask.request.form['time']
+   # print(time)
+    
+    #holiday
+    if str(dat) in holidays_tt:
+        holiday=1
+    else:
+        holiday=0
+    
+    #print("Holiday =", holiday)
+    
+    
+    response = requests.get(url).json()
+    temp = float(response["main"]["temp"]) - 273.15
+    temp_min = float(response["main"]["temp_min"]) - 283.15 #made it 283.15 from 273.15
+    temp_max = float(response["main"]["temp_max"]) - 273.15
+    pressure = response["main"]["pressure"]
+    humidity = response["main"]["humidity"]
+    #print(temp, temp_min, temp_max, pressure, humidity)
+    
+    #dat = "2023-11-01"
+    #time = "01:01"
+    
+    #week
+    date_time_obj = datetime.datetime.strptime(dat, '%Y-%m-%d')
+    week = datetime.date(date_time_obj.year,date_time_obj.month,date_time_obj.day).isocalendar()[1]
+    
+    if week<26:
+        week = week + 25
+        
+    
+    #hour
+    hour = int(time[:-3])
+    
+    #population
+    dic = {
+       "HSR Division" : 105265,
+       "Koramangala Division" : 63987,
+       "Indiranagar" : 58830,
+       "Shivajinagar" : 57437,
+       "Hebbal" : 54301,
+       "Whitefield" : 84428,
+       "Malleshwaram" : 57107,
+       "Rajaji Nagara Division" : 55250,
+       "Jayanagar" : 56658,
+       "Jalahalli" : 63391,
+       "Kengeri Division" : 68087,
+       "R R NAGAR" : 82848,
+       "Vidhanasoudha" : 69057,
+       "Peenya Division" : 96549
+       }
+    
+    
+    lb = preprocessing.LabelBinarizer()
+    lb.fit(['HSR Division', 'Koramangala Division', 'Indiranagar',
+       'Shivajinagar', 'Hebbal', 'Whitefield', 'Malleshwaram',
+       'Rajaji Nagara Division', 'Jayanagar', 'Jalahalli',
+       'Kengeri Division', 'R R NAGAR', 'Vidhanasoudha',
+       'Peenya Division'])
+    
+    
+    lt = list(dic.keys())
+    
+    df = pd.DataFrame(lt)
+    
+    divs = lb.transform(df)
+    
+    divs = pd.DataFrame(divs)
+    
+    #divs['Week'] = week
+    
+    #divs['Week'] = np.array(([week]*13).T
+    
+    week = [week]*14
+    
+    temp_max = [temp_max]*14
+    temp_min = [temp_min]*14
+                        
+    holiday = [holiday]*14  
+    
+    divs = pd.concat([pd.DataFrame(temp_max), divs], axis=1)
+    divs = pd.concat([pd.DataFrame(temp_min), divs], axis=1)
+    divs = pd.concat([pd.DataFrame(week), divs], axis=1)
+    divs = pd.concat([divs, pd.DataFrame(holiday)], axis=1)
+    
+        
+    pop = [dic[x] for x in lt]
+    
+    #population
+    divs = pd.concat([divs, pd.DataFrame(pop)], axis=1)
+    
+    
+    hour = [hour]*14
+    
+    divs = pd.concat([ divs, pd.DataFrame(hour)], axis=1)
+    
+    
+    smol = pd.read_excel('smol.xlsx')
+    smol = smol.iloc[:,1:]
+    #divs = pd.read_excel("pls.xlsx")
+    
+   # divs.to_csv("pls.csv")
+    
+    #print(smol.shape)
+    #print(divs.shape)
+
+    #fin = pd.concat([divs, smol])
+    
+    df = pd.DataFrame( np.concatenate( (divs.values, smol.values), axis=0 ) )
+    
+    from sklearn.preprocessing import StandardScaler
+    sc_X = StandardScaler()
+    df = sc_X.fit_transform(df)
+
+    
+    with graph.as_default():
+        prd = model.predict(df)
+        
+    
+    #print("divs is: ", divs)
+    prd = abs(prd[0:14])#-mar)
+    
+    print("fin",prd)
+    newprd = prd.tolist()
+    #print(newprd)
+
+
+    return flask.render_template("index.html", data = newprd)
+    
+    
+    
+    
+# start the flask app, allow remote connections 
+if __name__ == "__main__":
+    app.run(host='0.0.0.0', port=8000)

smol.xlsx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:298b99ec289040e0b78eb48cb044eb57c7386dc3fd57e84751ba2d559d9a0b2e
+size 1686904

static/css/main.css

@@ -0,0 +1,13 @@
+#mapid {
+  height: 700px;
+  width: 100%;
+}
+
+body,
+html {
+  background-image: linear-gradient(
+    rgba(66, 4, 165, 0.699),
+    rgba(57, 30, 75, 0.8)
+  );
+  background-attachment: fixed;
+}

static/js/main.js

@@ -0,0 +1,175 @@
+var mymap = L.map("mapid").setView([12.96, 77.62], 11.5);
+
+L.tileLayer(
+  "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
+  {
+    maxZoom: 18,
+    attribution:
+      'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
+      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+      'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+    id: "mapbox/streets-v11",
+    tileSize: 512,
+    zoomOffset: -1
+  }
+).addTo(mymap);
+
+// L.marker([51.5, -0.09]).addTo(mymap)
+//     .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
+
+// Circle heatmap
+function callThis(value) {
+  console.log(value);
+}
+function getColour(value) {
+  if (value <= 0.1) {
+    return "#009933";
+  } else if (value <= 0.2) {
+    return "#33cc33";
+  } else if (value <= 0.3) {
+    return "#99ff99";
+  } else if (value <= 0.4) {
+    return "#ccff99";
+  } else if (value <= 0.5) {
+    return "#ffff99";
+  } else if (value <= 0.6) {
+    return "#ffcc00";
+  } else if (value <= 0.7) {
+    return "#ff5050";
+  } else if (value <= 0.8) {
+    return "#ff0000";
+  } else if (value <= 0.9) {
+    return "#ff0000";
+  } else {
+    return "#b30000";
+  }
+}
+
+L.circle([12.93, 77.62], 575 * 4, {
+  color: "",
+  fillColor: getColour(0.191),
+  fillOpacity: 0.5
+})
+  .addTo(mymap)
+  .bindPopup("Kormangala Division");
+
+L.circle([12.91, 77.64], 900 * 1.5, {
+  color: "",
+  fillColor: getColour(0.372),
+  fillOpacity: 0.5
+})
+  .addTo(mymap)
+  .bindPopup("HSR Layout");
+
+L.circle([12.97, 77.63], 400 * 6, {
+  color: "",
+  fillColor: getColour(0.329),
+  fillOpacity: 0.5
+})
+  .addTo(mymap)
+  .bindPopup("Indiranagar");
+
+L.circle([12.98, 77.59], 500 * 4, {
+  color: "",
+  fillColor: getColour(0.426),
+  fillOpacity: 0.5
+})
+  .addTo(mymap)
+  .bindPopup("Shivajinagar");
+
+L.circle([13.04, 77.59], 600 * 6, {
+  color: "",
+  fillColor: getColour(0.392),
+  fillOpacity: 0.5
+})
+  .addTo(mymap)
+  .bindPopup("Hebbal");
+
+L.circle([12.96, 77.71], 1000 * 6, {
+  color: "",
+  fillColor: getColour(0.322),
+  fillOpacity: 0.5
+})
+  .addTo(mymap)
+  .bindPopup("Whitefield");
+
+L.circle([13.0, 77.57], 850 * 2, {
+  color: "",
+  fillColor: getColour(0.5315),
+  fillOpacity: 0.5
+})
+  .addTo(mymap)
+  .bindPopup("Malleshwaram");
+
+L.circle([12.98, 77.55], 800 * 3, {
+  color: "",
+  fillColor: getColour(0.4761),
+  fillOpacity: 0.5
+})
+  .addTo(mymap)
+  .bindPopup("Rajaji Nagara Division");
+
+L.circle([12.92, 77.57], 900 * 4.5, {
+  color: "",
+  fillColor: getColour(0.3272),
+  fillOpacity: 0.5
+})
+  .addTo(mymap)
+  .bindPopup("Jayanagar");
+
+L.circle([13.05, 77.5], 700 * 4, {
+  color: "",
+  fillColor: getColour(0.34),
+  fillOpacity: 0.5
+})
+  .addTo(mymap)
+  .bindPopup("Jalahalli");
+
+L.circle([12.92, 77.48], 700 * 5, {
+  color: "",
+  fillColor: getColour(0.677),
+  fillOpacity: 0.5
+})
+  .addTo(mymap)
+  .bindPopup("Kengeri Division");
+
+L.circle([12.94, 77.51], 1000 * 3, {
+  color: "",
+  fillColor: getColour(0.1676),
+  fillOpacity: 0.5
+})
+  .addTo(mymap)
+  .bindPopup("R R NAGAR");
+
+L.circle([12.97, 77.58], 100 * 4, {
+  color: "",
+  fillColor: getColour(0.289),
+  fillOpacity: 0.5
+})
+  .addTo(mymap)
+  .bindPopup("Vidhanasoudha");
+
+L.circle([13.02, 77.52], 1200 * 3, {
+  color: "",
+  fillColor: getColour(0.286),
+  fillOpacity: 0.5
+})
+  .addTo(mymap)
+  .bindPopup("Peenya Division");
+
+// L.polygon([
+//     [51.509, -0.08],
+//     [51.503, -0.06],
+//     [51.51, -0.047]
+// ]).addTo(mymap).bindPopup("I am a polygon.");
+
+// var popup = L.popup();
+
+// function onMapClick(e) {
+//     popup
+//         .setLatLng(e.latlng)
+//         .setContent("You clicked the map at " + e.latlng.toString())
+//         .openOn(mymap);
+// }
+
+// mymap.on("click", onMapClick);

templates/index copy.html

@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ url_for('static', filename='css/main.css') }}"
+    />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
+      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+      crossorigin=""
+    />
+    <link
+      rel="shortcut icon"
+      href="https://cdn0.iconfinder.com/data/icons/kameleon-free-pack-rounded/110/Analytics-512.png"
+    />
+    <!-- Make sure you put this AFTER Leaflet's CSS -->
+    <script
+      src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
+      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
+      crossorigin=""
+    ></script>
+    <title>Electro Maps</title>
+  </head>
+
+  <body>
+    <div align="center" id="mapid"></div>
+    <br />
+    <div align="center" class="container">
+      <form action="{{ url_for('predict') }}" method="post">
+        <input type="date" name="date" />
+        <input type="time" name="time" />
+        <input class="btn btn-success btn-sm" type="submit" value="Predict" />
+      </form>
+    </div>
+    <br />
+    <footer id="footer">
+      <div align="center">
+        <h4>Designed with 🖤 | Team Sabm0hmayahai</h4>
+      </div>
+    </footer>
+    <script>
+      const data = "{{data}}";
+      console.log(data);
+      var arr = [];
+      arr = data.split(",");
+      console.log(arr);
+
+      var val1 = 0,
+        val2 = 0,
+        val3 = 0,
+        val4 = 0,
+        val5 = 0,
+        val6 = 0,
+        val7 = 0,
+        val8 = 0,
+        val9 = 0,
+        val10 = 0,
+        val11 = 0,
+        val12 = 0,
+        val13 = 0,
+        val14 = 0;
+
+      try {
+        val1 = arr[0].slice(2, -1);
+        val2 = arr[1].slice(2, -1);
+        val3 = arr[2].slice(2, -1);
+        val4 = arr[3].slice(2, -1);
+        val5 = arr[4].slice(2, -1);
+        val6 = arr[5].slice(2, -1);
+        val7 = arr[6].slice(2, -1);
+        val8 = arr[7].slice(2, -1);
+        val9 = arr[8].slice(2, -1);
+        val10 = arr[9].slice(2, -1);
+        val11 = arr[10].slice(2, -1);
+        val12 = arr[11].slice(2, -1);
+        val13 = arr[12].slice(2, -1);
+        val14 = arr[13].slice(2, -2);
+
+        console.log(
+          val1,
+          val2,
+          val3,
+          val4,
+          val5,
+          val6,
+          val7,
+          val8,
+          val9,
+          val10,
+          val11,
+          val12,
+          val13,
+          val14
+        );
+      } catch (err) {
+        console.log("meh");
+      }
+
+      var mymap = L.map("mapid").setView([12.96, 77.62], 11.5);
+
+      L.tileLayer(
+        "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
+        {
+          maxZoom: 18,
+          attribution:
+            'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
+            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+          id: "mapbox/streets-v11",
+          tileSize: 512,
+          zoomOffset: -1
+        }
+      ).addTo(mymap);
+
+      // Circle heatmap
+      function getColour(value) {
+        if (value <= 0.1) {
+          return "#009933";
+        } else if (value <= 0.2) {
+          return "#33cc33";
+        } else if (value <= 0.3) {
+          return "#99ff99";
+        } else if (value <= 0.4) {
+          return "#ccff99";
+        } else if (value <= 0.5) {
+          return "#ffff99";
+        } else if (value <= 0.6) {
+          return "#ffcc00";
+        } else if (value <= 0.7) {
+          return "#ff5050";
+        } else if (value <= 0.8) {
+          return "#ff0000";
+        } else if (value <= 0.9) {
+          return "#ff0000";
+        } else {
+          return "#b30000";
+        }
+      }
+
+      L.circle([12.93, 77.62], 575 * 4, {
+        color: "",
+        fillColor: getColour(val2),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Kormangala Division : " + (val1 * 100).toFixed(2));
+
+      L.circle([12.91, 77.64], 900 * 1.5, {
+        color: "",
+        fillColor: getColour(val1),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("HSR Layout : " + (val2 * 100).toFixed(2));
+
+      L.circle([12.97, 77.63], 400 * 6, {
+        color: "",
+        fillColor: getColour(val3),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Indiranagar : " + (val3 * 100).toFixed(2));
+
+      L.circle([12.98, 77.59], 500 * 4, {
+        color: "",
+        fillColor: getColour(val4),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Shivajinagar : " + (val4 * 100).toFixed(2));
+
+      L.circle([13.04, 77.59], 600 * 6, {
+        color: "",
+        fillColor: getColour(val5),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Hebbal : " + (val5 * 100).toFixed(2));
+
+      L.circle([12.96, 77.71], 1000 * 6, {
+        color: "",
+        fillColor: getColour(val6),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Whitefield : " + (val6 * 100).toFixed(2));
+
+      L.circle([13.0, 77.57], 850 * 2, {
+        color: "",
+        fillColor: getColour(val7),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Malleshwaram : " + (val7 * 100).toFixed(2));
+
+      L.circle([12.98, 77.55], 800 * 3, {
+        color: "",
+        fillColor: getColour(val8),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Rajaji Nagara Division : " + (val8 * 100).toFixed(2));
+
+      L.circle([12.92, 77.57], 900 * 4.5, {
+        color: "",
+        fillColor: getColour(val9),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Jayanagar : " + (val9 * 100).toFixed(2));
+
+      L.circle([13.05, 77.5], 700 * 4, {
+        color: "",
+        fillColor: getColour(val10),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Jalahalli : " + (val10 * 100).toFixed(2));
+
+      L.circle([12.92, 77.48], 700 * 5, {
+        color: "",
+        fillColor: getColour(val11),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Kengeri Division : " + (val11 * 100).toFixed(2));
+
+      L.circle([12.94, 77.51], 1000 * 3, {
+        color: "",
+        fillColor: getColour(val12),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("R R NAGAR : " + (val12 * 100).toFixed(2));
+
+      L.circle([12.97, 77.58], 100 * 4, {
+        color: "",
+        fillColor: getColour(val13),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Vidhanasoudha : " + (val13 * 100).toFixed(2));
+
+      L.circle([13.02, 77.52], 1200 * 3, {
+        color: "",
+        fillColor: getColour(val14),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Peenya Division : " + (val14 * 100).toFixed(2));
+    </script>
+  </body>
+</html>

templates/index.html

@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ url_for('static', filename='css/main.css') }}"
+    />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
+      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+      crossorigin=""
+    />
+    <link
+      rel="shortcut icon"
+      href="https://cdn0.iconfinder.com/data/icons/kameleon-free-pack-rounded/110/Analytics-512.png"
+    />
+    <!-- Make sure you put this AFTER Leaflet's CSS -->
+    <script
+      src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
+      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
+      crossorigin=""
+    ></script>
+    <title>Electro Maps</title>
+  </head>
+
+  <body>
+    <div align="center" id="mapid"></div>
+    <br />
+    <div align="center" class="container">
+      <form action="{{ url_for('predict') }}" method="post">
+        <input type="date" name="date" />
+        <input type="time" name="time" />
+        <input class="btn btn-success btn-sm" type="submit" value="Predict" />
+      </form>
+    </div>
+    <br />
+    <footer id="footer">
+      <div align="center">
+        <h4>Designed with 🖤 | Team Sabm0hmayahai</h4>
+      </div>
+    </footer>
+    <script>
+      const data = "{{data}}";
+      console.log(data);
+      var arr = [];
+      arr = data.split(",");
+      console.log("this", arr);
+
+      console.log(arr[0].slice(2, -1));
+
+      var val1 = 0.196,
+        val2 = 0.199,
+        val3 = 0.192,
+        val4 = 0.193,
+        val5 = 0.186,
+        val6 = 0.234,
+        val7 = 0.271,
+        val8 = 0.221,
+        val9 = 0.198,
+        val10 = 0.242,
+        val11 = 0.221,
+        val12 = 0.191,
+        val13 = 0.205,
+        val14 = 0.235;
+
+      try {
+        val1 = arr[0].slice(2, -1);
+        val2 = arr[1].slice(2, -1);
+        val3 = arr[2].slice(2, -1);
+        val4 = arr[3].slice(2, -1);
+        val5 = arr[4].slice(2, -1);
+        val6 = arr[5].slice(2, -1);
+        val7 = arr[6].slice(2, -1);
+        val8 = arr[7].slice(2, -1);
+        val9 = arr[8].slice(2, -1);
+        val10 = arr[9].slice(2, -1);
+        val11 = arr[10].slice(2, -1);
+        val12 = arr[11].slice(2, -1);
+        val13 = arr[12].slice(2, -1);
+        val14 = arr[13].slice(2, -2);
+
+        console.log(
+          val1,
+          val2,
+          val3,
+          val4,
+          val5,
+          val6,
+          val7,
+          val8,
+          val9,
+          val10,
+          val11,
+          val12,
+          val13,
+          val14
+        );
+      } catch (err) {
+        console.log("meh");
+      }
+
+      var mymap = L.map("mapid").setView([12.96, 77.62], 11.5);
+
+      L.tileLayer(
+        "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
+        {
+          maxZoom: 18,
+          attribution:
+            'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
+            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+          id: "mapbox/streets-v11",
+          tileSize: 512,
+          zoomOffset: -1
+        }
+      ).addTo(mymap);
+
+      // Circle heatmap
+      function getColour(value) {
+        if (value <= 0.1) {
+          return "#0DFD04";
+        } else if (value <= 0.2) {
+          return "#E0FC86";
+        } else if (value <= 0.3) {
+          return "#B9EF0D";
+        } else if (value <= 0.4) {
+          return "#FFCC00";
+        } else if (value <= 0.5) {
+          return "#B67300";
+        } else if (value <= 0.6) {
+          return "#E65400";
+        } else if (value <= 0.7) {
+          return "#C93508";
+        } else if (value <= 0.8) {
+          return "#FF4D4D";
+        } else if (value <= 0.9) {
+          return "#FD0808";
+        } else {
+          return "#FF0000";
+        }
+      }
+
+      L.circle([12.93, 77.62], 575 * 4, {
+        color: "",
+        fillColor: getColour(val2),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Kormangala Division : " + (val2 * 100).toFixed(2));
+
+      L.circle([12.91, 77.64], 900 * 1.5, {
+        color: "",
+        fillColor: getColour(val1),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("HSR Layout : " + (val1 * 100).toFixed(2));
+
+      L.circle([12.97, 77.63], 400 * 6, {
+        color: "",
+        fillColor: getColour(val3),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Indiranagar : " + (val3 * 100).toFixed(2));
+
+      L.circle([12.98, 77.59], 500 * 4, {
+        color: "",
+        fillColor: getColour(val4),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Shivajinagar : " + (val4 * 100).toFixed(2));
+
+      L.circle([13.04, 77.59], 600 * 6, {
+        color: "",
+        fillColor: getColour(val5),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Hebbal : " + (val5 * 100).toFixed(2));
+
+      L.circle([12.96, 77.71], 1000 * 6, {
+        color: "",
+        fillColor: getColour(val6),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Whitefield : " + (val6 * 100).toFixed(2));
+
+      L.circle([13.0, 77.57], 850 * 2, {
+        color: "",
+        fillColor: getColour(val7),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Malleshwaram : " + (val7 * 100).toFixed(2));
+
+      L.circle([12.98, 77.55], 800 * 3, {
+        color: "",
+        fillColor: getColour(val8),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Rajaji Nagara Division : " + (val8 * 100).toFixed(2));
+
+      L.circle([12.92, 77.57], 900 * 4.5, {
+        color: "",
+        fillColor: getColour(val9),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Jayanagar : " + (val9 * 100).toFixed(2));
+
+      L.circle([13.05, 77.5], 700 * 4, {
+        color: "",
+        fillColor: getColour(val10),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Jalahalli : " + (val10 * 100).toFixed(2));
+
+      L.circle([12.92, 77.48], 700 * 5, {
+        color: "",
+        fillColor: getColour(val11),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Kengeri Division : " + (val11 * 100).toFixed(2));
+
+      L.circle([12.94, 77.51], 1000 * 3, {
+        color: "",
+        fillColor: getColour(val12),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("R R NAGAR : " + (val12 * 100).toFixed(2));
+
+      L.circle([12.97, 77.58], 100 * 4, {
+        color: "",
+        fillColor: getColour(val13),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Vidhanasoudha : " + (val13 * 100).toFixed(2));
+
+      L.circle([13.02, 77.52], 1200 * 3, {
+        color: "",
+        fillColor: getColour(val14),
+        fillOpacity: 0.5
+      })
+        .addTo(mymap)
+        .bindPopup("Peenya Division : " + (val14 * 100).toFixed(2));
+    </script>
+  </body>
+</html>