尧图网页设计 
如何在浏览器中实现人体姿态搜索pose-search 用 3 个难题的解法把动作变成可检索的数据【免费下载链接】pose-searchx6ud.github.io/pose-search项目地址: https://gitcode.com/gh_mirrors/po/pose-searchpose-search 是一个完全运行在浏览器里的人体姿态搜索引擎它借助 MediaPipe Pose 从照片中提取 33 个人体关键点再通过几何算法在照片库里检索出姿态相似的结果。在这里你要找的不是某个关键词标签而是一个动作本身——双手举过头顶的跳跃单膝跪地的侧身都能变成可查询的条件。先从一个搜不到的痛点说起我们早就习惯了用文字搜图搜skating返回的是所有被贴了滑板标签的照片搜篮球运动员起跳上篮结果取决于运气因为没人会为一瞬间的腾空动作写标签。更麻烦的是标签是别人定义的而你脑子里的画面可能根本没有对应的词。pose-search 换了一个思路把姿态本身变成数据。既然姿态可以量化成坐标那就可以像比对指纹一样比对姿态搜索自然不再依赖文字。原料33 个关键点两套坐标系一切的前提是看懂照片里的人在做什么。项目用 MediaPipe Pose 完成这一步模型返回 33 个关键点左右眼、耳朵、肩膀、手肘、手腕、髋、膝、踝等而且同时给出两套坐标归一化坐标normalizedLandmarks以图像为基准适合画在屏幕上看世界坐标worldLandmarks以人体中心为原点的三维坐标保留了真实的空间关系是姿态匹配的主力。检测接口精简成一个 Promise几行代码即可复用export function detectPose(image: HTMLVideoElement | HTMLImageElement | HTMLCanvasElement): PromiseDetectPoseResults { return new Promise(async function (resolve) { const pose await getInstance(); pose.reset(); onResultsCallback resolve; await pose.send({image}); }); }拿到 33 个点的两套坐标后真正的难题才刚刚开始。难题一照片是 2D 的姿态是 3D 的同一个右手高举的动作正面拍和侧面拍投到二维画面里是完全不同的两条线。如果直接用像素坐标比对那么视角一变同一个动作的相似度会瞬间归零。pose-search 的解法是局部空间local space转换不再用世界坐标直接比而是以躯干为参照建一个身体自己的坐标系把手臂、腿的方向向量投影到这个坐标系里。这样无论相机从哪个角度拍同一个动作得到的方向向量都基本一致。核心函数getNormalInLocalSpace用四元数把方向向量从世界空间旋进局部空间quatLookRotation(q, forward, up); quat.invert(q, q); return vec3.transformQuat([0, 0, 0], v, q);正因为这一层转换项目才敢给每个关节准备两个匹配器常规版MatchShoulder、MatchElbow……考虑相机视角CameraUnrelated 版MatchShoulderCameraUnrelated 等则彻底抛开相机角度只比身体内部的角度关系。这也是界面上那个相机相关/无关开关的真实含义。难题二人物朝向相反左右怎么分照片里的人可能背对镜头或者素材本身被镜像翻转——这时他的左手其实是你看到的右手。如果匹配器死板地只认左侧关键点一半照片会被误杀。处理方式是镜像双轨每个匹配器同时尝试左右两个方向把照片的左右关键点镜像后再比一遍。匹配成功后还会带上flip标记告诉前端这张照片需要用镜像后的坐标来展示。这样搜索左肩动作库里所有背对镜头的右肩照片也能被正确召回而不是漏掉。难题三几万张照片怎么做到秒回姿态检索意味着每次搜索都要把照片库全部扫一遍。如果逐张实时跑 MediaPipe 模型一次搜索要等上几分钟。pose-search 的选择是预计算 二进制存储在编辑器里每张照片先跑一次模型把 33 个关键点的归一化坐标、世界坐标和置信度一并写入landmarks.dat每张照片固定占用 33 × 7 个浮点数加载时一次性读成Float32Array按索引切片即可还原全程零解析开销搜索时纯内存遍历 排序取分数最高的前 100 张返回。打分逻辑也很直白把空间角度误差、视角误差转换成离完美越近越大的分数三项相乘多维度同时收敛。置信度低于阈值visibility 0.4的关键点直接判为不可用宁可漏判也不拿噪声凑数ret.sort((a, b) -a.score b.score); return ret.slice(0, MAX_NUM_OF_SEARCH_RESULTS);10 分钟跑起来从安装到导入自己的照片库体验完整流程只需四步git clone https://gitcode.com/gh_mirrors/po/pose-search npm install npm run dev # 浏览器打开 /#/editor编辑器是数据入口粘贴一个 Unsplash App Key输入关键词比如 skating项目会自动拉取一批图片、逐个跑模型生成骨骼数据再由你人工标记性别点击Add Record入库。标注完成后主搜索页就能用起来——选择身体部位Face、Chest、左右肩、左右肘、左右髋、左右膝等 12 个匹配器、过滤性别、切换相机相关模式结果按相似度排序即时呈现。它能用在哪儿边界又在哪里三个比较典型的落地场景素材库姿态检索摄影师把几万张动作照片导入按手臂上举的跳跃这类姿态条件筛图替代低效的标签体系动作对比与训练录入标准动作和学员动作用同一套匹配器算角度误差输出客观的差异量化结果姿态数据集构建编辑器本身就是一个标注流水线——拉图、自动检测、人工打标、二进制落盘可复用于自建数据集的批量生产。同时也要诚实交代它的边界目前针对单人物画面设计多人场景会失效检索质量上限取决于 MediaPipe 的检测精度与初始数据的标注质量图片来源默认依赖 Unsplash自建数据需要走一遍编辑器流程。这些都是架构取舍而非缺陷——换来的是零后端、纯浏览器的部署形态和毫秒级的检索体验。从搜图到搜动作pose-search 的价值是把姿态检索从论文里的算法降级成了一段可复现的 TypeScript 代码。它没有把姿态识别包装成黑盒而是把检测、几何变换、打分排序层层拆开让每个开发者都能看懂并改造其中一环。当搜索引擎不再靠文字理解世界而开始靠几何理解身体——这就是姿态数据化带来的那一点不同。clone 下来跑一次搜索你会亲眼看到动作变成结果列表的那一刻。【免费下载链接】pose-searchx6ud.github.io/pose-search项目地址: https://gitcode.com/gh_mirrors/po/pose-search创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何在浏览器中实现人体姿态搜索？pose-search 用 3 个难题的解法把“动作“变成可检索的数据
如何在浏览器中实现人体姿态搜索pose-search 用 3 个难题的解法把动作变成可检索的数据【免费下载链接】pose-searchx6ud.github.io/pose-search项目地址: https://gitcode.com/gh_mirrors/po/pose-searchpose-search 是一个完全运行在浏览器里的人体姿态搜索引擎它借助 MediaPipe Pose 从照片中提取 33 个人体关键点再通过几何算法在照片库里检索出姿态相似的结果。在这里你要找的不是某个关键词标签而是一个动作本身——双手举过头顶的跳跃单膝跪地的侧身都能变成可查询的条件。先从一个搜不到的痛点说起我们早就习惯了用文字搜图搜skating返回的是所有被贴了滑板标签的照片搜篮球运动员起跳上篮结果取决于运气因为没人会为一瞬间的腾空动作写标签。更麻烦的是标签是别人定义的而你脑子里的画面可能根本没有对应的词。pose-search 换了一个思路把姿态本身变成数据。既然姿态可以量化成坐标那就可以像比对指纹一样比对姿态搜索自然不再依赖文字。原料33 个关键点两套坐标系一切的前提是看懂照片里的人在做什么。项目用 MediaPipe Pose 完成这一步模型返回 33 个关键点左右眼、耳朵、肩膀、手肘、手腕、髋、膝、踝等而且同时给出两套坐标归一化坐标normalizedLandmarks以图像为基准适合画在屏幕上看世界坐标worldLandmarks以人体中心为原点的三维坐标保留了真实的空间关系是姿态匹配的主力。检测接口精简成一个 Promise几行代码即可复用export function detectPose(image: HTMLVideoElement | HTMLImageElement | HTMLCanvasElement): PromiseDetectPoseResults { return new Promise(async function (resolve) { const pose await getInstance(); pose.reset(); onResultsCallback resolve; await pose.send({image}); }); }拿到 33 个点的两套坐标后真正的难题才刚刚开始。难题一照片是 2D 的姿态是 3D 的同一个右手高举的动作正面拍和侧面拍投到二维画面里是完全不同的两条线。如果直接用像素坐标比对那么视角一变同一个动作的相似度会瞬间归零。pose-search 的解法是局部空间local space转换不再用世界坐标直接比而是以躯干为参照建一个身体自己的坐标系把手臂、腿的方向向量投影到这个坐标系里。这样无论相机从哪个角度拍同一个动作得到的方向向量都基本一致。核心函数getNormalInLocalSpace用四元数把方向向量从世界空间旋进局部空间quatLookRotation(q, forward, up); quat.invert(q, q); return vec3.transformQuat([0, 0, 0], v, q);正因为这一层转换项目才敢给每个关节准备两个匹配器常规版MatchShoulder、MatchElbow……考虑相机视角CameraUnrelated 版MatchShoulderCameraUnrelated 等则彻底抛开相机角度只比身体内部的角度关系。这也是界面上那个相机相关/无关开关的真实含义。难题二人物朝向相反左右怎么分照片里的人可能背对镜头或者素材本身被镜像翻转——这时他的左手其实是你看到的右手。如果匹配器死板地只认左侧关键点一半照片会被误杀。处理方式是镜像双轨每个匹配器同时尝试左右两个方向把照片的左右关键点镜像后再比一遍。匹配成功后还会带上flip标记告诉前端这张照片需要用镜像后的坐标来展示。这样搜索左肩动作库里所有背对镜头的右肩照片也能被正确召回而不是漏掉。难题三几万张照片怎么做到秒回姿态检索意味着每次搜索都要把照片库全部扫一遍。如果逐张实时跑 MediaPipe 模型一次搜索要等上几分钟。pose-search 的选择是预计算 二进制存储在编辑器里每张照片先跑一次模型把 33 个关键点的归一化坐标、世界坐标和置信度一并写入landmarks.dat每张照片固定占用 33 × 7 个浮点数加载时一次性读成Float32Array按索引切片即可还原全程零解析开销搜索时纯内存遍历 排序取分数最高的前 100 张返回。打分逻辑也很直白把空间角度误差、视角误差转换成离完美越近越大的分数三项相乘多维度同时收敛。置信度低于阈值visibility 0.4的关键点直接判为不可用宁可漏判也不拿噪声凑数ret.sort((a, b) -a.score b.score); return ret.slice(0, MAX_NUM_OF_SEARCH_RESULTS);10 分钟跑起来从安装到导入自己的照片库体验完整流程只需四步git clone https://gitcode.com/gh_mirrors/po/pose-search npm install npm run dev # 浏览器打开 /#/editor编辑器是数据入口粘贴一个 Unsplash App Key输入关键词比如 skating项目会自动拉取一批图片、逐个跑模型生成骨骼数据再由你人工标记性别点击Add Record入库。标注完成后主搜索页就能用起来——选择身体部位Face、Chest、左右肩、左右肘、左右髋、左右膝等 12 个匹配器、过滤性别、切换相机相关模式结果按相似度排序即时呈现。它能用在哪儿边界又在哪里三个比较典型的落地场景素材库姿态检索摄影师把几万张动作照片导入按手臂上举的跳跃这类姿态条件筛图替代低效的标签体系动作对比与训练录入标准动作和学员动作用同一套匹配器算角度误差输出客观的差异量化结果姿态数据集构建编辑器本身就是一个标注流水线——拉图、自动检测、人工打标、二进制落盘可复用于自建数据集的批量生产。同时也要诚实交代它的边界目前针对单人物画面设计多人场景会失效检索质量上限取决于 MediaPipe 的检测精度与初始数据的标注质量图片来源默认依赖 Unsplash自建数据需要走一遍编辑器流程。这些都是架构取舍而非缺陷——换来的是零后端、纯浏览器的部署形态和毫秒级的检索体验。从搜图到搜动作pose-search 的价值是把姿态检索从论文里的算法降级成了一段可复现的 TypeScript 代码。它没有把姿态识别包装成黑盒而是把检测、几何变换、打分排序层层拆开让每个开发者都能看懂并改造其中一环。当搜索引擎不再靠文字理解世界而开始靠几何理解身体——这就是姿态数据化带来的那一点不同。clone 下来跑一次搜索你会亲眼看到动作变成结果列表的那一刻。【免费下载链接】pose-searchx6ud.github.io/pose-search项目地址: https://gitcode.com/gh_mirrors/po/pose-search创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考