add examples

.gitattributes

@@ -32,3 +32,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+faster_rcnn_r50_fpn_1x_coco_20200130-047c8118.pth filter=lfs diff=lfs merge=lfs -text
+hrnet_w48_coco_256x192-b9e0b3ab_20200708.pth filter=lfs diff=lfs merge=lfs -text

js/poseTweek.js

@@ -1,862 +0,0 @@
-var canvas = null;
-var ctx = null;
-var offscreen = null;
-var initialPoseField = null;
-var canvasBg = null;
-var debugLines = [];
-
-const wheelDisplayTime = 500;
-
-const colors = [[255, 0, 0], [255, 85, 0], [255, 170, 0], [255, 255, 0], [170, 255, 0], [85, 255, 0], [0, 255, 0],
-[0, 255, 85], [0, 255, 170], [0, 255, 255], [0, 170, 255], [0, 85, 255], [0, 0, 255], [85, 0, 255],
-[170, 0, 255], [255, 0, 255], [255, 0, 170], [255, 0, 85]];
-
-function cutOffLimb(pose, cutOffIndex) {
-  console.log(`cutOffLimb: ${cutOffIndex}`);
-  // 末端ノードの座標を削除する
-  var newPose = deepCopy(pose);
-  for (let i = 0; i < 18; i++) {
-    if (newPose[i] == null) {continue;}
-    // ルートまで検索し、その間にcuttOffIndexがあれば削除
-    var curr = i;
-    while (curr !== 1) {
-      console.log(`checking: ${i} -> ${curr}`);
-      let parent = findParentNodeIndex(curr);
-      if (parent === cutOffIndex) {
-        console.log(`cutOffLimb: ${i} -> ${cutOffIndex}`);
-        newPose[i] = null;
-        break;
-      }
-      curr = parent;
-    }
-  }
-  return newPose;
-}
-
-function repairPose(sourcePose) {
-  // TODO: ループには対応してないかも
-  var pose = sourcePose;
-  var newPose = new Array(18)
-  for (var k = 0; k < 3; k++) {
-    var processed = 0; // イテレーション用
-    for (let i = 0; i < 18; i++) {
-      if (pose[i] == null) {
-        let parent = findParentNodeIndex(i);
-        if (parent === -1) {continue;} // あり得ない
-        if (pose[parent] == null) {
-          console.log(`repair failed(A): ${i} -> parent loss`);
-          continue;
-        }
-
-        // サンプルデータから引っ張ってくる
-        var v = sampleCandidateSource[i].map((x, j) => x - sampleCandidateSource[parent][j]);
-        newPose[i] = pose[parent].map((x, j) => x + v[j]);
-        console.log(`repaired: ${i} -> ${newPose[newPose.length - 1]}`);
-        processed++;
-      } else {
-        newPose[i] = pose[i].map(x => x);
-      }
-    }
-    if (processed === 0) {break;}
-    pose = newPose;
-  }
-  return newPose;
-}
-
-function deepCopy(arr) {
-  return JSON.parse(JSON.stringify(arr));
-}
-
-function distSq(p0, p1) {
-  return (p0[0] - p1[0]) ** 2 + (p0[1] - p1[1]) ** 2;
-}
-
-// poseDataの形式：[[[x1, y1], [x2, y2], ...],[[x3, y3], [x4, y4], ...], ...]
-// 各要素が人間
-// 人間の各要素が関節
-
-function poseDataToCandidateAndSubset(poseData) {
-  let candidate = [];
-  let subset = [];
-  for (let i = 0; i < poseData.length; i++) {
-    let person = poseData[i];
-    let subsetElement = [];
-    for (let j = 0; j < person.length; j++) {
-      candidate.push(person[j]);
-      subsetElement.push(candidate.length - 1);
-    }
-    subset.push(subsetElement);
-  }
-  return [candidate, subset];
-}
-
-// サンプルデータ  
-const sampleOffset = [0, -70];
-const sampleCandidateSource = [[235, 158],[234, 220],[193, 222],[138, 263],[89, 308],[276, 220],[325, 264],[375, 309],[207, 347],[203, 433],[199, 523],[261, 347],[262, 430],[261, 522],[227, 148],[245, 148],[208, 158],[258, 154]].map((p) => [p[0] + sampleOffset[0], p[1] + sampleOffset[1]]);
-const sampleSubsetElementSource = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17];
-
-// const sampleCandidateSource = [[618.00, 0.00], [618.00, 44.00], [304.00, 81.00], [482.00, 96.00], [66.00, 270.00], [171.00, 280.00], [618.00, 82.00], [307.00, 112.00], [460.00, 143.00], [0.00, 301.00], [65.00, 301.00], [172.00, 303.00], [584.00, 86.00], [275.00, 119.00], [420.00, 139.00], [0.00, 301.00], [41.00, 301.00], [144.00, 303.00], [544.00, 131.00], [348.00, 139.00], [262.00, 160.00], [0.00, 337.00], [52.00, 339.00], [130.00, 348.00], [570.00, 175.00], [283.00, 177.00], [78.00, 338.00], [172.00, 380.00], [651.00, 78.00], [338.00, 111.00], [505.00, 144.00], [92.00, 301.00], [198.00, 305.00], [661.00, 132.00], [349.00, 156.00], [541.00, 179.00], [106.00, 336.00], [203.00, 348.00], [305.00, 159.00], [665.00, 160.00], [563.00, 192.00], [80.00, 343.00], [181.00, 385.00], [614.00, 205.00], [291.00, 220.00], [432.00, 320.00], [152.00, 372.00], [43.00, 380.00], [0.00, 386.00], [623.00, 281.00], [306.00, 290.00], [92.00, 357.00], [509.00, 434.00], [304.00, 357.00], [622.00, 368.00], [47.00, 394.00], [0.00, 395.00], [142.00, 405.00], [535.00, 565.00], [655.00, 200.00], [337.00, 217.00], [467.00, 322.00], [191.00, 372.00], [83.00, 375.00], [344.00, 282.00], [655.00, 282.00], [103.00, 343.00], [237.00, 368.00], [22.00, 377.00], [0.00, 379.00], [460.00, 459.00], [305.00, 352.00], [638.00, 355.00], [0.00, 401.00], [110.00, 412.00], [411.00, 570.00], [608.00, 0.00], [608.00, 40.00], [297.00, 75.00], [469.00, 84.00], [0.00, 261.00], [58.00, 263.00], [165.00, 275.00], [625.00, 0.00], [625.00, 39.00], [309.00, 74.00], [486.00, 83.00], [71.00, 264.00], [180.00, 276.00], [599.00, 0.00], [599.00, 44.00], [284.00, 80.00], [440.00, 93.00], [48.00, 271.00], [0.00, 272.00], [157.00, 277.00], [634.00, 0.00], [633.00, 41.00], [319.00, 77.00], [79.00, 269.00], [190.00, 277.00]];
-// const sampleSubsetElementSource = [1.00,6.00,12.00,18.00,24.00,28.00,33.00,39.00,43.00,49.00,54.00,59.00,65.00,72.00,77.00,84.00,90.00,97.00,32.98,18.00],[5.00,11.00,17.00,23.00,27.00,32.00,37.00,42.00,46.00,-1.00,-1.00,62.00,67.00,-1.00,82.00,88.00,95.00,100.00,25.45,15.00],[4.00,10.00,16.00,22.00,26.00,31.00,36.00,41.00,47.00,51.00,57.00,63.00,66.00,74.00,81.00,87.00,93.00,99.00,26.97,18.00],[3.00,8.00,14.00,19.00,25.00,30.00,35.00,40.00,45.00,52.00,58.00,61.00,70.00,75.00,79.00,86.00,92.00,-1.00,30.45,17.00],[2.00,7.00,13.00,20.00,-1.00,29.00,34.00,38.00,44.00,50.00,53.00,60.00,64.00,71.00,78.00,85.00,91.00,98.00,27.89,17.00],[0.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,76.00,83.00,-1.00,96.00,3.33,4.00];
-
-function makePoseFromCandidateAndSubsetElement(candidate, subsetElement) {
-  var pose = [];
-  for (let j = 0 ; j < 18; j++) {
-    let i = subsetElement[j];
-    pose.push(i < 0 || candidate[i] == null ? null : candidate[i].map((x)=>x));
-  }
-  return pose;
-}
-
-function makePoseDataFromCandidateAndSubset(candidate, subset) {
-  return subset.map(subsetElement => makePoseFromCandidateAndSubsetElement(candidate, subsetElement));
-}
-
-function addPerson() {
-  var dx = Math.random() * 100;
-  var dy = Math.random() * 100;
-
-  poseData.push(
-    makePoseFromCandidateAndSubsetElement(
-      sampleCandidateSource.map(point => [point[0] + dx, point[1] + dy]),
-      sampleSubsetElementSource));
-
-  addHistory();    
-  Redraw();
-}
-
-function removePerson(personIndex) {
-  poseData.splice(personIndex, 1);
-  addHistory();
-  Redraw();
-}
-
-function repairPerson(personIndex) {
-  poseData[personIndex] = repairPose(poseData[personIndex]);
-  addHistory();
-  Redraw();
-}
-
-function cutOffPersonLimb(personIndex, limbIndex) {
-  poseData[personIndex] = cutOffLimb(poseData[personIndex], limbIndex);
-  console.log(poseData[personIndex]);
-  console.log(poseData);
-  addHistory();
-  Redraw();
-}
-
-// ドラッグ中の各キーが押されているかどうかのフラグ
-var keyDownFlags = {};
-// マウスカーソル
-var mouseCursor = [-1, -1];
-
-function cross(lhs, rhs) {return lhs[0] * rhs[1] - lhs[1] * rhs[0];}
-function dot(lhs, rhs) {return lhs[0] * rhs[0] + lhs[1] * rhs[1];}
-function directedAngleTo(lhs, rhs) {return Math.atan2(cross(lhs, rhs), dot(lhs, rhs));}
-
-function isMouseOnCanvas() {
-  // mouseCursorがcanvasの範囲内にあるかどうかを判定
-  var rect = canvas.getBoundingClientRect();
-  var f = 0 <= mouseCursor[0] && mouseCursor[0] <= rect.width && 0 <= mouseCursor[1] && mouseCursor[1] <= rect.height;
-  return f;
-}
-
-function clearCanvas() {
-  var w = canvas.width;
-  var h = canvas.height;
-  ctx.fillStyle = 'black';
-  ctx.fillRect(0, 0, w, h);
-}
-
-function drawBackground() {
-  if (canvasBg != null) {
-    ctx.drawImage(canvasBg, 0, 0);
-  }
-}
-
-function resizeCanvas(width, height) {
-  canvas.width = width ? width : canvas.width;
-  canvas.height = height ? height : canvas.height;
-  Redraw();
-}
-
-function calculateCenter(shape) {
-  var center = shape.reduce(function(acc, point) {
-    if (point === null) {
-      acc[0] += point[0];
-      acc[1] += point[1];
-    }
-    return acc;
-  }, [0, 0]);
-  center[0] /= shape.length;
-  center[1] /= shape.length;
-  return center;
-}
-
-// v2d -> v3d
-function rotateX(vector, angle) {
-  var x = vector[0];
-  var y = vector[1];
-  var z = 0;
-
-  // X軸に対して回転する
-  var x1 = x;
-  var y1 = y * Math.cos(angle) - z * Math.sin(angle);
-  var z1 = y * Math.sin(angle) + z * Math.cos(angle);
-
-  return [x1, y1, z1];
-}
-
-// v2d -> v3d
-function rotateY(vector, angle) {
-  var x = vector[0];
-  var y = vector[1];
-  var z = 0;
-
-  // Y軸に対して回転する
-  var x1 = x * Math.cos(angle) + z * Math.sin(angle);
-  var y1 = y;
-  var z1 = -x * Math.sin(angle) + z * Math.cos(angle);
-
-  return [x1, y1, z1];  
-}
-
-// v3d -> v2d
-function perspectiveProjection(vector, cameraDistance) {
-  var x = vector[0];
-  var y = vector[1];
-  var z = vector[2];
-
-  if (z === 0) {
-    return [x, y];
-  }
-
-  var scale = cameraDistance / (cameraDistance - z);
-  var x1 = x * scale;
-  var y1 = y * scale;
-
-  return [x1, y1];
-}  
-
-// v2d -> v3d
-function rotateAndProject(f, p, c, angle) {
-  var v = [p[0] - c[0], p[1] - c[1]];
-  var v1 = f(v, angle);
-  var v2 = perspectiveProjection(v1, 500);
-  return [v2[0] + c[0], v2[1] + c[1]];
-}
-
-function drawPicture() {
-  ctx.globalAlpha = 1.0;
-  // if (picture != null) {
-    //var [w, h] = [canvas.width, canvas.height];
-    //var [pw, ph] = [picture.width, picture.height];
-    //var [x, y] = [(w-pw)/2, (h-ph)/2];
-    // ctx.drawImage(picture, sampleOffset[0], sampleOffset[1]);
-    // ctx.drawImage(picture, 0, 0);
-  // }
-
-  ctx.globalAlpha = 1.0;
-  if (offscreen != null) {
-    ctx.drawImage(offscreen, 0, 0);
-  }
-}
-
-function drawBodyPose() {
-  drawBodyPoseTo(ctx, poseData);
-}
-
-function drawBodyPoseTo(ctx, poseData) {
-  let stickWidth = 4;
-  let imageSize = Math.min(canvas.width, canvas.height);
-  stickWidth *= imageSize / 512;
-
-  ctx.globalAlpha = 0.6;
-
-  // edge
-  for (let i = 0; i < poseData.length; i++) {
-    const pose = poseData[i];
-
-    for (let j = 0; j < 17; j++) {
-      const p = pose[limbSeq[j][0]];
-      const q = pose[limbSeq[j][1]];
-      if (p == null || q == null) continue;
-      const [X0, Y0] = p;
-      const [X1, Y1] = q;
-      let angle = Math.atan2(Y1 - Y0, X1 - X0);
-      let magnitude = ((X0 - X1) ** 2 + (Y0 - Y1) ** 2) ** 0.5
-      let polygon = new Path2D();
-      polygon.ellipse((X0+X1)/2, (Y0+Y1)/2, magnitude / 2, stickWidth, angle, 0, 2 * Math.PI);
-      //ctx.fillStyle = `rgb(${colors[j].join(',')})`;
-      ctx.fillStyle = 'gray';
-      ctx.fill(polygon);
-    }
-  }
-
-  ctx.globalAlpha = 1.0;
-
-  // node
-  for (let i = 0; i < poseData.length; i++) {
-    const pose = poseData[i];
-
-    ctx.font = '12px serif';
-    for (let j = 0; j < 18; j++) {
-      const p = pose[j];
-      if (p == null) continue;
-      const [x, y] = p;
-      ctx.beginPath();
-      ctx.arc(x, y, stickWidth, 0, 2 * Math.PI);
-      ctx.fillStyle = `rgb(${colors[j].join(',')})`;
-      ctx.fill();
-      // ctx.fillStyle = 'rgb(255,255,255)'
-      // ctx.fillText(j, x-3, y+4);
-    }
-  }
-}
-
-let lastWheeling = 0;
-
-function drawUI() {
-  if (keyDownFlags['Space'] || keyDownFlags['BracketLeft'] || keyDownFlags['BracketRight'] || 
-      new Date().getTime() - lastWheeling < wheelDisplayTime) {
-    ctx.beginPath();
-    ctx.lineWidth=4;
-    ctx.arc(mouseCursor[0], mouseCursor[1], dragRange, 0, 2 * Math.PI);
-    ctx.strokeStyle = 'rgb(255,255,255)';
-    ctx.stroke();
-  }
-
-  if (isDragging && (dragMode == "rotate" || dragMode == "rotate2")) {
-    ctx.beginPath();
-    ctx.lineWidth=1;
-    ctx.strokeStyle = 'rgb(255,255,255)';
-    ctx.moveTo(dragStart[0], dragStart[1]);
-    ctx.lineTo(dragStart[0]+rotateBaseVector[0], dragStart[1]+rotateBaseVector[1]);
-    ctx.stroke();
-  }
-
-  ctx.globalAlpha = 0.1;
-
-  for (let i = 0 ; i < debugLines.length ; i++) {
-    const p = debugLines[i];
-    const l = 50;
-    ctx.beginPath();
-    ctx.lineWidth= 2;
-    ctx.strokeStyle = `rgb(${colors[i].join(',')})`;
-    ctx.moveTo(p[0][0], p[0][1]);
-    ctx.lineTo(p[0][0]+p[1][0] * l, p[0][1]+p[1][1] * l);
-    ctx.stroke();
-  }
-  ctx.globalAlpha = 1.0;
-
-  let operationTextFlags = {
-    "Space": "Range Move",
-    "AltLeft": "Body Move",
-    "AltRight": "Body Move",
-    "ControlLeft": "Scale",
-    "ControlRight": "Scale",
-    "ShiftLeft": "Rotate",
-    "ShiftRight": "Rotate",
-    "KeyQ": "CutOff",
-    "KeyD": "Delete",
-    "KeyX": "X-Axis",
-    "KeyC": "Y-Axis",
-    "KeyR": "Repair",
-  }
-
-  // operationTextFlagsに含まれるものがkeyDownFlagsに含まれるばあい、そのキーの文字列を取得
-  let activeOperations = Object.keys(operationTextFlags).filter(key => keyDownFlags[key]);
-  if (activeOperations.length > 0) {
-    // 左上に表示
-    ctx.font = '20px serif';
-    ctx.fillStyle = 'rgb(255,255,255)';
-    ctx.fillText(operationTextFlags[activeOperations[0]], 10, 30);
-  }
-
-  // draw mouse cursor position at right bottom
-  ctx.font = '20px serif';
-  ctx.fillStyle = 'rgb(255,255,255)';
-  ctx.fillText(`(${mouseCursor[0]}, ${mouseCursor[1]})`, canvas.width-200, canvas.height-10);
-
-}
-
-function Redraw() {
-  clearCanvas();
-  drawBackground();
-  drawPicture();
-  drawBodyPose();
-  drawUI();
-}
-
-function getNearestNode(p) {
-    let minDistSq = Infinity;
-    let personIndex = -1;
-    let nodeIndex = -1;
-    for (let i = 0; i < poseData.length; i++) {
-      const pose = poseData[i];
-      for (let j = 0; j < pose.length; j++) {
-        const q = pose[j];
-        if (q == null) continue;
-        const d = distSq(p, q);
-        if (d < minDistSq) {
-          minDistSq = d;
-          personIndex = i;
-          nodeIndex = j;
-        }
-      }
-    }
-    return [personIndex, nodeIndex, Math.sqrt(minDistSq)];
-}
-
-let dragRange = 64;
-let dragRangeDelta = 16;
-
-// ドラッグ中に座標を保持するための変数
-let isDragging = false;
-let dragStart = [0, 0];
-let dragPersonIndex = -1;
-let dragMarks = [];
-let dragMode = "";
-let rotateBaseVector = null;
-let history = [];
-let historyIndex = 0;
-
-function clearHistory() {
-  history = [];
-  historyIndex = 0;  
-}
-
-function addHistory() {
-  history = history.slice(0, historyIndex);
-  history.push(JSON.parse(JSON.stringify(poseData)));
-  historyIndex = history.length;
-}
-
-function undo() {
-  if (1 < historyIndex) {
-    historyIndex--;
-    poseData = deepCopy(history[historyIndex-1]);
-    Redraw();
-  }   
-}
-
-function redo() {
-  if (historyIndex < history.length) {
-    historyIndex++;
-    poseData = deepCopy(history[historyIndex-1]);
-    Redraw();
-  }   
-}
-
-function fetchLatestPoseData() {
-  return history[historyIndex-1];
-}
-
-function getCanvasPosition(event) {
-  const rect = canvas.getBoundingClientRect();
-  const x = Math.floor(event.clientX - rect.left);
-  const y = Math.floor(event.clientY - rect.top);
-  return [x, y];
-}
-
-function forEachMarkedNodes(fn) {
-  for (let i = 0; i < dragMarks.length; i++) {
-    for (let j = 0; j < dragMarks[i].length; j++) {
-      if (dragMarks[i][j]) {
-        fn(i, j, poseData[i][j]);
-      }
-    }
-  }
-}
-
-// Canvas要素上でマウスが押された場合に呼び出される関数
-function handleMouseDown(event) {
-  const p = getCanvasPosition(event);
-  const [personIndex, nodeIndex, minDist] = getNearestNode(p);
-
-  if (keyDownFlags["KeyD"]) {removePerson(personIndex);return;}
-  if (keyDownFlags["KeyR"]) {repairPerson(personIndex);return;}
-
-  if (keyDownFlags["KeyQ"] && minDist < 16) {
-    console.log("pressed KeyQ");
-    cutOffPersonLimb(personIndex, nodeIndex);
-    return;
-  }
-
-  // ドラッグ処理の開始
-  dragStart = p;
-  dragMarks = poseData.map(pose => pose.map(node => false));
-
-  if (event.altKey || event.ctrlKey || event.shiftKey ||
-      keyDownFlags["KeyX"] || keyDownFlags["KeyC"]) {
-    // dragMarksを設定
-    dragMarks[personIndex] = 
-      poseData[personIndex].map((node) => node != null);
-      isDragging = true;
-    if (event.altKey) {
-      dragMode = "move";
-    } else if (event.ctrlKey) {
-      dragMode = "scale";
-    } else if (event.shiftKey) {
-      dragMode = "rotate";
-      rotateBaseVector = [0, 0];
-    } else if (keyDownFlags["KeyX"]) {
-      dragMode = "rotateX";
-    } else if (keyDownFlags["KeyC"]) {
-      dragMode = "rotateY";
-    }
-  } else if (keyDownFlags["Space"]) {
-    dragMarks[personIndex] = 
-      poseData[personIndex].map(
-        (node) => node != null && distSq(p, node) < dragRange ** 2);
-    isDragging = dragMarks[personIndex].some((mark) => mark);
-    dragMode = "move";
-  } else if (minDist < 16) {
-    dragMarks[personIndex][nodeIndex] = true;
-    isDragging = true;
-    dragMode = "move";
-  }
-}
-
-// Canvas要素上でマウスが動いた場合に呼び出される関数
-function handleMouseMove(event) {
-  mouseCursor = getCanvasPosition(event);
-  if (isDragging) {
-    const p = getCanvasPosition(event);
-    const dragOffset = [p[0] - dragStart[0], p[1] - dragStart[1]];
-    const latestPoseData = fetchLatestPoseData();
-
-    if (dragMode == "scale") {
-      // 拡大縮小
-      let xScale = 1 + dragOffset[0] / canvas.width;
-      let yScale = 1 + dragOffset[0] / canvas.height;
-      forEachMarkedNodes((i, j, node) => {
-        const lp = latestPoseData[i][j];
-        node[0] = (lp[0] - dragStart[0]) * xScale + dragStart[0];
-        node[1] = (lp[1] - dragStart[1]) * yScale + dragStart[1];
-      });
-    } else if (dragMode == "rotate") {
-      rotateBaseVector = dragOffset;
-      if (!event.shiftKey) {
-        dragMode = "rotate2";
-      }
-    } else if (dragMode == "rotate2") {
-      // 回転
-      let angle = directedAngleTo(rotateBaseVector, dragOffset);
-      forEachMarkedNodes((i, j, node) => {
-        const lp = latestPoseData[i][j];
-        let x = lp[0] - dragStart[0];
-        let y = lp[1] - dragStart[1];
-        let sin = Math.sin(angle);
-        let cos = Math.cos(angle);
-        node[0] = x * cos - y * sin + dragStart[0];
-        node[1] = x * sin + y * cos + dragStart[1];
-      });
-    } else if (dragMode == "rotateX") {
-      const center = dragStart;
-      const angle = dragOffset[1] / -40;
-      forEachMarkedNodes((i, j, node) => {
-        const lp = latestPoseData[i][j];
-        const np = rotateAndProject(rotateX, lp, center, angle);
-        node[0] = np[0];
-        node[1] = np[1];
-      });
-    } else if (dragMode == "rotateY") {
-      const center = dragStart;
-      const angle = dragOffset[0] / 40;
-      forEachMarkedNodes((i, j, node) => {
-        const lp = latestPoseData[i][j];
-        const np = rotateAndProject(rotateY, lp, center, angle);
-        node[0] = np[0];
-        node[1] = np[1];
-      });
-    } else if (dragMode == "move") {
-      // 移動
-      forEachMarkedNodes((i, j, node) => {
-        const lp = latestPoseData[i][j];
-        node[0] = lp[0] + dragOffset[0];
-        node[1] = lp[1] + dragOffset[1];
-      });
-    }
-
-    // animatePicture(document.getElementById("canvas4"),[canvas.width, canvas.height], history[0][0], poseData[0], pictureImageData, initialPoseField);
-  }
-
-  Redraw();
-}
-
-function handleMouseUp(event) {
-  console.profile("animate");
-  animatePicture(
-    document.getElementById("canvas4"),
-    [canvas.width, canvas.height], history[0][0], poseData[0], pictureImageData, initialPoseField);
-    console.profileEnd("animate");
-    isDragging = false; 
-  addHistory();
-  Redraw();
-}
-
-function handleMouseLeave(event) {
-  mouseCursor = [-1,-1];
-  if (isDragging) {
-    handleMouseUp(event);
-  }
-  keyDownFlags = {};
-}
-
-function ModifyDragRange(delta) { dragRange = Math.max(dragRangeDelta, Math.min(512, dragRange + delta)); }
-
-document.addEventListener('wheel', function(event) {
-  if (!isMouseOnCanvas()) {return;}
-  if (!event.altKey && !keyDownFlags['Space']) {return;}
-
-  event.preventDefault();
-  const deltaY = event.deltaY;
-  if (deltaY < 0) {ModifyDragRange(-dragRangeDelta);}
-  if (0 < deltaY) {ModifyDragRange(dragRangeDelta);}
-  lastWheeling = new Date().getTime();
-  Redraw();
-  window.setTimeout(function() { Redraw(); }, wheelDisplayTime+10);
-}, {passive: false});
-
-document.addEventListener("keydown", (event) => { 
-  if (!isMouseOnCanvas()) {return;}
-
-  if (event.code == "BracketLeft") { ModifyDragRange(-dragRangeDelta); }
-  if (event.code == "BracketRight") { ModifyDragRange(dragRangeDelta); }
-  keyDownFlags[event.code] = true; 
-  Redraw();
-  event.preventDefault();
-});
-document.addEventListener("keyup", (event) => { 
-  if (!isMouseOnCanvas()) {return;}
-
-  keyDownFlags[event.code] = false; 
-  if (event.ctrlKey && event.code == "KeyE") {
-    addPerson();
-  } else if (event.ctrlKey && event.code == "KeyZ") {
-    if (event.shiftKey) {
-      redo();
-    } else {
-      undo();
-    }
-  }
-  Redraw();
-  event.preventDefault();
-});
-
-function initializeEditor() {
-  console.log("initializeEditor");
-
-  canvas = document.getElementById('canvas');
-  ctx = canvas.getContext('2d');
-
-  canvas.addEventListener('mousedown', handleMouseDown);
-  canvas.addEventListener('mousemove', handleMouseMove);
-  canvas.addEventListener('mouseup', handleMouseUp);
-  canvas.addEventListener('mouseleave', handleMouseLeave);
-  poseData = [];
-  clearHistory();
-}
-
-function importPose(jsonData) {
-  if (jsonData != null) {
-    newPoseData = makePoseDataFromCandidateAndSubset(jsonData.candidate, jsonData.subset);
-    if (jsonData.width != null && jsonData.height != null) {
-      resizeCanvas(jsonData.width, jsonData.height);
-    }
-  } else {
-    newPoseData = makePoseDataFromCandidateAndSubset(sampleCandidateSource, [sampleSubsetElementSource]);
-  }
-  poseData = poseData.concat(newPoseData);
-  addHistory();
-  Redraw();
-}
-
-// crc32
-// CRC32を初期化
-function initCrc32Table() {
-  const crcTable = new Uint32Array(256);
-  for (let i = 0; i < 256; i++) {
-    let c = i;
-    for (let j = 0; j < 8; j++) {
-      c = (c & 1) ? (0xEDB88320 ^ (c >>> 1)) : (c >>> 1);
-    }
-    crcTable[i] = c;
-  }
-  return crcTable;
-}
-
-// データのCRC32を計算
-function getCrc32(data, crc=0) {
-  const crcTable = initCrc32Table();
-  crc = (crc ^ 0xFFFFFFFF) >>> 0;
-  for (let i = 0; i < data.length; i++) {
-    crc = crcTable[(crc ^ data[i]) & 0xFF] ^ (crc >>> 8);
-  }
-  return (crc ^ 0xFFFFFFFF) >>> 0;
-}
-
-function stringToUint8Array(str) {
-  var arr = new Uint8Array(str.length);
-  for (var i = 0; i < str.length; i++) {
-    arr[i] = str.charCodeAt(i);
-  }
-  return arr;
-}
-
-function base64ToUint8Array(base64Str) {
-  return stringToUint8Array(atob(base64Str));
-}
-
-function visitPng(png, type) {
-  var dataLength;
-  var chunkType;
-  var nextChunkPos;
-  var Signature = String.fromCharCode(137, 80, 78, 71, 13, 10, 26, 10);
-  var rpos = 0;
-  
-  // シグネチャの確認
-  if (String.fromCharCode.apply(null, png.subarray(rpos, rpos += 8)) !== Signature) {
-      throw new Error('invalid signature');
-  }
-  
-  // チャンクの探索
-  while (rpos < png.length) {
-      dataLength = (
-          (png[rpos++] << 24) |
-          (png[rpos++] << 16) |
-          (png[rpos++] <<  8) |
-          (png[rpos++]      )
-      ) >>> 0;
-  
-      nextChunkPos = rpos + dataLength + 8;
-  
-      chunkType = String.fromCharCode.apply(null, png.subarray(rpos, rpos += 4));
-      
-      if (chunkType === type) {
-        return [rpos - 8, dataLength, nextChunkPos];
-      }
-      
-      rpos = nextChunkPos;
-  }
-}
-
-function createChunk(type, data) {
-  var dataLength = data.length;
-  var chunk = new Uint8Array(4 + 4 + dataLength + 4);
-  var type = stringToUint8Array(type);
-  var pos = 0;
-  
-  // length
-  chunk[pos++] = (dataLength >> 24) & 0xff;
-  chunk[pos++] = (dataLength >> 16) & 0xff;
-  chunk[pos++] = (dataLength >>  8) & 0xff;
-  chunk[pos++] = (dataLength      ) & 0xff;
-  
-  // type
-  chunk[pos++] = type[0];
-  chunk[pos++] = type[1];
-  chunk[pos++] = type[2];
-  chunk[pos++] = type[3];
-  
-  // data
-  for (let i = 0; i < dataLength; ++i) {
-      chunk[pos++] = data[i];
-  }
-  
-  //crc
-  initCrc32Table();
-  let crc = getCrc32(type);
-  crc = getCrc32(data, crc);
-  chunk[pos++] = (crc >> 24) & 0xff;
-  chunk[pos++] = (crc >> 16) & 0xff;
-  chunk[pos++] = (crc >>  8) & 0xff;
-  chunk[pos++] = (crc      ) & 0xff;
-  
-  return chunk;
-}
-
-function insertChunk(destBuffer, sourceBuffer, rpos, chunk) {
-  var pos = 0;
-  
-  // IDAT チャンクの前までコピー
-  destBuffer.set(sourceBuffer.subarray(0, rpos), pos);
-  pos += rpos;
-  
-  // hoGe チャンクをコピー
-  destBuffer.set(chunk, pos);
-  pos += chunk.length;
-  
-  // IDAT チャンク以降をコピー
-  destBuffer.set(sourceBuffer.subarray(rpos), pos);
-}
-
-function mergeCanvasWithPose(keyword, content) {
-  const canvasUrl = canvas.toDataURL();
-
-  var insertion = stringToUint8Array(`${keyword}\0${content}`);
-  var chunk = createChunk("tEXt", insertion);
-  var sourceBuffer = base64ToUint8Array(canvasUrl.split(',')[1]);
-  var destBuffer = new Uint8Array(sourceBuffer.length + insertion.length + 12);
-
-  var [rpos, dataLength, nextChunkPos] = visitPng(sourceBuffer, "IHDR");
-  insertChunk(destBuffer, sourceBuffer, nextChunkPos, chunk);
-
-  var blob = new Blob([destBuffer], {type: "image/png"});
-  var url = URL.createObjectURL(blob);
-  return url;  
-}
-
-function savePose() {
-  var [candidate, subset] = poseDataToCandidateAndSubset(poseData);
-  let jsonData = {candidate: candidate, subset: subset};
-
-  var url = mergeCanvasWithPose("openpose", JSON.stringify(jsonData));
-
-  const createEl = document.createElement('a');
-  createEl.href = url;
-
-  // This is the name of our downloaded file
-  createEl.download = "pose.png";
-
-  createEl.click();
-  createEl.remove();
-
-  return jsonData;
-}
-
-function importPicture(image) {
-  var pic = new Image();
-  pic.onload = () => {
-    const size = [canvas.width, canvas.height];
-
-    const canvas3 = document.getElementById("canvas3");
-    pictureImageData = makeImageDataFromPicture(canvas3, size, pic);
-
-    const canvas4 = document.getElementById("canvas4");
-    offscreen = canvas4;
-
-    initialPoseField = buildWeightMap(size, poseData[0]);
-    animatePicture(canvas4, size, poseData[0], poseData[0], pictureImageData, initialPoseField);
-
-    Redraw();
-  };
-  pic.src = image;
-
-  initMicroscope();
-}
-
-function importBackground(image) {
-  if (image == null) {
-    canvasBg = null;
-    Redraw();
-    return;
-  }
-
-  let m = new Image();
-  m.src = image;
-  m.onload = function() {
-    canvasBg = m;
-    Redraw();
-  }
-}

main.py

@@ -28,10 +28,15 @@ with gr.Blocks(css="""button { min-width: 80px; }""") as demo:
     with gr.Column(scale=1):
       source = gr.Image(type="pil")
       info = gr.Markdown("""info""")
+      gr.Examples(
+        examples=["static/sample1.png", "static/sample2.png", "static/sample3.png"],
+        inputs=source,
+      )      
       btn = gr.Button("Import")  
-      mask = gr.Image()
-      frontImage = gr.Image(image_mode="RGBA")
-      backImage = gr.Image(image_mode="RGBA")
+      with gr.Accordion(label="Parts", open=False):
+        mask = gr.Image()
+        frontImage = gr.Image(image_mode="RGBA")
+        backImage = gr.Image(image_mode="RGBA")
       with gr.Accordion(label="Json", open=False):
         json = gr.JSON(label="Json")
     with gr.Column(scale=3):
@@ -53,7 +58,7 @@ with gr.Blocks(css="""button { min-width: 80px; }""") as demo:
     outputs = [],
     _js="(frontImage, backImage, json) => { initializeEditor(); importPose(json); importPicture(frontImage); importBackground(backImage); return []; }")
 
-  demo.load(fn=None, inputs=[], outputs=[], _js="() => { initializeEditor(); importPose(); importPicture('./static/sample2.png'); return []; }")
+  demo.load(fn=None, inputs=[], outputs=[], _js="() => { initializeEditor(); importPose(); return []; }")
 
 print("mount")
 app.mount("/static", StaticFiles(directory="static"), name="static")