Zephyr_Blog: June 2023

How to do yolov5 annotation

1. annotation tool:

https://github.com/wkentaro/labelme

2. convert the result from above tool to yolo format:

https://github.com/rooneysh/Labelme2YOLO

Cloud service -- CDN

1. CDN setting:

加速域名：指用CDN加速的那个域名

CNAME：为CDN的域名，将加速域名映射到CDN域名

源站：为CDN从哪个源取资源

* DNS:

CNAME: 把域名解析到另一个域名

A记录: 把域名解析到IP地址

Cloud service -- Aliyun OSS

1. issue:

Cross-Origin Request Blocked:

The Same Origin Policy disallows reading the remote resource

solution:

跨域设置：用于解决CROSS问题

1）来源：*

运行所有的来源来访问OSS数据

2）暴露Headers：ETag

当用CompleteMultipartUploadCommand来上传大文件的时候，

会将大文件分成好几个小part上传，每一个小part上传后会返回一个ETag来标识，

如果这里不暴露ETag，则代码里拿不到返回的ETag

check hardisk storage in Ubuntu

1. df -h

2. du -h --max-depth=1 | sort -hr

3. du -sh: the size of current path

QT Issue

Issue:

qt.qpa.plugin: Could not load the Qt platform plugin "xcb" in "/home/yunyi/anaconda3/envs/label-studio/lib/python3.11/site-packages/cv2/qt/plugins" even though it was found.

solution:

pip uninstall opencv-python

pip install opencv-python-headless

Zephyr - Study: JavaScript (1)

1. JavaScript

JavaScript 包含三个部分：ECMAScript / DOM / BOM

ECMAScript：js的标准

DOM：文档对象模型

BOM：浏览器对象模型

JS 代码写的位置：

1. 写在script标签中（script标签放在body的最后）

2. 写在属性中，如 href属性标签中 / onclick属性标签中（不推荐过于耦合）

3. 写在外部文件，然后用script标签引用（推荐） <script src="index.js"></script>

alert: 弹出一个警告框

document.write(): 向body中输出内容

console.log(): 向控制台输出内容

2. 语法

1. 注释： /* 多行注释

// 单行注释

2. JS 严格区分大小写

3. 每一句以；结尾

4. 用 var 声明变量 var a;

5. 用typeof 检查数据类型 typeof a;

6. typeof Null -> object

7. 数据类型的转换：

转string

1）b = a.toString() 转换结果为返回值 a不会改变

2）b = String(a)

区别：1）不能转 null 和 undefined 2）可以转

转number

3）使用 Number()

4) 针对字符串用 parseInt() / parseFloat()

讲有效的整数部分转化为数字

从左到右取出数字

8. object 对象数据类型

var obj = new Object();

9. JS 的变量都是保存在栈内存中的，

基本数据类型的值直接在栈内存中保存

值与值之间独立存在，不互相影响

对象是保存在堆内存

栈内存里放内存地址

如果两个变量指向同一个对象，修改对象，两个变量的都会修改

比较基本数据类型，比的是值

比较引用数据类型，比的是地址

10. 创建object对象可以直接用 {}

var obj = {属性名:值，属性名:值...}；

11. 函数

function 函数名(形参) {

}

12. for (var n in obj) {

console.log(n); // n是obj的属性名

console.log(obj[n]); // []可以传变量，.n 不可以

}

13. 全局作用域中有一个全局对象 window

代表浏览器的窗口

当在全局作用域中创建变量的时候，都会作为window对象的属性保存

14. var 创建的变量会被提前声明

function 函数名 () {} 这种方法创建的函数，会在所有代码执行前就被创建

15. 在调用函数的时候，都会向函数内部传递一个隐含的参数 this

this 指向一个对象（上下文对象）

根据调用方式不同，this 指向不同的对象

1）以函数形式：指向window

2）以方法形式：指向调用方法的对象

16. 构造函数

function Person(){

this.name = "a";

this.age = 16;

}

var p1 = new Person();

* 构造函数其实就是函数，但是与new搭配用的时候可以用来创建对象

习惯上首字母大写

* 构造函数执行过程：

1）立刻创建一个新的对象

2）将新建的对象设置为函数中的this

3）逐行执行函数中的代码

4）将新建的对象作为返回值返回

17. 原型 prototype

每创建一个函数，解析器就会向函数中添加一个属性 prototype

这个属性是一个对象

如果函数作为普通函数调用prototype没有任何作用

当函数以构造函数调用的时候，他所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象；可以通过__proto__来访问该属性

原型对象就相当于一个公共区域，所有同一类的实例都可以访问到这个原型对象

所以！！我们可以将对象中共有的内容，统一设置在原型对象中

当我们访问对象的一个属性或方法时，他会先在对象自身中寻找，如果有则直接使用，如果没有，就去原型对象中寻找

好处：1）在创建对象的时候不会新建一个对象就新建一个方法；2）也不会污染全局命名空间（因为解决 1 的另一个方法就是建一个全局函数）

18. 垃圾回收 GC

什么是垃圾：没有变量或属性对其引用的对象

在JS中有自动的垃圾回收机制，不用手动操作

Zephyr - Study: Nextjs (1)

1. Nextjs:

Nextjs is the React("fullstack") Framework for production

React 注重在搭建用户的交互界面，而 Nextjs 是搭建在 React 之上的框架

React: "library" / Nextjs: "framework"

2. Features:

* server-side rendering

服务端渲染， SSR (Server-side Rendering) ，顾名思义，就是在浏览器发起页面请求后由服务端完成页面的 HTML 结构拼接，返回给浏览器解析后能直接构建出有内容的页面。

客户端渲染，CSR（Client Side Rendering），通俗的讲就是由客户端完成页面的渲染。其大致渲染流程是这样：在浏览器请求页面时，服务端先返回一个无具体内容的 HTML，浏览器还需要再加载并执行 JS，动态地将内容和数据渲染到页面中，才能完成页面具体内容的显示。

简而言之，SSR强在首屏渲染。而CSR强在用户和页面多交互的场景

* file-based routing

router: 仅根据监视url的变化，来呈现不同的网页，而没有向服务端发出新的请求

直接用文件目录来呈现router

* fullstack

可以直接访问数据库

3. install

npx create-next-apps

4. file-based routing

* index.js: 这个是特殊的，不会把index作为路由名

* dynamic path:

* import { useRouter } from 'next/router'

useRouter这个库用来拿动态路由的内容

const router = useRouter()

router.query : 就是url的编码

* import { Link } from 'next/link'

link 用于跳转到另一个路由

点击就会跳转到 localhost:3000/clients/jack 而且用Link的好处是不会再发一次http请求

* 404 page:

创建404.js

5. Project1:

Zephyr - Study: Prisma (1)

1. What is Prisma:

Prisma is an open source next-generation ORM (Object Relational Mapping).

It consists of the following parts:

Prisma Client: Auto-generated and type-safe query builder for Node.js & TypeScript (ORM)
Prisma Migrate: Migration system 管理数据库结构
Prisma Studio: GUI to view and edit data in your database.

Prisma就是数据层的抽象，用简单的方式管理数据库。

2. schema.prisma:

1. datasource:

决定这个prisma的项目用的是什么数据库

2. generator:

和用什么语言开发有关

3. model:

构建数据模型的关键字

3. Migrate指令：

1. npx prisma migrate dev --name init

4. Prisma Studio 指令：

npx prisma studio

5. Prisma client 指令：

findMany()

create()

update()

* github: https://github.com/zephyrzhu1998/prisma_test

Some Git commands

How to push my code to github?

0. git init (if didn't create git)

1. git add .

2. git commit -m "some comment"

3. git remote add origin "github repo ip address" (把repo加到 origin 这个标签上)

git branch -M main (-M 是move 重命名把当前branch改为main 不一定要有)

git push -u origin main (把本地的main分支上传到origin对应的ip的main分支)

* git push 使用：

git push <远程主机名> <本地分支名>:<远程分支名>

(不写默认是同一个分支)

(git pull 是 <远程分支名>:<本地分支名>，即 <源>:<目的地>)

* git merge 使用：

git merge <分支名> 就是把 <分支名> merge 到当前分支

* git branch 使用：

** 查看所有的branch ： git branch -a

** 复制branch ： git branch -c <branch name>

** 删除branch ： git branch -d <branch name>

** 创建branch ： git checkout -b <branch name>

* error: remote origin already exists.

1. git remote -v: 查看现在连接的哪个repo

2. git remote rm origin: 删除原来的origin

3. git remote add origin "github repo ip address"

* 如果想回溯到某一个版本：

方法1: git reset --hard [commit id]

方法1 是退回到指定版本，并丢弃后面的提交

方法2: git checkout [commit id]

方法2 是迁出一个新分支

连接github：

ssh-keygen -t rsa -b 4096 -C "zephyrzhu1998@gmail.com"

cat .ssh/id_rsa.pub

然后将ssh公钥添加到Github上

测试能不能连接上：ssh -T git@github.com

git config --global user.email "zephyrzhu1998@gmail.com" git config --global user.name "zephyrzhu1998"

记住如果用ssh连接github gitclone的时候用ssh 而不是https

当我要把我的分支合并到main分支上并提交：

1. 确认本地仓库最新：

git fetch origin

git checkout main

git pull origin main # 更新本地 main 分支到最新

git checkout your-branch-name

git pull origin your-branch-name # 更新本地工作分支到最新

2. 在本地 merge main 到自己的分支：

git merge main

3. 如果有conflicts：

解决conflict，然后

git add .

git commit -m ""

4. submit pull request in github

Zephyr_Blog

Translate