怎么看网站谁做的,自适应网站如何做mip,网站左侧浮动代码,无锡做网络推广的公司系列文章目录
如何在前端项目中使用opencv.js | opencv.js入门如何使用tensorflow.js实现面部特征点检测tensorflow.js 如何从 public 路径加载人脸特征点检测模型tensorflow.js 如何使用opencv.js通过面部特征点估算脸部姿态并绘制示意图tensorflow.js 使用 opencv.js 将人脸…系列文章目录
如何在前端项目中使用opencv.js | opencv.js入门如何使用tensorflow.js实现面部特征点检测tensorflow.js 如何从 public 路径加载人脸特征点检测模型tensorflow.js 如何使用opencv.js通过面部特征点估算脸部姿态并绘制示意图tensorflow.js 使用 opencv.js 将人脸特征点网格绘制与姿态估计线绘制结合起来以获得更高的帧数结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode 项目地址(github)https://github.com/couchette/simple-react-face-fandmark-detection 项目地址(gitcode)https://gitcode.com/qq_41456316/simple-react-face-fandmark-detection 文章目录 系列文章目录前言一、UI美化1. 圆角阴影 二、将 github 项目导入 gitcode三、部署项目到InsCode四、分享项目到CSDN博客总结 前言
本篇文章将带您踏上一段令人兴奋的技术之旅探索如何巧妙地结合了三个强大的技术工具——TensorFlow.js、OpenCV.js以及Ant Design打造出令人眼前一亮的人脸动捕组件。您将在本文中深入了解如何利用这些工具不仅令界面美观动人同时也保持了出色的性能表现。更令人振奋的是我们将分享如何将这一成果顺利发布到InsCode平台让更多的人能够轻松享受到这一创新。准备好跟随我们的步伐探索如何在技术与美学的交汇处创造出引人注目的作品 本文将是该系列文章的结尾将对整个ReactUI组件进行简单的美化并将项目项目发布到GitCode和部署到InsCode中感谢大家的陪伴。 一、UI美化
1. 圆角阴影
对canvas 元素设置圆角borderRadius: 5px使其看起来更加柔和 对canvas 元素设置阴影boxShadow: 2px 2px 5px #888888使画面看起来更加具有层次感 使用 Ant Design 的 Selector 和 Button 组件这些组件的默认样式都很好看 详细代码见 index.js相关代码如下
canvasidfaceMeshstyle{{position: absolute,top: 0,bottom: 0,left: 0,right: 0,borderRadius: 5px,boxShadow: 2px 2px 5px #888888,}}ref{canvasRef}width{inputResolution.width}height{inputResolution.height}/二、将 github 项目导入 gitcode
登录 gitcode 主页点击创建按钮点击导入项目(URL) 下面的示例项目的git网站如下 https://github.com/couchette/simple-react-face-fandmark-detection.git 输入需要导入的github项目的 git 网址设置为开源项目在InsCode部署项目需要设置为开源项目点击导入项目按钮 此时可以在 gitcode 仓库看到导入的项目点击右上角的Clone按钮 选择HTTPS点击复制项目地址按钮请保存复制的项目地址部署项目到InsCode要用
三、部署项目到InsCode
部署的示例项目地址如下: https://gitcode.com/qq_41456316/simple-react-face-fandmark-detection.git 进入InsCode主页 点击即刻开始 点击从Git导入点击其他将刚才复制的项目地址粘贴到仓库地址中将后缀的.git删除选择语言环境为NodeJS选择V18版本最后点击导入项目 稍等一会。 创建完成后将自动进入InsCode IDE页面修改.inscode文件内容如下此时可以点击运行测试项目是否能够成功运行最后点击发布即可由于我的项目已经发布过了所有变成了更新未发布时按钮为发布。
四、分享项目到CSDN博客
进入博客编写页面点击运行代码按钮选择你要分析的项目,点击添加最终效果如下 总结
本文分享了结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode的经验希望对您有所帮助如果文章中存在任何问题、疏漏或者您对文章有任何建议请在评论区提出。
