add js

app.py

@@ -1,6 +1,9 @@
 import gradio as gr
 from fastapi import FastAPI, Request, Response
 
+with open("static/poseEditor.js", "r") as f:
+    file_contents = f.read()
+
 app = FastAPI()
 
 @app.middleware("http")
@@ -15,7 +18,7 @@ async def some_fastapi_middleware(request: Request, call_next):
 
         some_javascript = f"""
         <script type="text/javascript" defer>
-console.log("middleware");
+{file_contents}
         </script>
         """
 
@@ -39,6 +42,7 @@ def greet(source):
     
 html_text = f"""
     <canvas id="canvas" width="512" height="512"></canvas>
+    <script type="text/javascript" defer>{file_contents}</script>
     """
 
 with gr.Blocks() as demo:

static/poseEditor.js

@@ -0,0 +1,165 @@
+console.log("hello from poseEditor.js")
+var canvas = null;
+var ctx = null;
+
+// candidateの形式：[[x1, y1, score1], [x2, y2, score2], ...]
+const candidate = [
+    [235, 158, 0.93167633],
+    [234, 220, 0.97106987],
+    [193, 222, 0.93366587],
+    [138, 263, 0.87655306],
+    [89, 308, 0.8868227],
+    [276, 220, 0.9038924],
+    [325, 264, 0.92930061],
+    [375, 309, 0.9217211],
+    [207, 347, 0.86410147],
+    [203, 433, 0.86538297],
+    [199, 523, 0.95236528],
+    [261, 347, 0.88489777],
+    [262, 430, 0.90848708],
+    [261, 522, 0.94749999],
+    [227, 148, 0.94189668],
+    [245, 148, 0.93967074],
+    [208, 158, 0.92053992],
+    [258, 154, 0.73533273]
+  ];
+  
+// subsetの形式：[[index1, index2, ..., -1], [index1, index2, ..., -1], ...]
+const subset = [
+  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 33.81122635, 18]
+];
+
+function clearCanvas() {
+  var w = canvas.width;
+  var h = canvas.height;
+  ctx.fillStyle = 'black';
+  ctx.fillRect(0, 0, w, h);
+}
+
+function resizeCanvas(width, height) {
+  canvas.width = width ? width : canvas.width;
+  canvas.height = height ? height : canvas.height;
+  clearCanvas();
+  drawBodyPose(candidate, subset);
+}
+
+function drawBodyPose(candidate, subset) {
+    const stickwidth = 4;
+    const limbSeq = [[2, 3], [2, 6], [3, 4], [4, 5], [6, 7], [7, 8], [2, 9], [9, 10],
+                 [10, 11], [2, 12], [12, 13], [13, 14], [2, 1], [1, 15], [15, 17],
+                 [1, 16], [16, 18], [3, 17], [6, 18]];
+  
+    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]];
+                
+    for (let i = 0; i < 17; i++) {
+      for (let n = 0; n < subset.length; n++) {
+        const index0 = subset[n][limbSeq[i][0]-1];
+        const index1 = subset[n][limbSeq[i][1]-1];
+        if (index0 === -1 || index1 === -1) {
+          continue;
+        }
+        const [X0, Y0] = candidate[index0].slice(0, 2);
+        const [X1, Y1] = candidate[index1].slice(0, 2);
+        ctx.beginPath();
+        ctx.lineWidth=stickwidth;
+        ctx.strokeStyle = `rgb(${colors[i].join(',')})`;
+        ctx.moveTo(X0, Y0);
+        ctx.lineTo(X1, Y1);
+        ctx.stroke();
+      }
+    }
+
+    ctx.font = '12px serif';
+    for (let i = 0; i < 18; i++) {
+      for (let n = 0; n < subset.length; n++) {
+        const index = subset[n][i];
+        if (index === -1) {
+          continue;
+        }
+        const [x, y] = candidate[index].slice(0, 2);
+        ctx.beginPath();
+        ctx.arc(x, y, 4, 0, 2 * Math.PI);
+        ctx.fillStyle = `rgb(${colors[i].join(',')})`;
+        ctx.fill();
+        ctx.fillStyle = 'rgb(255,255,255)'
+        ctx.fillText(index, x-3, y+4);
+      }
+    }
+}
+
+function getNearestCandidateIndex(x, y) {
+    let minDist = Infinity;
+    let minIndex = -1;
+    for (let i = 0; i < candidate.length; i++) {
+      const dist = Math.sqrt((x - candidate[i][0]) ** 2 + (y - candidate[i][1]) ** 2);
+      if (dist < minDist) {
+        minDist = dist;
+        minIndex = i;
+      }
+    }
+    if (16 < minDist) { 
+      return -1;
+    }
+    return minIndex;
+}
+
+// ドラッグ中に座標を保持するための変数
+let isDragging = false;
+let dragIndex = -1;
+let dragOffsetX = 0;
+let dragOffsetY = 0;
+
+function getCanvasPosition(event) {
+  const rect = canvas.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+  return [x, y];
+}
+
+// Canvas要素上でマウスが押された場合に呼び出される関数
+function handleMouseDown(event) {
+  const [x, y] = getCanvasPosition(event);
+  const index = getNearestCandidateIndex(x, y);
+
+  // ドラッグ処理の開始
+  if (0 <= index) {
+    isDragging = true;
+    dragIndex = index;
+    dragOffsetX = x - candidate[index][0];
+    dragOffsetY = y - candidate[index][1];
+  }
+}
+
+// Canvas要素上でマウスが動いた場合に呼び出される関数
+function handleMouseMove(event) {
+  if (!isDragging) {
+    return;
+  }
+
+  const [x, y] = getCanvasPosition(event);
+
+  // candidateの座標を更新
+  candidate[dragIndex][0] = x - dragOffsetX;
+  candidate[dragIndex][1] = y - dragOffsetY;
+
+  clearCanvas();
+  drawBodyPose(candidate, subset);
+}
+
+// Canvas要素上でマウスが離された場合に呼び出される関数
+function handleMouseUp(event) {
+  isDragging = false;
+}
+
+function initializePose() {
+    canvas = document.getElementById('canvas');
+    ctx = canvas.getContext('2d');
+
+    canvas.addEventListener('mousedown', handleMouseDown);
+    canvas.addEventListener('mousemove', handleMouseMove);
+    canvas.addEventListener('mouseup', handleMouseUp);
+
+    resizeCanvas(512, 512);
+}