We saw in the previous challenge how to plug a website to our Prediction API in order to allow regular users to make prediction.
Now let's create our own website ! ๐ฅ
We are going to use Streamlit which will allow us to create a website very easily and without any web development skills.
We will create a new project directory for the code of our website.
Again, this directory will be located inside of our projects directory: ~/code/<user.github_nickname>
.
Create a new project directory named TaxiFareWebsite
.
cd ~/code/<user.github_nickname>
mkdir TaxiFareWebsite
cd TaxiFareWebsite
Initialise a new git repository:
git init
Create a corresponding repository on our GitHub account:
gh repo create
Go to the GitHub repo in order to make sure that everything is ok:
gh browse
The repository is empty, which is normal since we have not pushed any code yet...
We are now all set!
First, we need an app.py
file inside of our project. The file will contain the code for our page.
touch app.py
Then, let's copy the Makefile
that is provided inside of the project... It will allow us to run useful commands for:
install_requirements
: dependenciesstreamlit
: run the Streamlit web server in order to see what our website looks likeheroku_login
: login to Herokuheroku_create_app
: create an app on Heroku for our websitedeploy_heroku
: deploy our app when we are satisfied with its content
You project should look like this:
.
โโโ Makefile
โโโ app.py
Not too overwhelming, right ? ๐
Well... This is half the work.
Lets add some content to our website in app.py
:
import streamlit as st
'''
# TaxiFareModel front
'''
st.markdown('''
Remember that there are several ways to output content into your web page...
Either as with the title by just creating a string (or an f-string). Or as with this paragraph using the `st.` functions
''')
'''
## Here we would like to add some controllers in order to ask the user to select the parameters of the ride
1. Let's ask for:
- date and time
- pickup longitude
- pickup latitude
- dropoff longitude
- dropoff latitude
- passenger count
'''
'''
## Once we have these, let's call our API in order to retrieve a prediction
See ? No need to load a `model.joblib` file in this app, we do not even need to know anything about Data Science in order to retrieve a prediction...
๐ค How could we call our API ? Off course... The `requests` package ๐ก
'''
url = 'https://taxifare.lewagon.ai/predict'
if url == 'https://taxifare.lewagon.ai/predict':
st.markdown('Maybe you want to use your own API for the prediction, not the one provided by Le Wagon...')
'''
2. Let's build a dictionary containing the parameters for our API...
3. Let's call our API using the `requests` package...
4. Let's retrieve the prediction from the **JSON** returned by the API...
## Finally, we can display the prediction to the user
'''
Let's run the Streamlit web server and see what our website looks like:
make streamlit
We have a website of our own running on our machine ๐
... So that users can actually make some predictions!
๐ Let's follow the instructions inside the web page and replace the content with some requests
package magic and a call to our API!
๐ Again, alternatively, you may use this Le Wagon Prediction API if you you do not have one in production:
Let's inspect app.py
and check what is being done inside...
Replace the URL to the prediction API with your own and update the code accordingly.
Now let's get crazy with the page content ๐
Maybe add some map ๐บ
Once we are satisfied, let's push the code to production! ๐ฅ
- Sign in to Heroku
- Install the Heroku CLI (Command Line Interface):
macOS
brew tap heroku/brew && brew install heroku
Ubuntu
curl https://cli-assets.heroku.com/install.sh | sh
WSL2
curl https://cli-assets.heroku.com/install.sh | sh
- Login the CLI
heroku login
Now that we checked our app works locally, we might want it to run free on a remote server.
We will see once again how Heroku is easy to use, here we simply need to:
Copy the provided Procfile
and setup.sh
inside of our project.
Are we not missing something ?
๐ค How are the packages that app.py
is using going to be installed on Heroku ?
We need to add a setup.py
, a MANIFEST.in
, and a requirements.txt
containing the name of the required packages to our project! We also need a Procfile
and a setup.sh
in order for Heroku to know how to run our website. As well as a Makefile
to ease the use of the command line.
Let's copy the files provided in the challenge to your web project...
๐ก Hint: how to copy `setup.py` and other provided files to the web project ?
cp -r ~/code/<user.github_nickname>/data-challenges/07-Data-Engineering/05-User-interface/02-Streamlit-for-restitution/* ~/code/<user.github_nickname>/TaxiFareWebsite
The project should now look like this:
.
โโโ MANIFEST.in
โโโ Makefile
โโโ Procfile
โโโ app.py
โโโ requirements.txt
โโโ setup.py
โโโ setup.sh
Now, we can login to Heroku
heroku login
Upload the public SSH key created during the setup in order to authentify to Heroku using SSH
heroku keys:add ~/.ssh/id_ed25519.pub
Create an app for our website on Heroku... Remember the app name should be unique on the internet.
๐ก You might want to change the region if you are not located inside of Europe...
heroku create --ssh-git YOUR_APP_NAME --region eu
Remember that Heroku uses git in order to retrieve the files of your project to put in production.
๐ You need to git add
and git commit
the files of your project that you want to push to production before pushing your code to Heroku
git add --all
git commit -m "code ready to be deployed to production"
Finally, we can push our website to Heroku ๐
git push heroku master
Then scale it:
heroku ps:scale web=1
Click on the link provided by the command line https://YOUR_APP_NAME.herokuapp.com/
and you should access to your website ๐