first draft for training page

.gitignore

@@ -13,3 +13,13 @@ get-docker.sh
 share/man/man1/isympy.1
 
 lib64
+
+baseData/
+
+data/
+
+lineModels/
+
+templates/index_.html
+
+static/drawing.js

DrawData.py

@@ -110,6 +110,7 @@ def add_line_latentspace(self,lineTrainer):
 
  def save_line_training_data(self, name):
  data_list = []
+ print("raw data:", self.raw_data)
  for line in self.raw_data:
  x, edge_index = self.create_line_graph(line['points'])
  data = Data(x=x, edge_index=edge_index, scale=line['scale'], rotation=line['rotation'])

Model.py

@@ -287,7 +287,7 @@ def loss_function(self, out, target, mu, logvar, epoch):
  return loss, (mse_weight * lossMSE), (kl_weight * beta_norm * kld_loss), kl_weight, mse_weight
 
 
- def trainModel(self):
+ def trainModel(self, progress_callback=None):
  self.model.train()
  criterionMSE = torch.nn.MSELoss()
  criterionKLD = torch.nn.KLDivLoss(reduction='batchmean')
@@ -338,6 +338,8 @@ def trainModel(self):
  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()

server.py

@@ -63,15 +63,21 @@ def raw_data(data):
 
 @socketio.on('new dataset')
 def new_dataset(data):
+ #print("socket received:")
  #print(data)
 
  if len(data['list']) == 0:
  print("ERROR: no drawing data transmitted!")
  else:
+ gh.init_raw(data)
  gh.save_line_training_data(data['name'])
 
  lineTrainer = LineTrainer(data['name'])
- lineTrainer.trainModel()
+ lineTrainer.trainModel(send_progress)
+
+def send_progress(text):
+ print("sending progress", text)
+ emit('progress', text)
 
 @socketio.on('generate')
 def generate(data):
@@ -205,9 +211,9 @@ def train(data):
 
 ###### ROUTES
 
-#@app.route("/")
-#def hello_world():
-# return render_template('index.html')
+@app.route("/")
+def start():
+ return render_template('index.html')
 
 @app.route("/train")
 def website_train():

static/PaperCanvas.js

@@ -0,0 +1,122 @@
+'use strict';
+
+export class PaperCanvas extends HTMLElement {
+ constructor(n) {
+
+ super();
+
+ this.shadow = this.attachShadow({ mode: 'open' });
+
+ const container = document.createElement('template');
+
+ // creating the inner HTML of the editable list element
+ container.innerHTML = `
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
+ <style>
+ 
+ canvas{
+ background-color: lightblue;
+ }
+ </style>
+ 
+ <canvas id="paperCanvas"></canvas>
+ 
+ `;
+
+
+ this.shadow.appendChild(container.content.cloneNode(true));
+
+
+ }
+
+
+
+ connectedCallback() {
+ paper.install(window)
+ let canvas = this.shadow.getElementById('paperCanvas');
+ paper.setup(canvas);
+
+ let tool = new Tool()
+ tool.minDistance = 6
+
+ var path
+ this.linelist = []
+ this.originalLines = []
+
+ tool.onMouseDown = function (event) {
+ path = new Path()
+ path.strokeColor = "black"
+ path.add(event.point)
+ }
+
+ tool.onMouseDrag = function (event) {
+ path.add(event.point)
+ }
+
+ tool.onMouseUp = () => {
+ path.simplify()
+ this.processLine(path)
+ }
+ }
+
+ setConfig(config){
+ this.config = config
+ }
+
+ 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)
+ 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}
+ })
+ }
+
+ undo(){
+ this.linelist.pop()
+ let l = this.originalLines.pop()
+ l.remove()
+ }
+
+}
+
+customElements.define('paper-canvas', PaperCanvas);

static/PatternTrainer.js

@@ -0,0 +1,71 @@
+'use strict';
+import { SceneButton } from './SceneButton.js';
+import { PaperCanvas } from './PaperCanvas.js';
+import { io } from "https://cdn.socket.io/4.7.2/socket.io.esm.min.js";
+
+export class PatternTrainer extends HTMLElement {
+ constructor(n) {
+
+ super();
+ this.socket = io();
+ this.shadow = this.attachShadow({ mode: 'open' });
+ this.canvas = new PaperCanvas()
+
+ this.socket.on("init", (config) => {
+ console.log("config received", config)
+ this.canvas.setConfig(config)
+ })
+
+ this.socket.on("progress", (text) => {
+ console.log("progress received", text)
+ })
+
+
+
+ const container = document.createElement('template');
+
+ // creating the inner HTML of the editable list element
+ container.innerHTML = `
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
+ <style>
+ 
+ 
+ </style>
+ 
+ <div id="container">
+ <input type="test" placeholder="Scribble Name" id="name"></input>
+ 
+ <button id="undo">undo</button>
+ <button id="train">train</button>
+ </div>
+ `;
+
+
+ this.shadow.appendChild(container.content.cloneNode(true));
+
+ this.shadow.getElementById("name").after(this.canvas)
+ this.shadow.getElementById("undo").addEventListener("click", () => {
+ this.canvas.undo()
+ })
+ this.shadow.getElementById("train").addEventListener("click", () => {
+ console.log(this.canvas.linelist)
+ console.log("name:", this.shadow.getElementById("name").value)
+
+ this.socket.emit("new dataset", {
+ name: this.shadow.getElementById("name").value,
+ list: this.canvas.linelist,
+ })
+
+ })
+
+ }
+
+
+ connectedCallback() {
+
+
+ }
+
+}
+
+customElements.define('pattern-trainer', PatternTrainer);

static/SceneButton.js

@@ -0,0 +1,114 @@
+'use strict';
+
+export class SceneButton extends HTMLElement {
+ constructor(name, path, icon) {
+
+ super();
+ this.name = name
+ this.path = path
+ this.icon = icon
+ this.shadow = this.attachShadow({ mode: 'open' });
+
+ const container = document.createElement('template');
+
+ // creating the inner HTML of the editable list element
+ container.innerHTML = `
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
+ <style>
+ 
+ div{
+ background-color: gray;
+ width: 100%;
+ }
+ 
+ .active{
+ background-color: red;
+ }
+ 
+ .largeicon{
+ font-size: 5em !important;
+ }
+ 
+ .scribble{
+ background-color: var(--main-color);
+ border: 0 solid #E5E7EB;
+ box-sizing: border-box;
+ color: #000000;
+ font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+ font-size: 1rem;
+ font-weight: 700;
+ justify-content: center;
+ line-height: 1.75rem;
+ padding: .75rem 1.65rem;
+ position: relative;
+ text-align: center;
+ text-decoration: none #000000 solid;
+ text-decoration-thickness: auto;
+ width: 100%;
+ max-width: 460px;
+ position: relative;
+ cursor: pointer;
+ user-select: none;
+ -webkit-user-select: none;
+ touch-action: manipulation;
+ }
+
+ .scribble:focus {
+ outline: 0;
+ }
+
+ .scribble:after {
+ content: '';
+ position: absolute;
+ border: 2px solid #000000;
+ bottom: 4px;
+ left: 4px;
+ width: calc(100% - 1px);
+ height: calc(100% - 1px);
+ }
+
+ .scribble:hover:after {
+ bottom: 2px;
+ left: 2px;
+ }
+ 
+ button{
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ }
+
+ @media (min-width: 768px) {
+ .scribble {
+ padding: .75rem 3rem;
+ font-size: 1.25rem;
+ }
+ }
+ 
+ </style>
+ 
+ <button id="${this.name}" class="scribble"><span class="material-symbols-outlined largeicon">${this.icon}</span>${this.name}</button>
+ 
+ 
+ `;
+
+
+ this.shadow.appendChild(container.content.cloneNode(true));
+
+ this.shadow.getElementById(this.name).style.transform = `rotate(${Math.random() * 10 -5}deg)`;
+
+ this.shadow.getElementById(this.name).addEventListener("click", () => {
+ window.location.assign(this.path)
+ })
+
+ }
+
+
+
+ connectedCallback() {
+
+ }
+
+}
+
+customElements.define('scene-button', SceneButton);