Jupyter Notebook，太强大了！

作者：Jackpop

2022 年 6 月 15 日
本文字数：2060 字
阅读完需：约 7 分钟

Jupyter Notebook 应该很多同学都或多或少有所了解，但是，很多同学还停留在 Python、数据分析、交互式开发。

其实，除了这些之外，Jupyter Notebook 还可以完成很多你意想不到的事情。

例如，Python 工具包开发、创建幻灯片、创建电子书、写博客、写报告、数据看板、REST API、网页应用等。

以网页应用为例，提起开发一个网页应用，很多同学第一印象都会想到需要前端、后端、服务部署等繁琐的步骤，需要具备 html、JavaScript、Java 或者 Python、Django 知识。

其实，通过 Jupyter Notebook 就可以开发一款可部署的网页应用。

下面，就以一个图像处理的网页应用为例给大家演示一下。

准备工作

在正式的开发之前，先把开发环境配置、Python 工具包这些基本的准备工作做一下。

环境配置

创建一个虚拟环境，单独的用于这个网页应用，虚拟环境的好处就可以实现不同应用之间的环境隔离，避免不同项目/应用依赖不同版本的工具包导致冲突。

virtualenv sketchenvsource sketchenv/bin/activate

复制代码

这里的 sketchenv 是虚拟环境的名称，你也可以起其他名称。

安装工具包

下面，就是按照开发网页应用需要的一些工具包：

mljar-mercuryopencv-python-headlesspillowmatplotlib

复制代码

其中，mercury 是一款能够将 jupyter notebook 转换成网页应用的框架，其余的几款都是用于图像处理的工具包。

正式开始

下面，就正式开始开发工具。

首先，打开一个 Jupyter Notebook 的窗口：

jupyter notebook

复制代码

然后，导入一些需要用到的 Python 工具包并对图像进行一下初始设置：

import osimport cv2from PIL import Imagefrom matplotlib import pyplot as pltimport matplotlib as mplmpl.rcParams['figure.figsize'] = (12,12)mpl.rcParams['axes.grid'] = False

复制代码

在 Jupyter Notebook 打开一个新的单元格，输出以下代码，谨记，需要新打开一个，不能和其他单元格的代码放在一起：

image_path = "/home/jackpop/Downloads/house.jpg"output_dir = "output_images"

复制代码

image_path 是一个要处理图像的路径，output_dir 是目录名，用于保存处理好的新图像。

在下一个单元中，将定义一个显示图像的函数：

def imshow(image, title=None, fname=None):    if len(image.shape) > 3:        image = tf.squeeze(image, axis=0)    plt.imshow(image)    plt.axis('off')    if title:        plt.title(title)    if fname:        plt.savefig(fname)

复制代码

然后，载入图像并显示：

img = cv2.imread(image_path)RGB_img = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)imshow(RGB_img)

复制代码

你会看到下图：

现在开始对图像进行处理，生成艺术素描图像：

# 图像转化grayed = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)inverted = cv2.bitwise_not(grayed)blurred = cv2.GaussianBlur(inverted, (19, 19), sigmaX=0, sigmaY=0)def blend(x, y):    return cv2.divide(x, 255 - y, scale=256)final_result = blend(grayed, blurred)# 保存图像_ = cv2.imwrite(os.path.join(output_dir, "sketch_photo.jpg"), final_result)# 显示图像RGB_img = cv2.cvtColor(final_result, cv2.COLOR_BGR2RGB)imshow(RGB_img)

复制代码

经过处理之后，你会看到如下图像：

到这里，核心的代码都已经完成了，已经有了 Jupyter Notebook 代码，那么，该怎么编程网页应用呢？

这就用到前面安装的工具包 mercury，前面已经介绍，它可以将 Jupyter Notebook 转化成网页应用。

首先，执行如下命令：

mercury watch sketch_app.ipynb

复制代码

在浏览器中打开http://127.0.0.1:8000/链接，会看到一个卡片，如下所示：

请点击卡片，你会看到它的警告信息，告诉你缺少 YAML 头。

这就涉及到 mercury 中的一个比较重要的东西，配置信息，它是一种 yaml 格式的配置信息，主要包含标题、配置参数等内容。

下面，就在 Jupyter Notebook 开头创建一个 RAW 格式的单元，输入相关的 yaml 配置信息：

---title: Convert Photo to Sketch 🖌️description: Create sketch from uploaded a photoshow-code: Falseparams:    image_path:        input: file        label: Please upload a photo    output_dir:        output: dir---

复制代码

YAML 配置包含如下信息：