feat: add some ai stuff

view/src/ai.ts

@@ -0,0 +1,36 @@
+import '@tensorflow/tfjs-backend-webgl';
+import * as tfconv from '@tensorflow/tfjs-converter';
+import * as deeplab from '@tensorflow-models/deeplab';
+
+const createModel = async () => {
+
+  console.log("Ezzzz")
+  const base = 'pascal';        // set to your preferred model, out of `pascal`,
+  // `cityscapes` and `ade20k`
+  const quantizationBytes = 2;  // either 1, 2 or 4
+  // use the getURL utility function to get the URL to the pre-trained weights
+  const modelUrl = deeplab.getURL(base, quantizationBytes);
+  const rawModel = await tfconv.loadGraphModel(modelUrl);
+  const modelName = 'pascal';  // set to your preferred model, out of `pascal`,
+  // `cityscapes` and `ade20k`
+  return new deeplab.SemanticSegmentation(rawModel);
+};
+
+const model = createModel();
+model.then(() => console.log(`Loaded the model successfully!`));
+
+self.addEventListener('message', async (e) => {
+
+  const { pixels, width, height } = e.data;
+
+  console.log(pixels, width, height)
+
+  var array = new Uint8ClampedArray(pixels);
+
+  var image = new ImageData(array, width, height);
+
+  console.log("model", await (await model).segment(image))
+
+  console.log(e);
+
+});

view/src/components/Analyzer.svelte

@@ -5,7 +5,7 @@
 
   import { quartInOut } from "svelte/easing";
 
-  let visible = true;
+  let correctDistortion = true;
 
   function scaleX(node, { duration, delay }) {
     return {
@@ -20,23 +20,18 @@
     };
   }
 
-  const prom = countPixels(img.overlayData)
-    .then((res) => {
-      return Object.keys(res).map((c) => {
-        const [r, g, b] = c.split("-").map((n) => parseInt(n) * 255);
-
-        return {
-          r,
-          g,
-          b,
-          amount: res[c],
-        };
-      });
-    })
-    .then((colors) => colors.sort((a, b) => (a.amount > b.amount ? -1 : 1)));
+  const prom = countPixels(img, correctDistortion);
 </script>
 
-<h3>ANALYZER</h3>
+<div id="header">
+  <h3>ANALYZER</h3>
+  <label for="correct-distort">Correct Distortion</label>
+  <input
+    id="correct-distort"
+    type="checkbox"
+    bind:checked={correctDistortion}
+  />
+</div>
 
 {#await prom}
   <p>Loading...</p>
@@ -44,20 +39,36 @@
   <div class="list">
     {#each result as color, i}
       <p>
-        {Math.floor(color.amount * 1000) / 10}%
+        {Math.floor(
+          (correctDistortion ? color.value : color.distortedValue) * 1000
+        ) / 10}%
       </p>
       <div
         transition:scaleX={{ duration: 500, delay: i * 200 }}
         class="bar"
-        style={`width: ${color.amount * 100}%; background-color: rgb(${
-          color.r
-        }, ${color.g}, ${color.b})`}
+        style={`width: ${
+          (correctDistortion ? color.value : color.distortedValue) * 100
+        }%; background-color:${color.color}`}
       />
     {/each}
   </div>
 {/await}
 
 <style>
+  #header {
+    display: flex;
+    align-items: center;
+  }
+
+  #header > label {
+    margin-left: 10px;
+  }
+
+  #header > input {
+    margin: 0px;
+    margin-left: 5px;
+  }
+
   .list {
     display: grid;
     grid-template-rows: auto;
@@ -74,5 +85,6 @@
     height: 20px;
     margin-bottom: 20px;
     transform-origin: 0px 0px;
+    transition: width 0.3s ease;
   }
 </style>

view/src/components/Editor/Painter.svelte

@@ -45,6 +45,8 @@
   let my = 0;
   let downX, downOffset;
 
+  let debugValue = 0;
+
   let isStrPressed = false;
   let isSpacePressed = false;
   let lastActiveTool;
@@ -152,6 +154,16 @@
 
     isOriginal = e.target.id === "cx1";
 
+    //Caclulate y position of pixel
+    const y = my / wrapperHeightRatio;
+
+    // KarlKilian Formel
+    debugValue = Math.cos(
+      (360 / Math.pow(image.height, 2)) * Math.pow(y, 2) +
+        (-360 / image.height) * y +
+        90
+    );
+
     if (isDown) {
       if (activeTool === "pan") {
         // TODO fix overflowiung
@@ -291,7 +303,7 @@
     }%)); opacity: ${(layerOpacity / 100) * 0.5};`}
   />
 
-  <!-- <p>{topLeftY}|{my}</p> -->
+  <p>{debugValue}|{my}</p>
 
   <canvas class:visible={mode === "3d"} bind:this={canvas3D} />
 </div>

view/src/helpers/AI.ts

@@ -0,0 +1,20 @@
+const worker = new Worker("build/ai-worker.js");
+
+let i = 0;
+
+let cb = {};
+
+worker.addEventListener("message", ev => {
+  if (ev.data.i in cb) {
+    cb[ev.data.i](ev.data.res);
+  }
+})
+
+const analyze = (img: Image) => new Promise((res, rej) => {
+  i++;
+  const _i = i;
+  worker.postMessage({ i: _i, pixels: img.data, width: img.width, height: img.height });
+  cb[_i] = res;
+});
+
+export default { analyze }

view/src/helpers/CountPixels.ts

@@ -1,3 +1,5 @@
+import { images } from "../stores";
+
 const worker = new Worker("worker.js");
 
 let i = 0;
@@ -6,13 +8,20 @@ let cb = {};
 
 worker.addEventListener("message", ev => {
   if (ev.data.i in cb) {
-    cb[ev.data.i](ev.data.res);
+    cb[ev.data.i](ev.data.result);
   }
 })
 
-export default (arr: ArrayBuffer) => new Promise((res, rej) => {
+interface res {
+  color: string
+  distortedValue: number
+  id: string
+  value: number
+}
+
+export default (img: Image, correctDistortion: boolean): Promise<res[]> => new Promise((res, rej) => {
   i++;
   const _i = i;
-  worker.postMessage({ i: _i, arr });
+  worker.postMessage({ i: _i, pixels: img.overlayData, width: img.width, height: img.height, correctDistortion });
   cb[_i] = res;
 });

view/src/helpers/index.ts

@@ -1,3 +1,4 @@
 export { default as bufToImageUrl } from "./BuffToImg";
 export { default as fileToImage } from "./FileToImage";
-export { default as countPixels } from "./CountPixels";
+export { default as countPixels } from "./CountPixels";
+export { default as AI } from "./AI";

view/src/routes/list.svelte

@@ -2,7 +2,7 @@
   import { Cross } from "../icons";
   import { fly, fade } from "svelte/transition";
   import { images as imageData, route } from "stores";
-  import { bufToImageUrl } from "helpers";
+  import { bufToImageUrl, AI } from "../helpers";
   import type { Writable } from "svelte/store";
 
   import Toast from "../components/Toast";
@@ -59,6 +59,7 @@
                 showAnalyzerIndex = undefined;
               } else {
                 showAnalyzerIndex = i;
+                //AI.analyze(img);
               }
             } else {
               showAnalyzerIndex = undefined;