Using Notebooks
Running in Notebooks¶
You can create and run a Taipy Graphical User Interface from a Jupyter Notebook.
In this situation, the web server that Taipy relies on will run on a separate thread, so the Notebook works as expected.
Creating a Taipy GUI application in a new Notebook¶
Here is a step-by-step approach on hosting a Taipy GUI within your Notebook and interacting with it.
You will start your Jupyter server the usual way:
jupyter notebook
Example code
You may want to load the Notebook source file directly within Jupyter and move from cell to cell instead of entering the code in the following steps.
Create a new Notebook by selecting the New > Python 3 (ipykernel) option located
in the upper right corner of the Jupyter interface.
Then start creating the Notebook content.
Enter the following code into the first Notebook cell:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
As you can see, we create and run our Gui
instance in lines 13 and 14.
Note that we use the Markdown
class explicitly (in line 3). That is because
later in our code, we will want to modify the content of the page.
Run the cell. The output shows that a server was started (usually on
http://127.0.0.1:5000), hosting the 'Taipy' Flask app.
A new window is created in your browser, displaying the small
interface we have just created.
Note that the text control automatically displays value when you move the slider
thumb. That shows that Taipy has successfully bound the variable value to both
the text
and the slider
controls.
You can witness the user interface update when you change a variable on the fly. In the context of Notebooks, you can directly access the variables that are bound to the user interface:
Updating variables¶
The point of using Notebooks (besides making it possible to provide explanatory text along with the code in a single document) is to allow for changing variables on the fly and see the impact of these changes immediately. Let's see how we can use that feature with Taipy.
Enter the following line into a new cell:
gui.state.value = 50
The gui.state property
This property is provided only in the context of Notebooks, where there is a single connection to the server, allowing to access a single 'state'.
Updating pages¶
Pages can also be updated on-the-fly.
In another cell, enter the following text:
import math
xrange = range(0, 720)
def compute_data(a):
return [ a * math.cos(2 * math.pi * x / 100) +
(100-a) * math.sin(2 * math.pi * x / 50)
for x in xrange]
data = compute_data(value)
After running this cell, the variable data holds an array of floating-point values representing some fancy trigonometric function (computed in compute_data()) based on some parameter.
If we want to display these values in a chart, we need to change our page to
add a chart
control to it.
You can update the page content on the fly by creating a new cell with the following
content:
page.set_content("""
# Taipy in a Notebook
Value: <|{value}|>
Set: <|{value}|slider|>
<|{data}|chart|>
""")
If you refresh the page where the interface is displayed, you will see that
the chart
control appears just like you expected.
A final step we can take is to add some interaction to this application.
We want the data recomputed when the sider value is modified and
witness the chart reflect that change.
Create a final cell and enter the following:
def on_change(state, var_name, var_value):
if var_name == "value":
state.data = compute_data(state.value)
The code in this cell updates the data displayed in the user
interface when the variable value changes (that is, when the user
moves the slider thumb).
However, the Gui
object was initially created without knowing
this function that it must bind controls to. To reset the Taipy server
and connect to on_change(), you must run the final cell:
gui.stop()
gui.run()
Go to the Taipy interface page and refresh.
The slider now controls the chart that is automatically updated when a new
value is set.
Restarting the web server
Some Notebook environments are not able to restart the underlying web server so that
Taipy GUI can immediately reuse the port number it was communicating with. To cope with this
problem, in the context of Notebooks only, the port number that is used as part of the
application URL is a proxy to the real port that is served. Invoking run()
after stop()
generates a hidden port number that gets used transparently. This behavior is controlled by the
notebook_proxy configuration setting.