remove ml5 dependency

bleeptrack · Aug 22, 2024 · 86612f4 · 86612f4
1 parent a2120a9
commit 86612f4
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 155 deletions.
diff --git a/static/VectorizerCanvas.js b/static/VectorizerCanvas.js
@@ -175,118 +175,11 @@ export class VectorizerCanvas extends HTMLElement {
 
 
 		console.log("lengths", this.mlStrokes.length )
-		const bodypix = ml5.bodyPix( () => {
+
+		//result ist das freigestellte bild
+
 
-			let options = {
-				palette: {
-					leftFace: {
-					id: 0,
-					color: [255, 255, 255],
-					},
-					rightFace: {
-					id: 1,
-					color: [255, 255, 255],
-					},
-					rightUpperLegFront: {
-					id: 2,
-					color: [100, 81, 196],
-					},
-					rightLowerLegBack: {
-					id: 3,
-					color: [92, 91, 206],
-					},
-					rightUpperLegBack: {
-					id: 4,
-					color: [84, 101, 214],
-					},
-					leftLowerLegFront: {
-					id: 5,
-					color: [75, 113, 221],
-					},
-					leftUpperLegFront: {
-					id: 6,
-					color: [66, 125, 224],
-					},
-					leftUpperLegBack: {
-					id: 7,
-					color: [56, 138, 226],
-					},
-					leftLowerLegBack: {
-					id: 8,
-					color: [48, 150, 224],
-					},
-					rightFeet: {
-					id: 9,
-					color: [40, 163, 220],
-					},
-					rightLowerLegFront: {
-					id: 10,
-					color: [33, 176, 214],
-					},
-					leftFeet: {
-					id: 11,
-					color: [29, 188, 205],
-					},
-					torsoFront: {
-					id: 12,
-					color: [26, 199, 194],
-					},
-					torsoBack: {
-					id: 13,
-					color: [26, 210, 182],
-					},
-					rightUpperArmFront: {
-					id: 14,
-					color: [28, 219, 169],
-					},
-					rightUpperArmBack: {
-					id: 15,
-					color: [33, 227, 155],
-					},
-					rightLowerArmBack: {
-					id: 16,
-					color: [41, 234, 141],
-					},
-					leftLowerArmFront: {
-					id: 17,
-					color: [51, 240, 128],
-					},
-					leftUpperArmFront: {
-					id: 18,
-					color: [64, 243, 116],
-					},
-					leftUpperArmBack: {
-					id: 19,
-					color: [79, 246, 105],
-					},
-					leftLowerArmBack: {
-					id: 20,
-					color: [96, 247, 97],
-					},
-					rightHand: {
-					id: 21,
-					color: [255, 255, 255],
-					},
-					rightLowerArmFront: {
-					id: 22,
-					color: [134, 245, 88],
-					},
-					leftHand: {
-					id: 23,
-					color: [255, 255, 255],
-					}
-				}
-			}
 
-			//canvasTMP? kommentar unter vectorize raster rein?
-			bodypix.segmentWithParts(this.canvasTMP, (error, result) => {
-
-				if (error) {
-					console.log(error);
-					return;
-				}
-				// log the result
-				console.log("MASK", result);
 
 				const myWorker = new Worker("static/worker-vectorize.js");
 				createImageBitmap( this.raster.getImageData() ).then( (bmp) => {
@@ -299,7 +192,6 @@ export class VectorizerCanvas extends HTMLElement {
 						vidw: this.vidw,
 						vidh: this.vidh,
 						res: this.res,
-						result: result,
 						video: this.canvasTMP.getContext('2d').getImageData(0,0, this.vidw, this.vidh)
 
 					});
@@ -336,42 +228,6 @@ export class VectorizerCanvas extends HTMLElement {
 
 				});
 
-
-			/*
-			
-				
-				
-			
-				this.vectorizeRaster(this.raster)
-				//raster.setImageData(context.getImageData(0, 0, vidw, vidh), [0,0])
-
-				res = res.map( (elem, idx) => (new Color(res[idx][0]/255, res[idx][1]/255, res[idx][2]/255) ) )
-				res = res.sort(function(a,b){
-					if( a.brightness < b.brightness){
-						return -1
-					}else{
-						return 1
-					}
-				})
-
-				this.compressColors(this.raster, res, result.backgroundMask)
-
-				this.shadow.getElementById("webcam").remove()
-				this.shadow.getElementById("edge-canvas").remove()
-				
-				this.samplePoints = lodash.shuffle(this.samplePoints)
-
-				console.log("lengths", this.samplePoints.length, this.mlStrokes.length )
-				while(this.samplePoints.length > 0 && this.mlStrokes.length > 0){
-					this.drawML()
-				}
-				*/
-			}, options);
-
-		});
-
-
-
 	}
 
 	tick(){

diff --git a/static/worker-vectorize.js b/static/worker-vectorize.js
@@ -31,8 +31,8 @@ onmessage = function(e) {
 		}
 	})
 
-	console.log("SEGMENTATION", data.result)
-	compressColors(data.video, res, data.result.partMask)
+
+	compressColors(data.video, res)
 
 	//this.shadow.getElementById("webcam").remove()
 	//this.shadow.getElementById("edge-canvas").remove()
@@ -177,20 +177,18 @@ onmessage = function(e) {
 		return Math.abs( Math.sqrt( Math.pow(c.red, 2) + Math.pow(c.blue, 2) + Math.pow(c.green, 2) ) )
 	}
 
-	function compressColors(imageData, palette, backgroundMask){
+	function compressColors(imageData, palette){
 		for(let x = 0; x<imageData.width; x++){
 			for(let y = 0; y<imageData.height; y++){
 
-				if(isTransparent(x, y, backgroundMask, imageData.width)){
-					setPixel(x, y, imageData, 255, 255, 255)
-				}else{
+
 					let closeColIdx = findClosestColor(getPixelAsColor(x,y,imageData), palette)
 
 					setPixel(x, y, imageData, Math.round(palette[closeColIdx].red*255), Math.round(palette[closeColIdx].green*255), Math.round(palette[closeColIdx].blue*255))
 					if(closeColIdx < 1){
 						this.samplePoints.push([x,y])
 					}
-				}
+
 			}
 		}
 	}

diff --git a/templates/webcam.html b/templates/webcam.html
@@ -9,7 +9,7 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js" integrity="sha512-ovjLI1ZcZe6bw+ImQ21r+sv8q/Vwob2kq7tFidK6E1LWfi0T4uobbmpfEU1//a9h9o5Kkt+MnMWf6rWlg0EiMw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
         <script src="{{ url_for('static', filename='jsfeat-min.js') }}"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
-        <script src="https://unpkg.com/[email protected]/dist/ml5.js"></script>
+
 
         <!--
         <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>