3

So, I have a website where I want to show my outputs of my machine learning programs in real-time. Every output is based on the User's input.

I have successfully created my python scripts which give me my desired output, but untill now i was just running my script on my local machine.

I am using matplotlib, numpy, sci-kit and packages similar to them, I need to create a web UI that could run a python script from an html button click and then show the matplotlib graph that was generated.

I have been searching for an answer for quite sometime now, here are my findings

  1. Flask
  2. mpld3
  3. This Stackoverflow Question
  4. Diva

Now I somewhat understand all these techniques. but I cannot find some perfect example to help me with my situation. Few things that I want you to know is, I have a ready HTML file, along with CSS. I am using the Google Console VM-instances for my remote server.

So, in all I just need a solution to my following problem.

  • User selects an option from my html page.
  • Remote server gets a request, starts the necessary python script
  • Python script returns data in the form of matplotlib, text and numbers.
  • My HTML page gets the data, parses them and shows the output.
Iron Fist
  • 10,739
  • 2
  • 18
  • 34
johnny68
  • 421
  • 1
  • 6
  • 21

1 Answers1

4
  • Hi, so you will need some python web framework, as you already mentioned flask could be good option.
  • To deploy your application to the production you will also need a web server running on your remote server.
  • After that, you can setup your web server to communicate with your flask running application.

Your flask endpoint could look something like this:

@app.route('/evaluate', methods = ['GET', 'POST'])
def index():
if request.method == 'POST':
    # Computed ML output
    output = compute_data(data)
    # Format to graph data
    graph_data = transform_to_graph(output)
    # Pass data to the template
    return render_template('graph-view.html', graph_data=graph_data)

return render_template('main.html')

Where main.html will be page with button and user input:

<!DOCTYPE html>
<html>
<head>
<title>User Input</title>
</head>
<body>
<h1>Provide with input</h1>
<form method="post" action="/evaluate">
<input type="text" name="data">
<input type="submit" value="Evaluate">
</form>
</body>
</html>

This could be pretty simple and straightforward tutorial for Flask basics: https://www.codementor.io/overiq/basics-of-flask-fzvh8ueed. Search for other sources and you will get into that quickly. For deployment you will also need application server running your flask app, as flask by it self isn't production ready. I could recommend Gunicorn, here is one of the many tutorials showing setup of Gunicorn with Nginx proxy web server: https://tutorials.technology/tutorials/71-How-to-setup-Flask-with-gunicorn-and-nginx-with-examples.html. Please search for this topic, there's plenty of tutorials out there.

Spacyk
  • 56
  • 4
  • 1
    Please forgive me for the following stupid question of mine, can you point me towards some tutorial which explains in detail how the flask endpoint works. I am at a loss here, I have never used python in a website and after going through the tutorials for python web development I have come to a conclusion that python web development is not straight forward like html/php. I am fluent in python and html. But i have never used both together. – johnny68 Apr 04 '18 at 05:04
  • Post updated, feel free to contact me, if you should have any troubles with settings this up. – Spacyk Apr 04 '18 at 05:31
  • If you want to learn to host it on your own server, heroku offers a free option for that. Great documentation and works very good with flask. – Roman Apr 04 '18 at 07:09
  • Thank you so much for the prompt and precise solution. I will look into your solution. I guess i would be contacting you soon – johnny68 Apr 04 '18 at 07:16