<!DOCTYPE html>

<html>

  <head>

    <title>Parcel Sandbox</title>

    <meta charset="UTF-8" />

    <!-- Load TensorFlow.js -->

    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.2"></script>

    <!-- Load BodyPix -->

    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0"></script>

  </head>

  <body>

    <img

      id="image"

      src="data:image/image.jpg"

    />

    <canvas id="canvas"/>

    <script>

      const img = document.getElementById("image");

      function loadAndPredict() {

        bodyPix.load()

          .then((net)=> net.segmentPersonParts(img))

          .then(partSegmentation  => {

            const coloredPartImage = bodyPix.toColoredPartMask(partSegmentation);

            const opacity = 0.7;

            const flipHorizontal = false;

            const maskBlurAmount = 0;

            const pixelCellWidth = 10.0;

            const canvas = document.getElementById('canvas');

            // Draw the pixelated colored part image on top of the original image onto a

            // canvas.  Each pixel cell's width will be set to 10 px. The pixelated colored

            // part image will be drawn semi-transparent, with an opacity of 0.7, allowing

            // for the original image to be visible under.

            bodyPix.drawPixelatedMask(

                canvas, img, coloredPartImage, opacity, maskBlurAmount,

                flipHorizontal, pixelCellWidth);

          });

      }

      loadAndPredict();

    </script>

  </body>

</html>

[ML] Tensorflow.js + Image segmentPerson的更多相关文章

  1. 大前端技术系列：TWA技术+TensorFlow.js => 集成原生和AI功能的app

    大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...

  2. TensorFlow.js入门（一）一维向量的学习

    TensorFlow的介绍   TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理.Tensor(张量)意味着N维数组,Flow(流)意味着 ...

  3. 转《在浏览器中使用tensorflow.js进行人脸识别的JavaScript API》

    作者 | Vincent Mühle 编译 | 姗姗 出品 | 人工智能头条(公众号ID:AI_Thinker) [导读]随着深度学习方法的应用,浏览器调用人脸识别技术已经得到了更广泛的应用与提升.在 ...

  4. TensorFlow.js之根据数据拟合曲线

    这篇文章中,我们将使用TensorFlow.js来根据数据拟合曲线.即使用多项式产生数据然后再改变其中某些数据(点),然后我们会训练模型来找到用于产生这些数据的多项式的系数.简单的说,就是给一些在二维 ...

  5. TensorFlow.js之安装与核心概念

    TensorFlow.js是通过WebGL加速.基于浏览器的机器学习js框架.通过tensorflow.js,我们可以在浏览器中开发机器学习.运行现有的模型或者重新训练现有的模型. 一.安装     ...

  6. TensorFlow.js入门：一维向量的学习

    转载自:https://blog.csdn.net/weixin_34061042/article/details/89700664 一维向量及其运算 tensor 是 TensorFlow.js 的 ...

  7. Getting Started with TensorFlow.js

    使用TensorFlow.js,您不仅可以在浏览器中运行深度学习模型进行推理,你还能够训练它们.在这个简单的样例中,将展示一个相当于“Hello World”的示例. 1.引入TensorFlow.j ...

  8. 【一统江湖的大前端（9）】TensorFlow.js 开箱即用的深度学习工具

    示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 目录 一. 上手TensorFlow.js 二. ...

  9. 在浏览器中进行深度学习：TensorFlow.js (八）生成对抗网络 （GAN

    Generative Adversarial Network 是深度学习中非常有趣的一种方法.GAN最早源自Ian Goodfellow的这篇论文.LeCun对GAN给出了极高的评价: “There ...

随机推荐

  1. Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制

    思路: 动态路由实现:在导航守卫中判断用户是否有用户信息,通过调用接口,拿到后台根据用户角色生成的菜单树,格式化菜单树结构信息并递归生成层级路由表并使用Vuex保存,通过 router.addRout ...

  2. UML部署图

    部署图与组件图密切相关,部署图是用来描述软件组件部署的硬件组件:而组件图是用来描述组件和显示了它们是如何在硬件中部署. 部署图通常用来帮助理解分布式系统,一个系统模型只有一个部署图. 部署图用于可视化 ...

  3. Robot Arms AtCoder - 4432 (构造)

    大意: 给定平面上$n$个点$(x_i,y_i)$. 要求构造一个序列$d$, $d_i$表示每步走的距离, 再构造$n$个命令串, 要求从原点出发按照第$i$个命令走, 走完恰好到达$(x_i,y_ ...

  4. linux端口映射

    参考文章: http://jingyan.baidu.com/article/ed15cb1b2a332e1be36981ed.html http://www.myhack58.com/Article ...

  5. eclipse创建springboot项目的三种方法

    本文链接:https://blog.csdn.net/mousede/article/details/81285693 方法一 安装STS插件 安装插件导向窗口完成后,在eclipse右下角将会出现安 ...

  6. Linux中使用MegaCli工具查看、管理Raid卡信息

    MegaCli是一款管理维护硬件RAID软件,可以通过它来了解当前raid卡的所有信息,包括 raid卡的型号,raid的阵列类型,raid 上各磁盘状态,等等.通常,我们对硬盘当前的状态不太好确定, ...

  7. 回归写博客时间-----CeliaTodd

    2019-10-17-19:28:01 记录自己的学习路程 国庆期间本来是有持续写博客的,但是有各种原因就没时间写博客了, 但是学习的进度还是没有落下的,现在正式回归写博客的时间了. 但现在不是写Py ...

  8. JavaWeb 之 Listener：监听器

    一.概述 1.事件监听机制 事件:        一件事情 事件源:    事件发生的地方 监听器:    一个对象 注册监听: 将事件.事件源.监听器绑定在一起. 2.监听器概念 当事件源上发生某个 ...

  9. 水泥caement单词

    Caement英语单词,翻译为:水泥 中文名:水泥 外文名:caement 目录 释义 caement 读音:英 [sɪˈment] 美 [sɪˈmɛnt] Noun名词. 水泥; caement在英 ...

  10. SAP Hybris Discount group，折扣组，折扣记录，用户组几组概念的关联

    在backoffice的Price Settings->Discount->Customer Discount Groups菜单下面,创建一个新的Customer Discount Gro ...