Triple your tensor training data

flexbox · flexbox · commit 13008f6662e1 · 2020-07-26T15:14:07.000+02:00
diff --git a/README.md b/README.md
@@ -4,6 +4,14 @@
 
 Explore [the complete mindmap](https://my.mindnode.com/h85zxxubxjuSewNvxwdhA3Ef32CpFeM7J8b4ML3z#-609.7,-24.7,2)
 
+## Projects
+
+1. [mobilenet](mobilenet/)
+1. [nsfwjs](nsfwjs/)
+1. [joker-face](joker-face/)
+1. [image-to-tensor](image-to-tensor/)
+1. [tensor-reversal](tensor-reversal/)
+
 ## Ressources
 
 - [The TensorFlow.js gallery](https://github.com/tensorflow/tfjs/blob/master/GALLERY.md)
diff --git a/tensor-reversal/README.md b/tensor-reversal/README.md
@@ -0,0 +1,14 @@
+# Tensor Reversal
+
+> How to TRIPLE your training data with `tf.reverse`
+
+The [tensorflow documentation](https://js.tensorflow.org/api/2.0.1/#reverse)
+
+![](./ts.reverse.png)
+
+## Getting Started
+
+```
+yarn
+yarn start
+```
diff --git a/tensor-reversal/index.html b/tensor-reversal/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>TensorFlow Template</title>
+    <meta charset="UTF-8" />
+    <link
+      rel="stylesheet"
+      href="./node_modules/modern-normalize/modern-normalize.css"
+    />
+  </head>
+
+  <body>
+    <div id="app">
+      <code>Loading…</code>
+    </div>
+
+    <script src="./src/index.js"></script>
+  </body>
+</html>
diff --git a/tensor-reversal/package.json b/tensor-reversal/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "tensorflowjs-template",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.html",
+  "scripts": {
+    "start": "parcel index.html --open",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "@tensorflow/tfjs": "^2.0.1",
+    "modern-normalize": "^0.7.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.2.0",
+    "parcel-bundler": "^1.6.1"
+  },
+  "keywords": []
+}
diff --git a/tensor-reversal/src/index.js b/tensor-reversal/src/index.js
@@ -0,0 +1,41 @@
+import * as tf from '@tensorflow/tfjs';
+import './styles.css';
+
+const img = new Image();
+img.crossOrigin = 'anonymous';
+img.src =
+  'https://images.unsplash.com/photo-1557800636-894a64c1696f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1601&q=80';
+
+img.onload = (event) => {
+  const imgTensor = tf.browser.fromPixels(event.target);
+
+  document.getElementById('app').innerHTML = `
+    <code>TensorFlow version: ${tf.version.tfjs}</code>
+    <h1>Triple your tensors training data</h1>
+    <div class="layout">
+      <div>
+        <code>Original Tensor</code>
+        <canvas id="baseCanvas"></canvas>
+      </div>
+      <div>
+        <code>tf.reverse(1)</code>
+        <canvas id="revertXCanvas"></canvas>
+      </div>
+      <div>
+        <code>tf.reverse(0)</code>
+        <canvas id="revertYCanvas"></canvas>
+      </div>
+    </div>
+  `;
+
+  const baseCanvas = document.getElementById('baseCanvas');
+  tf.browser.toPixels(imgTensor, baseCanvas);
+
+  const revertXCanvas = document.getElementById('revertXCanvas');
+  const revertXTensor = imgTensor.reverse(1);
+  tf.browser.toPixels(revertXTensor, revertXCanvas);
+
+  const revertYCanvas = document.getElementById('revertYCanvas');
+  const revertYTensor = imgTensor.reverse(0);
+  tf.browser.toPixels(revertYTensor, revertYCanvas);
+};
diff --git a/tensor-reversal/src/styles.css b/tensor-reversal/src/styles.css
@@ -0,0 +1,18 @@
+body {
+  padding: 20px 40px;
+}
+
+.layout {
+  display: flex;
+  width: 100%;
+}
+
+.layout div {
+  flex-direction: column;
+  display: flex;
+  padding: 20px;
+}
+
+canvas {
+  width: 100%;
+}
diff --git a/tensor-reversal/ts.reverse.png b/tensor-reversal/ts.reverse.png
diff --git a/tensor-reversal/yarn.lock b/tensor-reversal/yarn.lock
