OUC 软件工程第04组 Alpha冲刺(3/3)

本博客系OUC软件工程第六次作业：Alpha冲刺 (3/3)
Alpha冲刺 (3/3)

一、过去完成了哪些任务

• 已经将初步完成图像降噪功能的网页部署到了服务器上：

  http://ouc.52lxy.one/

  降噪接口仅限校园网访问

• 模型训练

  CDBNet模型训练的任务

• 后端

  • 成功利用Django和DRF将训练好的模型加载进去并对外提供HTTP接口以供图像修复使用
  • 使用scikit-image代替opencv读入图片，可以直接从内存中读取图片而不用保存后再按照路径读取
  • 对结果图片按照时间戳重命名，防止多用户同时使用时因文件名结果图片相同而冲突
  • 简单地对接口的输入进行过滤，防止上传非图片或过大尺寸图片造成服务器内存爆炸
  • 编写了Dockerfile来生成容器并部署，快速部署

• 前端

  • 使用 axios 实现了网络请求，成功调用了后端的接口
  • 实现了图像的参数传递。
  • 实现了两种原图、降噪图对比展示的效果
  • 实现了裁剪、旋转、放大缩小图片的功能
  • 实现了保存降噪后图片、裁剪后图片到本地的功能

图例如下

• 支持用户上传降噪的图片

• 实现了两种不同的图片对比展示方式

• 实现了图片裁剪、放大缩小、旋转的功能

• 可以将降噪后的图片、编辑后的图片保存到本地
  

二、每个人的工作（遇到的困难和解决方法）

黄正举、梁汉林

模型训练中，遇到的困难和解决方法：

• 训练模型的数据量很大，训练时间比较长，为了使模型训练达到较好的效果，索性使用华为云的服务器完成工作
• 去噪方法使用了老师推荐的CBDNet，使用了高峰老师的代码，并进行了些许更改

刘召、吴桂宾

后端遇到问问题：

• 图片偏色

  由于改用scikit-image代替opencv，所以需要处理两个库之间的兼容问题，opencv默认读取格式是GRB，而skimage是按照RGB的格式读取，所以需要删掉原本代码中的三通道翻转部分

• 无法正确读取PNG格式

  众所周知，PNG格式图片有四个通道RGB和透明度，由于我们的结果是生成JPEG格式，所以直接舍弃透明度这个通道

• 内存占用非常容易飙升且不会轻易下降

  将一些模型加载时候就可以加载的PyTorch方法在Django启动的时候就加载进去，如model.eval()等。如此之外，将推理函数的with torch.no_grad()上下文管理器改为装饰器的形式加在函数上，理论性能比使用with来进行上下文管理更好一些，少占一点内存

陈李焘、姜景达

前端碰到的各种问题

1. 在实现两种图片应该怎么把图片作为数据，在前后端之间交互？

   从前端的角度看，前端需要实现是两个功能：如何把用户上传的图片传递给后端，和如何把后端返回的图片显示到页面上。

   • 对于第一个问题，我使用了 javascript 提供的一个数据类型，FormData，这是一个用来接收表单数据的数据类型，每一项都对应表单中的一栏信息。在接收了用户的图片后，我会本地新建一个FormDta对象（new FormData()），把图片使用 append() 放入formData中，将这个formData传给后端。这样就实现了把用户上传的图片传递给后端。
   • 对于第二个问题，后端的同学很给力，直接将处理后的图片上传到了服务器上，返回给前端的是一个图片的url，前端只需要将其动态绑定到<el-image> 标签上就可以。

2. 在实现两种图片对比展示效果的时候，都有一个需求，那就是实时地根据用户鼠标的位置，改变页面中某个元素的位置。（例如在放大镜效果中，根据用户鼠标的位置改变放大的位置；在滑动对比中，根据用户鼠标的位置动态改变区分竖线的位置）

   在实现这两种效果时，我都碰到了一个相同的问题：如果我将鼠标的捕获事件设置在图片上，即捕获鼠标在图片上的移动，那么最后的效果会非常鬼畜，随着鼠标的滑动，页面中的元素开始闪现，而不是时刻跟随着鼠标。

   经过分析，我发现，如果我将鼠标的追踪事件设置在最底层的图片上，那么当我的鼠标下方是非图片元素（方块或竖线），这都会导致鼠标的追踪事件失效，元素回到初始位置。

   我的解决方法是在展示区域放一个和原图相同宽高的、背景透明的盒子，并且将这个盒子置于最顶层，将鼠标的追踪事件设置在这个最顶层的盒子上，如此一来，便不会出现被元素遮住的问题了。

   

3. 如何把剪切后的图片保存到本地。

   之前在写小程序的时候，微信提供了很方便的接口：wx.saveFile() ，调用这个接口就可以把目标文件保存到手机。

   浏览器保存文件则稍微复杂一些，经过学习，我了解到将图片保存到本地有以下两种方式：

   1. 在页面中动态创建一个a标签，把它的url设置为图片的url，通过js模拟a标签点击事件，就可以把图片下载到本地，在下载结束后，动态删除a标签。
   2. 使用前端的 file-saver 库，其中有封装好的 saveAs() 函数，即可实现图片的保存。

   秉承着不能让别人的代码白写的原则（狗头），我果断选择了第二种方法。

   结果发现需要先把图片转化成blob（图片的一种二进制表示方法），将图片的url转化成blob类型的数据后，就可以保存到本地了。

   

4. 还有一个比较大的问题，是项目合作的时候可能会发生的一个典型问题。编程中可能会使用一些库，有些库对于Node的版本兼容做的不太好，这一点在前端尤为明显。

   我的Node是在2020年底安装的，版本号是13；队内另外一位成员的版本号是16。结果就是在我本机上跑的好好的代码，到了他的电脑上跑不起来，报各种版本不兼容的错。

   这个问题不太好解决，我们也正在努力解决这个问题。

代码签入、签出截图

三、燃尽图

四、例会的照片

五、剩下的任务

前端方面

• 美化主页部分的UI
• 限制用户上传的必须是图片，不能是图片以外的文件
• 在用户点击保存图片时，让用户自己选择保存路径。
• 实现多种去噪强度的功能（强去噪、中去噪、弱去噪）

后端方面

• 如果有可能的话，采用消息队列，如RabbitMQ或者RQ等，目前更倾向于使用RQ，有对应的Django-RQ库来简化开发。通过消息队列将整个图像修复过程拆分成了生产者和消费者，当用户请求接口的时候只是将这个请求加到队列中去并即时地返回该请求ID和请求状态而不用等待过长的时间。然后消费者部分再不断地从消息队列中根据内存和CPU性能拿取请求并处理，当处理完成后修改对应请求状态，然后前端就可以使用轮询的方式来获取图像修复结果
• 如果有钱的话，换一个大内存大GPU的机器来运行服务
• 接口入参增加降噪强度以及一些可选项，并增加图像锐化和超分功能以提供更优质的图像修复结果

模型训练

• 模型训练的任务大体已经完成，还有图像锐化的工作

六、总结与收获

小组的任务稳步进行，虽然遇到了一些困难，但是大家都在努力解决问题，合作得很是愉快，期待项目早日完工！