[Feature] 前端实现场景分类功能 & [Style] 规范代码风格 (#21)

* 9.24更新 (#5)

* 新增场景分类功能

* 1.修复绘制目标框不准确的bug
2.修复图像偏色问题
3.将目标框颜色改为更显眼的紫色

* 修改滑窗步长，加快推理速度

* 1.修改场景分类读取图像的接口，改用paddelrs中的decode_image
2.修改地物分类结果图像的颜色显示
3.去除地物分类任务中的冗余代码

* 删除地物分类中冗余代码

* 1.修改错误函数名（批量处理）
2.删除渲染函数中冗余代码
3.改用cv2统一对图像进行操作处理，去除skimage的引用

* 场景分类功能的前端实现

1.  前端实现场景分类功能
2.  移除不必要的依赖，使得CI可以在Node.js 16.x下通过

* 绘制图片时colormap自动生成，便于适配用户自定义模型

* 绘制图片时colormap自动生成，便于适配用户自定义模型

* 修改可能产生误导的注释

Co-authored-by: Terayco <78073130+terayco@users.noreply.github.com>
Co-authored-by: yibaikuai <90198481+yibaikuai@users.noreply.github.com>

backend/applications/image_processing/render.py

@@ -1,12 +1,8 @@
-# 推理结果展示
-# 重复运行本单元可以查看不同结果
-
 import os.path as osp
 
 import cv2
 from PIL import Image
 from matplotlib import pyplot as plt
-from skimage.io import imread
 
 from applications.common.path_global import md5_name, generate_url
 
@@ -22,45 +18,39 @@ def show_images_in_row(
  map = plt.cm.ocean # 森林
  if colormap == 3:
  map = plt.cm.rainbow # 霓虹
- # fig.suptitle(title)
  axs = fig.subplots(nrows=1, ncols=1)
  axs.spines['top'].set_visible(False)
  axs.spines['right'].set_visible(False)
  axs.spines['bottom'].set_visible(False)
  axs.spines['left'].set_visible(False)
  axs.get_xaxis().set_ticks([])
  axs.get_yaxis().set_ticks([])
-
- im = imread(im_paths)
- if im.ndim == 3:
- im = cv2.cvtColor(im, cv2.COLOR_BGR2GRAY)
+ im = cv2.imread(im_paths)
+ im = cv2.cvtColor(im, cv2.COLOR_BGR2GRAY)
  axs.imshow(im, cmap=map)
 
 
 def render(name, data_dir, save_dir,
  colormap): # 实现渲染的函数，考虑到我们的需要一次只能渲染一张，pic_source一样为图片位置
  # 参考 https://stackoverflow.com/a/68209152
  fig = plt.figure(constrained_layout=True)
- # fig.suptitle("") 设置标题用的，我们不用设置标题，因为下面已经设置了
  subfigs = fig.subfigures(nrows=1, ncols=1)
  # 读入变化图
  pic_source = osp.join(data_dir, name)
  show_images_in_row(
- pic_source, subfigs, title='Change Map',
- colormap=colormap) # title为changemap，换成中文会乱码，勿换
+ pic_source, subfigs, title='Change Map', colormap=colormap)
 
  # 渲染结果
  fig.canvas.draw()
  Image.frombytes('RGB',
  fig.canvas.get_width_height(), fig.canvas.tostring_rgb())
- # plt.show()
  new_name = md5_name(str(colormap) + "_" + name)
  plt.savefig(osp.join(save_dir, new_name), bbox_inches='tight')
  return new_name
 
 
 # 批量渲染
-def bitch_render(data_dir, save_dir, imgs):
+def batch_render(data_dir, save_dir, imgs):
  temps = list()
  for img in imgs:
  maps = dict()

backend/applications/interface/analysis.py

@@ -10,7 +10,7 @@
 from applications.image_processing.gaussian_blur import gaussian_blur
 from applications.image_processing.hole import hole_fill
 from applications.image_processing.median_blur import median_blur
-from applications.image_processing.render import bitch_render
+from applications.image_processing.render import batch_render
 from applications.image_processing.render_seg import bitch_render_seg
 from applications.image_processing.resize import resize
 from applications.image_processing.sharpen import sharpen
@@ -272,7 +272,7 @@ def handle(fun_type, imgs, src_dir, save_dir):
  elif fun_type == fun_type_5:
  temps = gaussian_blur(src_dir, save_dir, imgs)
  elif fun_type == fun_type_6:
- temps = bitch_render(src_dir, save_dir, imgs)
+ temps = batch_render(src_dir, save_dir, imgs)
  elif fun_type == fun_type_7:
  temps = bitch_render_seg(src_dir, save_dir, imgs)
  elif fun_type == fun_type_8:

backend/applications/interface/change_detection.py

@@ -41,7 +41,7 @@ def execute(model_path, data_path, out_dir, names_):
  return_list=True)
  # 设置滑窗大小与滑动步长
  WINDOW_SIZE = 256
- STRIDE = 128
+ STRIDE = 256
 
  ORIGINAL_SIZE = (1024, 1024)
 

backend/applications/interface/classification.py

@@ -1,19 +1,12 @@
-# 导入需要用到的库
 import os.path as osp
 
-import cv2
 import paddlers as pdrs
-
-
-def read_rgb(path):
- im = cv2.imread(path)
- im = im[..., ::-1]
- return im
+from paddlers.transforms import decode_image
 
 
 def execute(model_path, data_path, names):
  image_list = [osp.join(data_path, name) for name in names]
- ims = [read_rgb(i) for i in image_list]
+ ims = [decode_image(i) for i in image_list]
  predictor = pdrs.deploy.Predictor(model_path, use_gpu=True)
  temps = predictor.predict(ims)
  return temps

backend/applications/interface/object_detection.py

@@ -1,58 +1,38 @@
 # 导入需要用到的库
 import os.path as osp
 
-import cv2
-import numpy as np
 import paddle
+import numpy as np
+from paddlers.models.ppdet.utils.colormap import colormap
+from skimage.io import imsave
+
 import paddlers as pdrs
+from paddlers.transforms import decode_image
 from paddlers.tasks.utils.visualize import visualize_detection
-from skimage.io import imsave
 
 from applications.common.path_global import md5_name, generate_url
 
 
-def read_rgb(path):
- im = cv2.imread(path)
- im = im[..., ::-1]
- return im
-
-
 def execute(model_path, data_path, out_dir, names):
  """
-
  :param model_path: 模型路径
  :param data_path: 数据文件夹路径，里面只包含图片
  :param out_dir: 结果保存路径
- :return: None
  """
- # names = listdir(data_path)
- # 对文件名进行排序，以确保多次运行结果一致
- # names.sort()
  image_list = [osp.join(data_path, name) for name in names]
  predictor = pdrs.deploy.Predictor(model_dir=model_path, use_gpu=True)
  pred = predictor.predict(image_list)
- print('预测完毕！')
- # 参考 https://stackoverflow.com/a/68209152
  # 读取输入影像
- ims = [read_rgb(i) for i in image_list]
+ ims = [decode_image(i) for i in image_list]
  temps = list()
  # 绘制目标框
  with paddle.no_grad():
  for idx, im in zip(range(len(names)), ims):
- im = cv2.resize(
- im[..., ::-1], (608, 608), interpolation=cv2.INTER_CUBIC)
  vis = im
- # 用绿色画出预测目标框
+ # 绘制预测目标框
  if len(pred[idx]) > 0:
  vis = visualize_detection(
- np.array(vis),
- pred[idx],
- color=np.asarray(
- [[0, 255, 0], [0, 255, 0], [0, 255, 0], [0, 255, 0]],
- dtype=np.uint8),
- threshold=0.2,
- save_dir=None)
- vis = cv2.cvtColor(vis, cv2.COLOR_RGB2BGR)
+ np.array(vis), pred[idx], threshold=0.5, save_dir=None)
  name = names[idx]
  new_name = md5_name(name)
  imsave(osp.join(out_dir, new_name), vis)

backend/applications/interface/semantic_segmentation.py

@@ -14,7 +14,7 @@ def get_lut():
  lut[1] = [30, 255, 142] # 浅绿
  lut[2] = [60, 0, 255] # 蓝
  lut[3] = [255, 222, 0] # 橙黄
- lut[4] = [0, 0, 0] # 黑
+ lut[4] = [255, 0, 255] # 粉
  return lut
 
 
@@ -26,8 +26,6 @@ def execute(model_path, data_path, out_dir, test_names):
  lut = get_lut()
  temps = list()
  for idx, im in zip(range(len(image_list)), ims):
- if im.ndim == 3:
- im = cv2.cvtColor(im, cv2.COLOR_BGR2GRAY)
  im = lut[im]
  new_name = md5_name(test_names[idx])
  imsave(osp.join(out_dir, new_name), im)

frontend/package.json

@@ -10,29 +10,25 @@
  "@vueuse/core": "^8.5.0",
  "axios": "^0.26.1",
  "core-js": "^3.8.3",
- "echarts": "^5.3.2",
  "element-plus": "2.1.10",
  "eslint": "^8.23.1",
  "eslint-plugin-vue": "^9.5.1",
  "file-saver": "^2.0.5",
  "html2canvas": "^1.4.1",
  "jszip": "^3.9.1",
- "scrollreveal": "^4.0.9",
  "vue": "^3.2.13",
  "vue-cropper": "^1.0.3",
  "vue-keep-scroll-position": "^0.1.2",
  "vue-popperjs": "^2.3.0",
- "vue-router": "^4.0.3",
- "vuex": "^4.0.0"
+ "vue-router": "^4.0.3"
  },
  "devDependencies": {
  "@vue/cli-plugin-babel": "~5.0.0",
  "@vue/cli-plugin-router": "~5.0.0",
  "@vue/cli-plugin-vuex": "~5.0.0",
  "@vue/cli-service": "~5.0.0",
  "less": "^4.0.0",
- "less-loader": "^8.0.0",
- "vue-particles": "^1.0.9"
+ "less-loader": "^8.0.0"
  },
  "browserslist": [
  "> 1%",

frontend/public/index.html

@@ -21,7 +21,7 @@
  <div id="loader"></div>
  <div class="loader-section section-left"></div>
  <div class="loader-section section-right"></div>
- <div class="load_title">正在加载Hippo智能遥感解译平台,请耐心等待...
+ <div class="load_title">正在加载PP-GeoView智能遥感解译平台,请耐心等待...
  <br>
  <p>v1.0</p>
  </div>

frontend/src/App.vue

@@ -9,14 +9,11 @@
  </div>
 </template>
 <script>
-import * as echarts from 'echarts'
-import { provide } from 'vue'
+
+
 export default {
  name: 'App',
- setup(){
- provide('echarts',echarts) //provide
- },
- 
+
 }
 </script>
 

frontend/src/api/request.js

@@ -1,6 +1,6 @@
 import axios from "axios"
 import router from '../router'
-import store from '@/store' 
+
 import global from '@/global'
 import { hideFullScreenLoading} from '@/utils/loading'
 import { ElMessage } from 'element-plus'

frontend/src/api/requestfile.js

@@ -1,6 +1,6 @@
 import axios from "axios"
 import router from '../router'
-import store from "@/store"
+
 import global from '@/global'
 export function requestfile(config) {
  const instance = axios.create({

frontend/src/api/upload.js

@@ -15,6 +15,14 @@ export function createSrc(formdata) {
  })
 }
 
+export function sceneClassifyUpload(data) {
+ return request({
+ method: 'POST',
+ url: '/api/analysis/classification',
+ data,
+ })
+}
+
 export function classifyUpload(data) {
  return request({
  method: 'POST',

frontend/src/assets/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
  font-family: "iconfont"; /* Project id 3317298 */
- src: url('iconfont.woff2?t=1659272007979') format('woff2'),
- url('iconfont.woff?t=1659272007979') format('woff'),
- url('iconfont.ttf?t=1659272007979') format('truetype');
+ src: url('iconfont.woff2?t=1663923711435') format('woff2'),
+ url('iconfont.woff?t=1663923711435') format('woff'),
+ url('iconfont.ttf?t=1663923711435') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
  -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-changjingguanli:before {
+ content: "\eb61";
+}
+
+.icon-changjingmoren:before {
+ content: "\e629";
+}
+
 .icon-zaixianditu:before {
  content: "\e61e";
 }

frontend/src/components/AsideVue.vue

@@ -13,7 +13,7 @@
  :src="require('@/assets/image/logo/80.png')"
  style="width:45px;color:rgb(64,158,255);"
  alt="logo"
- @click="goRemoteSense"
+ @click="goDetectChanges"
  >
  <div
  v-if="!isCollapse"
@@ -83,6 +83,25 @@
  </h3>
  </el-menu-item>
  </div>
+ <div class="item-group">
+ <el-menu-item
+ index="/classifyscene"
+ @click="goClassifyScene"
+ >
+ <i
+ v-show="isCollapse"
+ class="iconfont icon-changjingguanli"
+ style="font-size: 22px"
+ />
+ <h3 v-show="!isCollapse">
+ <i
+
+ class="iconfont icon-changjingguanli"
+ style="font-size: 22px"
+ />场景分类
+ </h3>
+ </el-menu-item>
+ </div>
  <div class="item-group">
  <el-menu-item
  index="/onlinemap"
@@ -135,6 +154,7 @@ import {
  goDetectChanges,
  goDetectTargets,
  goClassify,
+ goClassifyScene,
  goHistory,
  goOnlineMap
 } from "@/utils/gosomewhere.js";
@@ -156,6 +176,7 @@ export default {
  goDetectChanges,
  goDetectTargets,
  goClassify,
+ goClassifyScene,
  goHistory,
  goOnlineMap,
  goShow(){
@@ -219,9 +240,7 @@ export default {
 .el-menu-item {
  z-index: 1;
 }
-.item-group * {
- transition: 0.5s;
-}
+
 .el-menu-item {
  position: relative !important;
 }

frontend/src/components/Bottominfor.vue

@@ -9,9 +9,7 @@
  :xl="16"
  class="hidden-sm-and-down"
  style="margin-left:30px"
- >
- web developement based on vue3 + elememnt ui + axios
- </el-col>
+ />
  <el-col
  :xs="24"
  :sm="24"