<!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. 通过werkzeug了解wsgi

    Django有wsgi当做socket,而flask自身是没有wsgi的,他是通过werkzeug来实现的. 看源码 下面看下源码是如何实现的: #这是我们写的flask代码from flask im ...

  2. go switch 和java C#有不同

    1 switch 后的语句可以有简单的赋值语句 2 case :后的语句结束后不需要break;默认自动结束 除非以 fallthrough 语句结束,否则分支会自动终止 没有条件的 switch 有 ...

  3. IDEA 开发插件

    Alibaba Java Code Guidelines 阿里巴巴推出的一款Java代码规约扫描插件,按照<阿里巴巴Java开发手册>规定对代码风格以及质量进行实时检测.约束.强推.ecl ...

  4. python 字符串替换功能 string.replace()可以用正则表达式，更优雅

    说起来不怕人笑话,我今天才发现,python 中的字符串替换操作,也就是 string.replace() 是可以用正则表达式的. 之前,我的代码写法如下,粗笨: 自从发现了正则表达式也生效后,代码变 ...

  5. mongodb常规操作语句

    db.c_user.insertOne({ name: "ljm", pwd: "123456" }); //插入一个 db.c_user.insertMany ...

  6. Win10家庭版升级到企业版的方法

    一.家庭版升级企业版 1.右键单击[此电脑]——>属性 2.点击更改产品密钥 3.输入密钥:NPPR9-FWDCX-D2C8J-H872K-2YT43 4.点击下一步,验证结束后点击开始升级,然 ...

  7. 使用@Async注解创建多线程，自定义线程池

    说明 使用@Async注解创建多线程非常的方便,还可以通过配置,实现线程池.比直接使用线程池简单太多.而且在使用上跟普通方法没什么区别,加上个@Async注解即可实现异步调用. 用法 AsyncTas ...

  8. np.newaxis的使用及有趣的数组相乘

    a=np.array([1,2,3,4])a=a[np.newaxis,:] #固定行,相当于1行多列b=np.array([2,4,6]) b=b[:,np.newaxis] #固定列,相当与多行1 ...

  9. 【开发工具】-Idea代码提示忽略大小写

    设置路径:File–>Settings–>Editor–>General–>Code Completion–>Match case 取消Match case 勾选. [o ...

  10. 【兼容调试】cffi library '_openssl' has no function, constant or global variable named 'Cryptography_HAS

    重装cryptography就好了. conda uninstall cryptography conda install cryptography https://github.com/pyca/c ...