adding training animation

Model.py

@@ -338,8 +338,6 @@ def trainModel(self, progress_callback=None):
                 loss_list = loss_list[1:]
 
             print("Epoch:", epoch, "Loss:", running_loss, l1, l2, m, w)
-            if progress_callback:
-                progress_callback(l1.item())
 
             if math.isnan(running_loss):
                 die()
@@ -355,7 +353,17 @@ def trainModel(self, progress_callback=None):
             if epoch % 100 == 0:
                 torch.save(self.model.state_dict(), self.model_path)
                 print("saving...")
-
+
+
+            if progress_callback:
+
+                if epoch % 15 == 0:
+                    print("extracting vectors for animation")
+                    vectors, originpoints = self.extractOriginLineVectors()
+
+                    progress_callback(self, vectors)
+                #else:
+                #    progress_callback(self, l1.item())
 
         torch.save(self.model.state_dict(), self.model_path)
 

server.py

@@ -9,6 +9,7 @@
 import random
 import numpy as np
 from pathlib import Path
+import torch
 
 app = Flask(__name__)
 app.config['SECRET_KEY'] = 'secret!'
@@ -79,9 +80,19 @@ def new_dataset(data):
         lineTrainer = LineTrainer(data['name'])
         lineTrainer.trainModel(send_progress)
 
-def send_progress(text):
-    print("sending progress", text)
-    emit('progress', text)
+def send_progress(trainer, text):
+
+    if isinstance(text, list):
+        pointlist = []
+        for z in text:
+            print(z)
+            tensor = trainer.decode_latent_vector(z)
+            pointlist.append(tensor2Points(tensor))
+        #print(pointlist)
+        emit('progress', {'lines': pointlist} )
+    else:
+        print("sending progress", text)
+        emit('progress', {'percent':text} )
 
 @socketio.on('generate')
 def generate(data):

static/PaperCanvas.js

@@ -119,6 +119,140 @@ export class PaperCanvas extends HTMLElement {
 		let l = this.originalLines.pop()
 		l.remove()
 	}
+
+	drawLine(baseLine, color, smoothing) {
+		let points
+		if (Array.isArray(baseLine)) {
+			points = baseLine
+		} else {
+			points = baseLine.points
+		}
+
+		let path = new Path({segments: points})
+		path.strokeColor = color
+		path.pivot = path.firstSegment.point
+
+		console.log("base", baseLine.position)
+
+		if (!Array.isArray(baseLine)) {
+			path.position = new Point(baseLine.position.x * this.config["max_dist"], baseLine.position.y * this.config["max_dist"] )
+			console.log("pos", path.position)
+			path.scale(baseLine.scale)
+			path.rotate(baseLine.rotation * 360)
+		} else {
+			console.error("no normapization info", baseLine)
+		}
+
+		if(baseLine.reference_id){
+			console.log("moving", originalLines[baseLine.reference_id].firstSegment.point)
+			path.translate(originalLines[baseLine.reference_id].firstSegment.point)
+		}else{
+			path.translate(view.center)
+		}
+
+		this.processLine(path)
+
+		if (smoothing) {
+			path.simplify()
+		}
+		return path
+	}	
+
+	processLine(path) {
+		let [segmentedPath, scale, angle] = this.createSegments(path)
+		path.scale(scale, path.firstSegment.point)
+		path.rotate(angle*360, path.firstSegment.point)
+		console.log(scale, angle)
+
+		let points = this.segments2points(segmentedPath)
+		//let group = drawLine(points, "red")
+		//pointlist.push(points)
+		this.linelist.push({
+			points: points,
+			scale: scale,
+			rotation: angle,
+		})
+		this.originalLines.push(path)
+
+	}
+
+	createSegments(path) {
+		//scale up to normalized size
+		let largeDir = Math.max(path.bounds.width, path.bounds.height)
+		let baseSize = this.config["stroke_normalizing_size"]
+		path.scale(baseSize/largeDir, path.firstSegment.point)
+		let scale = largeDir/baseSize
+
+		let currAngle = path.lastSegment.point.subtract(
+			path.firstSegment.point
+		).angle + 180
+
+		let angle = currAngle/360
+		path.rotate(-currAngle, path.firstSegment.point)
+
+
+		let segmentedPath = new Path()
+
+		let dist = path.length / (this.config.nrPoints - 1)
+		for (let i = 0; i < this.config.nrPoints - 1; i++) {
+			let p = path.getPointAt(dist * i).round()
+			segmentedPath.addSegment(p)
+		}
+		segmentedPath.addSegment(path.lastSegment.point.round())
+
+		return [segmentedPath, scale, angle]
+	}
+
+	segments2points(path) {
+		return path.segments.map((seg) => {
+			return {x: seg.point.x, y: seg.point.y}
+		})
+	}
+
+	trainingEpoch(data){
+		if(!this.trainingLines){
+			this.trainingLines = []
+			this.animLines = []
+		}
+		let iteration = []
+		for(let [idx,line] of Object.entries(data.lines)){
+			let paperline = this.drawLine(line, "grey")
+			paperline.strokeWidth = 5
+			paperline.opacity = 0.5
+			paperline.position = this.originalLines[idx].firstSegment.point
+			paperline.scale(this.linelist[idx].scale, paperline.firstSegment.point)
+			paperline.rotate(this.linelist[idx].rotation*360, paperline.firstSegment.point)
+			paperline.remove()
+
+			iteration.push(paperline)
+			if(this.animLines.length <= idx){
+				let animLine = new Path()
+				animLine.strokeColor = "blue"
+				animLine.strokeWidth = 8
+				animLine.opacity = 0.7
+				animLine.strokeCap = 'round'
+				animLine.strokeJoin = 'round'
+				this.animLines.push( animLine )
+				console.log("push", animLine)
+			}
+
+			if(this.trainingLines[this.trainingLines.length -1]){
+				let lastItem = this.trainingLines[this.trainingLines.length -1][idx]
+				//let animPath = lastItem.clone()
+				//animPath.insertAbove(this.originalLines[idx])
+				//animPath.strokeColor = "blue"
+
+				this.animLines[idx].tween(1000).onUpdate = (event) => {
+					this.animLines[idx].interpolate(lastItem, paperline, event.factor)
+					console.log("tweeeeeen")
+				}
+
+			}
+
+
+		}
+		this.trainingLines.push(iteration)
+	}
 
 }
 

static/PatternTrainer.js

@@ -18,6 +18,10 @@ export class PatternTrainer extends HTMLElement {
 
 		this.socket.on("progress", (text) => {
 			console.log("progress received", text)
+			if(text.lines){
+				this.canvas.trainingEpoch(text)
+
+			}
 		})