Merge branch 'development' into adding-testjs-for-UNET

t111 · web-flow · commit 58fdb79afbe1 · 2019-10-24T21:26:01.000-04:00
diff --git a/README.md b/README.md
@@ -26,19 +26,21 @@ There are several ways you can use the ml5.js library:
 
 
 
+
 <p id="latest-version">
 
-* You can use the latest version (0.4.0) by adding it to the head section of your HTML document:
+* You can use the latest version (0.4.1) by adding it to the head section of your HTML document:
 
-**v0.4.0**
+**v0.4.1**
 
-    <script src="https://unpkg.com/ml5@0.4.0/dist/ml5.min.js" type="text/javascript"></script>
+    <script src="https://unpkg.com/ml5@0.4.1/dist/ml5.min.js" type="text/javascript"></script>
 
 </p data-id="latest-version">
     
     
     
     
+    
 
 
 * If you need to use an earlier version for any reason, you can change the version number. The [previous versions of ml5 can be found here](https://www.npmjs.com/package/ml5). You can use those previous versions by replacing `<version>` with the ml5 version of interest:
@@ -49,7 +51,7 @@ There are several ways you can use the ml5.js library:
 
 For example:
 ```js
-<script src="https://unpkg.com/ml5@0.3.1/dist/ml5.min.js" type="text/javascript"></script>
+<script src="https://unpkg.com/ml5@0.4.1/dist/ml5.min.js" type="text/javascript"></script>
 ```
 
 * You can also reference "latest", but we do not recommend this as your code may break as we update ml5.
diff --git a/docs/README.md b/docs/README.md
@@ -19,13 +19,13 @@ The fastest way to get started exploring the creative possibilities of ml5.js ar
 3. You can also copy and paste the cdn link to the ml5 library here:
 
   ```
-  <script src="https://unpkg.com/ml5@0.4.0/dist/ml5.min.js"></script>
+  <script src="https://unpkg.com/ml5@0.4.1/dist/ml5.min.js"></script>
   ```
 
 ***
 #### Quickstart: Plain JavaScript
 
-Reference the [latest version](https://unpkg.com/ml5@0.4.0/dist/ml5.min.js) of ml5.js using a script tag in an HTML file as below: 
+Reference the [latest version](https://unpkg.com/ml5@0.4.1/dist/ml5.min.js) of ml5.js using a script tag in an HTML file as below: 
 
 
 In an **index.html** file, copy and paste the following and open up that file in your web browser. 
@@ -36,13 +36,13 @@ In an **index.html** file, copy and paste the following and open up that file in
   <head>
     <title>Getting Started with ml5.js</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="https://unpkg.com/ml5@0.4.0/dist/ml5.min.js"></script>
+    <script src="https://unpkg.com/ml5@0.4.1/dist/ml5.min.js"></script>
   </head>
 
   <body>
     <script>
       // Your code will go here
-      // open up your console - if everything loaded properly you should see 0.4.0
+      // open up your console - if everything loaded properly you should see 0.4.1
       console.log('ml5 version:', ml5.version);
 
     </script>
@@ -71,7 +71,7 @@ In an **index.html** file, copy and paste the following and open up that file in
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
     <!-- ml5 -->
-    <script src="https://unpkg.com/ml5@0.4.0/dist/ml5.min.js"></script>
+    <script src="https://unpkg.com/ml5@0.4.1/dist/ml5.min.js"></script>
   </head>
 
   <body>
diff --git a/docs/tutorials/hello-ml5.md b/docs/tutorials/hello-ml5.md
@@ -72,7 +72,7 @@ Here you can see that we read in the javascript libraries. This includes our ml5
 
   <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://unpkg.com/ml5@0.4.0/dist/ml5.min.js"></script>
+  <script src="https://unpkg.com/ml5@0.4.1/dist/ml5.min.js"></script>
 </head>
 
 <body>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ml5",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A friendly machine learning library for the web.",
   "main": "dist/ml5.min.js",
   "directories": {
diff --git a/src/utils/imageUtilities.js b/src/utils/imageUtilities.js
@@ -4,6 +4,7 @@
 // https://opensource.org/licenses/MIT
 
 import * as tf from '@tensorflow/tfjs';
+import p5Utils from './p5Utils';
 
 // Resize video elements
 const processVideo = (input, size, callback = () => {}) => {
@@ -61,6 +62,64 @@ const cropImage = (img) => {
   return img.slice([beginHeight, beginWidth, 0], [size, size, 3]);
 };
 
+const flipImage = (img) => {
+  // image image, bitmap, or canvas
+  let imgWidth;
+  let imgHeight;
+  let inputImg;
+
+  if (img instanceof HTMLImageElement ||
+    img instanceof HTMLCanvasElement ||
+    img instanceof HTMLVideoElement ||
+    img instanceof ImageData) {
+    inputImg = img;
+  } else if (typeof img === 'object' &&
+    (img.elt instanceof HTMLImageElement ||
+      img.elt instanceof HTMLCanvasElement ||
+      img.elt instanceof HTMLVideoElement ||
+      img.elt instanceof ImageData)) {
+
+    inputImg = img.elt; // Handle p5.js image
+  } else if (typeof img === 'object' &&
+    img.canvas instanceof HTMLCanvasElement) {
+    inputImg = img.canvas; // Handle p5.js image
+  } else {
+    inputImg = img;
+  }
+
+  if (inputImg instanceof HTMLVideoElement) {
+    // should be videoWidth, videoHeight?
+    imgWidth = inputImg.width;
+    imgHeight = inputImg.height;
+  } else {
+    imgWidth = inputImg.width;
+    imgHeight = inputImg.height;
+  }
+
+
+  if (p5Utils.checkP5()) {
+    const p5Canvas = p5Utils.p5Instance.createGraphics(imgWidth, imgHeight);
+    p5Canvas.push()
+    p5Canvas.translate(imgWidth, 0);
+    p5Canvas.scale(-1, 1);
+    p5Canvas.image(img, 0, 0, imgWidth, imgHeight);
+    p5Canvas.pop()
+
+    return p5Canvas;
+  }
+  const canvas = document.createElement('canvas');
+  canvas.width = imgWidth;
+  canvas.height = imgHeight;
+
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(inputImg, 0, 0, imgWidth, imgHeight);
+  ctx.translate(imgWidth, 0);
+  ctx.scale(-1, 1);
+  ctx.drawImage(canvas, imgWidth * -1, 0, imgWidth, imgHeight);
+  return canvas;
+
+}
+
 // Static Method: image to tf tensor
 function imgToTensor(input, size = null) {
   return tf.tidy(() => {
@@ -79,4 +138,5 @@ export {
   processVideo,
   cropImage,
   imgToTensor,
-};
+  flipImage
+};

-Original file line number
+Diff line change
   <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://unpkg.com/[email protected].0/dist/ml5.min.js"></script>
 +  <script src="https://unpkg.com/[email protected].1/dist/ml5.min.js"></script>
 </head>
 <body>
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ml5",`
`3`		`- "version": "0.4.0",`
	`3`	`+ "version": "0.4.1",`
`4`	`4`	`"description": "A friendly machine learning library for the web.",`
`5`	`5`	`"main": "dist/ml5.min.js",`
`6`	`6`	`"directories": {`