-1

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!

Mateo Cubillos
  • 3
  • 2
  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. – Community Nov 10 '21 at 10:01

1 Answers1

1

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:

Snake_py
  • 393
  • 2
  • 11
  • Thank you for the quick answer about this question. I'm sorry about how vague the question is. This is partially because I've never done anything of this sort and was asked to start from point 0 and make a whole working product. I will look into the videos you've mentioned and go from there. Thank you and this answered many of my questions about direction of my project – Mateo Cubillos Nov 10 '21 at 19:19
  • You are welcome if you have anything additional you want to ask, I can take some time to explain. If not I would appreciate it if you accept the answer. – Snake_py Nov 10 '21 at 21:04