病理学数字化切片检索和可视化系统设计与实现

方嘉琨 张建运

(北京大学口腔医院 北京 100081)

1 引言

随着信息化的发展，病理学数字化切片逐步被用于医疗、教学和科研相关工作[1-4]。目前医院病理科的数字化切片管理和教学辅助系统多使用需要安装指定客户端的客户机/服务器(Client/Server，C/S)[2-3]或浏览器/服务器(Browser/Senver，B/S)结构的商业软件[4]，其缺点是整体成本较高，系统扩展、维护和升级的工作量较大[5]。本文介绍使用基于开源技术和B/S结构的跨设备、跨平台数字化切片检索和可视化系统设计与实现，加强病理学数字化切片的推广和应用。

2 系统整体架构

2.1 数据流程

B/S结构无需安装任何客户端或插件，采用标准浏览器接入网络即可使用，系统扩展维护简单，降低综合成本。一般用户或管理员通过浏览器查看系统界面并输入信息，系统对数据进行收集和处理，将加工后的数据输出展示给用户。数据处理过程可通过数据流图(Data Flow Diagram)展现[6]，见图1。图中省略输出结果展示给实体用户的过程。采用基于角色的访问控制方法，分为管理员、一般用户和匿名用户。匿名用户功能模块包含4项，分别是切片检索、切片可视化和图像操作、用户注册、用户登录。匿名用户可通过切片检索请求及可视化和图像操作请求获取数字切片信息数据，如切片名称、位置、标签等；通过注册请求将用户信息如用户名、密码和e-mail地址写入数据库；通过登录请求将用户信息与数据库信息进行匹配。匿名用户在登录后可使用一般用户功能模块，该模块包含2项，用户可通过切片收藏和标注请求与数据库进行收藏或标注信息数据交换。管理员功能模块包含1项，通过切片管理请求与数据库交换切片信息。

图1 系统数据流

2.2 功能

包括数字化切片的信息管理、标签分类、名称检索、可视化和图像操作以及用户信息管理。管理员可以对数字化切片进行信息管理，包括新增、修改和删除切片名称、位置和标签信息，维护切片标签分类信息。切片标签分类可通过查询具有同一标签的相关切片合集，展示同一类的切片列表。名称检索通过匹配切片名称，以字符匹配的方法查找切片，以列表形式展示，用户可快速搜索并查看所需数字化切片。可视化和图像操作通过实现图像的移动、缩放、全屏显示、角度旋转、画笔模式和图像下载功能完成数字化切片展示。一般用户可通过切片收藏和个性化标注等功能完成个性化管理。用户信息管理包括注册、登录、查看收藏列表和标注信息等功能。

2.3 数据库

数据库设计基于系统需求，包含数字化切片、标签、用户、数字化切片收藏和数字化切片用户标注信息，具体内容，见表1-表5。

表1 数字化切片信息

表2 标签信息

表3 用户信息

表4 数字化切片收藏信息

表5 数字化切片用户标注信息

3 关键技术

3.1 系统架构

利用B/S结构模式，采取浏览器请求、服务器响应的工作模式，通过网络技术进行数字化切片的可视化。该模式无需安装专用客户端，不受系统和平台限制。随着移动互联网的快速发展、智能手机和平板电脑等移动终端设备的普及和应用，人们可以通过浏览器快速访问应用。系统通过Ajax交互式网页应用开发技术实现异步更新，完成局部页面重载，减轻服务器的负担。Ajax技术在本系统中应用于数字化切片的可视化、切片收藏、标注和信息管理等功能。

3.2 Web框架

系统采用Bootstrap13.37版本作为Web前端开发框架。Bootstrap是基于超文本标记语言(Hypertext Markup Language，HTML)、串接式表单(Cascading Style Sheets，CSS)和JavaScript开发的前端开发框架，提供快捷开发方式。具有移动设备优先的特性，响应式CSS能够自适应于台式计算机、平板电脑和手机，所有主流浏览器均支持Bootstrap。系统后端开发使用Python语言，具有简洁、易读和可扩展性特点，广泛用于Web系统编程。采用Flask2框架实现Web应用，它是Python中一个“微框架”，核心轻量且易于拓展，支持扩展添加数据库集成、表单验证、上传处理等功能[7]。

3.3 可视化和图像操作

系统使用Openslide[8]的Python版本软件包，采用深度缩放技术完成数字化切片的可视化，提供交互式的高分辨率图像浏览方式，通过建立多分辨率的图片和动画效果完成图像加载和移动。Openslide支持10多种常用数字化切片格式，包括Aperio、Hamamatsu、Leica等。采用OpenSeadragon3软件包提供网页浏览方法，高分辨率图像经过切割处理，根据用户缩放的尺寸，按需加载图像，减轻网络负担，实现快速浏览数字化切片功能。

4 系统设计与实现

4.1 界面设计

采用导航设计，利用列表实现导航方法。页面使用水平导航栏，包含数字化切片搜索功能，链接用户登录、主页、联系方式和帮助页面。切片以HTML的标签元素呈现，数字化切片以列表形式展示。数字化切片可视化和图像操作界面，除置于顶端的页面导航栏外，使用纵向导航栏呈现切片和关联图像列表。主界面包含视图列表、视图、用户标注信息(需登录)和数字化切片属性列表，由上至下依次呈现。视图模块中展示切片图像及其操作方法，任意角度旋转、旋转角度重置、画笔模式、图像下载和切片收藏功能以文本框和按钮形式呈现在图像上方。图像缩放、恢复原始尺寸、全屏显示、90°旋转、导航图和画笔功能按钮呈现在图像上方。页面导航栏可通过按钮进行呈现和隐藏，系统界面可自适应不同设备。

4.2 功能实现

4.2.1 用户 注册信息提交服务器验证，正确信息将写入数据库的用户信息表，密码使用MD5加密算法保存。若用户名不唯一则提示错误并返回重填。用户登录时匹配其用户名和密码，若完全匹配则登录成功。若用户不存在或用户名、密码错误则提示错误信息并返回重填。登录后可进行用户信息修改，如密码和e-mail地址，但不允许修改用户名。用户可查看收藏的数字化切片列表和标注信息，允许编辑、修改或删除。使用管理员账号登录后可对数字化切片信息进行管理，如新增、修改和删除切片，管理内容包括切片名称、位置和标签，数据写入数字化切片信息表。当切片的标签数据变更时，后台将查询数字化切片信息表中所有标签信息并变更标签信息表。若删除一个数字化切片的标签后数字化切片信息表中没有其他具有该标签的切片，则在标签信息表中删除该标签；若新增一个数字化切片的标签后在标签信息表中无该标签，则在表中新增标签。

4.2.2 可视化和图像操作 数字化切片的可视化和图像操作是系统核心。系统实现查看数字化切片及其关联图像的基本功能，具有移动、缩放、全屏显示、恢复原始尺寸、旋转、画笔模式、图像下载、切片收藏和个性化标注等编辑功能。用户可拖拽图像或点击导航图移动图像，通过缩放按钮或鼠标滑轮缩放图像，利用按钮或快捷键实现图像全屏显示或恢复原始尺寸，输入旋转角度或点击90°旋转按钮实现图像旋转。可点击按钮开启画笔模式，该模式下可在图像上用画笔标注，图像缩放时画笔标注与图像同比例缩放，图像移动时画笔标注不受影响。可点击图像下载按钮，当前浏览的切片图像可以PNG格式下载到本地保存。登录的用户可点击收藏切片按钮，将当前浏览的切片加入收藏列表，在用户界面进行查看；可输入文字标注信息，实现个性化切片标注。

4.2.3 标签分类和名称检索 系统提供按标签分类进行检索的组织方式，用户可在数字化切片列表中通过点击标签查看该分类下的切片列表，快速查找同一类的关联切片。标签分类由管理员在数字化切片管理界面中进行维护。系统提供按切片名称进行精确检索的方式，用户可在搜索框中输入感兴趣的切片名称搜索数字化切片，搜索信息将与数字化切片信息表中的切片名称进行匹配，若名称中包含搜索信息，则显示在搜索结果中。

4.3 应用效果

该系统能够实现数字化切片的检索和可视化，允许用户对切片图像进行多种操作，满足远程医疗、医疗教学等场景的基本需求。此外系统能够为注册用户提供个性化服务，允许用户设置收藏列表从而快速查找重要的切片图像，用户能够输入切片标注从而加深对切片图像的理解。B/S结构模式有助于信息及时共享，且该系统支持移动端使用，应用方式更加灵活，进一步提高使用效率。

5 结语

本文从整体架构、关键技术和实现情况对病理学数字化切片检索和可视化系统设计与实现进行介绍，为实现个性化的数字化切片检索和可视化系统提供思路，助力病理学数字化切片的使用，为数字化切片图像分析奠定基础[9]。