🚧 Add face support

src/App.vue

@@ -12,7 +12,6 @@ import _ from 'lodash';
 Dev TODO List:
 - [Optional] Zoom in/out ability
 - [Optional] bind hand/face to body keypoint so that when certain body keypoint moves, hand/face also moves
-- [Optional] Load face/hand from JSON when adding new hand/face.
 - post result back to parent frame
 - [Optional]: make a extension tab to in WebUI to host the iframe
  */
@@ -417,6 +416,7 @@ export default defineComponent({
           person.attachRightHand(target as OpenposeHand);
           break;
         case OpenposeBodyPart.FACE:
+          person.attachFace(target as OpenposeFace);
           break;
       }
       this.canvas?.renderAll();
@@ -651,6 +651,11 @@ export default defineComponent({
             this.addObject(person, part, firstPerson.right_hand);
             break;
           case OpenposeBodyPart.FACE:
+            if (firstPerson.face === undefined) {
+              this.$notify({ title: 'Error', desc: 'Face does not exist in Json' });
+              return;
+            }
+            this.addObject(person, part, firstPerson.face);
             break;
         }
       });
@@ -814,8 +819,16 @@ export default defineComponent({
                 </a-button>
               </a-upload>
             </div>
-            <a-button v-if="person.face === undefined" @click="addDefaultObject(person, OpenposeBodyPart.FACE)">Add
-              face</a-button>
+            <div v-if="person.face === undefined">
+              <a-upload accept="application/json"
+                :beforeUpload="(file: Blob) => addJsonObject(file, person, OpenposeBodyPart.FACE)"
+                :showUploadList="false">
+                <a-button>
+                  Add Face
+                  <upload-outlined></upload-outlined>
+                </a-button>
+              </a-upload>
+            </div>
             <a-collapse accordion :activeKey="activeBodyPart" @update:activeKey="updateActiveBodyPart($event, person)">
               <OpenposeObjectPanel v-if="person.left_hand !== undefined" :object="person.left_hand"
                 :display_name="'Left Hand'" @removeObject="removeObject(person, OpenposeBodyPart.LEFT_HAND)"

src/Openpose.ts

@@ -448,19 +448,34 @@ class OpenposeHand extends OpenposeObject {
 };
 
 class OpenposeFace extends OpenposeObject {
+    static keypoint_names: string[] = [
+        ..._.range(17).map(i => `FaceOutline-${i}`),
+        ..._.range(5).map(i => `LeftEyebrow-${i}`),
+        ..._.range(5).map(i => `RightEyebrow-${i}`),
+        ..._.range(4).map(i => `NoseBridge-${i}`),
+        ..._.range(5).map(i => `NoseBottom-${i}`),
+        ..._.range(6).map(i => `LeftEyeOutline-${i}`),
+        ..._.range(6).map(i => `RightEyeOutline-${i}`),
+        ..._.range(12).map(i => `MouthOuterBound-${i}`),
+        ..._.range(8).map(i => `MouthInnerBound-${i}`),
+        'LeftEyeball',
+        'RightEyeball',
+    ];
+
     constructor(rawKeypoints: [number, number, number][]) {
-        const keypoints = rawKeypoints.map((rawKeypoint, i) => new OpenposeKeypoint2D(
-            rawKeypoint[0] > 0 ? rawKeypoint[0] : -1,
-            rawKeypoint[1] > 0 ? rawKeypoint[1] : -1,
-            rawKeypoint[2],
-            formatColor([255, 255, 255]),
-            `FaceKeypoint-${i}`
-        ));
+        const keypoints = _.zipWith(rawKeypoints, OpenposeFace.keypoint_names,
+            (rawKeypoint, name) => new OpenposeKeypoint2D(
+                rawKeypoint[0] > 0 ? rawKeypoint[0] : -1,
+                rawKeypoint[1] > 0 ? rawKeypoint[1] : -1,
+                rawKeypoint[2],
+                formatColor([255, 255, 255]),
+                name
+            ));
         super(keypoints, []);
     }
 }
 
-enum OpenposeBodyPart{
+enum OpenposeBodyPart {
     LEFT_HAND = 'left_hand',
     RIGHT_HAND = 'right_hand',
     FACE = 'face',
@@ -580,6 +595,11 @@ class OpenposePerson {
         this.adjustHand(hand, this.body.getKeypointByName('right_wrist'), this.body.getKeypointByName('right_elbow'));
         this.right_hand = hand;
     }
+
+    public attachFace(face: OpenposeFace) {
+        // TODO: adjust face location.
+        this.face = face;
+    }
 };
 
 interface IOpenposePersonJson {