什么是 AgentAgent 翻译过来一般叫做智能体。
如果说普通大模型聊天是「你问一句, 它答一句」, 那么 Agent 更像是「你给它一个目标, 它自己拆解任务、调用工具、观察结果, 最后尽量完成这个目标」。
一个简单的理解:
Agent = 大模型 + 目标 + 上下文 + 工具 + 执行循环
比如我们对普通聊天模型说:
帮我解释一下 Vue 的响应式原理
它只需要根据已有知识回答。
但如果我们对一个代码 Agent 说:
帮我修复这个项目里的登录 bug, 并跑一下测试
它可能会做这些事情:
读取项目目录
搜索登录相关代码
找到可能出问题的文件
修改代码
运行测试
根据报错继续调整
总结改了什么
这就是 Agent 和普通问答最大的区别: Agent 不只是回答, 还会围绕目标采取行动。
Agent 和 Chatbot 的区别ChatbotChatbot 更偏向对话。
用户输入问题, 模型根据上下文生成回答。它可以很聪明, 但大多数时候不会真正操作外部世界。
例如:
解释一个概念
总结一段文字
帮你写一段代码
帮你翻译内容
AgentAgent 更 ...
背景word和wps将桌面客户端中的富文本编辑器做到了极致, 但他们的设计初衷就是做一款单机的文件处理软件, 对于多人协作等需求的支持并不能较好的支持
对于一些简单的场景, 我们也不需要word所提供的全部功能, 而是需要支持更多互联网数据格式, 存储本分更加方便, 能供提供多人协同编辑功能的轻量级富文本编辑器
基于浏览器的富文本编辑器就是在这样的设计思路下产生的，其中最典型的代表产品有 Google Docs
这些基于浏览器的富文本编辑器都有以下特点：
利用 Web 技术开发，需要在浏览器环境中使用；
功能相对 Word 更加简单，只保留了最常用的富文本编辑功能；
支持图片、附件、视频、音频、地图等多种互联网资源；
可以将文档备份在网盘中，实现多端同步；
文档可以分享查看，可以进行多人实时协同编辑。 当然基于浏览器的富文本编辑器，也是经过了几轮的技术迭代和创新，才到了今天这种百花齐放的局面。
基于浏览器的富文本编辑器的四要素在现代的浏览器框架下，利用 Web 技术开发一款富文本编辑器，一般采用经典 MVC 模型，根据数据模型渲染视图，视图操作通过控制器修改数据模型。具体要解决以下 ...
浏览器的进程模型进程: 程序运行需要 自己专属的内存空间, 可以将进程简单理解为这块内存空间每个应用至少有一个进程, 进程之间相互独立
线程 : 一个进程至少有一个线程, 进程开启后会自动创建一个线程来运行代码, 该线程称之为主线程
浏览器的进程浏览器是一个多进程多线程的应用程序
最主要的进程
浏览器进程主要负责界面显示, 用户交互, 子进程管理 等. 浏览器内部会启动多个线程处理不同的任务
网络进程负责加载网络资源. 网络进程内部会启动多个线程来处理不同的网络任务
渲染进程渲染进程启动后, 会开启一个渲染主线程, 主线程负责执行 HTML, CSS, JS代码默认情况下, 浏览器会为每一个标签页开启一个新的渲染进程, 以保证不同的标签页之间不相互影响
渲染进程如何工作处理的任务:解析HTML解析CSS计算样式布局处理图层每秒把页面画60次执行全局JS代码执行事件处理函数执行计时器的回调函数
渲染进程调度任务的方法 : 排队
![[599895fb1203c3269c90656ae7d82784_MD5.jpg]]
事件循环
1.在最开始的时候，渲染主线程会进入一个无限循环
2.每 ...
Lucky
未读一、 背景页面截图功能在前端开发中，特别是营销场景相关的需求中, 是比较常见的。比如截屏分享，相对于普通的链接分享，截屏分享具有更丰富的展示、更多的信息承载等优势。最近在需求开发中遇到了相关的功能，所以调研了相关的实现和原理。
二、相关技术前端要实现页面截图的功能，现在比较常见的方式是使用开源的截图npm库，一般使用比较多的npm库有以下两个：
dom-to-image: github.com/tsayen/dom-…
html2canvas: github.com/niklasvh/ht…
以上两种常见的npm库，对应着两种常见的实现原理。实现前端截图，一般是使用图形API重新绘制页面生成图片，基本就是SVG（dom-to-image）和Canvas（html2canvas）两种实现方案，两种方案目标相同，即把DOM转为图片，下面我们来分别看看这两类方案。
三、 dom-to-imagedom-to-image库主要使用的是SVG实现方式，简单来说就是先把DOM转换为SVG然后再把SVG转换为图片。
（一）使用方式首先，我们先来简单了解一下 ...
简介传送门
SVG 是 Scalable Vector Graphics 的缩写，意为可缩放矢量图形。于 2003年1月14日 SVG 1.1 被Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达共同确立成为W3C推荐标准。
概念那么SVG究竟是什么呢？
SVG是 Scalable Vector Graphics 的缩写 意为可缩放矢量图形
SVG是一个基于文本的开放网络标准，用来定义用于网络的矢量图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失，因此能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接
SVG 使用 XML 格式定义图形
SVG是万维网联盟的标准与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
优势相对于其他格式的图像，SVG的优势有很多：
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG图像中的文本是可选的，同时也是可搜索的，且可以与 JavaScript 技术一起运行
SVG可在图像质量不下降的情况下被放大和缩小
SVG ...
min截图, 利用canva在浏览器内部实现的截图
获取图片并上传思路:初始化: 监听input获取图片的点击事件 -> 初始化挂载监听事件操作 从文件夹获取本地图片 -> 触发监听事件 -> 获取本地上床文件的 File/Blob 对象(FIleReader) -> 通过readAsDataURL 读取成 base64 -> 在图片加载的时候进行复制操作 -> 画图
代码
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" con ...
渲染引擎原因
管理图元：使用渲染引擎能够更轻松的绘制并管理图形元素。
提供完善的动画与事件机制：原生语法绘制动画相对比较麻烦。
性能优化：渲染引擎基于底层渲染器的特性进行了大量优化工作，如脏矩阵渲染、分层渲染等，能够取得更好的渲染性能。使得开发者能够专注于视图的构建。
多个渲染器之间任意切换：如果有同时在这两种渲染器中进行绘制的需求，需要针对不同的渲染器进行单独开发，提高工作量的同时也难以保证其一致性。使用渲染引擎绘制时只需要指定所需的渲染器即可完成切换。
功能设计绘制基本图形 : 支持 rect、circle、line、path、text、ring 这几种基本图形的绘制。
进行坐标系变换: 支持 translate，scale，rotate 这三种变换，同时可以使用类似 Canvas2D 的 save 和 restore 去管理坐标系变换的状态。
测试相关本项目采用vitest单元测试, 具体操作可参考官网快速起步 | 指南 | Vitest
同时我们在写代码的过程中不会完全遵循 airbnb-base 的规范，所以需要修改 .eslintrc.js 如下，关闭一些规则的校验。
1 ...
min截图, 利用canva在浏览器内部实现的截图
获取图片并上传思路:初始化: 监听input获取图片的点击事件 -> 初始化挂载监听事件操作 从文件夹获取本地图片 -> 触发监听事件 -> 获取本地上床文件的 File/Blob 对象(FIleReader) -> 通过readAsDataURL 读取成 base64 -> 在图片加载的时候进行复制操作 -> 画图
代码
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" con ...
ProvidersProviders 是 Nest 的一个基本概念。许多基本的 Nest 类可能被视为 provider - service, repository, factory, helper 等等。 他们都可以通过 constructor 注入依赖关系。 这意味着对象可以彼此创建各种关系，并且“连接”对象实例的功能在很大程度上可以委托给 Nest运行时系统。 Provider 只是一个用 @Injectable() 装饰器注释的类。
1.基本用法module 引入 service 在 providers 注入
![[83a5e31c147e948fb66375779a62a2d2_MD5.png]]
在Controller 就可以使用注入好的service 了
![[e52244a25ef5b4ce4bbc5a139984879b_MD5.png]]
2.service 第二种用法(自定义名称)第一种用法就是一个语法糖
其实他的全称是这样的
123456789101112import { Module } from '@nestjs/com ...
关于 Next 中间件Nest 中间件中间件是处于请求和响应周期中间的函数，类似 express 中间件，可以访问请求对象（req）、响应对象（res）、和应用程序的下一个中间件函数。中间件的主要任务是可以执行以下操作：
执行任何代码。
修改请求和响应对象。
结束请求-响应周期。
调用堆栈中的下一个中间件函数。
如果当前中间件没有结束请求-响应周期，它必须调用 next() 方法将控制权传递给下一个中间件，否则请求将被挂起。
Nest 中间件应用场景：
请求日志记录：记录每个进入应用的请求的详细信息，如请求路径、方法、来源IP等，便于调试和监控。
身份验证和授权：在请求继续处理之前验证用户的身份，检查用户是否有权限访问特定的路由或资源。
请求数据处理：对请求中的数据进行预处理，如解析、格式化、校验等。
设置响应头：为即将发送的响应设置一些通用的HTTP头，如跨域资源共享（CORS）头、安全相关的头等。
性能监控：监控请求处理的时间，以便分析和优化性能。
缓存：实现缓存逻辑，减少对后端服务或数据库的请求，提高应用性能。
限流：控制请求的频率，防止服务被过度使用或遭受拒绝服务攻击（D ...
