Deploy Machine Learning Model with backend(flask) and frontend(Angular) -Part3

Now it is time to build the frontend where user can test the real prediction using the machine learning model.
The frontend allows the users to provide their information and finally get the prediction.

we will use angular for making the frontend.
First install node and angular cli globally in your computer.
Then create a simple angular app using angular cli

ng new titanic-project
cd titanic-projectt
ng serve

Now edit app.component.ts like below:

undefined
It will call the predict method from the backend to get the prediction.
A http post call is used to send input data to the backend and get the prediction.

We will make a template form where the user can provide their information.
Here we used angular ant design as the css framework.
here is our app.component.html
undefined

Final output will be look like this.



We deployed the frontend into Heroku.
If you want the code and the structure of the frontend that we deployed, feel free to get it from the git repo.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s