<!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. xe.10.2的下载路径

    为了这个玩意,我折腾了一天,为了以后自己还用到 官网地址: http://altd.embarcadero.com/download/radstudio/10.2/delphicbuilder10_2 ...

  2. Django-08-admin

    1. 介绍 admin是django强大功能之一,它能共从数据库中读取数据,呈现在页面中,进行管理.默认情况下,它的功能已经非常强大,如果你不需要复杂的功能,它已经够用,但是有时候,一些特殊的功能还需 ...

  3. Mybatis自动生成代码工具

    项目结构如下 一:在POM中添加mybatis-generator-maven-plugin 插件 <plugins> <plugin> <groupId>org. ...

  4. 用python读取word文件里的表格信息【华为云技术分享】

    在企查查查询企业信息的时候,得到了一些word文件,里面有些控股企业的数据放在表格里,需要我们将其提取出来. word文件看起来很复杂,不方便进行结构化.实际上,一个word文档中大概有这么几种类型的 ...

  5. 转！！DBCP2 配置详解说明

    转自:https://www.cnblogs.com/diyunpeng/p/6980098.html 由于commons-dbcp所用的连接池出现版本升级,因此commons-dbcp2中的数据库池 ...

  6. RabbitMQ Policy的使用

    RabbitMQ作为最流行的MQ中间件之一,广泛使用在各类系统中,今天我们就来讨论一下如何通过Policies给RabbitMQ中已经创建的Queue添加属性和参数. Policise 的作用 通常来 ...

  7. 2019 同程旅游java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.同程等公司offer,岗位是Java后端开发,因为发展原因最终选择去了同程,入职一年时间了,之前面试了很多家公 ...

  8. global position

    观察, GestureDetector( child: CustomPaint(painter: StudyPaint(points: _points)), onPanEnd: (DragEndDet ...

  9. JAVA基础之设置随机成语验证码

    package com.oracle; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import ja ...

  10. 理解 Node.js 中 Stream(流)

    Stream(流) 是 Node.js 中处理流式数据的抽象接口. stream 模块用于构建实现了流接口的对象. Node.js 提供了多种流对象. 例如,对 HTTP 服务器的request请求和 ...