voila：jupyter notebook简单制作视频播放和深度学习测试的显示界面

导语：
voila可以使jupyter notebook转换为交互式的仪表板。网上有一些例子（将Jupyter Notebook变成Web APP：Voila）可以了解到voila的一些功能。还有关于jupyter的使用技巧（如何优雅地使用 Jupyter？）
本文主要内容是制作一个简单的网页界面，其中的功能有：1. 选择不同的视频并且可以播放，2.运行深度学习模型的测试代码，3.补充

1. jupyter notebook播放视频

import ipywidgets as widgets
from ipywidgets import interact
from IPython.display import display
from pathlib import Path
import cv2
#本文没有使用opencv自带的imshow函数，而是利用网页显示，需要转换成bytes
def show_video(video_path):
    cap = cv2.VideoCapture(video_path)
    while True:
        _,frame = cap.read()
        if(frame is None):
            break          
        imgbox = cv2.imencode('.jpg',frame)[1].tobytes()#tobytes会有一定的耗时（5ms左右）
        yield imgbox,frame

cached_videos_path=Path('/home/hyx/Documents/mutil_thread/cached_video')
glob_pattern = "*.*"  #这个可以指定抓取到的文件后缀，*.*指文件名中带.就可以，*.MP4 指文件后缀为mp4

dropdown = widgets.Dropdown(options=[p.name for p in cached_videos_path.glob(glob_pattern)],
                            description='视频名称:')
#视频=窗口设置
image = widgets.Image(format='jpg',height=540,width=840)
#选择按钮
def update_dropdown(diff):
    p = cached_videos_path/dropdown.value
    print(p)
    for byte in show_video(str(p)):
    #for byte in show_video(0): #需要显示摄像头，改成0就好了
        image.value = byte[0]
    
dropdown.observe(update_dropdown, 'value')
dropdown
#视频显示
widget1 = widgets.Output()
display(image)

然后命令行输入 voila Untitled.ipynb 就可以在网页中打开界面

因为用的摄像头，代码for byte in show_video(0):所以在下拉框随便选择一个文件名，都会显示摄像头的画面。

2.添加深度学习模型

这个部分就看个人需求，我简单说一下我的模型如何加上去的就好了，就不贴代码了。
如果是对每一帧做目标检测，就对show_video(video_path)函数的第二个返回值进行测试。show_video(video_path)函数返回的第一个值是用来显示的，第二个值才是我们的模型函数接口需要的numpy.array格式的图像帧。将你的测试函数接口改好，放入一帧图像，然后返回一个图像结果或者一个文字结果。然后把这个函数放在上面代码的for byte in show_video(str(p)):中就可以了
还有一个问题，可能需要显示两个视频窗口，一个原视频，一个加上模型结果的视频。我是通过zip实现的。show_video(video_path)函数是yield一帧一帧的返回值，那我可以用zip让show_video(video_path)和process(video_path)同时运行。以下是我的代码。process的接口和返回值都和show_video函数差不多，只是中间的处理不一样。

视频显示代码

3.补充

模型文字结果输出，可以用widgets.Text()来显示。

设置文本框

text_summary = widgets.Text()
text_summary.layout.width = "750px"

text_summary.value = f" {sum(a)}"  

文本框显示

widget1 = widgets.Output()
widget2 = widgets.Output()
with widget1:
    display(text_temp)
with widget2:
    display(text_summary)
hbox = widgets.HBox([widget1, widget2])
hbox