AI 年度盘点与2025发展趋势展望,50+案例解析亮相AICon 了解详情
写点什么

PyScript:让 Python 脚本在 Web 中跑起来

  • 2022-05-20
  • 本文字数:2422 字

    阅读完需:约 8 分钟

PyScript:让 Python 脚本在 Web 中跑起来

这是下一个大事件吗?如果继续发展下去,有可能。

 

在 2022 年 PyCon 美国大会期间,作为主题演讲嘉宾之一的 Peter Wang 公布了 PyScript,一种在 HTML 中直接编写 Python 脚本的方法。或许你不知道 Peter,但你可能听说过 Anaconda,这是一种流行的开源的 Python 和 R 语言的发行版本,特别关注数据科学。Peter 正是 Anaconda 的 CEO 和联合创始人。

 

换言之,PyScript 是由一家著名的科技公司开发的,这可能会保证它在不久的将来成为可行的方案。它在 Python 和 Web 开发者中受到了极大的关注,GitHub 上已有超过 10k 颗 Stars。然而,它是否能成为一个成功的、有竞争力的产品,取决于长期的时间和开发投入。目前,它还有一些已知的缺陷(将在最后讨论)。

 

闲话少说,让我们快速了解一下这个令人振奋的产品吧!

py-script 标签

我们知道,HTML 文件是大多数网站最常见的元素。在创建网站时,我们的工作就是直接或间接地通过一些框架来编制 HTML 文件。在典型的 HTML 文件中,你会看到各种类型的标签。例如,<head>定义了 HTML 页面的元数据和关键信息,<title>是整个文档的标题,而<h1><h2>等定义了不同级别的内容标题。

 

如前所述,PyScript 允许你在 HTML 中编写 Python 脚本,它使用一个特殊的标签py-script。在这个标签中,你可以嵌入 Python 脚本。要了解它是如何工作的,可以创建一个 HTML 文件,其中包含以下代码,并使用 Chrome 浏览器打开该文件。在 Chrome 浏览器中,你应该能够看到类似下面这样的内容:



作者截图

 

在上面的代码片段中,你可能已经注意到以下三个关键点:

  • link标签定义了一个外部样式表。在这个例子中,我们使用了 PyScript 提供的css文件。

  • 我们使用script标签来嵌入一个由src定义、由 PyScript 托管的外部脚本。我们使用了defer,这样脚本会在下载和页面解析完成后执行——本质上是一种延迟执行,而不是实时执行。

  • 最有趣的部分是py-script标签。如你所见,print("Hello, World!")是 Python 代码。当执行 HTML 文件时,就可以看到代码求值结果。

 

这很酷,不是吗?如果你不熟悉 Web 开发,但了解 Python,就可以使用 PyScript 嵌入任何有效的 Python 代码。让我们再看一个例子。



另一个 PyScript 示例(图片由作者提供)

 

在这里,我们写了一些需要计算的代码,可以看到,脚本得到了正确的执行。

py-env 标签

在编写更复杂的代码时,就需要使用第三方库。在这种情况下,我们可以利用py-env标签。你可能已经猜到的,env 是 environment 的缩写。py-env标签中列出了运行代码所需的 Python 包。

 

你可能知道,许多数据科学家都使用 pandas 进行数据处理工作。让我们看看下面的例子。



使用包的 PyScript(图片由作者提供)

 

如你所见,我们在py-env标签中指定了依赖项(即 Pandas),该标签包含在head标签中。如果页面需要多个依赖项,可以在这里把它们全部列出:

 

<py-env>  - pandas  - matplotlib  - numpy</py-env>
复制代码

如你所见,在py-script标签中,我们确实可以使用 Pandas 库来创建一个DataFrame对象。然而,当我们把打印出来时就会发现,它是一个单行,而不是一个结构化的数据表。没有一个适当的结构,我们就无法理解这些数据。幸运的是,我们可以使用write函数(下文会讨论)。

将内容写入指定标签

除了 Python 中的标准打印函数print,作为脚本的一部分,PyScript 有自己的write函数,可以将数据发送到页面上指定的 Web 元素中。请看下面的例子:



PyScript 写函数 write(图片由作者提供)

 

与之前的例子相比,上述代码片段有两个重大变化:

  • 我们现在定义了一个 id 为"DataFrame"div,这样稍后就可以引用。

  • py-script标签中,我们创建一个与之前相同的DataFrame对象。但现在,我们不是调用print,而是调用pyscript.write函数,请求 PyScript 处理并在"DataFrame"中显示DataFrame对象。从输出可以看到,我们现在有一个结构化的表格了。

 

write函数不仅能够打印表格,还能够打印数字。下面的例子向你展示了我们如何使用matplotlib(一个流行的 Python 包,用于数据可视化)来显示由 Python 创建的图。



PyScript 打印图(图片由作者提供)

 

如你所见,write 函数以期望的方式显示了图。

py-repl 标签


Python 学习的最好方法之一是使用 REPL:读取(Read)、求值(Evaluate)、打印(Print)和循环(Loop)。也就是说,使用一个交互式的 Python 控制台,输入一些代码,Python 对其进行求值并打印适当的输出,然后重复这个过程。Web 页面也可以提供这样的 REPL 环境,比如 Jupyter Notebook。

 

PyScript 可以使用py-repl标签提供与此类似的东西。在这个元素中,你可以让用户自己编写代码,也可以以编程方式输入代码。请看下面的例子:



PyScript REPL(图片由作者提供)

 

如你所见,上图中有一个单元格,其中包括在py-repl标签中指定的代码。值得注意的是,单元格中的代码可以引用我们之前在py-script标签中定义的变量。一切看起来都很协调。

感想


本文介绍的内容是现阶段 PyScript 所能提供的主要亮点。它似乎是一个很有前途的产品,因为它提供了一个灵活的框架,让 Python 程序员可以在没有太多 Web 开发知识的情况下创建 Web 应用。然而,也有其他类似的成功的产品,因此,竞争会很激烈。

 

例如,如果我需要为自己的数据科学项目创建一个 Web 应用,我就会直接使用 Streamlit。它的功能已经相对成熟。请注意,虽然都与 Web 开发有关,但 PyScript 和 Streamlit 属于不同的产品系。PyScript 应该更通用,因为它的目标是让你可以在任何网页上嵌入任何 Python 代码,Streamlit 做不到这一点。

 

在 PyScript 为更多的人所接受之前,它有几个问题必须解决。例如,Web 页面的加载速度非常慢。如果你尝试跟随本教程运行代码,可能就会注意到,在 Web 页面的显示会有一个明显的滞后。

 

尽管如此,我还是觉得这个产品会继续发展,我的信心主要来自于它的开发者——给我们带来极好的 Anaconda 工具的 Anaconda 团队。


本文最初发布于 Better Programming。


查看英文原文:Running Python Scripts on the Web Using PyScript

2022-05-20 17:0616278

评论 1 条评论

发布
用户头像
web就是香,各路神仙都有
2022-05-24 07:03
回复
没有更多了
发现更多内容

并发编程-FutureTask解析 | 京东物流技术团队

京东科技开发者

并发编程 源码剖析 FutureTask 企业号 7 月 PK 榜

暑假提升休闲两不误,与华为阅读一起开启高质量听书

最新动态

暑期读书指南 | 用缤纷字体读精品好书,华为阅读上新啦!

最新动态

Java Web应用开发案例|使用AJAX实现省市区三级联动效果

TiAmo

Java Java web 开发实例

用Rust生成Ant-Design Table Columns | 京东云技术团队

京东科技开发者

rust swagger 企业号 7 月 PK 榜 Columns

JAVA和JVM运行原理是什么?

java易二三

Java 编程 JVM 计算机 程序猿

HBase Compaction 原理与线上调优实践

vivo互联网技术

HBase 调优参数 Minor Compaction Compaction策略 Major Compaction

HTML5智慧景区三维可视化管理平台

2D3D前端可视化开发

智慧景区 智慧旅游 景区三维可视化 数字景区 智慧景区系统

资源成本降低70%!华为MetaERP资产核算的Serverless架构实践

华为云开发者联盟

云计算 后端 华为云 华为云开发者联盟 企业号 7 月 PK 榜

fastposter v2.16.0 让海报开发更简单

物有本末

图片处理 海报生成器 海报生成

NineData已支持「最受欢迎数据库」PostgreSQL

NineData

postgresql 客户端 数据源 NineData 集成AI

初探webAssembly | 京东物流技术团队

京东科技开发者

前端 webassembly JavaScrip Blazor WebAssembly 企业号 7 月 PK 榜

Java程序员常用的日志框架有哪些?

java易二三

Java 编程 程序员 计算机

Java一维数组是什么,怎么用?

java易二三

Java 编程 程序员 数组 计算机

英特尔合作埃森哲推出一套共计34个开源AI参考套件

E科讯

印刷行业MES系统解决方案

万界星空科技

开源 MES系统 印刷

长连接:ChatGPT流式响应背后的逻辑 | 京东物流技术团队

京东科技开发者

websocket 长连接 企业号 7 月 PK 榜 sse

大文件传输过程中的网络拥塞控制方法研究

镭速

大文件传输 网络拥塞问题

一文让你知道等保测评和渗透测试的区别与联系

行云管家

信息安全 渗透测试 等级保护 等保测评

Inpaint Anything:一键进行多种图像修补

华为云开发者联盟

人工智能 华为云 华为云开发者联盟 企业号 7 月 PK 榜

Qualcomm WiFi7 Routerboard,IPQ9574,4X4,4XM.2,SFP,Industrial High Power|DR9574

wallyslilly

ipq9574

澜舟科技CEO周明:不过度追求AGI,更看重大模型语言理解能力和应用落地性 | 1号位

澜舟孟子开源社区

数仓现网案例丨超大结果集接收异常

华为云开发者联盟

数据库 后端 华为云 华为云开发者联盟 企业号 7 月 PK 榜

在langchain中使用带简短知识内容的prompt template

程序那些事

人工智能 AI 程序那些事 AI大语言模型 大语言模型

【观察】智能运维的“下半场”,看云智慧如何“开新局”

云智慧AIOps社区

算法 运维 智能运维 大模型 IT运维

AREX:携程新一代自动化回归测试工具的设计与实现

AREX 中文社区

开源 测试工具 回归测试 流量回放

密集发布AI应用后,微软2023财报传递了什么信号|TE解读

TE智库

开发语音APP源码的小知识

山东布谷网络科技

app源码

再获权威认可!MIAOYUN荣获中国信通院一云多芯优秀案例,荣登《云管理产品与服务图谱》

MIAOYUN

中国信通院 一云多芯解决方案 一云多芯 可信云大会 云管理产品与服务图谱

Java基础 日期和时间

java易二三

程序员 计算机 java 编程

用友发布业界首个企业服务大模型YonGPT

用友BIP

PyScript:让 Python 脚本在 Web 中跑起来_大前端_Yong Cui_InfoQ精选文章