Making live python compiler inside a HTML page using PyScript

Question

I want to build a live Pythonn compiler similar to those at w3schools for Python, for some examples on my blog. I tried different approaches, and would like to hear different oppinions, but as of yesterday I'm trying to implement it using PyScript.

The documentation I found for PyScript doesn't help me a lot, as it seems like I can't understand it, or doing something wrong.

Here's the code that I'm trying to implement:

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <title>Writing to the page</title>

  <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
  <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  
  <textarea id="area1" rows="15">something</textarea>
  <button onclick="myFunction()">Click me</button>

  <py-script id="demo">
    print("Hello, world!")
</py-script>

<py-terminal></py-terminal>
<script>
        function myFunction() {
            var text1 = document.getElementById('area1').value; 
            document.getElementById("demo").innerHTML = text1;
        }
</script>
</body>
</html>

It just prints the content of the textarea above the terminal, without executing the code and printing the output, inside the terminal, as I imagined.

I'm expecting to make this functinal, and I tried a few things, but unsuccessfully.

I also tried:

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <title>Writing to the page</title>

  <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
  <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  
  <textarea id="area1" rows="15">print("something")</textarea>

  <script>
  let text1 = document.getElementById('area1').value; 
  </script>

<py-script>
def print_to_page(x):
    exec(x)
</py-script>
<button py-click="print_to_page(text1)" id="print">Run!</button>

</body>
</html>

But I'm not sure how to pass the variable from JS to PyScript.

<button py-click="print_to_page()" id="print">Print Things!</button> <py-script> def print_to_page(): a = 3 print("I print things!", a) </py-script>  — Срђан Станишић
– Срђан Станишић, Commented Feb 4, 2023 at 3:32
Extra note: When I just have this: <py-script id="demo"> print("Hello, world!") </py-script> <py-terminal></py-terminal> - The code is executed normally in the terminal. — Срђан Станишић
– Срђан Станишић, Commented Feb 4, 2023 at 4:16
Have you seen "To call Python code from JavaScript..."? Also see here or here. — Wayne
– Wayne, Commented Feb 5, 2023 at 1:47

Wayne · Accepted Answer · 2023-02-04 17:37:58Z

2

This 'Answer' is meant to help in addressing:

"I tried different approaches, and would like to hear different oppinions [sic],"

You may want to check out this post:

https://twitter.com/jtpio/status/1523660682708668416 May 2022

"The @SymPy Online Shell is now powered by the @pyodide stack and JupyterLite💡
You can try the latest SymPy release directly in your browser, without installing anything, by visiting the following URL:
https://sympy.org/en/shell.html
Many thanks to Ivan Savov for leading this effort!"

Something like that may integrate well with your blog. You can hack around on it and hopefully put together what you need combined with that example and the documentation.

Related resources:

Alternative approaches:

JupyterBook and MyST-NB seems to be moving along this route. For example see the Render option the left side there. I'm not sure all the pieces are together but you can imagine with the JupyterLite/pyodide stuff it soon will be set for blogs.) Quarto may be heading that way, too.

See also Make Jupyter notebook executable in html format

answered Feb 4, 2023 at 17:37

Wayne

10.7k13 gold badges79 silver badges239 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Срђан Станишић Over a year ago

Thanks a lot for your answer, @Wayne. I would give it a thumps up, but I still don't have enough reputation on StackOverflow so I will go through everything you mentioned and try to implement the solution that way, although I wanted something without Jupyter, but I'll give it a try maybe. I still don't want to accept the answer, because I would like to hear more opinions on the subject, and that would lower the commenting rate, but I will accept it in the near future if nothing else appears. I appreciate your help!

Срђан Станишић Over a year ago

Also, I was thinking of a way to export JS variable and import it to pyscript code, but I'm not exactly sure how to do that and is that the right approach.

Wayne Over a year ago

It wouldn't really be all of Jupyter. It's just taking advantage of the nice shell interface they made.

str1ng Over a year ago

I just wanted to as a reference for this question and answer of @Wayne to say, that I've seen people doing this on much easier way, using Python Flask and including pyscript (PythonInterpeter) in that app in a way that they have form and they use @app.route to basically send form to Flask, as well as returning output. I will try to find it as I find it more easier way to do it (at least I think)... As well, this could potentially end up on exposing sensitive information - therefore I think it would be better to run the code on a secure backend and return the results to the frontend

Wayne Over a year ago

I got the impression by trying to use pyscript which is Web Assembly-based, that the OP was trying to not have to pay costs for a dedicated backend server, @str1ng. Mentioning that though may help someone else ending up seeing this post.

Jeff Glass · Accepted Answer · 2023-02-05 16:38:52Z

Based on your description and the second example, it looks like you want to have a textarea where the user types in Python code, and run button that executes that entered code when clicked. If I've misunderstood your goal, you can disregard this answer.

The way to bring JavaScript objects/variables into Python is using Pyodide's import js syntax, which treats the JavaScript global namespace like a Python module. Here's a version very similar to your second example, which imports JavaScript's document object and uses that to extract the value of the textarea:

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <title>Writing to the page</title>

  <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
  <script defer src="https://pyscript.net/latest/pyscript.js"></script>

  </head>
<body>
<textarea id="area1" rows="15">print("something")</textarea>
<py-script>
    from js import document
    def runTextInTag(id):
        src = document.getElementById(id).value
        exec(src)
</py-script>
<button py-click="runTextInTag('area1')" id="run">Run!</button>

</body>

To address your first example, which changes the innerHTML of the py-script tag itself: A <py-script> tag executes its contained code exactly once, when the custom element is attached to the DOM. This happens shortly after PyScript initializes and the custom HTML element <py-script> is defined, or when you add an additional <py-script> tag to the page.So, in your first example, setting the innerHTML/innerTEXT of a <py-script> tag does not cause that code to be executed again.

You could create a new <py-script> tag with the appropriate innerText and add it to the DOM, at which point its code would be executed, but I think the above method is cleaner for most purposes.

Collectives™ on Stack Overflow

Making live python compiler inside a HTML page using PyScript

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related