Jupyter Notebook應(yīng)該很多同學(xué)都或多或少有所了解，但是，很多同學(xué) 還停留在Python、數(shù)據(jù)分析、交互式開發(fā)。

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

例如，Python工具包開發(fā)、創(chuàng)建幻燈片、創(chuàng)建電子書、寫博客、寫報告、數(shù)據(jù)看板、REST API、網(wǎng)頁應(yīng)用等。

以網(wǎng)頁應(yīng)用為例，提起開發(fā)一個網(wǎng)頁應(yīng)用，很多同學(xué)第一印象都會想到需要前端、后端、服務(wù)部署等繁瑣的步驟，需要具備html、JavaScript、Java或者Python、Django知識。

其實，通過Jupyter Notebook就可以開發(fā)一款可部署的網(wǎng)頁應(yīng)用。

下面，就以一個圖像處理的網(wǎng)頁應(yīng)用為例給大家演示一下。

準(zhǔn)備工作

在正式的開發(fā)之前，先把開發(fā)環(huán)境配置、Python工具包這些基本的準(zhǔn)備工作做一下。

環(huán)境配置

創(chuàng)建一個虛擬環(huán)境，單獨的用于這個網(wǎng)頁應(yīng)用，虛擬環(huán)境的好處就可以實現(xiàn)不同應(yīng)用之間的環(huán)境隔離，避免不同項目/應(yīng)用依賴不同版本的工具包導(dǎo)致沖突。

virtualenv sketchenv
source sketchenv/bin/activate

這里的sketchenv是虛擬環(huán)境 的名稱，你也可以起其他名稱。

安裝工具包

下面，就是按照開發(fā)網(wǎng)頁應(yīng)用需要的一些工具包：

mljar-mercury
opencv-python-headless
pillow
matplotlib

其中，mercury是一款能夠?qū)upyter notebook轉(zhuǎn)換成網(wǎng)頁 應(yīng)用的框架，其余的幾款都是用于圖像處理的工具包。

正式開始

下面，就正式開始開發(fā)工具。

首先，打開一個Jupyter Notebook的窗口：

jupyter notebook

然后，導(dǎo)入一些需要用到的Python工具包并對圖像進行一下初始設(shè)置：

import os
import cv2
from PIL import Image
from matplotlib import pyplot as plt
import matplotlib as mpl
mpl.rcParams['figure.figsize'] = (12,12)
mpl.rcParams['axes.grid'] = False

在Jupyter Notebook打開一個新的單元格，輸出以下代碼，謹(jǐn)記，需要新打開一個，不能和其他單元格的代碼放在一起：

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

image_path是一個要處理圖像的路徑，output_dir是目錄名，用于保存處理好的新圖像。

在下一個單元中，將定義一個顯示圖像的函數(shù)：

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)

你會看到下圖：

現(xiàn)在開始對圖像進行處理，生成藝術(shù)素描圖像：

# 圖像轉(zhuǎn)化
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)

經(jīng)過處理之后，你會看到如下圖像：

到這里，核心的代碼都已經(jīng)完成了，已經(jīng)有了Jupyter Notebook代碼，那么，該怎么編程網(wǎng)頁應(yīng)用呢？

這就用到前面安裝的工具包mercury，前面 已經(jīng)介紹，它可以將Jupyter Notebook轉(zhuǎn)化成網(wǎng)頁應(yīng)用。

首先，執(zhí)行如下命令：

mercury watch sketch_app.ipynb

在瀏覽器中打開http://127.0.0.1:8000/鏈接，會看到一個卡片，如下所示：

請點擊卡片，你會看到它的警告信息，告訴你缺少YAML頭。

這就涉及到mercury中的一個比較重要的東西，配置信息，它是一種yaml格式的配置信息 ，主要包含標(biāo)題、配置參數(shù)等內(nèi)容。

下面，就在Jupyter Notebook開頭創(chuàng)建一個RAW格式的單元，輸入相關(guān)的yaml配置信息：

---
title: Convert Photo to Sketch ???
description: Create sketch from uploaded a photo
show-code: False
params:
   image_path:
       input: file
       label: Please upload a photo
   output_dir:
       output: dir
---

YAML配置包含如下信息：

• title：應(yīng)用程序的標(biāo)題
• description：描述應(yīng)用程序的文本
• show-code：是否顯示或隱藏Notebook代碼
• params：Jupyter Notebook代碼用到的參數(shù)以及相關(guān)組件，這里面用到2個組件：
• image_path：文件小組件，變量image_path將被替換成上傳文件的路徑
• output_dir：目錄小組件，對應(yīng)代碼中輸出目錄的變量

然后，再打開http://127.0.0.1:8000/，就可以看到，這個網(wǎng)頁應(yīng)用就可以用了，可以選擇圖片、上傳圖片并處理圖片。

如果你想持久化部署，可以通過docker等工具進行打包部署到服務(wù)器或者云上，然后隨時就都可以用了。

這里只是一個圖像處理工具的例子，除此之外，我們還可以通過調(diào)用api實現(xiàn)翻譯工具、數(shù)據(jù)看板、pdf編輯等工具，都變得非常簡單。