79f7d96db0c1df3965cb33202ee30d555cd753587788e61945460e5a2f55cd2a

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

@@ -0,0 +1,58 @@
+import i18next from 'i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import commonEn from './locales/en.json'
+import commonZh_CN from './locales/zh-CN.json'
+import commonZh_TW from './locales/zh-TW.json'
+import commonZh_HK from './locales/zh-HK.json'
+import commonJa_JP from './locales/ja.json'
+import commonDe from './locales/de.json'
+import commonSp from './locales/sp.json'
+
+export const resources = {
+    en: { common: commonEn },
+    zh: { common: commonZh_CN },
+    'zh-TW': { common: commonZh_TW },
+    'zh-HK': { common: commonZh_HK },
+    ja: { common: commonJa_JP },
+    de: { common: commonDe },
+    sp: { common: commonSp },
+}
+
+export const LanguageMapping: Record<string, string> = {
+    en: 'English',
+    zh: '简体中文',
+    'zh-TW': '繁體中文（台灣）',
+    'zh-HK': '繁體中文（香港）',
+    ja: '日本語',
+    de: 'Deutsch',
+    sp: 'español',
+}
+
+const options = {
+    order: ['querystring', 'localStorage', 'navigator'],
+    lookupQuerystring: 'lng',
+}
+
+i18next.use(LanguageDetector).init({
+    // lng: 'en', // if you're using a language detector, do not define the lng option
+    detection: options,
+    fallbackLng: 'en',
+    debug: true,
+    ns: ['common'],
+    defaultNS: 'common',
+    supportedLngs: Object.keys(resources),
+    interpolation: {
+        escapeValue: false,
+    },
+    resources: resources,
+})
+
+export function IsChina() {
+    return (
+        i18next.language === 'zh-CN' ||
+        window.navigator.language === 'zh-CN' ||
+        window.navigator.language?.includes('zh-CN')
+    )
+}
+
+export default i18next

sd-webui-3d-open-pose-editor/src/locales/de.json

@@ -0,0 +1,71 @@
+{
+    "Width": "Breite",
+    "Height": "Höhe",
+    "Generate Skeleton/Depth/Normal/Canny Map": "Knochenbau/Depth/Normale/Canny Bilder generieren",
+    "Duplicate Skeleton": "Knochenbau kopieren",
+    "Delete Skeleton": "Knochenbau löschen",
+    "Move Mode": "Verschiebungsmode",
+    "Show Edge Map": "Randbild zeigen",
+    "Camera Near": "Kamera näher schieben",
+    "Camera Far": "Kamera weiter ziehen",
+    "Camera Focal Length": "Brennweite",
+    "Downloading Hand Model": "Hand Modell herunterladen",
+    "Updates are available, please confirm!!": "Bestätigen Sie die Aktualisierung!",
+    "Select a scene file": "Wählen Sie eine Szene",
+    "Oops...": "Oops...",
+    "Something went wrong!": "Irgendwas hat schief gelaufen!",
+    "If the problem persists, please click here to ask a question.": "Bitte melden Sie hier, um Frage zu stellen.",
+    "Save Scene": "Szene speichern",
+    "Load Scene": "Szene laden",
+    "Restore Last Scene": "Szene wiederherstellen",
+    "Set Background Image": "Hintergrundbild laden",
+    "Select an image": "Wählen Sie ein Bild",
+    "Body Parameters": "Körper Parameter",
+    "Shoulder Width": "Schulterbreite",
+    "Shoulder To Hip": "Von Schulter zu Gesäß",
+    "Arm Length": "Armlänge",
+    "Forearm": "Unterarm",
+    "Upper Arm": "Oberarm",
+    "Hand Size": "Handgröße",
+    "Hips": "Gesäß",
+    "Leg Length": "Beinlänge",
+    "Thigh": "Oberschenkel",
+    "Lower Leg": "Unterschenkel",
+    "Nose To Neck": "Von Nase zu Hals",
+    "Head Size": "Kopfgröße",
+    "Show Preview": "Überblick zeigen",
+    "Only Hand": "Nur Hände",
+    "Foot Size": "Fußgröße",
+    "Downloading Foot Model": "Fuß Modell herunterladen",
+    "Please select a skeleton!!": "Wählen Sie einen Knochenbau!",
+    "Downloading Poses Library": "Pose Bibliothek herunterladen",
+    "Set Random Pose": "zufällige Pose",
+    "Redo": "Redo",
+    "Undo": "Undo",
+    "Detect From Image": "Knochenbau von Bild erkennen",
+    "Downloading MediaPipe Pose Model": "MediaPipe Pose Modell herunterladen",
+    "Edit": "bearbeiten",
+    "Setting": "Einstellungen",
+    "Bone Thickness": "Dicke des Knochens",
+    "Feedback": "Problem melden",
+    "View": "Ansicht",
+    "Fix View": "Ansicht fixieren",
+    "Restore View": "Ansicht wiederherstellen",
+    "Free Mode": "Freier Modus",
+    "Del": "Entf",
+    "File": "Datei",
+    "Generate": "Generieren",
+    "Close": "Schließen",
+    "Update": "Aktualisieren",
+    "Lock View": "Ansicht sperren",
+    "Unlock View": "Ansicht entsperren",
+    "Copy Keypoint Data": "Schlüsselpunktdaten kopieren",
+    "Copied to Clipboard": "In die Zwischenablage kopiert",
+    "Generate Scene URL": "Szene-URL generieren",
+    "Reset Scene": "Szene zurücksetzen",
+    "Load Gesture": "Geste laden",
+    "Save Gesture": "Geste speichern",
+    "Please select a hand!!": "Bitte wählen Sie eine Hand aus!!",
+    "If you try to detect anime characters, you may get an error. Please try again with photos.": "Bei dem Versuch, Anime-Charaktere zu erkennen, kann es zu einem Fehler kommen. Bitte versuchen Sie es erneut mit Fotos.",
+    "Show Grid": "Gitter anzeigen"
+}

sd-webui-3d-open-pose-editor/src/locales/en.json

@@ -0,0 +1,71 @@
+{
+    "Width": "Width",
+    "Height": "Height",
+    "Generate Skeleton/Depth/Normal/Canny Map": "Generate Skeleton/Depth/Normal/Canny Map",
+    "Duplicate Skeleton": "Duplicate Skeleton",
+    "Delete Skeleton": "Delete Skeleton",
+    "Move Mode": "Move Mode",
+    "Show Edge Map": "Show Edge Map",
+    "Camera Near": "Camera Near",
+    "Camera Far": "Camera Far",
+    "Camera Focal Length": "Camera Focal Length",
+    "Downloading Hand Model": "Downloading Hand Model",
+    "Updates are available, please confirm!!": "Updates are available, please confirm!!",
+    "Select a scene file": "Select a scene file",
+    "Oops...": "Oops...",
+    "Something went wrong!": "Something went wrong!",
+    "If the problem persists, please click here to ask a question.": "If the problem persists, please click here to ask a question.",
+    "Save Scene": "Save Scene",
+    "Generate Scene URL": "Generate Scene URL",
+    "Load Scene": "Load Scene",
+    "Restore Last Scene": "Restore Last Scene",
+    "Set Background Image": "Set Background Image",
+    "Select an image": "Select an image",
+    "Body Parameters": "Body Parameters",
+    "Shoulder Width": "Shoulder Width",
+    "Shoulder To Hip": "Shoulder To Hip",
+    "Arm Length": "Arm Length",
+    "Forearm": "Forearm",
+    "Upper Arm": "Upper Arm",
+    "Hand Size": "Hand Size",
+    "Hips": "Hips",
+    "Leg Length": "Leg Length",
+    "Thigh": "Thigh",
+    "Lower Leg": "Lower Leg",
+    "Nose To Neck": "Nose To Neck",
+    "Head Size": "Head Size",
+    "Show Preview": "Show Preview",
+    "Only Hand": "Only Hand",
+    "Foot Size": "Foot Size",
+    "Downloading Foot Model": "Downloading Foot Model",
+    "Please select a skeleton!!": "Please select a skeleton!!",
+    "Downloading Poses Library": "Downloading Poses Library",
+    "Set Random Pose": "Set Random Pose",
+    "Redo": "Redo",
+    "Undo": "Undo",
+    "Detect From Image": "Detect From Image",
+    "Downloading MediaPipe Pose Model": "Downloading MediaPipe Pose Model",
+    "Edit": "Edit",
+    "Setting": "Setting",
+    "Bone Thickness": "Bone Thickness",
+    "Feedback": "Feedback",
+    "View": "View",
+    "Fix View": "Fix View",
+    "Restore View": "Restore View",
+    "Free Mode": "Free Mode",
+    "Del": "Del",
+    "File": "File",
+    "Generate": "Generate",
+    "Close": "Close",
+    "Update": "Update",
+    "Lock View": "Lock View",
+    "Unlock View": "Unlock View",
+    "Copy Keypoint Data": "Copy Keypoint Data",
+    "Copied to Clipboard": "Copied to Clipboard",
+    "Reset Scene": "Reset Scene",
+    "Load Gesture": "Load Gesture",
+    "Save Gesture": "Save Gesture",
+    "Please select a hand!!": "Please select a hand!!",
+    "If you try to detect anime characters, you may get an error. Please try again with photos.": "If you try to detect anime characters, you may get an error. Please try again with photos.",
+    "Show Grid": "Show Grid"
+}

sd-webui-3d-open-pose-editor/src/locales/ja.json

@@ -0,0 +1,71 @@
+{
+    "Width": "幅",
+    "Height": "高さ",
+    "Generate Skeleton/Depth/Normal/Canny Map": "スケルトン/深度/法線/Cannyマップを生成",
+    "Duplicate Skeleton": "スケルトンの複製",
+    "Delete Skeleton": "スケルトンの削除",
+    "Move Mode": "移動モード",
+    "Show Edge Map": "エッジマップを表示",
+    "Camera Near": "カメラ近距離",
+    "Camera Far": "カメラ遠距離",
+    "Camera Focal Length": "カメラ焦点距離",
+    "Downloading Hand Model": "手のモデルをダウンロード中",
+    "Updates are available, please confirm!!": "アップデートが利用可能です。確認してください！",
+    "Select a scene file": "シーンファイルを選択",
+    "Oops...": "おっと...",
+    "Something went wrong!": "何かが間違っています！",
+    "If the problem persists, please click here to ask a question.": "問題が解決しない場合は、ここをクリックして質問してください。",
+    "Save Scene": "シーンを保存",
+    "Generate Scene URL": "シーンのURLを生成",
+    "Load Scene": "シーンを読み込む",
+    "Restore Last Scene": "前回のシーンを復元",
+    "Set Background Image": "背景画像を設定",
+    "Select an image": "画像を選択",
+    "Body Parameters": "身体パラメータ",
+    "Shoulder Width": "肩幅",
+    "Shoulder To Hip": "肩から腰までの距離",
+    "Arm Length": "腕の長さ",
+    "Forearm": "前腕",
+    "Upper Arm": "上腕",
+    "Hand Size": "手の大きさ",
+    "Hips": "ヒップ",
+    "Leg Length": "脚の長さ",
+    "Thigh": "太もも",
+    "Lower Leg": "下腿",
+    "Nose To Neck": "鼻から首までの距離",
+    "Head Size": "頭の大きさ",
+    "Show Preview": "プレビューを表示",
+    "Only Hand": "手だけ",
+    "Foot Size": "足のサイズ",
+    "Downloading Foot Model": "足のモデルをダウンロード中",
+    "Please select a skeleton!!": "骨格を選択してください！",
+    "Downloading Poses Library": "ポーズライブラリをダウンロード中",
+    "Set Random Pose": "ランダムポーズを設定",
+    "Redo": "やり直し",
+    "Undo": "元に戻す",
+    "Detect From Image": "画像から検出",
+    "Downloading MediaPipe Pose Model": "MediaPipeポーズモデルをダウンロード中",
+    "Edit": "編集",
+    "Setting": "設定",
+    "Bone Thickness": "ボーンの太さ",
+    "Feedback": "フィードバック",
+    "View": "ビュー",
+    "Fix View": "ビューを固定する",
+    "Restore View": "ビューを復元する",
+    "Free Mode": "フリーモード",
+    "Del": "Del",
+    "File": "ファイル",
+    "Generate": "生成する",
+    "Close": "閉じる",
+    "Update": "更新する",
+    "Lock View": "ビューをロックする",
+    "Unlock View": "ビューをアンロックする",
+    "Copy Keypoint Data": "キーポイントデータをコピーする",
+    "Copied to Clipboard": "クリップボードにコピーされました",
+    "Reset Scene": "シーンをリセットする",
+    "Load Gesture": "ジェスチャーを読み込む",
+    "Save Gesture": "ジェスチャーを保存する",
+    "Please select a hand!!": "手を選択してください!!",
+    "If you try to detect anime characters, you may get an error. Please try again with photos.": "アニメキャラクターを検出しようとするとエラーが発生する場合があります。写真で再度お試しください。",
+    "Show Grid": "グリッドを表示"
+}

sd-webui-3d-open-pose-editor/src/locales/sp.json

@@ -0,0 +1,71 @@
+{
+    "Width": "ancho",
+    "Height": "altura",
+    "Generate Skeleton/Depth/Normal/Canny Map": "generar esqueleto/profundidad/normal/generar mapa astuto",
+    "Duplicate Skeleton": "copiar esqueleto",
+    "Delete Skeleton": "eliminar esqueleto",
+    "Move Mode": "modo de movimiento",
+    "Show Edge Map": "mostart mapa de borde",
+    "Camera Near": "cámera cerca",
+    "Camera Far": "cámera lejos",
+    "Camera Focal Length": "distancia focal de la cámara",
+    "Downloading Hand Model": "descargar el modelo de mano",
+    "Updates are available, please confirm!!": "confirmar la(s) actualización(es)",
+    "Select a scene file": "selecciona un archivo de escena",
+    "Oops...": "¡Uy!",
+    "Something went wrong!": "algo salío mal",
+    "If the problem persists, please click here to ask a question.": "si el problema persiste haga clic aquí oara hacer una pregunta.",
+    "Save Scene": "guardar escena",
+    "Load Scene": "cargar la escena",
+    "Restore Last Scene": "restaurar la última escena",
+    "Set Background Image": "establecer la imagen de fondo",
+    "Select an image": "selecciona una imagen",
+    "Body Parameters": "parámetros del cuepro",
+    "Shoulder Width": "ancho de los hombros",
+    "Shoulder To Hip": "de hombro a cadera",
+    "Arm Length": "longitud del brazo",
+    "Forearm": "antebrazo",
+    "Upper Arm": "brazo ",
+    "Hand Size": "tamaño de la mano",
+    "Hips": "caderas",
+    "Leg Length": "longitud de la pierna",
+    "Thigh": "muslo",
+    "Lower Leg": "parte inferior de la pierna",
+    "Nose To Neck": "de la nariz al cuello",
+    "Head Size": "tamaño de la cabeza",
+    "Show Preview": "mostrar vista previa",
+    "Only Hand": "solo manos",
+    "Foot Size": "tamaño del pie",
+    "Downloading Foot Model": "descargando el modelo de pie",
+    "Please select a skeleton!!": "¡selecciona un esqueleto!",
+    "Downloading Poses Library": "descargando la biblioteca de poses",
+    "Set Random Pose": "pose aletoria",
+    "Redo": "rehacer",
+    "Undo": "deshacer",
+    "Detect From Image": "detectar desde la imagen",
+    "Downloading MediaPipe Pose Model": "descargando el modelo de pose de MediaPipe",
+    "Edit": "editar",
+    "Setting": "ajustes",
+    "Bone Thickness": "grosor del hueso",
+    "Feedback": "realimentación",
+    "View": "Ver",
+    "Fix View": "Fijar Vista",
+    "Restore View": "Restaurar Vista",
+    "Free Mode": "Modo libre",
+    "Del": "Remoto",
+    "File": "Archivo",
+    "Generate": "Generar",
+    "Close": "Cerrar",
+    "Update": "Actualizar",
+    "Lock View": "Bloquear vista",
+    "Unlock View": "Desbloquear vista",
+    "Copy Keypoint Data": "Copiar datos del punto clave",
+    "Copied to Clipboard": "Copiado al portapapeles",
+    "Generate Scene URL": "Generar URL de escena",
+    "Reset Scene": "Restablecer escena",
+    "Load Gesture": "Cargar gesto",
+    "Save Gesture": "Guardar gesto",
+    "Please select a hand!!": "¡¡Por favor, seleccione una mano!!",
+    "If you try to detect anime characters, you may get an error. Please try again with photos.": "Si intenta detectar personajes de anime, es posible que obtenga un error. Por favor, inténtelo de nuevo con fotos.",
+    "Show Grid": "Mostrar cuadrícula"
+}

sd-webui-3d-open-pose-editor/src/locales/zh-CN.json

@@ -0,0 +1,71 @@
+{
+    "Width": "宽度",
+    "Height": "高度",
+    "Generate Skeleton/Depth/Normal/Canny Map": "生成骨架/深度/法线/Canny图",
+    "Duplicate Skeleton": "复制骨架",
+    "Delete Skeleton": "删除骨架",
+    "Move Mode": "移动模式",
+    "Show Edge Map": "显示边缘图",
+    "Camera Near": "相机near",
+    "Camera Far": "相机far",
+    "Camera Focal Length": "相机焦距",
+    "Downloading Hand Model": "正在下载手部模型",
+    "Updates are available, please confirm!!": "有更新啦，请确认！！",
+    "Select a scene file": "选择一个场景文件",
+    "Oops...": "哎呀...",
+    "Something went wrong!": "出错了！",
+    "If the problem persists, please click here to ask a question.": "如果问题一直存在，请点击此处提问。",
+    "Save Scene": "保存场景",
+    "Load Scene": "加载场景",
+    "Restore Last Scene": "恢复上次场景",
+    "Set Background Image": "设置背景图片",
+    "Select an image": "选择一张图片",
+    "Body Parameters": "身体参数",
+    "Shoulder Width": "肩宽",
+    "Shoulder To Hip": "肩到臀",
+    "Arm Length": "手臂长度",
+    "Forearm": "前臂",
+    "Upper Arm": "上臂",
+    "Hand Size": "手部尺寸",
+    "Hips": "臀部宽度",
+    "Leg Length": "腿部长度",
+    "Thigh": "大腿",
+    "Lower Leg": "小腿",
+    "Nose To Neck": "鼻子到颈部",
+    "Head Size": "头部大小",
+    "Show Preview": "显示预览图",
+    "Only Hand": "仅显示手",
+    "Foot Size": "脚部尺寸",
+    "Downloading Foot Model": "正在下载脚部模型",
+    "Please select a skeleton!!": "请选择骨架！",
+    "Downloading Poses Library": "正在下载姿势库",
+    "Set Random Pose": "设置随机姿势",
+    "Redo": "重做",
+    "Undo": "撤销",
+    "Detect From Image": "从图片中检测",
+    "Downloading MediaPipe Pose Model": "正在下载 MediaPipe 姿势模型",
+    "Edit": "编辑",
+    "Setting": "设置",
+    "Bone Thickness": "骨骼厚度",
+    "Feedback": "反馈",
+    "View": "视图",
+    "Fix View": "固定视图",
+    "Restore View": "恢复视图",
+    "Free Mode": "自由模式",
+    "Del": "Del",
+    "File": "文件",
+    "Generate": "生成",
+    "Close": "关闭",
+    "Update": "更新",
+    "Lock View": "锁定视图",
+    "Unlock View": "解除锁定视图",
+    "Copy Keypoint Data": "复制关键点数据",
+    "Copied to Clipboard": "已复制到剪贴板",
+    "Generate Scene URL": "生成场景URL",
+    "Reset Scene": "重置场景",
+    "Load Gesture": "加载手势",
+    "Save Gesture": "保存手势",
+    "Please select a hand!!": "请选择一只手！！",
+    "If you try to detect anime characters, you may get an error. Please try again with photos.": "如果您尝试检测动漫角色，可能会出现错误。请使用照片再试一次。",
+    "Show Grid": "显示网格"
+}

sd-webui-3d-open-pose-editor/src/locales/zh-HK.json

@@ -0,0 +1,71 @@
+{
+    "Width": "寬度",
+    "Height": "高度",
+    "Generate Skeleton/Depth/Normal/Canny Map": "生成骨架/深度/法線/Canny圖",
+    "Duplicate Skeleton": "複製骨架",
+    "Delete Skeleton": "刪除骨架",
+    "Move Mode": "移動模式",
+    "Show Edge Map": "顯示邊緣圖",
+    "Camera Near": "相機near",
+    "Camera Far": "相機far",
+    "Camera Focal Length": "相機焦距",
+    "Downloading Hand Model": "正在下載手部模型",
+    "Updates are available, please confirm!!": "有更新啦，请确认！！",
+    "Select a scene file": "選擇場景檔案",
+    "Oops...": "哎呀...",
+    "Something went wrong!": "出現問題！",
+    "If the problem persists, please click here to ask a question.": "如果問題仍然存在，請點擊此處發問。",
+    "Save Scene": "儲存場景",
+    "Load Scene": "載入場景",
+    "Restore Last Scene": "恢復上次場景",
+    "Set Background Image": "設置背景圖片",
+    "Select an image": "選擇圖片",
+    "Body Parameters": "身體參數",
+    "Shoulder Width": "肩寬",
+    "Shoulder To Hip": "肩臀長度",
+    "Arm Length": "手臂長度",
+    "Forearm": "前臂",
+    "Upper Arm": "上臂",
+    "Hand Size": "手部尺寸",
+    "Hips": "臀部",
+    "Leg Length": "腿長",
+    "Thigh": "大腿",
+    "Lower Leg": "小腿",
+    "Nose To Neck": "鼻子到脖子的距離",
+    "Head Size": "頭部尺寸",
+    "Show Preview": "顯示預覽",
+    "Only Hand": "只顯示手部",
+    "Foot Size": "腳部尺寸",
+    "Downloading Foot Model": "正在下載腳部模型",
+    "Please select a skeleton!!": "請選擇骨架！",
+    "Downloading Poses Library": "下載姿勢庫中",
+    "Set Random Pose": "設定隨機姿勢",
+    "Redo": "重做",
+    "Undo": "撤銷",
+    "Detect From Image": "從圖片中偵測",
+    "Downloading MediaPipe Pose Model": "下載 MediaPipe 姿勢模型",
+    "Edit": "編輯",
+    "Setting": "設定",
+    "Bone Thickness": "骨骼厚度",
+    "Feedback": "回饋",
+    "View": "檢視",
+    "Fix View": "固定檢視",
+    "Restore View": "還原檢視",
+    "Free Mode": "自由模式",
+    "Del": "Del",
+    "File": "文件",
+    "Generate": "生成",
+    "Close": "關閉",
+    "Update": "更新",
+    "Lock View": "鎖定視圖",
+    "Unlock View": "解鎖視圖",
+    "Copy Keypoint Data": "複製關鍵點數據",
+    "Copied to Clipboard": "已複製到剪貼板",
+    "Generate Scene URL": "生成場景URL",
+    "Reset Scene": "重置場景",
+    "Load Gesture": "載入手勢",
+    "Save Gesture": "儲存手勢",
+    "Please select a hand!!": "請選擇一隻手！！",
+    "If you try to detect anime characters, you may get an error. Please try again with photos.": "如果您嘗試檢測動漫角色，可能會出現錯誤。請使用照片再試一次。",
+    "Show Grid": "顯示網格"
+}

sd-webui-3d-open-pose-editor/src/locales/zh-TW.json

@@ -0,0 +1,71 @@
+{
+    "Width": "寬度",
+    "Height": "高度",
+    "Generate Skeleton/Depth/Normal/Canny Map": "產生骨架/深度/法線/Canny圖",
+    "Duplicate Skeleton": "複製骨架",
+    "Delete Skeleton": "刪除骨架",
+    "Move Mode": "移動模式",
+    "Show Edge Map": "顯示邊緣圖",
+    "Camera Near": "相機近端距離",
+    "Camera Far": "相機遠端距離",
+    "Camera Focal Length": "相機焦距",
+    "Downloading Hand Model": "下載手部模型中",
+    "Updates are available, please confirm!!": "有更新，請確認！！",
+    "Select a scene file": "選擇場景檔案",
+    "Oops...": "糟糕...",
+    "Something went wrong!": "出了些問題！",
+    "If the problem persists, please click here to ask a question.": "如果問題持續存在，請點擊此處發起提問。",
+    "Save Scene": "儲存場景",
+    "Load Scene": "載入場景",
+    "Restore Last Scene": "恢復上一個場景",
+    "Set Background Image": "設定背景圖片",
+    "Select an image": "選擇圖片",
+    "Body Parameters": "身體參數",
+    "Shoulder Width": "肩寬",
+    "Shoulder To Hip": "肩臀長",
+    "Arm Length": "手臂長",
+    "Forearm": "前臂",
+    "Upper Arm": "上臂",
+    "Hand Size": "手部大小",
+    "Hips": "臀部",
+    "Leg Length": "腿長",
+    "Thigh": "大腿",
+    "Lower Leg": "小腿",
+    "Nose To Neck": "鼻子到頸部的距離",
+    "Head Size": "頭部大小",
+    "Show Preview": "顯示預覽",
+    "Only Hand": "僅手部",
+    "Foot Size": "腳部大小",
+    "Downloading Foot Model": "下載腳部模型中",
+    "Please select a skeleton!!": "請選擇骨架！",
+    "Downloading Poses Library": "正在下載姿勢庫",
+    "Set Random Pose": "設置隨機姿勢",
+    "Redo": "重做",
+    "Undo": "撤銷",
+    "Detect From Image": "從圖片中偵測",
+    "Downloading MediaPipe Pose Model": "下載 MediaPipe 姿勢模型中",
+    "Edit": "編輯",
+    "Setting": "設定",
+    "Bone Thickness": "骨骼厚度",
+    "Feedback": "回饋",
+    "View": "檢視",
+    "Fix View": "固定檢視",
+    "Restore View": "還原檢視",
+    "Free Mode": "自由模式",
+    "Del": "Del",
+    "File": "檔案",
+    "Generate": "生成",
+    "Close": "關閉",
+    "Update": "更新",
+    "Lock View": "鎖定視圖",
+    "Unlock View": "解鎖視圖",
+    "Copy Keypoint Data": "複製關鍵點數據",
+    "Copied to Clipboard": "已複製到剪貼板",
+    "Generate Scene URL": "生成場景URL",
+    "Reset Scene": "重置場景",
+    "Load Gesture": "載入手勢",
+    "Save Gesture": "儲存手勢",
+    "Please select a hand!!": "請選擇一隻手！！",
+    "If you try to detect anime characters, you may get an error. Please try again with photos.": "如果您嘗試檢測動漫角色，可能會出現錯誤。請使用照片再試一次。",
+    "Show Grid": "顯示網格"
+}

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

@@ -0,0 +1,82 @@
+export type IPostMessage = {
+    method: string
+    type: 'call' | 'return'
+    payload: any
+}
+
+const iframe = document.getElementById('open-pose-editor') as HTMLIFrameElement
+
+const poseMessage = (message: IPostMessage) => {
+    iframe.contentWindow?.postMessage(message)
+}
+
+const MessageReturnHandler: Record<string, (arg: any) => void> = {}
+const MessageEventHandler: Record<string, (arg: any) => void> = {}
+
+window.addEventListener('message', (event) => {
+    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)
+        }
+    }
+})
+
+function InvokeOnlineOpenPose3D(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({
+            method,
+            type: 'call',
+            payload: args,
+        })
+    })
+}
+function CreateClick(name: string, ...args: any[]) {
+    const ele = document.getElementById(name)
+
+    ele?.addEventListener('click', async () => {
+        console.log(name)
+        const value = await InvokeOnlineOpenPose3D(name, ...args)
+        console.log('return', value)
+    })
+}
+
+MessageEventHandler['MakeImages'] = (arg) => {
+    console.log('event', arg)
+}
+
+CreateClick('GetAPIs')
+CreateClick('GetAppVersion')
+CreateClick('MakeImages')
+CreateClick('Pause')
+CreateClick('Resume')
+CreateClick('OutputWidth', 512)
+CreateClick('OutputHeight', 512)
+CreateClick('OnlyHand', true)
+CreateClick('MoveMode', true)
+CreateClick('GetWidth')
+CreateClick('GetHeight')
+CreateClick('GetSceneData')
+CreateClick('LockView')
+CreateClick('UnlockView')
+CreateClick('RestoreView')

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

@@ -0,0 +1,128 @@
+import * as THREE from 'three'
+import { FindObjectItem } from './utils/three-utils'
+import { LoadFBXFile, LoadGLTFile, LoadObjFile } from './utils/loader'
+
+export let HandObject: THREE.Group | null = null
+export let FootObject: THREE.Group | null = null
+
+export const HandModelInfo = {
+    meshName: 'shoupolySurface1',
+    bonePrefix: 'shoujoint',
+}
+export const FootModelInfo = {
+    meshName: 'FootObject',
+    bonePrefix: 'FootBone',
+}
+
+export const ExtremitiesMapping: Record<
+    string,
+    {
+        meshName: string
+        bonePrefix: string
+    }
+> = {
+    left_hand: HandModelInfo,
+    right_hand: HandModelInfo,
+    left_foot: FootModelInfo,
+    right_foot: FootModelInfo,
+}
+
+export function IsMatchBonePrefix(name: string) {
+    if (name.startsWith(HandModelInfo.bonePrefix)) return true
+    if (name.startsWith(FootModelInfo.bonePrefix)) return true
+    return false
+}
+
+export async function LoadHand(
+    handFBXFileUrl: string,
+    onLoading?: (loaded: number) => void
+) {
+    const fbx = await LoadFBXFile(handFBXFileUrl, onLoading)
+
+    // fbx.scale.multiplyScalar(10)
+    const mesh = FindObjectItem<THREE.SkinnedMesh>(fbx, HandModelInfo.meshName)!
+    mesh.material = new THREE.MeshPhongMaterial()
+    // this.scene.add();
+    // const helper = new THREE.SkeletonHelper(mesh.parent!);
+    // this.scene.add(helper);
+
+    // console.log(mesh.skeleton.bones)
+    mesh.skeleton.bones.forEach((o) => {
+        const point = new THREE.Mesh(
+            new THREE.SphereGeometry(0.2),
+            new THREE.MeshBasicMaterial({
+                color: 0xff0000,
+                //  vertexColors: true,
+                depthTest: false,
+                opacity: 1,
+                transparent: true,
+                // depthWrite: false,
+                // toneMapped: false,
+                // transparent: true,
+            })
+        )
+        point.name = 'red_point'
+        // point.scale.setX(0.2)
+        // point.position.copy(o.position)
+        o.add(point)
+    })
+
+    const mask = new THREE.Mesh(
+        new THREE.CylinderGeometry(1, 1, 0.4, 32),
+        new THREE.MeshBasicMaterial({ color: 0x000000 })
+    )
+    mask.name = 'hand_mask'
+    mask.visible = false
+    mask.rotateZ(Math.PI / 2)
+    mesh.skeleton.bones[0].add(mask)
+
+    HandObject = fbx
+    return fbx
+}
+
+export async function LoadFoot(
+    footFBXFileUrl: string,
+    onLoading?: (loaded: number) => void
+) {
+    const fbx = await LoadFBXFile(footFBXFileUrl, onLoading)
+
+    console.log(fbx)
+    // fbx.scale.multiplyScalar(0.001)
+
+    const mesh = FindObjectItem<THREE.SkinnedMesh>(fbx, FootModelInfo.meshName)!
+    mesh.material = new THREE.MeshPhongMaterial()
+    // this.scene.add();
+    // const helper = new THREE.SkeletonHelper(mesh.parent!);
+    // this.scene.add(helper);
+
+    console.log(mesh.skeleton.bones)
+    mesh.skeleton.bones.forEach((o) => {
+        if (o.name !== 'FootBone2') return
+        const point = new THREE.Mesh(
+            new THREE.SphereGeometry(0.1),
+            new THREE.MeshBasicMaterial({
+                color: 0xff0000,
+                depthTest: false,
+                opacity: 1,
+                transparent: true,
+            })
+        )
+
+        point.name = 'red_point'
+        // point.position.copy(o.position)
+        point.translateX(-0.3)
+        o.add(point)
+    })
+
+    const mask = new THREE.Mesh(
+        new THREE.CylinderGeometry(0.35, 0.35, 0.2, 32),
+        new THREE.MeshBasicMaterial({ color: 0x000000 })
+    )
+    mask.scale.setX(0.7)
+    mask.name = 'foot_mask'
+    mask.visible = false
+    mesh.skeleton.bones[0].add(mask)
+
+    FootObject = fbx
+    return fbx
+}

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

@@ -0,0 +1,38 @@
+import { PartIndexMappingOfPoseModel } from './defines'
+
+const PosesLibrary: [number, number, number][][] | null = []
+
+function getRandomInt(min: number, max: number) {
+    min = Math.ceil(min)
+    max = Math.floor(max)
+    return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+export function GetRandomPose() {
+    if (PosesLibrary)
+        return PosesLibrary[getRandomInt(0, PosesLibrary.length - 1)]
+    return null
+}
+
+export async function LoadPosesLibrary(posesLibraryUrl: string) {
+    const response = await fetch(posesLibraryUrl)
+    const buffer = await response.arrayBuffer()
+
+    console.log(buffer.byteLength)
+    const int16Array = new Int32Array(buffer)
+
+    const num = Object.keys(PartIndexMappingOfPoseModel).length
+
+    for (let i = 0; i < int16Array.length / (num * 3); i++) {
+        const temp: [number, number, number][] = []
+        for (let j = 0; j < num; j++) {
+            const a = int16Array[i * (num * 3) + j * 3 + 0]
+            const b = int16Array[i * (num * 3) + j * 3 + 1]
+            const c = int16Array[i * (num * 3) + j * 3 + 2]
+
+            temp.push([a / 1000.0, b / 1000.0, c / 1000.0])
+        }
+
+        PosesLibrary?.push(temp)
+    }
+}

sd-webui-3d-open-pose-editor/src/poses/data.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:40bf0b017283b5b2a00b78d8da1ef11e5c62ffeccdd97ab56c26c1e6f23e5684
+size 945252

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

@@ -0,0 +1,209 @@
+import { Matrix4, Quaternion, Vector3, Object3D } from 'three'
+
+// tslint:disable-next-line:interface-name
+export interface IKS {
+    effector: Object3D
+    iteration: number
+    links: Array<{
+        enabled: boolean
+        index: Object3D
+        limitation?: Vector3
+        rotationMin?: Vector3
+        rotationMax?: Vector3
+    }>
+    minAngle: number
+    maxAngle: number
+    target: Object3D
+}
+
+const _q = new Quaternion()
+const _targetPos = new Vector3()
+const _targetVec = new Vector3()
+const _effectorPos = new Vector3()
+const _effectorVec = new Vector3()
+const _linkPos = new Vector3()
+const _invLinkQ = new Quaternion()
+const _linkScale = new Vector3()
+const _axis = new Vector3()
+const _vector = new Vector3()
+const _matrix = new Matrix4()
+
+/**
+ * CCD Algorithm
+ *  - https://sites.google.com/site/auraliusproject/ccd-algorithm
+ *
+ * // ik parameter example
+ * //
+ * // target, effector, index in links are bone index in skeleton.bones.
+ * // the bones relation should be
+ * // <-- parent                                  child -->
+ * // links[ n ], links[ n - 1 ], ..., links[ 0 ], effector
+ * iks = [ {
+ *	target: 1,
+ *	effector: 2,
+ *	links: [ { index: 5, limitation: new Vector3( 1, 0, 0 ) }, { index: 4, enabled: false }, { index : 3 } ],
+ *	iteration: 10,
+ *	minAngle: 0.0,
+ *	maxAngle: 1.0,
+ * } ];
+ */
+
+export class CCDIKSolver {
+    iks: IKS[]
+    constructor(iks: IKS[] = []) {
+        this.iks = iks
+
+        this._valid()
+    }
+
+    update() {
+        const iks = this.iks
+
+        for (let i = 0, il = iks.length; i < il; i++) {
+            this.updateOne(iks[i])
+        }
+
+        return this
+    }
+
+    updateOne(ik: IKS) {
+        const bones = ik.links.map((i) => i.index)
+
+        // for reference overhead reduction in loop
+        const math = Math
+
+        const effector = ik.effector
+        const target = ik.target
+
+        // don't use getWorldPosition() here for the performance
+        // because it calls updateMatrixWorld( true ) inside.
+        _targetPos.setFromMatrixPosition(target.matrixWorld)
+
+        const links = ik.links
+        const iteration = ik.iteration !== undefined ? ik.iteration : 1
+
+        for (let i = 0; i < iteration; i++) {
+            let rotated = false
+
+            for (let j = 0, jl = links.length; j < jl; j++) {
+                const link = bones[j]
+
+                // skip this link and following links.
+                // this skip is used for MMD performance optimization.
+                if (links[j].enabled === false) break
+
+                const limitation = links[j].limitation
+                const rotationMin = links[j].rotationMin
+                const rotationMax = links[j].rotationMax
+
+                // don't use getWorldPosition/Quaternion() here for the performance
+                // because they call updateMatrixWorld( true ) inside.
+                link.matrixWorld.decompose(_linkPos, _invLinkQ, _linkScale)
+                _invLinkQ.invert()
+                _effectorPos.setFromMatrixPosition(effector.matrixWorld)
+
+                // work in link world
+                _effectorVec.subVectors(_effectorPos, _linkPos)
+                _effectorVec.applyQuaternion(_invLinkQ)
+                _effectorVec.normalize()
+
+                _targetVec.subVectors(_targetPos, _linkPos)
+                _targetVec.applyQuaternion(_invLinkQ)
+                _targetVec.normalize()
+
+                let angle = _targetVec.dot(_effectorVec)
+
+                if (angle > 1.0) {
+                    angle = 1.0
+                } else if (angle < -1.0) {
+                    angle = -1.0
+                }
+
+                angle = math.acos(angle)
+
+                // skip if changing angle is too small to prevent vibration of bone
+                if (angle < 1e-5) continue
+
+                if (ik.minAngle !== undefined && angle < ik.minAngle) {
+                    angle = ik.minAngle
+                }
+
+                if (ik.maxAngle !== undefined && angle > ik.maxAngle) {
+                    angle = ik.maxAngle
+                }
+
+                _axis.crossVectors(_effectorVec, _targetVec)
+                _axis.normalize()
+
+                _q.setFromAxisAngle(_axis, angle)
+                link.quaternion.multiply(_q)
+
+                // TODO: re-consider the limitation specification
+                if (limitation !== undefined) {
+                    let c = link.quaternion.w
+
+                    if (c > 1.0) c = 1.0
+
+                    const c2 = math.sqrt(1 - c * c)
+                    link.quaternion.set(
+                        limitation.x * c2,
+                        limitation.y * c2,
+                        limitation.z * c2,
+                        c
+                    )
+                }
+
+                if (rotationMin !== undefined) {
+                    link.rotation.setFromVector3(
+                        _vector.setFromEuler(link.rotation).max(rotationMin)
+                    )
+                }
+
+                if (rotationMax !== undefined) {
+                    link.rotation.setFromVector3(
+                        _vector.setFromEuler(link.rotation).min(rotationMax)
+                    )
+                }
+
+                link.updateMatrixWorld(true)
+
+                rotated = true
+            }
+
+            if (!rotated) break
+        }
+
+        return this
+    }
+
+    // private methods
+
+    _valid() {
+        const iks = this.iks
+
+        for (let i = 0, il = iks.length; i < il; i++) {
+            const ik = iks[i]
+
+            const effector = ik.effector
+            const links = ik.links
+            let link0, link1
+
+            link0 = effector
+
+            for (let j = 0, jl = links.length; j < jl; j++) {
+                link1 = links[j].index
+
+                if (link0.parent !== link1) {
+                    console.warn(
+                        'THREE.CCDIKSolver: bone ' +
+                            link0.name +
+                            ' is not the child of bone ' +
+                            link1.name
+                    )
+                }
+
+                link0 = link1
+            }
+        }
+    }
+}

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

@@ -0,0 +1,63 @@
+import { Class } from 'type-fest'
+
+// https://github.com/google/mediapipe/blob/master/docs/solutions/pose.md#resources
+import type { Results, Pose, PoseConfig } from '@mediapipe/pose'
+import * as MediapipePose from '@mediapipe/pose'
+import assets from '../assets'
+
+// @mediapipe/pose is not an es module ??
+// Extract Pose from the window to solve the problem
+// To prevent optimization, just print it
+console.log('@mediapipe/pose', MediapipePose)
+const MyPose = import.meta.env.DEV
+    ? MediapipePose.Pose
+    : ((window as any).Pose as Class<Pose, [PoseConfig]>)
+console.log('MyPose', MyPose)
+
+const AliyuncsBase =
+    'https://openpose-editor.oss-cn-beijing.aliyuncs.com/%40mediapipe/pose'
+const JsdelivrBase = 'https://cdn.jsdelivr.net/npm/@mediapipe/pose'
+
+let UseJsdelivrBase = true
+function GetCDNBase() {
+    if (UseJsdelivrBase) return JsdelivrBase
+    else return AliyuncsBase
+}
+
+export function SetCDNBase(isJsdelivrBase: boolean) {
+    UseJsdelivrBase = isJsdelivrBase
+}
+
+const pose = new MyPose({
+    locateFile: (file) => {
+        if (file in assets) {
+            console.log('local', file)
+            return (assets as any)[file]
+        }
+        const url = `${GetCDNBase()}/${file}`
+
+        console.log('load pose model', url)
+        return url
+    },
+})
+
+// https://github.com/google/mediapipe/blob/master/docs/solutions/pose.md#solution-apis
+pose.setOptions({
+    modelComplexity: 1,
+    smoothLandmarks: true,
+    enableSegmentation: true,
+    smoothSegmentation: true,
+    minDetectionConfidence: 0.5,
+    minTrackingConfidence: 0.5,
+})
+
+export function DetectPosefromImage(image: HTMLImageElement): Promise<Results> {
+    return new Promise((resolve) => {
+        pose.reset()
+        pose.send({ image: image })
+        pose.onResults((result) => {
+            console.log(result)
+            resolve(result)
+        })
+    })
+}

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

@@ -0,0 +1,16 @@
+export function getImage(url: string): Promise<HTMLImageElement> {
+    return new Promise((resolve, reject) => {
+        const image = document.createElement('img')
+
+        image.src = url
+        image.addEventListener('load', () => {
+            resolve(image)
+        })
+        image.addEventListener('abort', () => {
+            reject('onabort')
+        })
+        image.addEventListener('error', () => {
+            reject('onerror')
+        })
+    })
+}

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

@@ -0,0 +1,81 @@
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
+import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import * as THREE from 'three'
+
+const fbxLoader = new FBXLoader()
+export async function LoadFBXFile(
+    url: string,
+    onLoading?: (loaded: number) => void
+): Promise<THREE.Group> {
+    return new Promise((resolve, reject) => {
+        // load a resource
+        fbxLoader.load(
+            // resource URL
+            url,
+            // called when resource is loaded
+            function (object) {
+                resolve(object)
+            },
+            // called when loading is in progresses
+            function (xhr) {
+                console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
+                onLoading?.((xhr.loaded / xhr.total) * 100)
+            },
+            // called when loading has errors
+            function (error) {
+                console.log('An error happened')
+                reject(error)
+            }
+        )
+    })
+}
+
+// instantiate a loader
+const loader = new OBJLoader()
+
+export async function LoadObjFile(url: string): Promise<THREE.Group> {
+    return new Promise((resolve, reject) => {
+        // load a resource
+        loader.load(
+            // resource URL
+            url,
+            // called when resource is loaded
+            function (object) {
+                resolve(object)
+            },
+            // called when loading is in progresses
+            function (xhr) {
+                console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
+            },
+            // called when loading has errors
+            function (error) {
+                console.log('An error happened')
+                reject(error)
+            }
+        )
+    })
+}
+
+export async function LoadGLTFile(url: string): Promise<GLTF> {
+    return new Promise((resolve, reject) => {
+        // load a resource
+        new GLTFLoader().load(
+            // resource URL
+            url,
+            // called when resource is loaded
+            function (object) {
+                resolve(object)
+            },
+            // called when loading is in progresses
+            function (xhr) {
+                console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
+            },
+            // called when loading has errors
+            function (error) {
+                console.log('An error happened')
+                reject(error)
+            }
+        )
+    })
+}

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

@@ -0,0 +1,27 @@
+import * as THREE from 'three'
+import { Object3D } from 'three'
+
+export function FindObjectItem<T extends THREE.Object3D>(
+    object: THREE.Object3D,
+    name: string
+): T | null {
+    //console.log(object);
+    let result = null
+    object.traverse((child) => {
+        //console.log("child", child);
+        if (child.name == name) {
+            result = child
+        }
+    })
+    return result
+}
+
+export function GetWorldPosition(o: Object3D) {
+    const pos = new THREE.Vector3()
+    o.getWorldPosition(pos)
+    return pos
+}
+
+export function GetLocalPosition(obj: Object3D, postion: THREE.Vector3) {
+    return obj.worldToLocal(postion.clone())
+}

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

@@ -0,0 +1,5 @@
+import dayjs from 'dayjs'
+
+export function getCurrentTime(format = 'YYYY_MM_DD_HH_mm_ss') {
+    return dayjs(new Date()).format(format)
+}

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

@@ -0,0 +1,187 @@
+import {
+    fileOpen,
+    fileSave,
+    FileWithHandle,
+    FirstFileOpenOptions,
+} from 'browser-fs-access'
+
+export function download(href: string, title: string) {
+    const a = document.createElement('a')
+    a.setAttribute('href', href)
+    a.setAttribute('download', title)
+    a.click()
+}
+
+export function downloadJson(data: string, fileName: string) {
+    const blob = new Blob([data], { type: 'text/json' })
+    const href = window.URL.createObjectURL(blob)
+    download(href, fileName)
+    URL.revokeObjectURL(href)
+}
+
+async function fileOpenLegacy<M extends boolean | undefined = false>(
+    _options: FirstFileOpenOptions<M> = {}
+): Promise<FileWithHandle | FileWithHandle[]> {
+    let options: FirstFileOpenOptions<M>[]
+    if (!Array.isArray(_options)) {
+        options = [_options]
+    } else options = _options
+    return new Promise((resolve, reject) => {
+        const input = document.createElement('input') as HTMLInputElement
+        input.type = 'file'
+        const accept = [
+            ...options.map((option) => option.mimeTypes || []),
+            ...options.map((option) => option.extensions || []),
+        ].join()
+        input.multiple = options[0].multiple || false
+        // Empty string allows everything.
+        input.accept = accept || ''
+        // Append to the DOM, else Safari on iOS won't fire the `change` event
+        // reliably.
+        input.style.display = 'none'
+        document.body.append(input)
+
+        const _reject = () => cleanupListenersAndMaybeReject?.(reject)
+        const _resolve = (value: FileWithHandle | FileWithHandle[]) => {
+            if (typeof cleanupListenersAndMaybeReject === 'function') {
+                cleanupListenersAndMaybeReject()
+            }
+            resolve(value)
+        }
+        // ToDo: Remove this workaround once
+        // https://github.com/whatwg/html/issues/6376 is specified and supported.
+        const cleanupListenersAndMaybeReject =
+            options[0].legacySetup &&
+            options[0].legacySetup(_resolve, _reject, input)
+
+        const cancelDetector = () => {
+            window.removeEventListener('focus', cancelDetector)
+            input.remove()
+        }
+
+        input.addEventListener('click', () => {
+            window.addEventListener('focus', cancelDetector)
+        })
+
+        input.addEventListener('change', () => {
+            window.removeEventListener('focus', cancelDetector)
+            input.remove()
+
+            if (input.files)
+                _resolve(
+                    input.multiple ? Array.from(input.files) : input.files[0]
+                )
+            else {
+                _reject()
+            }
+        })
+
+        if ('showPicker' in HTMLInputElement.prototype) {
+            input.showPicker()
+        } else {
+            input.click()
+        }
+    })
+}
+
+export async function uploadJson() {
+    try {
+        const file = await fileOpenLegacy({
+            mimeTypes: ['application/json'],
+            legacySetup: (_, rejectionHandler) => {
+                const timeoutId = setTimeout(rejectionHandler, 10_000)
+                return (reject) => {
+                    clearTimeout(timeoutId)
+                    if (reject) {
+                        console.error('reject')
+                        reject('Failed to Open file')
+                    }
+                }
+            },
+        })
+
+        return await new Promise<string>((resolve, reject) => {
+            const reader = new FileReader()
+            reader.onload = function () {
+                resolve(reader.result as string)
+            }
+
+            reader.onerror = function () {
+                reject(reader.error)
+            }
+
+            if (Array.isArray(file) == false)
+                reader.readAsText(file as FileWithHandle)
+            else reject("Don't select multiple files")
+        })
+    } catch (error) {
+        console.log(error)
+        return null
+    }
+}
+
+export async function uploadImage() {
+    try {
+        const file = await fileOpenLegacy({
+            mimeTypes: ['image/*'],
+            legacySetup: (_, rejectionHandler) => {
+                const timeoutId = setTimeout(rejectionHandler, 10_000)
+                return (reject) => {
+                    clearTimeout(timeoutId)
+                    console.log('reject')
+                    if (reject) {
+                        reject('Open file timeout')
+                    }
+                }
+            },
+        })
+
+        return await new Promise<string>((resolve, reject) => {
+            const reader = new FileReader()
+            reader.onload = function () {
+                resolve(reader.result as string)
+            }
+
+            reader.onerror = function () {
+                reject(reader.error)
+            }
+
+            if (Array.isArray(file) == false)
+                reader.readAsDataURL(file as FileWithHandle)
+            else reject("Don't select multiple files")
+        })
+    } catch (error) {
+        console.log(error)
+        return null
+    }
+}
+
+export async function CopyTextToClipboard(text: string) {
+    try {
+        await navigator.clipboard.writeText(text)
+    } catch (error) {
+        // https://github.com/sudodoki/copy-to-clipboard/blob/main/index.js
+        const input = document.createElement('input') as HTMLInputElement
+        input.type = 'text'
+        input.style.display = 'none'
+        input.value = text
+        input.ariaHidden = 'true'
+        // reset user styles for span element
+        input.style.all = 'unset'
+        // prevents scrolling to the end of the page
+        input.style.position = 'fixed'
+        input.style.top = '0'
+        input.style.clip = 'rect(0, 0, 0, 0)'
+
+        document.body.append(input)
+
+        input.select()
+        const successful = document.execCommand('copy')
+
+        input.remove()
+
+        if (!successful) {
+            throw new Error('copy command was unsuccessful')
+        }
+    }
+}

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

@@ -0,0 +1,4 @@
+/// <reference types="vite/client" />
+
+declare const __APP_VERSION__: string
+declare const __APP_BUILD_TIME__: number

sd-webui-3d-open-pose-editor/style.css

@@ -0,0 +1,11 @@
+#openpose3d_iframe {
+    display: block;
+    width: 100%;
+    height: calc(100vh - 150px);
+    min-height: 750px;
+}
+
+/* Workaround for ashen-sensored/stable-diffusion-webui-two-shot */
+#openpose3d_main .output-html {
+    display: block;
+}

sd-webui-3d-open-pose-editor/tools/fix-singlefile.ts

@@ -0,0 +1,16 @@
+import fs from 'fs-extra'
+import { zip } from 'zip-a-folder'
+import path from 'path'
+
+async function main() {
+    const content = fs.readFileSync(path.join('dist', 'index.html')).toString()
+
+    fs.writeFileSync(
+        path.join('dist', 'index.html'),
+        content.replace(`type="module" crossorigin`, 'defer')
+    )
+
+    await zip('dist', path.join('html.zip'))
+}
+
+main()

sd-webui-3d-open-pose-editor/tools/generate_assets.ts

@@ -0,0 +1,51 @@
+import fs from 'fs-extra'
+import path from 'path'
+const list: Record<
+    string,
+    {
+        prefix?: string
+        mimetype: string
+    }
+> = {
+    'models/foot.fbx': { mimetype: 'application/octet-stream' },
+    'models/hand.fbx': { mimetype: 'application/octet-stream' },
+    'src/poses/data.bin': { mimetype: 'application/octet-stream' },
+    'pose_landmark_full.tflite': {
+        prefix: 'node_modules/@mediapipe/pose/',
+        mimetype: 'application/octet-stream',
+    },
+    'pose_web.binarypb': {
+        prefix: 'node_modules/@mediapipe/pose/',
+        mimetype: 'application/octet-stream',
+    },
+    'pose_solution_packed_assets.data': {
+        prefix: 'node_modules/@mediapipe/pose/',
+        mimetype: 'application/octet-stream',
+    },
+    'pose_solution_simd_wasm_bin.wasm': {
+        prefix: 'node_modules/@mediapipe/pose/',
+        mimetype: 'application/wasm',
+    },
+    'pose_solution_packed_assets_loader.js': {
+        prefix: 'node_modules/@mediapipe/pose/',
+        mimetype: 'application/javascript',
+    },
+    'pose_solution_simd_wasm_bin.js': {
+        prefix: 'node_modules/@mediapipe/pose/',
+        mimetype: 'application/javascript',
+    },
+}
+
+const output = Object.fromEntries(
+    Object.entries(list).map(([file, { prefix, mimetype }]) => [
+        file,
+        `data:${mimetype};base64,${fs
+            .readFileSync(path.join(prefix ?? '.', file))
+            .toString('base64')}`,
+    ])
+)
+
+fs.writeFile(
+    'src/assets.ts',
+    'export default ' + JSON.stringify(output, null, 4)
+)

sd-webui-3d-open-pose-editor/tools/translate.ts

@@ -0,0 +1,42 @@
+import fs from 'fs-extra'
+import path from 'path'
+
+const resource = {
+    de: {
+        Generate: 'Generieren',
+    },
+    en: {
+        Generate: 'Generate',
+    },
+    ja: {
+        Generate: '生成する',
+    },
+    sp: {
+        Generate: 'Generar',
+    },
+    'zh-CN': {
+        Generate: '生成',
+    },
+    'zh-HK': {
+        Generate: '生成',
+    },
+    'zh-TW': {
+        Generate: '生成',
+    },
+}
+
+async function main() {
+    Object.entries(resource).forEach(([lng, content]) => {
+        const file = path.join('src/locales', `${lng}.json`)
+        const old = fs.readJSONSync(file)
+        const output = {
+            ...old,
+            ...content,
+        }
+        fs.writeJSONSync(file, output, {
+            spaces: 4,
+        })
+    })
+}
+
+main()

sd-webui-3d-open-pose-editor/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

sd-webui-3d-open-pose-editor/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts", "vite-plugin-extension.ts"]
+}

sd-webui-3d-open-pose-editor/vite-plugin-extension.ts

@@ -0,0 +1,77 @@
+import { type UserConfig, type Plugin } from 'vite'
+import { type OutputOptions } from 'rollup'
+import { resolve } from 'path'
+import { rename } from 'fs/promises'
+
+export default function (): Plugin {
+    return {
+        name: 'extension',
+        async writeBundle(options, bundle) {
+            for (const key in bundle) {
+                const b = bundle[key]
+                const type = b.type
+                if (type !== 'chunk' && type !== 'asset') {
+                    continue
+                }
+                const fileName = resolve(options.dir, b.fileName)
+                await rename(fileName, fileName.replace(/\?[0-9a-f]+$/, ''))
+            }
+        },
+        config(config, env) {
+            const common: UserConfig = {
+                base: './',
+                resolve: {
+                    alias: [
+                        {
+                            find: /.*\/assets(\.ts)?$/,
+                            replacement: resolve(
+                                __dirname,
+                                'src/environments/extension/assets.ts'
+                            ),
+                        },
+                    ],
+                },
+                build: {
+                    target: 'ESNext',
+                    emptyOutDir: false,
+                    rollupOptions: {
+                        output: {
+                            entryFileNames: '[name].js?[hash]',
+                            chunkFileNames: '[name].js?[hash]',
+                            assetFileNames: '[name][extname]?[hash]',
+                        },
+                    },
+                },
+            }
+            switch (env.mode) {
+                case 'extension-editor':
+                    {
+                        common.build.outDir = 'pages'
+                        common.build.rollupOptions.input = {
+                            index: resolve(__dirname, 'index.html'),
+                        }
+                    }
+                    break
+                case 'extension-entry':
+                    {
+                        common.build.outDir = 'javascript'
+                        common.build.rollupOptions.input = {
+                            index: resolve(
+                                __dirname,
+                                'src/environments/extension/entry.ts'
+                            ),
+                        }
+                        common.publicDir = false
+                        const output = common.build.rollupOptions
+                            .output as OutputOptions
+                        output.format = 'iife'
+                    }
+
+                    break
+                default:
+                    throw Error(`Unknown mode: ${env.mode}`)
+            }
+            return common
+        },
+    }
+}

sd-webui-3d-open-pose-editor/vite.config.ts

@@ -0,0 +1,130 @@
+import { defineConfig, UserConfigFn } from 'vite'
+import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'
+import { visualizer } from 'rollup-plugin-visualizer'
+import { resolve } from 'path'
+import ConditionalCompile from 'vite-plugin-conditional-compiler'
+import ExtensionPlugin from './vite-plugin-extension'
+
+// https://vitejs.dev/config/
+const config: UserConfigFn = ({ command, mode, ssrBuild }) => {
+    const pwa = VitePWA({
+        workbox: {
+            globPatterns: ['**/*.{js,css,html,ico,png,svg,mp3,obj,fbx,bin}'],
+            // https://vite-pwa-org.netlify.app/workbox/generate-sw.html#cache-external-resources
+            runtimeCaching: [
+                {
+                    urlPattern: /^https:\/\/cdn\.jsdelivr\.net\/.*/i,
+                    handler: 'CacheFirst',
+                    options: {
+                        cacheName: 'jsdelivr-cdn',
+                        expiration: {
+                            maxEntries: 10,
+                            maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+                        },
+                        cacheableResponse: {
+                            statuses: [0, 200],
+                        },
+                    },
+                },
+                {
+                    urlPattern:
+                        /^https:\/\/openpose-editor.oss-cn-beijing\.aliyuncs\.com\/.*/i,
+                    handler: 'CacheFirst',
+                    options: {
+                        cacheName: 'aliyuncs',
+                        expiration: {
+                            maxEntries: 10,
+                            maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+                        },
+                        cacheableResponse: {
+                            statuses: [0, 200],
+                        },
+                    },
+                },
+            ],
+        },
+        includeAssets: [
+            'favicon.ico',
+            'apple-touch-icon.png',
+            'safari-pinned-tab.svg',
+        ],
+        manifest: {
+            name: '3D Openpose Editor',
+            short_name: '3D Openpose Editor',
+            description: '3D Openpose Editor (Yu Zhu)',
+            theme_color: '#ffffff',
+            background_color: '#ffffff',
+            icons: [
+                {
+                    src: 'icons/icon-72x72.png',
+                    sizes: '72x72',
+                    type: 'image/png',
+                },
+                {
+                    src: 'icons/icon-96x96.png',
+                    sizes: '96x96',
+                    type: 'image/png',
+                },
+                {
+                    src: 'icons/icon-128x128.png',
+                    sizes: '128x128',
+                    type: 'image/png',
+                },
+                {
+                    src: 'icons/icon-144x144.png',
+                    sizes: '144x144',
+                    type: 'image/png',
+                },
+                {
+                    src: 'icons/icon-152x152.png',
+                    sizes: '152x152',
+                    type: 'image/png',
+                },
+                {
+                    src: 'icons/icon-192x192.png',
+                    sizes: '192x192',
+                    type: 'image/png',
+                },
+                {
+                    src: 'icons/icon-384x384.png',
+                    sizes: '384x384',
+                    type: 'image/png',
+                },
+                {
+                    src: 'icons/icon-512x512.png',
+                    sizes: '512x512',
+                    type: 'image/png',
+                },
+                {
+                    src: 'icons/icon-512x512.png',
+                    sizes: '512x512',
+                    type: 'image/png',
+                    purpose: 'maskable any',
+                },
+            ],
+        },
+    })
+
+    return {
+        base: mode === 'singlefile' ? './' : '/open-pose-editor/',
+        define: {
+            global: {},
+            __APP_VERSION__: JSON.stringify('0.1.18'),
+            __APP_BUILD_TIME__: Date.now(),
+        },
+        build: {
+            assetsDir: mode === 'singlefile' ? '.' : 'assets',
+            emptyOutDir: true,
+        },
+        plugins: [
+            react(),
+            mode === 'online' ? pwa : null,
+            visualizer(),
+            ConditionalCompile(),
+            mode.startsWith('extension') ? ExtensionPlugin() : null,
+        ],
+    }
+}
+
+export default defineConfig(config)