<!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. springcloud使用之断路器hystrix

    上一篇文章提到我们最近开了个新项目,目的是将新的业务放到新项目中,老项目单独维护,再逐步迁移老项目到新项目里.但就在前端时间生产环境发生了一个事故,事故开始的异常是我们的业务发现前端h5页面办理很慢, ...

  2. Django-10-分页组件

    1. Django内置分页 from django.shortcuts import render from django.core.paginator import Paginator, Empty ...

  3. 选择类排序 （简单选择排序，堆排序）— c语言实现

    选择类排序包括: (1)  简单选择排序 (2)树形选择排序 (3)堆排序 简单选择排序: [算法思想]:在第 i 趟简单选择排序中,从第 i 个记录开始,通过 n - i 次关键字比较,从 n - ...

  4. B站动态转发抽奖脚本+教程

    运行python脚本需要的条件: 1.连通的网络 2.已安装Python2并配置环境变量 3.Python脚本源码 环境搭建: 网络就不用我说了("'▽'")  那么下面我们来安装 ...

  5. Vuecli3

    第一步安装 npm install -g @vue/cli 第二步关于项目配置 因为cli3去除了cli2中index.html 转而存到了publi文件中 如果需要配置跨域 页面入口 打包文件路径都 ...

  6. 解决h5版的uniapp请求跨域问题

    uni项目里有个名为manifest.json文件 编辑manifest.json文件,找到h5选项,里面一般有个名为“devServer”索引,往这个索引中添加一个“proxy”或者编辑,值为请求域 ...

  7. Spring MVC之@ControllerAdvice详解

    本文链接:https://blog.csdn.net/zxfryp909012366/article/details/82955259   对于@ControllerAdvice,我们比较熟知的用法是 ...

  8. 如何在Mybatis的xml文件调用java类的方法

    在mybatis的映射xml文件调用java类的方法:使用的是OGNL表达式,表达式格式为:${@prefix@methodName(传递参数名称)} 1.如下代码所示:方法必须为静态方法:以下我只是 ...

  9. printf打印字节

    int i = 0; printf("buf:"); for(i = 0; i < sizeof(buf); i++) { printf("0x%x", ...

  10. Nginx proxy_set_header

    配置示例 server{ server_name aaa.com location /api { proxy_pass http://xxx.com/api; proxy_set_header Hos ...