fb1ffd4d2aea1b996230b8c8528d58e19308ce05ffb2f5c4d89d42fa73455684

sd-webui-3d-open-pose-editor/scripts/openpose_editor.py

@@ -0,0 +1,276 @@
+import html
+import json
+import os.path
+import pathlib
+import typing
+import urllib.parse
+
+import gradio as gr
+
+try:
+    root_path = pathlib.Path(__file__).resolve().parents[1]
+except NameError:
+    import inspect
+
+    root_path = pathlib.Path(inspect.getfile(lambda: None)).resolve().parents[1]
+
+
+def get_asset_url(
+    file_path: pathlib.Path, append: typing.Optional[dict[str, str]] = None
+) -> str:
+    if append is None:
+        append = {"v": str(os.path.getmtime(file_path))}
+    else:
+        append = append.copy()
+        append["v"] = str(os.path.getmtime(file_path))
+    return f"/file={file_path.absolute()}?{urllib.parse.urlencode(append)}"
+
+
+def write_config_file() -> pathlib.Path:
+    assets = {
+        "models/hand.fbx": get_asset_url(root_path / "models" / "hand.fbx"),
+        "models/foot.fbx": get_asset_url(root_path / "models" / "foot.fbx"),
+        "src/poses/data.bin": get_asset_url(root_path / "src" / "poses" / "data.bin"),
+    }
+
+    MEDIAPIPE_POSE_VERSION = "0.5.1675469404"
+    mediapipe_dir = root_path / "downloads" / "pose" / MEDIAPIPE_POSE_VERSION
+    for file_name in [
+        "pose_landmark_full.tflite",
+        "pose_web.binarypb",
+        "pose_solution_packed_assets.data",
+        "pose_solution_simd_wasm_bin.wasm",
+        "pose_solution_packed_assets_loader.js",
+        "pose_solution_simd_wasm_bin.js",
+    ]:
+        file_path = mediapipe_dir / file_name
+        if not file_path.exists():
+            continue
+        assets[file_name] = get_asset_url(file_path.absolute())
+
+    consts = {"assets": assets}
+
+    config_dir = root_path / "downloads"
+    config_dir.mkdir(mode=0o755, parents=True, exist_ok=True)
+    config_path = config_dir / "config.json"
+    config_path.write_text(json.dumps(consts))
+    return config_path
+
+
+def on_ui_tabs():
+    with gr.Blocks(analytics_enabled=False) as blocks:
+        create_ui()
+    return [(blocks, "3D Openpose", "threedopenpose")]
+
+
+def create_ui():
+    try:
+        from modules.shared import opts
+
+        cn_max: int = opts.control_net_max_models_num
+        use_online: bool = opts.openpose3d_use_online_version
+    except (ImportError, AttributeError):
+        cn_max = 0
+        use_online = False
+
+    if use_online:
+        html_url = "https://zhuyu1997.github.io/open-pose-editor/"
+    else:
+        config = {"config": get_asset_url(write_config_file()) or ""}
+        html_url = get_asset_url(root_path / "pages" / "index.html", config)
+
+    with gr.Tabs(elem_id="openpose3d_main"):
+        with gr.Tab(label="Edit Openpose"):
+            gr.HTML(
+                f"""
+                <iframe id="openpose3d_iframe" src="{html.escape(html_url)}"></iframe>
+                """
+            )
+            gr.Markdown(
+                "Original: [Online 3D Openpose Editor](https://zhuyu1997.github.io/open-pose-editor/)"
+            )
+        with gr.Tab(label="Send to ControlNet"):
+            with gr.Row():
+                send_t2i = gr.Button(value="Send to txt2img", variant="primary")
+                send_i2i = gr.Button(value="Send to img2img", variant="primary")
+            with gr.Row():
+                cn_dropdown_list = [str(i) for i in range(cn_max)]
+                cn_dropdown_list.insert(0, "-")
+                with gr.Column(variant="panel"):
+                    pose_image = gr.Image(
+                        label="Pose",
+                        elem_id="openpose3d_pose_image",
+                    )
+                    with gr.Row():
+                        pose_target = gr.Dropdown(
+                            label="Control Model number",
+                            choices=cn_dropdown_list,
+                            value="0" if cn_max >= 1 else "-",
+                        )
+                        pose_download = gr.Button(value="Download")
+                with gr.Column(variant="panel"):
+                    depth_image = gr.Image(
+                        label="Depth",
+                        elem_id="openpose3d_depth_image",
+                    )
+                    with gr.Row():
+                        depth_target = gr.Dropdown(
+                            label="Control Model number",
+                            choices=cn_dropdown_list,
+                            value="1" if cn_max >= 2 else "-",
+                        )
+                        depth_download = gr.Button(value="Download")
+                with gr.Column(variant="panel"):
+                    normal_image = gr.Image(
+                        label="Normal",
+                        elem_id="openpose3d_normal_image",
+                    )
+                    with gr.Row():
+                        normal_target = gr.Dropdown(
+                            label="Control Model number",
+                            choices=cn_dropdown_list,
+                            value="2" if cn_max >= 3 else "-",
+                        )
+                        normal_download = gr.Button(value="Download")
+                with gr.Column(variant="panel"):
+                    canny_image = gr.Image(
+                        label="Canny",
+                        elem_id="openpose3d_canny_image",
+                    )
+                    with gr.Row():
+                        canny_target = gr.Dropdown(
+                            label="Control Model number",
+                            choices=cn_dropdown_list,
+                            value="3" if cn_max >= 4 else "-",
+                        )
+                        canny_download = gr.Button(value="Download")
+
+    send_cn_inputs = [
+        pose_image,
+        pose_target,
+        depth_image,
+        depth_target,
+        normal_image,
+        normal_target,
+        canny_image,
+        canny_target,
+    ]
+    send_t2i.click(
+        None,
+        send_cn_inputs,
+        None,
+        _js="window.openpose3d.sendTxt2img",
+    )
+    send_i2i.click(
+        None,
+        send_cn_inputs,
+        None,
+        _js="window.openpose3d.sendImg2img",
+    )
+    pose_download.click(
+        None,
+        pose_image,
+        None,
+        _js="(v) => window.openpose3d.downloadImage(v, 'pose')",
+    )
+    depth_download.click(
+        None,
+        depth_image,
+        None,
+        _js="(v) => window.openpose3d.downloadImage(v, 'depth')",
+    )
+    normal_download.click(
+        None,
+        normal_image,
+        None,
+        _js="(v) => window.openpose3d.downloadImage(v, 'normal')",
+    )
+    canny_download.click(
+        None,
+        canny_image,
+        None,
+        _js="(v) => window.openpose3d.downloadImage(v, 'canny')",
+    )
+
+
+def on_ui_settings():
+    from modules.shared import OptionInfo, opts
+
+    section = ("openpose3d", "3D Openpose Editor")
+
+    opts.add_option(
+        "openpose3d_use_online_version",
+        OptionInfo(False, "Use online version", section=section),
+    )
+
+
+def main():
+    js_path = root_path / "javascript" / "index.js"
+    css_path = root_path / "style.css"
+
+    original_template_response = gr.routes.templates.TemplateResponse
+    head = """
+    <script>
+        function waitForElement(parent, selector) {
+            return new Promise((resolve) => {
+                const observer = new MutationObserver(() => {
+                    if (!parent.querySelector(selector)) {
+                        return
+                    }
+                    observer.disconnect()
+                    resolve(undefined)
+                })
+
+                observer.observe(parent, {
+                    childList: true,
+                    subtree: true,
+                })
+
+                if (parent.querySelector(selector)) {
+                    resolve(undefined)
+                }
+            })
+        }
+        let onTabChangedCallback
+        function gradioApp() {
+            const elems = document.getElementsByTagName('gradio-app')
+            const gradioShadowRoot = elems.length == 0 ? null : elems[0].shadowRoot
+            return gradioShadowRoot ? gradioShadowRoot : document
+        }
+        async function onUiLoaded(callback){
+            await waitForElement(gradioApp(), '#openpose3d_main')
+            await callback()
+            await onTabChangedCallback?.()
+        }
+        function onUiUpdate(callback){
+            onTabChangedCallback = callback
+        }
+    </script>
+    """
+    head += f"""
+    <script type="module">
+        document.addEventListener("DOMContentLoaded", function() {{import("{get_asset_url(js_path)}")}})
+    </script>
+    """
+
+    def template_response(*args, **kwargs):
+        res = original_template_response(*args, **kwargs)
+        res.body = res.body.replace(b"</head>", f"{head}</head>".encode("utf8"))
+        res.init_headers()
+        return res
+
+    gr.routes.templates.TemplateResponse = template_response
+
+    with gr.Blocks(analytics_enabled=False, css=css_path.read_text()) as blocks:
+        with gr.Tab(label="3D Openpose", elem_id="tab_threedopenpose"):
+            create_ui()
+    blocks.launch()
+
+
+try:
+    from modules import script_callbacks
+
+    script_callbacks.on_ui_tabs(on_ui_tabs)
+    script_callbacks.on_ui_settings(on_ui_settings)
+except ImportError:
+    main()

sd-webui-3d-open-pose-editor/src/assets.ts

@@ -0,0 +1,9 @@
+import handFBXFileUrl from '../models/hand.fbx?url'
+import footFBXFileUrl from '../models/foot.fbx?url'
+import posesLibraryUrl from './poses/data.bin?url'
+
+export default {
+    'models/hand.fbx': handFBXFileUrl,
+    'models/foot.fbx': footFBXFileUrl,
+    'src/poses/data.bin': posesLibraryUrl,
+}

sd-webui-3d-open-pose-editor/src/body.ts

@@ -0,0 +1,1293 @@
+import * as THREE from 'three'
+import { Bone, Object3D } from 'three'
+import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils'
+import type { TupleToUnion } from 'type-fest'
+import {
+    FindObjectItem,
+    GetLocalPosition,
+    GetWorldPosition,
+} from './utils/three-utils'
+import { CCDIKSolver } from './utils/CCDIKSolver'
+import {
+    BoneThickness,
+    ConnectColor,
+    ToHexColor,
+    GetColorOfLinkByName,
+    OpenposeKeypoints,
+    OpenposeyKeypointsConst,
+    PartIndexMappingOfBlazePoseModel,
+    PartIndexMappingOfPoseModel,
+} from './defines'
+import {
+    ExtremitiesMapping,
+    FootObject,
+    HandObject,
+    IsMatchBonePrefix,
+} from './models'
+
+function GetPresetColorOfJoint(name: string) {
+    const index = OpenposeKeypoints.indexOf(name)
+    return index !== -1 ? ToHexColor(ConnectColor[index]) : 0x0
+}
+
+function CreateLink(
+    startObject: THREE.Object3D,
+    startName: string,
+    endName: string
+) {
+    const presetColor = GetColorOfLinkByName(startName, endName)
+    const material = new THREE.MeshBasicMaterial({
+        color: presetColor ?? 0x0,
+        opacity: 0.6,
+        transparent: true,
+    })
+    const mesh = new THREE.Mesh(
+        new THREE.SphereGeometry(BoneThickness),
+        material
+    )
+    mesh.name = startName + '_link_' + endName
+    startObject.add(mesh)
+    return mesh
+}
+
+function UpdateJointSphere(obj: Object3D, thickness = BoneThickness) {
+    const name = obj.name + '_joint_sphere'
+    obj.getObjectByName(name)?.scale.setScalar(thickness)
+}
+
+function UpdateLink4(
+    startObject: Object3D,
+    endObject: Object3D,
+    startName: string,
+    endName: string,
+    thickness = BoneThickness,
+    create = false
+) {
+    const startPosition = new THREE.Vector3(0, 0, 0)
+    const endPostion = endObject.position
+    const distance = startPosition.distanceTo(endPostion)
+    // 将拉伸后的球体放在中点，并计算旋转轴和角度
+    const origin = startPosition.clone().add(endPostion).multiplyScalar(0.5)
+
+    // Another method
+    //     new THREE.Quaternion().setFromUnitVectors(...)
+    const v = endPostion.clone().sub(startPosition)
+    const unit = new THREE.Vector3(1, 0, 0)
+    const axis = unit.clone().cross(v)
+    const angle = unit.clone().angleTo(v)
+    const mesh = create
+        ? CreateLink(startObject, startName, endName)
+        : startObject.getObjectByName(startName + '_link_' + endName)!
+    mesh.scale.copy(
+        new THREE.Vector3(
+            distance / 2,
+            thickness / BoneThickness,
+            thickness / BoneThickness
+        )
+    )
+    mesh.position.copy(origin)
+    mesh.setRotationFromAxisAngle(axis.normalize(), angle)
+
+    UpdateJointSphere(startObject, thickness)
+    UpdateJointSphere(endObject, thickness)
+}
+
+function UpdateLink2(
+    startObject: Object3D,
+    endObject: Object3D,
+    thickness = BoneThickness,
+    create = false
+) {
+    UpdateLink4(
+        startObject,
+        endObject,
+        startObject.name,
+        endObject.name,
+        thickness,
+        create
+    )
+}
+
+function CreateSphere(name: string, thickness: number, color: number) {
+    const sphere = new THREE.Mesh(
+        new THREE.SphereGeometry(thickness),
+        new THREE.MeshBasicMaterial({ color: color })
+    )
+    sphere.name = name
+    return sphere
+}
+
+function CreateGroup(name: string, x = 0, y = 0, z = 0) {
+    const object = new THREE.Group()
+    object.name = name
+    object.translateX(x)
+    object.translateY(y)
+    object.translateZ(z)
+    return object
+}
+
+function CreateJoint(
+    name: string,
+    x = 0,
+    y = 0,
+    z = 0,
+    thickness: number = BoneThickness
+) {
+    return CreateGroup(name, x, y, z).add(
+        CreateSphere(
+            name + '_joint_sphere',
+            thickness,
+            GetPresetColorOfJoint(name)
+        )
+    )
+}
+
+let templateBody: THREE.Group | null = null
+
+export function CloneBody() {
+    if (templateBody) {
+        return SkeletonUtils.clone(templateBody)
+    }
+    return null
+}
+
+const HandScale = 2.2
+const FootScale = 0.25
+
+function CreateHand(name: 'right_hand' | 'left_hand') {
+    if (!HandObject || !FootObject) {
+        throw new Error('Failed to create body')
+    }
+
+    if (name === 'right_hand') {
+        const right_hand = SkeletonUtils.clone(HandObject)
+
+        right_hand.name = 'right_hand'
+        right_hand.translateX(-0.4)
+        right_hand.translateY(3)
+        right_hand.rotateY(Math.PI)
+        right_hand.rotateZ(-Math.PI / 2)
+
+        right_hand.scale.multiplyScalar(HandScale)
+
+        right_hand.traverse((o) => {
+            if (IsBone(o.name)) {
+                o.name = o.name + '_R'
+            }
+        })
+        return right_hand
+    } else {
+        const left_hand = SkeletonUtils.clone(HandObject)
+
+        left_hand.name = 'left_hand'
+        left_hand.scale.x = -1
+        left_hand.translateX(0.4)
+        left_hand.translateY(3)
+        left_hand.rotateY(Math.PI)
+        left_hand.rotateZ(Math.PI / 2)
+        left_hand.scale.multiplyScalar(HandScale)
+
+        left_hand.traverse((o) => {
+            if (IsBone(o.name)) {
+                o.name = o.name + '_L'
+            }
+        })
+        return left_hand
+    }
+}
+
+function CreateFoot(name: 'right_foot' | 'left_foot') {
+    if (!HandObject || !FootObject) {
+        throw new Error('Failed to create body')
+    }
+
+    if (name === 'right_foot') {
+        const right_foot = SkeletonUtils.clone(FootObject)
+
+        right_foot.name = 'right_foot'
+        right_foot.scale.setX(-1)
+        right_foot.scale.multiplyScalar(FootScale)
+
+        right_foot.traverse((o) => {
+            if (IsBone(o.name)) {
+                o.name = o.name + '_R'
+            }
+        })
+
+        return right_foot
+    } else {
+        const left_foot = SkeletonUtils.clone(FootObject)
+        left_foot.name = 'left_foot'
+        left_foot.scale.multiplyScalar(FootScale)
+
+        left_foot.traverse((o) => {
+            if (IsBone(o.name)) {
+                o.name = o.name + '_L'
+            }
+        })
+        return left_foot
+    }
+}
+
+export function CreateTemplateBody() {
+    if (!HandObject || !FootObject) {
+        throw new Error('Failed to create body')
+    }
+    const width = 34
+    const height = 46
+
+    const torso = CreateGroup('torso', 0, 115, 0).add(
+        CreateSphere('center', BoneThickness, 0x888888),
+        CreateGroup('five', 0, height / 2, 0).add(
+            CreateJoint('neck').add(
+                CreateJoint('nose', 0, 20, 14).add(
+                    CreateJoint('right_eye', -3, 3, -3).add(
+                        CreateJoint('right_ear', -4, -3, -8)
+                    ),
+                    CreateJoint('left_eye', 3, 3, -3).add(
+                        CreateJoint('left_ear', 4, -3, -8)
+                    )
+                )
+            ),
+            CreateGroup('left_shoulder_inner').add(
+                CreateJoint('right_shoulder', -width / 2, 0, 0).add(
+                    CreateJoint('right_elbow', 0, -25, 0).add(
+                        CreateJoint('right_wrist', 0, -25, 0).add(
+                            CreateHand('right_hand')
+                        )
+                    )
+                )
+            ),
+            CreateGroup('right_shoulder_inner').add(
+                CreateJoint('left_shoulder', width / 2, 0, 0).add(
+                    CreateJoint('left_elbow', 0, -25, 0).add(
+                        CreateJoint('left_wrist', 0, -25, 0).add(
+                            CreateHand('left_hand')
+                        )
+                    )
+                )
+            ),
+            CreateGroup('right_hip_inner').add(
+                CreateJoint('right_hip', -width / 2 + 7, -height, 0).add(
+                    CreateJoint('right_knee', 0, -40, 0).add(
+                        CreateJoint('right_ankle', 0, -36, 0).add(
+                            CreateFoot('right_foot')
+                        )
+                    )
+                )
+            ),
+            CreateGroup('left_hip_inner').add(
+                CreateJoint('left_hip', width / 2 - 7, -height, 0).add(
+                    CreateJoint('left_knee', 0, -40, 0).add(
+                        CreateJoint('left_ankle', 0, -36, 0).add(
+                            CreateFoot('left_foot')
+                        )
+                    )
+                )
+            )
+        )
+    )
+
+    new BodyControlor(torso).Create()
+    templateBody = torso
+}
+
+function CreateIKTarget(body: Object3D, effector: Object3D, name: string) {
+    const target = new THREE.Mesh(
+        new THREE.BoxGeometry(
+            BoneThickness * 5,
+            BoneThickness * 5,
+            BoneThickness * 5
+        ),
+        new THREE.MeshBasicMaterial({
+            color: 0x0088ff,
+            transparent: true,
+            opacity: 0.5,
+        })
+    )
+
+    const effector_pos = GetWorldPosition(effector)
+    target.position.copy(GetLocalPosition(body, effector_pos))
+    target.name = name
+
+    return target
+}
+
+export function GetExtremityMesh(o: Object3D) {
+    if (!(o.name in ExtremitiesMapping)) {
+        return null
+    }
+    return FindObjectItem<THREE.SkinnedMesh>(
+        o,
+        ExtremitiesMapping[o.name].meshName
+    )
+}
+
+export function IsVirtualPoint(name: string) {
+    return [
+        'right_shoulder_inner',
+        'left_shoulder_inner',
+        'right_hip_inner',
+        'left_hip_inner',
+        'five',
+    ].includes(name)
+}
+
+export function IsNeedSaveObject(name: string) {
+    if (OpenposeKeypoints.includes(name)) return true
+    if (name === 'right_hand' || name === 'left_hand') return true
+    if (name === 'right_foot' || name === 'left_foot') return true
+    if (IsVirtualPoint(name)) return true // virtual point
+    if (IsBone(name)) return true
+    if (name.includes('_joint_sphere')) return true
+    if (name.includes('_link_')) return true
+    return false
+}
+
+export function IsBone(name: string) {
+    return IsMatchBonePrefix(name)
+}
+
+const pickableObjectNames: string[] = [
+    'torso',
+    'nose',
+    'neck',
+    'right_shoulder',
+    'left_shoulder',
+    'right_elbow',
+    'left_elbow',
+    'right_hip',
+    'left_hip',
+    'right_knee',
+    'left_knee',
+    // virtual point for better control
+    'right_shoulder_inner',
+    'left_shoulder_inner',
+    'right_hip_inner',
+    'left_hip_inner',
+    'left_wrist_target',
+    'right_wrist_target',
+    'left_ankle_target',
+    'right_ankle_target',
+]
+
+export function IsPickable(name: string, isFreeMode = false) {
+    if (isFreeMode && OpenposeKeypoints.includes(name)) return true
+    if (pickableObjectNames.includes(name)) return true
+    if (IsBone(name)) return true
+    return false
+}
+
+export function IsTranslate(name: string, isFreeMode = false) {
+    if (isFreeMode)
+        return (
+            [
+                'right_shoulder_inner',
+                'left_shoulder_inner',
+                'right_hip_inner',
+                'left_hip_inner',
+                'neck',
+            ].includes(name) == false
+        )
+
+    if (name.endsWith('_target')) return true
+    return false
+}
+
+export function IsTarget(name: string) {
+    if (name.endsWith('_target')) return true
+    return false
+}
+
+export function IsHand(name: string) {
+    return ['left_hand', 'right_hand'].includes(name)
+}
+
+export function IsFoot(name: string) {
+    return ['left_foot', 'right_foot'].includes(name)
+}
+
+export function IsMask(name: string) {
+    return ['foot_mask', 'hand_mask'].includes(name)
+}
+
+export function IsSkeleton(name: string) {
+    if (name == 'torso') return true
+    if (OpenposeKeypoints.includes(name)) return true
+    if (IsVirtualPoint(name)) return true // virtual point
+    if (name.includes('_joint_sphere')) return true
+    if (name.includes('_link_')) return true
+    return false
+}
+
+export function IsExtremities(name: string) {
+    return ['left_hand', 'right_hand', 'left_foot', 'right_foot'].includes(name)
+}
+
+const ControlablePart = [
+    ...OpenposeyKeypointsConst,
+    'left_shoulder_inner',
+    'right_shoulder_inner',
+    'left_hip_inner',
+    'right_hip_inner',
+    'five',
+    'right_hand',
+    'left_hand',
+    'left_foot',
+    'right_foot',
+    'torso',
+
+    'left_wrist_target',
+    'right_wrist_target',
+    'left_ankle_target',
+    'right_ankle_target',
+] as const
+
+type ControlPartName = TupleToUnion<typeof ControlablePart>
+
+export interface BodyData {
+    position?: ReturnType<THREE.Vector3['toArray']>
+    rotation?: ReturnType<THREE.Euler['toArray']>
+    scale?: ReturnType<THREE.Vector3['toArray']>
+
+    child: Record<
+        string,
+        {
+            position?: ReturnType<THREE.Vector3['toArray']>
+            rotation?: ReturnType<THREE.Euler['toArray']>
+            scale?: ReturnType<THREE.Vector3['toArray']>
+        }
+    >
+}
+
+export interface HandData {
+    child: Record<
+        string,
+        {
+            position?: ReturnType<THREE.Vector3['toArray']>
+            rotation?: ReturnType<THREE.Euler['toArray']>
+            scale?: ReturnType<THREE.Vector3['toArray']>
+        }
+    >
+}
+
+export class BodyControlor {
+    body: Object3D
+    part: Record<ControlPartName, Object3D> = {} as any
+    constructor(o: Object3D) {
+        this.body = o
+        this.body.traverse((o) => {
+            if (ControlablePart.includes(o.name as ControlPartName)) {
+                this.part[o.name as ControlPartName] = o
+            }
+        })
+
+        this.part['left_shoulder_inner'] = this.getObjectByName(
+            'left_shoulder_inner'
+        )
+        this.part['right_shoulder_inner'] = this.getObjectByName(
+            'right_shoulder_inner'
+        )
+        this.part['left_hip_inner'] = this.getObjectByName('left_hip_inner')
+        this.part['right_hip_inner'] = this.getObjectByName('right_hip_inner')
+        this.part['five'] = this.getObjectByName('five')
+        this.part['right_hand'] = this.getObjectByName('right_hand')
+        this.part['left_hand'] = this.getObjectByName('left_hand')
+        this.part['right_foot'] = this.getObjectByName('right_foot')
+        this.part['left_foot'] = this.getObjectByName('left_foot')
+        this.part['torso'] = this.body
+    }
+
+    getObjectByName(name: string) {
+        const part = this.body.getObjectByName(name)
+
+        if (!part) throw new Error(`Not found part: ${name}`)
+
+        return part
+    }
+    getWorldPosition(o: Object3D) {
+        const pos = new THREE.Vector3()
+        o.getWorldPosition(pos)
+        return pos
+    }
+
+    UpdateLink(
+        name: ControlPartName,
+        thickness = this.BoneThickness,
+        create = false
+    ) {
+        if (
+            [
+                'left_hip',
+                'right_hip',
+                'right_shoulder',
+                'left_shoulder',
+            ].includes(name)
+        )
+            UpdateLink4(
+                this.part[`${name}_inner` as ControlPartName],
+                this.part[name],
+                'neck',
+                name,
+                thickness,
+                create
+            )
+        else if (name !== 'neck' && OpenposeKeypoints.includes(name)) {
+            UpdateLink2(
+                this.part[name].parent!,
+                this.part[name],
+                thickness,
+                create
+            )
+        }
+    }
+
+    get HeadSize() {
+        const size = this.getWorldPosition(this.part['right_ear']).distanceTo(
+            this.getWorldPosition(this.part['left_ear'])
+        )
+        return size
+    }
+
+    set HeadSize(value: number) {
+        const scale = value / this.HeadSize
+
+        const earLength = this.part['left_ear'].position.length() * scale
+        const eyeLength = this.part['left_eye'].position.length() * scale
+
+        this.part['left_ear'].position.normalize().multiplyScalar(earLength)
+        this.part['right_ear'].position.normalize().multiplyScalar(earLength)
+        this.part['left_eye'].position.normalize().multiplyScalar(eyeLength)
+        this.part['right_eye'].position.normalize().multiplyScalar(eyeLength)
+
+        this.UpdateLink('left_eye')
+        this.UpdateLink('right_eye')
+        this.UpdateLink('left_ear')
+        this.UpdateLink('right_ear')
+    }
+    get NoseToNeck() {
+        return this.part['nose'].position.length()
+    }
+    set NoseToNeck(value: number) {
+        this.part['nose'].position.normalize().multiplyScalar(value)
+        this.UpdateLink('nose')
+    }
+    get ShoulderToHip() {
+        return this.getDistanceOf(
+            this.getWorldPosition(this.part['five']),
+            this.getMidpoint(
+                this.getWorldPosition(this.part['left_hip']),
+                this.getWorldPosition(this.part['right_hip'])
+            )
+        )
+    }
+    set ShoulderToHip(value: number) {
+        const origin = this.ShoulderToHip
+
+        this.part['five'].position.normalize().multiplyScalar(value / 2)
+        this.part['left_hip'].position.multiplyScalar(value / origin)
+        this.part['right_hip'].position.multiplyScalar(value / origin)
+
+        this.UpdateLink('left_hip')
+        this.UpdateLink('right_hip')
+    }
+    get ShoulderWidth() {
+        return this.part['left_shoulder'].position.distanceTo(
+            this.part['right_shoulder'].position
+        )
+    }
+    set ShoulderWidth(width: number) {
+        const right_shoulder = this.part['right_shoulder']
+        right_shoulder.position.x = -width / 2
+        const left_shoulder = this.part['left_shoulder']
+        left_shoulder.position.x = width / 2
+
+        this.UpdateLink('right_shoulder')
+        this.UpdateLink('left_shoulder')
+    }
+
+    get UpperArm() {
+        return this.part['left_elbow'].position.length()
+    }
+    set UpperArm(length: number) {
+        this.part['left_elbow'].position.normalize().multiplyScalar(length)
+        this.part['right_elbow'].position.normalize().multiplyScalar(length)
+        this.UpdateLink('left_elbow')
+        this.UpdateLink('right_elbow')
+    }
+    get Forearm() {
+        return this.part['left_wrist'].position.length()
+    }
+    set Forearm(length: number) {
+        this.part['left_wrist'].position.normalize().multiplyScalar(length)
+        this.part['right_wrist'].position.normalize().multiplyScalar(length)
+
+        this.UpdateLink('left_wrist')
+        this.UpdateLink('right_wrist')
+    }
+
+    get ArmLength() {
+        return this.UpperArm + this.Forearm
+    }
+    set ArmLength(length: number) {
+        const origin = this.ArmLength
+        this.UpperArm = (length * this.UpperArm) / origin
+        this.Forearm = (length * this.Forearm) / origin
+    }
+
+    get Thigh() {
+        return this.part['left_knee'].position.length()
+    }
+    set Thigh(length: number) {
+        this.part['left_knee'].position.normalize().multiplyScalar(length)
+        this.part['right_knee'].position.normalize().multiplyScalar(length)
+
+        this.UpdateLink('left_knee')
+        this.UpdateLink('right_knee')
+    }
+
+    get HandSize() {
+        return Math.abs(this.part['left_hand'].scale.x) / HandScale
+    }
+    set HandSize(size: number) {
+        const origin = this.HandSize
+        this.part['left_hand'].scale
+            .divideScalar(origin * HandScale)
+            .multiplyScalar(size * HandScale)
+        this.part['right_hand'].scale
+            .divideScalar(origin * HandScale)
+            .multiplyScalar(size * HandScale)
+    }
+
+    get Hips() {
+        return this.getDistanceOf(
+            this.getWorldPosition(this.part['left_hip']),
+            this.getWorldPosition(this.part['right_hip'])
+        )
+    }
+    set Hips(width: number) {
+        const left = this.getWorldPosition(this.part['left_hip'])
+        const right = this.getWorldPosition(this.part['right_hip'])
+
+        const mid = this.getMidpoint(left, right)
+
+        // newLLeft = normalize(left - mid) * width + mid
+
+        const newLeft = left
+            .sub(mid)
+            .normalize()
+            .multiplyScalar(width / 2.0)
+            .add(mid)
+        const newRight = right
+            .sub(mid)
+            .normalize()
+            .multiplyScalar(width / 2.0)
+            .add(mid)
+
+        this.setPositionFromWorld(this.part['left_hip'], newLeft)
+        this.setPositionFromWorld(this.part['right_hip'], newRight)
+
+        this.UpdateLink('left_hip')
+        this.UpdateLink('right_hip')
+    }
+    get LowerLeg() {
+        return this.part['left_ankle'].position.length()
+    }
+    set LowerLeg(length: number) {
+        this.part['left_ankle'].position.normalize().multiplyScalar(length)
+        this.part['right_ankle'].position.normalize().multiplyScalar(length)
+
+        this.UpdateLink('left_ankle')
+        this.UpdateLink('right_ankle')
+    }
+
+    get LegLength() {
+        return this.Thigh + this.LowerLeg
+    }
+    set LegLength(length: number) {
+        const origin = this.LegLength
+        this.Thigh = (length * this.Thigh) / origin
+        this.LowerLeg = (length * this.LowerLeg) / origin
+    }
+
+    get FootSize() {
+        return Math.abs(this.part['left_foot'].scale.x) / FootScale
+    }
+    set FootSize(size: number) {
+        const origin = this.FootSize
+        this.part['left_foot'].scale
+            .divideScalar(origin * FootScale)
+            .multiplyScalar(size * FootScale)
+        this.part['right_foot'].scale
+            .divideScalar(origin * FootScale)
+            .multiplyScalar(size * FootScale)
+    }
+    getLocalPosition(obj: Object3D, postion: THREE.Vector3) {
+        return obj.worldToLocal(postion.clone())
+    }
+
+    setPositionFromWorld(obj: Object3D, postion: THREE.Vector3) {
+        return obj.position.copy(this.getLocalPosition(obj.parent!, postion))
+    }
+
+    getDirectionVectorByParentOf(
+        name: ControlPartName,
+        from: THREE.Vector3,
+        to: THREE.Vector3
+    ) {
+        const parent = this.part[name].parent!
+        const localFrom = this.getLocalPosition(parent, from)
+        const localTo = this.getLocalPosition(parent, to)
+
+        return localTo.clone().sub(localFrom).normalize()
+    }
+
+    rotateTo(name: ControlPartName, dir: THREE.Vector3) {
+        const obj = this.part[name]
+        const unit = obj.position.clone().normalize()
+        const axis = unit.clone().cross(dir)
+        const angle = unit.clone().angleTo(dir)
+        obj.parent?.rotateOnAxis(axis.normalize(), angle)
+    }
+
+    rotateTo3(name: ControlPartName, from: THREE.Vector3, to: THREE.Vector3) {
+        this.rotateTo(name, this.getDirectionVectorByParentOf(name, from, to))
+    }
+
+    setPositionByDistance(
+        name: ControlPartName,
+        from: THREE.Vector3,
+        to: THREE.Vector3
+    ) {
+        const dis = this.getDistanceOf(from, to)
+        this.part[name].position.normalize().multiplyScalar(dis)
+    }
+
+    setDirectionVector(name: ControlPartName, v: THREE.Vector3) {
+        const len = this.part[name].position.length()
+        this.part[name].position.copy(v).multiplyScalar(len)
+        this.UpdateLink(name)
+    }
+
+    getDistanceOf(from: THREE.Vector3, to: THREE.Vector3) {
+        return from.distanceTo(to)
+    }
+
+    getMidpoint(from: THREE.Vector3, to: THREE.Vector3) {
+        return from.clone().add(to).multiplyScalar(0.5)
+    }
+    ResetPose() {
+        templateBody?.traverse((o) => {
+            if (o.name in this.part) {
+                const name = o.name as ControlPartName
+
+                if (name == 'torso') this.part[name].position.setY(o.position.y)
+                else this.part[name].position.copy(o.position)
+
+                this.part[name].rotation.copy(o.rotation)
+                this.part[name].scale.copy(o.scale)
+                this.UpdateLink(name)
+            }
+        })
+    }
+
+    SetBlazePose(rawData: [number, number, number][]) {
+        this.ResetPose()
+
+        const data = Object.fromEntries(
+            Object.entries(PartIndexMappingOfBlazePoseModel).map(
+                ([name, index]) => {
+                    return [
+                        name,
+                        new THREE.Vector3().fromArray(
+                            rawData[index] ?? [0, 0, 0]
+                        ),
+                    ]
+                }
+            )
+        ) as Record<
+            keyof typeof PartIndexMappingOfBlazePoseModel,
+            THREE.Vector3
+        >
+
+        // this.Hips = this.getDistanceOf(data['right_hip'], data['left_hip'])
+        // this.Thigh = this.getDistanceOf(data['left_knee'], data['left_hip'])
+        // this.LowerLeg = this.getDistanceOf(
+        //     data['left_ankle'],
+        //     data['left_knee']
+        // )
+        // this.UpperArm = this.getDistanceOf(
+        //     data['left_shoulder'],
+        //     data['left_elbow']
+        // )
+        // this.Forearm = this.getDistanceOf(
+        //     data['left_elbow'],
+        //     data['left_wrist']
+        // )
+        // this.ShoulderWidth = this.getDistanceOf(
+        //     data['left_shoulder'],
+        //     data['right_shoulder']
+        // )
+
+        // this.NoseToNeck = this.getDistanceOf(
+        //     data['nose'],
+        //     this.getMidpoint(data['left_shoulder'], data['right_shoulder'])
+        // )
+
+        const map: [
+            ControlPartName,
+            [
+                THREE.Vector3 | keyof typeof PartIndexMappingOfBlazePoseModel,
+                THREE.Vector3 | keyof typeof PartIndexMappingOfBlazePoseModel
+            ]
+        ][] = [
+            [
+                'five',
+                [
+                    this.getMidpoint(
+                        this.getMidpoint(data['left_hip'], data['right_hip']),
+                        this.getMidpoint(
+                            data['left_shoulder'],
+                            data['right_shoulder']
+                        )
+                    ),
+                    this.getMidpoint(
+                        data['left_shoulder'],
+                        data['right_shoulder']
+                    ),
+                ],
+            ],
+
+            [
+                'left_shoulder',
+                [
+                    this.getMidpoint(
+                        data['left_shoulder'],
+                        data['right_shoulder']
+                    ),
+                    'left_shoulder',
+                ],
+            ],
+            ['left_elbow', ['left_shoulder', 'left_elbow']],
+            ['left_wrist', ['left_elbow', 'left_wrist']],
+            [
+                'left_hip',
+                [
+                    this.getMidpoint(
+                        data['left_shoulder'],
+                        data['right_shoulder']
+                    ),
+                    'left_hip',
+                ],
+            ],
+            ['left_knee', ['left_hip', 'left_knee']],
+            ['left_ankle', ['left_knee', 'left_ankle']],
+
+            [
+                'right_shoulder',
+                [
+                    this.getMidpoint(
+                        data['left_shoulder'],
+                        data['right_shoulder']
+                    ),
+                    'right_shoulder',
+                ],
+            ],
+            ['right_elbow', ['right_shoulder', 'right_elbow']],
+            ['right_wrist', ['right_elbow', 'right_wrist']],
+
+            [
+                'right_hip',
+                [
+                    this.getMidpoint(
+                        data['left_shoulder'],
+                        data['right_shoulder']
+                    ),
+                    'right_hip',
+                ],
+            ],
+            ['right_knee', ['right_hip', 'right_knee']],
+            ['right_ankle', ['right_knee', 'right_ankle']],
+
+            [
+                'nose',
+                [
+                    this.getMidpoint(
+                        data['left_shoulder'],
+                        data['right_shoulder']
+                    ),
+                    'nose',
+                ],
+            ],
+            ['left_eye', ['nose', 'left_eye']],
+            ['right_eye', ['nose', 'right_eye']],
+            ['left_ear', ['left_eye', 'left_ear']],
+            ['right_ear', ['right_eye', 'right_ear']],
+        ]
+
+        for (const [name, [from, to]] of map) {
+            this.rotateTo3(
+                name,
+                from instanceof THREE.Vector3 ? from : data[from],
+                to instanceof THREE.Vector3 ? to : data[to]
+            )
+
+            this.setPositionByDistance(
+                name,
+                from instanceof THREE.Vector3 ? from : data[from],
+                to instanceof THREE.Vector3 ? to : data[to]
+            )
+
+            this.UpdateLink(name)
+        }
+        this.Update()
+    }
+    SetPose(rawData: [number, number, number][]) {
+        this.ResetPose()
+
+        const data = Object.fromEntries(
+            Object.entries(PartIndexMappingOfPoseModel).map(([name, index]) => {
+                return [
+                    name,
+                    new THREE.Vector3().fromArray(rawData[index] ?? [0, 0, 0]),
+                ]
+            })
+        ) as Record<keyof typeof PartIndexMappingOfPoseModel, THREE.Vector3>
+
+        this.part['torso'].position.setY(
+            this.getMidpoint(data['Hips'], data['Chest']).y
+        )
+        this.Hips = this.getDistanceOf(data['Hips'], data['UpLeg_L']) * 2
+        this.Thigh = this.getDistanceOf(data['UpLeg_L'], data['Leg_L'])
+        this.LowerLeg = this.getDistanceOf(data['Leg_L'], data['Foot_L'])
+        this.UpperArm = this.getDistanceOf(data['Arm_L'], data['ForeArm_L'])
+        this.Forearm = this.getDistanceOf(data['ForeArm_L'], data['Hand_L'])
+        this.ShoulderWidth =
+            2 *
+            (this.getDistanceOf(data['Shoulder_L'], data['Arm_L']) +
+                this.getDistanceOf(data['Chest'], data['Shoulder_L']) /
+                    Math.SQRT2)
+
+        const map: [
+            ControlPartName,
+            [
+                keyof typeof PartIndexMappingOfPoseModel,
+                keyof typeof PartIndexMappingOfPoseModel
+            ]
+        ][] = [
+            ['five', ['Hips', 'Chest']],
+            ['left_elbow', ['Arm_L', 'ForeArm_L']],
+            ['left_wrist', ['ForeArm_L', 'Hand_L']],
+            ['left_knee', ['UpLeg_L', 'Leg_L']],
+            ['left_ankle', ['Leg_L', 'Foot_L']],
+            ['right_elbow', ['Arm_R', 'ForeArm_R']],
+            ['right_wrist', ['ForeArm_R', 'Hand_R']],
+            ['right_knee', ['UpLeg_R', 'Leg_R']],
+            ['right_ankle', ['Leg_R', 'Foot_R']],
+        ]
+
+        for (const [name, [from, to]] of map)
+            this.rotateTo(
+                name,
+                this.getDirectionVectorByParentOf(name, data[from], data[to])
+            )
+        this.Update()
+    }
+
+    GetHandData(hand: 'left_hand' | 'right_hand'): HandData {
+        const o = this.part[hand]
+        const result: HandData = {
+            child: {},
+        }
+        o.traverse((child) => {
+            if (child.name && IsBone(child.name)) {
+                if (child.name in result.child)
+                    console.log('Duplicate name', child.name, child)
+                const data: Pick<BodyData, 'position' | 'rotation' | 'scale'> =
+                    {}
+
+                if (
+                    this.getDistanceOf(
+                        child.position,
+                        new THREE.Vector3(0, 0, 0)
+                    ) != 0
+                ) {
+                    data.position = child.position.toArray()
+                }
+
+                if (
+                    this.getDistanceOf(
+                        child.scale,
+                        new THREE.Vector3(1, 1, 1)
+                    ) != 0
+                ) {
+                    data.scale = child.scale.toArray()
+                }
+
+                if (
+                    child.rotation.x !== 0 ||
+                    child.rotation.y !== 0 ||
+                    child.rotation.z !== 0
+                ) {
+                    data.rotation = child.rotation.toArray()
+                }
+                if (data) result.child[child.name] = data
+            }
+        })
+
+        return result
+    }
+
+    RestoreHand(hand: 'left_hand' | 'right_hand', data: HandData) {
+        data.child = Object.fromEntries(
+            Object.entries(data.child).map(([k, v]) => {
+                if (hand == 'left_hand') return [k.replace('_R', '_L'), v]
+                if (hand == 'right_hand') return [k.replace('_L', '_R'), v]
+                return [k, v]
+            })
+        )
+        this.part[hand]?.traverse((o) => {
+            if (o.name && o.name in data.child) {
+                const child = data.child[o.name]
+                if (child.position) o.position.fromArray(child.position)
+                if (child.rotation) o.rotation.fromArray(child.rotation as any)
+                if (child.scale) o.scale.fromArray(child.scale)
+            }
+        })
+    }
+
+    GetBodyData(): BodyData {
+        const o = this.part['torso']
+        const result: BodyData = {
+            position: o.position.toArray(),
+            rotation: o.rotation.toArray(),
+            scale: o.scale.toArray(),
+            child: {},
+        }
+        o.traverse((child) => {
+            if (child.name && IsNeedSaveObject(child.name)) {
+                if (child.name in result.child)
+                    console.log('Duplicate name', child.name, child)
+                const data: Pick<BodyData, 'position' | 'rotation' | 'scale'> =
+                    {}
+
+                if (
+                    this.getDistanceOf(
+                        child.position,
+                        new THREE.Vector3(0, 0, 0)
+                    ) != 0
+                ) {
+                    data.position = child.position.toArray()
+                }
+
+                if (
+                    this.getDistanceOf(
+                        child.scale,
+                        new THREE.Vector3(1, 1, 1)
+                    ) != 0
+                ) {
+                    data.scale = child.scale.toArray()
+                }
+
+                if (
+                    child.rotation.x !== 0 ||
+                    child.rotation.y !== 0 ||
+                    child.rotation.z !== 0
+                ) {
+                    data.rotation = child.rotation.toArray()
+                }
+                if (data) result.child[child.name] = data
+            }
+        })
+
+        return result
+    }
+
+    RestoreBody(data: BodyData) {
+        const body = this.part['torso']
+
+        body?.traverse((o) => {
+            if (o.name && o.name in data.child) {
+                const child = data.child[o.name]
+                if (child.position) o.position.fromArray(child.position)
+                if (child.rotation) o.rotation.fromArray(child.rotation as any)
+                if (child.scale) o.scale.fromArray(child.scale)
+            }
+        })
+        if (data.position) body.position.fromArray(data.position)
+        if (data.rotation) body.rotation.fromArray(data.rotation as any)
+        if (data.scale) body.scale.fromArray(data.scale)
+    }
+
+    UpdateBones(thickness = this.BoneThickness) {
+        this.part['torso'].traverse((o) => {
+            if (o.name in this.part) {
+                const name = o.name as ControlPartName
+                this.UpdateLink(name, thickness)
+            }
+        })
+    }
+
+    CreateBones(thickness = this.BoneThickness) {
+        this.part['torso'].traverse((o) => {
+            if (o.name in this.part) {
+                const name = o.name as ControlPartName
+                this.UpdateLink(name, thickness, true)
+            }
+        })
+    }
+
+    Create() {
+        this.CreateBones()
+
+        this.part['torso'].add(
+            CreateIKTarget(
+                this.part['torso'],
+                this.part['left_wrist'],
+                'left_wrist_target'
+            )
+        )
+        this.part['torso'].add(
+            CreateIKTarget(
+                this.part['torso'],
+                this.part['right_wrist'],
+                'right_wrist_target'
+            )
+        )
+        this.part['torso'].add(
+            CreateIKTarget(
+                this.part['torso'],
+                this.part['left_ankle'],
+                'left_ankle_target'
+            )
+        )
+        this.part['torso'].add(
+            CreateIKTarget(
+                this.part['torso'],
+                this.part['right_ankle'],
+                'right_ankle_target'
+            )
+        )
+    }
+
+    Get18keyPointsData(): Array<[number, number, number]> {
+        return OpenposeKeypoints.map((name) => {
+            if (name in this.part) {
+                return this.getWorldPosition(
+                    this.part[name as ControlPartName]
+                ).toArray()
+            } else {
+                return [0, 0, 0]
+            }
+        })
+    }
+
+    get BoneThickness() {
+        return Math.abs(
+            this.part['neck'].getObjectByName('neck_joint_sphere')?.scale.x ??
+                BoneThickness
+        )
+    }
+
+    set BoneThickness(thickness: number) {
+        this.UpdateBones(thickness)
+    }
+
+    GetIKSolver() {
+        return new CCDIKSolver([
+            {
+                target: this.part['left_wrist_target'],
+                effector: this.part['left_wrist'],
+                links: [
+                    {
+                        index: this.part['left_elbow'],
+                        enabled: true,
+                    },
+                    {
+                        index: this.part['left_shoulder'],
+                        enabled: true,
+                    },
+                ],
+                iteration: 10,
+                minAngle: 0.0,
+                maxAngle: 1.0,
+            },
+            {
+                target: this.part['right_wrist_target'],
+                effector: this.part['right_wrist'],
+                links: [
+                    {
+                        index: this.part['right_elbow'],
+                        enabled: true,
+                    },
+                    {
+                        index: this.part['right_shoulder'],
+                        enabled: true,
+                    },
+                ],
+                iteration: 10,
+                minAngle: 0.0,
+                maxAngle: 1.0,
+            },
+            {
+                target: this.part['left_ankle_target'],
+                effector: this.part['left_ankle'],
+                links: [
+                    {
+                        index: this.part['left_knee'],
+                        enabled: true,
+                    },
+                    {
+                        index: this.part['left_hip'],
+                        enabled: true,
+                    },
+                ],
+                iteration: 10,
+                minAngle: 0.0,
+                maxAngle: 1.0,
+            },
+            {
+                target: this.part['right_ankle_target'],
+                effector: this.part['right_ankle'],
+                links: [
+                    {
+                        index: this.part['right_knee'],
+                        enabled: true,
+                    },
+                    {
+                        index: this.part['right_hip'],
+                        enabled: true,
+                    },
+                ],
+                iteration: 10,
+                minAngle: 0.0,
+                maxAngle: 1.0,
+            },
+        ])
+    }
+
+    ResetTargetPosition(
+        effectorName: ControlPartName,
+        targetName: ControlPartName
+    ) {
+        const body = this.part['torso']
+        const effector = this.part[effectorName]
+        const target = this.part[targetName]
+
+        const effector_pos = GetWorldPosition(effector)
+        target.position.copy(this.getLocalPosition(body, effector_pos))
+    }
+
+    ResetAllTargetsPosition() {
+        this.ResetTargetPosition('left_wrist', 'left_wrist_target')
+        this.ResetTargetPosition('right_wrist', 'right_wrist_target')
+        this.ResetTargetPosition('left_ankle', 'left_ankle_target')
+        this.ResetTargetPosition('right_ankle', 'right_ankle_target')
+    }
+
+    Update() {
+        this.ResetAllTargetsPosition()
+        this.UpdateBones()
+        this.part['torso'].updateMatrixWorld(true)
+    }
+}

sd-webui-3d-open-pose-editor/src/components/ContextMenu/index.tsx

@@ -0,0 +1,145 @@
+import React, { useMemo } from 'react'
+import classes from './styles.module.css'
+import NiceModal, { useModal } from '@ebay/nice-modal-react'
+import { debounce } from 'lodash-es'
+import { BodyEditor } from '../../editor'
+import i18n, { IsChina } from '../../i18n'
+import { Helper } from '../../environments/online/helper'
+import { SetCDNBase } from '../../utils/detect'
+
+const { Root, ContextMenuContent, ContextMenuItem, RightSlot } = classes
+
+const MyContextMenu = NiceModal.create<{
+    editor: BodyEditor
+    mouseX: number
+    mouseY: number
+    onChangeBackground: (url: string) => void
+}>(({ editor, mouseX, mouseY, onChangeBackground }) => {
+    const helper = useMemo(() => new Helper(editor), [editor])
+
+    const modal = useModal()
+    return (
+        <div
+            className={Root}
+            style={{
+                display: modal.visible ? undefined : 'none',
+            }}
+            onClick={() => {
+                modal.hide()
+            }}
+            onContextMenu={(e) => {
+                e.preventDefault()
+            }}
+        >
+            <div
+                className={ContextMenuContent}
+                style={{
+                    top: mouseY,
+                    left: mouseX,
+                }}
+            >
+                <div
+                    className={ContextMenuItem}
+                    onClick={() => {
+                        editor.Undo()
+                    }}
+                >
+                    {i18n.t('Undo')}
+                    <div className={RightSlot}>⌘ Z</div>
+                </div>
+                <div
+                    className={ContextMenuItem}
+                    onClick={() => {
+                        editor.Redo()
+                    }}
+                >
+                    {i18n.t('Redo')}
+                    <div className={RightSlot}>⇧ ⌘ Z</div>
+                </div>
+                <div
+                    className={ContextMenuItem}
+                    onClick={() => {
+                        helper.CopySkeleton()
+                    }}
+                >
+                    {i18n.t('Duplicate Skeleton')}
+                    <div className={RightSlot}>⇧ D</div>
+                </div>
+                <div
+                    className={ContextMenuItem}
+                    onClick={() => {
+                        helper.RemoveSkeleton()
+                    }}
+                >
+                    {i18n.t('Delete Skeleton')}
+                    <div className={RightSlot}>{i18n.t('Del')}</div>
+                </div>
+                <div
+                    className={ContextMenuItem}
+                    onClick={() => {
+                        helper.CopyKeypointToClipboard()
+                    }}
+                >
+                    {i18n.t('Copy Keypoint Data')}
+                </div>
+                <div
+                    className={ContextMenuItem}
+                    onClick={() => {
+                        helper.SetRandomPose()
+                    }}
+                >
+                    {i18n.t('Set Random Pose')}
+                </div>
+                <div
+                    className={ContextMenuItem}
+                    onClick={() => helper.DetectFromImage(onChangeBackground)}
+                >
+                    {i18n.t('Detect From Image')}
+                </div>
+                {IsChina() ? (
+                    <div
+                        className={ContextMenuItem}
+                        onClick={() => {
+                            SetCDNBase(false)
+                            helper.DetectFromImage(onChangeBackground)
+                        }}
+                    >
+                        {i18n.t('Detect From Image') + ' [中国]'}
+                    </div>
+                ) : undefined}
+            </div>
+        </div>
+    )
+})
+
+declare type NiceModalArgs<T> = T extends
+    | keyof JSX.IntrinsicElements
+    | React.JSXElementConstructor<any>
+    ? Omit<React.ComponentProps<T>, 'id'>
+    : Record<string, unknown>
+
+export type ShowProps = NiceModalArgs<typeof MyContextMenu>
+
+export function GetContextMenu(wait = 0) {
+    const show = debounce((props: ShowProps) => {
+        NiceModal.show(MyContextMenu, props)
+    }, wait)
+
+    return {
+        show: (props: ShowProps) => {
+            show(props)
+        },
+        hide: () => {
+            show.cancel()
+            HideContextMenu()
+        },
+    }
+}
+
+export async function ShowContextMenu(props: ShowProps): Promise<string> {
+    return await NiceModal.show(MyContextMenu, props)
+}
+
+export function HideContextMenu() {
+    return NiceModal.hide(MyContextMenu)
+}

sd-webui-3d-open-pose-editor/src/components/ContextMenu/styles.module.css

@@ -0,0 +1,132 @@
+@import '@radix-ui/colors/blackA.css';
+@import '@radix-ui/colors/mauve.css';
+@import '@radix-ui/colors/violet.css';
+
+.Root {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+}
+
+.ContextMenuContent {
+    animation-name: slideDownAndFade;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+}
+
+.ContextMenuContent {
+    min-width: 220px;
+    background-color: white;
+    border-radius: 6px;
+    padding: 5px;
+    box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
+        0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+    animation-duration: 400ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: transform, opacity;
+}
+
+.ContextMenuItem {
+    font-size: 13px;
+    line-height: 1;
+    color: var(--violet11);
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    height: 25px;
+    padding: 0 5px;
+    position: relative;
+    padding-left: 25px;
+    user-select: none;
+    outline: none;
+}
+
+.ContextMenuItem:hover {
+    background-color: var(--violet9);
+    color: var(--violet1);
+}
+
+.ContextMenuSeparator {
+    height: 1px;
+    background-color: var(--violet6);
+    margin: 5px;
+}
+
+.IconButton {
+    all: unset;
+    font-family: inherit;
+    border-radius: 100%;
+    height: 35px;
+    width: 35px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--violet11);
+    background-color: white;
+    box-shadow: 0 2px 10px var(--blackA7);
+    width: 100%;
+    height: 100%;
+}
+.IconButton:hover {
+    background-color: var(--violet3);
+}
+.IconButton:focus {
+    box-shadow: 0 0 0 2px black;
+}
+
+.RightSlot {
+    margin-left: auto;
+    padding-left: 20px;
+    color: var(--mauve11);
+}
+
+.ContextMenuItem:hover > .RightSlot {
+    color: white;
+}
+
+@keyframes slideUpAndFade {
+    from {
+        opacity: 0;
+        transform: translateY(2px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideRightAndFade {
+    from {
+        opacity: 0;
+        transform: translateX(-2px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes slideDownAndFade {
+    from {
+        opacity: 0;
+        transform: translateY(-2px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideLeftAndFade {
+    from {
+        opacity: 0;
+        transform: translateX(2px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}

sd-webui-3d-open-pose-editor/src/components/Dialog/index.tsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
+import { Cross2Icon } from '@radix-ui/react-icons'
+import classes from './styles.module.css'
+import NiceModal, { useModal } from '@ebay/nice-modal-react'
+import { debounce } from 'lodash-es'
+import classNames from 'classnames'
+
+const {
+    DialogOverlay,
+    DialogContent,
+    DialogTitle,
+    DialogDescription,
+    Button,
+    IconButton,
+    green,
+} = classes
+
+const MyDialog = NiceModal.create<{
+    title?: string
+    description?: string
+    children?: React.ReactNode
+    button?: string
+}>(({ title, description, children, button }) => {
+    const modal = useModal()
+    return (
+        <Dialog.Root
+            defaultOpen={true}
+            open={modal.visible}
+            onOpenChange={(value) => {
+                if (value) modal.show()
+                else modal.hide()
+            }}
+        >
+            <Dialog.Portal>
+                <Dialog.Overlay className={DialogOverlay} />
+                <Dialog.Content className={DialogContent}>
+                    <Dialog.Title className={DialogTitle}>{title}</Dialog.Title>
+                    <Dialog.Description className={DialogDescription}>
+                        {description}
+                    </Dialog.Description>
+                    <div> {children}</div>
+                    <div
+                        style={{
+                            display: 'flex',
+                            marginTop: 25,
+                            justifyContent: 'flex-end',
+                        }}
+                    >
+                        <Dialog.Close asChild>
+                            <button
+                                className={classNames(Button, green)}
+                                onClick={() => {
+                                    modal.resolve('action')
+                                }}
+                            >
+                                {button}
+                            </button>
+                        </Dialog.Close>
+                    </div>
+                    <Dialog.Close asChild>
+                        <button className={IconButton}>
+                            <Cross2Icon />
+                        </button>
+                    </Dialog.Close>
+                </Dialog.Content>
+            </Dialog.Portal>
+        </Dialog.Root>
+    )
+})
+
+declare type NiceModalArgs<T> = T extends
+    | keyof JSX.IntrinsicElements
+    | React.JSXElementConstructor<any>
+    ? Omit<React.ComponentProps<T>, 'id'>
+    : Record<string, unknown>
+
+export type ShowProps = NiceModalArgs<typeof MyDialog>
+
+export function GetDialog(wait = 0) {
+    const show = debounce((props: ShowProps) => {
+        NiceModal.show(MyDialog, props)
+    }, wait)
+
+    return {
+        show: (props: ShowProps) => {
+            show(props)
+        },
+        hide: () => {
+            show.cancel()
+            HideDialog()
+        },
+    }
+}
+
+export async function ShowDialog(props: ShowProps): Promise<string> {
+    console.log(props)
+    return await NiceModal.show(MyDialog, props)
+}
+
+export function HideDialog() {
+    return NiceModal.hide(MyDialog)
+}

sd-webui-3d-open-pose-editor/src/components/Dialog/styles.module.css

@@ -0,0 +1,124 @@
+@import '@radix-ui/colors/blackA.css';
+@import '@radix-ui/colors/green.css';
+@import '@radix-ui/colors/mauve.css';
+@import '@radix-ui/colors/violet.css';
+
+.DialogOverlay {
+    background-color: var(--blackA9);
+    position: fixed;
+    inset: 0;
+    animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+    font-family: var(--openpose-editor-font-family);
+}
+
+.DialogContent {
+    font-family: var(--openpose-editor-font-family);
+    background-color: white;
+    border-radius: 6px;
+    box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+        hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90vw;
+    max-width: 450px;
+    max-height: 85vh;
+    padding: 25px;
+    animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.DialogContent:focus {
+    outline: none;
+}
+
+.DialogTitle {
+    margin: 0;
+    font-weight: 500;
+    color: var(--mauve12);
+    font-size: 32px;
+}
+
+.DialogDescription {
+    margin: 10px 0 20px;
+    color: var(--mauve11);
+    font-size: 15px;
+    line-height: 1.5;
+    overflow-y: auto;
+    word-break: break-all;
+    max-height: 60vh;
+}
+
+.Button {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    padding: 0 15px;
+    font-size: 15px;
+    line-height: 1;
+    font-weight: 500;
+    height: 35px;
+}
+.Button.violet {
+    background-color: white;
+    color: var(--violet11);
+    box-shadow: 0 2px 10px var(--blackA7);
+}
+.Button.violet:hover {
+    background-color: var(--mauve3);
+}
+.Button.violet:focus {
+    box-shadow: 0 0 0 2px black;
+}
+.Button.green {
+    background-color: var(--green4);
+    color: var(--green11);
+}
+.Button.green:hover {
+    background-color: var(--green5);
+}
+.Button.green:focus {
+    box-shadow: 0 0 0 2px var(--green7);
+}
+
+.IconButton {
+    all: unset;
+    font-family: inherit;
+    border-radius: 100%;
+    height: 25px;
+    width: 25px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--violet11);
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+.IconButton:hover {
+    background-color: var(--violet4);
+}
+.IconButton:focus {
+    box-shadow: 0 0 0 2px var(--violet7);
+}
+
+@keyframes overlayShow {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes contentShow {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}

sd-webui-3d-open-pose-editor/src/components/Loading/index.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import * as AlertDialog from '@radix-ui/react-alert-dialog'
+import NiceModal, { useModal } from '@ebay/nice-modal-react'
+import { debounce } from 'lodash-es'
+
+import classes from './styles.module.css'
+
+const {
+    AlertDialogOverlay,
+    AlertDialogContent,
+    AlertDialogTitle,
+    'lds-roller': LdsRoller,
+} = classes
+
+function CSSLoading() {
+    return (
+        <div className={LdsRoller}>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+    )
+}
+
+const Loading = NiceModal.create<{ title: string }>(
+    ({ title }: { title: string }) => {
+        const modal = useLoading()
+        return (
+            <AlertDialog.Root defaultOpen={true} open={modal.visible}>
+                <AlertDialog.Portal>
+                    <AlertDialog.Overlay className={AlertDialogOverlay} />
+                    <AlertDialog.Content className={AlertDialogContent}>
+                        <AlertDialog.Title className={AlertDialogTitle}>
+                            <CSSLoading></CSSLoading>
+                            {title}
+                        </AlertDialog.Title>
+                    </AlertDialog.Content>
+                </AlertDialog.Portal>
+            </AlertDialog.Root>
+        )
+    }
+)
+
+export function useLoading() {
+    return useModal(Loading)
+}
+
+declare type NiceModalArgs<T> = T extends
+    | keyof JSX.IntrinsicElements
+    | React.JSXElementConstructor<any>
+    ? Omit<React.ComponentProps<T>, 'id'>
+    : Record<string, unknown>
+
+export type ShowProps = NiceModalArgs<typeof Loading>
+
+export function GetLoading(wait = 0) {
+    const show = debounce((props: ShowProps) => {
+        NiceModal.show(Loading, props)
+    }, wait)
+
+    return {
+        show: (props: ShowProps) => {
+            show(props)
+        },
+        hide: () => {
+            show.cancel()
+            HideLoading()
+        },
+    }
+}
+
+export function ShowLoading(props: ShowProps) {
+    NiceModal.show(Loading, props)
+}
+
+export function HideLoading() {
+    NiceModal.hide(Loading)
+}

sd-webui-3d-open-pose-editor/src/components/Loading/styles.module.css

@@ -0,0 +1,147 @@
+@import '@radix-ui/colors/blackA.css';
+@import '@radix-ui/colors/mauve.css';
+@import '@radix-ui/colors/red.css';
+@import '@radix-ui/colors/violet.css';
+
+.AlertDialogOverlay {
+    font-family: var(--openpose-editor-font-family);
+    background-color: var(--blackA9);
+    position: fixed;
+    inset: 0;
+    animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.AlertDialogContent {
+    font-family: var(--openpose-editor-font-family);
+    background-color: white;
+    border-radius: 6px;
+    box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+        hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90vw;
+    max-width: 500px;
+    max-height: 85vh;
+    padding: 25px;
+    animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.AlertDialogContent:focus {
+    outline: none;
+}
+
+.AlertDialogTitle {
+    margin: 0;
+    color: var(--mauve12);
+    font-size: 27px;
+    font-weight: 500;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+@keyframes overlayShow {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes contentShow {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+.lds-roller {
+    display: inline-block;
+    position: relative;
+    min-width: 100px;
+    min-height: 80px;
+}
+.lds-roller div {
+    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    transform-origin: 40px 40px;
+}
+.lds-roller div:after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: gray;
+    margin: -4px 0 0 -4px;
+}
+.lds-roller div:nth-child(1) {
+    animation-delay: -0.036s;
+}
+.lds-roller div:nth-child(1):after {
+    top: 63px;
+    left: 63px;
+}
+.lds-roller div:nth-child(2) {
+    animation-delay: -0.072s;
+}
+.lds-roller div:nth-child(2):after {
+    top: 68px;
+    left: 56px;
+}
+.lds-roller div:nth-child(3) {
+    animation-delay: -0.108s;
+}
+.lds-roller div:nth-child(3):after {
+    top: 71px;
+    left: 48px;
+}
+.lds-roller div:nth-child(4) {
+    animation-delay: -0.144s;
+}
+.lds-roller div:nth-child(4):after {
+    top: 72px;
+    left: 40px;
+}
+.lds-roller div:nth-child(5) {
+    animation-delay: -0.18s;
+}
+.lds-roller div:nth-child(5):after {
+    top: 71px;
+    left: 32px;
+}
+.lds-roller div:nth-child(6) {
+    animation-delay: -0.216s;
+}
+.lds-roller div:nth-child(6):after {
+    top: 68px;
+    left: 24px;
+}
+.lds-roller div:nth-child(7) {
+    animation-delay: -0.252s;
+}
+.lds-roller div:nth-child(7):after {
+    top: 63px;
+    left: 17px;
+}
+.lds-roller div:nth-child(8) {
+    animation-delay: -0.288s;
+}
+.lds-roller div:nth-child(8):after {
+    top: 56px;
+    left: 12px;
+}
+@keyframes lds-roller {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

sd-webui-3d-open-pose-editor/src/components/Menu/index.tsx

@@ -0,0 +1,416 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import * as Menubar from '@radix-ui/react-menubar'
+import { CheckIcon, DotFilledIcon } from '@radix-ui/react-icons'
+
+import classes from './styles.module.css'
+import { BodyEditor } from '../../editor'
+import i18n, { IsChina } from '../../i18n'
+import { Helper } from '../../environments/online/helper'
+import { uploadImage } from '../../utils/transfer'
+import { getCurrentTime } from '../../utils/time'
+import useForceUpdate from '../../hooks/useFoceUpdate'
+import classNames from 'classnames'
+import { useLanguageSelect } from '../../hooks'
+import { ShowContextMenu } from '../ContextMenu'
+import { ShowDialog } from '../Dialog'
+import { SetCDNBase } from '../../utils/detect'
+
+const {
+    MenubarRoot,
+    MenubarTrigger,
+    MenubarContent,
+    MenubarItem,
+    MenubarCheckboxItem,
+    MenubarRadioItem,
+    MenubarItemIndicator,
+    MenubarSeparator,
+    RightSlot,
+    Blue,
+    inset,
+} = classes
+const MenubarDemo: React.FC<{
+    editor: BodyEditor
+    onChangeBackground: (url: string) => void
+    onScreenShot: (data: Record<string, { src: string; title: string }>) => void
+    style?: React.CSSProperties
+}> = ({ editor, onChangeBackground, onScreenShot, style }) => {
+    const forceUpdate = useForceUpdate()
+    const helper = useMemo(() => new Helper(editor), [editor])
+    const { current, changeLanguage, languagList } = useLanguageSelect()
+
+    useEffect(() => {
+        const show = (data: { mouseX: number; mouseY: number }) => {
+            ShowContextMenu({ ...data, editor, onChangeBackground })
+        }
+        editor?.ContextMenuEventManager.AddEventListener(show)
+        return () => {
+            editor?.ContextMenuEventManager.RemoveEventListener(show)
+        }
+    }, [editor])
+
+    return (
+        <Menubar.Root className={MenubarRoot} style={style}>
+            <Menubar.Menu>
+                <Menubar.Trigger className={MenubarTrigger}>
+                    {i18n.t('File')}
+                </Menubar.Trigger>
+                <Menubar.Portal>
+                    <Menubar.Content
+                        className={MenubarContent}
+                        align="start"
+                        sideOffset={5}
+                        alignOffset={-3}
+                    >
+                        <Menubar.Item
+                            className={MenubarItem}
+                            onSelect={() => editor.ResetScene()}
+                        >
+                            {i18n.t('Reset Scene')}
+                        </Menubar.Item>
+                        <Menubar.Item
+                            className={MenubarItem}
+                            onSelect={() => editor.LoadScene()}
+                        >
+                            {i18n.t('Load Scene')}
+                        </Menubar.Item>
+                        <Menubar.Item
+                            className={MenubarItem}
+                            onSelect={() => editor.SaveScene()}
+                        >
+                            {i18n.t('Save Scene')}
+                        </Menubar.Item>
+                        <Menubar.Item
+                            className={MenubarItem}
+                            onSelect={() => helper.LoadGesture()}
+                        >
+                            {i18n.t('Load Gesture')}
+                        </Menubar.Item>
+                        <Menubar.Item
+                            className={MenubarItem}
+                            onSelect={() => helper.SaveGesture()}
+                        >
+                            {i18n.t('Save Gesture')}
+                        </Menubar.Item>
+                        <Menubar.Item
+                            className={MenubarItem}
+                            onSelect={() => {
+                                helper.GenerateSceneURL()
+                            }}
+                        >
+                            {i18n.t('Generate Scene URL')}
+                        </Menubar.Item>
+                        <Menubar.Separator className={MenubarSeparator} />
+                        <Menubar.Item
+                            className={MenubarItem}
+                            onSelect={() => editor.RestoreLastSavedScene()}
+                        >
+                            {i18n.t('Restore Last Scene')}
+                        </Menubar.Item>
+                        <Menubar.Separator className={MenubarSeparator} />
+                        <Menubar.Item
+                            className={MenubarItem}
+                            onSelect={() =>
+                                helper.DetectFromImage(onChangeBackground)
+                            }
+                        >
+                            {i18n.t('Detect From Image')}
+                        </Menubar.Item>
+                        {IsChina() ? (
+                            <Menubar.Item
+                                className={MenubarItem}
+                                onSelect={() => {
+                                    SetCDNBase(false)
+                                    helper.DetectFromImage(onChangeBackground)
+                                }}
+                            >
+                                {i18n.t('Detect From Image') + ' [中国]'}
+                            </Menubar.Item>
+                        ) : undefined}
+                        <Menubar.Item
+                            className={MenubarItem}
+                            onSelect={() => helper.SetRandomPose()}
+                        >
+                            {i18n.t('Set Random Pose')}
+                        </Menubar.Item>
+                        <Menubar.Item
+                            className={MenubarItem}
+                            onSelect={async () => {
+                                const image = await uploadImage()
+                                if (image) onChangeBackground(image)
+                            }}
+                        >
+                            {i18n.t('Set Background Image')}
+                        </Menubar.Item>
+                        <Menubar.Item className={MenubarItem}>
+                            v{__APP_VERSION__}
+                        </Menubar.Item>
+                    </Menubar.Content>
+                </Menubar.Portal>
+            </Menubar.Menu>
+
+            <Menubar.Menu>
+                <Menubar.Trigger className={MenubarTrigger}>
+                    {i18n.t('Edit')}
+                </Menubar.Trigger>
+                <Menubar.Portal>
+                    <Menubar.Content
+                        className={MenubarContent}
+                        align="start"
+                        sideOffset={5}
+                        alignOffset={-3}
+                    >
+                        <Menubar.Item
+                            className={MenubarItem}
+                            onSelect={() => editor.Undo()}
+                        >
+                            {i18n.t('Undo')}
+                            <div className={RightSlot}>⌘ Z</div>
+                        </Menubar.Item>
+                        <Menubar.Item
+                            className={MenubarItem}
+                            onSelect={() => editor.Redo()}
+                        >
+                            {i18n.t('Redo')}
+                            <div className={RightSlot}>⇧ ⌘ Z</div>
+                        </Menubar.Item>
+                        <Menubar.Separator className={MenubarSeparator} />
+                        <Menubar.Item
+                            className={MenubarItem}
+                            onSelect={() => editor.CopySelectedBody()}
+                        >
+                            {i18n.t('Duplicate Skeleton')}
+                            <div className={RightSlot}>⇧ D</div>
+                        </Menubar.Item>
+                        <Menubar.Item
+                            className={MenubarItem}
+                            onSelect={() => editor.RemoveBody()}
+                        >
+                            {i18n.t('Delete Skeleton')}
+                            <div className={RightSlot}>{i18n.t('Del')}</div>
+                        </Menubar.Item>
+                    </Menubar.Content>
+                </Menubar.Portal>
+            </Menubar.Menu>
+
+            <Menubar.Menu>
+                <Menubar.Trigger className={MenubarTrigger}>
+                    {i18n.t('View')}
+                </Menubar.Trigger>
+                <Menubar.Portal>
+                    <Menubar.Content
+                        className={MenubarContent}
+                        align="start"
+                        sideOffset={5}
+                        alignOffset={-14}
+                    >
+                        <Menubar.Item
+                            className={classNames(MenubarItem, inset)}
+                            onSelect={() => {
+                                editor.LockView()
+                            }}
+                        >
+                            {i18n.t('Lock View')}
+                        </Menubar.Item>
+                        <Menubar.Item
+                            className={classNames(MenubarItem, inset)}
+                            onSelect={() => {
+                                editor.UnlockView()
+                            }}
+                        >
+                            {i18n.t('Unlock View')}
+                        </Menubar.Item>
+                        <Menubar.Item
+                            className={classNames(MenubarItem, inset)}
+                            onSelect={() => {
+                                editor.RestoreView()
+                            }}
+                        >
+                            {i18n.t('Restore View')}
+                        </Menubar.Item>
+                    </Menubar.Content>
+                </Menubar.Portal>
+            </Menubar.Menu>
+
+            <Menubar.Menu>
+                <Menubar.Trigger className={MenubarTrigger}>
+                    {i18n.t('Setting')}
+                </Menubar.Trigger>
+                <Menubar.Portal>
+                    <Menubar.Content
+                        className={MenubarContent}
+                        align="start"
+                        sideOffset={5}
+                        alignOffset={-14}
+                    >
+                        <Menubar.CheckboxItem
+                            className={classNames(MenubarCheckboxItem, inset)}
+                            checked={editor.MoveMode}
+                            onCheckedChange={() => {
+                                editor.MoveMode = !editor.MoveMode
+                                forceUpdate()
+                            }}
+                        >
+                            <Menubar.ItemIndicator
+                                className={MenubarItemIndicator}
+                            >
+                                <CheckIcon />
+                            </Menubar.ItemIndicator>
+                            {i18n.t('Move Mode')}
+                        </Menubar.CheckboxItem>
+                        <Menubar.CheckboxItem
+                            className={classNames(MenubarCheckboxItem, inset)}
+                            checked={editor.FreeMode}
+                            onCheckedChange={() => {
+                                editor.FreeMode = !editor.FreeMode
+                                forceUpdate()
+                            }}
+                        >
+                            <Menubar.ItemIndicator
+                                className={MenubarItemIndicator}
+                            >
+                                <CheckIcon />
+                            </Menubar.ItemIndicator>
+                            {i18n.t('Free Mode')}
+                        </Menubar.CheckboxItem>
+                        <Menubar.CheckboxItem
+                            className={classNames(MenubarCheckboxItem, inset)}
+                            checked={editor.OnlyHand}
+                            onCheckedChange={() => {
+                                editor.OnlyHand = !editor.OnlyHand
+                                forceUpdate()
+                            }}
+                        >
+                            <Menubar.ItemIndicator
+                                className={MenubarItemIndicator}
+                            >
+                                <CheckIcon />
+                            </Menubar.ItemIndicator>
+                            {i18n.t('Only Hand')}
+                        </Menubar.CheckboxItem>
+                        <Menubar.CheckboxItem
+                            className={classNames(MenubarCheckboxItem, inset)}
+                            checked={editor.enablePreview}
+                            onCheckedChange={() => {
+                                editor.enablePreview = !editor.enablePreview
+                                forceUpdate()
+                            }}
+                        >
+                            <Menubar.ItemIndicator
+                                className={MenubarItemIndicator}
+                            >
+                                <CheckIcon />
+                            </Menubar.ItemIndicator>
+                            {i18n.t('Show Preview')}
+                        </Menubar.CheckboxItem>
+                        <Menubar.CheckboxItem
+                            className={classNames(MenubarCheckboxItem, inset)}
+                            checked={editor.EnableHelper}
+                            onCheckedChange={() => {
+                                editor.EnableHelper = !editor.EnableHelper
+                                forceUpdate()
+                            }}
+                        >
+                            <Menubar.ItemIndicator
+                                className={MenubarItemIndicator}
+                            >
+                                <CheckIcon />
+                            </Menubar.ItemIndicator>
+                            {i18n.t('Show Grid')}
+                        </Menubar.CheckboxItem>
+                    </Menubar.Content>
+                </Menubar.Portal>
+            </Menubar.Menu>
+
+            <Menubar.Menu>
+                <Menubar.Trigger className={MenubarTrigger}>
+                    {i18n.t('Feedback')}
+                </Menubar.Trigger>
+                <Menubar.Portal>
+                    <Menubar.Content
+                        className={MenubarContent}
+                        align="start"
+                        sideOffset={5}
+                        alignOffset={-14}
+                    >
+                        <Menubar.Item
+                            className={classNames(MenubarItem, inset)}
+                            onSelect={() => {
+                                helper.FeedbackByGithub()
+                            }}
+                        >
+                            Github
+                        </Menubar.Item>
+                        <Menubar.Item
+                            className={classNames(MenubarItem, inset)}
+                            onSelect={() => {
+                                helper.FeedbackByQQ()
+                            }}
+                        >
+                            QQ
+                        </Menubar.Item>
+                    </Menubar.Content>
+                </Menubar.Portal>
+            </Menubar.Menu>
+            <Menubar.Menu>
+                <Menubar.Trigger className={MenubarTrigger}>
+                    Language
+                </Menubar.Trigger>
+                <Menubar.Portal>
+                    <Menubar.Content
+                        className={MenubarContent}
+                        align="start"
+                        sideOffset={5}
+                        alignOffset={-14}
+                    >
+                        <Menubar.RadioGroup
+                            value={current}
+                            onValueChange={(v) => {
+                                changeLanguage(v)
+                            }}
+                        >
+                            {languagList.map((item) => (
+                                <Menubar.RadioItem
+                                    className={classNames(
+                                        MenubarRadioItem,
+                                        inset
+                                    )}
+                                    key={item}
+                                    value={item}
+                                >
+                                    <Menubar.ItemIndicator
+                                        className={MenubarItemIndicator}
+                                    >
+                                        <DotFilledIcon />
+                                    </Menubar.ItemIndicator>
+                                    {item}
+                                </Menubar.RadioItem>
+                            ))}
+                        </Menubar.RadioGroup>
+                    </Menubar.Content>
+                </Menubar.Portal>
+            </Menubar.Menu>
+            <Menubar.Menu>
+                <Menubar.Trigger
+                    className={classNames(MenubarTrigger, Blue)}
+                    onClick={async () => {
+                        const image = editor.MakeImages()
+                        const result = Object.fromEntries(
+                            Object.entries(image).map(([name, imgData]) => [
+                                name,
+                                {
+                                    src: imgData,
+                                    title: name + '_' + getCurrentTime(),
+                                },
+                            ])
+                        )
+                        onScreenShot(result)
+                    }}
+                >
+                    {i18n.t('Generate')}
+                </Menubar.Trigger>
+            </Menubar.Menu>
+        </Menubar.Root>
+    )
+}
+
+export default MenubarDemo

sd-webui-3d-open-pose-editor/src/components/Menu/styles.module.css

@@ -0,0 +1,131 @@
+@import '@radix-ui/colors/blackA.css';
+@import '@radix-ui/colors/mauve.css';
+@import '@radix-ui/colors/violet.css';
+
+.MenubarRoot {
+    display: flex;
+    background-color: white;
+    padding: 3px;
+    border-radius: 6px;
+    box-shadow: 0 2px 10px var(--blackA7);
+    font-family: var(--openpose-editor-font-family);
+}
+
+.MenubarTrigger {
+    all: unset;
+    padding: 8px 12px;
+    outline: none;
+    user-select: none;
+    font-weight: 500;
+    line-height: 1;
+    border-radius: 4px;
+    color: var(--violet11);
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2px;
+}
+
+.MenubarTrigger[data-highlighted],
+.MenubarTrigger[data-state='open'] {
+    background-color: var(--violet4);
+}
+
+.MenubarTrigger.Blue {
+    background-color: var(--violet9);
+    color: white;
+}
+
+.MenubarContent,
+.MenubarSubContent {
+    min-width: 220px;
+    background-color: white;
+    border-radius: 6px;
+    padding: 5px;
+    box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
+        0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+    animation-duration: 400ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: transform, opacity;
+}
+
+.MenubarItem,
+.MenubarSubTrigger,
+.MenubarCheckboxItem,
+.MenubarRadioItem {
+    all: unset;
+    font-size: 13px;
+    line-height: 1;
+    color: var(--violet11);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    height: 25px;
+    padding: 0 10px;
+    position: relative;
+    user-select: none;
+    font-family: var(--openpose-editor-font-family);
+}
+
+.MenubarItem.inset,
+.MenubarSubTrigger.inset,
+.MenubarCheckboxItem.inset,
+.MenubarRadioItem.inset {
+    padding-left: 20px;
+}
+
+.MenubarItem[data-state='open'],
+.MenubarSubTrigger[data-state='open'] {
+    background-color: var(--violet4);
+    color: var(--violet11);
+}
+
+.MenubarItem[data-highlighted],
+.MenubarSubTrigger[data-highlighted],
+.MenubarCheckboxItem[data-highlighted],
+.MenubarRadioItem[data-highlighted] {
+    background-image: linear-gradient(
+        135deg,
+        var(--violet9) 0%,
+        var(--violet10) 100%
+    );
+    color: var(--violet1);
+}
+
+.MenubarItem[data-disabled],
+.MenubarSubTrigger[data-disabled],
+.MenubarCheckboxItem[data-disabled],
+.MenubarRadioItem[data-disabled] {
+    color: var(--mauve8);
+    pointer-events: none;
+}
+
+.MenubarItemIndicator {
+    position: absolute;
+    left: 0;
+    width: 20px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.MenubarSeparator {
+    height: 1px;
+    background-color: var(--violet6);
+    margin: 5px;
+}
+
+.RightSlot {
+    margin-left: auto;
+    padding-left: 20px;
+    color: var(--mauve9);
+}
+
+[data-highlighted] > .RightSlot {
+    color: white;
+}
+
+[data-disabled] > .RightSlot {
+    color: var(--mauve8);
+}

sd-webui-3d-open-pose-editor/src/components/Oops.tsx

@@ -0,0 +1,19 @@
+import i18n from '../i18n'
+import { ShowDialog } from './Dialog'
+
+export function Oops(error: any) {
+    const stack = error?.stack
+    const text = `${i18n.t('Something went wrong!')}\n${stack || error}`
+    ShowDialog({
+        title: i18n.t('Oops...') ?? '',
+        description: text,
+        children: (
+            <a href="https://github.com/nonnonstop/sd-webui-3d-open-pose-editor/issues/new/choose">
+                {i18n.t(
+                    'If the problem persists, please click here to ask a question.'
+                )}
+            </a>
+        ),
+        button: i18n.t('Close') ?? '',
+    })
+}

sd-webui-3d-open-pose-editor/src/components/PopupOver/index.tsx

@@ -0,0 +1,348 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import * as Popover from '@radix-ui/react-popover'
+import { PinLeftIcon } from '@radix-ui/react-icons'
+import classes from './styles.module.css'
+import Slider from '../Slider'
+import { BodyEditor } from '../../editor'
+import useForceUpdate from '../../hooks/useFoceUpdate'
+import i18n from '../../i18n'
+import { BodyControlor } from '../../body'
+
+const { PopoverContent, IconButton, PopoverArrow, Input } = classes
+
+const Slider2: React.FC<{
+    type: 'int' | 'float' | undefined
+    name: string
+    range: [number, number]
+    getValue(): number
+    onChange?: (value: number) => void
+    onValueCommit?: (value: number) => void
+    forceUpdate: () => any
+}> = ({
+    type,
+    name,
+    range,
+    getValue,
+    onChange,
+    onValueCommit,
+    forceUpdate,
+}) => {
+    const value = getValue()
+    const [inputValue, setInputValue] = useState(() =>
+        type == 'int' ? value.toString() : getValue().toFixed(2)
+    )
+
+    useEffect(() => {
+        setInputValue(type == 'int' ? value.toString() : getValue().toFixed(2))
+    }, [value])
+
+    return (
+        <div
+            style={{
+                display: 'flex',
+                justifyContent: 'flex-end',
+            }}
+        >
+            <div
+                style={{
+                    minWidth: 60,
+                    maxWidth: 120,
+                    // width:"max-content",
+                    overflow: 'hidden',
+                    color: 'gray',
+                    fontSize: '70%',
+                    marginInlineEnd: 10,
+                    // whiteSpace: 'nowrap',
+                    textAlign: 'end',
+                    textOverflow: 'ellipsis',
+                }}
+            >
+                {name}
+            </div>
+            <Slider
+                key={name}
+                range={range}
+                value={getValue()}
+                onValueChange={(value: number) => {
+                    if (type == 'int') {
+                        onChange?.(Math.round(value))
+                    } else onChange?.(value)
+                    forceUpdate()
+                }}
+                onValueCommit={onValueCommit}
+                style={{
+                    width: 150,
+                }}
+            ></Slider>
+            <input
+                className={Input}
+                style={{
+                    marginInlineStart: 10,
+                    width: 60,
+                    height: 20,
+                    color: 'gray',
+                    fontSize: '70%',
+                }}
+                value={inputValue}
+                onChange={(event) => {
+                    const value = event.target.value
+
+                    setInputValue(value)
+                }}
+                onBlur={() => {
+                    try {
+                        let v = parseFloat(inputValue)
+                        if (isNaN(v)) throw 'Is NaN'
+                        v = Math.max(Math.min(v, range[1]), range[0])
+                        console.log(v)
+                        onChange?.(v)
+                    } catch (error) {
+                        console.log('invalid input')
+                        setInputValue(value.toString())
+                    }
+                }}
+            ></input>
+        </div>
+    )
+}
+
+function GetCameraParamControlor(editor: BodyEditor) {
+    const CameraParamsInit = {
+        OutputWidth: { type: 'int', range: [128, 3000], name: i18n.t('Width') },
+        OutputHeight: {
+            type: 'int',
+            range: [128, 3000],
+            name: i18n.t('Height'),
+        },
+        CameraNear: { range: [0.1, 2000], name: i18n.t('Camera Near') },
+        CameraFar: { range: [0.1, 20000], name: i18n.t('Camera Far') },
+        CameraFocalLength: {
+            range: [0.1, 100],
+            name: i18n.t('Camera Focal Length'),
+        },
+    } as const
+
+    return Object.entries(
+        CameraParamsInit as Record<
+            keyof typeof CameraParamsInit,
+            {
+                type: 'int' | 'float' | undefined
+                range: [number, number]
+                name: string
+            }
+        >
+    ).map(([paramName, { type, range, name }]) => {
+        return {
+            type,
+            name,
+            range,
+            getValue() {
+                const value = editor[paramName as keyof typeof CameraParamsInit]
+                // webui exception in launch
+                return isNaN(value) ? range[0] : value
+            },
+            onChange(value: number) {
+                editor[paramName as keyof typeof CameraParamsInit] = value
+            },
+        }
+    })
+}
+
+function GetBodyParamControlor(editor: BodyEditor) {
+    const BodyParamsInit = {
+        BoneThickness: { range: [0.1, 3], name: i18n.t('Bone Thickness') },
+        HeadSize: { range: [0.1, 100], name: i18n.t('Head Size') },
+        NoseToNeck: { range: [0.1, 100], name: i18n.t('Nose To Neck') },
+        ShoulderWidth: { range: [0.1, 100], name: i18n.t('Shoulder Width') },
+        ShoulderToHip: { range: [0.1, 100], name: i18n.t('Shoulder To Hip') },
+        ArmLength: { range: [0.1, 100], name: i18n.t('Arm Length') },
+        Forearm: { range: [0.1, 100], name: i18n.t('Forearm') },
+        UpperArm: { range: [0.1, 100], name: i18n.t('Upper Arm') },
+        HandSize: { range: [0.1, 10], name: i18n.t('Hand Size') },
+        Hips: { range: [0.1, 100], name: i18n.t('Hips') },
+        LegLength: { range: [0.1, 100], name: i18n.t('Leg Length') },
+        Thigh: { range: [0.1, 100], name: i18n.t('Thigh') },
+        LowerLeg: { range: [0.1, 100], name: i18n.t('Lower Leg') },
+        FootSize: { range: [0.1, 10], name: i18n.t('Foot Size') },
+    } as const
+
+    function PushExecuteBodyParamsCommand(
+        editor: BodyEditor,
+        controlor: BodyControlor,
+        name: keyof typeof BodyParamsInit,
+        oldValue: number,
+        value: number
+    ) {
+        console.log(oldValue, value)
+        const cmd = {
+            execute: () => {
+                controlor[name] = value
+                controlor.Update()
+            },
+            undo: () => {
+                controlor[name] = oldValue
+                controlor.Update()
+            },
+        }
+        cmd.execute()
+        editor.pushCommand(cmd)
+    }
+
+    let currentBody = editor.getSelectedBody()
+    let currentControlor: BodyControlor | null = currentBody
+        ? new BodyControlor(currentBody)
+        : null
+
+    const getCurrentControlor = () => {
+        const body = editor.getSelectedBody()
+
+        if (body !== currentBody) {
+            currentBody = body
+            currentControlor = body ? new BodyControlor(body) : null
+        }
+
+        return currentControlor
+    }
+
+    let oldValue = 0
+    let changing = false
+
+    return Object.entries(
+        BodyParamsInit as Record<
+            keyof typeof BodyParamsInit,
+            {
+                type: 'int' | 'float' | undefined
+                range: [number, number]
+                name: string
+            }
+        >
+    ).map(([_paramName, { type, range, name }]) => {
+        return {
+            type,
+            name,
+            range,
+            getValue: () => {
+                const paramName = _paramName as keyof typeof BodyParamsInit
+                const controlor = getCurrentControlor()
+                if (controlor) {
+                    return controlor[paramName]
+                }
+                return -1
+            },
+            onChange(value: number) {
+                const paramName = _paramName as keyof typeof BodyParamsInit
+                const controlor = getCurrentControlor()
+
+                if (controlor) {
+                    // the first time
+                    if (changing == false) oldValue = controlor[paramName]
+                    changing = true
+                    controlor[paramName] = value
+                }
+            },
+            onValueCommit(value: number) {
+                const paramName = _paramName as keyof typeof BodyParamsInit
+                const controlor = getCurrentControlor()
+
+                if (controlor) {
+                    changing = false
+                    PushExecuteBodyParamsCommand(
+                        editor,
+                        controlor,
+                        paramName,
+                        oldValue,
+                        value
+                    )
+                    controlor[paramName] = value
+                }
+            },
+        }
+    })
+}
+
+const ControlorPopover: React.FC<{
+    editor: BodyEditor
+    style?: React.CSSProperties
+}> = ({ editor, style }) => {
+    const forceUpdate = useForceUpdate()
+    const [open, setOpen] = useState(true)
+
+    const cameraParamControlor = useMemo(() => {
+        return GetCameraParamControlor(editor)
+    }, [editor])
+    const bodyParamControlor = useMemo(() => {
+        return GetBodyParamControlor(editor)
+    }, [editor])
+
+    const [bodySelected, setBodySelected] = useState(false)
+    useEffect(() => {
+        const select = () => {
+            setBodySelected(true)
+        }
+        const unselect = () => {
+            setBodySelected(false)
+        }
+        editor.SelectEventManager.AddEventListener(select)
+        editor.UnselectEventManager.AddEventListener(unselect)
+
+        return () => {
+            editor.SelectEventManager.RemoveEventListener(select)
+            editor.UnselectEventManager.RemoveEventListener(unselect)
+        }
+    }, [editor])
+    return (
+        <Popover.Root open={open}>
+            <Popover.Trigger asChild>
+                <button
+                    className={IconButton}
+                    style={style}
+                    onClick={() => setOpen((v) => !v)}
+                >
+                    <PinLeftIcon />
+                </button>
+            </Popover.Trigger>
+            <Popover.Portal>
+                <Popover.Content className={PopoverContent} sideOffset={5}>
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 10,
+                        }}
+                    >
+                        {cameraParamControlor.map((props, index) => (
+                            <Slider2
+                                key={index}
+                                {...props}
+                                forceUpdate={forceUpdate}
+                            ></Slider2>
+                        ))}
+                        {bodySelected ? (
+                            <>
+                                <div
+                                    style={{
+                                        fontSize: 15,
+                                        marginTop: 10,
+                                        marginBottom: 8,
+                                    }}
+                                >
+                                    {i18n.t('Body Parameters')}
+                                </div>
+                                {bodyParamControlor.map((props, index) => (
+                                    <Slider2
+                                        key={index}
+                                        {...props}
+                                        forceUpdate={forceUpdate}
+                                    ></Slider2>
+                                ))}
+                            </>
+                        ) : undefined}
+                    </div>
+                    <Popover.Arrow className={PopoverArrow} />
+                </Popover.Content>
+            </Popover.Portal>
+        </Popover.Root>
+    )
+}
+
+export default ControlorPopover

sd-webui-3d-open-pose-editor/src/components/PopupOver/styles.module.css

@@ -0,0 +1,115 @@
+@import '@radix-ui/colors/blackA.css';
+@import '@radix-ui/colors/mauve.css';
+@import '@radix-ui/colors/violet.css';
+
+.PopoverContent {
+    border-radius: 4px;
+    padding: 20px;
+    /* width: 260px; */
+    background-color: white;
+    box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+        hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+    animation-duration: 400ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: transform, opacity;
+    font-family: var(--openpose-editor-font-family);
+}
+
+.PopoverContent:focus {
+    box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+        hsl(206 22% 7% / 20%) 0px 10px 20px -15px, 0 0 0 2px var(--violet7);
+}
+.PopoverContent[data-state='open'][data-side='top'] {
+    animation-name: slideDownAndFade;
+}
+.PopoverContent[data-state='open'][data-side='right'] {
+    animation-name: slideLeftAndFade;
+}
+.PopoverContent[data-state='open'][data-side='bottom'] {
+    animation-name: slideUpAndFade;
+}
+.PopoverContent[data-state='open'][data-side='left'] {
+    animation-name: slideRightAndFade;
+}
+
+.PopoverArrow {
+    fill: white;
+}
+
+.IconButton {
+    all: unset;
+    font-family: inherit;
+    border-radius: 100%;
+    height: 35px;
+    width: 35px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--violet11);
+    background-color: white;
+    box-shadow: 0 2px 10px var(--blackA7);
+}
+.IconButton:hover {
+    background-color: var(--violet3);
+}
+.IconButton:focus {
+    box-shadow: 0 0 0 2px var(--violet6);
+}
+
+@keyframes slideUpAndFade {
+    from {
+        opacity: 0;
+        transform: translateY(2px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideRightAndFade {
+    from {
+        opacity: 0;
+        transform: translateX(-2px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes slideDownAndFade {
+    from {
+        opacity: 0;
+        transform: translateY(-2px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideLeftAndFade {
+    from {
+        opacity: 0;
+        transform: translateX(2px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+Input {
+    background-color: var(--violet5);
+    border: none;
+    box-sizing: border-box;
+    padding-left: 5px;
+    padding-right: 5px;
+    border-radius: 7px;
+}
+
+Input:focus {
+    border: 2px var(--violet11) solid;
+    border-radius: 5;
+}

sd-webui-3d-open-pose-editor/src/components/Slider/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import * as Slider from '@radix-ui/react-slider'
+import classes from './styles.module.css'
+
+const { SliderRoot, SliderTrack, SliderRange } = classes
+const SliderDemo: React.FC<{
+    range: [number, number]
+    value: number
+    onValueChange?: (value: number) => void
+    onValueCommit?: (value: number) => void
+    style?: React.CSSProperties
+}> = ({ range, value, onValueChange, onValueCommit, style }) => (
+    <form
+        style={{
+            ...style,
+        }}
+    >
+        <Slider.Root
+            className={SliderRoot}
+            value={[value]}
+            min={range[0]}
+            max={range[1]}
+            step={(range[1] - range[0]) / 150.0}
+            onValueChange={([value]: number[]) => {
+                onValueChange?.(value)
+            }}
+            onValueCommit={([value]: number[]) => {
+                onValueCommit?.(value)
+            }}
+        >
+            <Slider.Track className={SliderTrack}>
+                <Slider.Range className={SliderRange} />
+            </Slider.Track>
+        </Slider.Root>
+    </form>
+)
+
+export default SliderDemo

sd-webui-3d-open-pose-editor/src/components/Slider/styles.module.css

@@ -0,0 +1,26 @@
+@import '@radix-ui/colors/blackA.css';
+@import '@radix-ui/colors/violet.css';
+
+.SliderRoot {
+    position: relative;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    touch-action: none;
+    height: 20px;
+}
+
+.SliderTrack {
+    background-color: var(--violet5);
+    position: relative;
+    flex-grow: 1;
+    border-radius: 9999px;
+    height: 10px;
+}
+
+.SliderRange {
+    position: absolute;
+    background-color: var(--violet9);
+    border-radius: 9999px;
+    height: 100%;
+}

sd-webui-3d-open-pose-editor/src/components/Toast/index.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import * as Toast from '@radix-ui/react-toast'
+import NiceModal, { useModal } from '@ebay/nice-modal-react'
+import { debounce } from 'lodash-es'
+
+import classes from './styles.module.css'
+import classNames from 'classnames'
+
+const {
+    ToastViewport,
+    ToastRoot,
+    ToastTitle,
+    ToastAction,
+    Button,
+    small,
+    green,
+} = classes
+
+const MyToast = NiceModal.create<{
+    title: string
+    button?: string
+    duration?: number
+}>(({ title, button, duration = 3000 }) => {
+    const modal = useToast()
+    return (
+        <Toast.Provider swipeDirection="right" duration={duration}>
+            <Toast.Root
+                className={ToastRoot}
+                defaultOpen={true}
+                open={modal.visible}
+                onOpenChange={(open) => {
+                    if (open == false) {
+                        modal.hide()
+                    }
+                }}
+            >
+                <Toast.Title className={ToastTitle}>{title}</Toast.Title>
+                {button ? (
+                    <Toast.Action className={ToastAction} asChild altText="">
+                        <button
+                            className={classNames(Button, small, green)}
+                            onClick={() => {
+                                modal.resolve('action')
+                                modal.hide()
+                            }}
+                        >
+                            {button}
+                        </button>
+                    </Toast.Action>
+                ) : undefined}
+            </Toast.Root>
+            <Toast.Viewport className={ToastViewport} />
+        </Toast.Provider>
+    )
+})
+
+export function useToast() {
+    return useModal(MyToast)
+}
+
+declare type NiceModalArgs<T> = T extends
+    | keyof JSX.IntrinsicElements
+    | React.JSXElementConstructor<any>
+    ? Omit<React.ComponentProps<T>, 'id'>
+    : Record<string, unknown>
+
+export type ShowProps = NiceModalArgs<typeof MyToast>
+
+export function GetToast(wait = 0) {
+    const show = debounce((props: ShowProps) => {
+        NiceModal.show(MyToast, props)
+    }, wait)
+
+    return {
+        show: (props: ShowProps) => {
+            show(props)
+        },
+        hide: () => {
+            show.cancel()
+            HideToast()
+        },
+    }
+}
+
+export async function ShowToast(props: ShowProps): Promise<string> {
+    return await NiceModal.show(MyToast, props)
+}
+
+export function HideToast() {
+    return NiceModal.hide(MyToast)
+}

sd-webui-3d-open-pose-editor/src/components/Toast/styles.module.css

@@ -0,0 +1,142 @@
+@import '@radix-ui/colors/blackA.css';
+@import '@radix-ui/colors/green.css';
+@import '@radix-ui/colors/mauve.css';
+@import '@radix-ui/colors/slate.css';
+@import '@radix-ui/colors/violet.css';
+
+.ToastViewport {
+    font-family: var(--openpose-editor-font-family);
+    --viewport-padding: 25px;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    padding: var(--viewport-padding);
+    gap: 10px;
+    width: 390px;
+    max-width: 100vw;
+    margin: 0;
+    list-style: none;
+    z-index: 2147483647;
+    outline: none;
+}
+
+.ToastRoot {
+    background-color: white;
+    border-radius: 6px;
+    box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+        hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+    padding: 15px;
+    display: grid;
+    grid-template-areas: 'title action' 'description action';
+    grid-template-columns: auto max-content;
+    column-gap: 15px;
+    align-items: center;
+}
+.ToastRoot[data-state='open'] {
+    animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ToastRoot[data-state='closed'] {
+    animation: hide 100ms ease-in;
+}
+.ToastRoot[data-swipe='move'] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+}
+.ToastRoot[data-swipe='cancel'] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+}
+.ToastRoot[data-swipe='end'] {
+    animation: swipeOut 100ms ease-out;
+}
+
+@keyframes hide {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(calc(100% + var(--viewport-padding)));
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes swipeOut {
+    from {
+        transform: translateX(var(--radix-toast-swipe-end-x));
+    }
+    to {
+        transform: translateX(calc(100% + var(--viewport-padding)));
+    }
+}
+
+.ToastTitle {
+    grid-area: title;
+    margin-bottom: 5px;
+    font-weight: 500;
+    color: var(--slate12);
+    font-size: 15px;
+}
+
+.ToastDescription {
+    grid-area: description;
+    margin: 0;
+    color: var(--slate11);
+    font-size: 13px;
+    line-height: 1.3;
+}
+
+.ToastAction {
+    grid-area: action;
+}
+
+.Button {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    font-weight: 500;
+}
+.Button.small {
+    font-size: 12px;
+    padding: 0 10px;
+    line-height: 25px;
+    height: 25px;
+}
+.Button.large {
+    font-size: 15px;
+    padding: 0 15px;
+    line-height: 35px;
+    height: 35px;
+}
+.Button.violet {
+    background-color: white;
+    color: var(--violet11);
+    box-shadow: 0 2px 10px var(--blackA7);
+}
+.Button.violet:hover {
+    background-color: var(--mauve3);
+}
+.Button.violet:focus {
+    box-shadow: 0 0 0 2px black;
+}
+.Button.green {
+    background-color: var(--green2);
+    color: var(--green11);
+    box-shadow: inset 0 0 0 1px var(--green7);
+}
+.Button.green:hover {
+    box-shadow: inset 0 0 0 1px var(--green8);
+}
+.Button.green:focus {
+    box-shadow: 0 0 0 2px var(--green8);
+}

sd-webui-3d-open-pose-editor/src/defines.ts

@@ -0,0 +1,209 @@
+export const OpenposeyKeypointsConst = [
+    'nose',
+    'neck',
+    'right_shoulder',
+    'right_elbow',
+    'right_wrist',
+    'left_shoulder',
+    'left_elbow',
+    'left_wrist',
+    'right_hip',
+    'right_knee',
+    'right_ankle',
+    'left_hip',
+    'left_knee',
+    'left_ankle',
+    'right_eye',
+    'left_eye',
+    'right_ear',
+    'left_ear',
+] as const
+
+export const OpenposeKeypoints = OpenposeyKeypointsConst as unknown as string[]
+
+export const ConnectKeypoints = [
+    [1, 2],
+    [1, 5],
+    [2, 3],
+    [3, 4],
+    [5, 6],
+    [6, 7],
+    [1, 8],
+    [8, 9],
+    [9, 10],
+    [1, 11],
+    [11, 12],
+    [12, 13],
+    [0, 1],
+    [0, 14],
+    [14, 16],
+    [0, 15],
+    [15, 17],
+] as const
+
+export const ConnectColor = [
+    [255, 0, 0], // [1, 2], 0
+    [255, 85, 0], // [1, 5], 1
+    [255, 170, 0], // [2, 3], 2
+    [255, 255, 0], // [3, 4], 3
+    [170, 255, 0], // [5, 6], 4
+    [85, 255, 0], // [6, 7], 5
+    [0, 255, 0], // [1, 8], 6
+    [0, 255, 85], // [8, 9], 7
+    [0, 255, 170], // [9, 10], 8
+    [0, 255, 255], // [1, 11], 9
+    [0, 170, 255], // [11, 12], 10
+    [0, 85, 255], // [12, 13], 11
+    [0, 0, 255], // [0, 1], 12
+    [85, 0, 255], // [0, 14], 13
+    [170, 0, 255], // [14, 16], 14
+    [255, 0, 255], // [0, 15], 15
+    [255, 0, 170], // [15, 17], 16
+    [255, 0, 85], // 17
+] as const
+
+export function ToHexColor([r, g, b]: readonly [number, number, number]) {
+    return (r << 16) + (g << 8) + b
+}
+function SearchColor(start: number, end: number) {
+    const index = ConnectKeypoints.findIndex(
+        ([s, e]) => s === start && e === end
+    )
+
+    if (typeof index !== 'undefined') {
+        const [r, g, b] = ConnectColor[index]
+
+        return (r << 16) + (g << 8) + b
+    }
+    return null
+}
+
+export function GetColorOfLinkByName(startName: string, endName: string) {
+    if (!startName || !endName) return null
+
+    const indexStart = OpenposeKeypoints.indexOf(startName)
+    const indexEnd = OpenposeKeypoints.indexOf(endName)
+
+    if (indexStart === -1 || indexEnd === -1) return null
+
+    if (indexStart > indexEnd) return SearchColor(indexEnd, indexStart)
+    else return SearchColor(indexStart, indexEnd)
+}
+
+export const BoneThickness = 1
+
+export const PartIndexMappingOfPoseModel = {
+    Root: 0,
+    Hips: 1,
+    Spine: 2,
+    Spine1: 3,
+    Spine2: 4,
+    Chest: 5,
+    Neck: 6,
+    Head: 7,
+    Eye_R: 8,
+    Eye_L: 9,
+    Head_Null: 10, // maybe null
+    Shoulder_L: 11,
+    Arm_L: 12,
+    ForeArm_L: 13,
+    Hand_L: 14,
+    HandPinky1_L: 15,
+    HandPinky2_L: 16,
+    HandPinky3_L: 17,
+    HandRing1_L: 18,
+    HandRing2_L: 19,
+    HandRing3_L: 20,
+    HandMiddle1_L: 21,
+    HandMiddle2_L: 22,
+    HandMiddle3_L: 23,
+    HandIndex1_L: 24,
+    HandIndex2_L: 25,
+    HandIndex3_L: 26,
+    HandThumb1_L: 27,
+    HandThumb2_L: 28,
+    HandThumb3_L: 29,
+    Elbow_L: 30,
+    ForeArmTwist_L: 31,
+    ArmTwist_L: 32,
+    Shoulder_R: 33,
+    Arm_R: 34,
+    ForeArm_R: 35,
+    Hand_R: 36,
+    HandPinky1_R: 37,
+    HandPinky2_R: 38,
+    HandPinky3_R: 39,
+    HandRing1_R: 40,
+    HandRing2_R: 41,
+    HandRing3_R: 42,
+    HandMiddle1_R: 43,
+    HandMiddle2_R: 44,
+    HandMiddle3_R: 45,
+    HandIndex1_R: 46,
+    HandIndex2_R: 47,
+    HandIndex3_R: 48,
+    HandThumb1_R: 49,
+    HandThumb2_R: 50,
+    HandThumb3_R: 51,
+    Elbow_R: 52,
+    ForeArmTwist_R: 53,
+    ArmTwist_R: 54,
+    UpLeg_L: 55,
+    Leg_L: 56,
+    Knee_L: 57,
+    Foot_L: 58,
+    FootPinky1_L: 59,
+    FootRing_L: 60,
+    FootMiddle_L: 61,
+    FootIndex_L: 62,
+    FootThumb_L: 63,
+    UpLegTwist_L: 64,
+    ThighFront_L: 65,
+    UpLeg_R: 66,
+    Leg_R: 67,
+    Knee_R: 68,
+    Foot_R: 69,
+    FootPinky1_R: 70,
+    FootRing_R: 71,
+    FootMiddle_R: 72,
+    FootIndex_R: 73,
+    FootThumb_R: 74,
+    UpLegTwist_R: 75,
+    ThighFront_R: 76,
+}
+
+export const PartIndexMappingOfBlazePoseModel = {
+    nose: 0,
+    left_eye_inner: 1,
+    left_eye: 2,
+    left_eye_outer: 3,
+    right_eye_inner: 4,
+    right_eye: 5,
+    right_eye_outer: 6,
+    left_ear: 7,
+    right_ear: 8,
+    mouth_left: 9,
+    mouth_right: 10,
+    left_shoulder: 11,
+    right_shoulder: 12,
+    left_elbow: 13,
+    right_elbow: 14,
+    left_wrist: 15,
+    right_wrist: 16,
+    left_pinky: 17,
+    right_pinky: 18,
+    left_index: 19,
+    right_index: 20,
+    left_thumb: 21,
+    right_thumb: 22,
+    left_hip: 23,
+    right_hip: 24,
+    left_knee: 25,
+    right_knee: 26,
+    left_ankle: 27,
+    right_ankle: 28,
+    left_heel: 29,
+    right_heel: 30,
+    left_foot_index: 31,
+    right_foot_index: 32,
+}

sd-webui-3d-open-pose-editor/src/editor.ts

@@ -0,0 +1,1875 @@
+import * as THREE from 'three'
+import {
+    Bone,
+    Material,
+    Mesh,
+    MeshBasicMaterial,
+    MeshDepthMaterial,
+    MeshNormalMaterial,
+    MeshPhongMaterial,
+    Object3D,
+    Skeleton,
+    SkinnedMesh,
+} from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { TransformControls } from 'three/examples/jsm/controls/TransformControls'
+
+// @ts-ignore
+// import {
+//     CCDIKHelper,
+//     CCDIKSolver,
+//     IKS,
+// } from 'three/examples/jsm/animate/CCDIKSolver'
+import { CCDIKSolver } from './utils/CCDIKSolver'
+import Stats from 'three/examples/jsm/libs/stats.module'
+import {
+    BodyControlor,
+    BodyData,
+    CloneBody,
+    GetExtremityMesh,
+    IsBone,
+    IsExtremities,
+    IsFoot,
+    IsHand,
+    IsMask,
+    IsNeedSaveObject,
+    IsPickable,
+    IsSkeleton,
+    IsTarget,
+    IsTranslate,
+} from './body'
+
+import { downloadJson, uploadJson } from './utils/transfer'
+
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
+import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'
+
+import { LuminosityShader } from 'three/examples/jsm/shaders/LuminosityShader.js'
+import { SobelOperatorShader } from 'three/examples/jsm/shaders/SobelOperatorShader.js'
+import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils'
+import { Oops } from './components/Oops'
+import { getCurrentTime } from './utils/time'
+import { sendToAll } from './hooks/useMessageDispatch'
+
+type EditorEventHandler<T> = (args: T) => void
+
+class EditorEventManager<T> {
+    private eventHandlers: EditorEventHandler<T>[] = []
+
+    AddEventListener(handler: EditorEventHandler<T>): void {
+        this.eventHandlers.push(handler)
+    }
+
+    RemoveEventListener(handler: EditorEventHandler<T>): void {
+        this.eventHandlers = this.eventHandlers.filter((h) => h !== handler)
+    }
+
+    TriggerEvent(args: T): void {
+        this.eventHandlers.forEach((h) => h(args))
+    }
+}
+
+interface CameraData {
+    position: ReturnType<THREE.Vector3['toArray']>
+    rotation: ReturnType<THREE.Euler['toArray']>
+    target: ReturnType<THREE.Vector3['toArray']>
+    near: number
+    far: number
+    zoom: number
+}
+
+interface TransformValue {
+    scale: Object3D['scale']
+    rotation: Object3D['rotation']
+    position: Object3D['position']
+}
+
+function GetTransformValue(obj: Object3D): TransformValue {
+    return {
+        scale: obj.scale.clone(),
+        rotation: obj.rotation.clone(),
+        position: obj.position.clone(),
+    }
+}
+
+export interface Command {
+    execute: () => void
+    undo: () => void
+}
+
+export interface ParentElement {
+    addEventListener(
+        type: 'keydown',
+        listener: (this: any, ev: KeyboardEvent) => any,
+        options?: boolean | AddEventListenerOptions | undefined
+    ): void
+    addEventListener(
+        type: 'keyup',
+        listener: (this: any, ev: KeyboardEvent) => any,
+        options?: boolean | AddEventListenerOptions | undefined
+    ): void
+    removeEventListener(
+        type: 'keydown',
+        listener: (this: Document, ev: KeyboardEvent) => any,
+        options?: boolean | EventListenerOptions | undefined
+    ): void
+    removeEventListener(
+        type: 'keyup',
+        listener: (this: Document, ev: KeyboardEvent) => any,
+        options?: boolean | EventListenerOptions | undefined
+    ): void
+}
+
+class PreviewRenderer {
+    scene: THREE.Scene
+    camera: THREE.PerspectiveCamera
+    canvas?: HTMLCanvasElement
+    renderer: THREE.WebGLRenderer
+    orbitControls: OrbitControls
+
+    constructor(setting: {
+        scene: THREE.Scene
+        camera: THREE.PerspectiveCamera
+        orbitControls: OrbitControls
+
+        canvas?: HTMLCanvasElement
+        renderer?: THREE.WebGLRenderer
+    }) {
+        this.scene = setting.scene
+        this.camera = setting.camera
+        this.canvas = setting.canvas
+        this.orbitControls = setting.orbitControls
+        if (setting.renderer) {
+            this.renderer = setting.renderer
+        } else {
+            this.renderer = new THREE.WebGLRenderer({
+                antialias: true,
+                canvas: setting.canvas,
+                // logarithmicDepthBuffer: true
+            })
+        }
+    }
+
+    renderBySize(
+        outputWidth: number,
+        outputHeight: number,
+        render: (outputWidth: number, outputHeight: number) => void
+    ) {
+        const save = {
+            aspect: this.camera.aspect,
+        }
+        this.camera.aspect = outputWidth / outputHeight
+        this.camera.updateProjectionMatrix()
+        this.renderer.setSize(outputWidth, outputHeight, true)
+
+        render(outputWidth, outputHeight)
+
+        this.camera.aspect = save.aspect
+        this.camera.updateProjectionMatrix()
+    }
+
+    GetCameraData() {
+        const result = {
+            position: this.camera.position.toArray(),
+            rotation: this.camera.rotation.toArray(),
+            target: this.orbitControls.target.toArray(),
+            near: this.camera.near,
+            far: this.camera.far,
+            zoom: this.camera.zoom,
+        }
+
+        return result
+    }
+
+    RestoreCamera(data: CameraData, updateOrbitControl = true) {
+        this.camera.position.fromArray(data.position)
+        this.camera.rotation.fromArray(data.rotation as any)
+        this.camera.near = data.near
+        this.camera.far = data.far
+        this.camera.zoom = data.zoom
+        this.camera.updateProjectionMatrix()
+
+        if (data.target) this.orbitControls.target.fromArray(data.target)
+        if (updateOrbitControl) this.orbitControls.update() // fix position change
+    }
+
+    changeView(cameraDataOfView?: CameraData) {
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        if (!cameraDataOfView) return () => {}
+
+        const old = this.GetCameraData()
+        this.RestoreCamera(cameraDataOfView, false)
+        return () => {
+            this.RestoreCamera(old)
+        }
+    }
+
+    render(
+        outputWidth: number,
+        outputHeight: number,
+        cameraDataOfView?: CameraData,
+        custom?: (outputWidth: number, outputHeight: number) => void
+    ) {
+        const render = () => {
+            this.renderer.render(this.scene, this.camera)
+        }
+        const restoreView = this.changeView(cameraDataOfView)
+        this.renderBySize(outputWidth, outputHeight, custom ?? render)
+        restoreView()
+    }
+}
+
+export class BodyEditor {
+    renderer: THREE.WebGLRenderer
+    outputRenderer: THREE.WebGLRenderer
+    previewRenderer: PreviewRenderer
+    scene: THREE.Scene
+    gridHelper: THREE.GridHelper
+    axesHelper: THREE.AxesHelper
+    camera: THREE.PerspectiveCamera
+    orbitControls: OrbitControls
+    transformControl: TransformControls
+
+    dlight: THREE.DirectionalLight
+    alight: THREE.AmbientLight
+    raycaster = new THREE.Raycaster()
+    IsClick = false
+    stats: Stats | undefined
+
+    // ikSolver?: CCDIKSolver
+    composer?: EffectComposer
+    finalComposer?: EffectComposer
+    effectSobel?: ShaderPass
+    enableComposer = false
+    enablePreview = true
+    enableHelper = true
+
+    paused = false
+
+    parentElem: ParentElement
+
+    clearColor = 0xaaaaaa
+    constructor({
+        canvas,
+        previewCanvas,
+        parentElem = document,
+        statsElem,
+    }: {
+        canvas: HTMLCanvasElement
+        previewCanvas: HTMLCanvasElement
+        parentElem?: ParentElement
+        statsElem?: Element
+    }) {
+        this.parentElem = parentElem
+        this.renderer = new THREE.WebGLRenderer({
+            canvas,
+            antialias: true,
+            // logarithmicDepthBuffer: true
+        })
+        this.outputRenderer = new THREE.WebGLRenderer({
+            antialias: true,
+            // logarithmicDepthBuffer: true
+        })
+        this.outputRenderer.domElement.style.display = 'none'
+        document.body.appendChild(this.outputRenderer.domElement)
+
+        this.renderer.setClearColor(this.clearColor, 0.0)
+        this.scene = new THREE.Scene()
+
+        this.gridHelper = new THREE.GridHelper(8000, 200)
+        this.axesHelper = new THREE.AxesHelper(1000)
+        this.scene.add(this.gridHelper)
+        this.scene.add(this.axesHelper)
+
+        const aspect = window.innerWidth / window.innerHeight
+
+        this.camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 10000)
+
+        this.camera.position.set(0, 100, 200)
+        this.camera.lookAt(0, 100, 0)
+        // this.camera.near = 130
+        // this.camera.far = 600
+        this.camera.updateProjectionMatrix()
+
+        this.orbitControls = new OrbitControls(
+            this.camera,
+            this.renderer.domElement
+        )
+        this.orbitControls.target = new THREE.Vector3(0, 100, 0)
+        this.orbitControls.update()
+
+        this.transformControl = new TransformControls(
+            this.camera,
+            this.renderer.domElement
+        )
+
+        this.transformControl.setMode('rotate') //旋转
+        this.transformControl.setSize(0.4)
+        this.transformControl.setSpace('local')
+        this.registerTranformControlEvent()
+        this.scene.add(this.transformControl)
+
+        this.previewRenderer = new PreviewRenderer({
+            scene: this.scene,
+            camera: this.camera,
+            orbitControls: this.orbitControls,
+            canvas: previewCanvas,
+        })
+
+        // Light
+        this.dlight = new THREE.DirectionalLight(0xffffff, 1.0)
+        this.dlight.position.set(0, 160, 1000)
+        this.scene.add(this.dlight)
+        this.alight = new THREE.AmbientLight(0xffffff, 0.5)
+        this.scene.add(this.alight)
+
+        this.onMouseDown = this.onMouseDown.bind(this)
+        this.onMouseMove = this.onMouseMove.bind(this)
+        this.onMouseUp = this.onMouseUp.bind(this)
+        this.handleResize = this.handleResize.bind(this)
+        this.handleKeyDown = this.handleKeyDown.bind(this)
+        this.handleKeyUp = this.handleKeyUp.bind(this)
+
+        this.addEvent()
+
+        this.initEdgeComposer()
+
+        // // Create a render target with depth texture
+        // this.setupRenderTarget();
+
+        // // Setup post-processing step
+        // this.setupPost();
+
+        if (statsElem) {
+            this.stats = Stats()
+            statsElem.appendChild(this.stats.dom)
+        }
+
+        this.animate = this.animate.bind(this)
+        this.animate()
+        this.handleResize()
+        this.AutoSaveScene()
+    }
+
+    disponse() {
+        this.pause()
+        this.removeEvent()
+        this.renderer.dispose()
+        this.outputRenderer.dispose()
+
+        console.log('BodyEditor disponse')
+    }
+
+    commandHistory: Command[] = []
+    historyIndex = -1
+    pushCommand(cmd: Command) {
+        console.log('pushCommand')
+        if (this.historyIndex != this.commandHistory.length - 1)
+            this.commandHistory = this.commandHistory.slice(
+                0,
+                this.historyIndex + 1
+            )
+        this.commandHistory.push(cmd)
+        this.historyIndex = this.commandHistory.length - 1
+    }
+
+    CreateTransformCommand(obj: Object3D, _old: TransformValue): Command {
+        const oldValue = _old
+        const newValue = GetTransformValue(obj)
+        const controlor = new BodyControlor(this.getBodyByPart(obj)!)
+        return {
+            execute: () => {
+                obj.position.copy(newValue.position)
+                obj.rotation.copy(newValue.rotation)
+                obj.scale.copy(newValue.scale)
+                controlor.Update()
+            },
+            undo: () => {
+                obj.position.copy(oldValue.position)
+                obj.rotation.copy(oldValue.rotation)
+                obj.scale.copy(oldValue.scale)
+                controlor.Update()
+            },
+        }
+    }
+
+    CreateAllTransformCommand(obj: Object3D, _old: BodyData): Command {
+        const oldValue = _old
+        const body = this.getBodyByPart(obj)!
+        const controlor = new BodyControlor(body)
+        const newValue = controlor.GetBodyData()
+
+        return {
+            execute: () => {
+                controlor.RestoreBody(newValue)
+                controlor.Update()
+            },
+            undo: () => {
+                controlor.RestoreBody(oldValue)
+                controlor.Update()
+            },
+        }
+    }
+
+    CreateAddBodyCommand(obj: Object3D): Command {
+        return {
+            execute: () => {
+                this.scene.add(obj)
+            },
+            undo: () => {
+                obj.removeFromParent()
+                this.DetachTransfromControl()
+            },
+        }
+    }
+
+    CreateRemoveBodyCommand(obj: Object3D): Command {
+        return {
+            execute: () => {
+                obj.removeFromParent()
+                this.DetachTransfromControl()
+            },
+            undo: () => {
+                this.scene.add(obj)
+            },
+        }
+    }
+
+    Undo() {
+        console.log('Undo', this.historyIndex)
+
+        if (this.historyIndex >= 0) {
+            const cmd = this.commandHistory[this.historyIndex]
+            cmd.undo()
+            this.historyIndex--
+        }
+    }
+
+    Redo() {
+        console.log('Redo', this.historyIndex)
+
+        if (this.historyIndex < this.commandHistory.length - 1) {
+            const cmd = this.commandHistory[this.historyIndex + 1]
+            cmd.execute()
+            this.historyIndex++
+        }
+    }
+
+    handleKeyDown(e: KeyboardEvent) {
+        if (this.paused) {
+            return
+        }
+        if (e.code === 'KeyZ' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
+            this.Redo()
+        } else if (e.code === 'KeyY' && (e.ctrlKey || e.metaKey)) {
+            this.Redo()
+            // prevent brower refresh
+            e.preventDefault()
+        } else if (e.code === 'KeyZ' && (e.ctrlKey || e.metaKey)) {
+            this.Undo()
+        } else if (e.code === 'KeyD' && e.shiftKey) {
+            this.CopySelectedBody()
+        } else if (e.key === 'Delete') {
+            this.RemoveBody()
+        } else if (e.code === 'KeyX') {
+            this.MoveMode = true
+        }
+    }
+
+    handleKeyUp(e: KeyboardEvent) {
+        if (this.paused) {
+            return
+        }
+
+        if (e.code === 'KeyX') {
+            this.MoveMode = false
+        }
+    }
+
+    registerTranformControlEvent() {
+        let oldTransformValue: TransformValue = {
+            scale: new THREE.Vector3(),
+            rotation: new THREE.Euler(),
+            position: new THREE.Vector3(),
+        }
+        let oldBodyData: BodyData = {} as BodyData
+        this.transformControl.addEventListener('change', () => {
+            const body = this.getSelectedBody()
+
+            if (body) {
+                new BodyControlor(body).UpdateBones()
+            }
+            // console.log('change')
+            // this.renderer.render(this.scene, this.camera)
+        })
+
+        this.transformControl.addEventListener('objectChange', () => {
+            // console.log('objectChange')
+            // this.renderer.render(this.scene, this.camera)
+        })
+
+        this.transformControl.addEventListener('mouseDown', () => {
+            const part = this.getSelectedPart()
+            if (part) {
+                oldTransformValue = GetTransformValue(part)
+                const body = this.getBodyByPart(part)!
+                oldBodyData = new BodyControlor(body).GetBodyData()
+            }
+            this.orbitControls.enabled = false
+        })
+        this.transformControl.addEventListener('mouseUp', () => {
+            const part = this.getSelectedPart()
+            if (part) {
+                if (IsTarget(part.name))
+                    this.pushCommand(
+                        this.CreateAllTransformCommand(part, oldBodyData)
+                    )
+                else
+                    this.pushCommand(
+                        this.CreateTransformCommand(part, oldTransformValue)
+                    )
+            }
+            this.orbitControls.enabled = true
+
+            this.saveSelectedBodyControlor?.Update()
+        })
+    }
+
+    ikSolver?: CCDIKSolver
+    saveSelectedBodyControlor?: BodyControlor
+
+    updateSelectedBodyIKSolver() {
+        const body = this.getSelectedBody() ?? undefined
+
+        if (body !== this.saveSelectedBodyControlor) {
+            this.saveSelectedBodyControlor = body
+                ? new BodyControlor(body!)
+                : undefined
+            this.ikSolver = body
+                ? this.saveSelectedBodyControlor?.GetIKSolver()
+                : undefined
+        }
+
+        if (IsTranslate(this.getSelectedPart()?.name ?? ''))
+            this.ikSolver?.update()
+        else this.saveSelectedBodyControlor?.ResetAllTargetsPosition()
+    }
+
+    render(width: number = this.Width, height: number = this.Height) {
+        this.updateSelectedBodyIKSolver()
+
+        this.renderer.setViewport(0, 0, width, height)
+        this.renderer.setScissor(0, 0, width, height)
+        this.renderer.setScissorTest(true)
+
+        this.renderer.render(this.scene, this.camera)
+    }
+
+    autoSize = true
+    outputWidth = 0
+    outputHeight = 0
+    get OutputWidth() {
+        return this.autoSize
+            ? this.Width
+            : this.outputWidth === 0
+            ? this.Height
+            : this.outputWidth
+    }
+    set OutputWidth(value: number) {
+        this.autoSize = false
+        this.outputWidth = value
+    }
+    get OutputHeight() {
+        return this.autoSize
+            ? this.Height
+            : this.outputHeight === 0
+            ? this.Height
+            : this.outputHeight
+    }
+
+    set OutputHeight(value: number) {
+        this.autoSize = false
+        this.outputHeight = value
+    }
+
+    renderPreview() {
+        const outputWidth = this.OutputWidth
+        const outputHeight = this.OutputHeight
+
+        const outputAspect = outputWidth / outputHeight
+        const maxOutoutAspect = 2
+        const [left, bottom, width, height] =
+            outputAspect > maxOutoutAspect
+                ? [
+                      this.Width - 50 - 150 * maxOutoutAspect,
+                      220,
+                      150 * maxOutoutAspect,
+                      (150 * maxOutoutAspect * outputHeight) / outputWidth,
+                  ]
+                : [
+                      this.Width - 50 - (150 * outputWidth) / outputHeight,
+                      220,
+                      (150 * outputWidth) / outputHeight,
+                      150,
+                  ]
+        const save = {
+            viewport: new THREE.Vector4(),
+            scissor: new THREE.Vector4(),
+            scissorTest: this.renderer.getScissorTest(),
+            aspect: this.camera.aspect,
+        }
+
+        this.renderer.getViewport(save.viewport)
+        this.renderer.getScissor(save.viewport)
+
+        this.renderer.setViewport(left, bottom, width, height)
+        this.renderer.setScissor(left, bottom, width, height)
+        this.renderer.setScissorTest(true)
+        this.camera.aspect = width / height
+        this.camera.updateProjectionMatrix()
+
+        const restoreView = this.changeView()
+        this.renderer.render(this.scene, this.camera)
+        restoreView()
+        // restore
+        this.renderer.setViewport(save.viewport)
+        this.renderer.setScissor(save.scissor)
+        this.renderer.setScissorTest(save.scissorTest)
+        this.camera.aspect = save.aspect
+        this.camera.updateProjectionMatrix()
+    }
+
+    renderOutputBySize(
+        outputWidth: number,
+        outputHeight: number,
+        render: (outputWidth: number, outputHeight: number) => void
+    ) {
+        const save = {
+            aspect: this.camera.aspect,
+        }
+        this.camera.aspect = outputWidth / outputHeight
+        this.camera.updateProjectionMatrix()
+        this.outputRenderer.setSize(outputWidth, outputHeight, true)
+
+        render(outputWidth, outputHeight)
+
+        this.camera.aspect = save.aspect
+        this.camera.updateProjectionMatrix()
+    }
+
+    renderOutput(
+        scale = 1,
+        custom?: (outputWidth: number, outputHeight: number) => void
+    ) {
+        const outputWidth = this.OutputWidth * scale
+        const outputHeight = this.OutputHeight * scale
+
+        const render = () => {
+            this.outputRenderer.render(this.scene, this.camera)
+        }
+        this.renderOutputBySize(outputWidth, outputHeight, custom ?? render)
+    }
+    getOutputPNG() {
+        return this.outputRenderer.domElement.toDataURL('image/png')
+    }
+    animate() {
+        if (this.paused) {
+            return
+        }
+        requestAnimationFrame(this.animate)
+        this.handleResize()
+        this.render()
+        this.outputPreview()
+        this.stats?.update()
+    }
+
+    outputPreview() {
+        if (this.enablePreview) this.CapturePreview()
+        this.PreviewEventManager.TriggerEvent(this.enablePreview)
+    }
+    pause() {
+        this.paused = true
+    }
+
+    resume() {
+        this.paused = false
+        this.animate()
+    }
+
+    getAncestors(o: Object3D) {
+        const ancestors: Object3D[] = []
+        o.traverseAncestors((ancestor) => ancestors.push(ancestor))
+        return ancestors
+    }
+    getBodyByPart(o: Object3D) {
+        if (o?.name === 'torso') return o
+
+        const body =
+            this.getAncestors(o).find((o) => o?.name === 'torso') ?? null
+        return body
+    }
+
+    SelectEventManager = new EditorEventManager<BodyControlor>()
+    UnselectEventManager = new EditorEventManager<void>()
+    ContextMenuEventManager = new EditorEventManager<{
+        mouseX: number
+        mouseY: number
+    }>()
+    PreviewEventManager = new EditorEventManager<boolean>()
+    LockViewEventManager = new EditorEventManager<boolean>()
+
+    triggerSelectEvent(body: Object3D) {
+        const c = new BodyControlor(body)
+        this.SelectEventManager.TriggerEvent(c)
+        this.UpdateBones()
+    }
+    triggerUnselectEvent() {
+        this.UnselectEventManager.TriggerEvent()
+        this.UpdateBones()
+    }
+
+    addEvent() {
+        this.renderer.domElement.addEventListener(
+            'mousedown',
+            this.onMouseDown,
+            false
+        )
+        this.renderer.domElement.addEventListener(
+            'mousemove',
+            this.onMouseMove,
+            false
+        )
+        this.renderer.domElement.addEventListener(
+            'mouseup',
+            this.onMouseUp,
+            false
+        )
+
+        this.renderer.domElement.addEventListener('resize', this.handleResize)
+
+        this.parentElem.addEventListener('keydown', this.handleKeyDown)
+        this.parentElem.addEventListener('keyup', this.handleKeyUp)
+    }
+
+    removeEvent() {
+        this.renderer.domElement.removeEventListener(
+            'mousedown',
+            this.onMouseDown,
+            false
+        )
+        this.renderer.domElement.removeEventListener(
+            'mousemove',
+            this.onMouseMove,
+            false
+        )
+        this.renderer.domElement.removeEventListener(
+            'mouseup',
+            this.onMouseUp,
+            false
+        )
+
+        this.renderer.domElement.removeEventListener(
+            'resize',
+            this.handleResize
+        )
+
+        this.parentElem.removeEventListener('keydown', this.handleKeyDown)
+        this.parentElem.removeEventListener('keyup', this.handleKeyUp)
+    }
+
+    onMouseDown(event: MouseEvent) {
+        event.preventDefault()
+        this.IsClick = true
+    }
+    onMouseMove(event: MouseEvent) {
+        // some devices still send movemove event, filter it.
+        if (event.movementX == 0 && event.movementY == 0) return
+        this.IsClick = false
+    }
+
+    onMouseUp(event: MouseEvent) {
+        const x = event.offsetX - this.renderer.domElement.offsetLeft
+        const y = event.offsetY - this.renderer.domElement.offsetTop
+        this.raycaster.setFromCamera(
+            {
+                x: (x / this.renderer.domElement.clientWidth) * 2 - 1,
+                y: -(y / this.renderer.domElement.clientHeight) * 2 + 1,
+            },
+            this.camera
+        )
+        const intersects: THREE.Intersection[] =
+            this.raycaster.intersectObjects(this.GetBodies(), true)
+        // If read_point is found, choose it first
+        const point = intersects.find((o) => o.object.name === 'red_point')
+        const intersectedObject: THREE.Object3D | null = point
+            ? point.object
+            : intersects.length > 0
+            ? intersects[0].object
+            : null
+        const name = intersectedObject ? intersectedObject.name : ''
+        let obj: Object3D | null = intersectedObject
+
+        console.log(obj?.name)
+
+        if (this.IsClick) {
+            if (event.button === 2 || event.which === 3) {
+                console.log('Right mouse button released')
+                this.ContextMenuEventManager.TriggerEvent({
+                    mouseX: x,
+                    mouseY: y,
+                })
+                return
+            }
+
+            if (!obj) {
+                this.DetachTransfromControl()
+                this.triggerUnselectEvent()
+                return
+            }
+
+            if (this.MoveMode) {
+                const isOk = IsPickable(name, this.FreeMode)
+
+                if (!isOk) {
+                    obj =
+                        this.getAncestors(obj).find((o) =>
+                            IsPickable(o.name, this.FreeMode)
+                        ) ?? null
+                }
+
+                if (obj) {
+                    if (IsTranslate(obj.name, this.FreeMode) === false)
+                        obj = this.getBodyByPart(obj)
+                }
+
+                if (obj) {
+                    console.log(obj.name)
+                    this.transformControl.setMode('translate')
+                    this.transformControl.setSpace('world')
+                    this.transformControl.attach(obj)
+                    const body = this.getBodyByPart(obj)
+                    if (body) this.triggerSelectEvent(body)
+                }
+            } else {
+                const isOk = IsPickable(name)
+
+                if (!isOk) {
+                    obj =
+                        this.getAncestors(obj).find((o) =>
+                            IsPickable(o.name)
+                        ) ?? null
+                }
+
+                if (obj) {
+                    console.log(obj.name)
+
+                    if (IsTranslate(obj.name)) {
+                        this.transformControl.setMode('translate')
+                        this.transformControl.setSpace('world')
+                    } else {
+                        this.transformControl.setMode('rotate')
+                        this.transformControl.setSpace('local')
+                    }
+
+                    this.transformControl.attach(obj)
+
+                    const body = this.getBodyByPart(obj)
+                    if (body) this.triggerSelectEvent(body)
+                }
+            }
+        }
+    }
+
+    traverseHandObjecct(handle: (o: THREE.Mesh) => void) {
+        this.GetBodies().forEach((o) => {
+            o.traverse((child) => {
+                if (IsHand(child?.name)) {
+                    handle(child as THREE.Mesh)
+                }
+            })
+        })
+    }
+
+    traverseBodies(handle: (o: Object3D) => void) {
+        this.GetBodies().forEach((o) => {
+            o.traverse((child) => {
+                handle(child)
+            })
+        })
+    }
+
+    traverseBones(handle: (o: Bone) => void) {
+        this.GetBodies().forEach((o) => {
+            o.traverse((child) => {
+                if (child instanceof Bone && IsBone(child.name)) handle(child)
+            })
+        })
+    }
+
+    traverseExtremities(handle: (o: THREE.Mesh) => void) {
+        this.GetBodies().forEach((o) => {
+            o.traverse((child) => {
+                if (IsExtremities(child.name)) {
+                    handle(child as THREE.Mesh)
+                }
+            })
+        })
+    }
+
+    onlyShowSkeleton() {
+        const recoveryArr: Object3D[] = []
+        this.traverseBodies((o) => {
+            if (IsSkeleton(o.name) === false) {
+                if (o.visible == true) {
+                    o.visible = false
+                    recoveryArr.push(o)
+                }
+            }
+        })
+
+        return () => {
+            recoveryArr.forEach((o) => (o.visible = true))
+        }
+    }
+
+    showMask() {
+        const recoveryArr: Object3D[] = []
+        this.scene.traverse((o) => {
+            if (IsMask(o.name)) {
+                console.log(o.name)
+                o.visible = true
+                recoveryArr.push(o)
+            }
+        })
+
+        return () => {
+            recoveryArr.forEach((o) => (o.visible = false))
+        }
+    }
+
+    hideSkeleten() {
+        const map = new Map<Object3D, Object3D | null>()
+
+        this.GetBodies().forEach((o) => {
+            o.traverse((child) => {
+                if (IsExtremities(child?.name)) {
+                    map.set(child, child.parent)
+                    this.scene.attach(child)
+                } else if (child?.name === 'red_point') {
+                    child.visible = false
+                }
+            })
+            o.visible = false
+        })
+        return map
+    }
+
+    GetBodies() {
+        return this.scene.children.filter((o) => o?.name === 'torso')
+    }
+    showSkeleten(map: Map<Object3D, Object3D | null>) {
+        for (const [k, v] of map.entries()) {
+            v?.attach(k)
+        }
+
+        map.clear()
+
+        this.GetBodies().forEach((o) => {
+            o.traverse((child) => {
+                if (child?.name === 'red_point') {
+                    child.visible = true
+                }
+            })
+            o.visible = true
+        })
+    }
+
+    changeComposer(enable: boolean) {
+        const save = this.enableComposer
+        this.enableComposer = enable
+
+        return () => (this.enableComposer = save)
+    }
+
+    changeHandMaterialTraverse(type: 'depth' | 'normal' | 'phone') {
+        const map = new Map<THREE.Mesh, Material | Material[]>()
+        this.scene.traverse((child) => {
+            if (!IsExtremities(child.name)) return
+            const o = GetExtremityMesh(child) as THREE.Mesh
+            map.set(o, o.material)
+            if (type == 'depth') o.material = new MeshDepthMaterial()
+            else if (type == 'normal') o.material = new MeshNormalMaterial()
+            else if (type == 'phone') o.material = new MeshPhongMaterial()
+        })
+
+        return () => {
+            for (const [k, v] of map.entries()) {
+                k.material = v
+            }
+
+            map.clear()
+        }
+    }
+
+    changeHandMaterial(type: 'depth' | 'normal' | 'phone') {
+        if (type == 'depth')
+            this.scene.overrideMaterial = new MeshDepthMaterial()
+        else if (type == 'normal')
+            this.scene.overrideMaterial = new MeshNormalMaterial()
+        else if (type == 'phone')
+            this.scene.overrideMaterial = new MeshPhongMaterial()
+
+        return () => {
+            this.scene.overrideMaterial = null
+        }
+    }
+
+    // https://stackoverflow.com/questions/15696963/three-js-set-and-read-camera-look-vector?noredirect=1&lq=1
+    getCameraLookAtVector() {
+        const lookAtVector = new THREE.Vector3(0, 0, -1)
+        lookAtVector.applyQuaternion(this.camera.quaternion)
+        return lookAtVector
+    }
+
+    getZDistanceFromCamera(p: THREE.Vector3) {
+        const lookAt = this.getCameraLookAtVector().normalize()
+        const v = p.clone().sub(this.camera.position)
+        return v.dot(lookAt)
+    }
+    changeCamera() {
+        let hands: THREE.Mesh[] = []
+        this.scene.traverse((o) => {
+            if (this.OnlyHand) {
+                if (IsHand(o?.name)) hands.push(o as THREE.Mesh)
+            } else {
+                if (IsExtremities(o?.name)) hands.push(o as THREE.Mesh)
+            }
+        })
+
+        // filter object in frustum
+        hands = this.objectInView(hands)
+
+        const cameraPos = new THREE.Vector3()
+        this.camera.getWorldPosition(cameraPos)
+
+        const handsPos = hands.map((o) => {
+            const cameraPos = new THREE.Vector3()
+            o.getWorldPosition(cameraPos)
+            return cameraPos
+        })
+
+        const handsDis = handsPos.map((pos) => {
+            return this.getZDistanceFromCamera(pos)
+        })
+
+        const minDis = Math.min(...handsDis)
+        const maxDis = Math.max(...handsDis)
+
+        const saveNear = this.camera.near
+        const saveFar = this.camera.far
+
+        this.camera.near = Math.max(minDis - 20, 0)
+        this.camera.far = Math.max(maxDis + 20, 20)
+        console.log('camera', this.camera.near, this.camera.far)
+
+        this.camera.updateProjectionMatrix()
+        return () => {
+            this.camera.near = saveNear
+            this.camera.far = saveFar
+            this.camera.updateProjectionMatrix()
+        }
+    }
+
+    Capture() {
+        const restore = this.onlyShowSkeleton()
+
+        this.renderOutput()
+        const imgData = this.getOutputPNG()
+
+        restore()
+
+        return imgData
+    }
+
+    CapturePreview() {
+        const scale = (window.devicePixelRatio * 140.0) / this.OutputHeight
+
+        const outputWidth = this.OutputWidth * scale
+        const outputHeight = this.OutputHeight * scale
+
+        this.previewRenderer.render(
+            outputWidth,
+            outputHeight,
+            this.cameraDataOfView
+        )
+    }
+
+    CaptureCanny() {
+        this.renderOutput(1, (outputWidth, outputHeight) => {
+            this.changeComposerResoultion(outputWidth, outputHeight)
+            const restoreMaterialTraverse =
+                this.changeHandMaterialTraverse('normal')
+            // step 1: get mask image
+            const restoreMask = this.showMask()
+            this.composer?.render()
+            restoreMask()
+
+            // step 2:
+            // get sobel image
+            // filer out pixels not in mask
+            // get binarized pixels
+            this.finalComposer?.render()
+            restoreMaterialTraverse()
+        })
+
+        return this.getOutputPNG()
+    }
+
+    CaptureNormal() {
+        const restoreHand = this.changeHandMaterial('normal')
+        this.renderOutput()
+        restoreHand()
+        return this.getOutputPNG()
+    }
+
+    CaptureDepth() {
+        const restoreHand = this.changeHandMaterial('depth')
+        const restoreCamera = this.changeCamera()
+        this.renderOutput()
+        restoreCamera()
+        restoreHand()
+        return this.getOutputPNG()
+    }
+
+    changeTransformControl() {
+        const part = this.getSelectedPart()
+
+        if (part) {
+            this.DetachTransfromControl()
+            return () => {
+                this.transformControl.attach(part)
+            }
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        return () => {}
+    }
+    changeHelper() {
+        const old = {
+            axesHelper: this.axesHelper.visible,
+            gridHelper: this.gridHelper.visible,
+        }
+        this.axesHelper.visible = false
+        this.gridHelper.visible = false
+
+        return () => {
+            this.axesHelper.visible = old.axesHelper
+            this.gridHelper.visible = old.gridHelper
+        }
+    }
+    MakeImages() {
+        this.renderer.setClearColor(0x000000)
+
+        const restoreHelper = this.changeHelper()
+
+        const restoreTransfromControl = this.changeTransformControl()
+        const restoreView = this.changeView()
+
+        const poseImage = this.Capture()
+
+        /// begin
+        const map = this.hideSkeleten()
+        const depthImage = this.CaptureDepth()
+        const normalImage = this.CaptureNormal()
+        const cannyImage = this.CaptureCanny()
+        this.showSkeleten(map)
+        /// end
+
+        this.renderer.setClearColor(0x000000, 0)
+        restoreHelper()
+
+        restoreTransfromControl()
+        restoreView()
+
+        const result = {
+            pose: poseImage,
+            depth: depthImage,
+            normal: normalImage,
+            canny: cannyImage,
+        }
+
+        sendToAll({
+            method: 'MakeImages',
+            type: 'event',
+            payload: result,
+        })
+        return result
+    }
+
+    CopySelectedBody() {
+        const list = this.GetBodies()
+
+        const selectedBody = this.getSelectedBody()
+
+        if (!selectedBody && list.length !== 0) return
+
+        const body =
+            list.length === 0 ? CloneBody() : SkeletonUtils.clone(selectedBody!)
+
+        if (!body) return
+
+        this.pushCommand(this.CreateAddBodyCommand(body))
+
+        if (list.length !== 0) body.position.x += 10
+        this.scene.add(body)
+        this.fixFootVisible()
+        this.transformControl.setMode('translate')
+        this.transformControl.setSpace('world')
+
+        this.transformControl.attach(body)
+    }
+
+    CopyBodyZ() {
+        const body = CloneBody()
+        if (!body) return
+
+        const list = this.GetBodies()
+            .filter((o) => o.position.x === 0)
+            .map((o) => Math.ceil(o.position.z / 30))
+
+        if (list.length > 0) body.translateZ((Math.min(...list) - 1) * 30)
+
+        this.pushCommand(this.CreateAddBodyCommand(body))
+
+        this.scene.add(body)
+        this.fixFootVisible()
+    }
+
+    CopyBodyX() {
+        const body = CloneBody()
+        if (!body) return
+
+        const list = this.GetBodies()
+            .filter((o) => o.position.z === 0)
+            .map((o) => Math.ceil(o.position.x / 50))
+
+        if (list.length > 0) body.translateX((Math.min(...list) - 1) * 50)
+
+        this.pushCommand(this.CreateAddBodyCommand(body))
+
+        this.scene.add(body)
+        this.fixFootVisible()
+    }
+
+    getSelectedBody() {
+        let obj: Object3D | null = this.getSelectedPart() ?? null
+        obj = obj ? this.getBodyByPart(obj) : null
+
+        return obj
+    }
+    getSelectedPart() {
+        return this.transformControl.object
+    }
+
+    getHandByPart(o: Object3D) {
+        if (IsHand(o?.name)) return o
+
+        const body = this.getAncestors(o).find((o) => IsHand(o?.name)) ?? null
+        return body
+    }
+
+    getSelectedHand() {
+        let obj: Object3D | null = this.getSelectedPart() ?? null
+        obj = obj ? this.getHandByPart(obj) : null
+        return obj
+    }
+    RemoveBody() {
+        const obj = this.getSelectedBody()
+
+        if (obj) {
+            this.pushCommand(this.CreateRemoveBodyCommand(obj))
+            console.log(obj.name)
+            obj.removeFromParent()
+            this.DetachTransfromControl()
+        }
+    }
+
+    pointsInView(points: THREE.Vector3[]) {
+        this.camera.updateMatrix() // make sure camera's local matrix is updated
+        this.camera.updateMatrixWorld() // make sure camera's world matrix is updated
+
+        const frustum = new THREE.Frustum().setFromProjectionMatrix(
+            new THREE.Matrix4().multiplyMatrices(
+                this.camera.projectionMatrix,
+                this.camera.matrixWorldInverse
+            )
+        )
+
+        //console.log(points);
+        return points.filter((p) => frustum.containsPoint(p))
+    }
+
+    getBouningSphere(o: Object3D) {
+        const bbox = new THREE.Box3().setFromObject(o, true)
+        // const helper = new THREE.Box3Helper(bbox, new THREE.Color(0, 255, 0))
+        // this.scene.add(helper)
+
+        const center = new THREE.Vector3()
+        bbox.getCenter(center)
+
+        const bsphere = bbox.getBoundingSphere(new THREE.Sphere(center))
+
+        return bsphere
+    }
+    objectInView<T extends Object3D>(objs: T[]) {
+        this.camera.updateMatrix() // make sure camera's local matrix is updated
+        this.camera.updateMatrixWorld() // make sure camera's world matrix is updated
+
+        const frustum = new THREE.Frustum().setFromProjectionMatrix(
+            new THREE.Matrix4().multiplyMatrices(
+                this.camera.projectionMatrix,
+                this.camera.matrixWorldInverse
+            )
+        )
+
+        //console.log(points);
+        return objs.filter((obj) => {
+            const sphere = this.getBouningSphere(obj)
+            return frustum.intersectsSphere(sphere)
+        })
+    }
+    isMoveMode = false
+    get MoveMode() {
+        return this.isMoveMode
+    }
+    set MoveMode(move: boolean) {
+        let IsTranslateMode = move
+        this.isMoveMode = move
+
+        const name = this.getSelectedPart()?.name ?? ''
+
+        if (move) {
+            if (IsTranslate(name, this.FreeMode)) {
+                IsTranslateMode = true
+            } else {
+                const obj = this.getSelectedBody()
+                if (obj) this.transformControl.attach(obj)
+            }
+        } else {
+            if (IsTarget(name)) {
+                IsTranslateMode = true
+            }
+        }
+
+        if (IsTranslateMode) {
+            this.transformControl.setMode('translate')
+            this.transformControl.setSpace('world')
+        } else {
+            this.transformControl.setMode('rotate')
+            this.transformControl.setSpace('local')
+        }
+    }
+
+    FreeMode = true
+
+    get Width() {
+        return this.renderer.domElement.clientWidth
+    }
+
+    get Height() {
+        return this.renderer.domElement.clientHeight
+    }
+
+    onlyHand = false
+    get OnlyHand() {
+        return this.onlyHand
+    }
+
+    set OnlyHand(value: boolean) {
+        this.onlyHand = value
+        this.setFootVisible(!this.onlyHand)
+    }
+
+    get EnableHelper() {
+        return this.enableHelper
+    }
+    set EnableHelper(value: boolean) {
+        this.enableHelper = value
+        this.gridHelper.visible = value
+        this.axesHelper.visible = value
+    }
+    setFootVisible(value: boolean) {
+        this.traverseExtremities((o) => {
+            if (IsFoot(o.name)) {
+                o.visible = value
+            }
+        })
+    }
+
+    fixFootVisible() {
+        this.setFootVisible(!this.OnlyHand)
+    }
+
+    handleResize() {
+        const size = new THREE.Vector2()
+        this.renderer.getSize(size)
+
+        if (size.width == this.Width && size.height === this.Height) return
+
+        const canvas = this.renderer.domElement
+        if (canvas.clientWidth == 0 || canvas.clientHeight == 0) return
+        this.camera.aspect = canvas.clientWidth / canvas.clientHeight
+
+        this.camera.updateProjectionMatrix()
+
+        // console.log(canvas.clientWidth, canvas.clientHeight)
+        this.renderer.setSize(canvas.clientWidth, canvas.clientHeight, false)
+        // console.log(this.Width, this.Height)
+    }
+
+    initEdgeComposer() {
+        this.composer = new EffectComposer(this.outputRenderer)
+        const renderPass = new RenderPass(this.scene, this.camera)
+        this.composer.addPass(renderPass)
+        this.composer.renderToScreen = false
+
+        const finalPass = new ShaderPass(
+            new THREE.ShaderMaterial({
+                uniforms: {
+                    baseTexture: { value: null },
+                    bloomTexture: {
+                        value: this.composer.renderTarget2.texture,
+                    },
+                },
+                vertexShader: `
+varying vec2 vUv;
+void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+}`,
+                fragmentShader: `
+uniform sampler2D baseTexture;
+uniform sampler2D bloomTexture;
+
+varying vec2 vUv;
+
+void main() {
+    vec4 bloomColor = texture2D(bloomTexture, vUv);
+    float grayValue = dot(bloomColor.rgb, vec3(0.299, 0.587, 0.114));
+    vec4 baseColor = texture2D(baseTexture, vUv);
+    vec4 masked = vec4(baseColor.rgb * step(0.001, grayValue), 1.0);
+    gl_FragColor = step(0.5, masked)  * vec4(1.0); // Binarization
+    // gl_FragColor = bloomColor;
+}
+
+`,
+                defines: {},
+            }),
+            'baseTexture'
+        )
+        finalPass.needsSwap = true
+
+        this.finalComposer = new EffectComposer(this.outputRenderer)
+        this.finalComposer.addPass(renderPass)
+
+        // color to grayscale conversion
+        const effectGrayScale = new ShaderPass(LuminosityShader)
+        this.finalComposer.addPass(effectGrayScale)
+
+        // Sobel operator
+        const effectSobel = new ShaderPass(SobelOperatorShader)
+        effectSobel.uniforms['resolution'].value.x =
+            this.Width * window.devicePixelRatio
+        effectSobel.uniforms['resolution'].value.y =
+            this.Height * window.devicePixelRatio
+        this.finalComposer.addPass(effectSobel)
+
+        this.effectSobel = effectSobel
+
+        this.finalComposer.addPass(finalPass)
+    }
+
+    changeComposerResoultion(width: number, height: number) {
+        this.composer?.setSize(width, height)
+        this.finalComposer?.setSize(width, height)
+
+        if (this.effectSobel) {
+            this.effectSobel.uniforms['resolution'].value.x =
+                width * window.devicePixelRatio
+            this.effectSobel.uniforms['resolution'].value.y =
+                height * window.devicePixelRatio
+        }
+    }
+
+    get CameraNear() {
+        return this.camera.near
+    }
+    set CameraNear(value: number) {
+        this.camera.near = value
+        this.camera.updateProjectionMatrix()
+    }
+
+    get CameraFar() {
+        return this.camera.far
+    }
+    set CameraFar(value: number) {
+        this.camera.far = value
+        this.camera.updateProjectionMatrix()
+    }
+
+    get CameraFocalLength() {
+        return this.camera.getFocalLength()
+    }
+    set CameraFocalLength(value) {
+        this.camera.setFocalLength(value)
+    }
+
+    GetCameraData() {
+        const result = {
+            position: this.camera.position.toArray(),
+            rotation: this.camera.rotation.toArray(),
+            target: this.orbitControls.target.toArray(),
+            near: this.camera.near,
+            far: this.camera.far,
+            zoom: this.camera.zoom,
+        }
+
+        return result
+    }
+    GetSceneData() {
+        const bodies = this.GetBodies().map((o) =>
+            new BodyControlor(o).GetBodyData()
+        )
+
+        const data = {
+            header: 'Openpose Editor by Yu Zhu',
+            version: __APP_VERSION__,
+            object: {
+                bodies: bodies,
+                camera: this.GetCameraData(),
+            },
+            setting: {},
+        }
+
+        return data
+    }
+    GetGesture() {
+        const hand = this.getSelectedHand()
+        const body = this.getSelectedBody()
+
+        if (!hand || !body) return null
+        const data = {
+            header: 'Openpose Editor by Yu Zhu',
+            version: __APP_VERSION__,
+            object: {
+                hand: new BodyControlor(body).GetHandData(
+                    hand.name === 'left_hand' ? 'left_hand' : 'right_hand'
+                ),
+            },
+            setting: {},
+        }
+
+        return data
+    }
+
+    AutoSaveScene() {
+        try {
+            const rawData = localStorage.getItem('AutoSaveSceneData')
+            if (rawData) {
+                localStorage.setItem('LastSceneData', rawData)
+            }
+            setInterval(() => {
+                localStorage.setItem(
+                    'AutoSaveSceneData',
+                    JSON.stringify(this.GetSceneData())
+                )
+            }, 5000)
+        } catch (error) {
+            console.error(error)
+        }
+    }
+
+    SaveScene() {
+        try {
+            downloadJson(
+                JSON.stringify(this.GetSceneData()),
+                `scene_${getCurrentTime()}.json`
+            )
+        } catch (error) {
+            console.error(error)
+        }
+    }
+    RestoreGesture(rawData: string) {
+        const data = JSON.parse(rawData)
+
+        const {
+            version,
+            object: { hand: handData },
+            setting,
+        } = data
+
+        if (!handData) throw new Error('Invalid json')
+        const hand = this.getSelectedHand()
+        const body = this.getSelectedBody()
+
+        if (!hand || !body) throw new Error('!hand || !body')
+
+        new BodyControlor(body).RestoreHand(
+            hand.name == 'left_hand' ? 'left_hand' : 'right_hand',
+            handData
+        )
+    }
+    SaveGesture() {
+        const data = this.GetGesture()
+        if (!data) throw new Error('Failed to get gesture')
+        downloadJson(JSON.stringify(data), `gesture_${getCurrentTime()}.json`)
+    }
+
+    ClearScene() {
+        this.GetBodies().forEach((o) => o.removeFromParent())
+    }
+
+    CreateBodiesFromData(bodies: BodyData[]) {
+        return bodies.map((data) => {
+            const body = CloneBody()!
+            new BodyControlor(body).RestoreBody(data)
+            return body
+        })
+    }
+    RestoreCamera(data: CameraData, updateOrbitControl = true) {
+        this.camera.position.fromArray(data.position)
+        this.camera.rotation.fromArray(data.rotation as any)
+        this.camera.near = data.near
+        this.camera.far = data.far
+        this.camera.zoom = data.zoom
+        this.camera.updateProjectionMatrix()
+
+        if (data.target) this.orbitControls.target.fromArray(data.target)
+        if (updateOrbitControl) this.orbitControls.update() // fix position change
+    }
+    RestoreScene(rawData: string) {
+        try {
+            if (!rawData) return
+            const data = JSON.parse(rawData)
+
+            const {
+                version,
+                object: { bodies, camera },
+                setting,
+            } = data
+
+            const bodiesObject = this.CreateBodiesFromData(bodies)
+            this.ClearScene()
+
+            if (bodiesObject.length > 0) this.scene.add(...bodiesObject)
+            for (const body of bodiesObject) {
+                new BodyControlor(body).ResetAllTargetsPosition()
+            }
+            this.RestoreCamera(camera)
+        } catch (error: any) {
+            Oops(error)
+            console.error(error)
+        }
+    }
+    ResetScene() {
+        try {
+            this.ClearScene()
+            this.CopySelectedBody()
+            const body = this.getSelectedBody()
+            if (body) {
+                this.scene.add(body)
+                this.dlight.target = body
+            }
+        } catch (error: any) {
+            Oops(error)
+            console.error(error)
+        }
+    }
+    RestoreLastSavedScene() {
+        const rawData = localStorage.getItem('LastSceneData')
+        if (rawData) this.RestoreScene(rawData)
+    }
+    async LoadScene() {
+        const rawData = await uploadJson()
+        if (rawData) this.RestoreScene(rawData)
+    }
+
+    // drawPoseData(positions: THREE.Vector3[]) {
+    //     const objects: Record<
+    //         keyof typeof PartIndexMappingOfBlazePoseModel,
+    //         Object3D
+    //     > = Object.fromEntries(
+    //         Object.keys(PartIndexMappingOfBlazePoseModel).map((name) => {
+    //             const p = positions[PartIndexMappingOfBlazePoseModel[name]]
+    //             const material = new THREE.MeshBasicMaterial({
+    //                 color: 0xff0000,
+    //             })
+    //             const mesh = new THREE.Mesh(
+    //                 new THREE.SphereGeometry(1),
+    //                 material
+    //             )
+    //             mesh.position.copy(p)
+    //             this.scene.add(mesh)
+    //             return [name, mesh]
+    //         })
+    //     )
+
+    //     const CreateLink2 = (
+    //         startObject: THREE.Object3D,
+    //         endObject: THREE.Object3D
+    //     ) => {
+    //         const startPosition = startObject.position
+    //         const endPostion = endObject.position
+    //         const distance = startPosition.distanceTo(endPostion)
+
+    //         const material = new THREE.MeshBasicMaterial({
+    //             color: 0x666666,
+    //             opacity: 0.6,
+    //             transparent: true,
+    //         })
+    //         const mesh = new THREE.Mesh(new THREE.SphereGeometry(1), material)
+
+    //         // 将拉伸后的球体放在中点，并计算旋转轴和角度
+    //         const origin = startPosition
+    //             .clone()
+    //             .add(endPostion)
+    //             .multiplyScalar(0.5)
+    //         const v = endPostion.clone().sub(startPosition)
+    //         const unit = new THREE.Vector3(1, 0, 0)
+    //         const axis = unit.clone().cross(v)
+    //         const angle = unit.clone().angleTo(v)
+
+    //         mesh.scale.copy(new THREE.Vector3(distance / 2, 1, 1))
+    //         mesh.position.copy(origin)
+    //         mesh.setRotationFromAxisAngle(axis.normalize(), angle)
+    //         this.scene.add(mesh)
+    //     }
+
+    //     CreateLink2(objects['left_shoulder'], objects['left_elbow'])
+    //     CreateLink2(objects['left_elbow'], objects['left_wrist'])
+    //     CreateLink2(objects['left_hip'], objects['left_knee'])
+    //     CreateLink2(objects['left_knee'], objects['left_ankle'])
+    //     CreateLink2(objects['right_shoulder'], objects['right_elbow'])
+    //     CreateLink2(objects['right_elbow'], objects['right_wrist'])
+    //     CreateLink2(objects['right_hip'], objects['right_knee'])
+    //     CreateLink2(objects['right_knee'], objects['right_ankle'])
+
+    //     CreateLink2(objects['left_shoulder'], objects['right_shoulder'])
+    //     CreateLink2(objects['nose'], objects['right_eye'])
+    //     CreateLink2(objects['nose'], objects['left_eye'])
+    //     CreateLink2(objects['left_eye'], objects['left_ear'])
+
+    //     CreateLink2(objects['right_eye'], objects['right_ear'])
+    // }
+    async GetBodyToSetPose() {
+        const bodies = this.GetBodies()
+        const body = bodies.length == 1 ? bodies[0] : this.getSelectedBody()
+        return body
+    }
+    async SetPose(poseData: [number, number, number][]) {
+        const body = await this.GetBodyToSetPose()
+
+        if (!body) return
+
+        const controlor = new BodyControlor(body)
+        const old: BodyData = controlor.GetBodyData()
+        controlor.SetPose(poseData)
+        this.pushCommand(this.CreateAllTransformCommand(body, old))
+    }
+    async SetBlazePose(positions: [number, number, number][]) {
+        const body = await this.GetBodyToSetPose()
+        if (!body) return
+
+        const controlor = new BodyControlor(body)
+        const old: BodyData = controlor.GetBodyData()
+        controlor.SetBlazePose(positions)
+        this.pushCommand(this.CreateAllTransformCommand(body, old))
+    }
+
+    DetachTransfromControl() {
+        this.transformControl.detach()
+        this.triggerUnselectEvent()
+    }
+
+    cameraDataOfView?: CameraData
+    LockView() {
+        this.cameraDataOfView = this.GetCameraData()
+        this.LockViewEventManager.TriggerEvent(true)
+    }
+    UnlockView() {
+        this.cameraDataOfView = undefined
+        this.LockViewEventManager.TriggerEvent(false)
+    }
+    RestoreView() {
+        if (this.cameraDataOfView) this.RestoreCamera(this.cameraDataOfView)
+    }
+
+    changeView() {
+        if (this.cameraDataOfView) {
+            const old = this.GetCameraData()
+            this.RestoreCamera(this.cameraDataOfView, false)
+            return () => {
+                this.RestoreCamera(old)
+            }
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        return () => {}
+    }
+    getSelectedBone() {
+        const part = this.getSelectedPart()
+        const isSelectBone = part && IsBone(part.name)
+        return isSelectBone ? (part as Bone) : null
+    }
+    UpdateBones() {
+        const DEFAULT_COLOR = 0xff0000
+        const DEFAULT = 1
+        const SELECTED = 1
+        const SELECTED_COLOR = 0xeeee00
+        const ACTIVE = 1
+        const INACTIVE = 0.2
+
+        const setColor = (
+            bone: Bone,
+            opacity: number,
+            color = DEFAULT_COLOR
+        ) => {
+            const point = bone.children.find(
+                (o) => o instanceof THREE.Mesh && !IsMask(o.name)
+            ) as THREE.Mesh
+            if (point) {
+                const material = point.material as MeshBasicMaterial
+
+                material.color.set(color)
+                material.opacity = opacity
+                material.needsUpdate = true
+            }
+        }
+        const selectedBone = this.getSelectedBone()
+
+        this.traverseBones((bone) => {
+            setColor(bone, selectedBone ? INACTIVE : DEFAULT)
+        })
+
+        if (selectedBone) {
+            let bone = selectedBone
+
+            setColor(bone, SELECTED, SELECTED_COLOR)
+
+            bone.traverseAncestors((ancestor) => {
+                if (IsBone(ancestor.name)) {
+                    setColor(ancestor as Bone, ACTIVE)
+                }
+            })
+
+            for (;;) {
+                const child = bone.children.filter((o) => o instanceof Bone)
+                if (child.length !== 1) break
+                setColor(child[0] as Bone, ACTIVE)
+                bone = child[0] as Bone
+            }
+        }
+    }
+}

sd-webui-3d-open-pose-editor/src/entry.ts

@@ -0,0 +1,3 @@
+import { Main } from './environments/online/main'
+
+Main()

sd-webui-3d-open-pose-editor/src/env.d.ts

@@ -0,0 +1,3 @@
+interface ImportMetaEnv {
+    readonly VITE_IS_ONLINE?: boolean
+}

sd-webui-3d-open-pose-editor/src/environments/extension/@types/webui.d.ts

@@ -0,0 +1,6 @@
+declare const gradioApp: () => Document | ShadowRoot
+declare const switch_to_txt2img: () => void
+declare const switch_to_img2img: () => void
+declare const onUiLoaded: (callback: () => void) => void
+declare const onUiUpdate: (callback: () => void) => void
+declare const onUiTabChange: (callback: () => void) => void

sd-webui-3d-open-pose-editor/src/environments/extension/@types/window.d.ts

@@ -0,0 +1,25 @@
+interface Window {
+    openpose3d?: {
+        sendTxt2img: (
+            pose_image: string | null,
+            pose_target: string,
+            depth_image: string | null,
+            depth_target: string,
+            normal_image: string | null,
+            normal_target: string,
+            canny_image: string | null,
+            canny_target: string
+        ) => void
+        sendImg2img: (
+            pose_image: string,
+            pose_target: string,
+            depth_image: string,
+            depth_target: string,
+            normal_image: string,
+            normal_target: string,
+            canny_image: string,
+            canny_target: string
+        ) => void
+        downloadImage: (image: string | null, name: string) => void
+    }
+}

sd-webui-3d-open-pose-editor/src/environments/extension/assets.ts

@@ -0,0 +1,19 @@
+const files: Record<string, string> = {
+    'models/hand.fbx': '../models/hand.fbx',
+    'models/foot.fbx': '../models/foot.fbx',
+    'src/poses/data.bin': '../src/poses/data.bin',
+}
+
+try {
+    const params = new URLSearchParams(window.location.search)
+    const url = params.get('config')
+    if (url?.startsWith('/')) {
+        const response = await fetch(url)
+        const config = await response.json()
+        Object.assign(files, config['assets'])
+    }
+} catch (error) {
+    console.error(error)
+}
+
+export default files

sd-webui-3d-open-pose-editor/src/environments/extension/entry.ts

@@ -0,0 +1,217 @@
+import { getCurrentTime } from '../../utils/time'
+import { download } from '../../utils/transfer'
+import {
+    openGradioAccordion,
+    switchGradioTab,
+    updateGradioImage,
+    waitForElementToBeInDocument,
+} from './internal/gradio'
+import {
+    AddMessageEventListener,
+    InitMessageListener,
+    InvokeCommand,
+} from './internal/message'
+
+const isTabActive = () => {
+    const tab = gradioApp().querySelector<HTMLElement>('#tab_threedopenpose')
+    return tab && tab.style.display != 'none'
+}
+
+let isInitialized = false
+let isPaused = false
+
+onUiLoaded(async () => {
+    console.log('sd-webui-3d-open-pose-editor: onUiLoaded')
+
+    const sendToControlNet = async (
+        container: Element,
+        poseImage: string | null,
+        poseTarget: string,
+        depthImage: string | null,
+        depthTarget: string,
+        normalImage: string | null,
+        normalTarget: string,
+        cannyImage: string | null,
+        cannyTarget: string
+    ) => {
+        let element: Element | null | undefined =
+            container.querySelector('#controlnet')
+        if (!element) {
+            for (const spans of container.querySelectorAll<HTMLSpanElement>(
+                '.cursor-pointer > span'
+            )) {
+                if (!spans.textContent?.includes('ControlNet')) {
+                    continue
+                }
+                if (spans.textContent?.includes('M2M')) {
+                    continue
+                }
+                element = spans.parentElement?.parentElement
+            }
+            if (!element) {
+                console.error('ControlNet element not found')
+                return
+            }
+        } else {
+            openGradioAccordion(element)
+        }
+        await waitForElementToBeInDocument(element, 'div[data-testid="image"]')
+        const imageElems = element.querySelectorAll('div[data-testid="image"]')
+        const tabsElem = element.querySelector('.tab-nav')
+        if (poseImage && poseTarget != '' && poseTarget != '-') {
+            const tabIndex = Number(poseTarget)
+            if (tabsElem) {
+                switchGradioTab(tabsElem, tabIndex)
+            }
+            await updateGradioImage(imageElems[tabIndex], poseImage, 'pose.png')
+        }
+        if (depthImage && depthTarget != '' && depthTarget != '-') {
+            const tabIndex = Number(depthTarget)
+            if (tabsElem) {
+                switchGradioTab(tabsElem, tabIndex)
+            }
+            await updateGradioImage(
+                imageElems[tabIndex],
+                depthImage,
+                'depth.png'
+            )
+        }
+        if (normalImage && normalTarget != '' && normalTarget != '-') {
+            const tabIndex = Number(normalTarget)
+            if (tabsElem) {
+                switchGradioTab(tabsElem, tabIndex)
+            }
+            await updateGradioImage(
+                imageElems[tabIndex],
+                normalImage,
+                'normal.png'
+            )
+        }
+        if (cannyImage && cannyTarget != '' && cannyTarget != '-') {
+            const tabIndex = Number(cannyTarget)
+            if (tabsElem) {
+                switchGradioTab(tabsElem, tabIndex)
+            }
+            await updateGradioImage(
+                imageElems[tabIndex],
+                cannyImage,
+                'canny.png'
+            )
+        }
+    }
+
+    window.openpose3d = {
+        sendTxt2img: async (
+            poseImage: string | null,
+            poseTarget: string,
+            depthImage: string | null,
+            depthTarget: string,
+            normalImage: string | null,
+            normalTarget: string,
+            cannyImage: string | null,
+            cannyTarget: string
+        ) => {
+            const container = gradioApp().querySelector(
+                '#txt2img_script_container'
+            )!
+            switch_to_txt2img()
+            await sendToControlNet(
+                container,
+                poseImage,
+                poseTarget,
+                depthImage,
+                depthTarget,
+                normalImage,
+                normalTarget,
+                cannyImage,
+                cannyTarget
+            )
+        },
+        sendImg2img: async (
+            poseImage: string,
+            poseTarget: string,
+            depthImage: string,
+            depthTarget: string,
+            normalImage: string,
+            normalTarget: string,
+            cannyImage: string,
+            cannyTarget: string
+        ) => {
+            const container = gradioApp().querySelector(
+                '#img2img_script_container'
+            )!
+            switch_to_img2img()
+            await sendToControlNet(
+                container,
+                poseImage,
+                poseTarget,
+                depthImage,
+                depthTarget,
+                normalImage,
+                normalTarget,
+                cannyImage,
+                cannyTarget
+            )
+        },
+        downloadImage: (image: string | null, name: string) => {
+            if (!image) {
+                return
+            }
+            const fileName = name + '_' + getCurrentTime() + '.png'
+            download(image, fileName)
+        },
+    }
+
+    InitMessageListener()
+    AddMessageEventListener({
+        MakeImages: async (args: Record<string, string>) => {
+            for (const [name, url] of Object.entries(args)) {
+                const element = gradioApp().querySelector(
+                    `#openpose3d_${name}_image`
+                )!
+                await updateGradioImage(element, url, name + '.png')
+            }
+            const tabs = gradioApp().querySelector('#openpose3d_main')!
+            switchGradioTab(tabs, 1)
+        },
+    })
+
+    for (let i = 0; i < 30; ++i) {
+        try {
+            await InvokeCommand('GetAppVersion')
+            isInitialized = true
+            break
+        } catch (error: any) {
+            if (error.status != 'Timeout') {
+                throw error
+            }
+        }
+    }
+    if (!isInitialized) {
+        console.error('sd-webui-3d-open-pose-editor: Timeout')
+        return
+    }
+
+    // await InvokeCommand('OutputWidth', 512)
+    // await InvokeCommand('OutputHeight', 512)
+    if (!isTabActive()) {
+        await InvokeCommand('Pause')
+    }
+})
+
+onUiUpdate(async () => {
+    if (!isInitialized) {
+        return
+    }
+    if (isTabActive()) {
+        if (isPaused) {
+            isPaused = false
+            await InvokeCommand('Resume')
+        }
+    } else {
+        if (!isPaused) {
+            isPaused = true
+            await InvokeCommand('Pause')
+        }
+    }
+})

sd-webui-3d-open-pose-editor/src/environments/extension/internal/gradio.ts

@@ -0,0 +1,78 @@
+const waitForElement = async (
+    parent: Element,
+    selector: string,
+    exist: boolean
+) => {
+    return new Promise((resolve) => {
+        const observer = new MutationObserver(() => {
+            if (!!parent.querySelector(selector) != exist) {
+                return
+            }
+            observer.disconnect()
+            resolve(undefined)
+        })
+
+        observer.observe(parent, {
+            childList: true,
+            subtree: true,
+        })
+
+        if (!!parent.querySelector(selector) == exist) {
+            resolve(undefined)
+        }
+    })
+}
+
+const timeout = (ms: number) => {
+    return new Promise(function (resolve, reject) {
+        setTimeout(() => reject('Timeout'), ms)
+    })
+}
+
+export const waitForElementToBeInDocument = (
+    parent: Element,
+    selector: string
+) => Promise.race([waitForElement(parent, selector, true), timeout(10000)])
+export const waitForElementToBeRemoved = (parent: Element, selector: string) =>
+    Promise.race([waitForElement(parent, selector, false), timeout(10000)])
+
+export const updateGradioImage = async (
+    element: Element,
+    url: string,
+    name: string
+) => {
+    const blob = await (await fetch(url)).blob()
+    const file = new File([blob], name)
+    const dt = new DataTransfer()
+    dt.items.add(file)
+
+    element
+        .querySelector<HTMLButtonElement>("button[aria-label='Clear']")
+        ?.click()
+    await waitForElementToBeRemoved(element, "button[aria-label='Clear']")
+    const input = element.querySelector<HTMLInputElement>("input[type='file']")!
+    input.value = ''
+    input.files = dt.files
+    input.dispatchEvent(
+        new Event('change', {
+            bubbles: true,
+            composed: true,
+        })
+    )
+    await waitForElementToBeInDocument(element, "button[aria-label='Clear']")
+}
+
+export const switchGradioTab = (element: Element, index: number) => {
+    element.querySelectorAll('button')[index].click()
+}
+
+export const openGradioAccordion = (element: Element) => {
+    const labelElem = element.querySelector<HTMLElement>(':scope > .label-wrap')
+    if (!labelElem) {
+        return
+    }
+    if (labelElem.classList.contains('open')) {
+        return
+    }
+    labelElem.click()
+}

sd-webui-3d-open-pose-editor/src/environments/extension/internal/message.ts

@@ -0,0 +1,62 @@
+import { IPostMessage as IPostMessageBase } from '../../../hooks/useMessageDispatch'
+
+export type IPostMessage = IPostMessageBase & {
+    cmd: string
+}
+
+const poseMessage = (message: IPostMessage) => {
+    const iframe =
+        gradioApp().querySelector<HTMLIFrameElement>('#openpose3d_iframe')!
+    iframe.contentWindow!.postMessage(message, '*')
+}
+
+const MessageReturnHandler: Record<string, (arg: any) => void> = {}
+const MessageEventHandler: Record<string, (arg: any) => void> = {}
+
+export const InitMessageListener = () => {
+    window.addEventListener('message', (event: MessageEvent<IPostMessage>) => {
+        const { data } = event
+        if (data && data.cmd && data.cmd == 'openpose-3d' && data.method) {
+            const method = data.method
+            console.log('Method', method, event)
+            if (data.type == 'return') {
+                MessageReturnHandler[method]?.(data.payload)
+            } else if (data.type == 'event') {
+                console.log(MessageEventHandler)
+                MessageEventHandler[method]?.(data.payload)
+            }
+        }
+    })
+}
+
+export const AddMessageEventListener = (
+    listeners: Record<string, (arg: any) => void>
+) => {
+    Object.assign(MessageEventHandler, listeners)
+}
+
+export function InvokeCommand(method: string, ...args: any[]) {
+    return new Promise((resolve, reject) => {
+        const id = setTimeout(() => {
+            delete MessageReturnHandler[method]
+
+            reject({
+                method,
+                status: 'Timeout',
+            })
+        }, 1000)
+
+        const onReutrn = (arg: any) => {
+            clearTimeout(id)
+            resolve(arg)
+        }
+        MessageReturnHandler[method] = onReutrn
+
+        poseMessage({
+            cmd: 'openpose-3d',
+            method,
+            type: 'call',
+            payload: args,
+        })
+    })
+}

sd-webui-3d-open-pose-editor/src/environments/online/App.module.css

@@ -0,0 +1,42 @@
+.app {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+
+.threejsCanvas {
+    display: block;
+    width: 100vw;
+    height: 100vh;
+}
+
+.gallery {
+    user-select: none;
+    height: 140px;
+    position: fixed;
+    bottom: 50px;
+    right: 50px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.gallery img {
+    width: 100px;
+    height: 140px;
+    object-fit: contain;
+    background-color: gray;
+    user-select: none;
+    margin-right: 2px;
+    margin-left: 2px;
+}
+
+.background {
+    width: 100vw;
+    height: 100vh;
+    background-color: rgb(214, 214, 214);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+}

sd-webui-3d-open-pose-editor/src/environments/online/App.tsx

@@ -0,0 +1,284 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { download } from '../../utils/transfer'
+import classes from './App.module.css'
+import Menu from '../../components/Menu'
+import PopupOver from '../../components/PopupOver'
+import { useBodyEditor } from '../../hooks'
+import {
+    LockClosedIcon,
+    LockOpen2Icon,
+    ResetIcon,
+    ResumeIcon,
+} from '@radix-ui/react-icons'
+import { getCurrentTime } from '../../utils/time'
+import useMessageDispatch from '../../hooks/useMessageDispatch'
+
+const { app, threejsCanvas, gallery, background } = classes
+
+const PreviewCanvas = React.forwardRef<
+    HTMLCanvasElement,
+    {
+        isLock: boolean
+        enable: boolean
+        onChange: (isLock: boolean) => void
+        onRestore: () => void
+        onRun: () => void
+    }
+>(({ isLock, enable, onChange, onRestore, onRun }, ref) => {
+    const Icon = isLock ? LockClosedIcon : LockOpen2Icon
+    return (
+        <div
+            style={{
+                position: 'relative',
+                display: enable ? 'flex' : 'none',
+                justifyContent: 'center',
+                backgroundColor: 'gray',
+            }}
+        >
+            <canvas
+                ref={ref}
+                style={{
+                    objectFit: 'contain',
+                    width: 'unset',
+                    // height:"unset",
+                    maxHeight: '100%',
+                    maxWidth: 300,
+                }}
+            ></canvas>
+            <ResumeIcon
+                style={{
+                    position: 'absolute',
+                    top: -10,
+                    right: 5,
+                    backgroundColor: 'white',
+                    borderRadius: 10,
+                    padding: 5,
+                }}
+                onClick={() => {
+                    onRun()
+                }}
+            ></ResumeIcon>
+            <Icon
+                style={{
+                    position: 'absolute',
+                    top: 20,
+                    right: 5,
+                    backgroundColor: 'white',
+                    borderRadius: 10,
+                    padding: 5,
+                }}
+                onClick={() => {
+                    onChange(!isLock)
+                }}
+            ></Icon>
+
+            <ResetIcon
+                style={{
+                    position: 'absolute',
+                    top: 50,
+                    right: 5,
+                    backgroundColor: !isLock ? 'gray' : 'white',
+                    borderRadius: 10,
+                    padding: 5,
+                }}
+                onClick={() => {
+                    if (isLock) onRestore()
+                }}
+            ></ResetIcon>
+        </div>
+    )
+})
+
+function App() {
+    const canvasRef = useRef(null)
+    const previewCanvasRef = useRef(null)
+
+    const backgroundRef = useRef<HTMLDivElement>(null)
+    const editor = useBodyEditor(canvasRef, previewCanvasRef, backgroundRef)
+    const [imageData, setImageData] = useState<
+        Record<string, { title: string; src: string }>
+    >(() => ({
+        pose: {
+            title: '',
+            src: '',
+        },
+        depth: {
+            title: '',
+            src: '',
+        },
+        normal: {
+            title: '',
+            src: '',
+        },
+        canny: {
+            title: '',
+            src: '',
+        },
+    }))
+
+    const onChangeBackground = useCallback((url: string) => {
+        const div = backgroundRef.current
+        if (div) {
+            div.style.backgroundImage = url ? `url(${url})` : 'none'
+        }
+    }, [])
+
+    const onScreenShot = useCallback(
+        (data: Record<string, { src: string; title: string }>) => {
+            setImageData(data)
+        },
+        []
+    )
+
+    const [preview, setPreivew] = useState(false)
+    const [lockView, setLockView] = useState(false)
+
+    useEffect(() => {
+        const preview = (enable: boolean) => {
+            setPreivew(enable)
+        }
+
+        const lcokView = (value: boolean) => {
+            setLockView(value)
+        }
+        editor?.PreviewEventManager.AddEventListener(preview)
+        editor?.LockViewEventManager.AddEventListener(lcokView)
+
+        return () => {
+            editor?.PreviewEventManager.RemoveEventListener(preview)
+            editor?.LockViewEventManager.RemoveEventListener(lcokView)
+        }
+    }, [editor])
+
+    useMessageDispatch({
+        GetAppVersion: () => __APP_VERSION__,
+        MakeImages: () => editor?.MakeImages(),
+        Pause: () => editor?.pause(),
+        Resume: () => editor?.resume(),
+        OutputWidth: (value: number) => {
+            if (editor && typeof value === 'number') {
+                editor.OutputWidth = value
+                return true
+            } else return false
+        },
+        OutputHeight: (value: number) => {
+            if (editor && typeof value === 'number') {
+                editor.OutputHeight = value
+                return true
+            } else return false
+        },
+        OnlyHand(value: boolean) {
+            if (editor && typeof value === 'boolean') {
+                editor.OnlyHand = value
+                return true
+            } else return false
+        },
+        MoveMode(value: boolean) {
+            if (editor && typeof value === 'boolean') {
+                editor.MoveMode = value
+                return true
+            } else return false
+        },
+        GetWidth: () => editor?.Width,
+        GetHeight: () => editor?.Height,
+        GetSceneData: () => editor?.GetSceneData(),
+        LockView: () => editor?.LockView(),
+        UnlockView: () => editor?.UnlockView(),
+        RestoreView: () => editor?.RestoreView(),
+    })
+
+    return (
+        <div ref={backgroundRef} className={background}>
+            <canvas
+                className={threejsCanvas}
+                tabIndex={-1}
+                ref={canvasRef}
+                onContextMenu={(e) => {
+                    e.preventDefault()
+                }}
+            ></canvas>
+            <div className={gallery}>
+                <PreviewCanvas
+                    enable={preview}
+                    ref={previewCanvasRef}
+                    isLock={lockView}
+                    onChange={(isLock) => {
+                        if (isLock) {
+                            editor?.LockView()
+                        } else {
+                            editor?.UnlockView()
+                        }
+                    }}
+                    onRestore={() => {
+                        editor?.RestoreView()
+                    }}
+                    onRun={async () => {
+                        if (!editor) return
+                        const image = editor.MakeImages()
+                        const result = Object.fromEntries(
+                            Object.entries(image).map(([name, imgData]) => [
+                                name,
+                                {
+                                    src: imgData,
+                                    title: name + '_' + getCurrentTime(),
+                                },
+                            ])
+                        )
+                        onScreenShot(result)
+                    }}
+                ></PreviewCanvas>
+
+                {Object.entries(imageData).map(([name, { src, title }]) => (
+                    <img
+                        key={name}
+                        // avoid show error image
+                        {...(src ? { src } : {})}
+                        title={title}
+                        onClick={(e) => {
+                            const image = e.target as HTMLImageElement
+                            const title = image?.getAttribute('title') ?? ''
+                            const url = image?.getAttribute('src') ?? ''
+                            download(url, title)
+                        }}
+                    ></img>
+                ))}
+            </div>
+            <div
+                className={app}
+                style={{
+                    pointerEvents: 'none',
+                }}
+            >
+                <div
+                    style={{
+                        pointerEvents: 'initial',
+                        marginTop: 10,
+                        display: 'flex',
+                        justifyContent: 'center',
+                    }}
+                >
+                    {editor ? (
+                        <Menu
+                            editor={editor}
+                            onChangeBackground={onChangeBackground}
+                            onScreenShot={onScreenShot}
+                        />
+                    ) : undefined}
+                </div>
+            </div>
+            {editor ? (
+                <PopupOver
+                    editor={editor}
+                    style={{
+                        pointerEvents: 'initial',
+                        position: 'fixed',
+                        top: 10,
+                        right: 10,
+                    }}
+                ></PopupOver>
+            ) : undefined}
+        </div>
+    )
+}
+
+export default App

sd-webui-3d-open-pose-editor/src/environments/online/helper.ts

@@ -0,0 +1,208 @@
+import { getImage } from '../../utils/image'
+import {
+    CopyTextToClipboard,
+    uploadImage,
+    uploadJson,
+} from '../../utils/transfer'
+import { DetectPosefromImage } from '../../utils/detect'
+
+import { BodyControlor } from '../../body'
+
+import { GetLoading } from '../../components/Loading'
+import { BodyEditor } from '../../editor'
+import i18n from '../../i18n'
+import { Oops } from '../../components/Oops'
+import assets from '../../assets'
+import { ShowToast } from '../../components/Toast'
+import { GetRandomPose, LoadPosesLibrary } from '../../pose-library'
+
+export class Helper {
+    editor: BodyEditor
+    constructor(editor: BodyEditor) {
+        this.editor = editor
+    }
+
+    async DetectFromImage(onChangeBackground: (url: string) => void) {
+        const body = await this.editor.GetBodyToSetPose()
+        if (!body) {
+            ShowToast({ title: i18n.t('Please select a skeleton!!') })
+            return
+        }
+
+        const loading = GetLoading(500)
+
+        try {
+            const dataUrl = await uploadImage()
+
+            if (!dataUrl) return
+
+            const image = await getImage(dataUrl)
+            onChangeBackground(dataUrl)
+
+            loading.show({ title: i18n.t('Downloading MediaPipe Pose Model') })
+            const result = await DetectPosefromImage(image)
+            loading.hide()
+
+            if (result) {
+                if (!result.poseWorldLandmarks)
+                    throw new Error(JSON.stringify(result))
+
+                const positions: [number, number, number][] =
+                    result.poseWorldLandmarks.map(({ x, y, z }) => [
+                        x * 100,
+                        -y * 100,
+                        -z * 100,
+                    ])
+
+                // this.drawPoseData(
+                //     result.poseWorldLandmarks.map(({ x, y, z }) =>
+                //         new THREE.Vector3().fromArray([x * 100, -y * 100, -z * 100])
+                //     )
+                // )
+
+                await this.editor.SetBlazePose(positions)
+                return
+            }
+        } catch (error) {
+            loading.hide()
+
+            Oops(
+                i18n.t(
+                    'If you try to detect anime characters, you may get an error. Please try again with photos.'
+                ) +
+                    '\n' +
+                    error
+            )
+            console.error(error)
+            return null
+        }
+    }
+
+    async CopyKeypointToClipboard() {
+        const body = await this.editor.GetBodyToSetPose()
+        if (!body) {
+            ShowToast({ title: i18n.t('Please select a skeleton!!') })
+            return
+        }
+        try {
+            const data = new BodyControlor(body).Get18keyPointsData()
+            await CopyTextToClipboard(JSON.stringify(data, null, 4))
+            ShowToast({ title: i18n.t('Copied to Clipboard') })
+        } catch (error) {
+            Oops(error)
+            console.error(error)
+            return null
+        }
+    }
+
+    async SaveGesture() {
+        const hand = await this.editor.getSelectedHand()
+        if (!hand) {
+            ShowToast({ title: i18n.t('Please select a hand!!') })
+            return
+        }
+        try {
+            this.editor.SaveGesture()
+        } catch (error) {
+            Oops(error)
+            console.error(error)
+            return null
+        }
+    }
+
+    async LoadGesture() {
+        const hand = await this.editor.getSelectedHand()
+
+        if (!hand) {
+            ShowToast({ title: i18n.t('Please select a hand!!') })
+            return
+        }
+
+        const rawData = await uploadJson()
+        if (!rawData) return
+
+        try {
+            this.editor.RestoreGesture(rawData)
+        } catch (error) {
+            Oops(error)
+            console.error(error)
+            return null
+        }
+    }
+
+    async GenerateSceneURL() {
+        try {
+            const d = encodeURIComponent(
+                JSON.stringify(this.editor.GetSceneData())
+            )
+            const url_base = location.href.replace(/#$/, '')
+            const url = `${url_base}#${d}`
+            await CopyTextToClipboard(url)
+            ShowToast({ title: i18n.t('Copied to Clipboard') })
+        } catch (error) {
+            Oops(error)
+            console.error(error)
+        }
+    }
+
+    async SetRandomPose() {
+        const body = await this.editor.GetBodyToSetPose()
+        if (!body) {
+            ShowToast({ title: i18n.t('Please select a skeleton!!') })
+            return
+        }
+
+        const loading = GetLoading(500)
+
+        try {
+            let poseData = GetRandomPose()
+            if (poseData) {
+                await this.editor.SetPose(poseData)
+                return
+            }
+
+            loading.show({ title: i18n.t('Downloading Poses Library') })
+
+            await LoadPosesLibrary(assets['src/poses/data.bin'])
+            loading.hide()
+
+            poseData = GetRandomPose()
+            if (poseData) {
+                await this.editor.SetPose(poseData)
+                return
+            }
+        } catch (error) {
+            loading.hide()
+
+            Oops(error)
+            console.error(error)
+            return
+        }
+    }
+    async CopySkeleton() {
+        const body = this.editor.getSelectedBody()
+        if (!body) {
+            ShowToast({ title: i18n.t('Please select a skeleton!!') })
+            return
+        }
+
+        this.editor.CopySelectedBody()
+    }
+    async RemoveSkeleton() {
+        const body = this.editor.getSelectedBody()
+        if (!body) {
+            ShowToast({ title: i18n.t('Please select a skeleton!!') })
+            return
+        }
+
+        this.editor.RemoveBody()
+    }
+    FeedbackByQQ() {
+        window.open('https://jq.qq.com/?_wv=1027&k=N6j4nigd')
+    }
+    FeedbackByGithub() {
+        window.open(
+            'https://github.com/nonnonstop/sd-webui-3d-open-pose-editor/issues/new/choose'
+        )
+    }
+}

sd-webui-3d-open-pose-editor/src/environments/online/index.css

@@ -0,0 +1,21 @@
+:root {
+    --openpose-editor-font-family: -apple-system, BlinkMacSystemFont, Tahoma,
+        Arial, 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    outline: none;
+}
+
+body,
+#root {
+    width: 100vw;
+    height: 100vh;
+    position: relative;
+}
+
+#root * {
+    font-family: var(--openpose-editor-font-family);
+}

sd-webui-3d-open-pose-editor/src/environments/online/init.ts

@@ -0,0 +1,8 @@
+import dayjs from 'dayjs'
+console.log(
+    __APP_VERSION__ +
+        '  ' +
+        dayjs(__APP_BUILD_TIME__).format('YYYY-MM-DD HH:mm:ss')
+)
+import { PWACheck } from './update'
+PWACheck()

sd-webui-3d-open-pose-editor/src/environments/online/main.tsx

@@ -0,0 +1,18 @@
+import './init'
+import './index.css'
+
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import NiceModal from '@ebay/nice-modal-react'
+
+import App from './App'
+
+export function Main() {
+    ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+        <React.StrictMode>
+            <NiceModal.Provider>
+                <App />
+            </NiceModal.Provider>
+        </React.StrictMode>
+    )
+}

sd-webui-3d-open-pose-editor/src/environments/online/update.ts

@@ -0,0 +1,31 @@
+/// <reference types="vite-plugin-pwa/client" />
+
+// #v-ifdef VITE_IS_ONLINE
+import { registerSW } from 'virtual:pwa-register'
+// #v-endif
+
+import { ShowDialog } from '../../components/Dialog'
+import i18n from '../../i18n'
+
+async function PWAPopup(update: (reloadPage?: boolean) => Promise<void>) {
+    const result = await ShowDialog({
+        title: i18n.t('Updates are available, please confirm!!') ?? '',
+        button: i18n.t('Update') ?? '',
+    })
+
+    if (result === 'action') {
+        update(true)
+    }
+}
+export function PWACheck() {
+    if (import.meta.env.MODE !== 'online') return
+    const updateSW = registerSW({
+        onNeedRefresh() {
+            console.log('有更新，需要刷新！！')
+            PWAPopup(updateSW)
+        },
+        onOfflineReady() {
+            console.log('已经入离线模式！！')
+        },
+    })
+}

sd-webui-3d-open-pose-editor/src/hooks/index.ts

@@ -0,0 +1,90 @@
+import { RefObject, useEffect, useState } from 'react'
+import assets from '../assets'
+import { CreateTemplateBody } from '../body'
+import { GetLoading } from '../components/Loading'
+import { BodyEditor } from '../editor'
+import i18n, { LanguageMapping } from '../i18n'
+import { LoadFoot, LoadHand } from '../models'
+
+export async function LoadBodyData() {
+    const loading = GetLoading(500)
+    loading.show({ title: i18n.t('Downloading Hand Model') })
+    await LoadHand(assets['models/hand.fbx'])
+    loading.show({ title: i18n.t('Downloading Foot Model') })
+    await LoadFoot(assets['models/foot.fbx'])
+    loading.hide()
+    CreateTemplateBody()
+}
+
+export function useBodyEditor(
+    canvasRef: RefObject<HTMLCanvasElement>,
+    previewCanvasRef: RefObject<HTMLCanvasElement>,
+    parent?: RefObject<HTMLDivElement>
+) {
+    const [editor, setEditor] = useState<BodyEditor>()
+
+    useEffect(() => {
+        const canvas = canvasRef.current
+        if (!canvas) return
+        const previewCanvas = previewCanvasRef.current
+        if (!previewCanvas) return
+        console.warn('create editor')
+
+        let editor: BodyEditor | null = new BodyEditor({
+            canvas,
+            previewCanvas,
+            parentElem: parent?.current ?? (document as any),
+            statsElem: import.meta.env.DEV ? document.body : undefined,
+        })
+
+        setEditor(editor)
+
+        const init = async () => {
+            // StrictMode will render twice
+            // we have to check if the editor is null to avoid meaningless operations
+            if (editor) {
+                await LoadBodyData()
+                editor?.ResetScene()
+                if (editor?.RestoreScene && location.hash) {
+                    const rawData = decodeURIComponent(
+                        location.hash.replace(/^#/, '')
+                    )
+                    editor?.RestoreScene(rawData)
+                    location.hash = ''
+                }
+            }
+        }
+        init()
+
+        return () => {
+            console.warn('disponse')
+            editor?.disponse()
+            editor = null
+        }
+    }, [])
+
+    return editor
+}
+
+export function useLanguageSelect() {
+    const [current] = useState(
+        () => LanguageMapping[i18n.language] ?? 'English'
+    )
+    const [R_LanguageMapping] = useState(() =>
+        Object.fromEntries(
+            Object.entries(LanguageMapping).map(([k, v]) => [v, k])
+        )
+    )
+
+    return {
+        current,
+        languagList: [...Object.values(LanguageMapping)],
+        changeLanguage: (value: string) => {
+            const lng = R_LanguageMapping[value]
+            const url = new URL(window.location.href)
+
+            url.searchParams.set('lng', lng)
+            window.location.assign(url)
+        },
+    }
+}

sd-webui-3d-open-pose-editor/src/hooks/useEventCall.ts

@@ -0,0 +1,22 @@
+// https://github.com/Volune/use-event-callback/blob/master/src/index.ts
+
+import { useLayoutEffect, useMemo, useRef } from 'react'
+
+type Fn<ARGS extends any[], R> = (...args: ARGS) => R
+
+const useEventCallback = <A extends any[], R>(fn: Fn<A, R>): Fn<A, R> => {
+    const ref = useRef<Fn<A, R>>(fn)
+    useLayoutEffect(() => {
+        ref.current = fn
+    })
+    return useMemo(
+        () =>
+            (...args: A): R => {
+                const { current } = ref
+                return current(...args)
+            },
+        []
+    )
+}
+
+export default useEventCallback

sd-webui-3d-open-pose-editor/src/hooks/useFoceUpdate.ts

@@ -0,0 +1,11 @@
+import { useCallback, useState } from 'react'
+
+const createNewObject = (): Record<string, never> => ({})
+
+export default function useForceUpdate(): VoidFunction {
+    const [, setValue] = useState<Record<string, never>>(createNewObject)
+
+    return useCallback((): void => {
+        setValue(createNewObject())
+    }, [])
+}

sd-webui-3d-open-pose-editor/src/hooks/useMessageDispatch.ts

@@ -0,0 +1,124 @@
+// https://github.com/rottitime/react-hook-window-message-event/blob/main/src/useMessage.ts
+
+import { useEffect, useRef } from 'react'
+import useEventCallback from './useEventCall'
+
+let SEND_TO_SENDER = false // Avoid duplicate event
+
+export type IPostMessage = {
+    method: string
+    type: 'call' | 'return' | 'event'
+    payload: any
+}
+
+export type EventHandler = (
+    callback: (data: IPostMessage) => unknown,
+    payload: IPostMessage['payload']
+) => void
+
+const postMessage = (
+    data: IPostMessage & {
+        cmd?: string // Just avoid webui exception
+    },
+    target: MessageEvent['source'],
+    origin = '*'
+) => {
+    console.log('return', { target, origin, data })
+    target?.postMessage(
+        { cmd: 'openpose-3d', ...data },
+        { targetOrigin: origin }
+    )
+}
+
+export const sendToParent = (data: IPostMessage) => {
+    if (SEND_TO_SENDER) return
+    const { parent } = window
+    if (!parent) throw new Error('Parent window has closed')
+    postMessage(data, parent)
+}
+
+export const sendToParentDirectly = (data: IPostMessage) => {
+    const { parent } = window
+    if (!parent) throw new Error('Parent window has closed')
+    postMessage(data, parent)
+}
+
+export const sendToOpener = (data: IPostMessage) => {
+    const { opener } = window
+    if (!opener) throw new Error('Opener window has closed')
+    postMessage(data, opener)
+}
+
+export const sendToAll = (data: IPostMessage) => {
+    if (SEND_TO_SENDER) return
+    const { opener, parent } = window
+    if (!opener && !parent) {
+        throw new Error('window has closed')
+    }
+    if (parent) sendToParent(data)
+    if (opener) sendToOpener(data)
+}
+
+export default function useMessageDispatch(
+    dispatch: Record<string, (...args: any[]) => any>
+) {
+    const originRef = useRef<string>()
+    const sourceRef = useRef<MessageEvent['source']>(null)
+
+    originRef.current = ''
+    sourceRef.current = null as MessageEvent['source']
+
+    const sendToSender = (data: IPostMessage) =>
+        postMessage(data, sourceRef.current, originRef.current)
+
+    const onWatchEventHandler = useEventCallback(
+        // tslint:disable-next-line: no-shadowed-variable
+        async ({ origin, source, data }: MessageEvent) => {
+            if (!data) return
+
+            const { method, payload, type } = data as IPostMessage
+            // It is invalid message, not from webui extension.
+            if (type != 'call') return
+
+            console.log('method', method, payload)
+
+            if (payload && Array.isArray(payload) === false) {
+                console.error('payload is not array')
+                return
+            }
+
+            sourceRef.current = source
+            originRef.current = origin
+
+            if (method in dispatch) {
+                const eventHandler = dispatch[method]
+                if (typeof eventHandler === 'function') {
+                    SEND_TO_SENDER = true
+                    const ret = eventHandler(...(payload ?? []))
+                    const value = ret instanceof Promise ? await ret : ret
+                    try {
+                        sendToSender({
+                            method,
+                            type: 'return',
+                            payload: value,
+                        })
+                    } catch (error) {
+                        console.log(error)
+                    }
+                    SEND_TO_SENDER = false
+                }
+            } else if (method === 'GetAPIs') {
+                sendToSender({
+                    method,
+                    type: 'return',
+                    payload: Object.keys(dispatch),
+                })
+            }
+        }
+    )
+
+    useEffect(() => {
+        window.addEventListener('message', onWatchEventHandler)
+        return () => window.removeEventListener('message', onWatchEventHandler)
+    }, [onWatchEventHandler])
+}