Creating a frontend program for a machine learning program (help) - python

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!

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

Related

React & Django - How can I automatically reflect server changes on front-end?

Looking for a bit of advice.
I have a current architecture of Django and PostgreSQL, where a whole lot of activity is happening to the data via the ORM, through scheduled jobs. The data on the backend is being processed and updated on roughly 30 second intervals.
The data is available to the front-end through a bunch of DRF serialisers (basic REST API). This is just being piped to standard HTML templates at the moment.
I'd like the React front-end to mirror this behaviour, and am looking for best-practice advice on how this is typically done. I know in practice how this works in other frameworks but am not certain of doing this well (namely, connecting React's DOM automation to server-side updates).
(I don't want to get involved with websockets, at all.)
Theoretically, I understand there is two ways to do this:
Front-end AJAX polling the API for new data
HTTP/2 Server Push
Something built into React that will load stuff in incrementally?
Appreciate the advice - (short examples would be really helpful if possible).
First use Django channels, documentation is great btw.
Django Channels
Next what is for you is connect React on some event from models, when you save something in model or create new instance after method save, call channels to expose that object in some group. Of course you need to write URL-s where you will be able to get response from channels.

Setting up a server to execute a Python Script

I am looking to create a very basic website that has a single feature. This feature works as follows:
1) The user inputs a URL to a website
2) My website will scrape the given website for necessary information
3) Apply whatever logic I need and return the processed information as a string
4) Allow user to download returned data in .txt format.
I am working on this project with one collaborator, and he has created the scraping and logic (steps 2 and 3) in Python. I have looked around stack overflow to see if it is possible to execute python scripts in a website, and the consensus seemed to be that I will require a server that executes python, and then make HTTP requests to my server.
Unfortunately, I'm quite a junior developer and lack a lot of understanding regarding web dev, and my attempts to "dive in" have left me with more questions than answers. We have a deadline that is approximately 3 days from now, and the only part that remains is to set up a server that can execute a specific python script upon HTTP requests.
I think that the source of my confusion is a lack of understanding regarding how exactly a server works, and was hoping that the kind folks here at stack overflow could help me in:
1) better understanding what's going on "under the hood" on the server side after an HTTP request arrives (or better yet, how does an HTTP request even arrive at all?)
2) Explain to me like I'm 5 what I'll need to do to deploy my website - namely all the in-between steps that receive little attention from the other posts here at stack overflow.
Some example questions that run through my head are below:
What type of server will I need?
How will I know if it can run Python?
How does the server know that I want to execute a certain script, while upon a user entering a my website's homepage URL, land at the home screen?
I've also read up on "middle layers" such as 'CGI' - what does this accomplish?
Is setting up a server reinventing the wheel?
enter code here
Is there already a service out there that does what I'm looking for?
I've accomplished a similar project overnight with a Python web framework called Django, simply by following their official tutorial: https://docs.djangoproject.com/en/1.7/intro/tutorial01/
Django abstracts away all the web stuff for you and there's plenty of documentation on deploying it in various environments. With such deadlines I suggest you to just follow the tutorial above and eventually adapt the example to your use case testing it on Django's built-in web server, then follow a guide on deploying Django projects in your production environment.

How do people usually operate information on server database?

I have a server with a database, the server will listen for http requests, and using JSONs for
data transferring.
Currently, what my server code(python) mainly do is read the JSON file, convert it to SQL and make some modifications to the database. And the function of the server, as I see, is only like a converter between JSON and SQL. Is this the right procedure that people usually do?
Then I come up with another idea, I can define a class for user information and every user's information in the database is an instance of that class. When I get the JSON file, first I put it into the instance, do some operation and then put it into the database. In my understanding, it adds a language layer between the http request and the database.
The question is, what do people usually do?
The answer is: people do usually that, what they need to do. The layer between database and client normally provides a higher level api, to make the request independent from the actual database. But how this higher level looks like depends on the application you have.
People usually make use of a Web framework, instead of implementing the basic machinery themselves as you are doing.
That is: Python i s a great language that easily allows one to translate "json into sql" with a small amount of code - and it is great for learning. If you are doing this for educational purposes, it is a nice project to continue fiddling with, and maybe you can have some nice ideas in this answer and in others.
But for "real world" usage, the apparent simple plan comes up with real world issues. Tens or even hundreds of them. How to proper separate html/css template from content from core logic, how to deal with many, many aspects of security, etc...
Them, the frameworks come into play: a web-framewrok project is a software project that had, over the years, and soemtimes hundreds of hours of work from several contributors, thought about, and addresses all of the issues a real web application can and will face.
So, it is ok if one want to to everything from scratch if he believes he can come up with a a framework taht has distinguished capabilities not available in any existing project. And it is ok to make small projects for learning purposes. It is not ok to try to come up with something from scratch for real server production, without having a deep knowledge of all the issues involved, and knowing well at least 3, 4 frameworks.
So, now, you've got the basic understanding of a way to get to a framework - it istime to learn some of the frameworks tehmselves. Try, for example, Bottle and Flask (microframeworks), and Django (a fully featured framework for web application development), maybe Tornado (an http server, but with enough of a web framework in it to be usable, and to be very instructive)- just reading the documentation on "how to get started" with these projects, to get to a "hello world" page will lead you to lots of concepts you probably had not thought about yet.

How to Combine Html + CSS code with python function?

I have zero experience with website development but am working on a group project and am wondering whether it would be possible to create an interaction between a simple html/css website and my python function.
Required functionality:
I have to take in a simple string input from a text box in the website, pass it into my python function which gives me a single list of strings as output. This list of strings is then passed back to the website. I would just like a basic tutorial website to achieve this. Please do not give me a link to the CGI python website as I have already read it and would like a more basic and descriptive view as to how this is done. I would really appreciate your help.
First you will need to understand HTTP. It is a text based protocol.
I assume by "web site" you mean User-Agent, like FireFox.
Now, your talking about an input box, well this will mean that you've already handled an HTTP request for your content. In most web applications this would have been several requests (one for the dynamically generated application HTML, and more for the static css and js files).
CGI is the most basic way to programmatically inspect already parsed HTTP requests and create HTTP responses from objects you've set.
Now your application is simple enough where you can probably do all the HTTP parsing yourself to gain a basic understanding of what's going on, but you will still need to understand how to develop a server that can listen on a socket.
To avoid all that just find a Python application server that has already implemented all of the above and much more. There are many python application servers to choose from. Use one with a small learning curve for something as simple as above. Some are labeled as "micro-frameworks" in this genre.
Have you considered creating an app on Google App Engine (https://developers.google.com/appengine/)?
Their Handling Forms tutorial seems to describe your problem:
https://developers.google.com/appengine/docs/python/gettingstartedpython27/handlingforms

Python and CGI: Prevent resending form data upon refreshing

I am new to Python (somehow I started looking at python 2 days ago).
I tried to write a simple interactive webpage with CGI, and I used HTML form to get user input. However, as everyone knows, if I refresh the webpage, the form data will be resubmitted again. I just have no idea how to prevent this from happening.
The same problem, but in php/javascript, has been discussed and solutions can be found, but I would like to find the answer to the python case.
I hope there is someone here who can address my problem. Since I am not quite familiar with the language, I hope that, instead of solely giving me a descriptive solution, the kind one can also give me the pieces of codes necessary.
Thank you very much
Your question is not Python-specific, it's about the general web application design patterns.
Use GETs for requests that do not change the web app's state (viewing, queries and so on). Render the page in the response.
Use POST for whatever request that modifies the state (post submitting, editing, deleting).
Never render anything in the response, provide a 303 See Other redirection to the page where the results of the POST can be seen. E.g., if the user added a comment on the page http://example.com/blog/123, the POST handler can be http://example.com/submitcomment, but it should return nothing but a redirection to http://example.com/blog/123#comment5.
That's what #mikep referred to as Post-Redirect-Get.
On the related note: do yourself a favor, skip CGI. There is a number of nice and clean web frameworks for Python. Try Flask or Bottle (smaller frameworks) or go straight to Django if you are building a big app. Search here on Stack Overflow for pros and cons of different frameworks.
Just skip CGI. It's hard to build a good and maintainable CGI app, there are too many things to take care of, things that are already thought if in the frameworks.
I've been wasting time supporting a CGI application for some time, and switching to a framework was a relief.
You might want to view these lectures: http://www.udacity.com/overview/Course/cs253/CourseRev/apr2012
Week 2 will address your queries.
Take a look at POST-REDIRECT-GET web programming patern.

Categories

Resources