Running Python from HTML using Javascript with a single button - python

I am trying to get HTML/webpage interface to run a python script I wrote that generates a graph and saves it in a local directory. I would like to click a single button and have the python code run, generate the graph and save it in a folder which then HTML could embed it on the HTML page. My issue is this code isn't working, the code is not run and no new graph is generated. Both the HTML and Python file (Create_Chart.py) are in the same folder.
Python code
globals().clear()
import numpy as np
import matplotlib.pyplot as plt
import os
rand=np.random.normal(100,1,size=[100,1])
chart=plt.plot(rand)
plt.savefig(r'C:\Users\...\example_chart.png')
HTML/Javascript code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" id='script' name="scriptbutton" value=" Run Script " onclick="goPython()">
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
function goPython(){
$.ajax({url: "Create_Chart.py",context: document.body}).done(function() {alert('finished python script');;});
}
</script>
</body>
</html>
I am trying to follow the example from this other stackoverflow thread. What am I doing wrong?
How can I execute a python script from an html button?
The javascript code is being called from the following link 'http://code.jquery.com/jquery-3.3.1.min.js'. Do I need to install Jquery on my local computer?

You'll need a webserver software (as in nginx) which understands how to run python scripts (as in a WSGI application). The script then needs to be something that understands HTTP. Your script needs then to answer with an HTTP response.
Since you're asking a question on that level, these are many concepts. I suggest you to watch into Django or FastAPI (Python web frameworks; google them). Those come with inbuild test webservers and get you started.

Related

saving a dash layout to html file [duplicate]

I plotted a bunch of things in a dash layout. I want to save them to an html file so I can look at them later. when I reopen the saved html file, I first see everything correctly. However, within <1s, the page goes blank and I get an error: “Error loading layout”. (see gif below)
How can this be fixed?
Thanks!
This solution is not fully working:
You have to save your Webpage complete.
To prevent the javascript creating any errors
i have removed the bundle(2).js file.
This file contains the function dash_renderer which tries to interact with the server and creates issues.
<footer>
<script id="_dash-config" type="application/json">{"url_base_pathname": "/", "requests_pathname_prefix": "/"}</script>
<script src="./Dash_files/react.min.js"></script>
<script src="./Dash_files/react-dom.min.js"></script>
<script src="./Dash_files/bundle.js"></script>
<script src="./Dash_files/plotly-1.38.0.min.js"></script>
<script src="./Dash_files/bundle(1).js"></script>
<!-- <script src="./Dash_files/bundle(2).js"> --></script>
</footer>
The result is the same page as you can see for ~1s.
Big disadvantage: The interactivity from plotly is lost.
A Dash app layout is serialized as JSON and served to the front-end by the Dash server (an extension of a Flask server).
All Dash components included in your layout are bundled as JS/CSS files. These bundles are also served by the Dash server to the front-end.
Without the server, there is no one to send JSON, JS, CSS bundles to the front-end, so nothing will be rendered.
I'm not sure why you can see your app for a brief moment. My guess is that Dash saves a PNG image of your app every time you run it. Think of it like a splash screen you see before the real, reactive app shows up.
Have a look at this high-level overview on how Dash works under the hood.

Setting up React in a large python project without Node

I am trying to implement the front-end of a very large Python project with React.
It seems that most of the tutorials ask that we use Node to access the packages, is there any way to get around without them?
Initially I thought I could use it similarly to bootstrap or jquery where I just download the files or use the CDN and tag them in the HTML file, but it is not working.
Where do I go from here? Is there an easy way for me to install React?
Thanks!
Edit: I should probably add the code of what I am currently doing. I have tried to access the files which are on react's website, but nothing seems to be working, and from what I read in other questions and tutorials, they always ask to install via npm to make it all work, or so it seems...
<div id='app'></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/react#15.3.1/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.1/dist/react-dom.js"></script>
<script type="text/babel" src="//cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel">
var React = require ('react');
var ReactDOM = require ('react-dom');
var Test = React.createClass({
render: function(){
return(<h1>it is working! </h1>);
}
});
ReactDOM.render(<Test />, document.getElementById('app'));
You can certainly use React with your own flavor of Python framework (Tornado, Flask, Django, etc.). In the final deploy, you don't have to have any Node dependencies. I've run Tornado with React and just used NPM and webpack locally to manage package dependencies and trans-compile.

Having trouble getting my http server to recognize and run python scripts

I've created a local address http webserver that will hopefully be able to open both HTML webpages and python scripts that create HTML webpages, but I keep getting a 501 error because I can't figure out how to get the webserver to recognize the code correctly. Another note: I'm coding on Windows, I'm not using Cygwin (I don't know anything about Cygwin, so if it's the recommended method here tips on how to get started with it would be appreciated.)
Anyways, here's what I've got.
I have created a folder in C:\ called server_test, and inside this folder is where I have been putting all my relevant HTML and python files. I've been editing my .py files in PyDev in eclipse (C:\workspace) and then copying the files over and putting them in C:\server_test.
To get my server running, I navigate to \server_test in cmd, open python, then create a webserver using HTTPServer, CGIRequestHandler, the current directory, address 127.0.0.1, and a port of my choosing (usually 9090). Once I've done this, I can go to my web browser and type in the address for one of my HTML pages and it runs perfectly fine. However, I currently have an HTML page meant to call a python script (also located in \server_test) that will create another HTML page, but I can't get it to work.
My HTML code looks like this:
<html>
<title>Debug Page</title>
<body
<h1>This is a test file. </h1>
<form method=POST action="my_code_2.py">
<P><input type=submit>
</form>
</body></html>
And then my 'my_code_2.py' looks like this:
#!C:\Python35-32\python.exe
import cgi
import cgitb; cgitb.enable()
print("Content-type: text/html\r\n\r\n")
print('<html>')
print('<h1>')
print('<title>This is a second test.</title>')
print('</h1>')
print('</body')
print('</html>')
From what I've read about shebang lines, it appears Windows native doesn't support them? So how can I make sure that my computer knows it's supposed to run the code as Python? At the moment, when I press the button on my first HTML page, the page http://127.0.0.1:port/my_code_2.py is merely a white page with my python code printed on it.
Try changing the extension to .cgi on your python file and see if that helps. You'll probably want to use something like bottle.py or django tho if you're running python on a webserver. Bottle is easier to learn but with fewer features.
http://bottlepy.org/docs/dev/index.html
https://www.djangoproject.com/

Import Python codes inside HTML file

As mentioned here, I can import Python codes inside .html files using <% and %> tags. Just to try it, I wrote the below code in notepad and save it as a file named test.html :
<html>
<title>
</title>
<body>
<%print ("Hello")%>
</body>
Once I do a double click on the test.html, Chrome opens with the below line on the top :
<%print ("Heloo")%>
What I must I do to have 'Hello' in output?
Note: "print" is an example, What kind of ways is there to import and run python codes in html files?
That page is related to Karrigell a Python web framework, you can only have Python and HTML files (Web pages) if you use a Python web framework like web.py, Pylons, Django, and others.
Browsers can only execute JavaScript code, other programming languages have to use special components to be executed by browsers.

How can I scrape a cgi python script from website?

I have just started learning about webscraping using selenium and mechanize with great results. I was wondering if it was at all possible to scrape a cgi python script from a site as well so I can replicate the sites functionality offline.
Here is an example script.
http://www.tutorialspoint.com/cgi-bin/hello.py
When I attempt to scrape this file I get the html output from the script instead of the script itself. Which is this:
<html>
<head>
<title>Hello Word - First CGI Program</title>
</head>
<body>
<h2>Hello Word! This is my first CGI program</h2>
</body>
</html>
The details of the python script can be found here:
http://www.tutorialspoint.com/python/python_cgi_programming.htm
If you can provide any insight I would be extremely grateful.
Thanks
Each site consists of two parts: the back-end and front-end.
"Back-end" means on the server side, usually PHP, Python, ASP or JSP languages.
"Front-end" means client side: HTML, JavaScript and CSS.
You, as a surfer view only the front-end, and this is what you scrape. You have no access to the back end.

Categories