Embedding python script into html via pyscript

pyscript_dude · (This post was last modified: Apr-16-2023, 12:14 PM by pyscript_dude.)

Hi everyone,
I want to embed a python script into an html page by using pyscript. What I am trying is giving a sequence of integers as "1,2,3,4,5,6" and another integer "n" which divides the length of the sequence as inputs, the python script gives a matrix. Here is what I have tried:

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

    <input type="text" id="input_str"/>
    <input type="number" id="n"/>
    <button id="submit-button" type="button" py-click="my_function()">OK</button>
    <div id="test-output"></div>

    <p>Output:</p>
    <p id='output'></p>

    <py-config>
      packages = ["numpy"]
    </py-config>

    <py-script>
	import numpy as np
	from pyscript import Element

	def my_function():
		input_str = Element('input.str').value
		n = int(Element('n').value)

    input_list = input_str.split(",")
    w = []
    for num in input_list:
      w.append(int(num))
	
		rows = len(w) // n
		A = np.zeros((rows, n))

    for i in range(len(w)):
      if (w[i] % n == 0):
        A[w[i]//n - 1, n-1] = int(i+1)
    else:
        A[w[i]//n, w[i]%n-1] = int(i+1)

		result_place = Element('output')
		result_place.write(str(A))

    </py-script>
  </body>
</html>

The python script works well alone, however, it gives the following error when I try to compile the html file.

Error:
IndentationError: unindent does not match any outer indentation level

Any help would be appreciated to fix it.

**deanhystad** · Apr-16-2023, 02:47 PM

Pyscript examples show the python code indenented. Yours is at the same level as the html tags.

pyscript_dude · Apr-16-2023, 04:08 PM

I have updated the code as follows:

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>
  <body>
 
    <input type="text" id="input_str"/>
    <input type="number" id="n"/>
    <button id="submit-button" type="button" py-click="my_function()">OK</button>
    <div id="test-output"></div>
 
    <p>Output:</p>
    <p id='output'></p>
 
    <py-config>
      packages = ["numpy"]
    </py-config>
 
    <py-script>
    import numpy as np
    from pyscript import Element
 
    def my_function():
        input_str = Element('input_str').value
        n = int(Element('n').value)
 
    input_list = input_str.split(",")
    w = []
    for num in input_list:
      w.append(int(num))
     
    rows = len(w) // n
    A = np.zeros((rows, n))
 
    for i in range(len(w)):
      if (w[i] % n == 0):
        A[w[i]//n - 1, n-1] = int(i+1)
    else:
        A[w[i]//n, w[i]%n-1] = int(i+1)
 
        result_place = Element('output')
        result_place.write(str(A))
 
    </py-script>
  </body>
</html>

However, now it gives the following error message:

Error:
NameError: name 'input_str' is not defined

Any ideas to fix it?

**deanhystad** · (This post was last modified: Apr-16-2023, 04:53 PM by deanhystad.)

You don't have a variable named input_str assigned outside my_function().

    def my_function():
        input_str = Element('input.str').value  # Assigned inside function
        n = int(Element('n').value)
 
    input_list = input_str.split(",")  #  Never assigned out here

Is this an indentation error?

for i in range(len(w)):
    if (w[i] % n == 0):
    A[w[i]//n - 1, n-1] = int(i+1)
else:
    A[w[i]//n, w[i]%n-1] = int(i+1)

    result_place = Element('output')   # Should these lines be same depth as else?
    result_place.write(str(A))

pyscript_dude · Apr-16-2023, 05:21 PM

I have edited the code as follows

    def my_function():
        input_str = Element('input_str').value
        n = int(Element('n').value)
        input_list = input_str.split(",")
        w = []

and now it gives the error:

Error:
NameError: name 'input_list' is not defined

Any suggestion?

**deanhystad** · (This post was last modified: Apr-16-2023, 06:46 PM by deanhystad.)

The name was not thr problem. This is a scope problem. Do you know about python variable scope?

A variable assignment inside a function creates a variable that is only visible inside the function. Outside the function the variable does not exist. Outside the function is "outside" the scope of the variable.

You could tell python to create the variable in the global scope like this:

    def my_function():
        global input_str
        input_str = Element('input_str').value
        n = int(Element('n').value)

But this wouldn't work for you either since you have to call a function to execute the code, and the input_str variable does not exist until it is assigned (when the function executes).

Using global variables should be avoided. Global variables make it easier to create bugs and makes it harder to find those bugs. Instead of using a global variable to return a value from a function, use the "return" statement.

Let's say the purpose of my_function() is to get the values for inputs "input_str" and "n". I would write the function like this:

def get_inputs():   # Name functions for what they do or what they return.
    """Get values for inputs_str and n."""    #  Use a docstring to describe what the function does
    input_str = Element('input_str').value
    n = int(Element('n').value)
    return input_str, n

Somewhere in you script you would call the function like this:

input_str, n = get_inputs()

You would call the function before you using input_str or n.

***snippsat*** · (This post was last modified: Apr-16-2023, 07:28 PM by snippsat.)

Could fix the scope problem to move all code into my_function().
Quick test,code now work to code that's comment out.
Input 1,2,4 and 4 then press OK.

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

    <input type="text" id="input_str"/>
    <input type="number" id="n"/>
    <button id="submit-button" type="button" py-click="my_function()">OK</button>
    <div id="test-output"></div>

    <p>Output:</p>
    <p id='output'></p>

    <py-config>
      packages = ["numpy"]
    </py-config>

    <py-script>
    import numpy as np
    from pyscript import Element

    def my_function():
        input_str = Element('input_str').value
        print(input_str)
        n = int(Element('n').value)
        print(n)
        input_list = input_str.split(",")
        w = []
        for num in input_list:
            w.append(int(num))
        print(w)
        rows = len(w) // n

        A = np.zeros((rows, n))
        for i in range(len(w)):
            print(i)
        '''
            if (w[i] % n == 0):
                A[w[i]//n - 1, n-1] = int(i+1)
            else:
                A[w[i]//n, w[i]%n-1] = int(i+1)
            result_place = Element('output')
            result_place.write(str(A))'''

    </py-script>
  </body>
</html>

So the HTML calls work and now the problem is just a Python code problem between line 40-45.

pyscript_dude · (This post was last modified: Apr-16-2023, 11:17 PM by pyscript_dude.)

@deanhystad, thanks for this detailed great answer.

@snippsat, thank you so much, it worked like a charm.

Possibly Related Threads…
Thread		Author	Replies	Views	Last Post
	C++ program embedding Python crashes when calling PyUnicode_AsUTF8	Alexandros	4	2,451	Sep-19-2025, 11:11 AM Last Post: Alexandros
	pyscript index error while calling input from html form	pyscript_dude	2	2,714	May-21-2023, 08:17 AM Last Post: snippsat
	Tkinterweb (Browser Module) Appending/Adding Additional HTML to a HTML Table Row	AaronCatolico1	0	2,997	Dec-25-2022, 06:28 PM Last Post: AaronCatolico1
	C++ python embedding	comarius	0	1,682	Aug-26-2022, 02:01 AM Last Post: comarius
	reading html and edit chekcbox to html	jacklee26	5	5,674	Jul-01-2021, 10:31 AM Last Post: snippsat
	Embedding a python file online	Dreary35	0	2,387	Jun-10-2021, 05:05 PM Last Post: Dreary35
	Embedding python cause crash when use boost::asio multi threading	udvatt108	0	2,566	Oct-04-2020, 03:15 PM Last Post: udvatt108
	Need help merging/embedding	duckredbeard	10	6,441	Aug-13-2020, 04:48 AM Last Post: duckredbeard
	How to kill a bash script running as root from a python script?	jc_lafleur	4	9,946	Jun-26-2020, 10:50 PM Last Post: jc_lafleur
	crontab on RHEL7 not calling python script wrapped in shell script	benthomson	1	3,632	May-28-2020, 05:27 PM Last Post: micseydel

Embedding python script into html via pyscript

User Panel Messages

Announcements