结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode

这篇具有很好参考价值的文章主要介绍了结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

系列文章目录

  1. 如何在前端项目中使用opencv.js | opencv.js入门
  2. 如何使用tensorflow.js实现面部特征点检测
  3. tensorflow.js 如何从 public 路径加载人脸特征点检测模型
  4. tensorflow.js 如何使用opencv.js通过面部特征点估算脸部姿态并绘制示意图
  5. tensorflow.js 使用 opencv.js 将人脸特征点网格绘制与姿态估计线绘制结合起来,以获得更高的帧数
  6. 结合 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


前言

本篇文章将带您踏上一段令人兴奋的技术之旅,探索如何巧妙地结合了三个强大的技术工具——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,相关代码如下:

<canvas
          id="faceMesh"
          style={{
            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}
        />

结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode,虚拟直播软件设计 | 论如何快乐自闭,tensorflow,javascript,opencv,inscode,gitcode,github

二、将 github 项目导入 gitcode

登录 gitcode 主页,点击创建按钮,点击导入项目(URL)
结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode,虚拟直播软件设计 | 论如何快乐自闭,tensorflow,javascript,opencv,inscode,gitcode,github
下面的示例项目的git网站如下

https://github.com/couchette/simple-react-face-fandmark-detection.git

输入需要导入的github项目的 git 网址,设置为开源项目(在InsCode部署项目需要设置为开源项目),点击导入项目按钮结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode,虚拟直播软件设计 | 论如何快乐自闭,tensorflow,javascript,opencv,inscode,gitcode,github
此时可以在 gitcode 仓库看到导入的项目,点击右上角的Clone按钮
结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode,虚拟直播软件设计 | 论如何快乐自闭,tensorflow,javascript,opencv,inscode,gitcode,github
选择HTTPS点击复制项目地址按钮,请保存复制的项目地址,部署项目到InsCode要用
结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode,虚拟直播软件设计 | 论如何快乐自闭,tensorflow,javascript,opencv,inscode,gitcode,github

三、部署项目到InsCode

部署的示例项目地址如下:

https://gitcode.com/qq_41456316/simple-react-face-fandmark-detection.git

进入InsCode主页
结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode,虚拟直播软件设计 | 论如何快乐自闭,tensorflow,javascript,opencv,inscode,gitcode,github
点击即刻开始
结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode,虚拟直播软件设计 | 论如何快乐自闭,tensorflow,javascript,opencv,inscode,gitcode,github
点击从Git导入,点击其他,将刚才复制的项目地址粘贴到仓库地址中(将后缀的.git删除),选择语言环境为NodeJS,选择V18版本,最后点击导入项目 稍等一会。

结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode,虚拟直播软件设计 | 论如何快乐自闭,tensorflow,javascript,opencv,inscode,gitcode,github
创建完成后将自动进入InsCode IDE页面,修改.inscode文件内容如下,此时可以点击运行测试项目是否能够成功运行,最后点击发布即可,由于我的项目已经发布过了,所有变成了更新,未发布时按钮为发布。
结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode,虚拟直播软件设计 | 论如何快乐自闭,tensorflow,javascript,opencv,inscode,gitcode,github

四、分享项目到CSDN博客

进入博客编写页面,点击运行代码按钮,选择你要分析的项目,点击添加,最终效果如下:

总结

本文分享了结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode的经验,希望对您有所帮助,如果文章中存在任何问题、疏漏,或者您对文章有任何建议,请在评论区提出。文章来源地址https://www.toymoban.com/news/detail-854498.html

到了这里,关于结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Ant Design入门

    目录 一:什么是Ant Design? 二:开始使用 三:布局 四:表格         Ant Design 是阿里蚂蚁金服团队基于 React 开发的 ui 组件,主要用于中后台系统的使用。         官网: https://ant.design/index-cn   设计语言: 随着商业化的趋势,越来越多的企业级产品对更好的用户体验有了

    2024年02月02日
    浏览(49)
  • Ant Design Pro项目中 提示:找不到模块“@ant-design/pro-components”或其相应的类型声明

    Ant Design Pro中在使用 StatisticCard 指标卡组件时候,按照官方的文档从“@ant-design/pro-components”中引入这个组件发现会报错 提示找不到模块“@ant-design/pro-components”或其相应的类型声明 也就是说 Ant Design Pro 脚手架创建的项目中,默认没有引入这个依赖包,于是去package.json中看了

    2024年02月11日
    浏览(72)
  • ant design vue 的getPopupContainer

    在 ant design vue 中,有几个组件是有 getPopupContainer 属性的,比如:下拉菜单 默认是渲染到body 上的,所以如果你想要对 下拉选择组件 的样式,做修改,如果 style 标签上开启了 scoped,肯定不会生效 所以,需要指定 getPopupContainer ,用法如下

    2024年02月08日
    浏览(45)
  • Ant Design Vue 修改表格头部样式

    在网上搜了好多修改表格头部样式的,最后自己摸索出来,分享给大家,最后附上完整代码。 首先用到的是 customHeaderRow 这个API,类型是一个函数 此图是 console.log(conlumn); 打印出来的 可以看到每一列都有一个className

    2024年02月11日
    浏览(44)
  • Ant Design Form.List基础用法

    项目中需要在新增可以多个如图 代码如下 其中add 方法可以添加参数,为添加的默认参数 注意: {…field} 一定要放在 name={[field.name,‘XXX’]} 的前面,否则就会出错 以上共勉

    2024年02月07日
    浏览(49)
  • ❤ Ant Design Vue 2.28的使用

    2024年02月11日
    浏览(40)
  • React安装ant design组件库,并使用

    ant design是一个很棒的组件库,官方地址:快速上手 - Ant Design 但是如何在React里面用起来,好像并不是很顺畅,没有像Vue里面那么友好,因为我踩过这个坑,虽然安装很简单,但是想要出样式,还是有点步骤的。 npm命令: yarn命令: pnpm命令: 千万不要简单的只看官方的文档

    2024年02月14日
    浏览(48)
  • 除了Element和Ant Design,它同样优秀!

    大家好,我是程序视点的小二哥! 今天分享一款来自国外的优秀的前端 UI 组件库: PrimeVue 目前最新版本,基于 Vue3 ,很有特色,值得研究学习和上手使用。 PrimeVue 是一套非常优秀的 Vue UI 组件库 ,组件丰富,定制性很强,官网 文档清晰 ,代码例子充足。 中文化 也做得很不错

    2024年02月16日
    浏览(41)
  • vue2安装ant-design UI报错 ERR! peer vue@“>=3.2.0“ from ant-design-vue@3.2.15

    npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: default@0.1.0 npm ERR! Found: vue@2.7.14 npm ERR!   vue@\\\"^2.6.10\\\" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vue@\\\"=3.2.0\\\" from ant-design-vue@3.2.15 npm ERR! node_modules/ant-design-vue npm ERR!   ant-design

    2024年02月01日
    浏览(56)
  • 关于 ant-design-vue resetFields 失效

    关于 ant-design-vue resetFields 失效 背景: 遇到这样的问题使用 ant-design-vue useForm 来制作表单的时候, resetFields()失效 场景: 编辑 -赋值 新增 -初始值(问题点:新增的时候他就不 初始化 ) 方案: 1、调用 resetFields() 传参 2、要么使用 reactive 明确定义初始值 解释: 首先我这里讲

    2024年01月17日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包