QQs'Note

HSB模型和RGB模型，CMYK模型

H色相（Hue）：色调是当人眼看一种或多种波长的光时所产生的色彩感觉，它反映颜色的种类，是决定颜色的基本特征。
S饱和度(Saturability)：饱和度是指颜色的纯度即掺入白光的程度，表示颜色深浅的程度。
B亮度(Brightness)：亮度是光作用于人眼所引起的明亮程度的感觉，它与被观察物体的发光强度有关。主要表现光的强和弱。

HSB模型 无法用于工程制造
RGB模型 用于发光体 不适用于反光物体
CMYK模型 青洋红黄黑 用于反光体配色

色彩空间

色域马蹄图的由来
混合红绿蓝三束光 通过调节三束光的强度 使之与待测光看起来颜色一致 以红绿蓝的强度值作为待测光的“三刺激值”

这里在数学上等同于和向量和分量的关系，于是以R、G、B分量构建三维坐标系

上述参数归一化 成为RGB坐标系中的色品坐标:

注意这里的代数可以为负值，这种情况是三原色光无论如何无法与待测光一致，需向待测光加入原色光补偿

在这套系统上，测试/分解其他波长色光，得到一条单位平面的曲线，即光谱轨迹

在单位平面上 有一点使R，G，B原色混合可以产生等能的白光，称为等能白点，（当R，G，B为标准原色时）该点坐标为(0.33,0.33,0.33)

光谱轨迹坐标为负值的部分，无法用于实际生产，应做左边变换使

色彩校准

color correction matrix(CCM)

sRGB

standard color space 标准色彩空间 为使图像在显示时使人感受与原物一致 根据三色刺激值线性变换得到的RGB色彩空间
在有较高需求的领域，往往有ICC配置文件 将输出图像颜色空间映射到sRGB 或将sRGB图像数据信息 变换后输出到具体设备或环境以优化还原效果

灰度计算和Gamma矫正

因为人眼对不同颜色的亮度（显像功率）的感知到的不是线性关系，每种颜色的“中等深度”与人眼感受的“中等灰度”存在差距
上述公式是根据人眼对不同颜色敏感度的差异来推导的，它使得灰度图像能够更好地表示原始图像中的亮度信息。

根据三色刺激值对色彩光本身的辉度做出的调整就是Gamma矫正

系统正在维护中

方案一
nginx.conf

1
2
3
4
5
6

server {
    listen 80
    server_name localhost

    # rewrite ^(.*)$ /maintainace_page.html break;
}

不间断升级维护

“蓝绿部署”

熔断

降级

OpenCV是计算机视觉领域应用最广泛的开源工具包，基于C/C++，支持Linux/Windows/MacOS/Android/iOS，并提供了Python，Matlab和Java等语言的接口

• core：核心模块，主要包含了OpenCV中最基本的结构（矩阵，点线和形状等），以及相关的基础运算/操作。
• imgproc：图像处理模块，包含和图像相关的基础功能（滤波，梯度，改变大小等），以及一些衍生的高级功能（图像分割，直方图，形态分析和边缘/直线提取等）。
• highgui：提供了用户界面和文件读取的基本函数，比如图像显示窗口的生成和控制，图像/视频文件的IO等。
  如果不考虑视频应用，以上三个就是最核心和常用的模块了。针对视频和一些特别的视觉应用，OpenCV也提供了强劲的支持：
• video：用于视频分析的常用功能，比如光流法（Optical Flow）和目标跟踪等。
• calib3d：三维重建，立体视觉和相机标定等的相关功能。
• features2d：二维特征相关的功能，主要是一些不受专利保护的，商业友好的特征点检测和匹配等功能，比如ORB特征。
• object：目标检测模块，包含级联分类和Latent SVM
• ml：机器学习算法模块，包含一些视觉中最常用的传统机器学习算法。
• flann：最近邻算法库，Fast Library for Approximate
• Nearest Neighbors，用于在多维空间进行聚类和检索，经常和关键点匹配搭配使用。
• gpu：包含了一些gpu加速的接口，底层的加速是CUDA实现。
• photo：计算摄像学（Computational Photography）相关的接口，当然这只是个名字，其实只有图像修复和降噪而已。
• stitching：图像拼接模块，有了它可以自己生成全景照片。
• nonfree：受到专利保护的一些算法，其实就是SIFT和SURF。
• contrib：一些实验性质的算法，考虑在未来版本中加入的。
• legacy：字面是遗产，意思就是废弃的一些接口，保留是考虑到向下兼容。
• ocl：利用OpenCL并行加速的一些接口。
• superres：超分辨率模块，其实就是BTV-L1（Biliteral Total Variation – L1 regularization）算法
• viz：基础的3D渲染模块，其实底层就是著名的3D工具包VTK（Visualization Toolkit）。

安装

1

pip install -i https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple opencv-python

读取显示图像

1
2
3
4
5
6
7
8
9
10
11
12

img = cv2.imread('singlemushroom.jpg', cv2.IMREAD_UNCHANGED)
cv2.imshow("origin image", img)

img_gray = cv2.cvtColor(img, cv2.COLOR_RGB2GRAY)

cv2.imshow("gray image", img_gray)

cv2.waitKey(0)
cv2.destroyAllWindows()

# 写入图像
cv2.imwrite("originImage.jpg", img)

cv.imread的枚举参数

• cv2.IMREAD_COLOR = 1 ：读入一副彩色图像。透明度会被忽略，默认参数
• cv2.IMREAD_GRAYSCALE = 0 ：以灰度模式读入图像
• cv2.IMREAD_UNCHANGED = -1：保留读取图片原有的颜色通道

缩放

1

result = cv2.resize(src, (200,100))

像素操作

1
2
3
4
5

#矩阵运算

#拷贝区域
ball=img[280:340,330:390]
img[273:333,100:160]=ball

通道

1
2
3
4

#通道顺序与R-G-B顺序相反
b,g,r=cv2.split(img)
#b=img[:,:,0]
img=cv2.merge(b,g,r)

阈值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#读取图片
src = cv2.imread('miao.jpg')

#灰度图像处理
GrayImage = cv2.cvtColor(src,cv2.COLOR_BGR2GRAY)

#二进制阈值化处理
r, b = cv2.threshold(GrayImage, 127, 255, cv2.THRESH_BINARY)
#THRESH_BINARY 超过阈值像素设为最大值 否则为0
#THRESH_BINARY_INV 超过阈值像素设为0 否则为最大值
#THRESH_TRUNC 大于阈值部分设为最大值 否则不变
#THRESH_TOZERO 大于阈值部分不变 否则设为0
#THRESH_TOZERO_INV 大于阈值部分设为0 否则不变
print(r)

#显示图像
cv2.imshow("src", src)
cv2.imshow("result", b)

自适应阈值 adapativeThreshold

1

adaptiveThreshold(src, maxValue, adaptiveMethod, thresholdType, blockSize, C[, dst])

• maxValue 满足条件的最大值
• adaptiveMethod 自适应方法 ADAPTIVE_THRESH_MEAN_C ADAPTIVE_THRESH_GAUSSIAN_C
  ADAPTIVE_THRESH_MEAN_C的计算方法是计算出领域的平均值再减去 C；ADAPTIVE_THRESH_GAUSSIAN_C的计算方法是计算出领域的高斯均值再减去C
• thresholdType 阈值类型 THRESH_BINARY 或者 THRESH_BINARY_INV
• blockSize 邻域大小 如 3，5，7
• C 阈值偏移量

  1 2 3 4

  thresh1 = cv2.adaptiveThreshold(gray_image, 255, cv2.ADAPTIVE_THRESH_MEAN_C, cv2.THRESH_BINARY, 11, 2) thresh2 = cv2.adaptiveThreshold(gray_image, 255, cv2.ADAPTIVE_THRESH_MEAN_C, cv2.THRESH_BINARY, 31, 3) thresh3 = cv2.adaptiveThreshold(gray_image, 255, cv2.ADAPTIVE_THRESH_GAUSSIAN_C, cv2.THRESH_BINARY, 11, 2) thresh4 = cv2.adaptiveThreshold(gray_image, 255, cv2.ADAPTIVE_THRESH_GAUSSIAN_C, cv2.THRESH_BINARY, 31, 3)

卷积和滤波

设想3*3矩阵 对中心位置像素值做卷积运算 其作用即一种平滑滤波

1
2

#高斯滤波
gaussianBlur = cv2.GaussianBlur(greyImg, (3,3), 0)

膨胀和腐蚀，开运算和闭运算 顶帽和底帽

1
2
3
4
5
6
7

#腐蚀
kernel=np.ones((5,5),np.uint8)
erosion=cv2.erode(img,kernel,iterations=1) 
#iterations 为重复次数
#膨胀
kernel=np.ones((5,5),np.uint8)
dilate=cv2.dilate(img,kernel,iterations=1)

开为先腐蚀再膨胀 闭为先膨胀后腐蚀

顶帽：原图像 - 开运算结果 顶帽得到的是开运算中断开的细节
底帽：原图像 - 闭运算结果 底帽得到的是闭运算中补上的细节

边缘检测 canny

• 去噪 噪声会影响该算法进行边缘检测的准确性
• 计算每个点的梯度大小和方向 例如用一对Sobel算子作为卷积核对图像滤波
• 抑制非边缘点 边缘点应该满足：±梯度方向上的局部最大值，因此将不满足条件的点归零
• 用两个阈值条件筛选剩余的边缘‘条纹’

  1 2	edges = cv.Canny(blur, 50, 150, apertureSize)

  FindContour

  一种边缘提取方法

1

contours,_=cv2.findContours(img,RETR_TREE,cv2.CHAIN_APPROX_SIMPLE)

• 参数1 二值图像
• 参数2 轮廓返回模式（RETR_EXTERNAL: 表示只检测最外层轮廓；RETR_LIST: 提取所有轮廓，并放置在list中，检测的轮廓不建立等级关系； RETR_TREE: 提取所有轮廓并重新建立网状轮廓结构 ）
• 参数3 遍历发现方法（CHAIN_APPROX_NONE：获取每个轮廓的每个像素，相邻的两个点的像素位置差不超过1；CHAIN_APPROX_SIMPLE：压缩水平方向，垂直方向，对角线方向的元素，值保留该方向的重点坐标，如果一个矩形轮廓只需4个点来保存轮廓信息 ）
  用findcontour去孔洞

drawContours

cv2.drawContours()

1

cv2.drawContours(image, contours, contourIdx, color, thickness=None, lineType=None, hierarchy=None, maxLevel=None, offset=None)

• image 原图像
• contours 轮廓集合 例如findContours获得的集合
• contourIdx 指定绘制轮廓list中的哪条轮廓，如果是-1，则绘制其中的所有轮廓。
• color 颜色
• thickness 轮廓线的宽度，如果是-1（cv2.FILLED），则为填充模式。

  1

  外接矩形

  1 2 3

  x, y, w, h = cv2.boundingRect(contour) img = cv2.rectangle(img, (x, y), (x + w, y + h), (0, 255, 0), 1) cv2.imshow(img)

  区域质心位置

  1 2	mu = cv2.moments(contour, False) mc = [mu['m10']/mu['m00'], mu['m01']/mu['m00']]

  联通区域计数

  CSDN Blog:连通区域分析算法

floodFill填充孔洞

掩膜

或者叫蒙版 将感兴趣区域（Region of Interest, ROI）提取出来 掩盖其他区域.

1
2
3
4
5

h, w = gaussianBlur.shape
mask = np.zeros((h, w), np.uint8)
cv2.fillPoly(mask, [capContour], (255, 255, 255))
roi = cv2.bitwise_and(GrayImage, GrayImage, mask=mask)
cv2.imshow('roi', roi)

直方图

反映像素的值在图像中的分布，值范围分段，进行统计，值可以是亮度，或任意色彩通道的分量
直方图可以作为阈值分割的参数选择依据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import cv2  
import numpy as np
import matplotlib.pyplot as plt

#读取图像
src = cv2.imread('orign.bmp')

#绘制直方图
plt.hist(src.ravel(), bins=256, density=1, facecolor='green', alpha=0.75)
plt.xlabel("x")
plt.ylabel("y")
plt.show()

#显示原始图像
cv2.imshow("src", src)
cv2.waitKey(0)
cv2.destroyAllWindows()

• src.ravel()将二维图像数据展成一维
• BINS 分若干组
• DENSITY 密度
• FACECOLOR 直方图颜色
• ALPHA

matchtemplate

opencv.js

OpenCV directly in the browser (webassembly + webworker)

PIL（ Python Imaging Library）是 Python 的第三方图像处理库，由于其功能丰富，API 简洁易用，因此深受好评。由于 PIL 库更新缓慢，目前仅支持 Python 2.7 版本，这明显无法满足 Python3 版本的使用需求。于是一群 Python 社区的志愿者（主要贡献者：Alex Clark 和 Contributors）在 PIL 库的基础上开发了一个支持 Python3 版本的图像处理库，它就是 Pillow。

Pillow 提供了丰富的图像处理功能，可概括为两个方面：
图像归档
图像处理
图像归档，包括创建缩略图、生成预览图像、图像批量处理等；而图像处理，则包括调整图像大小、裁剪图像、像素点处理、添加滤镜、图像颜色处理等。

Pillow 库可以配合 Python GUI（图形用户界面）工具 Tkinter 一起使用。

输入棋盘图片路径 棋盘角点数（横纵方格数减1）

1
2
3
4
5
6
7
8

def calibratePos(imgPath, w, h):
    chessboardImg = cv2.imread(imgPath)
    chessboardImg = cv2.cvtColor(chessboardImg, cv2.COLOR_BGR2GRAY)
    ret, chessboard = cv2.findChessboardCorners(chessboardImg, (w, h), None)
    cv2.drawChessboardCorners(chessboardImg, (w, h), chessboard, ret)
    # cv2.imwrite('calibrated_image.jpg', chessboardImg)
    cv2.imshow('calibrated image', chessboardImg)
    cv2.waitKey(0)

vue的状态管理库
其核心是管理一个store(仓库) store保存变量的状态 组件引用store 查询状态
以commit mutation的方式更新状态

state

使用单一状态树，即app只用一个对象管理所有变量

mutation

1

store.commit('increment', payload)

1
2
3
4
5
6
7
8
9
10

const store = createStore({
  state: {
    count: 1
  },
  mutations: {
    increment (state, payload) {
        state.count += payload
    }
  }
})

mutation的处理方法不能是异步的 对于异步的状态是无法追踪的

action

与mutation类似
分发action

1

store.dispatch('increment')

1
2
3
4
5
6
7

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

mapActions

ref

vtk.js widgets

vtk Widget是官方提供的常用小工具，如LineWidget、AngleWidget、PaitWidget等

vtk Widget架构遵循MVC，分为三个组件

• vtkWidgetState (model)
• vtkWidgetRepresentation (view)
• vtkAbstractWidget (control)

下图示意调用widget的不同组件的通信关系

Widget 工厂

Widget 工厂用于组装Widget及其state、representations

构建vtkWidgetState
调用getWidgetForView 工厂new一个widget对象 将state赋给该对象 创建并设置representations即SetRepresentation

开发者应继承vtkAbstractWidgetFactory开发widget

与InteractorStyle相比

VTK的交互器样式（vtkInteractorStyle）通常只是控制相机以及提供一些简单的键盘和鼠标事件的交互技术。交互器样式在渲染场景中并没有一种表达形式，也就是说，在交互时我们看不见交互器样式到底是什么样子的，用户在使用这些交互器样式时，必须事先知道哪些键盘和鼠标事件是控制哪些操作的。FromCSDN: Widgets简介

vtkWidget同为vtkInteractorObserver子类，监听并响应交互器事件，又添加可视化的representation

开发Widgets

Developing Widgets
vtkWidgetManager 是管理widgets创建、抑制(suppression)及聚焦(focus)的对象，每个render中唯一

1
2
3
4
5
6
7
8

widget = vtkWidget.newInstance()
handle = widgetManager.addWidget(widget, viewType)
widgetManager.setRenderer(renderer)
widgetManager.grabFocus(widget)
widgetManager.enablePicking()

widgetManager.removeWidget(widget)
widget.delete()

使用widget的newInstance方法创建widget对象 这时widget state被创建 用于在不同组件间同步状态 比如工具栏和canvas的相互交互

viewType用于指示widget manager该使用的representation。

创建子状态

1
2
3
4
5
6
7
8
9
10
11
12

vtkStateBuilder
.createBuilder()
.addStateFromMixin({
    labels: ['{LABEL0}'],
    mixins: ['origin', 'color', 'scale1', 'visible'],
    name: '{NAME}',
    initialValues: {
      scale1: 0.1,
      origin: [1, 2, 3],
      visible: false,
    }
})

• name是子状态唯一标识 调用state.get{NAME}()从widget state中读取子状态
• labels决定哪些representation可以用来渲染该子状态
• mixins存放子状态有效数据 representation会使用到这些数据 因而是有限且标准的 get/set方法：subState.get{NAME}(), subState.set{NAME}() 修改子状态触发场景渲染
• initialValues子状态初始值 非必须的

动态子状态
Mixins

调用widgetManager.getRepresentationsForViewType(viewType)返回含representation的集合 参数viewType是addWidget时指定的参数
返回各项 {builder, labels} 前者是Representation类 后者是representation对象要用到的子状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

switch (viewType) {
  case ViewTypes.DEFAULT:
  case ViewTypes.GEOMETRY:
  case ViewTypes.SLICE:
    return [
      {
        builder: vtkCircleContextRepresentation,
        labels: ['handle', 'trail'],
      },
      {
        builder: vtkPolyLineRepresentation,
        labels: ['trail'],
      },
    ];
  case ViewTypes.VOLUME:
    return [
        {
            builder: vtkSphereHandleRepresentation,
            labels: ['handles'],
            initialValues: {
              scaleInPixels: true,
            },
          },
          {
            builder: vtkSphereHandleRepresentation,
            labels: ['moveHandle'],
            initialValues: {
              scaleInPixels: true,
            },
          },
          {
            builder: vtkSVGCircleHandleRepresentation,
            labels: ['handles', 'moveHandle'],
          }
    ];
  default:
    return [{ builder: vtkSphereHandleRepresentation, labels: ['handle'] }];
}

Widget behavior
widgetManager.addWidget返回的handle就是widget behavior对象 它控制这widget的行为：接收并响应鼠标、键盘事件 见其定义的方法形如 PublicAPI.handle{XXX}(callData)
widget behavior也可以访问renderer rendererWindow 和 interactor

程序入口

1
2
3
4
5
6
7
8
9
10
11

// main.js
import Vue from 'vue'
import App from './App.vue'

// 生产环境中不提示 正在使用开发板警告
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

h 是 createElement 的别名
$mount(‘#app’) 表示将该组件挂在到id=”app”的dom上，这个#app在public/index.html上

provider & inject

类似于React的 Context Provider, 避免父组件向孙子后代组件传参时逐层引用，而以依赖注入的形式暴露给其他组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

const app = Vue.createApp({})

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide: {
    user: 'John Doe'
  },
  template: `
    <div>
      {{ todos.length }}
      <!-- 模板的其余部分 -->
    </div>
  `
})

app.component('todo-list-statistics', {
  inject: ['user'],
  created() {
    console.log(`Injected property: ${this.user}`) // > 注入的 property: John Doe
  }
})

1
2
3
4
5

provide() {
    return {
        todoLength: this.todos.length
    }
}

深度学习网络对输入的数据进行多层的非线性变换操作, 不断耦合低层特征, 层层往上, 最后得到高层的语义表达

卷积神经网络

模型

gpt 175 billion netro cell

资源

白嫖限制试用的api
使用cloud function实现外网gpt代理访问

创建新解决方案 使用webapi模板 new -> Project -> ASP.NET Core Web API template
命令行工具参考Microsoft Doc： dotnet new

1
2
3
4
5
6

mkdir MyServices
cd MyServices
dotnet new sln
mkdir src
dotnet new webapi -lang C# -o src/MyServices.API
dotnet sln add src/MyServices.API/MyServices.API.csproj

1
2
3
4

dotnet new classlib -lang C# -o src/MyServices.EntityManagers
dotnet new classlib -lang C# -o src/MyServices.Models
dotnet sln add src/MyServices.EntityManagers/MyServices.EntityManagers.csproj
dotnet sln add src/MyServices.Models/MyServices.Models.csproj

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

─src
    ├───MyServices.API
    │   ├───Controllers
    │   ├───Infrastructure
    │   │   ├───ActionFilters
    │   │   ├───DbContext
    │   │   ├───Helpers
    │   │   ├───OData
    │   │   └───Security
    │   └───Properties
    ├───MyServices.EntityManagers
    │   ├───interfaces
    │   ├───Managers
    │   └───Utilities
    └───MyServices.Models
        ├───Contexts
        ├───DTO
        ├───Enums
        └───Migrations

• Microsoft.AspNetCore.Mvc.NewtonsoftJson
• Microsoft.AspNetCore.OData √
• Microsoft.OData.ModelBuilder
• Microsoft.EntityFrameworkCore √
• Microsoft.EntityFrameworkCore.Design √
• Microsoft.EntityFrameworkCore.SqlServer √
• Microsoft.EntityFrameworkCore.Tools √
• Swashbuckle.AspNetCore √
  EntityManager layer
  None
  Model layer
• Microsoft.EntityFrameworkCore
• Microsoft.EntityFrameworkCore.Design
• Microsoft.EntityFrameworkCore.SqlServer