feat: build with esbuild

view/build.js

@@ -0,0 +1,31 @@
+const fs = require("fs");
+const esbuild = require("esbuild");
+const sveltePlugin = require("esbuild-svelte");
+const sveltePreprocess = require('svelte-preprocess');
+
+//make sure the directoy exists before stuff gets put into it
+if (!fs.existsSync("./public/build/")) {
+  fs.mkdirSync("./public/build/")
+}
+
+
+const isDev = process.argv[2] === "--watch";
+
+//build the application
+esbuild.build({
+  entryPoints: ['./src/main.ts', './src/workers/ai-worker.ts', './src/workers/pixel-worker.ts'],
+  outdir: './public/build',
+  bundle: true,
+  minify: !isDev,
+  watch: isDev ? {
+    onRebuild(error, result) {
+      if (error) console.error('watch build failed:', error)
+      else console.log('watch build succeeded')
+    }
+  } : false,
+  loader: { ".vert": "text", ".frag": "text" },
+  plugins: [sveltePlugin({ preprocess: sveltePreprocess() }),]
+}).catch((err) => {
+  console.error(err)
+  process.exit(1)
+})

view/package-lock.json

@@ -11,6 +11,7 @@
         "@tensorflow-models/deeplab": "^0.2.1",
         "@tensorflow/tfjs-backend-webgl": "^3.3.0",
         "@tensorflow/tfjs-converter": "^3.3.0",
+        "@tensorflow/tfjs-core": "^3.3.0",
         "ogl": "^0.0.65",
         "sirv-cli": "^1.0.0",
         "svelte-file-dropzone": "^0.0.15"
@@ -21,6 +22,8 @@
         "@rollup/plugin-node-resolve": "^11.0.0",
         "@rollup/plugin-typescript": "^8.0.0",
         "@tsconfig/svelte": "^1.0.10",
+        "esbuild": "^0.9.1",
+        "esbuild-svelte": "^0.4.3",
         "idb": "^6.0.0",
         "rollup": "^2.3.4",
         "rollup-plugin-css-only": "^3.1.0",
@@ -231,7 +234,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-3.3.0.tgz",
       "integrity": "sha512-6G+LcCiQBl4Kza5mDbWbf8QSWBTW3l7SDjGhQzMO1ITtQatHzxkuHGHcJ4CTUJvNA0JmKf4QJWOvlFqEmxwyLQ==",
-      "peer": true,
       "dependencies": {
         "@types/offscreencanvas": "~2019.3.0",
         "@types/seedrandom": "2.4.27",
@@ -558,6 +560,28 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/esbuild": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.9.1.tgz",
+      "integrity": "sha512-2A0lJxpkV9tvwz+tCD6Ww1bvbZKvH4zBz8G8Dx/MhLwmJ23p8XRIz44ObWt8dpDpZARzhiahacQ+b/V1GJbx0A==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      }
+    },
+    "node_modules/esbuild-svelte": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/esbuild-svelte/-/esbuild-svelte-0.4.3.tgz",
+      "integrity": "sha512-XYSdgKCPLhWFCWxDVsjg9aHydWwCdaWDSEzx8PloB7fqHG3QGhU+qU8Y5P06cEtmz5N6CiK3b1RH6irYFIerUw==",
+      "dev": true,
+      "dependencies": {
+        "svelte": "^3.35.0"
+      },
+      "peerDependencies": {
+        "esbuild": ">=0.8.1"
+      }
+    },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -1296,7 +1320,6 @@
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
       "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
-      "peer": true,
       "engines": {
         "node": "4.x || >=6.0.0"
       }
@@ -2268,7 +2291,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-3.3.0.tgz",
       "integrity": "sha512-6G+LcCiQBl4Kza5mDbWbf8QSWBTW3l7SDjGhQzMO1ITtQatHzxkuHGHcJ4CTUJvNA0JmKf4QJWOvlFqEmxwyLQ==",
-      "peer": true,
       "requires": {
         "@types/offscreencanvas": "~2019.3.0",
         "@types/seedrandom": "2.4.27",
@@ -2545,6 +2567,21 @@
         "once": "^1.4.0"
       }
     },
+    "esbuild": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.9.1.tgz",
+      "integrity": "sha512-2A0lJxpkV9tvwz+tCD6Ww1bvbZKvH4zBz8G8Dx/MhLwmJ23p8XRIz44ObWt8dpDpZARzhiahacQ+b/V1GJbx0A==",
+      "dev": true
+    },
+    "esbuild-svelte": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/esbuild-svelte/-/esbuild-svelte-0.4.3.tgz",
+      "integrity": "sha512-XYSdgKCPLhWFCWxDVsjg9aHydWwCdaWDSEzx8PloB7fqHG3QGhU+qU8Y5P06cEtmz5N6CiK3b1RH6irYFIerUw==",
+      "dev": true,
+      "requires": {
+        "svelte": "^3.35.0"
+      }
+    },
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -3161,8 +3198,7 @@
     "node-fetch": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
-      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
-      "peer": true
     },
     "normalize-path": {
       "version": "3.0.0",

view/package.json

@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "build": "rollup -c",
+    "dev": "node build.js --watch",
-    "dev": "rollup -c -w",
+    "build": "node build.js",
     "start": "sirv public",
     "validate": "svelte-check"
   },
@@ -14,6 +14,8 @@
     "@rollup/plugin-node-resolve": "^11.0.0",
     "@rollup/plugin-typescript": "^8.0.0",
     "@tsconfig/svelte": "^1.0.10",
+    "esbuild": "^0.9.1",
+    "esbuild-svelte": "^0.4.3",
     "idb": "^6.0.0",
     "rollup": "^2.3.4",
     "rollup-plugin-css-only": "^3.1.0",
@@ -32,6 +34,7 @@
     "@tensorflow-models/deeplab": "^0.2.1",
     "@tensorflow/tfjs-backend-webgl": "^3.3.0",
     "@tensorflow/tfjs-converter": "^3.3.0",
+    "@tensorflow/tfjs-core": "^3.3.0",
     "ogl": "^0.0.65",
     "sirv-cli": "^1.0.0",
     "svelte-file-dropzone": "^0.0.15"

view/public/index.html

@@ -9,12 +9,12 @@
 
 	<link rel='icon' type='image/png' href='favicon.png'>
 	<link rel='stylesheet' href='global.css'>
-	<link rel='stylesheet' href='build/bundle.css'>
+	<link rel='stylesheet' href='build/main.css'>
 
 	<link rel="preconnect" href="https://fonts.gstatic.com">
 	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;900&display=swap" rel="stylesheet">
 
-	<script defer src='build/bundle.js'></script>
+	<script defer src='build/main.js'></script>
 </head>
 
 <body>

view/src/components/Analyzer.svelte

@@ -40,8 +40,8 @@
     {#each result as color, i}
       <p>
         {Math.floor(
-          (correctDistortion ? color.value : color.distortedValue) * 1000
+          (correctDistortion ? color.value : color.distortedValue) * 10000
-        ) / 10}%
+        ) / 100}%
       </p>
       <div
         transition:scaleX={{ duration: 500, delay: i * 200 }}

view/src/components/Editor/Painter.svelte

@@ -196,9 +196,17 @@
     //Caclulate y position of pixel
     const y = Math.floor(my * wrapperHeightRatio);
     debugY = y;
+    const height = image.height;
 
     // KarlKilian Formel
-    debugValue = (2 * Math.sqrt(y * (image.height - y))) / image.height;
+    //debugValue = (2 * Math.sqrt(y * (image.height - y))) / image.height;
+
+    // New new formel
+    debugValue = Math.cos(
+      (((360 / height ** 2) * y ** 2 + (-360 / height) * y + 90) / 360) *
+        2 *
+        Math.PI
+    );
 
     if (isDown) {
       if (activeTool === "pan") {

view/src/components/Editor/TopBar.svelte

@@ -4,7 +4,7 @@
   const minRadius = 1;
   const maxRadius = 100;
   export let brushRadius = 10;
-  export let layerOpacity = 50;
+  export const layerOpacity = 50;
 
   const colors = ["ff0000", "00ff00", "0000ff", "ffff00", "00ffff", "ff00ff"];
 
@@ -58,9 +58,6 @@
     grid-template-columns: 1fr auto;
   }
 
-  .color-wrapper {
-  }
-
   .color {
     display: inline-block;
     height: 20px;

view/src/helpers/AI.ts

@@ -1,6 +1,6 @@
 import { bufToImageUrl } from ".";
 
-const worker = new Worker("build/ai-worker.js");
+const worker = new Worker("build/workers/ai-worker.js");
 
 let i = 0;
 

view/src/helpers/CountPixels.ts

@@ -1,6 +1,6 @@
 import { images } from "../stores";
 
-const worker = new Worker("worker.js");
+const worker = new Worker("build/workers/pixel-worker.js");
 
 let i = 0;
 

view/src/routes/list.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Cross } from "../icons";
-  import { fly, fade } from "svelte/transition";
+  import { fly, fade, slide } from "svelte/transition";
   import { images as imageData, route } from "stores";
   import { bufToImageUrl, AI, downloadImage } from "../helpers";
   import type { Writable } from "svelte/store";
@@ -88,7 +88,7 @@
     </div>
 
     {#if i === showAnalyzerIndex}
-      <div transition:fly={{ x: -50 }}>
+      <div in:slide out:slide>
         <Analyzer {img} />
       </div>
     {/if}

view/src/workers/pixel-worker.ts

@@ -1,4 +1,4 @@
-
+export { };
 
 self.addEventListener('message', function (e) {
 
@@ -30,7 +30,18 @@ self.addEventListener('message', function (e) {
     // KarlKilian Formel
     //const pixelValue = Math.cos(360 / (Math.pow(height, 2)) * Math.pow(y, 2) + (-360 / height) * y + 90);
 
-    const pixelValue = (2 * Math.sqrt(y * (height - y))) / height;
+
+    //const pixelValue = (2 * Math.sqrt(y * (height - y))) / height;
+
+    // 0.2
+    // 0.133
+    const calibrationFaktor = 0.133;
+
+    const pixelValue = Math.cos(
+      (((360 / height ** 2) * y ** 2 + (-360 / height) * y + 90) / 360) *
+      (2 + calibrationFaktor) *
+      Math.PI
+    );
 
     oldStore[id] = oldStore[id] + 1 || 1;
 
@@ -69,5 +80,6 @@ self.addEventListener('message', function (e) {
     }
   }).sort((a, b) => a.value > b.value ? -1 : 1)
 
+  //@ts-ignore
   self.postMessage({ result, i });
 }, false);