diff --git a/README.md b/README.md
index 2ac55e0..1fa9b06 100644
--- a/README.md
+++ b/README.md
@@ -6,4 +6,10 @@
 
 ## how it works
 
-using an image an a depth map, this tool creates a fake 3d effect by moving parts of the plane where the image is shown according to the depth map (so that the foreground is closer to the viewer than the background). 
\ No newline at end of file
+using an image and a depth map, this tool creates a fake 3d effect by moving parts of the plane where the image is shown according to the depth map (so that the foreground is closer to the viewer than the background). 
+
+## Credit
+
+The on device image to depth estimation is based on [RGB-Depthify](https://github.com/jankais3r/RGB-Depthify), which is based on [mobilePydnet](https://github.com/FilippoAleotti/mobilePydnet). Code for both of these is licensed under the APACHE version 2.0 license, so the same goes for that part of this code (`Convert.svelte` and `model.ts` in `/src/lib/`). Weights for the network can be used for research purposes only.
+
+The rest of the code is licensed under the MIT license.
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 67baed3..bcae371 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"@sveltejs/adapter-static": "^3.0.1",
+				"@tensorflow/tfjs": "^4.16.0",
 				"@threlte/core": "^7.0.12",
 				"@threlte/extras": "^8.2.1",
 				"svelte-gestures": "^1.5.2",
@@ -929,6 +930,119 @@
 				"vite": "^5.0.0"
 			}
 		},
+		"node_modules/@tensorflow/tfjs": {
+			"version": "4.16.0",
+			"resolved": "https://registry.npmjs.org/@tensorflow/tfjs/-/tfjs-4.16.0.tgz",
+			"integrity": "sha512-wBs29w1rsE6XpKdwJ7vrxGJ+nbyU7+51Pgj1ZhLFdv5ZXwF5irHbNX1DegSd/8VbHPEY6mQSPvEuSe1mIhMw5Q==",
+			"dependencies": {
+				"@tensorflow/tfjs-backend-cpu": "4.16.0",
+				"@tensorflow/tfjs-backend-webgl": "4.16.0",
+				"@tensorflow/tfjs-converter": "4.16.0",
+				"@tensorflow/tfjs-core": "4.16.0",
+				"@tensorflow/tfjs-data": "4.16.0",
+				"@tensorflow/tfjs-layers": "4.16.0",
+				"argparse": "^1.0.10",
+				"chalk": "^4.1.0",
+				"core-js": "3.29.1",
+				"regenerator-runtime": "^0.13.5",
+				"yargs": "^16.0.3"
+			},
+			"bin": {
+				"tfjs-custom-module": "dist/tools/custom_module/cli.js"
+			}
+		},
+		"node_modules/@tensorflow/tfjs-backend-cpu": {
+			"version": "4.16.0",
+			"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-cpu/-/tfjs-backend-cpu-4.16.0.tgz",
+			"integrity": "sha512-bQFu7FTUgqgss1AwnqSwQ1f02IPrfLLc2lLn5pyyVrS6Ex7zA6Y4YkfktqoJSRE6LlRZv3vxSriUGE1avRe4qQ==",
+			"dependencies": {
+				"@types/seedrandom": "^2.4.28",
+				"seedrandom": "^3.0.5"
+			},
+			"engines": {
+				"yarn": ">= 1.3.2"
+			},
+			"peerDependencies": {
+				"@tensorflow/tfjs-core": "4.16.0"
+			}
+		},
+		"node_modules/@tensorflow/tfjs-backend-webgl": {
+			"version": "4.16.0",
+			"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-4.16.0.tgz",
+			"integrity": "sha512-cIGZWuY892iwTRokbDj3qsLi0AlpQn+U7rzB1mddhHrWr9kBXrrnAvIq0h2aiFzRFNePWUcsbgK+HmYG32kosg==",
+			"dependencies": {
+				"@tensorflow/tfjs-backend-cpu": "4.16.0",
+				"@types/offscreencanvas": "~2019.3.0",
+				"@types/seedrandom": "^2.4.28",
+				"seedrandom": "^3.0.5"
+			},
+			"engines": {
+				"yarn": ">= 1.3.2"
+			},
+			"peerDependencies": {
+				"@tensorflow/tfjs-core": "4.16.0"
+			}
+		},
+		"node_modules/@tensorflow/tfjs-converter": {
+			"version": "4.16.0",
+			"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-4.16.0.tgz",
+			"integrity": "sha512-gd8dHl9tqEPQOHZLAUza713nKr42rpvUXrtm7yUhk10THvJT6TXe9Q2AJKmni8J3vfR+ghsCh77F8D4RbShx1Q==",
+			"peerDependencies": {
+				"@tensorflow/tfjs-core": "4.16.0"
+			}
+		},
+		"node_modules/@tensorflow/tfjs-core": {
+			"version": "4.16.0",
+			"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-4.16.0.tgz",
+			"integrity": "sha512-MarAtO+Up6wA8pI9QDpQOwwJgb/imYMN++tsoaalyOEE9+B5HS4lQldxDJKXO8Frf4DyXf4FItJktEXaiPfRHw==",
+			"dependencies": {
+				"@types/long": "^4.0.1",
+				"@types/offscreencanvas": "~2019.7.0",
+				"@types/seedrandom": "^2.4.28",
+				"@webgpu/types": "0.1.38",
+				"long": "4.0.0",
+				"node-fetch": "~2.6.1",
+				"seedrandom": "^3.0.5"
+			},
+			"engines": {
+				"yarn": ">= 1.3.2"
+			}
+		},
+		"node_modules/@tensorflow/tfjs-core/node_modules/@types/offscreencanvas": {
+			"version": "2019.7.3",
+			"resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+			"integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A=="
+		},
+		"node_modules/@tensorflow/tfjs-data": {
+			"version": "4.16.0",
+			"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-data/-/tfjs-data-4.16.0.tgz",
+			"integrity": "sha512-HAmB4/3mvR1t/fuxu4Vx7hEGb4w8EcJoPNlzRHLr0+cYOApii6HQ/OksCcp7Ll8JoCb/SruVR3En3WSjSUu8YQ==",
+			"dependencies": {
+				"@types/node-fetch": "^2.1.2",
+				"node-fetch": "~2.6.1",
+				"string_decoder": "^1.3.0"
+			},
+			"peerDependencies": {
+				"@tensorflow/tfjs-core": "4.16.0",
+				"seedrandom": "^3.0.5"
+			}
+		},
+		"node_modules/@tensorflow/tfjs-layers": {
+			"version": "4.16.0",
+			"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-layers/-/tfjs-layers-4.16.0.tgz",
+			"integrity": "sha512-LNsbIF3SX45gG2FGo/34IPU+ObRCY5Z2znnp8cSqNZ96v52Q3nZ8GbyjYU9xDHv7eREKTSC2Aga2eGZ9Hfsl/g==",
+			"peerDependencies": {
+				"@tensorflow/tfjs-core": "4.16.0"
+			}
+		},
+		"node_modules/@tensorflow/tfjs/node_modules/argparse": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+			"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+			"dependencies": {
+				"sprintf-js": "~1.0.2"
+			}
+		},
 		"node_modules/@threlte/core": {
 			"version": "7.0.12",
 			"resolved": "https://registry.npmjs.org/@threlte/core/-/core-7.0.12.tgz",
@@ -979,12 +1093,44 @@
 			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
 			"dev": true
 		},
+		"node_modules/@types/long": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.2.tgz",
+			"integrity": "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA=="
+		},
+		"node_modules/@types/node": {
+			"version": "20.11.5",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.5.tgz",
+			"integrity": "sha512-g557vgQjUUfN76MZAN/dt1z3dzcUsimuysco0KeluHgrPdJXkP/XdAURgyO2W9fZWHRtRBiVKzKn8vyOAwlG+w==",
+			"dependencies": {
+				"undici-types": "~5.26.4"
+			}
+		},
+		"node_modules/@types/node-fetch": {
+			"version": "2.6.11",
+			"resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.11.tgz",
+			"integrity": "sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==",
+			"dependencies": {
+				"@types/node": "*",
+				"form-data": "^4.0.0"
+			}
+		},
+		"node_modules/@types/offscreencanvas": {
+			"version": "2019.3.0",
+			"resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.3.0.tgz",
+			"integrity": "sha512-esIJx9bQg+QYF0ra8GnvfianIY8qWB0GBx54PK5Eps6m+xTj86KLavHv6qDhzKcu5UUOgNfJ2pWaIIV7TRUd9Q=="
+		},
 		"node_modules/@types/pug": {
 			"version": "2.0.10",
 			"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.10.tgz",
 			"integrity": "sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==",
 			"dev": true
 		},
+		"node_modules/@types/seedrandom": {
+			"version": "2.4.34",
+			"resolved": "https://registry.npmjs.org/@types/seedrandom/-/seedrandom-2.4.34.tgz",
+			"integrity": "sha512-ytDiArvrn/3Xk6/vtylys5tlY6eo7Ane0hvcx++TKo6RxQXuVfW0AF/oeWqAj9dN29SyhtawuXstgmPlwNcv/A=="
+		},
 		"node_modules/@types/semver": {
 			"version": "7.5.6",
 			"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz",
@@ -1211,6 +1357,11 @@
 			"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
 			"dev": true
 		},
+		"node_modules/@webgpu/types": {
+			"version": "0.1.38",
+			"resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.38.tgz",
+			"integrity": "sha512-7LrhVKz2PRh+DD7+S+PVaFd5HxaWQvoMqBbsV9fNJO1pjUs1P8bM2vQVNfk+3URTqbuTI7gkXi0rfsN0IadoBA=="
+		},
 		"node_modules/acorn": {
 			"version": "8.11.3",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -1251,7 +1402,6 @@
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
 			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-			"dev": true,
 			"engines": {
 				"node": ">=8"
 			}
@@ -1260,7 +1410,6 @@
 			"version": "4.3.0",
 			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
 			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-			"dev": true,
 			"dependencies": {
 				"color-convert": "^2.0.1"
 			},
@@ -1319,6 +1468,11 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/asynckit": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+		},
 		"node_modules/autoprefixer": {
 			"version": "10.4.17",
 			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.17.tgz",
@@ -1491,7 +1645,6 @@
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
 			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-			"dev": true,
 			"dependencies": {
 				"ansi-styles": "^4.1.0",
 				"supports-color": "^7.1.0"
@@ -1542,6 +1695,50 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/cliui": {
+			"version": "7.0.4",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+			"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.0",
+				"wrap-ansi": "^7.0.0"
+			}
+		},
+		"node_modules/cliui/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+		},
+		"node_modules/cliui/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/cliui/node_modules/wrap-ansi": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
+		},
 		"node_modules/code-red": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
@@ -1558,7 +1755,6 @@
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
 			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-			"dev": true,
 			"dependencies": {
 				"color-name": "~1.1.4"
 			},
@@ -1569,8 +1765,18 @@
 		"node_modules/color-name": {
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-			"dev": true
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+		},
+		"node_modules/combined-stream": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+			"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+			"dependencies": {
+				"delayed-stream": "~1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
 		},
 		"node_modules/commander": {
 			"version": "4.1.1",
@@ -1595,6 +1801,16 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/core-js": {
+			"version": "3.29.1",
+			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.29.1.tgz",
+			"integrity": "sha512-+jwgnhg6cQxKYIIjGtAHq2nwUOolo9eoFZ4sHfUH09BLXBgxnH4gA0zEd+t+BO2cNB8idaBtZFcFTRjQJRJmAw==",
+			"hasInstallScript": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/core-js"
+			}
+		},
 		"node_modules/cross-spawn": {
 			"version": "7.0.3",
 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1663,6 +1879,14 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/delayed-stream": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
 		"node_modules/dequal": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -1786,7 +2010,6 @@
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
 			"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-			"dev": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -2176,6 +2399,19 @@
 				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
+		"node_modules/form-data": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+			"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+			"dependencies": {
+				"asynckit": "^0.4.0",
+				"combined-stream": "^1.0.8",
+				"mime-types": "^2.1.12"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/fraction.js": {
 			"version": "4.3.7",
 			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -2217,6 +2453,14 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/get-caller-file": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+			"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+			"engines": {
+				"node": "6.* || 8.* || >= 10.*"
+			}
+		},
 		"node_modules/glob": {
 			"version": "7.2.3",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -2332,7 +2576,6 @@
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
 			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-			"dev": true,
 			"engines": {
 				"node": ">=8"
 			}
@@ -2445,7 +2688,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
 			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-			"dev": true,
 			"engines": {
 				"node": ">=8"
 			}
@@ -2628,6 +2870,11 @@
 			"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
 			"dev": true
 		},
+		"node_modules/long": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+			"integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+		},
 		"node_modules/lru-cache": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -2684,6 +2931,25 @@
 				"node": ">=8.6"
 			}
 		},
+		"node_modules/mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"dependencies": {
+				"mime-db": "1.52.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/min-indent": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -2798,6 +3064,25 @@
 			"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
 			"dev": true
 		},
+		"node_modules/node-fetch": {
+			"version": "2.6.13",
+			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.13.tgz",
+			"integrity": "sha512-StxNAxh15zr77QvvkmveSQ8uCQ4+v5FkvNTj0OESmiHu+VRi/gXArXtkWMElOsOUNLtUEvI4yS+rdtOHZTwlQA==",
+			"dependencies": {
+				"whatwg-url": "^5.0.0"
+			},
+			"engines": {
+				"node": "4.x || >=6.0.0"
+			},
+			"peerDependencies": {
+				"encoding": "^0.1.0"
+			},
+			"peerDependenciesMeta": {
+				"encoding": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/node-releases": {
 			"version": "2.0.14",
 			"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@@ -3276,6 +3561,19 @@
 				"node": ">=8.10.0"
 			}
 		},
+		"node_modules/regenerator-runtime": {
+			"version": "0.13.11",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+			"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+		},
+		"node_modules/require-directory": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+			"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/require-from-string": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -3400,6 +3698,25 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/safe-buffer": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+			"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
 		"node_modules/sander": {
 			"version": "0.5.1",
 			"resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
@@ -3424,6 +3741,11 @@
 				"rimraf": "bin.js"
 			}
 		},
+		"node_modules/seedrandom": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
+			"integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
+		},
 		"node_modules/semver": {
 			"version": "7.5.4",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -3522,6 +3844,19 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/sprintf-js": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+			"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+		},
+		"node_modules/string_decoder": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+			"integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+			"dependencies": {
+				"safe-buffer": "~5.2.0"
+			}
+		},
 		"node_modules/string-width": {
 			"version": "5.1.2",
 			"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -3591,7 +3926,6 @@
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
 			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-			"dev": true,
 			"dependencies": {
 				"ansi-regex": "^5.0.1"
 			},
@@ -3684,7 +4018,6 @@
 			"version": "7.2.0",
 			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
 			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-			"dev": true,
 			"dependencies": {
 				"has-flag": "^4.0.0"
 			},
@@ -4007,6 +4340,11 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/tr46": {
+			"version": "0.0.3",
+			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+		},
 		"node_modules/troika-three-text": {
 			"version": "0.47.2",
 			"resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.47.2.tgz",
@@ -4095,6 +4433,11 @@
 				"node": ">=14.17"
 			}
 		},
+		"node_modules/undici-types": {
+			"version": "5.26.5",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+			"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+		},
 		"node_modules/update-browserslist-db": {
 			"version": "1.0.13",
 			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
@@ -4212,6 +4555,20 @@
 			"resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
 			"integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA=="
 		},
+		"node_modules/webidl-conversions": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+		},
+		"node_modules/whatwg-url": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+			"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+			"dependencies": {
+				"tr46": "~0.0.3",
+				"webidl-conversions": "^3.0.0"
+			}
+		},
 		"node_modules/which": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -4327,6 +4684,14 @@
 			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
 			"dev": true
 		},
+		"node_modules/y18n": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+			"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/yallist": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -4342,6 +4707,49 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/yargs": {
+			"version": "16.2.0",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+			"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+			"dependencies": {
+				"cliui": "^7.0.2",
+				"escalade": "^3.1.1",
+				"get-caller-file": "^2.0.5",
+				"require-directory": "^2.1.1",
+				"string-width": "^4.2.0",
+				"y18n": "^5.0.5",
+				"yargs-parser": "^20.2.2"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/yargs-parser": {
+			"version": "20.2.9",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+			"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/yargs/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+		},
+		"node_modules/yargs/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/yocto-queue": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 3b11e98..ed2f851 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
 	"type": "module",
 	"dependencies": {
 		"@sveltejs/adapter-static": "^3.0.1",
+		"@tensorflow/tfjs": "^4.16.0",
 		"@threlte/core": "^7.0.12",
 		"@threlte/extras": "^8.2.1",
 		"svelte-gestures": "^1.5.2",
diff --git a/src/app.html b/src/app.html
index d0cde1f..31886af 100644
--- a/src/app.html
+++ b/src/app.html
@@ -4,6 +4,7 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>image2fake3d</title>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover" class="bg-black overflow-hidden">
diff --git a/src/lib/Convert.svelte b/src/lib/Convert.svelte
new file mode 100644
index 0000000..77508d7
--- /dev/null
+++ b/src/lib/Convert.svelte
@@ -0,0 +1,192 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { Pydnet } from "./model";
+	import { currentImageIndex, customImages, isRunning, showMenu, useCustomImage } from "$lib/store";
+
+	let isDragging = false;
+
+	let input: HTMLInputElement;
+
+	let files: FileList;
+	let data: HTMLLabelElement;
+
+	$: if (files) {
+		const file = files?.[0];
+
+		if (file) {
+			runInference(file);
+		}
+	}
+
+	function handleDragOver() {
+		isDragging = true;
+	}
+	function handleDragOverEnd() {
+		isDragging = false;
+	}
+	function handleDrop(event: DragEvent) {
+		isDragging = false;
+
+		if (event.dataTransfer && event.dataTransfer.files) {
+			const droppedFiles = Array.from(event.dataTransfer.files);
+			if (droppedFiles.length > 0) {
+				// turn into urls
+				files = event.dataTransfer.files;
+			}
+		}
+	}
+
+	let model: Pydnet | null = null;
+
+	onMount(async () => {
+		if (!('createImageBitmap' in window)) {
+			// @ts-ignore
+			window.createImageBitmap = async function (data: ImageData) {
+				return new Promise((resolve, reject) => {
+					let dataURL;
+					const canvas = document.createElement('canvas');
+					const ctx = canvas.getContext('2d');
+					if(!ctx) throw new Error('Context not found');
+					canvas.width = data.width;
+					canvas.height = data.height;
+					ctx.putImageData(data, 0, 0);
+					dataURL = canvas.toDataURL();
+
+					const img = document.createElement('img');
+					img.addEventListener('load', function () {
+						resolve(this);
+					});
+					img.src = dataURL;
+				});
+			};
+		}
+
+		model = await new Pydnet().init();
+	});
+
+	async function runInference(file: File) {
+		var fr = new FileReader();
+		fr.onload = function () {
+			var img = new Image();
+			img.onload = function () {
+				display_result(img);
+			};
+			if(fr.result === null || typeof fr.result !== 'string') throw new Error('Result not found');
+			img.src = fr.result;
+		};
+
+		fr.readAsDataURL(file);
+	}
+
+	async function display_result(img: HTMLImageElement) {
+		if(!model) throw new Error('Model not loaded');
+		var results = await model.predict(img);
+
+		let canvas = document.createElement('canvas');
+		let ctx = canvas.getContext('2d');
+		canvas.width = img.width;
+		canvas.height = img.height;
+
+		let inputCanvas = document.createElement('canvas');
+		let inputCtx = inputCanvas.getContext('2d');
+		inputCanvas.width = img.width;
+		inputCanvas.height = img.height;
+		if(inputCtx) inputCtx.drawImage(img, 0, 0);
+
+		let buffer = new Uint8ClampedArray(model.width * model.height * 4);
+		let i = 0;
+		for (let y = 0; y < model.height; y++) {
+			for (let x = 0; x < model.width; x++) {
+				let index = y * model.width + x;
+				let depth = results[0][index];
+				buffer[i] = depth;
+				buffer[i + 1] = depth;
+				buffer[i + 2] = depth;
+				buffer[i + 3] = 255.0;
+				i += 4;
+			}
+		}
+
+		const imageData = new ImageData(buffer, model.width, model.height);
+		const renderer = await createImageBitmap(imageData);
+		if(!ctx) throw new Error('Context not found');
+		ctx.drawImage(renderer, 0, 0, img.width, img.height);
+
+		setTimeout(function () {
+			$isRunning = true;
+			$showMenu = false;
+
+			$customImages = [
+				...$customImages,
+				{
+					image: inputCanvas.toDataURL(),
+					depth: canvas.toDataURL(),
+				}
+			];
+			$currentImageIndex = $customImages.length - 1;
+
+			$useCustomImage = true;
+		}, 350);
+	}
+</script>
+
+<div>
+	<label
+		for={data?.innerText.toLowerCase()}
+		bind:this={data}
+		class="block text-lg my-2 font-medium leading-6 text-neutral-900 dark:text-white"
+		><slot>Try it with your image</slot></label
+	>
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class="flex flex-col">
+		<button
+			type="button"
+			class="mt-2 flex flex-col justify-center items-center rounded-lg border border-dashed border-neutral-900/25 dark:border-neutral-100/25 px-1 py-10 relative overflow-hidden h-40 w-full hover:bg-black/5 dark:hover:bg-white/5 {isDragging
+				? 'bg-black/5 dark:bg-white/5'
+				: ''}"
+			on:dragover|preventDefault={handleDragOver}
+			on:drop|preventDefault={handleDrop}
+			on:dragleave|preventDefault={handleDragOverEnd}
+			on:dragend|preventDefault={handleDragOverEnd}
+			on:click={() => input.click()}
+		>
+				<svg
+					class="mx-auto h-12 w-12 text-neutral-300 dark:text-neutral-400"
+					viewBox="0 0 24 24"
+					fill="currentColor"
+					aria-hidden="true"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+				<p class="text-sm leading-6 text-neutral-300 dark:text-neutral-400">No file added</p>
+			
+		</button>
+		<div class="text-center">
+			<div class="mt-2 text-sm leading-6 text-neutral-600 dark:text-neutral-300">
+				<label
+					for={data?.innerText.toLowerCase()}
+					class="relative cursor-pointer rounded-md font-semibold text-accent-600 dark:text-accent-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-accent-600 focus-within:ring-offset-2 hover:text-accent-500 dark:hover:text-accent-400"
+				>
+					<button type="button" on:click={() => input.click()}>Browse files</button>
+
+					<input
+						id={data?.innerText.toLowerCase()}
+						bind:this={input}
+						name={data?.innerText.toLowerCase()}
+						type="file"
+						accept="image/png, image/jpeg, image/webp"
+						class="sr-only"
+						bind:files
+					/>
+				</label>
+
+				<p class="">or drag and drop</p>
+				<p class="pt-2 text-xs">Your image stays on your device</p>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/Scene.svelte b/src/lib/Scene.svelte
similarity index 60%
rename from src/routes/Scene.svelte
rename to src/lib/Scene.svelte
index db11f65..6032a79 100644
--- a/src/routes/Scene.svelte
+++ b/src/lib/Scene.svelte
@@ -1,16 +1,27 @@
 <script lang="ts">
 	import { T, useTask } from '@threlte/core';
-	import { useTexture, Align } from '@threlte/extras';
+	import { useTexture, Align, OrbitControls } from '@threlte/extras';
 
-	import { Vector2, ShaderMaterial, PlaneGeometry } from 'three';
+	import { Vector2, ShaderMaterial, PlaneGeometry, LinearEncoding } from 'three';
 
-	export let image: string;
-	export let depth: string;
+	import type { DepthImage } from '$lib/store';
 
-	const map = useTexture(image);
-	const depthMap = useTexture(depth);
+	export let image: DepthImage;
 
-	const mouse = new Vector2(0.5, 0.5);
+	const map = useTexture(image.image, {
+		transform: (texture) => {
+			texture.encoding = LinearEncoding
+			return texture;
+		}
+	});
+	const depthMap = useTexture(image.depth, {
+		transform: (texture) => {
+			//texture.encoding = LinearEncoding;
+			return texture;
+		}
+	});
+
+	const rotation = new Vector2(0.5, 0.5);
 
 	const uniforms = {
 		uTexture: { type: 't', value: map },
@@ -26,23 +37,24 @@ void main() {
     vUv = uv;
     // move z position based on the depth map
     float depth = texture2D(depthMap, vUv).r;
-    vec3 newPosition = position + vec3(0.0, 0.0, depth * 2.0);
+    vec3 newPosition = position + vec3(0.0, 0.0, depth * 1.5);
     gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
 }`,
 		fragmentShader: `
 uniform sampler2D uTexture;
+// uniform sampler2D depthMap;
+// uniform vec2 mouse;
 varying vec2 vUv;
 
 void main() {
+	// float shift = texture2D(depthMap, vUv).r;
+	// vec2 uv = vUv + mouse * shift * 0.03;
+
     gl_FragColor = texture2D(uTexture, vUv);
 }`
 	});
 
-	let h = 1344;
-	let w = 896;
-	let scl = 0.005;
-
-	const geometry = new PlaneGeometry(w * scl, h * scl, 500, 500);
+	const geometry = new PlaneGeometry(7, 7, 500, 500);
 
 	// Variables to store initial orientation
 	let initialAlpha = 0,
@@ -66,8 +78,8 @@ void main() {
 			const relativeBeta = (event.beta ?? 0) - initialBeta;
 			const relativeGamma = (event.gamma ?? 0) - initialGamma;
 
-			mouse.x = Math.min(Math.max(relativeGamma / 50, -0.5), 0.5);
-			mouse.y = Math.min(Math.max(relativeBeta / 50, -0.5), 0.5);
+			rotation.x = Math.min(Math.max(relativeGamma / 50, -0.5), 0.5);
+			rotation.y = Math.min(Math.max(relativeBeta / 50, -0.5), 0.5);
 		}
 		useOrientation = true;
 	}
@@ -76,20 +88,20 @@ void main() {
 
 	function onDocumentMouseMove(event: MouseEvent) {
 		// convert to [-0.5, 0.5]
-		mouse.x = event.clientX / window.innerWidth - 0.5;
-		mouse.y = 1 - event.clientY / window.innerHeight - 0.5;
+		rotation.x = event.clientX / window.innerWidth - 0.5;
+		rotation.y = 1 - event.clientY / window.innerHeight - 0.5;
 
 		mouseMoved = 3;
 	}
 
-	let time = 0;
+	export let time = 0;
 	const { stop, start } = useTask((dt) => {
 		if (mouseMoved > 0) {
 			mouseMoved -= dt;
 		} else {
 			time += dt;
-			mouse.x = Math.sin(time) * 0.5;
-			mouse.y = Math.cos(time) * 0.5;
+			rotation.x = Math.sin(time) * 0.5;
+			rotation.y = Math.cos(time) * 0.5;
 		}
 	});
 
@@ -108,19 +120,25 @@ void main() {
 	on:create={({ ref }) => {
 		ref.lookAt(0, 0, 0);
 	}}
-></T.PerspectiveCamera>
+>
+	<OrbitControls enableRotate={false} enablePan={false}></OrbitControls>
+</T.PerspectiveCamera>
 
 {#await map then mapValue}
 	{#await depthMap then depthValue}
 		<Align>
-			<T.Mesh rotation.x={mouse.y * 0.4} rotation.y={mouse.x * 0.4}>
+			<T.Mesh
+				rotation.x={rotation.y * 0.4}
+				rotation.y={rotation.x * 0.4}
+				scale.x={mapValue.image.width / mapValue.image.height}
+			>
 				<T is={geometry} />
 				<T
 					is={material}
 					uniforms={{
 						depthMap: { value: depthValue },
 						uTexture: { value: mapValue },
-						mouse: { value: mouse }
+						mouse: { value: rotation }
 					}}
 				/>
 			</T.Mesh>
diff --git a/src/lib/model.ts b/src/lib/model.ts
new file mode 100644
index 0000000..63680d4
--- /dev/null
+++ b/src/lib/model.ts
@@ -0,0 +1,64 @@
+import * as tf from '@tensorflow/tfjs';
+
+export class Pydnet {
+	model: tf.GraphModel<string | tf.io.IOHandler> | null;
+	height: number;
+	width: number;
+
+	constructor() {
+		this.model = null;
+		this.height = 0;
+		this.width = 0;
+	}
+
+	async init() {
+		const MODEL =
+			'https://raw.githubusercontent.com/FilippoAleotti/demo_live/master/assets/js/pydnet.json';
+		this.model = await tf.loadGraphModel(MODEL);
+		this.height = 384;
+		this.width = 640;
+		return this;
+	}
+
+	async predict(
+		img:
+			| HTMLCanvasElement
+			| HTMLImageElement
+			| ImageData
+			| HTMLVideoElement
+			| ImageBitmap
+			| tf.PixelData
+	) {
+		const [data, resizeInputData] = tf.tidy(() => {
+			if (!this.model) throw new Error('Model not loaded');
+
+			const raw_input = tf.browser.fromPixels(img);
+			let upsampledraw_input = tf.image.resizeBilinear(raw_input, [this.height, this.width]);
+			let preprocessedInput = upsampledraw_input.expandDims();
+			preprocessedInput = tf.div(preprocessedInput, 255.0);
+			let result = this.model.predict(preprocessedInput);
+			result = this.prepareOutput(result);
+			upsampledraw_input = tf.cast(upsampledraw_input, 'int32');
+			// @ts-expect-error - dont know
+			const data = result.dataSync();
+			const resizeInputData = upsampledraw_input.dataSync();
+			return [data, resizeInputData];
+		});
+		await tf.nextFrame();
+		return [data, resizeInputData];
+	}
+
+	// @ts-expect-error - dont know
+	prepareOutput(tensor) {
+		return tf.tidy(() => {
+			tensor = tf.relu(tensor);
+			tensor = tf.squeeze(tensor);
+			const min_value = tf.min(tensor);
+			const max_value = tf.max(tensor);
+			tensor = tf.div(tf.sub(tensor, min_value), tf.sub(max_value, min_value));
+			tensor = tf.mul(tensor, 255.0);
+			tensor = tf.cast(tensor, 'int32');
+			return tensor;
+		});
+	}
+}
diff --git a/src/lib/store.ts b/src/lib/store.ts
new file mode 100644
index 0000000..f9d13ec
--- /dev/null
+++ b/src/lib/store.ts
@@ -0,0 +1,48 @@
+import { writable, type Writable } from 'svelte/store';
+
+export type DepthImage = {
+	image: string;
+	depth: string;
+};
+
+export const customImages: Writable<DepthImage[]> = writable<DepthImage[]>([]);
+
+const folderPath = '/image2fake3d/images/';
+
+export const presetImages: DepthImage[] = [
+	{
+		image: folderPath + 'forest.png',
+		depth: folderPath + 'forest-depth.png'
+	},
+	{
+		image: folderPath + 'lion.png',
+		depth: folderPath + 'lion-depth.png'
+	},
+	{
+		image: folderPath + 'architecture.png',
+		depth: folderPath + 'architecture-depth.png'
+	},
+	{
+		image: folderPath + 'soccer.png',
+		depth: folderPath + 'soccer-depth.png'
+	},
+	{
+		image: folderPath + 'flowers.png',
+		depth: folderPath + 'flowers-depth.png'
+	},
+	{
+		image: folderPath + 'street.png',
+		depth: folderPath + 'street-depth.png'
+	},
+	{
+		image: folderPath + 'corals.png',
+		depth: folderPath + 'corals-depth.png'
+	}
+];
+
+export const useCustomImage: Writable<boolean> = writable<boolean>(false);
+
+export const currentImageIndex: Writable<number> = writable<number>(0);
+
+export const showMenu: Writable<boolean> = writable<boolean>(false);
+export const isRunning: Writable<boolean> = writable<boolean>(false);
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 889a40d..074a95f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,30 +1,28 @@
 <script lang="ts">
-	import { Canvas } from '@threlte/core';
-	import Scene from './Scene.svelte';
+	import { onMount } from 'svelte';
 	import { swipe } from 'svelte-gestures';
+	import { Canvas } from '@threlte/core';
 
-	let depth = [
-		'forest-depth.png',
-		'city-depth.png',
-		'flowers-depth.png',
-		'corals-depth.png',
-		'street-depth.png',
-		'architecture-depth.png',
-		'soccer-depth.png',
-		'lion-depth.png'
-	];
-	let images = [
-		'forest.png',
-		'city.png',
-		'flowers.png',
-		'corals.png',
-		'street.png',
-		'architecture.png',
-		'soccer.png',
-		'lion.png'
-	];
+	import Scene from '$lib/Scene.svelte';
+	import Convert from '$lib/Convert.svelte';
+	import {
+		customImages,
+		useCustomImage,
+		currentImageIndex,
+		presetImages,
+		isRunning,
+		showMenu
+	} from '$lib/store';
 
 	let useMotion = false;
+	let isCalibrated = false;
+
+	onMount(() => {
+		// @ts-ignore
+		if (typeof DeviceOrientationEvent.requestPermission !== 'function') {
+			$isRunning = true;
+		}
+	});
 
 	function requestOrientationPermission() {
 		// @ts-ignore
@@ -36,42 +34,55 @@
 		}
 	}
 
-	let isRunning = false;
-
-	let isCalibrated = false;
-
-	let showMenu = false;
-
-	let currentImage: number = 0;
-
 	function keyPressed(event: KeyboardEvent) {
 		if (event.key === 'Escape') {
-			showMenu = !showMenu;
-			isRunning = !isRunning;
+			$showMenu = !$showMenu;
+			$isRunning = !$isRunning;
 		}
 
 		if (event.key === 'ArrowLeft') {
-			setImage(currentImage - 1 + images.length);
+			setImage($currentImageIndex - 1);
 		}
 		if (event.key === 'ArrowRight') {
-			setImage(currentImage + 1);
+			setImage($currentImageIndex + 1);
 		}
 	}
-
-	function setImage(i: number) {
-		currentImage = i % images.length;
-		isCalibrated = false;
-	}
-
 	function onSwipe(event: CustomEvent) {
 		let direction = event.detail.direction;
 		if (direction === 'left') {
-			setImage(currentImage - 1 + images.length);
+			setImage($currentImageIndex - 1);
 		}
 		if (direction === 'right') {
-			setImage(currentImage + 1);
+			setImage($currentImageIndex + 1);
+		}
+	}
+
+	function setImage(i: number) {
+		if ($useCustomImage) {
+			if (i < 0) {
+				i = presetImages.length - 1;
+				$useCustomImage = false;
+			} else if (i >= $customImages.length) {
+				i = 0;
+				$useCustomImage = false;
+			}
+		} else {
+			if (i < 0) {
+				i = $customImages.length - 1;
+				if ($customImages.length === 0) {
+					i = presetImages.length - 1;
+				}
+				$useCustomImage = $customImages.length > 0;
+			} else if (i >= presetImages.length) {
+				i = 0;
+				$useCustomImage = $customImages.length > 0;
+			}
 		}
+		$currentImageIndex = i;
+		isCalibrated = false;
 	}
+
+	let time = 0;
 </script>
 
 <svelte:window on:keyup={keyPressed} />
@@ -81,36 +92,50 @@
 	use:swipe={{ timeframe: 300, minSwipeDistance: 100, touchAction: 'pan-x' }}
 	on:swipe={onSwipe}
 >
-	{#if !isRunning}
+	{#if !$isRunning}
 		<div class="fixed z-10 w-screen h-screen bg-black/70 backdrop-blur-sm">
 			<div class="flex items-center justify-center h-screen">
-				{#if !showMenu}
+				{#if !$showMenu}
 					<button
 						class="bg-white/5 hover:bg-white/10 border text-xl font-semibold border-white/10 text-white py-3 px-5 rounded-md m-4"
 						on:click={() => {
 							requestOrientationPermission();
-							isRunning = true;
+							$isRunning = true;
 						}}
 					>
 						start
 					</button>
 				{:else}
 					<div class="overflow-scroll h-screen">
-						<div class="grid grid-cols-2 md:grid-cols-3 max-w-3xl">
-							{#each images as image, i}
+						<div class="grid grid-cols-2 md:grid-cols-3 max-w-3xl p-4">
+							<div class="p-4 col-span-full">
+								<Convert />
+							</div>
+
+							{#each $customImages as image, i}
 								<button
 									on:click={() => {
-										currentImage = i;
-										showMenu = false;
-										isRunning = true;
+										$currentImageIndex = i;
+										$showMenu = false;
+										$isRunning = true;
+										$useCustomImage = true;
 									}}
 									class="hover:opacity-80"
 								>
-									<img
-										src={'/images/' + image}
-										alt="hello"
-										class="aspect-square w-full object-cover"
-									/>
+									<img src={image.image} alt="hello" class="aspect-square w-full object-cover" />
+								</button>
+							{/each}
+							{#each presetImages as image, i}
+								<button
+									on:click={() => {
+										$currentImageIndex = i;
+										$showMenu = false;
+										$isRunning = true;
+										$useCustomImage = false;
+									}}
+									class="hover:opacity-80"
+								>
+									<img src={image.image} alt="hello" class="aspect-square w-full object-cover" />
 								</button>
 							{/each}
 						</div>
@@ -119,18 +144,18 @@
 			</div>
 		</div>
 	{:else}
-		<div class="fixed bottom-0 text-white w-full flex justify-center text-xs">
-			<div class="px-3 py-1.5 bg-black/50 rounded-t-md">
-				{useMotion ? 'tilt phone' : 'move mouse'} to see effect
-			</div>
+		<div class="fixed bottom-0 text-neutral-200 w-full flex justify-center text-xs">
+			<!-- <div class="px-3 py-1.5 bg-black/50 font-semibold rounded-t-md text-center">
+				{useMotion ? 'tilt phone' : 'move mouse'} to see effect <br> {useMotion ? 'swipe' : 'arrow keys'} to change image
+			</div> -->
 		</div>
-		<div class="fixed bottom-0 text-white w-full flex justify-between text-xs">
+		<div class="fixed bottom-0 text-neutral-200 font-semibold w-full flex justify-between text-xs">
 			{#if useMotion}
 				<button
 					on:click={() => {
 						isCalibrated = false;
 					}}
-					class="px-3 py-1.5 bg-black/50 rounded-tr-md hover:bg-black/90">Reset</button
+					class="px-3 py-1.5 bg-black/50 rounded-tr-md hover:bg-black/90 hover:text-neutral-400">Reset</button
 				>
 			{:else}
 				<div></div>
@@ -138,20 +163,35 @@
 
 			<button
 				on:click={() => {
-					showMenu = true;
-					isRunning = false;
+					$showMenu = true;
+					$isRunning = false;
 				}}
-				class="px-3 py-1.5 bg-black/50 rounded-tl-md hover:bg-black/90">Change</button
+				class="px-3 py-1.5 bg-black/50 rounded-tl-md hover:bg-black/90 hover:text-neutral-400">Change</button
+			>
+		</div>
+
+		<div class="fixed top-2 right-2 text-neutral-600 hover:text-neutral-400">
+			<a href="https://github.com/flo-bit/image2fake3d" target="_blank"
+				><svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" 
+				class="w-6 h-6">
+					<path
+						fill-rule="evenodd"
+						d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+						clip-rule="evenodd"
+					/>
+				</svg></a
 			>
 		</div>
 	{/if}
 
 	<Canvas>
-		{#key currentImage}
+		{#key $currentImageIndex.toString() + $useCustomImage.toString()}
 			<Scene
+				bind:time
 				bind:isCalibrated
-				image={'/image2fake3d/images/' + images[currentImage]}
-				depth={'/image2fake3d/images/' + depth[currentImage]}
+				image={$useCustomImage
+					? $customImages[$currentImageIndex]
+					: presetImages[$currentImageIndex]}
 			/>
 		{/key}
 	</Canvas>
diff --git a/video.mov b/video.mov
index 303a3b7..637288e 100644
Binary files a/video.mov and b/video.mov differ
diff --git a/video.webp b/video.webp
index 84cbdbb..27dcdac 100644
Binary files a/video.webp and b/video.webp differ