Merge branch 'dev'

server.py

@@ -65,6 +65,29 @@ def connect():
 # print("new line received", points)
 # bd.createData(points)
 
+@socketio.on('deleteModel')
+def delete_model(data):
+ model_name = data['modelName']
+ model_path = osp.join("./lineModels", model_name)
+ model_path_basedata = osp.join("./baseData", model_name + "-line.pt")
+
+ if osp.exists(model_path):
+ try:
+ os.remove(model_path)
+ os.remove(model_path_basedata)
+ print(f"Model {model_name} deleted successfully.")
+ emit('modelDeleted', {'status': 'success', 'message': f'Model {model_name} deleted successfully.'})
+ except Exception as e:
+ print(f"Error deleting model {model_name}: {str(e)}")
+ emit('modelDeleted', {'status': 'error', 'message': f'Error deleting model {model_name}: {str(e)}'})
+ else:
+ print(f"Model {model_name} not found.")
+ emit('modelDeleted', {'status': 'error', 'message': f'Model {model_name} not found.'})
+
+ # Update the list of available models
+ mlist = getModels()
+ emit('models', mlist)
+
 
 @socketio.on('raw data')
 def raw_data(data):
@@ -265,9 +288,9 @@ def extend_pattern(data):
  emit('extention', info)
 
 
-@socketio.on('train')
-def train(data):
- trainer.trainModel(data['name'])
+#@socketio.on('train')
+#def train(data):
+# trainer.trainModel(data['name'])
 
 ###### ROUTES
 

static/VectorizerCanvas.js

@@ -1,11 +1,14 @@
 'use strict';
 import { io } from "https://cdn.socket.io/4.7.2/socket.io.esm.min.js"
 import lodash from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
+import { removeBackground } from 'https://cdn.jsdelivr.net/npm/@imgly/[email protected]/+esm'
 import { PaperCanvas } from './PaperCanvas.js'
 
 export class VectorizerCanvas extends HTMLElement {
  constructor(n) {
 
+
+
  super();
  this.socket = io();
  this.shadow = this.attachShadow({ mode: 'open' });
@@ -27,8 +30,6 @@ export class VectorizerCanvas extends HTMLElement {
  console.log("config received", config)
  this.config = config
  this.canvas.setConfig(config)
- this.dispatchEvent(new CustomEvent("ready"));
-
  })
 
  this.socket.on('result', (data) => {
@@ -119,25 +120,6 @@ export class VectorizerCanvas extends HTMLElement {
  })
 
 
- /*
- this.models = [
-
- "jojo",
- ////////"sun",
- "boxes",
- "gigswirl",
- "trianglestripe",
- "boxgroup"
- ////"pigtail",
-
- ]
- let mlName = lodash.sample(this.models)
- */
-
-
-
-
-
 
  }
 
@@ -152,7 +134,8 @@ export class VectorizerCanvas extends HTMLElement {
  paper.view.onFrame = undefined
  console.log("start")
 
- this.raster.setImageData(this.ctx.getImageData(0, 0, this.vidw, this.vidh), [0,0])
+ let imgData = this.ctx.getImageData(0, 0, this.vidw, this.vidh)
+ this.raster.setImageData(imgData, [0,0])
  this.raster.position = view.center;
  //this.shadow.getElementById("webcam").remove()
  this.ctx = undefined
@@ -161,7 +144,11 @@ export class VectorizerCanvas extends HTMLElement {
  var context = this.canvasTMP.getContext('2d');
  context.canvas.width = this.vidw;
  context.canvas.height = this.vidh;
+ context.fillStyle = "white"
+ context.fillRect(0, 0, this.vidw, this.vidh)
  context.drawImage(this.video, 0, 0, this.vidw, this.vidh);
+
+ //let imgData = context.getImageData(0, 0, this.vidw, this.vidh)
 
  const colorThief = new ColorThief();
  this.res = colorThief.getPalette(this.canvasTMP, 10);
@@ -175,118 +162,11 @@ export class VectorizerCanvas extends HTMLElement {
 
 
  console.log("lengths", this.mlStrokes.length )
- const bodypix = ml5.bodyPix( () => {
+
+
+
 
- 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 +179,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,48 +215,15 @@ 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(){
  //console.log(this.shadow.getElementById("edge-canvas").getContext('2d'))
  if(this.ctx){
  //this.ctx = canvas.getContext('2d');
+ this.ctx.fillStyle = "white"
+ this.ctx.fillRect(0, 0, this.vidw, this.vidh)
  this.ctx.drawImage(this.video, 0, 0, this.vidw, this.vidh);
  var imageData = this.ctx.getImageData(0, 0, this.vidw, this.vidh);
 
@@ -388,8 +234,10 @@ export class VectorizerCanvas extends HTMLElement {
  //jsfeat.imgproc.equalize_histogram(img_u8, img_u8)
 
 
- var r = this.edgeDetails; //5 bei zu viel gedöns?
+ var r = Number(this.edgeDetails) //5 bei zu viel gedöns?
+ console.log("edgeDetails", r)
  var kernel_size = (r+1) << 1;
+ console.log("kernel_size", kernel_size)
 
 
  jsfeat.imgproc.gaussian_blur(img_u8, img_u8, kernel_size, 0);
@@ -426,10 +274,27 @@ export class VectorizerCanvas extends HTMLElement {
  <canvas id="edge-canvas"></canvas>
  `
  let img = this.shadow.getElementById("image")
- console.log(e)
- img.src = URL.createObjectURL(e.target.files.item(0)) 
 
- this.video = img
+ let bgRemoveConfig = {
+ //model: 'isnet' | 'isnet_fp16' | 'isnet_quint8'; // The model to use. (Default "isnet_fp16")
+ output: {
+ format: 'image/png' //'image/png' | 'image/jpeg' | 'image/webp'; // The output format. (Default "image/png")
+ //quality: 0.8; // The quality. (Default: 0.8)
+ //type: 'foreground' | 'background' | 'mask'; // The output type. (Default "foreground")
+ }
+ }
+ console.log(URL.createObjectURL(e.target.files.item(0)))
+ removeBackground(URL.createObjectURL(e.target.files.item(0)), bgRemoveConfig).then((blob) => {
+ // The result is a blob encoded as PNG. It can be converted to an URL to be used as HTMLImage.src
+ const url = URL.createObjectURL(blob);
+
+ img.src = url
+ console.log(url)
+ this.video = img
+
+ })
+
+
 
  img.addEventListener("load", ()=>{
 
@@ -457,9 +322,10 @@ export class VectorizerCanvas extends HTMLElement {
 
 
  this.shadow.getElementById("canvas-container").appendChild(this.canvas)
- paper.view.onFrame = this.tick.bind(this)
+ //paper.view.onFrame = this.tick.bind(this)
  this.raster = new Raster([this.vidw,this.vidh]);
-
+ this.tick()
+ this.dispatchEvent(new CustomEvent("ready"));
  })