2021-04-06 22:11:00 +00:00
|
|
|
|
(quickstart)=
|
2020-10-30 20:09:25 +00:00
|
|
|
|
|
2021-04-06 22:11:00 +00:00
|
|
|
|
# Getting started
|
2018-06-21 15:19:34 +00:00
|
|
|
|
|
2021-04-20 16:09:24 +00:00
|
|
|
|
## Try it online
|
|
|
|
|
|
|
|
|
|
|
|
Try Pyodide in a [REPL](https://pyodide.org/en/latest/console.html) directly in your browser (no installation needed).
|
|
|
|
|
|
|
2021-04-06 22:11:00 +00:00
|
|
|
|
## Setup
|
2018-06-21 15:19:34 +00:00
|
|
|
|
|
2021-03-31 22:43:46 +00:00
|
|
|
|
To include Pyodide in your project you can use the following CDN URL:
|
2021-07-26 23:00:27 +00:00
|
|
|
|
|
2021-08-11 10:00:44 +00:00
|
|
|
|
```text
|
2022-01-10 23:44:13 +00:00
|
|
|
|
https://cdn.jsdelivr.net/pyodide/dev/full/pyodide.js
|
2021-03-31 22:43:46 +00:00
|
|
|
|
```
|
2019-05-31 20:02:51 +00:00
|
|
|
|
|
2021-11-14 20:47:49 +00:00
|
|
|
|
You can also download a release from [GitHub
|
2021-03-31 22:43:46 +00:00
|
|
|
|
releases](https://github.com/pyodide/pyodide/releases) or build Pyodide
|
2021-08-11 10:00:44 +00:00
|
|
|
|
yourself. See {ref}`downloading_deploying` for more details.
|
2019-05-31 20:02:51 +00:00
|
|
|
|
|
2021-07-27 04:31:59 +00:00
|
|
|
|
The `pyodide.js` file defines a single async function called
|
|
|
|
|
|
{any}`loadPyodide <globalThis.loadPyodide>` which sets up the Python environment
|
|
|
|
|
|
and returns {js:mod}`the Pyodide top level namespace <pyodide>`.
|
2018-06-21 15:19:34 +00:00
|
|
|
|
|
2021-02-15 08:38:49 +00:00
|
|
|
|
```pyodide
|
2021-03-31 22:43:46 +00:00
|
|
|
|
async function main() {
|
2022-01-10 23:44:13 +00:00
|
|
|
|
let pyodide = await loadPyodide({ indexURL : "https://cdn.jsdelivr.net/pyodide/dev/full/" });
|
2021-03-03 08:11:50 +00:00
|
|
|
|
// Pyodide is now ready to use...
|
2021-03-31 22:43:46 +00:00
|
|
|
|
console.log(pyodide.runPython(`
|
|
|
|
|
|
import sys
|
|
|
|
|
|
sys.version
|
|
|
|
|
|
`));
|
2021-05-17 17:08:25 +00:00
|
|
|
|
};
|
2021-03-31 22:43:46 +00:00
|
|
|
|
main();
|
2018-06-21 15:19:34 +00:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## Running Python code
|
|
|
|
|
|
|
2021-03-31 22:43:46 +00:00
|
|
|
|
Python code is run using the {any}`pyodide.runPython` function. It takes as
|
|
|
|
|
|
input a string of Python code. If the code ends in an expression, it returns the
|
2021-09-29 08:01:53 +00:00
|
|
|
|
result of the expression, translated to JavaScript objects (see
|
2021-03-31 22:43:46 +00:00
|
|
|
|
{ref}`type-translations`). For example the following code will return the
|
2021-09-29 08:01:53 +00:00
|
|
|
|
version string as a JavaScript string:
|
2021-07-26 23:00:27 +00:00
|
|
|
|
|
2021-02-15 08:38:49 +00:00
|
|
|
|
```pyodide
|
2020-07-13 19:46:20 +00:00
|
|
|
|
pyodide.runPython(`
|
2021-03-31 22:43:46 +00:00
|
|
|
|
import sys
|
|
|
|
|
|
sys.version
|
2020-07-13 19:46:20 +00:00
|
|
|
|
`);
|
2018-06-21 15:19:34 +00:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-03-03 08:11:50 +00:00
|
|
|
|
After importing Pyodide, only packages from the standard library are available.
|
2021-03-31 22:43:46 +00:00
|
|
|
|
See {ref}`loading_packages` for information about loading additional packages.
|
2020-10-31 09:02:23 +00:00
|
|
|
|
|
2020-05-20 16:58:43 +00:00
|
|
|
|
## Complete example
|
|
|
|
|
|
|
|
|
|
|
|
Create and save a test `index.html` page with the following contents:
|
2021-07-26 23:00:27 +00:00
|
|
|
|
|
2021-02-15 08:38:49 +00:00
|
|
|
|
```html-pyodide
|
2020-05-20 16:58:43 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
2020-07-13 19:46:20 +00:00
|
|
|
|
<head>
|
2022-01-10 23:44:13 +00:00
|
|
|
|
<script src="https://cdn.jsdelivr.net/pyodide/dev/full/pyodide.js"></script>
|
2020-07-13 19:46:20 +00:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
Pyodide test page <br>
|
2021-03-03 08:11:50 +00:00
|
|
|
|
Open your browser console to see Pyodide output
|
2020-05-20 16:58:43 +00:00
|
|
|
|
<script type="text/javascript">
|
2021-03-31 22:43:46 +00:00
|
|
|
|
async function main(){
|
2021-05-23 01:54:27 +00:00
|
|
|
|
let pyodide = await loadPyodide({
|
2022-01-10 23:44:13 +00:00
|
|
|
|
indexURL : "https://cdn.jsdelivr.net/pyodide/dev/full/"
|
2021-03-31 22:43:46 +00:00
|
|
|
|
});
|
|
|
|
|
|
console.log(pyodide.runPython(`
|
|
|
|
|
|
import sys
|
|
|
|
|
|
sys.version
|
|
|
|
|
|
`));
|
2021-04-06 08:14:07 +00:00
|
|
|
|
console.log(pyodide.runPython("print(1 + 2)"));
|
2021-03-31 22:43:46 +00:00
|
|
|
|
}
|
|
|
|
|
|
main();
|
2020-05-20 16:58:43 +00:00
|
|
|
|
</script>
|
2020-07-13 19:46:20 +00:00
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
2020-05-20 16:58:43 +00:00
|
|
|
|
```
|
|
|
|
|
|
|
2020-10-13 09:58:59 +00:00
|
|
|
|
## Alternative Example
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<!DOCTYPE html>
|
2020-10-30 20:09:25 +00:00
|
|
|
|
<html>
|
2021-07-26 23:00:27 +00:00
|
|
|
|
<head>
|
2022-01-10 23:44:13 +00:00
|
|
|
|
<script src="https://cdn.jsdelivr.net/pyodide/dev/full/pyodide.js"></script>
|
2021-07-26 23:00:27 +00:00
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
You can execute any Python code. Just enter something in the box below and
|
|
|
|
|
|
click the button.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<input id="code" value="sum([1, 2, 3, 4, 5])" />
|
|
|
|
|
|
<button onclick="evaluatePython()">Run</button>
|
|
|
|
|
|
<br />
|
|
|
|
|
|
<br />
|
|
|
|
|
|
<div>Output:</div>
|
|
|
|
|
|
<textarea id="output" style="width: 100%;" rows="6" disabled></textarea>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
const output = document.getElementById("output");
|
|
|
|
|
|
const code = document.getElementById("code");
|
|
|
|
|
|
|
|
|
|
|
|
function addToOutput(s) {
|
|
|
|
|
|
output.value += ">>>" + code.value + "\n" + s + "\n";
|
2021-03-31 22:43:46 +00:00
|
|
|
|
}
|
2020-10-13 09:58:59 +00:00
|
|
|
|
|
2021-07-26 23:00:27 +00:00
|
|
|
|
output.value = "Initializing...\n";
|
|
|
|
|
|
// init Pyodide
|
|
|
|
|
|
async function main() {
|
|
|
|
|
|
let pyodide = await loadPyodide({
|
2022-01-10 23:44:13 +00:00
|
|
|
|
indexURL: "https://cdn.jsdelivr.net/pyodide/dev/full/",
|
2021-07-26 23:00:27 +00:00
|
|
|
|
});
|
|
|
|
|
|
output.value += "Ready!\n";
|
|
|
|
|
|
return pyodide;
|
|
|
|
|
|
}
|
|
|
|
|
|
let pyodideReadyPromise = main();
|
|
|
|
|
|
|
|
|
|
|
|
async function evaluatePython() {
|
|
|
|
|
|
let pyodide = await pyodideReadyPromise;
|
|
|
|
|
|
try {
|
|
|
|
|
|
let output = pyodide.runPython(code.value);
|
|
|
|
|
|
addToOutput(output);
|
|
|
|
|
|
} catch (err) {
|
|
|
|
|
|
addToOutput(err);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
2020-10-13 09:58:59 +00:00
|
|
|
|
</html>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2021-09-29 08:01:53 +00:00
|
|
|
|
## Accessing Python scope from JavaScript
|
2020-10-13 09:58:59 +00:00
|
|
|
|
|
2021-09-29 08:01:53 +00:00
|
|
|
|
You can also access from JavaScript all functions and variables defined in
|
2021-03-24 11:05:00 +00:00
|
|
|
|
Python by using the {any}`pyodide.globals` object.
|
2020-10-13 09:58:59 +00:00
|
|
|
|
|
2021-03-20 18:56:10 +00:00
|
|
|
|
For example, if you run the code `x = numpy.ones([3,3])` in Python, you can
|
2021-09-29 08:01:53 +00:00
|
|
|
|
access the variable `x` from JavaScript in your browser's developer console
|
2021-03-24 11:05:00 +00:00
|
|
|
|
as `pyodide.globals.get("x")`. The same goes
|
2021-03-23 21:48:50 +00:00
|
|
|
|
for functions and imports. See {ref}`type-translations` for more details.
|
2020-10-13 09:58:59 +00:00
|
|
|
|
|
|
|
|
|
|
You can try it yourself in the browser console:
|
2021-07-26 23:00:27 +00:00
|
|
|
|
|
2021-03-31 22:43:46 +00:00
|
|
|
|
```pyodide
|
|
|
|
|
|
pyodide.runPython(`
|
|
|
|
|
|
import numpy
|
|
|
|
|
|
x=numpy.ones((3, 4))
|
|
|
|
|
|
`);
|
2021-03-24 11:05:00 +00:00
|
|
|
|
pyodide.globals.get('x').toJs();
|
2021-03-23 21:48:50 +00:00
|
|
|
|
// >>> [ Float64Array(4), Float64Array(4), Float64Array(4) ]
|
|
|
|
|
|
|
|
|
|
|
|
// create the same 3x4 ndarray from js
|
|
|
|
|
|
x = pyodide.globals.get('numpy').ones(new Int32Array([3, 4])).toJs();
|
|
|
|
|
|
// x >>> [ Float64Array(4), Float64Array(4), Float64Array(4) ]
|
2020-10-13 09:58:59 +00:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-03-20 18:56:10 +00:00
|
|
|
|
Since you have full access to Python global scope, you can also re-assign new
|
2021-09-29 08:01:53 +00:00
|
|
|
|
values or even JavaScript functions to variables, and create new ones from
|
|
|
|
|
|
JavaScript:
|
2020-10-13 09:58:59 +00:00
|
|
|
|
|
2021-03-31 22:43:46 +00:00
|
|
|
|
```pyodide
|
2020-10-13 09:58:59 +00:00
|
|
|
|
// re-assign a new value to an existing variable
|
2021-02-23 19:25:10 +00:00
|
|
|
|
pyodide.globals.set("x", 'x will be now string');
|
2020-10-13 09:58:59 +00:00
|
|
|
|
|
|
|
|
|
|
// create a new js function that will be available from Python
|
|
|
|
|
|
// this will show a browser alert if the function is called from Python
|
2021-02-23 19:25:10 +00:00
|
|
|
|
pyodide.globals.set("alert", alert);
|
2020-10-13 09:58:59 +00:00
|
|
|
|
|
|
|
|
|
|
// this new function will also be available in Python and will return the squared value.
|
2021-02-23 19:25:10 +00:00
|
|
|
|
pyodide.globals.set("square", x => x*x);
|
2021-03-23 21:48:50 +00:00
|
|
|
|
|
|
|
|
|
|
// You can test your new Python function in the console by running
|
2021-04-06 08:14:07 +00:00
|
|
|
|
pyodide.runPython("square(3)");
|
2020-10-13 09:58:59 +00:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
Feel free to play around with the code using the browser console and the above example.
|
|
|
|
|
|
|
2021-09-29 08:01:53 +00:00
|
|
|
|
## Accessing JavaScript scope from Python
|
2020-10-13 09:58:59 +00:00
|
|
|
|
|
2021-09-29 08:01:53 +00:00
|
|
|
|
The JavaScript scope can be accessed from Python using the `js` module (see
|
2021-03-20 18:56:10 +00:00
|
|
|
|
{ref}`type-translations_using-js-obj-from-py`). This module represents the
|
|
|
|
|
|
global object `window` that allows us to directly manipulate the DOM and access
|
|
|
|
|
|
global variables and functions from Python.
|
2020-10-13 09:58:59 +00:00
|
|
|
|
|
|
|
|
|
|
```python
|
|
|
|
|
|
import js
|
|
|
|
|
|
|
|
|
|
|
|
div = js.document.createElement("div")
|
|
|
|
|
|
div.innerHTML = "<h1>This element was created from Python</h1>"
|
|
|
|
|
|
js.document.body.prepend(div)
|
|
|
|
|
|
```
|
