I recently got a project that involves creating a front end application that would connect to a backend program. The backend program is a machine learning code that inputs some parameters and outputs a graph. This machine learning code was made in Python. The goal of the frontend program is for users over the web to input their data and parameters needed for the ML code to work and then receive back the graph to the front end for the users to save as a GIF or something similar.
I've never done anything of this level before, so I've been scouring the internet for answers. I've come to the answer that the front end will be html and some CSS and will connect to some API program which acts as the middle man between the front end and the backend programs. Is this the correct direction? Any references or YouTube videos about how to do something like this is greatly welcomed.
I've also looked into straight connecting from the frontend program to the ML code. Thanks All!
CodePudding user response：
So this is a very general question, hence it is hard to answer. I will give you a short pointer on how to achieve this, please note that there are many ways and I am trying to give you the easiest.
App requirements I assume:
- The look is not important, functionality is the base
- Any framework can be used
- A beginner should be able to do this. - hence js frameworks will be avoided.
I've come to the answer that the front end will be html and some CSS and will connect to some API program that acts as the middle man between the front end and the backend programs.
Yes, this is somewhat correct, you most likely will sprinkle some JS into the frontend, but it is not required and everything is possible with just HMTL, CSS, and an API. In the frontend, you will need a <form> which will submit the input data as a post request to your API (a server). The API will then need to invoke the ML script/program and catch the resulting Image. Then you need to save the image on your server. Till now the frontend is still waiting for the request to finish so, your server has not returned anything!
Side note in a real project this would be bad because ML code can take a long time for execution and awaiting a request is caped and you could get a timeout error.
So your API/server receives the image and saves the image into a public folder which is exposed to the web, often called statics or public. Then you can redirect the user onto a second html page, which you can then dynamically render with a template language, e.g. Jinja2.
As backend technology, I would suggest that you use something which is not too opinionated because those usually take more weight from but are harder to learn. Therefore, look at Flask to build an API. For the frontend use https://getbootstrap.com/ so you do not need to write your own css. And as a template language use Jinja2.
to get yourself started I would recommend one of these sources:
- https://www.youtube.com/watch?v=Z1RJmh_OqeA // Flask - explains Jinja2 as well
- https://www.youtube.com/watch?v=qz0aGYrrlhU // html
- https://www.youtube.com/watch?v=K-ccGZYRWzs // bootstrap froms