数字旗手

简介 在Streamlit中，与一个部件widget的交互会触发“重新运行”rerun，这样一来每次运行后代码中的变量都会被重新初始化。这可能会带来很麻烦的问题，比如实现一个简单的“累加计数按钮”，每次点击后都会清零，无法实现累加功能。 为了解决类似问题，Streamlit引入了一种新的特性：会话状态Session State，它是一种可以在rerun之间保存变量状态、配合使用回调函数处理部件上的事件、动态改变部件状态等等的功能（注意，这些功能发生在一个session中，一个session可以简单理解为用户通过浏览器的一个标签页来访问Streamlit）。其可以用在如下场景中： （1）数据或图

简介 Streamlit是一个开源Python库，其旨在为机器学习和数据科学领域简单快速地创建和分享美观的、定制化的web应用。使用Streamlit，用户仅仅几分钟即可创建和部署强大的数据应用。 截几张范例的界面图： 安装 使用pip安装： 1 pip install streamlit 测试一下： 1 streamlit hello 此时浏览器会打开http://localhost:8501/，然后出现streamlit关于动画、动态绘图、地图、pandas绘图的四个demo。 核心概念 运行方式 1 streamlit run your_script.

简介 前面讲了ImJoy主站的入口文件main.js，这一篇解析一下该主站的ImJoy组件，它也是整个app的“门面担当”，起到了统筹整个网站的作用。 为了便于分析，将很多高阶的暂时用不到的组件（比如工具栏、窗口管理、文件上传、连接后台Engine等）都删掉，留下最基本的能运行最小化imjoy插件的功能，截图如下： 这样便于分析整个组件的宏观结构和运行逻辑。 下面是对于该极小化组件的逐行代码分析。 template代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

简介 前面讲了ImJoy的core库和rpc库作为函数库如何被集成调用，而基于这两个核心库有一个能开箱即用的完整网站，即ImJoy主站，使用它就可以无需了解上面的技术细节，直接加载各种函数插件即可（但也因为这样，你无法更改网站样貌，如果没有定制开发的需求，则直接使用该网站即可）。 从该文章开始，将尝试对ImJoy主站进行详细分析，看官方是怎样应用ImJoy的core和rpc库的。 代码结构 ImJoy主站是用vue.js前端框架写的，整个目录结构由vue脚手架vue-cli 4生成，所以首先要分析清楚vue脚手架生成的代码结构是怎样的，可以参考这篇教程 截取其中的代码分析图： 理清楚代

简介 ImJoy设计的初衷就包括可以被集成使用。这意味着它可以根据需求以多种方式集成到一个项目中。 这里的“集成”有两个意思： （1）将ImJoy的核心core库集成在自己的网站或web应用中，从而可以调用ImJoy生态中的各种插件； （2）将ImJoy的运行时rpc库集成到自己的web应用中，从而将自己的web应用转换为ImJoy的一个插件，即被别人可调用和访问。 安装 集成ImJoy（无论是imjoy-core还是imjoy-rpc）主要有三种方式： （1）在页面上以 CDN 包的形式导入。 （2）下载 JavaScript 文件并自行托管。 （3）使用 npm 安装它。 下面详细说明。

上一篇着重介绍了如何使用JavaScript库来编写插件的前端UI和后端计算逻辑，这一节会介绍如何将计算后端切换为python语言，即计算逻辑完全使用python编写，充分利用python庞大的计算生态。 使用python开发计算插件有两种： （1）web-python：即python运行在浏览器中，其原理实际是应用了Pyodide这一工具，将python代码编译在浏览器中，但其缺点也很明显，首先是加载速度非常慢，因为第一次运行时需要将所用的python库都下载下来；然后其也无法应用整个python深度学习生态。 （2）native-python：该类型插件会链接一个本地的jupyter插件引

参考文献 Build web-based plugins for image analysis 简介 在本文中，将制作一个基于Web网页的用于图像分析的ImJoy交互式插件。 使用 HTML/CSS/JS 制作GUI插件 如下插件实现了一个上传并显示图像的功能，具体函数说明详见下面代码的注释： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

参考文献 ImJoy API 简介 ImJoy的每个插件都在自己的类似沙箱的容器环境中运行（如JavaScript插件的Web Worker 或iframe、Python插件的进程process）。这样可以避免其他插件的干扰并使ImJoy应用程序更加安全。 插件与ImJoy主程序或插件与插件之间的交互是通过一组API函数（ImJoy API）进行的。所有插件都可以访问到一个名为api的特殊对象。在Javascript中，api 是一个可以直接使用的全局对象。在Python中，可以通过调用 from imjoy import api 来导入它。有了这个对象，插件可以做很多事情，比如显示一个对话

参考文献 Developing Plugins for ImJoy 上一篇文章中介绍了插件的文件格式，这一篇介绍如何进行实际的插件开发。 指定依赖 对于一个插件，其往往不是单一的功能实现，往往需要其他软件库的配合。 插件的依赖在其文件的config 块的requirements字段中进行指定。 根据不同的插件类型，可以指定不一样的依赖。 Web Worker 和 Window 插件 对于这两类插件，可以通过一个JavaScript库的url数组来指定依赖。这些库会被importScripts方法导入。 例如，要指定最新的 plotly.js 库，可以这样写： 1 "requireme

参考文献 Developing Plugins for ImJoy 概览 ImJoy插件文件本质上是包括一系列自定义块的html文件（受.vue 格式启发）。 如下是一个插件文件的典型组成。需要注意的是，这些块的顺序无关紧要，因此可以将块打乱。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ** 该代码块以Json格式定义插件的属性** 《script lang="javascript"> ** 该代码块以JavaScript 或 Pyth