Initial commit

samneangs · Feb 24, 2023 · d22c87c · d22c87c
commit d22c87c
Show file tree

Hide file tree

Showing 17 changed files with 542 additions and 0 deletions.
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+taxifare.lewagon.com
diff --git a/README.md b/README.md
@@ -0,0 +1,66 @@
+# NY Taxi Fare prediction interface
+
+![](images/snapshot.png)
+
+## Setup
+
+The interface uses 3 APIs:
+
+- The NY Taxi Fare prediction API
+- The [MapBox Maps API](https://docs.mapbox.com/mapbox-gl-js/api/) to display a map and address autocomplete
+- The [MapBox Directions API](https://docs.mapbox.com/api/navigation/) to display the route on the map
+
+These APIs require credentials and the following steps will guide you to get them and set the interface with.
+
+### NY Taxi Fare prediction API
+
+Update the `script.js` to get prediction from your own API hosted on GCP (make sure to use `https`, not `http`):
+
+```js
+// script.js
+
+const taxiFareApiUrl = 'https://YOUR_API_URL/predict';
+```
+
+Hint: alternatively, you may use this Le Wagon Prediction API if you do not have one in production:
+
+`https://taxifare.lewagon.ai/predict`
+
+_Note: the following setup steps are optional as you can use Mapbox credentials given by Le Wagon_
+
+### MapBox Maps and Directions APIs (optional)
+
+- Go to [MapBox](https://www.mapbox.com/) and create an account
+- Go to your [Account](https://account.mapbox.com/) and grab your `Access Token` then set it into the `script.js`
+
+```js
+//...
+mapboxgl.accessToken = 'YOUR_MAPBOX_API_ACCESS_TOKEN';
+````
+
+## Local development
+
+To check your setup, run the interface locally with:
+```bash
+python -m http.server 5001
+```
+
+Then go to [http://localhost:5001](http://localhost:5001)
+
+## Deploy on GitHub Pages
+
+Your app is ready to go live!
+
+Create a new branch `gh-pages`:
+
+```bash
+git checkout -b gh-pages
+```
+
+Deploy your app on GitHub:
+
+```bash
+git push origin gh-pages
+```
+
+Your app will be visible shortly at `https://YOUR_GITHUB_NICKNAME.github.io/taxi-fare-interface`.
diff --git a/images/favicons/android-chrome-192x192.png b/images/favicons/android-chrome-192x192.png
diff --git a/images/favicons/android-chrome-512x512.png b/images/favicons/android-chrome-512x512.png
diff --git a/images/favicons/apple-touch-icon.png b/images/favicons/apple-touch-icon.png
diff --git a/images/favicons/browserconfig.xml b/images/favicons/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/images/favicons/favicon-16x16.png b/images/favicons/favicon-16x16.png
diff --git a/images/favicons/favicon-32x32.png b/images/favicons/favicon-32x32.png
diff --git a/images/favicons/favicon.ico b/images/favicons/favicon.ico
diff --git a/images/favicons/mstile-150x150.png b/images/favicons/mstile-150x150.png
diff --git a/images/favicons/safari-pinned-tab.svg b/images/favicons/safari-pinned-tab.svg
diff --git a/images/favicons/site.webmanifest b/images/favicons/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/images/le-wagon-neg-color.png b/images/le-wagon-neg-color.png
diff --git a/images/snapshot.png b/images/snapshot.png
diff --git a/index.html b/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>NY Taxi Fare prediction interface</title>
+
+  <link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="images/favicons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="images/favicons/favicon-16x16.png">
+  <link rel="manifest" href="images/favicons/site.webmanifest">
+  <link rel="mask-icon" href="images/favicons/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#da532c">
+  <meta name="theme-color" content="#ffffff">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <!-- Bootstrap -->
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
+  <!-- MapBox Map-->
+  <link href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />
+  <!-- MapBox Geocoder -->
+  <link rel='stylesheet'
+    href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.css' type='text/css' />
+  <!-- Flatpickr -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <h1 class="text-center p-2">NY taxi</h1>
+  </div>
+
+  <div class="position-relative">
+    <div class="position-absolute w-100" id="search">
+      <div class="container pt-4 d-flex justify-content-center">
+        <form class="form-inline">
+          <div class="mr-sm-2" id="pickup"></div>
+          <input type="hidden" id="pickup_latitude" name="pickup_latitude">
+          <input type="hidden" id="pickup_longitude" name="pickup_longitude">
+          <div class="mr-sm-2" id="dropoff"></div>
+          <input type="hidden" id="dropoff_latitude" name="dropoff_latitude">
+          <input type="hidden" id="dropoff_longitude" name="dropoff_longitude">
+          <input type="text" class="form-control mr-sm-2" id="pickup_datetime" name="pickup_datetime">
+          <select id="passenger_count" name="passenger_count" class="custom-select mr-sm-2">
+            <option value="1" selected>1 person</option>
+            <option value="2">2 persons</option>
+            <option value="3">3 persons</option>
+            <option value="4">4 persons</option>
+            <option value="5">5 persons</option>
+            <option value="6">6 persons</option>
+            <option value="7">7 persons</option>
+            <option value="8">8 persons</option>
+          </select>
+          <button type="submit" class="btn btn-primary" id="get-fare-button">Get fare</button>
+        </form>
+      </div>
+    </div>
+    <div id='map' style='width: 100%; height: calc(100vh - 88px - 64px);'></div>
+    <div id="fare" class="position-absolute bg-primary p-4 d-none">
+      <p id="predicted-fare"></p>
+    </div>
+  </div>
+
+  <div class="footer d-flex align-items-center justify-content-end p-4">
+    <p>Made with ❤️ @
+      <a href="https://www.lewagon.com" target="_blank">
+        <img src="images/le-wagon-neg-color.png" alt="" width=100>
+      </a>
+    </p>
+  </div>
+  <!-- Bootstrap -->
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+  <!-- MapBox Map-->
+  <script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
+  <!-- MapBox Geocoder -->
+  <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.min.js'></script>
+  <!-- Flatpickr -->
+  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+  <script src='script.js'></script>
+</body>
+</html>