Spaces:

Javiai
/

docker-opencv

Sleeping

App Files Files Community

Javiai commited on Nov 12, 2023

Commit

709edf5

•

1 Parent(s): 1034076

Update tests

Browse files

Files changed (9) hide show

public/index.html +25 -20
public/sketch4.js +59 -0
public/tests/index.js +73 -0
public/tests/index_old.html +33 -0
public/tests/index_posenet.html +26 -0
public/tests/index_segmegtation.html +26 -0
public/{sketch.js → tests/sketch.js} +0 -0
public/tests/sketch2.js +118 -0
public/tests/sketch3.js +99 -0

public/index.html CHANGED Viewed

@@ -1,33 +1,38 @@
-<html>
-  <head>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mvoloskov/potion/potion.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/p5@1.8.0/lib/p5.js"></script>
     <style>
       body {
         background: #0b0f19;
         color: white;
       }
     </style>
-  </head>
-  <body>
     <header>
-      <h1>Docker Opencv APP</h1>
-      <p>A App developed for apply IA in streaming video in JavaScript</p>
-      <p>This is a work in progress project that want to work with P5.js, OpenCV, Tensorflow.js, Node.js and Docker</p>
-      <p>Right now, only apply a halftone over the webcam video</p>
     </header>
-    <script src="sketch.js"></script>
-    <!--
-      <p>Blur Size: <input type="range" id="blurSize" value="30"></p>
-      <p>Low Threshold: <input type="range" id="lowThreshold" value="15"></p>
-      <p>High Threshold: <input type="range" id="highThreshold" value="25"></p>
-    -->
     <div>
-    <main>
-    </main>
-  </div>
-  </body>
 </html>

+<!DOCTYPE html>
+<head>
+    <title>Docker Tensorflow</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mvoloskov/potion/potion.min.css">
     <style>
       body {
         background: #0b0f19;
         color: white;
       }
     </style>
+    <!-- Load p5.js -->
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
+</head>
+<body>
     <header>
+        <h1>Docker Opencv APP</h1>
+        <p>A App developed for apply IA in streaming video in JavaScript</p>
+        <p>This is a work in progress project that want to work with P5.js, OpenCV, Tensorflow.js, Node.js and Docker</p>
+        <p>Right now, only apply a halftone over the webcam video </p> <a href="tests/index_old.html">Halftone</a>
     </header>
     <div>
+        <canvas id="canvas" width="640" height="480"></canvas>
+        <main></main>
+    </div>
+    <script src="https://unpkg.com/@tensorflow/tfjs-core@3.3.0/dist/tf-core.js"></script>
+    <script src="https://unpkg.com/@tensorflow/tfjs-converter@3.3.0/dist/tf-converter.js"></script>
+    <script src="https://unpkg.com/@tensorflow/tfjs-backend-webgl@3.3.0/dist/tf-backend-webgl.js"></script>
+    <script src="https://unpkg.com/@tensorflow-models/deeplab@0.2.1/dist/deeplab.js"></script>
+    <script src="sketch4.js" defer></script>
+</body>
 </html>

public/sketch4.js ADDED Viewed

	@@ -0,0 +1,59 @@

+let capture;
+let font;
+let segmenter;
+let people;
+let model;
+const canvas = document.getElementById('canvas');
+let ctx = canvas.getContext('2d');
+function setup() {
+  createCanvas(640, 480);
+  capture = createCapture(VIDEO, initModel);
+  capture.hide();
+  background(255);
+}
+async function initModel() {
+  model = await deeplab.load({ "base": 'pascal', "quantizationBytes": 2 });
+}
+async function predict() {
+  console.log('ok')
+  segmenter = await model.segment(capture.elt);
+  renderPrediction(segmenter);
+}
+function renderPrediction(prediction) {
+  const { legend, height, width, segmentationMap } = prediction;
+  //console.log(`prediction: ${JSON.stringify(prediction)}`);
+  let segmentationMapData = new ImageData(segmentationMap, width, height);
+  //console.log(segmentationMapData)
+  ctx.putImageData(segmentationMapData, 0, 0);
+}
+function draw() {
+    background(0,1);
+  if (model) {
+    predict();
+    console.log('ok')
+  }
+}
+function keyPressed() {
+  noLoop();
+}

public/tests/index.js ADDED Viewed

	@@ -0,0 +1,73 @@

+let model;
+const chooseFiles = document.getElementById('chooseFiles');
+const modelNameSelect = document.getElementById("modelNameSelect");
+const segmentImageButton = document.getElementById("segmentImage");
+const legendsDiv = document.getElementById("legends");
+const image = document.getElementById('image');
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+chooseFiles.onchange = () => {
+    const [file] = chooseFiles.files
+    if (file) {
+        image.src = URL.createObjectURL(file);
+    }
+};
+segmentImageButton.onclick = predict;
+document.getElementById("loadModel").onclick = async () => {
+    segmentImageButton.disabled = true;
+    updateModelLoadStatus("Model Loading...");
+    const modelName = modelNameSelect.options[modelNameSelect.selectedIndex].value;
+    await loadModel(modelName);
+    updateModelLoadStatus(modelName + " model loaded!");
+    segmentImageButton.disabled = false;
+};
+async function loadModel(modelName) {
+    model = await deeplab.load({ "base": modelName, "quantizationBytes": 2 });
+}
+function updateModelLoadStatus(status) {
+    document.getElementById("modelLoadedStatus").innerHTML = status;
+}
+async function predict() {
+    let prediction = await model.segment(image);
+    renderPrediction(prediction);
+}
+function renderPrediction(prediction) {
+    const { legend, height, width, segmentationMap } = prediction;
+    //console.log(`prediction: ${JSON.stringify(prediction)}`);
+    const segmentationMapData = new ImageData(segmentationMap, width, height);
+    console.log(segmentationMapData)
+    canvas.width = width;
+    canvas.height = height;
+    ctx.putImageData(segmentationMapData, 0, 0);
+    displayLegends(legend);
+}
+function displayLegends(legendObj) {
+    legendsDiv.innerHTML = "";
+    document.getElementById("legendLabel").style.visibility = "visible";
+    Object.keys(legendObj).forEach((legend) => {
+        const [red, green, blue] = legendObj[legend];
+        const span = document.createElement('span');
+        span.innerHTML = legend;
+        span.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
+        span.style.padding = '10px';
+        span.style.marginRight = '10px';
+        span.style.color = '#ffffff';
+        legendsDiv.appendChild(span);
+    });
+}

public/tests/index_old.html ADDED Viewed

	@@ -0,0 +1,33 @@

+<html>
+  <head>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mvoloskov/potion/potion.min.css">
+    <style>
+      body {
+        background: #0b0f19;
+        color: white;
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.8.0/lib/p5.js"></script>
+  </head>
+  <body>
+    <header>
+      <h1>Docker Opencv APP</h1>
+      <p>A App developed for apply IA in streaming video in JavaScript</p>
+      <p>This is a work in progress project that want to work with P5.js, OpenCV, Tensorflow.js, Node.js and Docker</p>
+      <p>Right now, only apply a halftone over the webcam video</p>
+    </header>
+    <script src="sketch.js"></script>
+    <!--
+      <p>Blur Size: <input type="range" id="blurSize" value="30"></p>
+      <p>Low Threshold: <input type="range" id="lowThreshold" value="15"></p>
+      <p>High Threshold: <input type="range" id="highThreshold" value="25"></p>
+    -->
+    <div>
+    <main>
+    </main>
+  </div>
+  </body>
+</html>

public/tests/index_posenet.html ADDED Viewed

	@@ -0,0 +1,26 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1">
+    <title>3D Pose Estimation Sample by BlazePose & p5.js</title>
+    <!-- Load p5.js -->
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
+    <!-- Load MediaPipe Pose Using TensorFlow.js runtime -->
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script>
+    <!-- Load MediaPipe Pose Using MediaPipe runtime -->
+    <!-- <script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script> -->
+    <!-- My Sketch -->
+</head>
+<body>
+  <script src="sketch2.js"></script>
+</body>
+</html>

public/tests/index_segmegtation.html ADDED Viewed

	@@ -0,0 +1,26 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1">
+    <title>3D Pose Estimation Sample by BlazePose & p5.js</title>
+    <!-- Load p5.js -->
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
+    <!-- Load MediaPipe Pose Using TensorFlow.js runtime -->
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-segmentation"></script>
+        <!-- Optional: Include below scripts if you want to use TensorFlow.js runtime.
+        <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>-->
+        <!-- Optional: Include below scripts if you want to use MediaPipe runtime.
+        <script src="https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation"></script>-->
+</head>
+<body>
+<canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;"></canvas>
+  <script src="sketch3.js"></script>
+</body>
+</html>

public/{sketch.js → tests/sketch.js} RENAMED Viewed

File without changes

public/tests/sketch2.js ADDED Viewed

	@@ -0,0 +1,118 @@

+// // Import TFJS runtime with side effects.
+// import '@tensorflow/tfjs-backend-webgl';
+// import * as poseDetection from '@tensorflow-models/pose-detection';
+// // import 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl';
+// // import * as poseDetection from 'https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection';
+/*
+=============
+Params
+=============
+*/
+let capture;
+let font;
+let detector;
+let poses;
+let angle = 0.0;
+/*
+=============
+Function
+=============
+*/
+function preload() {
+}
+function setup() {
+  createCanvas(640, 480);
+  capture = createCapture(VIDEO, captureLoaded);
+  background(255);
+}
+function captureLoaded() {
+  console.log("capture loaded...");
+  initModel();
+}
+async function initModel() {
+  const _model = poseDetection.SupportedModels.MoveNet;
+  console.log("model:", _model);
+  const detectorConfig = {
+    runtime: "tfjs", // 'mediapipe', 'tfjs'
+    //modelType: "lite", // 'lite', 'full', 'heavy'
+  };
+  detector = await poseDetection.createDetector(_model, detectorConfig);
+}
+async function getPose() {
+  poses = await detector.estimatePoses(capture.elt);
+}
+function draw() {
+    background(0,1);
+  if (detector) {
+    getPose();
+  }
+  drawPoseInfo();
+}
+function drawPoseInfo() {
+    noStroke();
+    fill(255, 0, 0, 128);
+  if (poses && poses.length > 0) {
+    for (var i = 0; i < poses.length; i++) {
+      for (var j = 0; j<poses[i].keypoints.length; j++) {
+        if (poses[i].keypoints[j].score > 0.1) {
+          let posX = width-int(poses[i].keypoints[j].x);
+          let posY = height-int(poses[i].keypoints[j].y);
+          //circle(posX, posY, 10);
+        }
+      }
+    }
+    stroke(255);
+    if (poses.length > 0) {
+        let l = poses[0].keypoints.length;
+        for (var j = 4; j<l; j++) {
+            for (var i = j+1; i<l; i++) {
+                    let d = dist(int(poses[0].keypoints[i].x),
+                    int(poses[0].keypoints[i].y),
+                    int(poses[0].keypoints[j].x),
+                    int(poses[0].keypoints[j].y));
+                    if(d > 150){
+                    line( int(poses[0].keypoints[i].x),
+                        int(poses[0].keypoints[i].y),
+                        int(poses[0].keypoints[j].x),
+                        int(poses[0].keypoints[j].y));
+                    }
+                }
+            }
+        }
+    }
+}
+function keyPressed() {
+  noLoop();
+}

public/tests/sketch3.js ADDED Viewed

	@@ -0,0 +1,99 @@

+let capture;
+let font;
+let segmenter;
+let people;
+function setup() {
+  createCanvas(640, 480);
+  capture = createCapture(VIDEO, captureLoaded);
+  background(255);
+}
+function captureLoaded() {
+  console.log("capture loaded...");
+  initModel();
+}
+async function initModel() {
+  const model = bodySegmentation.SupportedModels.MediaPipeSelfieSegmentation; // or 'BodyPix'
+  const segmenterConfig = {
+    runtime: 'tfjs', // or 'tfjs'
+    modelType: 'general' // or 'landscape'
+  };
+  segmenter = await bodySegmentation.createSegmenter(model, segmenterConfig);
+}
+async function getPose() {
+  people = await segmenter.segmentPeople(capture.elt);
+}
+function draw() {
+    background(0,1);
+  if (segmenter) {
+    getPose();
+    getPose2();
+  }
+  drawPoseInfo();
+}
+function drawPoseInfo() {
+    noStroke();
+    fill(255, 0, 0, 128);
+  if (people && people.length > 0) {
+    //let img = people[0].mask.toImageData().ImageData;
+    //console.log(img)
+    /*
+    for (var i = 0; i < people.length; i++) {
+      for (var j = 0; j<people[i].keypoints.length; j++) {
+        if (people[i].keypoints[j].score > 0.1) {
+          let posX = width-int(people[i].keypoints[j].x);
+          let posY = height-int(people[i].keypoints[j].y);
+          circle(posX, posY, 10);
+        }
+      }
+    }*/
+  }
+}
+function keyPressed() {
+  noLoop();
+}
+async function getPose2(){
+  const img = capture.elt;
+  const segmentation = await segmenter.segmentPeople(img);
+  // The mask image is an binary mask image with a 1 where there is a person and
+  // a 0 where there is not.
+  const coloredPartImage = await bodySegmentation.toBinaryMask(segmentation);
+  const opacity = 0.7;
+  const flipHorizontal = false;
+  const maskBlurAmount = 0;
+  const canvas = document.getElementById('canvas');
+  // Draw the mask image on top of the original image onto a canvas.
+  // The colored part image will be drawn semi-transparent, with an opacity of
+  // 0.7, allowing for the original image to be visible under.
+  bodySegmentation.drawMask(
+      canvas, img, coloredPartImage, opacity, maskBlurAmount,
+      flipHorizontal);
+}