feat: build with esbuild

This commit is contained in:
max_richter 2021-03-12 18:47:53 +01:00
parent 41243299af
commit 7f6d8b0896
13 changed files with 1455 additions and 22 deletions

31
view/build.js Normal file
View File

@ -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)
})

46
view/package-lock.json generated
View File

@ -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==",
"peer": true
"integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
},
"normalize-path": {
"version": "3.0.0",

View File

@ -3,8 +3,8 @@
"version": "1.0.0",
"private": true,
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"dev": "node build.js --watch",
"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 File

@ -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 File

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

View File

@ -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 File

@ -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 File

@ -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 File

@ -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 File

@ -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 File

@ -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);

1346
view/yarn.lock Normal file

File diff suppressed because it is too large Load Diff