Taipy Website

In the past few years, several Python packages have proposed Python API to build web-based interfaces such as:

– And more recently Taipy

However, one of the most underrated work has been with the creation by the Taipy R&D team of an alternative API: an Augmented Markdown API for Python developers. Markdown is one of the most used markup languages: starting from a simple text document, Markdown allows the generation of HTML pages with high presentation quality, immediately deployable on a network. For those of you not familiar with the markdown language, have a look here

Based on the work of Dr. Neil Bruce [1], the Taipy team has extended the very simple syntax of Markdown by allowing the writer to add tags that would trigger the generation of a graphical interface element directly in their content.

‍

In his 2020 seminal article, “A Framework for Dynamic Data-Driven User Interfaces”[2], Mirovic proposes a model for controlling an application based on its underlying data model. However, a significant disadvantage of this approach is that it requires programmers to explicitly define the data sources they wish to use to construct their interface.

‍

The proposed solution involves directly connecting graphical components to application data. Programmers can simply use the name of the variable they wish to be reflected in the GUI during the development of their Markdown source. For instance, if a variable ‘value’ appears in the code, adding the tag <{value}> in the text itself will display it. To make the variable editable by the end user, it can be contained within an editable text area: <{value}|text_input>.

‍

In the graphical interface development stage, programmers don’t need to worry about the layout of these elements relative to each other. The conversion from Markdown to HTML ensures that elements are appropriately placed within the surrounding text flow.

‍

This approach does not require Python developers/Data scientists to learn new tools. They can create a text page, adding formatting tags and interface elements.

‍

The next steps consisted of providing all types of graphical elements that users want in their application, ensuring each graphical component can graphically represent the connected data, synchronizing the GUI with the application managing the variables, enabling experienced GUI developers to refine the graphical representation of components, and adapting the generated GUIs to usability and accessibility needs.

‍

Web-Based User Interfaces: The choice was made to deploy interfaces through web browsers for portability and adaptation to various situations. This involved proposing a client-server architecture where the server hosts the main application (data and algorithms) and the client is a simple web browser connecting to the server using standard market protocols (HTTP, WebSocket).

‍

Data Transformation and User Interface Generation: The project involved transforming Python data types into Markdown-like representations based on client-side component types (text, buttons, selectors, charts, etc.). Other syntaxes like XUL or XAML could have been selected but the major drawback of these syntaxes is the need for detailed knowledge of graphical representation programming interfaces to create a functioning user interface.

‍

Here are the different issues that had to be implemented to transform data on the server side into a representation on the Web client:

1- Data Transformation and Interface Representation

‍The project focused on automatically converting server-side data into a format suitable for web client representation. This involved considering various data types and corresponding interface elements, such as text in a button or a numeric value in a slider.

2- Data Type to Representation Mapping

‍The initial work was with basic Python data types (Boolean, integer, float, string, lists, dictionaries, etc.) and transformed these into representations based on the type of component desired on the client side, like editable text, buttons, selectors, etc.

3- User Interface Design Approach

The goal was to enable users with minimal technical skills to describe how these elements would be organized on a Markdown page. This enhanced/augmented Markdown needed to integrate control elements within the markdown text, which would be transformed into active graphical components on the client side.

4- Communication Protocol

To establish a connection between the server (hosting the application) and the client (displaying the control elements), they opted for WebSocket (after having evaluated other protocols such as RPC, Apache Arrow Flight). This protocol is lightweight, efficient, and requires minimal configuration. It allows for the serialization of necessary data structures, supported on both the server side (Python) and the client side (JavaScript).

5- User Actions and Data Transmission:

WebSocket converts user actions into messages, which are sent to the application for processing changes in application variables. Conversely, changes in application data are transmitted back to the client, impacting the graphical components.

6- Specific Focus on complex data:

A key focus was on transferring data from the server to the client, especially in complex cases like maps or graphs, without overwhelming network and processing capacities. Solutions were developed to manage large volumes of data in complex graphical objects, ensuring efficient data transfer and minimizing user wait times. The goal was to transmit only the displayable data, using intelligent sampling techniques to avoid network and process saturation.

Here’s the result with a sample code written using Taipy augmented markdown syntax:



from math import cos, exp
value = 10
page = """
Markdown
# Taipy *Demo*
Value: 


"""

def compute_data(decay:int)->list:
      return [cos(i/6) * exp(-i*decay/600) for i in range(100)]

Gui(page).run(use_reloader=True, port=5002)

‍

One can notice the syntax <|element1|element2|…|>element1 is a Python object, element2 is the type of graphical representation associated with this object.Example: <|{value}|slider|> displays a slider associated with the Python variable value.The execution of that Python script is given below: