<!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. 【C语言】 strlen()入参空指针导致段错误

    背景: 在工作中调试sqlite3相关代码的时候,调用printf()打印sqlite3_exec()的执行日志:因为sqlite3_exec()保存日志的参数传入时为NULL,且没有执行错误,所以再 ...

  2. composer安装FOSUserBundle内存溢出

    内存溢出异常: Fatal error: Allowed memory size of 2147483648 bytes exhausted (tried to allocate 4096 bytes ...

  3. MVC路由规则

    1 可以创建多条路由规则,每条路由规则的那么属性不同 2路由规则是有顺序的.如果被前面的规则匹配了,那么后面的规则就没机会了 3 constraints 约束: 4namespaces 命名空间 5r ...

  4. Go chan 结构体 写入文件

    chan 需要两个进程,一个写,一个读,是分开的, package main import ( "bufio" "fmt" "math/rand&qu ...

  5. volatile 作用

    volatile使用场景:线程间共享变量需要使用 volatile 关键字标记,确保线程能够读取到更新后的最新变量值. volatile关键字的目的是告诉虚拟机: 1.每次访问变量时,总是获取主内存的 ...

  6. 认识KNX协议

    一.简介 KNX是Konnex的缩写.1999年5月,欧洲三大总线协议EIB.BatiBus和EHSA合并成立了Konnex协会,提出了KNX协议.该协议以EIB为基础,兼顾了BatiBus和EHSA ...

  7. Linux生产环境上，最常用的一套“AWK“技巧【转】

    最有用系列: <Linux生产环境上,最常用的一套“vim“技巧> <Linux生产环境上,最常用的一套“Sed“技巧> <Linux生产环境上,最常用的一套“AWK“技 ...

  8. SSO实现机制

    引言 单点登录有许多开发商提供解决方案,本文以yale大学SSO开源项目CAS为例,介绍单点登录实现机制. 术语解释 SSO-Single Sign On,单点登录 TGT-Ticket Granti ...

  9. 解决Ajax前台中文传到后台出现中文乱码

    遇到的问题是: 前台利用Ajax, get方式向后台发送中文数据出现乱码. 解决办法是前台两次编码, 后台一次解码即可. 前台jsp文件 1 var text = "张三"; 3 ...

  10. Windows查看端口使用状况(转)

    转:https://www.cnblogs.com/lixuwu/p/5898354.html 阅读目录 1 查看windows所有端口进程 2 查询指定端口 使用端口是我们在进行远程或者打印机等都会 ...