🚧 handle params from POST request

main.d.ts

@@ -0,0 +1,12 @@
+export {};
+
+interface DataFromServer {
+  image_url: string;
+  pose: string;
+}
+
+declare global {
+    interface Window {
+        dataFromServer: DataFromServer;
+    }
+}

scripts/openpose_editor.py

@@ -10,8 +10,8 @@ import modules.scripts as scripts
 import modules.script_callbacks as script_callbacks
 
 class Item(BaseModel):
-    # base64 encoded image.
+    # image url.
-    image: str
+    image_url: str
     # stringified pose JSON.
     pose: str
 

src/App.vue

@@ -14,7 +14,6 @@ Dev TODO List:
 - Attach hand/face to correct location when added
 - bind hand/face to body keypoint so that when certain body keypoint moves, hand/face also moves
 - Auto-zoom in/out and lock zoom level when face/hand are selected
-- Read JSON/background file from POST request params
 - post result back to parent frame
 - [Optional]: make a extension tab to in WebUI to host the iframe
  */
@@ -574,6 +573,22 @@ export default defineComponent({
         ));
       });
     },
+    loadFromRequestParams() {
+      const data = window.dataFromServer;
+      if (_.isEmpty(data)) {
+        return;
+      }
+
+      let poseJson: IOpenposeJson;
+      try {
+          poseJson = JSON.parse(data.pose) as IOpenposeJson;
+        } catch (ex: any) {
+          this.$notify({ title: 'Error', desc: ex.message });
+          return;
+        }
+      this.loadPeopleFromJson(poseJson);
+      this.loadBackgroundImageFromURL(data.image_url);
+    },
     downloadCanvasAsJson() {
       const data = {
         people: [...this.people.values()].map(person => person.toJson()),

tsconfig.app.json

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "main.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,