1. lanchain相关​

1. 安装​

1.1 环境准备​

• 我使用的是python 3.12

1.2 安装​

pip install -U langgraph "langchain[anthropic]"

1.3 简单使用​

from langgraph.prebuilt import create_react_agent

def get_weather(city: str) -> str:  
    """Get weather for a given city."""
    return f"It's always sunny in {city}!"

agent = create_react_agent(
    model="anthropic:claude-3-7-sonnet-latest",  
    tools=[get_weather],  
    prompt="You are a helpful assistant"  
)

# Run the agent
agent.invoke(
    {"messages": [{"role": "user", "content": "what is the weather in sf"}]}
)

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

生词​

国外项目常见缩写​

常见短语​

一、系统概述​

通过AI技术实现车辆登船记录的自动化、智能化管理，利用高精度车牌识别、实时状态监测和数据分析，提升船舶调度效率，降低人工成本。系统支持高可靠性、可扩展性和复杂环境适应性。

二、系统架构设计​

1. 硬件配置​

车牌识别摄像头：​

• 型号：预算足的话最好400万像素以上工业摄像头，配备夜间红外补光。
• 部署位置：船舱出入口，2-5米高度，俯拍车辆/平视车辆。
• 防护等级：IP67，适应码头潮湿、盐雾环境。
• 数量：每个泊位口部署四台摄像机，两台监控入场车辆，两台监控出场车辆

处理终端：​

• 工控机：8核，32G内存以上。
• 存储：512G以上磁盘空间。
• 系统：Windows/Linux均可。
• 数量：2台，一台主设备，另一台做备用机

通讯模块：​

• 连接方式：网线连接，基于TCP/IP协议，支持4G/5G备份链路。
• 带宽需求：≥10Mbps，确保数据实时传输。

设备控制箱：​

• 防护等级：IP66，内置温控系统，防潮、防尘。
• 集成设备：工控机、交换机及NVR（网络视频录像机）。
• 可选配置：配备UPS（≥30分钟续航），防止突然断电。

2. 软件架构​

车牌识别模块：​

• 技术栈：Python + OpenCV + PyTorch。
• AI模型：YOLOv11（目标检测）+ CRNN（字符识别）/PaddleOCR，具体可能在做的过程中比较效果。
• 功能：实时解析摄像头画面，提取车牌号，识别准确率目标>99%。

车辆登船记录、数据管理、报表生成模块：​

• 数据库：Postgres。
• 技术：Flask，Pandas + OpenPyXL。
• 功能：记录车辆进出时间、状态，生成历史记录，生成Excel/CSV格式报表，包含车牌号、登船/退出时间、状态等，支持异常高亮。

三、AI功能实现​

1. 技术方案​

模型选择：​

• 目标检测：YOLOv11，检测车牌区域，适合实时场景。
• 字符识别：CRNN + CTC Loss/PaddleOCR，处理车牌。
• 数据增强：旋转、模糊、亮度调整，提升模型鲁棒性。

训练与优化：​

• 数据集：乙方采集码头实际场景数据（≥1万张标注图像），包含污损、遮挡、夜间等场景。甲方等待摄像头安装完成，配合找一些车辆进出采集数据，乙方使用Labelling标注车牌位置及字符。
• 迁移学习：基于预训练模型微调，缩短训练周期。

智能校验：​

• 规则过滤：校验车牌格式（如长度、字符规则）。
• 异常处理：污损/遮挡车牌时，触发人工补录接口。

2. 功能实现​

基础功能：​

• 实时车牌识别：捕捉车辆进出画面，提取车牌号。
• 状态判定：基于车辆轨迹（通过多帧分析），判断登船/退出状态。
• 数据记录：存储车牌号、时间、状态，生成自动化报表。

扩展功能：​

• 智能预警：车辆停留超过一定时间或者车辆异常进出将会提出预警。
• 数据分析：统计登船高峰时段、异常频率，生成可视化图表（使用Matplotlib/Seaborn）。
• 多功能扩展：提供API查询车辆进出状态，供后续开发集成。

四、外部接口、内部模块交互​

1. 工控机和上位机接口定义​

• 协议类型：HTTP，POST请求

• 需要确保工控机和上位机在同一网段

• 登船json

  • 其中request 里面字段：

    • servicecode ： WebApi_Vehicle_Onboard_Offboard_Status, 表示车辆登船状态(定义里面说只能有10位长度，但是其他案例有很长的例子，所以我取这个，如果不合适，可以跟我方反馈，我放修改)
    • appid需要甲方提供（表示应用名称）
    • reqid由每次调用我方生成
    • 加密key:需要由甲方提供，由此生成signdata,  

  • param:

    • berthCode: 泊位code，需要和甲方保持一致，可以甲方提供给我们，

      • 目前我们设置为: "1A" - "16A"

    • timestamp: 时间戳

    • type: 登船，还是离船

      • "onboard"：登船
      • "offboard": 离船

    • status:

      • 1表示在正确的泊位
      • 0表示不在正确的泊位

    • time: 时间戳，UTC+8（北京时间）

{
  "request": {
    "appid": "AH856BDC-9F3E-487E-671D-C84DEA45EB24",
    "reqid": "B683DA45-D4C3-45DB-AB60-8DEEECB6DE10",
    "protover": "1.0",
    "servicever": "1.0",
    "requesttime": "20250606142930276",
    "reserve": "",
    "servicecode": "WebApi_Vehicle_Onboard_Offboard_Status",
    "signdata": "556EDDE1D05C3ABA63535D57A0A68F1D"
  },
  "param": {
    "berthCode": "1A",
    "vehicleNo": "粤B·CD456",
    "status": "1",
    "type": "onboard",
    "time": "20250606142930276"
	}
}

2. 双工控机主从切换模块​

• 主要架构

  • 双节点架构：NodeA + NodeB

  • 工作模式：

    • 主节点：执行核心业务

    • 备用节点：实时监控+热备数据

  • 切换方式：自动故障切换 + 手动强制切换

• 核心技术

  • 心跳检测：UDP广播 + 自定义协议（1s/次）

  • 故障判定：连续3次心跳丢失 + 硬件自检

• 技术栈

  • Python，ZeroMQ， Protobuf

五、工期安排​

预计总工期：50天

下定决心还是再学一遍CSS等前端知识

Day09

1. position定位​

• 将position设置为absolute,fixed
  • 可以随意设置宽高
  • 宽高默认由内容决定
  • 居中

1. CSS相关​

• "子绝父相"， "子绝父固"都在什么情况下使用，举一个例子
• 什么是标准流
  • position的什么属性会脱离标准流
• 居中问题
  • margin如何居中
  • text-align: center
  • 绝对定位元素如何水平，垂直居中

我们在做算法类项目的时候，通常需要在客户机器上部署，无论是windows还是centos，都需要装一些软件以及程序，下面分享我经常会装的内容，希望对你有帮助，可以提升速度。

1. windows​

• 传统行业的客户使用windows的比较多，因此这部分先说
• windows可能有登陆密码，找客户先要到，当然最好还是先暂时取消登陆密码，免得麻烦
• 先检查配置，GPU显存，内存大小，C盘容量，其他盘容量
  • GPU显存的大小以及内存大小决定了很多模型能不能用
  • C盘要预留一些空间，作为系统盘满了会导致很卡
• 防火墙关闭
  • 为了防止安装一些东西出幺蛾子，开始阶段还是关了吧
• 有些软件，还是先装了吧
  • Google Chrome浏览器（当然Edge也可以），反正IE太垃圾

1.1 远程控制软件​

需要这类软件的原因不言而喻，我们经常接的项目不像公司中正常坐班或者出差，可以接触物理机，

一般都是在远程，利用空余时间来做，通常就需要远程控制软件来远程操作。

1.1.1 向日葵​

• 官网地址
• 注意事项：
  • 第一次让客户给你设置一个永久登陆密码，否则开机重启后，密码会变
• 好处
  • 自带文件传输功能
  • 允许多端登陆
  • 不收费

1.1.2 window自带远程桌面​

• 这个我只用过一次，因为客户用的机器是windows server，只给我提供这个，我个人不太喜欢

1.1.3 TeamViewer​

• 我用的也很少，因为后来开始收费了（😂）

1.2 文件传输类​

我们经常遇到需要传文件，软件，代码去客户机器的场景，下面分享我常用的几个技巧

1.2.1 网站互传​

• 有很多网站，采用中转传输的方式，比如轻松传
• 好处
  • 非常方便，不用安装任何软件，能访问网络即可
• 坏处
  • 大文件还是有点耗时
  • 离线传送需要VIP了
  • 敏感文件最好不用通过这种方式（毕竟是先把文件传送到网站的服务器）
    • 当然也可以选择加密压缩后再传输

1.2.2 其他软件附带功能​

• 很多软件主业并不是做这个文件传输的，但是也慢慢被聪明的用户拿来做文件传输了
• 比如
  • 向日葵的文件传输
  • 百度云，夸克云等各种云盘

1.2.3 git, gitee​

• 是的，你没有看错，我说的就是你经常用的git
• 使用好git，很多时候还是很方便的
  • 你自己机器上代码修改后就直接提交，客户机器上一pull一下即可
• 坏处
  • 对大文件不太好
  • 客户机器上最好不要修改，不然容易冲突

1.3 python开发工具包​

• 既然做算法的，基本上很难饶过python了

下定决心还是再学一遍CSS等前端知识

Day08

1. border图形​

• border-right-color

• 旋转

  • transform: rotate(90deg);
  • transform-origin: center/25%; 旋转中心点

• https://css-tricks.com/the-shapes-of-css

2. Web网络字体​

• 之前通过font-family设置字体
  • 我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体
  • 这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的
  • 这就是所谓的web-safe字体
  • 并且这种默认可选的字体并不能进行一些定制化的需求

2.1 web fonts 的工作原理​

• 首先，需要通过一些渠道获取到希望使用的字体

  • 对于某些收费的字体，需要获取到对应的授权
  • 对于某些公司定制的字体，需要设计人员来设计
  • 对于某些免费的字体，需要获取到对应的字体文件

• 其次，在我们的CSS代码当中使用该字体（重要）

  • 具体看后面的操作流程

• 最后，在部署静态资源的时候，将HTML/CSS/JavaScript/Font一起部署在静态服务器中

• 用户的角度

  • 浏览一个网页的时候，因为代码中有引入字体文件，字体文件会被一起下载下来
  • 浏览器会根据使用的字体在下载的字体文件中查找，解析，使用对应的字体
  • 在浏览器中使用对应的字体显示内容

• 流媒体

  • 封装格式

  • 编码格式

3. Web字体图标​

4. CSS精灵图​

spritecow.com

5. cursor属性​

下定决心还是再学一遍CSS等前端知识

1. 结构伪类​

1.1 nth-child​

• 奇数
  • nth-child(2n+1)
• 偶数
  • nth-child(2n)
• 前几个
  • nth-child(-n+5)

1.2 nth-last-child​

• nth-last-child(1)
  • 倒数第一个
• nth-last-child(-n+2)
  • 最后2个

1.3 nth-of-type​

• 和nth-child类似，但是这个计数的时候只计算同种类的元素

1.4 nth-last-of-type​

1.5 其他​

• :first-child
• :last-child
• :first-of-type
• :last-of-type
• :only-child
• :only-of-type
• :root
• :empty
  • 里面完全空白的元素

1.6 否定伪类​

• :not(), 格式是:not(x)
  • x是简单选择器

下定决心还是再学一遍CSS等前端知识

1. 列表元素​

1.1 列表的实现方式​

• 方案一：使用div
• 方案二：使用列表元素，
• 事实上现在很多网站对于列表元素没有很强烈的偏好，更加不拘一格，按照自己的风格来布局
  • 原因是列表元素默认的CSS样式，让他用起来不是很方便
  • 比如列表元素往往有很多的限制，ul/ol中智能存放li，li再存放其他元素，默认样式等
  • 虽然我们可以通过重置来解决，但是我们更喜欢自由的div
• HTML提供了3组常用的展示列表的元素
  • 有序列表：ol, li
  • 无序列表：ul, li
  • 定义列表：dl, dt, dd

2. 表格元素​

• 在网页中，对于某些内容的展示使用表格元素更为合适和方便

• 常见元素

  • table
  • tr
  • td
  • 后增加的元素
    • thead
      • td->th
    • tbody
    • tfoot
    • caption

• 其他已经不推荐用了

  • table元素应该使用CSS制定样式
  • 设置margin-left, margin-right为auto，来实现类似于align属性的效果

• 案例

  • border-collapse
    • collapse折叠

• 单元格合并

  • 跨列合并：
    • colspan
    • 在最左边的单元格使用，并省略掉合并的td
  • 跨行合并
    • rowspan
    • 在最上面的单元格使用，并省略掉合并的td

• 案例：

  • 快捷写法：tr*12>td{数学}*6
  • 技巧
    • table tr:nth-child(-n + 2){} :n的取值，0和整数

3. 表单元素​

• 和用户交互的重要方式之一
• 常见的表单元素
  • form
    • 表单，一般情况下，其他表单相关的元素都是他的后代
  • input
    • 单行文本输入框，单选框，复选框，按钮
  • textarea
    • 多行文本框
  • select，option
    • 下拉选择框
  • button
    • 按钮
  • label
    • 表单元素的标题

3.1 input​

• input
  • 是一个行内替换元素
  • type
    • text
    • password
    • ratio
    • checkbox
    • button
    • reset
    • submit
    • file
    • readonly
    • disabled
    • checked
      • 默认选中，只有当type为ratio或checkbox的时候可以用
    • autofocus
    • name
    • value
    • time
    • date

3.1.1 布尔属性（boolean attributes)​

• 常见的有
  • disabled, checked, readonly, multiple, autofocus, selected
• 布尔属性可以没有属性值，写上属性名就代表使用这个属性

3.1.2 表单按钮​

• 按钮
  • button
  • reset
  • Submit

3.1.3 input和label的关系​

• label可以展示会input的标题
• label可以跟某个input绑定，点击某个label就可以激活对应的input变成选中

<label for="username">
    用户：
</label>
<input id="username" type="text"/>

<label for="username">
    用户：
    <input id="username" type="text"/>
</label>

3.1.4 ratio​

• 在类型为radio的input中，如果name一样，那么两个radio就会互斥

<label for="male">
    <input id="male" type="radio" name="sex" value="male">男
</label>

<label for="female">
    <input id="female" type="radio" name="sex" value="female">女
</label>

3.1.5 checkbox​

<label for="basketball">
    <input id="basketball" type="checkbox" name="hobby" value="basketball">篮球
</label>

<label for="football">
    <input id="football" type="checkbox" name="hobby" value="football">足球
</label>

3.2 form常见的属性​

4. Emmet语法​

4.1 认识Emmet语法​

• 前身为（Zen Coding) 是一个能大幅度提高前端开发效率的一个工具

  • vscode内置了Emmet语法，在后缀为.html/.css中输入缩写后按tab/Enter键即可自动生成相应的代码

• 举例

  • ! == html:5

• >（子代）和+兄弟

4.2 HTML Emmet​

4.3 CSS Emmet​

下定决心还是再学一遍CSS等前端知识

1. 盒子模型-margin​

1.1 margin 基本使用​

换行符会造成两个元素之间有间距

暂时可以通过去除（后面介绍通过浮动，flex布局去除）

body {
    font-size: 0; 
}

依次尝试：

• margin-top
• margin-bottom
• margin-right
• margin-left
• margin 全写，以及缩写属性

1.2. padding 和 margin对比​

• 大box包含小box，如果设置大box的padding，会让大box撑开
  • box-sizing: boder-box;
• 设置小box的margin
  • 好处：不用设置boder-box，
  • 坏处： 但是对于margin-top会让大box也往下跑
    • 因为做了一个传递，把margin传递给了父元素
    • 解决办法，在父元素设置: overflow: auto;,不是最好的方式，后面讲
• 补充
  • margin用来设置元素和元素之间的距离（一般是兄弟元素）
  • padding

1.3. margin上下传递问题​

• 左右不会传递

• margin-top传递

  • 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素

• margin-bottom传递

  • 如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素

• 如何防止出现传递问题？

  • 给父元素设置padding-top ，padding-bottom
  • 给父元素设置border
  • 触发BFC（Block Formatting Context）(块级格式上下文)：设置overflow为auto

• 建议：

  • margin一般用来设置兄弟元素之间的间距
  • padding一般用来设置父子元素之间的间距

1.4. 上下margin的折叠​

• 垂直方向上相邻2个margin(margin-top, margin-bottom)有可能合并为一个margin，这种现象叫做collapse（折叠）

• 水平方向上的margin(margin-left, margin-right)永远不会折叠

• 折叠后最终值的计算规则

  • 两个值比较，取较大的值

• 如何防止margin折叠

  • 只设置其中一个元素的margin

• 兄弟块级元素之间margin的折叠

• 父子块级元素之间margin的折叠

1.5. 块级元素的水平居中-margin-auto​

• 浏览器默认会给body设置margin: 8px
• 块级元素 block box
  • block box width = width + padding + border + margin
  • 但是默认margin-left是0
  • margin-right也是0
  • 但是浏览器优先展示width，然后再把剩余的空间设给right
• 如果希望居中，则把margin-left和margin-right都设置为auto
• 点评
  • 这种方式不太好，用flex布局则是更好
  • 比如float浮动也不应该用来做布局

2.盒子模型-外轮廓-outline​

• outline表示元素的外轮廓
  • 不占用空间
  • 默认显示在border的外面
• outline相关属性
  • outline-width
  • outline-style
  • outline-color
  • Outline: outline-width, outline-style, outline-color

3.盒子模型-阴影-box-shadow​

• box-shadow属性可以设置一个或者多个阴影

  • 每个阴影用shadow表示
  • 多个阴影之间用逗号隔开，从前到后叠加

• 常见格式

  • none | <shadow>#
  • <shadow> = inset? && <length>{2, 4} && <color>?
  • 第一个length: offset-x,水平方向的偏移，正数往向右
  • 第二个length: offset-y,水平方向的偏移，正数往向下
  • 第3个length：blur-radius, 模糊半径
  • 第4个length：spread-radius, 延伸半径
  • color: 阴影的颜色，如果没有设置，就跟随color属性的颜色
  • inset: 外框阴影变成内框阴影

• 坐标轴

• blur：阴影的模糊度

• 在线网站

  • https://html-css-js.com/css/generator/box-shadow/

4.盒子模型-文字阴影-text-shadow​

• 类似于box-shadow，用于给文字添加阴影
• 相当于box-shadow，但是没有spread-radius的值
• 没有向内
• https://html-css-js.com/css/generator/text-shadow/

5. 行内非替换元素的注意事项​

• span/a/strong/i
  • width,height不生效
  • padding, border, margin，上下可以撑大，但是不占空间

6. 盒子模型-盒子尺寸计算-box-sizing​

• 背景色有没有设置到border下面（有设置）
• 前景色会在border没有设置颜色的情况下，显示出来color颜色

.box {
    width: 100px;
    height: 100px;
    background-color: #f00;
    color: orange;
    padding: 30px;
    border: 10px solid;
}

• box-sizing用来设置盒子模型中宽高的行为
• content-box
  • padding, border都布置在width，height外边
• border-box
  • padding, border都布置在width，height里面

7. 案例​

• 灰色背景：#f5f5f5

• 单行显示省略号

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;