pyscript+py-env实现python+html效果

参考链接:https://developer.aliyun.com/article/976083?spm=a2c6h.12873581.group.dArticle976083.3a8057c73DINVs
今天我们要介绍的东西,叫做PyScript,使用它,不需要安装任何软件。只要有一个记事本,就能写一段HTML+Python的代码。写完以后,双击这个HTML文件,用浏览器打开,就能直接看到Python代码的运行结果。
假设我现在要写一段代码,使用高效的算法计算斐波那契数列前10项的值。现在我已经把代码写好了,想验证一下它是否正确:

def fib(n):if n in [1, 2]:return 1a = 1b = 1for _ in range(2, n):a, b = b, a + breturn b

我的电脑上没有Python,我也不知道任何在线的Python解释器。怎么办呢?这个时候,你只需要在这个Python代码的前后再添加一些HTML代码,把它保存成一个.html文件就可以了:

<html><head><link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /><script defer src="https://pyscript.net/alpha/pyscript.js"></script></head><body><py-script>
def fib(n):if n in [1, 2]:return 1a = 1b = 1for _ in range(2, n):a, b = b, a + breturn b
for i in range(1, 11):print(f'第{i}项的结果是:{fib(i)}')</py-script></body>
</html>

在这里插入图片描述

到目前为止,似乎跟那些在线的Python运行环境没什么区别。但PyScript更厉害的是,它自带了一些常见的第三方库,例如numpy或者Matplot,甚至它还可以手动安装第三方库。
对于它自带的numpy和matplotlib,可以直接使用标签声明:

<html><head><link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /><script defer src="https://pyscript.net/alpha/pyscript.js"></script><py-env>- numpy- matplotlib</py-env></head><body><h1>Let's plot random numbers</h1><div id="plot"></div><py-script output="plot">
import matplotlib.pyplot as plt
import numpy as np
x = np.random.randn(1000)
y = np.random.randn(1000)
fig, ax = plt.subplots()
ax.scatter(x, y)
fig</py-script></body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/478146.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

美团的DBProxy实践

本文整理自美团技术沙龙第10期&#xff1a;数据库技术架构与实践。 美团技术沙龙由美团技术团队主办&#xff0c;每月一期&#xff0c;每期沙龙邀请美团及其它互联网公司的技术专家分享来自一线的实践经验&#xff0c;覆盖各主要技术领域。 本次沙龙主要围绕数据库相关的主题&a…

LeetCode 606. 根据二叉树创建字符串(递归)

文章目录1. 题目2. 递归解题1. 题目 你需要采用前序遍历的方式&#xff0c;将一个二叉树转换成一个由括号和整数组成的字符串。 空节点则用一对空括号 “()” 表示。而且你需要省略所有不影响字符串与原始二叉树之间的一对一映射关系的空括号对。 示例 1: 输入: 二叉树: [1,…

论文浅尝 | 面向开放域的无监督实体对齐

笔记整理 | 谭亦鸣&#xff0c;东南大学博士生来源&#xff1a;DASFAA’21链接&#xff1a;https://arxiv.org/pdf/2101.10535.pdf概述与动机知识图谱对齐的目的是建立两个不同知识图谱之间实体的对应关系&#xff0c;如图1&#xff0c;本文作者发现现有的实体对齐方法依赖于标…

聊聊推荐系统

这两天&#xff0c;有种把某宝卸载的冲动&#xff0c;它的“猜你喜欢”推荐简直是我肚子里的蛔虫&#xff0c;每次看都忍不住剁手&#xff0c;钱包就这么日渐消瘦……但从技术的角度想想&#xff0c;不得不说阿里的推荐系统的确做得不错。其实&#xff0c;除了电商平台&#xf…

LeetCode 695. 岛屿的最大面积(图的BFS/DFS)

文章目录1. 题目2. 解题2.1 BFS广度优先搜索2.2 DFS深度优先搜索1. 题目 给定一个包含了一些 0 和 1的非空二维数组 grid , 一个 岛屿 是由四个方向 (水平或垂直) 的 1 (代表土地) 构成的组合。你可以假设二维矩阵的四个边缘都被水包围着。 找到给定的二维数组中最大的岛屿面…

Neo4j:入门基础(一)之安装与使用

原文链接&#xff1a;https://blog.csdn.net/sinat_36226553/article/details/108541370 # 图数据库 链接&#xff1a;什么是原生(Native)图数据库 一般认为具有“无索引邻接”特性的图数据库才称为原生图数据库 链接&#xff1a;常用的图数据库 图存储可以分为属性图、三元组…

论文浅尝 | 问题多样性对于问答的帮助

笔记整理 | 毕胜 东南大学在读博士&#xff0c;研究方向&#xff1a;自然语言处理 知识图谱问题生成通过生成一些合成的问题作为训练语料有效提高了问答系统的效果&#xff0c;本文的研究点是&#xff1a;在QG中&#xff0c;生成问题的文本多样性是否对下游的QA有帮助&#xf…

RDS平台介绍

本文整理自美团点评技术沙龙第10期&#xff1a;数据库技术架构与实践。 美团点评技术沙龙由美团点评技术团队主办&#xff0c;每期沙龙邀请美团点评及其它互联网公司的技术专家分享来自一线的实践经验&#xff0c;覆盖各主要技术领域。 本次沙龙主要围绕数据库相关的主题&#…

你已经是一个成熟的地图了,该学会帮我...

文 | 小戏当我们打开百度地图&#xff0c;选定到达目的地&#xff0c;导航软件里的小姐姐马上就用不紧不慢的语调告诉我们“准备出发&#xff0c;全程12公里&#xff0c;预计需要30分钟……”但一看手表上显示的不风驰电掣铁定迟到的时间&#xff0c;肯定不允许我们和导航软件里…

LeetCode 427. 建立四叉树(递归)

1. 题目 我们想要使用一棵四叉树来储存一个 N x N 的布尔值网络。网络中每一格的值只会是真或假。树的根结点代表整个网络。对于每个结点, 它将被分等成四个孩子结点直到这个区域内的值都是相同的. 每个结点还有另外两个布尔变量: isLeaf 和 val。isLeaf 当这个节点是一个叶子…

基于 KIF 的 iOS UI 自动化测试和持续集成

客户端 UI 自动化测试是大多数测试团队的研究重点&#xff0c;本文介绍猫眼测试团队在猫眼 iOS 客户端实践的基于 KIF 的 UI 自动化测试和持续集成过程。 一、测试框架的选择 iOS UI 自动化测试框架有不少&#xff0c;其中 UI Automation 是 Apple 早期提供的 UI 自动化测试解决…

论文浅尝 | 利用冻结语言模型的多模态少样本学习

笔记整理 | 李磊&#xff0c;浙江大学硕士&#xff0c;研究方向为自然语言处理链接&#xff1a;https://arxiv.org/abs/2106.13884动机大规模的自回归语言模型&#xff08;如GPT&#xff09;在预训练阶段学习到了大量的知识&#xff0c;具有很好的学习新任务的能力&#xff0c…

ACL’21 | 对话系统也要进军多模态了!

文 | 胡煌&#xff0c;梁祖杰编 | 小轶对于一个对话Bot来讲&#xff0c;拥有对视觉信息的感知和联想能力是非常重要的。比如&#xff0c;我们人类在对话中谈到大海的时候&#xff0c;就会自然地联想到蓝天、白云和飞翔的海鸟。然而&#xff0c;当前的对话模型&#xff0c;如 Me…

x86系统与arm64系统不兼容的linux服务器问题

一键离线安装命令&#xff1a; pip install --no-index --find-links/home/digital_package -r requirements.txt --ignore-installed 1 cython 2 gensim&#xff1a;

LeetCode 541. 反转字符串 II

1. 题目 给定一个字符串和一个整数 k&#xff0c;你需要对从字符串开头算起的每个 2k 个字符的前k个字符进行反转。如果剩余少于 k 个字符&#xff0c;则将剩余的所有全部反转。如果有小于 2k 但大于或等于 k 个字符&#xff0c;则反转前 k 个字符&#xff0c;并将剩余的字符保…

HDFS NameNode内存全景

一、概述 从整个HDFS系统架构上看&#xff0c;NameNode是其中最重要、最复杂也是最容易出现问题的地方&#xff0c;而且一旦NameNode出现故障&#xff0c;整个Hadoop集群就将处于不可服务的状态&#xff0c;同时随着数据规模和集群规模地持续增长&#xff0c;很多小量级时被隐藏…

OpenKG开源系列|首个多模态开放知识图谱OpenRichpedia (东南大学)

OpenKG地址&#xff1a;http://openkg.cn/dataset/richpeidaGitHub地址&#xff1a;https://github.com/OpenKG-ORG/OpenRichpediaGitee地址&#xff1a;https://gitee.com/openkg/richpedia官网地址&#xff1a;http://richpedia.cn&#xff08;提供Dump&#xff09;开放许可协…

电商业务中的五大机器学习问题!

机器学习正在从曾经的“科幻”&#xff0c;走向大众生活&#xff0c;比如&#xff1a;高铁站的人脸识别系统、小区门口的无人化测量体温&#xff0c;还有这些年很火的自动驾驶&#xff0c;再到电商的精准推荐系统...等等&#xff0c;背后都是机器学习。今天就以电商业务场景为例…

LeetCode 404. 左叶子之和(递归)

1. 题目 计算给定二叉树的所有左叶子之和。 示例&#xff1a;3/ \9 20/ \15 7在这个二叉树中&#xff0c;有两个左叶子&#xff0c;分别是 9 和 15&#xff0c;所以返回 24来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode-cn.co…

论文浅尝 | 将结构预测作为增广自然语言间的翻译任务

笔记整理 | 叶宏彬&#xff0c;浙江大学计算机博士生论文地址&#xff1a;https://openreview.net/pdf?idUS-TP-xnXI摘要&#xff1a;我们提出了一个新的框架&#xff0c;即增强自然语言之间的翻译&#xff08;Translation-between-Augmented Natural Languages&#xff0c;TA…