homepage Live2d + Mouse click effects + background-music

在\themes\hugo-theme-minos\layouts路径下修改模板html即可

https://www.python87.com/p/881.html

https://github.com/stevenjoezhang/live2d-widget

https://apps.elfsight.com/panel/applications/background-music/

live2d

live2d : https://jingzhisheng.cn/blog/detail/1406456203487350784

https://l2d.alg-wiki.com/

https://github.com/alg-wiki/AzurLaneL2DViewer/tree/gh-pages/assets

pretty blogs

anime theme

需要进一步的研究学习

live2d more

遇到的问题

暂无

参考文献

无

VScode Debug Run

Debug Process

3. 创建lables来存储分类结果, m_spcount 200, m_compactness 10
4. 计时运行 slic.PerformSLICO_ForGivenK(img, width, height, labels, numlabels, m_spcount, m_compactness);
   1. 参数的最后两项是required number of superpixels和weight given to spatial distance(空间距离的权重)也就是K=200
   2. 串行初始化赋值klabels[s] = -1
   3. DoRGBtoLABConversion(ubuff, m_lvec, m_avec, m_bvec);对于整个图像：重载的浮点版本
      1. 提取第一个像素rgb(229,226,218)
      2. 串行RGB2LAB( r, g, b, lvec[j], avec[j], bvec[j] );
      3. int变成double数组
   4. 声明perturbseeds true，edgemag
   5. DetectLabEdges(m_lvec, m_avec, m_bvec, m_width, m_height, edgemag);
      1. 串行对每个像素进行$$dx=(l[i-1]-l[i+1])^2+(a[i-1]-a[i+1])^2+(b[i-1]-b[i+1])^2$$$$dy=(l[i-width]-l[i+width])^2+(a[i-width]-a[i+width])^2+(b[i-width]-b[i+width])^2$$$$edgemag[i]=dx+dy$$为了之后计算6.5-PerturbSeeds
      2. 值得注意的是i的取值说2600 = width+1是第二行第二列，一直到倒数第二行倒数第二列
   6. GetLABXYSeeds_ForGivenK(kseedsl, kseedsa, kseedsb, kseedsx, kseedsy, K, perturbseeds, edgemag);
      1. int step = sqrt(double(sz)/double(K)); \(S=\sqrt{N/k}=225\)
      2. xoff 与 yoff 为一半 112
      3. int X = x*step + (xoff<<(r&0x1));六角网格???
      4. 串行对每个绿圈存了颜色坐标五元组在kseedsl/a/b/x/y 有196个中心
      5. PerturbSeeds(kseedsl, kseedsa, kseedsb, kseedsx, kseedsy, edgemag);
         1. 串行对这196个中心和周围8个位置进行，最小edgemag值的寻找。
         2. 并更新196个中心的位置
   7. int STEP = sqrt(double(sz)/double(K)) + 2.0;
   8. PerformSuperpixelSegmentation_VariableSandM(kseedsl,kseedsa,kseedsb,kseedsx,kseedsy,klabels,STEP,10);
      1. if(STEP < 10) offset = STEP*1.5;
      2. DBL_MAX ? doubel_max 1.7976931348623157e+308
      3. 变量sigma , distxy, maxxy
      4. double invxywt = 1.0/(STEP*STEP);
      5. 迭代10次
         1. 对中心聚类
            1. 串行对这196个中心首先划出[2S*2S]的区域（上下左右offset或者STEP）
            2. 再串行对这\(4S^2\)的区域的每个像素，计算与其区域中心的距离
               $$dist = \frac{(l-kl[n])^2+(a-ka[n])^2+(b-kb[n])^2}{maxlab[n]}+\frac{(x-kx[n])^2+(y-ky[n])^2}{S^2}$$
            3. 注意maxlab[n]初始值是10*10,根据dist更新该像素的距离中心的最小距离数组distvec,和指向的最近中心klable由于是2S*2S,相邻中心的周围区域是有一部分重叠的(如图中黄色荧光笔区域)，相当于聚类到各个中心，注意由于中心对自己dist=0,是不可能某一中心距离其他中心更近。
         2. 串行将maxlab与maxlab更新为该聚类集合里的最大值
            1. 注意maxlab与maxlab都是每个中心维护一个
         3. 质心移动：串行将每个聚类区域的每个点的五元组加到质心上，然后除以聚类区域元素总数来得到新的质心五元组
         4. 迭代10次结束（其实可以判断质心是否不再移动来提前结束）
   9. EnforceLabelConnectivity(klabels, m_width, m_height, nlabels, numlabels, K);
      1. 串行新数组赋值for( int i = 0; i < sz; i++ ) nlabels[i] = -1;全部标记为未处理
      2. 串行对所有元素进行如下处理
         1. 如果旧index未被处理
            1. 在其左下上右找到已经处理的元素的nlable,将其值保存在adjlable里
            2. 从该元素开始上下左右寻找未处理，而且其klabels值与旧klabels值相同的元素。
               1. 将其nlable值改为lable,应该也达到标记为已处理的效果
               2. 最终效果就是把该元素相邻连接区域klabels值与旧klabels值相同的全部标记
            3. 如果这块相邻区域过小count <= SUPSZ >> 2
               1. 则将其全部元素赋值为adjlable，即并入上块区域
         2. 旧index++。
         3. 最终效果就是所有的元素重新整合聚类，达到消除过小区域与不连续区域的效果
5. 结果与check.ppm对比
   1. 我以为只要读取lable的分类，大概sz个int
   2. fread(rgb, (w)*(h)*3, 1, fp);
   3. 作者是傻逼，只用了1/3的空间

skills: size of arrays

1

a.size()

相关知识

RGB与Lab颜色空间互相转换

Lab颜色空间简介

同RGB颜色空间相比，Lab是一种不常用的色彩空间。1976年，经修改后被正式命名为CIELab。Lab颜色空间中的L分量用于表示像素的亮度，取值范围是[0,100],表示从纯黑到纯白；a表示从红色到绿色的范围，取值范围是[127,-128]；b表示从黄色到蓝色的范围，取值范围是[127,-128]。

RGB转Lab颜色空间

RGB颜色空间不能直接转换为Lab颜色空间，需要借助XYZ颜色空间，把RGB颜色空间转换到XYZ颜色空间，之后再把XYZ颜色空间转换到Lab颜色空间。

RGB与XYZ颜色空间有如下关系：

LAB与XYZ颜色空间有如下关系：


X,Y,Z会分别除以0.950456、1.0、1.088754。

需要进一步的研究学习

暂无

遇到的问题

暂无

参考文献

无

First way :

https://www.youtube.com/watch?v=_laN9jJO63Q

https://www.youtube.com/watch?v=MXNBtws35WE

Baka Mitai all in one

https://colab.research.google.com/github/AliaksandrSiarohin/first-order-model/blob/master/demo.ipynb#scrollTo=Oxi6-riLOgnm

但是由于上传的文件不能太大,对于unravel可以按照youtube视频的传无声音版本，然后用kapwing在线合成导出。

效果展示1替换

效果展示2替换

效果文件链接

https://raw.githubusercontent.com/Kirrito-k423/Picbed/main/img/final_60eaff63b13be700ab0582c8_20002.mp4

和

http://pic.shaojiemike.top/PicGo%E4%B8%8B%E8%BD%BD.mp4

Sencond way : yanderify

https://www.bilibili.com/read/cv7475087/

需要进一步的研究学习

暂无

遇到的问题

暂无

参考文献

无

七牛图床

1. ICP域名备案检查失败

https://support.huaweicloud.com/usermanual-icp/icp_08_0002.html
https://www.zhihu.com/question/335750650/answer/763853314
https://support.huaweicloud.com/qs-cdn/cdn_01_0052.html
昨天我那个域名实名认证后可以用了，用七牛的图床，不是需要个域名，但是我这个域名对应的机器不是自己的吗，这个怎么备案呢？

并不需要备案，也可以用CDN，只不过七牛图床需要放到海外（东南亚）。教程

配置的存储区域(华东 z0,华北 z1,华南 z2,北美 na0,东南亚 as0 )

加速域名配置

https://developer.qiniu.com/fusion/1367/custom-domain-name-binding-process

内容分发网络 CDN 简介

内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。

加速域名：指用户提供的需要使用CDN加速服务的域名，即终端用户访问的域名。
源站域名：指服务器IP地址对应的域名，即CDN回源时访问的域名。

需要进一步的研究学习

暂无

遇到的问题

没有证书导致图床使用的http的图片直连，但是github主页只支持https的下载

https://www.vi586.com/web/615.html

参考文献

无

PicGo介绍

这是一款图片上传的工具，目前支持微博图床，七牛图床，腾讯云，又拍云，GitHub等图床，未来将支持更多图床。

所以解决问题的思路就是，将本地的文件，或者剪切板上面的截图发送图床，然后生成在线图片的链接，走到哪就可以用到哪。

1. 创建github仓库
2. 在设置的最后生成token
   
3. 下载PicGo并设置github图床

Cloudflare R2 Storage

对象存储有时也称为 Blob 存储，可以存储任意的大型非结构化文件。我们常用的有 AWS 的 S3、阿里云的 OSS、腾讯云的 COS、华为云的 OBS，都是对象存储，他们都可以为我们提供延迟一致、持久性高和容量无限的服务，免去了我们本地文件系统的共享、备份等痛点。

最为经典的是 AWS 的 S3（Simple Storage Service），刚刚推出的时候是革命性的服务，但也带来了新的痛点，上传、存储的费用还可以，但下载也就是取回的时候会被收取流量费，这个费用随着时间的推移，存储的文件越来越多，流量费也变得越来越高。

2022年 5月 Cloudflare 就为我们带来了 R2 Storage，基于带宽联盟，为存储对象提供更低成本的存储服务。在后台，R2 自动智能管理数据分层，以在峰值负载时提高性能，并为不经常请求的对象降低成本。

picbed / OSS compare

1. github图床，国内连不上
2. (推荐)七牛申请了免费的证书证书,由于是海外访问还是慢。
3. one drive虽然能用也能访问，但是速度慢而且操作麻烦，只能一个个传。而且会失效
4. OSS charge but easy-to-use.

定价对比

1. (6GB内无需购买套餐，最低配置一年9元/40GB)
2. B类操作费用说明：每月有1000万次免费额度，超出后每百万次收取 $0.36 的操作费

当前图床使用统计

当前月支出约10元且费用增长较快

我的选择分析

1. 自建服务器的可行性
   我的博客本质是个人知识库（非跨平台发布），理论上可通过自建服务器存储图片，无需图床服务。

2. Cloudflare + GitHub方案的三大隐患

   • 存储限制：图片可能触及 GitHub 仓库的推荐存储上限（官方建议不超过5GB）
   • 构建延迟：每次推送代码后，Cloudflare Pages 会克隆整个图片仓库，导致博客构建时间过长（超20分钟会触发超时）
   • 文件大小限制：Cloudflare Pages 对静态文件有单文件25MB的限制

3. 最终建议
   综合考量仍推荐使用对象存储（如阿里云OSS），规避GitHub方案的潜在问题。

旧版阿里云图床配置

详见

1
2
3
4

# 配置参数
* 存储空间名 shaojiemike
* 存储区域 oss-cn-hangzhou
* 存储路径 img/

参考文献

[^1]: 阿里云OSS PicGo 配置图床教程 超详细

[^2]: large files on github

[^3]: cloudflare pages limits

[^4]: 阿里云 价格计算器

[^5]: 关于 Cloudflare R2 Storage 的使用体验测评和我的观点

[^6]: cloudflare R2 Pricing

VScode Debug Run

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

{
    "name": "(gdb) 启动",
    "type": "cppdbg",
    "request": "launch",
    "program": "/home/shaojiemike/github/IPCC/SLIC/SLIC",
    "args": [],
    "stopAtEntry": false,
    "cwd": "${fileDirname}",
    "environment": [],
    "externalConsole": false,
    "MIMode": "gdb",
    "setupCommands": [
        {
            "description": "为 gdb 启用整齐打印",
            "text": "-enable-pretty-printing",
            "ignoreFailures": true
        }
    ]
}

1

g++ -g -std=c++11 SLIC.cpp -o SLIC #把调试信息加到可执行文件中，如果没有-g，你将看不见程序的函数名、变量名，所代替的全是运行时的内存地址。

Debug Process

1. main
2. LoadPPM 把数据读入imag
   1. 读类型、像素图片长宽 2599 3898
   2. 读最大像素 255(应该是指rgb颜色，比如red只有256种，也就是8位二进制)
   3. 读长宽的像素的rgb到imag返回,imag是2599*3898大小的unsigned int二维数组,每位存24位数2进制数。
3. 创建lables来存储分类结果, m_spcount 200, m_compactness 10
4. 计时运行 slic.PerformSLICO_ForGivenK(img, width, height, labels, numlabels, m_spcount, m_compactness);//for a given number K of superpixels
5. 结果与check.ppm对比

skills: watch arrays

1
2

*(int(*)[100])labels
*labels@10000

SourceTrail Analysis

Vtune Analysis

需要进一步的研究学习

遇到的问题

参考文献

test on node5

1
2
3

g++ -std=c++11 SLIC.cpp -o SLIC
time ./SLIC
./SLIC  28.46s user 0.52s system 99% cpu 29.027 total

test on amd_256

1
2

gcc 10.2.0
[1]    122955 segmentation fault (core dumped)  ./SLIC

我傻逼了，我把cpp移动了，但是输入文件忘记动了

1
2
3

cat ./log/job_436960_rank0_fb0707_0.out
Computing time=21872 ms
There are 0 points' labels are different from original file.

要求

1. 对slic.PerformSLICO_ForGivenK 函数运行时间进行通用优化
   1. 首先是并行化处理
   2. 读取时间不在计分范围
   3. 可以优化编译选项
   4. 可以改变数据结构与类型
2. 需保证结果正确
3. 之后有多组数据

需要进一步的研究学习

遇到的问题

北京超算的机器传文件只能用wincp,而且有时候不行，需要刷新缓存

参考文献

SLIC

超像素算法就是将图像中的像素依据某种相似性进行聚类，形成一个大“像素”，这个大“像素”可以作为其他图像处理算法的基础。
或者是超像素算法将像素组合成感知有意义的原子区域( atomic regions)，其可以用于替换像素网格的刚性结构。它们捕获图像冗余，提供计算图像特征的方便原语( primitive )，并且大大降低了后续图像处理任务的复杂性。

SLIC 算法的基本思想是:

1. 首先将图像从 RGB 颜色空间转换到 CIE-Lab 颜色空间，并把每个像素的（L，a， b）颜色值和（x， y）坐标值组成一个 5 维的特征向量 V[L, a, b, x, y]，
2. 然后，根据给定的网格步长 \(S=\sqrt{N/k}\)，初始化聚类中心 $$C_k=[L_k, a_k, b_k, x_k, y_k]^T$$
3. 之后在每个聚类中心 Ck 的邻域（2Sx2S），计算邻域内各像素与该 Ck 点
   的相似性度量，从而对邻域内的像素点进行聚类，
4. 之后迭代更新聚类中心，直至满足收敛条件。
   
   

算法特点

1. 通过将搜索空间限制为与超像素大小成比例的区域，显着地减少了优化中的距离计算的数量。
   
2. 加权距离度量组合颜色和空间接近度，同时提供对超像素的尺寸和紧凑性的控制。
3. 默认情况下，算法的唯一参数是k，其含义是大小大致相等的超像素的个数。

距离测量

参考文献

https://blog.csdn.net/bailing910/article/details/79747689

什么是SSL证书

SSL是SecureSocketLayer的缩写，即安全套接层协议，SSL证书是一种数字证书，主要是给予网站HTTPS安全协议加密传输与信任的功能。SSL证书拥有数字加密与认证过程，加密协议可以保护网站。

高层的应用协议如HTTP、FTP、Telnet等能透明地建立于SSL协议之上。其在应用层协议通信之前就已经完成加密算法、通信密钥的协商以及服务器认证工作。在此之后应用层协议所传送的数据都会被加密，从而保证们在互联网上通信的安全。

个人网站需要证书吗？

先了解一下安装SSL证书有哪些作用吧。
　　
　　1.网站数据的加密：对网站的数据进行加密，达到能够保护数据不会被泄露的效果。
　　2.身份的验证： 安装SSL证书可以证实真实信息，防止流量被劫持、防止被中间人攻击等。
　　3.显示绿色小锁，消除不安全信息：在网址栏当中会展示绿色小锁，消除主流浏览器对该网址提示“不安全”标记。
　　4.利于收录：谷歌百度等主流搜索引擎会优先展示和收录https的网站，也就是安装SSL证书的网站。
　　5.绿色的地址栏：安装高级的SSL证书可在地址栏当中显示绿色企业名称，有利于企业品牌的宣传以及客户的信任。
　　
如果你的个人网站不需要信息加密、不需要身份验证、不需要用户的体验、也不需要优化，那么你也就没必要去购买安装SSL证书。

个人网站DV证书的授权

https://blog.csdn.net/bennny/article/details/82988260