ml5js · Shubbair · Jun 19, 2022
diff --git a/examples/p5js/UNET/UNET_Image/assets/test.png b/examples/p5js/UNET/UNET_Image/assets/test.png
diff --git a/examples/p5js/UNET/UNET_Image/index.html b/examples/p5js/UNET/UNET_Image/index.html
@@ -0,0 +1,14 @@
+<html>
+  <head>
+    <meta charset="UTF-8" >
+    <title>UNET example with p5.js</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ml5.min.js" type="text/javascript"></script>
+  </head>
+
+  <body>
+    <h1>UNET Image example using p5.js</h1>
+    <script src="sketch.js"></script>
+  </body>
+</html>
diff --git a/examples/p5js/UNET/UNET_Image/sketch.js b/examples/p5js/UNET/UNET_Image/sketch.js
@@ -0,0 +1,51 @@
+// Copyright (c) 2022 ml5
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+/* ===
+   ml5 Example
+   UNET Image example using p5.js
+=== */
+
+let video;
+let uNet;
+let segmentationImage;
+
+// load uNet model
+function preload() {
+  uNet = ml5.uNet('face');
+}
+
+function setup() {
+  createCanvas(320, 240);
+
+  // load up your image
+  img = createImg("assets/test.png", imageReady);
+  img.hide();
+
+  //create blank image
+  segmentationImage = createImage(width, height);
+  frameRate(1);
+}
+
+function imageReady(){
+    console.log('Image ready');
+
+    uNet.segment(img, gotResult);
+}
+
+function gotResult(error, result) {
+  // if there's an error return it
+  if (error) {
+    console.error(error);
+    return;
+  }
+  // set the result to the global segmentation variable
+  segmentationImage = result.backgroundMask;
+}
+
+function draw() {
+  background(0)
+  image(segmentationImage, 0, 0, width, height);
+}