jupyter 集成到桌面应用中

记录下 jupyter 集成功能。

  1. 安装jupyter

需要使用到 python 中得安装工具 pip,

使用 pip 需要安装 ipython(比python好用,安装下)

这里还需要安装 phthon

1.1 先到python 官网下载 www.python.org/

下载之后双击安装,直接点下一步安装即可

安装之后配置下环境变量,Path,新建一个,指向安装的python安装路径即可

以上 python 安装完成,

打开 CMD ,接着安装 ipython

复制代码
pip install ipython

接下来就可以安装 jupyter 了,我这里使用的是 jupyter-lab

复制代码
pip install jupyterlab

安装完成之后,启动jupyter

复制代码
jupyter-lab

项目可以运行,页面可以看到显式 jupyterlab 内容

这里想要将 jupyter 通过 iframe 的方式嵌入到我们的项目中,发现并不可行。

1.找不到jupyter 的配置文件 jupyter_notebook_config.py

执行以下命令,配置文件就出来了

arduino 复制代码
jupyter-notebook --generate-config

可以修改如下配置,值就是我们默认打开文件的位置

ini 复制代码
## 默认打开文件路径
c.NotebookApp.notebook_dir = 'D:\论坛\wxedu'

打开配置文件,在最后面添加如下代码,解决 jupyter 不能通过 iframe 嵌入的问题

ini 复制代码
## 解决 iframe 嵌入 jupyter 页面报错问题
c.NotebookApp.tornado_settings = { 'headers': { 'Content-Security-Policy': "frame-ancestors 'self' *" } }

现在可以通过 iframe 方式嵌入 jupyter 了,但是发现需要输入 token。

在 jupyter 服务运行的时候,再打开终端 输入

复制代码
jupyter lab list

会得到如下图一样的内容

这里就得到了我们在网页端需要的 token 了,写在页面里面就可以了

打开项目,jupyter 已经通过 iframe 方式集成进来了

现在需要做一件事,就是在我们的应用中执行脚本命令 jupyter-lab 然后启动我们的 jupyter,再嵌入到我们的应用中,

首先需要 使用渲染进行于主进程的双向通信功能:具体官网: www.electronjs.org/zh/docs/lat...

我的项目中:

先封装了个node 双向通信的类方法,

这里需要返回一个方法,需要有返回值然后去执行

然后在主进程进行注册使用

然后在 preload 预加载文件中写方法,然后调用我们写的node 执行命令方法

然后在 render 中使用就可以了

上面没有直接在 preload 中直接使用 node 的 exec 方法,而是封装了一下,因为在 preload 中把node隔离了,用不了 node 所暴露出来的功能。

进入正题:我们做的是一个桌面应用,要把jupyter环境放到我们的应用中,不使用 用户自己电脑上的jupyter,把jupyter 文件放到我们的项目中。这里需要运维给你脚本,我们通过前端执行脚本命令,拿到jupyter执行之后启用jupyter的连接地址就可以了,记住是带有 token 的,和运维沟通好。

这里执行脚本带了两个参数,第一个参数是启动jupyter之后打开项目的地址,第二个参数是jupyter的配置文件地址。

上面一个方法是在js中通过通信方式获取文件的路径地址。(懂得都懂)

本地启用electron项目,然后通过iframe的方式显式我们的jupyter。

这里遇到一个问题就是显示不了 jupyter,如图我们可以看到连接地址我们已经拿到了,但是放在页面中无法显示。

这个时候就需要配置jupyter的配置文件,加上一条如下配置就可以了

ini 复制代码
c.ServerApp.tornado_settings = { 'headers': { 'Content-Security-Policy': "frame-ancestors * self notebooks.originqc.com.cn qcloud4test.originqc.com notebooks.originqc.com.cn"}}

本地jupyter确实让我调了很久,很崩溃,主要是不懂,可能后面再做类似的就好多了吧。

虽说问题没有很多个,但是在摸索过程中也是花了不少的时间,主要是沟通需要很多。再接再厉,后面解决类似的问题应该就有信心了。

等我们的应用上架之后,我会贴出来我们的项目地址,欢迎大家下载使用。

相关推荐
子兮曰3 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰3 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万3 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝3 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋3 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95273 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大3 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师3 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学3 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端