Random number generation using PyScript

Demo developed by Dr. Tirthajyoti sarkar

Check out the announcement from Anaconda about PyScript framework

PyScript is aswesome, it just takes a few seconds to load...

To provide the power of Python on your browser, this technology needs to load a special virtual machine and all necessary Python modules

So, sit back and relax. We are loading the modules and generating some random variables as a test. You can start interacting with the page when you see a histogram of those random variates displayed below.

We promise that, once loaded, your interactions will be Python-powered and fast! You can also read more about this awesome framework here at Anaconda's engineering blog.

Anaconda Engineering Blog about PyScript

Test: Random integers

These are 100 random integers, generated by `NumPy`

We literally wrote this pure Python code in the HTML file to generate these numbers! If you don't believe us, just right-click and view the source code of this page :-) The only thing to note here is the <py-script></py-script> tags around the code block.

<py-script>
import numpy as np
integers = np.random.randint(0,100,100)
print(integers)
</py-script>

import numpy as np integers = np.random.randint(0,100,100) print(integers)

This is the histogram of those random integers, generated by `Matplotlib`

You can do all the usual Matplotlib tweaks and tricks with the visualization as you would in a normal Python script or Jupyter Notebook. Here, we have just set the dpi=150 and figsize=(5,2) inside the plt.subplots() function.

This code is inline too i.e., embedded with this HTML. So, feel free to check it out. The last line of the Python code block is just the figure object fig1. This tells the PyScript framework to output the object/image (it detects the type intelligently) to the corresponding div section.

import matplotlib.pyplot as plt fig1,ax1 = plt.subplots(1,1,dpi=150,figsize=(5,2)) ax1.hist(integers,bins=20,edgecolor='k',color='blue') ax1.set_title("Histogram of random integers",fontsize=11) fig1

Changing the image output method

In the next section, we generate histogram based on the type of the distribution that the user (you) choses. We slightly change the output method for this as we grab the div element where we want to display the image and write the figure object with a code like out.write(fig1)

The importance of this grabbing a HTML element directly from within the Python code block cannot be emphasized enough. This opens up all kind of possibilities of user interaction with Python data processing using conventional HTML widgets in a simple, intuitive, and flexible manner. In the next section, we put this to use with simple action buttons (that call pure Python functions), dropdown menu (that passes user choice to Python functions), and even a slider (that adjusts a hyperparametr like data density).

User-defined random variate generation

How many random variates to generate? (if left blank, 10 values will be generated)

Choose the type of distribution you want to generate random variates from

As you expect, every time the button is clicked, you will see a new histogram. All that computation is happening with pure Python code and in your browser!

Adjust the number of random variates

500

import numpy as np import matplotlib.pyplot as plt out = Element("outputDiv") input_num = Element("how-many") dist_type = Element("dist").value out2 = Element("outputDiv2") def random_num(n): """ """ r = np.random.normal(size=n) return np.array2string(r) def clear(*ags, **kws): out = Element("outputDiv") out.clear() def print_num(*ags, **kws): if input_num.value=='': n = 10 else: n = int(input_num.value) r = random_num(n) out.write(f"Here are {n} random variates from Normal distribution: {r}") def show_dist(*ags, **kws): dist_type = Element("dist").value dist_size = int(Element("slider-num-var").value) fig1,ax1 = plt.subplots(1,1,dpi=150,figsize=(6,4)) fig1.subplots_adjust(hspace=0.25) if dist_type=='Gaussian': data = np.random.normal(size=dist_size) ax1.hist(data,bins=20,edgecolor='k',color='blue') ax1.set_title(f"Histogram of Normal (Gaussian) Distribution \nwith {dist_size} random variates",fontsize=11) out2.write(fig1) if dist_type=='Beta': data = np.random.beta(1,3,size=dist_size) ax1.hist(data,bins=20,edgecolor='k',color='blue') ax1.set_title(f"Histogram of Beta Distribution \nwith {dist_size} random variates",fontsize=11) out2.write(fig1) if dist_type=='Exponential': data = np.random.exponential(0.5,size=dist_size) ax1.hist(data,bins=20,edgecolor='k',color='blue') ax1.set_title(f"Histogram of Exponential Distribution \nwith {dist_size} random variates",fontsize=11) out2.write(fig1)