增强Python GUI与增强Markdown - DataDrivenInvestor

增强Python GUI与增强Markdown - DataDrivenInvestor

Marine Gosselin

DataDrivenInvestor

作者: Vincent Gosselin (opens new window)

在过去的几年里,有几个Python包提出了用于构建基于Web的界面的Python API,例如:

然而,Taipy研发团队创建的一个被低估的工作是一个 alt ernative API: 一个用于Python开发者的增强Markdown API

Markdown是最常用的标记语言之一:从简单的文本文档开始,Markdown允许生成具有高展示质量的HTML页面,可立即部署在网络上。对于那些不熟悉Markdown语言的人,请查看https://www.markdownguide.org/basic-syntax/ (opens new window)

基于Neil Bruce博士的工作[1],Taipy团队通过允许作者添加标签来扩展Markdown的非常简单的语法,这些标签会直接在他们的内容中触发生成一个图形界面元素。

在他2020年的开创性文章“动态数据驱动用户界面的框架”[2]中,Mirovic提出了一个基于底层数据模型控制应用程序的模型。然而,这种方法的一个显著缺点是它要求程序员显式定义他们希望使用的数据源。 提议的解决方案涉及直接将图形组件连接到应用程序数据中。程序员只需在开发他们的Markdown源代码时使用他们希望在GUI中反映的变量名称。例如,如果代码中出现一个变量'value',在文本中添加标签 <{value}> 将显示它。要使变量可由最终用户编辑,可以将其包含在可编辑的文本区域内:<{value}|text_input>

在图形界面开发阶段,程序员无需担心这些元素相对于彼此的布局。从Markdown转换为HTML确保元素适当地放置在周围的文本流中。

这种方法不需要Python开发人员/数据科学家学习新工具。他们可以创建一个文本页面,添加格式化标签和界面元素。

接下来的步骤包括提供所有类型的图形元素。 用户在他们的应用程序中需要的功能,确保每个图形组件都能图形化地表示连接的数据,将GUI与管理变量的应用程序同步,使经验丰富的GUI开发人员能够完善组件的图形表示,并使生成的GUI适应可用性和可访问性需求。

基于Web的用户界面:

选择通过Web浏览器部署界面,以实现可移植性和适应各种情况。这涉及提出一个客户端-服务器架构,其中服务器托管主应用程序(数据和算法),客户端是一个简单的Web浏览器,使用标准市场协议(HTTP,WebSocket)连接到服务器。

数据转换和用户界面生成:

该项目涉及将Python数据类型转换为基于客户端组件类型(文本,按钮,选择器,图表等)的类似Markdown的表示。其他语法如XUL或XAML也可以选择。 这些语法的主要缺点是需要对图形表示编程接口有详细的了解才能创建一个功能正常的用户界面。

以下是在服务器端将数据转换为Web客户端表示所需实现的不同问题:

1. 数据转换和界面表示: #

该项目专注于自动将服务器端数据转换为适合Web客户端表示的格式。这涉及考虑各种数据类型和相应的界面元素,比如按钮中的文本或滑块中的数值。

2. 数据类型到表示映射 #

最初的工作是基本的Python数据类型(布尔值、整数、浮点数、字符串、列表、字典等),并将其转换为基于客户端所需组件类型的表示,如可编辑文本、按钮、选择器等。

3. 用户界面设计方法 #

目标是要 使用户能够以最少的技术技能描述这些元素在Markdown页面上的组织方式。这种增强/增强的Markdown需要在Markdown文本中集成控制元素,这些元素将在客户端转换为活动图形组件。

4. 通信协议

为了在服务器(托管应用程序)和客户端(显示控制元素)之间建立连接,他们选择了WebSocket(在评估了其他协议如_RPC_、_Apache Arrow Flight_之后)。这种协议轻量级、高效,并且需要最少的配置。它允许对必要的数据结构进行序列化,在服务器端(Python)和客户端(JavaScript)均受支持。

5. 用户操作和数据传输

WebSocket将用户操作转换为消息,这些消息被发送到应用程序以处理应用程序变量的更改。反之,应用程序数据的更改被传输 ## 6. 特定关注复杂数据

重点是在复杂情况下如地图或图表等情况下,从服务器传输数据到客户端,而不会过分占用网络和处理能力。开发了解决方案来管理复杂图形对象中的大量数据,确保有效的数据传输并最大程度地减少用户等待时间。目标是仅传输可显示的数据,使用智能采样技术来避免网络和进程饱和。

以下是使用Taipy增强的Markdown语法编写的示例代码的结果:

from math import cos, expvalue = 10page = """Markdown# Taipy *Demo*Value: <|{value*10}|text|><|{value}|slider|><|{compute_data(value)}|chart|>"""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)p

可以注意到语法 <|element1|element2|…|> ment1_ 是一个 Python 对象,element2 是与该对象关联的图形表示类型。

例如:<|{value}|slider|> 显示与 Python 变量 value 关联的滑块。

下面是该 Python 脚本的执行:

参考资料:

[1] — 使用 Markdown 进行原型设计。Neil Bruce 博士,2017。

[2] — 一种用于动态数据驱动用户界面的框架。M. Mirović,2020。