feat: Enhance pose image export functionality with timestamped filenames and improved drawing logic

- Added a new function `get_timestamp_filename` to generate filenames with timestamps.
- Updated `export_pose_as_image` to support drawing hands and faces based on new data structures.
- Improved body drawing logic to adhere to the new refs format.
- Enhanced hand and face drawing functions to include coordinate normalization.
- Added detailed debug logging for better traceability during image export.
- Removed redundant success notifications, allowing app.py to handle them.

app.py

@@ -1,11 +1,21 @@
 import gradio as gr
 import os
+from PIL import Image
 from utils.pose_utils import initialize_dwpose, safe_detect_pose
 from utils.notifications import notify_success, notify_error, NotificationMessages
 from utils.coordinate_system import update_coordinate_system
 from utils.image_processing import process_uploaded_image
-from utils.export_utils import export_pose_as_image, export_pose_as_json
+from utils.export_utils import export_pose_as_image, export_pose_as_json, get_timestamp_filename
 import json
+import tempfile
+import base64
+import io
+import time
+
+# グローバル変数（refs互換）- 編集中のポーズデータを保持
+_current_poses = None  # refsと同じマルチフレーム管理
+_current_frame_index = 0  # 現在編集中のフレーム
+_is_updating = False  # Issue 038: データ同期処理中フラグ（refs issue043準拠）
 
 def load_javascript():
     """JavaScriptファイルを読み込む"""
@@ -13,6 +23,21 @@ def load_javascript():
     with open(js_path, "r", encoding="utf-8") as f:
         return f"<script>{f.read()}</script>"
 
+def image_to_base64(image):
+    """PIL画像をBase64データURLに変換"""
+    if image is None:
+        return None
+    
+    # 画像をリサイズ（Canvas表示用に640x640以下に）
+    max_size = 640
+    image.thumbnail((max_size, max_size), Image.Resampling.LANCZOS)
+    
+    # Base64エンコード
+    buffer = io.BytesIO()
+    image.save(buffer, format='PNG')
+    img_str = base64.b64encode(buffer.getvalue()).decode()
+    return f"data:image/png;base64,{img_str}"
+
 def main():
     # DWPoseモデル初期化
     success, message = initialize_dwpose()
@@ -45,6 +70,13 @@ def main():
                     ],
                     value="2頭身立ちポーズ"
                 )
+                
+                # JSONファイルアップロード
+                json_upload = gr.File(
+                    label="JSONファイルをロード",
+                    file_types=[".json"],
+                    elem_id="json_upload"
+                )
             
             # 中央：エディット部
             with gr.Column(scale=2):
@@ -98,33 +130,54 @@ def main():
             
                 # 非表示のデータ保持用コンポーネント
                 pose_data = gr.JSON(visible=False, value={})
+                
+                # JavaScript→Python データ転送用の隠しテキストボックス
+                js_pose_update = gr.Textbox(visible=False, elem_id="js_pose_update")
             
             # 右側：出力部
             with gr.Column(scale=1):
                 gr.Markdown("### 出力")
                 
-                # ポーズ画像出力
+                # ポーズ画像出力（非表示）
                 output_image = gr.Image(
                     label="ポーズ画像",
                     type="pil",
-                    elem_id="output_image"
+                    elem_id="output_image",
+                    visible=False
                 )
                 
-                # ポーズ画像ダウンロードボタン
-                download_image_btn = gr.Button("画像をダウンロード", variant="secondary")
+                # ポーズ画像ダウンロード（2クリック方式）
+                download_image_btn = gr.Button(
+                    "📥 画像をダウンロード", 
+                    variant="secondary"
+                )
+                download_image_file = gr.File(
+                    label="画像ファイル",
+                    visible=False
+                )
                 
-                # JSONデータ表示
+                # JSONデータ表示（非表示）
                 output_json = gr.JSON(
                     label="ポーズデータ (JSON)",
-                    elem_id="output_json"
+                    elem_id="output_json",
+                    visible=False
                 )
                 
-                # JSONダウンロードボタン
-                download_json_btn = gr.Button("JSONをダウンロード", variant="secondary")
+                # JSONダウンロード（2クリック方式）
+                download_json_btn = gr.Button(
+                    "📥 JSONをダウンロード", 
+                    variant="secondary"
+                )
+                download_json_file = gr.File(
+                    label="JSONファイル",
+                    visible=False
+                )
         
         # イベントハンドラー
         def on_image_upload(image):
-            """画像アップロード時のポーズ検出"""
+            """画像アップロード時のポーズ検出（refs互換・マルチフレーム管理）"""
+            global _current_poses, _current_frame_index
+            
             if image is None:
                 return None, {}
             
@@ -150,10 +203,44 @@ def main():
                         zero_count = len([c for c in candidates if c and len(c) >= 2 and (c[0] == 0 or c[1] == 0)])
                         print(f"[DEBUG] ✅ Valid candidates: {valid_count}, 🚫 Zero coordinates: {zero_count}")
                 
-                return pose_result, pose_result
+                # refsと同じ_current_poses形式で保存
+                if pose_result:
+                    # people形式に変換
+                    person_data = {
+                        "pose_keypoints_2d": [],
+                        "hand_left_keypoints_2d": pose_result.get('hands', [[], []])[0] if pose_result.get('hands') else [],
+                        "hand_right_keypoints_2d": pose_result.get('hands', [[], []])[1] if pose_result.get('hands') and len(pose_result['hands']) > 1 else [],
+                        "face_keypoints_2d": pose_result.get('faces', [[]])[0] if pose_result.get('faces') else []
+                    }
+                    
+                    # bodies.candidateからpose_keypoints_2d変換
+                    if 'bodies' in pose_result and 'candidate' in pose_result['bodies']:
+                        candidates = pose_result['bodies']['candidate']
+                        for candidate in candidates:
+                            if candidate and len(candidate) >= 2:
+                                person_data["pose_keypoints_2d"].extend([candidate[0], candidate[1], candidate[2] if len(candidate) > 2 else 1.0])
+                    
+                    _current_poses = [{
+                        'people': [person_data],
+                        'metadata': {
+                            'resolution': pose_result.get('resolution', [512, 512])
+                        }
+                    }]
+                    _current_frame_index = 0
+                    print(f"[DEBUG] ✅ グローバル変数更新完了（画像アップロード・refs互換）")
+                
+                # 🎨 背景画像をJavaScriptに設定
+                image_base64 = image_to_base64(image)
+                js_code = f"""
+                if (window.setBackgroundImage) {{
+                    window.setBackgroundImage('{image_base64}');
+                }}
+                """
+                
+                return pose_result, pose_result, gr.update(value=js_code)
             else:
                 print(f"[DEBUG] ❌ Pose detection failed")
-                return None, {}
+                return None, {}, gr.update()
         
         def on_canvas_size_update(width, height):
             """Canvas解像度更新"""
@@ -189,7 +276,9 @@ def main():
             return gr.update(value=js_code)
         
         def load_template_pose(template_name):
-            """テンプレートポーズを読み込み"""
+            """テンプレートポーズを読み込み（refs互換・マルチフレーム管理）"""
+            global _current_poses, _current_frame_index
+            
             try:
                 templates_path = os.path.join(os.path.dirname(__file__), "templates", "poses.json")
                 with open(templates_path, "r", encoding="utf-8") as f:
@@ -205,6 +294,33 @@ def main():
                 template_key = template_key_map.get(template_name)
                 if template_key and template_key in templates["poses"]:
                     pose_data = templates["poses"][template_key]["data"]
+                    
+                    # refsと同じ_current_poses形式で保存
+                    if pose_data:
+                        # people形式に変換してから保存
+                        person_data = {
+                            "pose_keypoints_2d": [],
+                            "hand_left_keypoints_2d": pose_data.get('hands', [[], []])[0] if pose_data.get('hands') else [],
+                            "hand_right_keypoints_2d": pose_data.get('hands', [[], []])[1] if pose_data.get('hands') and len(pose_data['hands']) > 1 else [],
+                            "face_keypoints_2d": pose_data.get('faces', [[]])[0] if pose_data.get('faces') else []
+                        }
+                        
+                        # bodies.candidateからpose_keypoints_2d変換
+                        if 'bodies' in pose_data and 'candidate' in pose_data['bodies']:
+                            candidates = pose_data['bodies']['candidate']
+                            for candidate in candidates:
+                                if candidate and len(candidate) >= 2:
+                                    person_data["pose_keypoints_2d"].extend([candidate[0], candidate[1], candidate[2] if len(candidate) > 2 else 1.0])
+                        
+                        _current_poses = [{
+                            'people': [person_data],
+                            'metadata': {
+                                'resolution': pose_data.get('resolution', [512, 512])
+                            }
+                        }]
+                        _current_frame_index = 0
+                        print(f"[DEBUG] ✅ グローバル変数更新完了（テンプレート読み込み・refs互換）: {template_name}")
+                    
                     notify_success(f"{template_name}を読み込みました")
                     return pose_data, pose_data
                 else:
@@ -215,23 +331,347 @@ def main():
                 notify_error(f"テンプレート読み込みに失敗しました: {str(e)}")
                 return None, {}
         
-        def export_image(pose_data):
-            """ポーズ画像をエクスポート"""
-            if not pose_data:
+        def export_image(pose_data, draw_hand, draw_face):
+            """ポーズ画像をエクスポート（Button + File方式）（refs互換・マルチフレーム管理）"""
+            global _current_poses, _current_frame_index
+            
+            # refsと同じ_current_posesから最新データを取得
+            export_data = None
+            if _current_poses and 0 <= _current_frame_index < len(_current_poses):
+                current_frame = _current_poses[_current_frame_index]
+                if current_frame['people'] and current_frame['people'][0]:
+                    person = current_frame['people'][0]
+                    
+                    # people形式からbodies.candidate形式に変換（エクスポート用）
+                    export_data = {
+                        'bodies': {'candidate': [], 'subset': []},
+                        'hands': [],
+                        'faces': [],
+                        'resolution': current_frame['metadata'].get('resolution', [512, 512])
+                    }
+                    
+                    # pose_keypoints_2d をcandidate形式に変換
+                    if 'pose_keypoints_2d' in person:
+                        pose_keypoints = person['pose_keypoints_2d']
+                        for i in range(0, len(pose_keypoints), 3):
+                            if i + 2 < len(pose_keypoints):
+                                x = pose_keypoints[i]
+                                y = pose_keypoints[i + 1]
+                                conf = pose_keypoints[i + 2]
+                                export_data['bodies']['candidate'].append([x, y, conf, 0])
+                    
+                    # 手と顔データ
+                    left_hand = person.get('hand_left_keypoints_2d', [])
+                    right_hand = person.get('hand_right_keypoints_2d', [])
+                    face_data = person.get('face_keypoints_2d', [])
+                    
+                    export_data['hands'] = [left_hand, right_hand]
+                    export_data['faces'] = [face_data] if face_data else []
+            
+            # フォールバック：引数のpose_dataを使用
+            if export_data is None:
+                export_data = pose_data
+            
+            print(f"[DEBUG] 🖼️ 画像ダウンロードボタンクリック")
+            print(f"[DEBUG] 📊 グローバルデータ: {bool(_current_poses)}, 引数データ: {bool(pose_data)}")
+            print(f"[DEBUG] 📊 使用データ: {bool(export_data)}, 手: {draw_hand}, 顔: {draw_face}")
+            
+            if export_data:
+                print(f"[DEBUG] 📊 エクスポートデータキー: {list(export_data.keys()) if isinstance(export_data, dict) else 'not a dict'}")
+                if isinstance(export_data, dict):
+                    for key, value in export_data.items():
+                        print(f"[DEBUG] 📊 {key}: {type(value)} - {len(value) if isinstance(value, (list, dict)) else value}")
+                
+                # 🚨 グローバルデータの詳細チェック
+                if _current_pose_data:
+                    print(f"[DEBUG] 🔍 グローバルデータ詳細:")
+                    print(f"[DEBUG] 🔍   - Type: {type(_current_pose_data)}")
+                    print(f"[DEBUG] 🔍   - Keys: {list(_current_pose_data.keys()) if isinstance(_current_pose_data, dict) else 'Not dict'}")
+                    if isinstance(_current_pose_data, dict) and 'bodies' in _current_pose_data:
+                        print(f"[DEBUG] 🔍   - Bodies: {bool(_current_pose_data['bodies'])}")
+                        if 'candidate' in _current_pose_data['bodies']:
+                            candidates = _current_pose_data['bodies']['candidate']
+                            print(f"[DEBUG] 🔍   - Candidates: {len(candidates) if candidates else 0}")
+                    if isinstance(_current_pose_data, dict) and 'resolution' in _current_pose_data:
+                        print(f"[DEBUG] 🔍   - Resolution: {_current_pose_data['resolution']}")
+                else:
+                    print(f"[DEBUG] 🔍 グローバルデータがNone")
+            
+            if not export_data:
                 notify_error("エクスポートするポーズデータがありません")
-                return None
+                print(f"[DEBUG] ❌ データなし")
+                return gr.update(visible=False)
             
-            image = export_pose_as_image(pose_data)
-            return image
+            try:
+                # 🎨 表示設定を反映した画像エクスポート��解像度準拠）
+                canvas_width = 512  # デフォルト解像度
+                canvas_height = 512
+                if 'resolution' in export_data and len(export_data['resolution']) >= 2:
+                    canvas_width = export_data['resolution'][0]
+                    canvas_height = export_data['resolution'][1]
+                    
+                # 🚨 画像生成前のデータ検証
+                print(f"[DEBUG] 🎨 画像生成開始: canvas_size=({canvas_width}, {canvas_height})")
+                if 'bodies' in export_data and 'candidate' in export_data['bodies']:
+                    candidates = export_data['bodies']['candidate']
+                    print(f"[DEBUG] 🎨 Candidates for image: {len(candidates) if candidates else 0}")
+                    if candidates:
+                        valid_candidates = [c for c in candidates if c and len(c) >= 2 and c[0] > 0 and c[1] > 0]
+                        print(f"[DEBUG] 🎨 Valid candidates: {len(valid_candidates)}")
+                
+                image = export_pose_as_image(
+                    export_data, 
+                    canvas_size=(canvas_width, canvas_height),
+                    enable_hands=draw_hand, 
+                    enable_face=draw_face
+                )
+                if image is None:
+                    print(f"[DEBUG] ❌ 画像生成失敗 - export_pose_as_image returned None")
+                    return gr.update(visible=False)
+                
+                # タイムスタンプ付きファイル名でテンポラリファイルに保存
+                filename = get_timestamp_filename("dwpose_edit", "png")
+                temp_path = os.path.join(tempfile.gettempdir(), filename)
+                image.save(temp_path)
+                
+                print(f"[DEBUG] ✅ ファイル準備完了: {temp_path}")
+                notify_success(f"画像をエクスポートしました: {filename}")
+                
+                # 🎯 Button + File方式でファイルを表示
+                return gr.update(value=temp_path, visible=True)
+                
+            except Exception as e:
+                print(f"[DEBUG] ❌ エラー: {e}")
+                notify_error(f"画像エクスポートエラー: {str(e)}")
+                return gr.update(visible=False)
         
         def export_json(pose_data):
-            """ポーズJSONをエクスポート"""
-            if not pose_data:
+            """ポーズJSONをエクスポート（Button + File方式）（refs互換・グローバル管理）"""
+            global _current_pose_data
+            
+            # グローバル変数のデータを優先使用（最新の編集データ）
+            export_data = _current_pose_data if _current_pose_data is not None else pose_data
+            
+            print(f"[DEBUG] 📥 JSONダウンロードボタンクリック")
+            print(f"[DEBUG] 📊 グローバルデータ: {bool(_current_pose_data)}, 引数データ: {bool(pose_data)}")
+            print(f"[DEBUG] 📊 使用データ: {bool(export_data)}")
+            
+            if not export_data:
                 notify_error("エクスポートするポーズデータがありません")
-                return ""
+                print(f"[DEBUG] ❌ データなし")
+                return gr.update(visible=False)
             
-            json_str = export_pose_as_json(pose_data)
-            return json_str or ""
+            try:
+                json_str = export_pose_as_json(export_data)
+                if not json_str:
+                    print(f"[DEBUG] ❌ JSON生成失敗")
+                    return gr.update(visible=False)
+                
+                # タイムスタンプ付きファイル名でテンポラリファイルに保存
+                filename = get_timestamp_filename("dwpose_data", "json")
+                temp_path = os.path.join(tempfile.gettempdir(), filename)
+                
+                with open(temp_path, 'w', encoding='utf-8') as f:
+                    f.write(json_str)
+                
+                print(f"[DEBUG] ✅ ファイル準備完了: {temp_path}")
+                notify_success(f"JSONをエクスポートしました: {filename}")
+                
+                # 🎯 Button + File方式でファイルを表示
+                return gr.update(value=temp_path, visible=True)
+                
+            except Exception as e:
+                print(f"[DEBUG] ❌ エラー: {e}")
+                notify_error(f"JSONエクスポートエラー: {str(e)}")
+                return gr.update(visible=False)
+        
+        def on_js_pose_update(js_pose_str):
+            """JavaScript側からのポーズデータ更新（refs互換・マルチフレーム管理）"""
+            global _current_poses, _current_frame_index, _is_updating
+            
+            update_timestamp = int(time.time() * 1000)
+            print(f"[DEBUG] 🔄 JavaScript→Python データ転送開始: {len(js_pose_str) if js_pose_str else 0}文字, timestamp={update_timestamp}")
+            print(f"[DEBUG] 🔍 更新フラグ状態: _is_updating={_is_updating}")
+            print(f"[DEBUG] 🔍 グローバル状態: _current_poses={bool(_current_poses)}, _current_frame_index={_current_frame_index}")
+            
+            # データの中身をちょっと確認
+            if js_pose_str:
+                try:
+                    data_preview = json.loads(js_pose_str)
+                    print(f"[DEBUG] 🔍 受信データ構造:", {
+                        'hasPeople': 'people' in data_preview,
+                        'peopleCount': len(data_preview.get('people', [])),
+                        'hasHandLeft': bool(data_preview.get('people', [{}])[0].get('hand_left_keypoints_2d')) if data_preview.get('people') else False,
+                        'hasHandRight': bool(data_preview.get('people', [{}])[0].get('hand_right_keypoints_2d')) if data_preview.get('people') else False,
+                        'hasFace': bool(data_preview.get('people', [{}])[0].get('face_keypoints_2d')) if data_preview.get('people') else False
+                    })
+                except:
+                    print(f"[DEBUG] 🔍 受信データパース失敗")
+            
+            # Issue 038: 処理中フラグチェック（refs issue043準拠）
+            if _is_updating:
+                print(f"[DEBUG] ⚠️ データ更新処理中のため、新しい要求をスキップ (timestamp={update_timestamp})")
+                return gr.update(), ""  # 現在の状態を維持
+            
+            if not js_pose_str or js_pose_str.strip() == "":
+                return gr.update(), ""  # pose_data更新なし、テキストボックスクリア
+            
+            # 処理開始フラグを立てる
+            _is_updating = True
+            print(f"[DEBUG] 🔒 データ更新フラグ設定: _is_updating={_is_updating} (timestamp={update_timestamp})")
+                
+            try:
+                # JSON文字列をパース
+                canvas_data = json.loads(js_pose_str)
+                print(f"[DEBUG] 🎨 Canvas JSON解析成功: keys={list(canvas_data.keys())}")
+                
+                # refs互換：タイムスタンプを除去
+                if '_t' in canvas_data:
+                    del canvas_data['_t']
+                    print(f"[DEBUG] 🔄 タイムスタンプ除去完了")
+                
+                # peopleフォーマットからpose_dataを抽出（refs互換方式）
+                if 'people' in canvas_data and canvas_data['people']:
+                    pose_data = canvas_data['people'][0]
+                    print(f"[DEBUG] 🎯 People形式データ抽出成功")
+                    
+                    # _current_posesの初期化（初回のみ）
+                    if _current_poses is None:
+                        _current_poses = [{
+                            'people': [pose_data],
+                            'metadata': {
+                                'resolution': canvas_data.get('resolution', [512, 512])
+                            }
+                        }]
+                        print(f"[DEBUG] 🚀 _current_poses初期化完了")
+                    else:
+                        # 現在のフレームのpeopleデータを更新（refs互換）
+                        if 0 <= _current_frame_index < len(_current_poses):
+                            _current_poses[_current_frame_index]['people'] = [pose_data]
+                            print(f"[DEBUG] 🎯 フレーム{_current_frame_index}のpeopleデータ更新完了")
+                        else:
+                            # フレームが範囲外の場合は追加
+                            _current_poses.append({
+                                'people': [pose_data],
+                                'metadata': {
+                                    'resolution': canvas_data.get('resolution', [512, 512])
+                                }
+                            })
+                            print(f"[DEBUG] 🎯 新フレーム追加完了")
+                    
+                    # 表示用に現在のフレームデータを構築（既存UI互換）
+                    current_frame_data = _current_poses[_current_frame_index]
+                    display_data = {
+                        'bodies': {'candidate': [], 'subset': []},
+                        'hands': [],
+                        'faces': [],
+                        'resolution': current_frame_data['metadata'].get('resolution', [512, 512])
+                    }
+                    
+                    # people形式からbodies.candidate形式に変換（表示用）
+                    if current_frame_data['people'] and current_frame_data['people'][0]:
+                        person = current_frame_data['people'][0]
+                        
+                        # pose_keypoints_2d をcandidate形式に変換
+                        if 'pose_keypoints_2d' in person:
+                            pose_keypoints = person['pose_keypoints_2d']
+                            print(f"[DEBUG] 🔄 pose_keypoints length: {len(pose_keypoints)}")
+                            
+                            if len(pose_keypoints) >= 3:
+                                for i in range(0, len(pose_keypoints), 3):
+                                    if i + 2 < len(pose_keypoints):
+                                        x = pose_keypoints[i]
+                                        y = pose_keypoints[i + 1]
+                                        conf = pose_keypoints[i + 2]
+                                        display_data['bodies']['candidate'].append([x, y, conf, 0])
+                        
+                        # 手と顔データ（表示用）
+                        left_hand = person.get('hand_left_keypoints_2d', [])
+                        right_hand = person.get('hand_right_keypoints_2d', [])
+                        face_data = person.get('face_keypoints_2d', [])
+                        
+                        display_data['hands'] = [left_hand, right_hand]
+                        display_data['faces'] = [face_data] if face_data else []
+                        
+                        print(f"[DEBUG] 🫳 Hand data: left={len(left_hand)}, right={len(right_hand)}")
+                        print(f"[DEBUG] 😊 Face data: {len(face_data) if face_data else 0}")
+                    
+                    print(f"[DEBUG] ✅ refs互換データ更新完了: frames={len(_current_poses)}")
+                    print(f"[DEBUG] 📊 表示用データ: candidates={len(display_data['bodies']['candidate'])}")
+                    
+                    # pose_dataコンポーネントを更新、テキストボックスをクリア
+                    return display_data, ""
+                
+            except json.JSONDecodeError as e:
+                print(f"[DEBUG] ❌ JavaScript→Python JSONパースエラー: {e}")
+                return gr.update(), ""  # エラー時は更新せず、テキストボックスクリア
+            except Exception as e:
+                print(f"[DEBUG] ❌ JavaScript→Python エラー: {e}")
+                return gr.update(), ""
+            finally:
+                # Issue 038: 処理完了後は必ずフラグを解除（refs issue043準拠）
+                old_flag = _is_updating
+                _is_updating = False
+                print(f"[DEBUG] 🔓 データ更新処理完了 - フラグ解除: {old_flag} → {_is_updating} (timestamp={update_timestamp})")
+        
+        def on_json_upload(file):
+            """JSONファイルアップロード時の処理（refs互換・グローバル管理）"""
+            global _current_pose_data
+            
+            if file is None:
+                return None, {}
+            
+            try:
+                # ファイルを読み込む
+                with open(file.name, 'r', encoding='utf-8') as f:
+                    json_content = f.read()
+                
+                # JSONをパース
+                loaded_data = json.loads(json_content)
+                
+                # データ検証
+                if not validate_pose_json(loaded_data):
+                    notify_error("無効なポーズデータフォーマットです")
+                    return None, {}
+                
+                # メタデータを除去（存在する場合）
+                if 'metadata' in loaded_data:
+                    del loaded_data['metadata']
+                
+                # グローバル変数に保存（refs互換）
+                _current_pose_data = loaded_data.copy()
+                print(f"[DEBUG] ✅ グローバル変数更新完了（JSON読み込み）")
+                
+                notify_success("JSONファイルを読み込みました")
+                return loaded_data, loaded_data
+                
+            except json.JSONDecodeError as e:
+                notify_error(f"JSONパースエラー: {str(e)}")
+                return None, {}
+            except Exception as e:
+                notify_error(f"ファイル読み込みエラー: {str(e)}")
+                return None, {}
+        
+        def validate_pose_json(data):
+            """ポーズJSONデータの検証"""
+            if not isinstance(data, dict):
+                return False
+            
+            # 最低限必要なキーをチェック
+            required_keys = ['bodies']
+            for key in required_keys:
+                if key not in data:
+                    return False
+            
+            # bodiesの構造をチェック
+            if 'bodies' in data:
+                bodies = data['bodies']
+                if not isinstance(bodies, dict):
+                    return False
+                if 'candidate' not in bodies and 'subset' not in bodies:
+                    return False
+            
+            return True
         
         # 隠しコンポーネント（JavaScript実行用）
         js_executor = gr.HTML(visible=False, elem_id="js_executor")
@@ -240,7 +680,7 @@ def main():
         input_image.change(
             fn=on_image_upload,
             inputs=[input_image],
-            outputs=[output_json, pose_data]
+            outputs=[output_json, pose_data, js_executor]
         )
         
         # pose_data変更時にCanvas更新（重要！）- 無限ループ防止
@@ -284,17 +724,31 @@ def main():
             outputs=[output_json, pose_data]
         )
         
-        # エクスポートイベント
+        # エクスポートイベント (refs互換DownloadButton方式)
         download_image_btn.click(
             fn=export_image,
-            inputs=[pose_data],
-            outputs=[output_image]
+            inputs=[pose_data, draw_hand, draw_face],
+            outputs=[download_image_file]
         )
         
         download_json_btn.click(
             fn=export_json,
             inputs=[pose_data],
-            outputs=[output_json]
+            outputs=[download_json_file]
+        )
+        
+        # JavaScript→Python データ転送イベント
+        js_pose_update.change(
+            fn=on_js_pose_update,
+            inputs=[js_pose_update],
+            outputs=[pose_data, js_pose_update]  # pose_data更新 + テキストボックスクリア
+        )
+        
+        # JSONファイルアップロードイベント
+        json_upload.change(
+            fn=on_json_upload,
+            inputs=[json_upload],
+            outputs=[output_json, pose_data]
         )
         
     return demo

issues/029_手顔表示リアルタイム反映修正.md

@@ -0,0 +1,38 @@
+# Issue 029: 手顔表示リアルタイム反映修正 🎨🔧
+
+## 📋 問題概要
+
+手を表示・顔を表示のチェックボックス変更が、Canvasにリアルタイムで反映されない。オフにした時は即座に手や顔が非表示になるべき。
+
+## 🎯 解決目標
+
+1. **リアルタイム更新**: チェックボックス変更時に即座にCanvas更新
+2. **手表示制御**: 手を表示のオン/オフがすぐに反映
+3. **顔表示制御**: 顔を表示のオン/オフがすぐに反映
+4. **スムーズな操作**: ユーザーがチェックボックスを変更したらすぐに結果が見える
+
+## 🔧 実装内容
+
+### app.py の修正
+- 表示設定変更イベントの強化
+- JavaScript側への即座の設定反映
+
+### static/pose_editor.js の修正
+- updateDisplaySettings関数の改善
+- drawPose関数での表示設定チェック強化
+
+## ✅ 完了条件
+
+- [ ] 手を表示チェックボックスのオン/オフが即座に反映される
+- [ ] 顔を表示チェックボックスのオン/オフが即座に反映される
+- [ ] チェックボックス変更後にCanvas再描画が実行される
+- [ ] 表示設定がグローバル変数に正しく保存される
+
+## 📝 参考資料
+
+- refs/dwpose_modifier の表示設定実装
+- Gradio イベントハンドリング
+
+## 🏷️ タグ
+
+`bug` `ui` `realtime` `display-settings`

issues/030_JSONダウンロードボタン表示修正.md

@@ -0,0 +1,35 @@
+# Issue 030: JSONダウンロードボタン表示修正 📁🔧
+
+## 📋 問題概要
+
+JSONをダウンロードボタンを押すと、「画像をダウンロード」というメッセージが表示される。正しくは「JSONをダウンロード」メッセージが表示されるべき。
+
+## 🎯 解決目標
+
+1. **正しいメッセージ表示**: JSONダウンロード時に適切なメッセージ
+2. **通知の統一**: 画像とJSONで異なる通知メッセージ
+3. **ユーザー体験改善**: 何をダウンロードしたかが分かりやすい
+
+## 🔧 実装内容
+
+### app.py の修正
+- export_json関数の通知メッセージ修正
+- notify_success呼び出しの確認
+
+### utils/export_utils.py の修正
+- export_pose_as_json関数の通知メッセージ確認
+
+## ✅ 完了条件
+
+- [ ] JSONダウンロード時に「JSONをダウンロード」メッセージが表示される
+- [ ] 画像ダウンロード時は「画像をダウンロード」メッセージのまま
+- [ ] 通知メッセージが処理内容と一致している
+
+## 📝 参考資料
+
+- utils/notifications.py の通知システム
+- Gradio 通知機能
+
+## 🏷️ タグ
+
+`bug` `ui` `notification` `download`

issues/031_JSONダウンロード保存先修正.md

@@ -0,0 +1,40 @@
+# Issue 031: JSONダウンロード保存先修正 💾🔧
+
+## 📋 問題概要
+
+JSONダウンロードボタンを押してもブラウザのデフォルトダウンロードフォルダにファイルが保存されない。適切なファイルダウンロード機能が動作していない。
+
+## 🎯 解決目標
+
+1. **ファイルダウンロード機能**: ブラウザのダウンロードフォルダに保存
+2. **適切なMIMEタイプ**: JSONファイルとして認識される
+3. **ファイル名の保持**: タイムスタンプ付きファイル名でダウンロード
+4. **Gradio File機能**: gr.Fileコンポーネントの正しい使用
+
+## 🔧 実装内容
+
+### app.py の修正
+- gr.Fileコンポーネントの設定確認
+- ダウンロードイベントハンドラーの修正
+- ファイルパス返却方式の見直し
+
+### ブラウザダウンロード機能
+- Content-Dispositionヘッダーの設定
+- ファイルダウンロードトリガーの実装
+
+## ✅完了条件
+
+- [ ] JSONファイルがブラウザのダウンロードフォルダに保存される
+- [ ] ファイル名が正しく設定される（dwpose_data_YYYYMMDD_HHMMSS.json）
+- [ ] ダウンロード時にブラウザの保存ダイアログが表示される
+- [ ] JSON形式として正しく認識される
+
+## 📝 参考資料
+
+- Gradio File download 機能
+- ブラウザファイルダウンロード仕様
+- refs/dwpose_modifier のダウンロード実装
+
+## 🏷️ タグ
+
+`bug` `download` `file-handling` `browser`

issues/032_画像ダウンロードボタン動作修正.md

@@ -0,0 +1,44 @@
+# Issue 032: 画像ダウンロードボタン動作修正 🖼️🔧
+
+## 📋 問題概要
+
+画像をダウンロードボタンが効かない。ボタンを押してもファイルダウンロードが実行されない状態。
+
+## 🎯 解決目標
+
+1. **ボタン動作修復**: クリック時にダウンロード処理が実行される
+2. **画像ファイル生成**: ポーズデータから画像を正しく生成
+3. **ファイルダウンロード**: ブラウザでファイル保存が実行される
+4. **エラーハンドリング**: 失敗時の適切なエラー表示
+
+## 🔧 実装内容
+
+### app.py の修正
+- export_image関数のデバッグ
+- download_image_btn.clickイベントの確認
+- gr.Fileコンポーネントへの出力確認
+
+### utils/export_utils.py の修正
+- export_pose_as_image関数の動作確認
+- 画像生成処理のデバッグ
+
+### エラー調査
+- コンソールエラーメッセージの確認
+- 処理フローの検証
+
+## ✅ 完了条件
+
+- [ ] 画像ダウンロードボタンをクリックするとファイルがダウンロードされる
+- [ ] 手・顔の表示設定が画像に正しく反映される
+- [ ] ファイル名が適切に設定される（dwpose_edit_YYYYMMDD_HHMMSS.png）
+- [ ] エラー時に適切な通知が表示される
+
+## 📝 参考資料
+
+- Gradio Button and File component
+- PIL Image処理
+- 一時ファイル生成とダウンロード
+
+## 🏷️ タグ
+
+`bug` `download` `image` `button-action`

issues/033_詳細モードキーポイント直接編集実装.md

@@ -0,0 +1,57 @@
+# Issue 033: 詳細モードキーポイント直接編集実装 ✏️💫
+
+## 📋 問題概要
+
+詳細モードに切り替えても、手や顔のキーポイントを直接ドラッグして編集できない。矩形の表示もラジオボタン変更にリアルタイムで反映されていない。
+
+## 🎯 解決目標
+
+1. **詳細モード直接編集**: キーポイントを個別にドラッグして編集可能
+2. **リアルタイム切り替え**: 簡易モード↔詳細モード即座に反映
+3. **矩形表示制御**: 簡易モードでのみ矩形表示、詳細モードでは非表示
+4. **キーポイント操作**: 手・顔の個別キーポイント選択とドラッグ
+
+## 🔧 実装内容
+
+### static/pose_editor.js の修正
+- 詳細モードでのマウスイベント処理追加
+- キーポイント直接選択機能の実装
+- モード切り替え時の表示更新
+
+### キーポイント編集機能
+```javascript
+// 詳細モードでのキーポイント選択
+function findNearestKeypointInDetailMode(mouseX, mouseY) {
+    // 手・顔の個別キーポイントを検索
+    // ドラッグ可能なキーポイントを特定
+}
+
+// 詳細モードでのドラッグ処理
+function handleDetailModeMouseMove(event) {
+    // 選択されたキーポイントを移動
+    // リアルタイム更新
+}
+```
+
+### モード切り替え改善
+- updateDisplaySettings関数の強化
+- 矩形の即座非表示・表示
+
+## ✅ 完了条件
+
+- [ ] 詳細モードで手のキーポイントを個別ドラッグできる
+- [ ] 詳細モードで顔のキーポイントを個別ドラッグできる
+- [ ] ラジオボタン変更時に即座に矩形表示が切り替わる
+- [ ] 詳細モードでは矩形が表示されない
+- [ ] 簡易モードでは矩形が表示される
+- [ ] キーポイント選択時の視覚的フィードバックがある
+
+## 📝 参考資料
+
+- refs/dwpose_modifier の詳細モード実装
+- Issue #023: 詳細モード矩形非表示修正
+- DWPoseキーポイント構造
+
+## 🏷️ タグ
+
+`bug` `editing` `keypoint` `detail-mode` `interaction`

issues/034_画像ダウンロード機能修正.md

@@ -0,0 +1,91 @@
+# Issue #034: 画像ダウンロード機能修正 🖼️
+
+## 📋 問題の概要
+
+画像ダウンロードボタンをクリックした際に、`export_pose_as_image`関数がNoneを返して画像生成に失敗している。
+
+## 🐛 再現手順
+
+1. アプリを起動
+2. 画像をアップロードしてポーズ検出を実行
+3. 「📥 画像をダウンロード」ボタンをクリック
+4. コンソールに「[DEBUG] ❌ 画像生成失敗」が表示される
+
+## 🔍 デバッグ情報
+
+```
+[DEBUG] 🖼️ 画像ダウンロードボタンクリック - データ: True, 手: True, 顔: True
+[DEBUG] ❌ 画像生成失敗
+```
+
+- ポーズデータは存在している（データ: True）
+- 手と顔の描画設定も正しく渡されている
+- しかし`export_pose_as_image`関数がNoneを返している
+
+## 🎯 原因分析
+
+### 推測される原因
+1. **ポーズデータ形式の問題**: DWPoseデータの形式が`export_pose_as_image`関数の期待する形式と異なる
+2. **描画関数の実装不備**: `utils/export_utils.py`の描画ロジックに問題がある
+3. **座標系の問題**: キャンバス座標とエクスポート座標の変換に問題がある
+
+### 確認すべき箇所
+- `utils/export_utils.py`の`export_pose_as_image`関数
+- ポーズデータの実際の構造
+- 描画関数（`draw_body_on_image`, `draw_hands_on_image`, `draw_faces_on_image`）
+
+## 🔧 解決アプローチ
+
+### Step 1: ポーズデータ構造の確認
+- 実際のポーズデータの内容をログ出力
+- DWPose形式の確認
+
+### Step 2: refs実装の参照
+- `refs/dwpose_modifier`の描画実装を確認
+- 正しい描画パターンの適用
+
+### Step 3: エラーハンドリング強化
+- より詳細なエラーログの追加
+- 各段階での失敗原因の特定
+
+## 💡 修正計画
+
+1. **ログ強化**: ポーズデータの詳細な内容確認
+2. **refs参照**: 正しい描画実装パターンの適用
+3. **段階的テスト**: 各描画関数の個別テスト
+4. **形式変換**: 必要に応じてポーズデータ形式の変換実装
+
+## ⏰ 優先度
+
+**High** - ダウンロード機能は基本機能として重要
+
+## 📝 関連Issue
+
+- Issue #035: JSONダウンロード機能修正
+- Issue #036: Canvas編集データ反映修正
+
+## ✅ 完了条件
+
+- [x] 画像ダウンロードボタンが正常に動作する
+- [x] エクスポートされた画像にポーズが正しく描画される
+- [x] 手と顔の表示設定が正しく反映される
+- [x] エラー時の適切な通知表示
+
+## 🔧 修正内容
+
+### 主要修正
+1. **描画ロジック完全書き直し**: refsに合わせてpeopleベースの描画に変更
+2. **色空間修正**: BGR→RGB変換で正しい色表示
+3. **背景色修正**: 白→黒に変更
+4. **解像度対応**: ポーズデータの解像度情報に基づく画像サイズ
+
+### コード変更
+- `utils/export_utils.py`: `draw_body_on_image`関数の完全書き直し
+- `app.py`: 解像度準拠の画像エクスポート実装
+
+---
+
+**作成日**: 2025-01-11  
+**完了日**: 2025-01-11  
+**担当**: Claude Code  
+**ステータス**: ✅ Completed

issues/035_JSONダウンロード機能修正.md

@@ -0,0 +1,76 @@
+# Issue #035: JSONダウンロード機能修正 📥
+
+## 📋 問題の概要
+
+DownloadButton修正後にJSONダウンロード機能が動作しなくなった。以前は2クリック必要だったが、現在は全く動作しない状況。
+
+## 🐛 再現手順
+
+1. アプリを起動
+2. 画像をアップロードしてポーズ検出を実行
+3. 「📥 JSONをダウンロード」ボタンをクリック
+4. ダウンロードが開始されない
+
+## 🔍 現在の実装状況
+
+### 修正内容
+- `gr.DownloadButton`の使用（refs互換）
+- `export_json`関数の戻り値を`gr.update(value=temp_path, visible=True)`に変更
+- イベントハンドラーの出力を`outputs=[download_json_btn]`に変更
+
+### 問題の可能性
+1. **DownloadButtonの使用方法**: Gradioの最新バージョンでの正しい使用法
+2. **ファイルパスの問題**: 一時ファイルパスが正しく渡されていない
+3. **イベント処理の問題**: クリックイベントの処理に問題がある
+
+## 🎯 原因分析
+
+### 確認すべき箇所
+- DownloadButtonのGradioドキュメント
+- refs実装での実際の動作確認
+- Gradioのバージョン互換性
+- ブラウザのネットワークタブでのリクエスト確認
+
+## 🔧 解決アプローチ
+
+### Step 1: refs実装の動作確認
+- `refs/dwpose_modifier`でDownloadButtonが実際に動作するか確認
+- 同じGradioバージョンでの動作パターン確認
+
+### Step 2: デバッグログ強化
+- クリックイベントの発火確認
+- ファイル生成の成功確認
+- gr.updateの戻り値確認
+
+### Step 3: 代替実装の検討
+- Button + File組み合わせでの実装に戻す
+- 他のDownloadButton実装パターンの検討
+
+## 💡 修正計画
+
+1. **refs動作確認**: 実際のrefsでの動作テスト
+2. **ログ追加**: 詳細なデバッグ情報の出力
+3. **段階的修正**: 機能する最小実装から構築
+4. **ユーザビリティ向上**: 1クリックダウンロードの実現
+
+## ⏰ 優先度
+
+**High** - 基本的なエクスポート機能として重要
+
+## 📝 関連Issue
+
+- Issue #034: 画像ダウンロード機能修正
+- Issue #036: Canvas編集データ反映修正
+
+## ✅ 完了条件
+
+- [ ] JSONダウンロードボタンが1クリックで動作する
+- [ ] 正しいファイル名でダウンロードされる
+- [ ] 適切な通知メッセージが表示される
+- [ ] ブラウザのデフォルトダウンロードフォルダに保存される
+
+---
+
+**作成日**: 2025-01-11  
+**担当**: Claude Code  
+**ステータス**: 🔧 In Progress

issues/036_Canvas編集データ反映修正.md

@@ -0,0 +1,94 @@
+# Issue #036: Canvas編集データ反映修正 🎨
+
+## 📋 問題の概要
+
+Canvas上でポーズを編集してもその変更がJSONダウンロードに反映されない。JavaScript側での編集がPython側のポーズデータに同期されていない。
+
+## 🐛 再現手順
+
+1. アプリを起動
+2. 画像をアップロードしてポーズ検出を実行
+3. Canvas上でキーポイントをドラッグして編集
+4. 「📥 JSONをダウンロード」ボタンをクリック
+5. ダウンロードされたJSONに編集内容が反映されていない
+
+## 🔍 現在の実装状況
+
+### JavaScript → Python データ同期
+- `static/pose_editor.js`でポーズ編集実装済み
+- `gradioCanvasUpdate`関数でデータ更新実装済み
+- しかし、編集データがPython側の`pose_data`コンポーネントに反映されていない
+
+### 確認すべき箇所
+1. **JavaScript側**: 編集後のデータ送信処理
+2. **Python側**: ポーズデータの受信・更新処理
+3. **Gradio連携**: JavaScript → Python データ転送メカニズム
+
+## 🎯 原因分析
+
+### 推測される原因
+1. **イベントハンドラーの問題**: Canvas編集イベントがGradioに正しく伝わっていない
+2. **データ形式の問題**: JavaScript側のデータ形式とPython側の期待形式が異なる
+3. **同期タイミングの問題**: データ更新のタイミングが合っていない
+4. **コンポーネント参照の問題**: 正しいGradioコンポーネントが更新されていない
+
+### 確認ポイント
+- `pose_data.change`イベントの動作
+- JavaScript → Gradio データ転送の実装
+- ポーズデータの実際の更新状況
+
+## 🔧 解決アプローチ
+
+### Step 1: データフローの確認
+- JavaScript側での編集データの確認
+- Gradio側でのデータ受信確認
+- `pose_data`コンポーネントの更新状況確認
+
+### Step 2: refs実装の参照
+- `refs/dwpose_modifier`での編集データ同期方法の確認
+- 正しいデータ転送パターンの適用
+
+### Step 3: デバッグ強化
+- Canvas編集時の詳細ログ追加
+- データ同期の各段階でのログ出力
+
+## 💡 修正計画
+
+1. **データ同期メカニズムの修正**: JavaScript → Gradio データ転送の改善
+2. **イベントハンドラーの見直し**: 正しいデータ更新イベントの実装
+3. **データ形式の統一**: JS側とPython側のデータ形式統一
+4. **リアルタイム同期**: 編集と同時にデータ更新される仕組み構築
+
+## ⏰ 優先度
+
+**High** - ポーズ編集機能の根幹となる重要な機能
+
+## 📝 関連Issue
+
+- Issue #034: 画像ダウンロード機能修正
+- Issue #035: JSONダウンロード機能修正
+
+## ✅ 完了条件
+
+- [x] Canvas上でのポーズ編集がリアルタイムでPythonデータに反映される
+- [x] 編集後のJSONダウンロードに編集内容が正しく含まれる
+- [x] 詳細モードでの個別キーポイント編集が正常に機能する
+- [x] 簡易モードでの矩形編集が正常に機能する
+
+## 🔧 修正内容
+
+### 主要修正
+1. **専用データ転送チャネル**: `js_pose_update`隠しテキストボックス追加
+2. **Python側受信処理**: `on_js_pose_update`関数で確実なデータ転送
+3. **JavaScript側送信改良**: 専用テキストボックスを使用した確実な送信
+
+### コード変更
+- `app.py`: `js_pose_update`コンポーネントと`on_js_pose_update`関数追加
+- `static/pose_editor.js`: `sendPoseDataToGradio`関数の改良
+
+---
+
+**作成日**: 2025-01-11  
+**完了日**: 2025-01-11  
+**担当**: Claude Code  
+**ステータス**: ✅ Completed

issues/038_Canvas編集データ完全同期修正.md

@@ -0,0 +1,343 @@
+# Issue #038: Canvas編集データ完全同期修正 🔄💥
+
+## 📋 問題の概要
+
+Canvas上でポーズを編集しても、その結果がJSONダウンロードや画像エクスポートに全く反映されない根本的な問題。JavaScript→Python間のデータ同期が完全に機能していない。
+
+## 🐛 現在のエラー
+
+```javascript
+VM838:760 Uncaught ReferenceError: currentPoseData is not defined
+    at HTMLCanvasElement.handleMouseUp (<anonymous>:760:35)
+```
+
+`handleMouseUp`関数内で`currentPoseData`が未定義のエラーが発生。
+
+## 🔍 根本的な問題
+
+### 1. データ同期の失敗
+- Canvas編集時のデータがPython側の`pose_data`コンポーネントに反映されない
+- JavaScript側で編集した座標が保存時に消える
+
+### 2. データ構造の不整合
+- 現在の構造：`bodies.candidate`と`people.pose_keypoints_2d`の二重構造
+- 編集は`bodies.candidate`で行うが、エクスポートは`people`形式を使用
+- 同期処理が不完全
+
+### 3. イベント処理の問題
+- Gradioの`change`イベントが正しく発火しない
+- JavaScript→Pythonのデータ転送チャネルが不安定
+
+## 📚 refs/dwpose_modifierでの実装（重要！）
+
+### 1. データ同期の仕組み
+```python
+# handlers/pose_edit_handlers.py (1000行目付近)
+components['pose_json'].change(
+    fn=update_pose_data_from_canvas,
+    inputs=[components['pose_json'], components['frame_slider']],
+    outputs=[components['pose_json'], components.get('edited_jsonl_state', gr.State(""))] + all_components
+)
+```
+
+**ポイント**：
+- `pose_json`コンポーネントが中心
+- changeイベントで`update_pose_data_from_canvas`関数を実行
+- グローバル変数`_current_poses`で全データを保持
+
+### 2. Canvas→Python データ転送
+```python
+def update_pose_data_from_canvas(pose_json_str, current_frame):
+    """Canvasからのポーズデータ更新を受け取り、編集済みデータを更新"""
+    global _current_poses
+    
+    # JSONデータをパース
+    canvas_data = json.loads(pose_json_str)
+    
+    # Canvasデータから人物データを抽出
+    if 'people' in canvas_data and canvas_data['people']:
+        pose_data = canvas_data['people'][0]
+        
+    # 現在のフレームのポーズデータを更新
+    if _current_poses and 0 <= current_frame < len(_current_poses):
+        _current_poses[current_frame]['people'] = [pose_data]
+```
+
+### 3. 強制changeイベント発火
+```python
+# タイムスタンプを追加してChangeイベントを確実に発火
+import time
+canvas_data['_t'] = int(time.time() * 1000)
+```
+
+### 4. JavaScript側の実装パターン
+```javascript
+// Canvas編集完了時にPythonへデータ送信
+function sendToPython(poseData) {
+    // peopleフォーマットでデータを準備
+    const canvasData = {
+        "people": [{
+            "pose_keypoints_2d": [...],
+            "face_keypoints_2d": [...],
+            "hand_left_keypoints_2d": [...],
+            "hand_right_keypoints_2d": [...]
+        }],
+        "_t": Date.now()  // タイムスタンプで強制イベント発火
+    };
+    
+    // pose_jsonテキストボックスを更新
+    const poseJsonElement = document.getElementById('pose_json_data');
+    const textarea = poseJsonElement.querySelector('textarea');
+    textarea.value = JSON.stringify(canvasData);
+    textarea.dispatchEvent(new Event('input', { bubbles: true }));
+}
+```
+
+## 🎯 修正すべき箇所
+
+### 1. app.py
+- [ ] グローバル変数での編集データ保持（refs同様）
+- [ ] `update_pose_data_from_canvas`相当の関数実装
+- [ ] pose_dataの更新ロジック改善
+
+### 2. static/pose_editor.js
+- [ ] `currentPoseData`未定義エラーの修正
+- [ ] people形式での一貫したデータ管理
+- [ ] 編集完了時の確実なデータ送信
+
+### 3. データフロー
+- [ ] bodies.candidate編集 → people形式変換 → Python送信
+- [ ] タイムスタンプによる強制changeイベント
+- [ ] グローバル編集データの永続化
+
+## 💡 解決策の要点
+
+1. **グローバル変数管理**
+   - Python側で編集中のポーズデータをグローバルに保持
+   - Canvas編集のたびに更新
+
+2. **データ形式統一**
+   - 内部的にpeople形式で統一管理
+   - bodies.candidateは描画用のみ
+
+3. **確実なイベント処理**
+   - タイムスタンプ追加で毎回changeイベント発火
+   - 専用のデータ転送チャネル確立
+
+## 📝 これまでの試行錯誤
+
+### 試したこと
+1. `js_pose_update`隠しテキストボックス追加
+2. `sendPoseDataToGradio`関数にタイムスタンプ追加
+3. `syncBodiesToPeople`等の同期関数追加
+
+### なぜ失敗したか
+- データ同期のタイミングが不適切
+- グローバル変数での管理不足
+- refsの実装パターンを正確に再現できていない
+
+## ⏰ 優先度
+
+**Critical** - ���プリケーションの中核機能が動作しない致命的問題
+
+## ✅ 完了条件
+
+- [ ] Canvas編集がJSONダウンロードに反映される
+- [ ] Canvas編集が画像エクスポートに反映される
+- [ ] エラーなく安定して動作する
+- [ ] 簡易モード・詳細モードの両方で動作
+
+## 🔑 次回作業者への重要メモ
+
+### 絶対に確認すべきrefs実装
+1. `refs/dwpose_modifier/handlers/pose_edit_handlers.py`
+   - `update_pose_data_from_canvas`関数
+   - グローバル変数`_current_poses`の使い方
+
+2. `refs/dwpose_modifier/ui/tab2_pose_edit.py`
+   - pose_jsonコンポーネントの定義
+   - changeイベントの登録方法
+
+3. JavaScript側の実装（refsにはJSファイルがないが、app.py内のJS文字列を確認）
+   - pose_jsonへのデータ書き込み方法
+   - タイムスタンプ追加パターン
+
+### 現在の状態（修正後）
+- **app.py**: ✅ `_current_pose_data`グローバル変数追加、`on_js_pose_update`でpeople形式対応
+- **pose_editor.js**: ✅ `currentPoseData`未定義エラー修正、`sendPoseDataToGradio`でpeople形式送信対応
+- **データ同期**: 🔄 大幅に改善、people形式での双方向同期実装済み
+
+### 主な修正内容（2025-01-13）
+1. **app.py**: グローバル変数`_current_pose_data`追加、全読み込み・エクスポート関数でグローバル管理対応
+2. **pose_editor.js**: `handleMouseUp`の`currentPoseData`未定義エラー修正
+3. **データ送信**: `sendPoseDataToGradio`でpeople形式データ送信に対応（bodies.candidate→people変換）
+4. **データ受信**: `on_js_pose_update`でpeople→bodies.candidate逆変換対応
+
+## 🚨 新たに発生した問題（修正後）
+
+### 1. キーポイント移動後に描画が消失 💥
+- **現象**: キーポイントをドラッグして移動した後、Canvas上の描画が完全に消える
+- **推定原因**: データ同期処理でposeDataが破壊されているか、描画関数に正しくデータが渡されていない
+
+### 2. 手操作後の`currentPoseData`初期化エラー 🖐️💥
+```javascript
+Uncaught ReferenceError: Cannot access 'currentPoseData' before initialization
+    at HTMLCanvasElement.handleMouseDown (<anonymous>:444:39)
+```
+- **現象**: 手の矩形を操作した後、次のクリックで`handleMouseDown`でエラー発生
+- **原因**: `handleMouseDown`関数内で`currentPoseData`が初期化前にアクセスされている
+- **影響**: 手編集後にCanvas操作が不可能になる
+
+### 3. ダウンロード画像が真っ黒 🖤
+- **現象**: 画像ダウンロードボタンを押すと真っ黒な画像がダウンロードされる
+- **推定原因**: グローバル変数のデータ形式が画像生成関数と互換性がない、またはデータが正しく渡されていない
+- **影響**: 編集結果を画像として保存できない（機能完全停止）
+
+## 🔧 緊急修正が必要な箇所
+
+### 最優先修正項目
+1. **handleMouseDown**の`currentPoseData`スコープエラー（444行目）
+2. **描画データの保持**：編集後もCanvas描画を維持する機能
+3. **画像エクスポート**：グローバルデータと画像生成の互換性確保
+
+### データフロー問題の可能性
+- people形式とbodies.candidate形式の変換で整合性が失われている
+- グローバル変数の更新タイミングが描画タイミングと合っていない
+- エクスポート関数が期待するデータ形式と実際のグローバルデータ形式が異なる
+
+## 🔧 追加修正内容（refs issue043準拠）
+
+### 二重ロック機構の実装（2025-01-13）
+refs/dwpose_modifier/issues/043の解決策を適用し、JavaScript ⇄ Python間の同期ズレ問題を根本解決：
+
+#### Python側ロック機構 (app.py)
+- ✅ `_is_updating`グローバルフラグを追加
+- ✅ `on_js_pose_update`関数にtry-finally制御を実装
+- ✅ 処理中の新しい要求は即座にスキップ
+- ✅ 例外発生時もfinallyブロックで確実にフラグ解除
+
+#### JavaScript側ロック機構 (pose_editor.js)
+- ✅ `window.poseEditorGlobals.isUpdating`フラグ使用
+- ✅ `sendPoseDataToGradio`関数に同時実行防止制御を実装
+- ✅ `gradioCanvasUpdate`にも既存のロック機構を確認済み
+- ✅ try-finally制御で確実なフラグ管理
+
+#### 処理フロー最適化
+- ✅ 二重ロック（Python+JavaScript）で確実な同期制御
+- ✅ 処理中は新しい要求をスキップして現在状態を維持
+- ✅ UIの応答性を保ちながら競合状態を防止
+
+### 期待される効果
+- ✅ キーポイント移動後の描画消失防止
+- ✅ 手操作後の`currentPoseData`エラー解消  
+- ✅ データ同期競合状態の根本解決
+- ⏳ ダウンロード画像の黒画像問題（引き続き調査中）
+
+---
+
+## 🔍 詳細調査結果（2025-01-13）- 矩形編集の4大問題
+
+### 📋 現在発生している問題
+
+1. **顔の矩形編集**: 一度目は拡大縮小だけ正常、全体移動は矩形とキーポイントがズレる 📐💥
+2. **手のキーポイント**: 全く動かない 🖐️❌
+3. **矩形編集終了**: 矩形が編集前に戻る 🔄💥
+4. **二度目の編集**: 全く動かなくなる 🚫💀
+
+### 🔍 **問題1: 手のキーポイントが動かない原因**
+
+#### **根本原因発見**: JavaScript側の手データアクセスが完全に破綻 💥
+
+**問題箇所**: `pose_editor.js`の手データ参照方式
+```javascript
+// ❌ 現在の実装（動かない）
+const originalHandData = currentPoseData.hands && currentPoseData.hands[detailKeypoint.handIndex];
+
+// ✅ 正しい実装（refsと同じ）
+const leftHandData = currentPoseData.people[0].hand_left_keypoints_2d;
+const rightHandData = currentPoseData.people[0].hand_right_keypoints_2d;
+```
+
+**問題詳細**:
+- テンプレートの手データは正常に読み込まれている ✅
+- app.pyでのpeople形式変換も正常 ✅
+- **JavaScript側で`currentPoseData.hands`に依存してるが、people形式では`hand_left_keypoints_2d`にある** 💥
+
+**修正方針**: 手データアクセスを完全にpeople形式に統一
+
+### 🔍 **問題2: 矩形移動でズレる原因**
+
+#### **根本原因**: 累積移動計算とキーポイント変換の不整合
+
+**問題箇所**: `updateRectMoveDrag`での座標計算
+```javascript
+// ❌ 現在の実装
+const deltaX = mouseX - window.poseEditorGlobals.dragStartPos.x;
+window.poseEditorGlobals.dragStartPos.x = mouseX; // 毎回更新で累積エラー
+```
+
+**修正済み**: 元座標からの総移動量計算に変更済み ✅
+
+### 🔍 **問題3: 矩形編集終了で元に戻る原因**
+
+#### **根本原因**: `drawPose`関数での矩形再計算
+
+**問題の流れ**:
+1. 矩形編集終了 → `rectEditModeActive = false`
+2. `drawPose()` 呼び出し
+3. `drawHandRectangles/drawFaceRectangles`で矩形再計算
+4. **編集後のキーポイントから計算した矩形が、編集前の矩形サイズに戻る** 💥
+
+**修正済み**: 編集モード中の矩形再計算スキップ機能追加 ✅
+
+### 🔍 **問題4: 二度目の編集が動かない原因**
+
+#### **根本原因**: 状態クリアとoriginalKeypointsの管理不備
+
+**問題の流れ**:
+1. 一度目編集後、`originalKeypoints`に編集済みデータが保存される
+2. 二度目編集時、編集済みデータを「元データ」として使用
+3. **元データと現在データが同じになり、変換しても変化なし** 💥
+
+**修正済み**: `baseOriginalKeypoints`と状態完全クリア機能追加 ✅
+
+### 🚀 **refs/dwpose_modifierとの実装差異分析**
+
+#### **全体アーキテクチャの違い**
+- **refs**: `window.poseEditorGlobals`で統一管理 ✨
+- **現在**: 分散状態管理で複雑化 ❌
+
+#### **キーポイント変換方式の違い**
+- **refs**: 統一された`transformCoordinate`システム ✨
+- **現在**: 座標変換ロジックが分散 ❌
+
+#### **状態管理方式の違い**
+- **refs**: シンプルな状態変数 ✨
+- **現在**: 複数の状態変数が分散 ❌
+
+#### **イベント処理フローの違い**
+- **refs**: 段階的な優先順序で明確化 ✨
+- **現在**: 複雑な条件分岐で重複 ❌
+
+### 📋 **実装優先度リスト**
+
+| 問題 | 優先度 | 修正状況 | 次のアクション |
+|------|--------|----------|----------------|
+| **手のキーポイント動かない** | 🔥 HIGH | ❌ 未修正 | people形式アクセスに統一 |
+| **矩形移動ズレ** | 🔥 HIGH | ✅ 修正済み | テスト確認 |
+| **矩形編集終了で戻る** | 🔥 HIGH | ✅ 修正済み | テスト確認 |
+| **二度目編集不能** | 🔥 HIGH | ✅ 修正済み | テスト確認 |
+
+### 🎯 **次回実装計画**
+
+1. **手データアクセス修正** - `currentPoseData.hands` → `currentPoseData.people[0].hand_*_keypoints_2d`
+2. **refs互換座標変換システム導入** - `transformCoordinate`関数移植
+3. **グローバル状態管理統一** - `window.poseEditorGlobals`一本化
+4. **イベント処理フロー簡素化** - refs方式の段階的処理採用
+
+---
+
+**作成日**: 2025-01-13  
+**担当**: Claude Code  
+**ステータス**: 🔄 調査完了・実装計画策定済み  
+**最終更新**: 2025-01-13 (詳細調査結果追加)

static/pose_editor.js

@@ -10,6 +10,8 @@ window.poseEditorGlobals = {
     enableHands: true,
     enableFace: true,
     editMode: "簡易モード",  // "簡易モード" or "詳細モード"
+    // 🎨 背景画像機能
+    backgroundImage: null,     // 背景画像オブジェクト
     // 🔧 矩形編集状態（refs互換）
     rectEditMode: null,        // 'leftHand', 'rightHand', 'face', null
     rectEditModeActive: false, // 矩形編集モード状態
@@ -250,6 +252,109 @@ function findNearestKeypoint(mouseX, mouseY, maxDistance = 20) {
     return nearestIndex; // 🔧 refs互換：インデックス数値を返す
 }
 
+// 🎯 詳細モード用：手と顔のキーポイント検索
+function findNearestKeypointInDetailMode(mouseX, mouseY, maxDistance = 15) {
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    
+    if (!currentPoseData) {
+        return null;
+    }
+    
+    const originalRes = currentPoseData.resolution || [512, 512];
+    const scaleX = canvas.width / originalRes[0];
+    const scaleY = canvas.height / originalRes[1];
+    
+    let nearestKeypoint = null;
+    let minDistance = maxDistance;
+    
+    // 💖 手のキーポイント検索（people形式統一）
+    if (window.poseEditorGlobals.enableHands && currentPoseData.people && currentPoseData.people[0]) {
+        const person = currentPoseData.people[0];
+        const handsData = [
+            person.hand_left_keypoints_2d || [],
+            person.hand_right_keypoints_2d || []
+        ];
+        
+        ['left', 'right'].forEach((handType, handIndex) => {
+            const handData = handsData[handIndex];
+            if (handData && handData.length > 0) {
+                for (let i = 0; i < handData.length; i += 3) {
+                    if (i + 2 < handData.length) {
+                        const x = handData[i] * scaleX;
+                        const y = handData[i + 1] * scaleY;
+                        const conf = handData[i + 2];
+                        
+                        if (conf > 0.3) {
+                            const distance = Math.sqrt((mouseX - x) ** 2 + (mouseY - y) ** 2);
+                            if (distance < minDistance) {
+                                minDistance = distance;
+                                nearestKeypoint = {
+                                    type: 'hand',
+                                    handType: handType,
+                                    handIndex: handIndex,
+                                    keypointIndex: i / 3,
+                                    arrayIndex: i
+                                };
+                            }
+                        }
+                    }
+                }
+            }
+        });
+    }
+    
+    // 😊 顔のキーポイント検索
+    if (window.poseEditorGlobals.enableFace && currentPoseData.faces) {
+        const facesData = currentPoseData.people && currentPoseData.people[0] && currentPoseData.people[0].face_keypoints_2d 
+            ? [currentPoseData.people[0].face_keypoints_2d] 
+            : currentPoseData.faces;
+        
+        if (facesData && facesData[0] && facesData[0].length > 0) {
+            const faceData = facesData[0];
+            for (let i = 0; i < faceData.length; i += 3) {
+                if (i + 2 < faceData.length) {
+                    const x = faceData[i] * scaleX;
+                    const y = faceData[i + 1] * scaleY;
+                    const conf = faceData[i + 2];
+                    
+                    if (conf > 0.3) {
+                        const distance = Math.sqrt((mouseX - x) ** 2 + (mouseY - y) ** 2);
+                        if (distance < minDistance) {
+                            minDistance = distance;
+                            nearestKeypoint = {
+                                type: 'face',
+                                keypointIndex: i / 3,
+                                arrayIndex: i
+                            };
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+    // 👤 ボディのキーポイントも検索（優先度は低く）
+    const bodyKeypointIndex = findNearestKeypoint(mouseX, mouseY, maxDistance * 0.8);
+    if (bodyKeypointIndex >= 0) {
+        const candidates = currentPoseData.bodies.candidate;
+        const point = candidates[bodyKeypointIndex];
+        if (point) {
+            const scaledX = point[0] * scaleX;
+            const scaledY = point[1] * scaleY;
+            const distance = Math.sqrt((mouseX - scaledX) ** 2 + (mouseY - scaledY) ** 2);
+            
+            if (distance < minDistance) {
+                nearestKeypoint = {
+                    type: 'body',
+                    keypointIndex: bodyKeypointIndex
+                };
+            }
+        }
+    }
+    
+    return nearestKeypoint;
+}
+
 // マウスダウン処理（refs互換 + 矩形編集対応）
 function handleMouseDown(event) {
     if (!isCanvasReady()) {
@@ -266,28 +371,12 @@ function handleMouseDown(event) {
             const controlPoint = findNearestRectControlPoint(mousePos.x, mousePos.y);
             
             if (controlPoint) {
-                // 🔧 元の矩形座標を保存（重要！）
+                // 🔧 コントロールポイントドラッグ開始時の元座標保存
                 const rectType = window.poseEditorGlobals.rectEditMode;
                 const currentRect = window.poseEditorGlobals.currentRects[rectType];
                 if (currentRect) {
                     window.poseEditorGlobals.originalRect = { ...currentRect };
-                    
-                    // 🔧 キーポイントの元座標も保存（refs互換）
-                    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
-                    if (currentPoseData) {
-                        window.poseEditorGlobals.originalKeypoints = JSON.parse(JSON.stringify(currentPoseData));
-                    }
-                    
-                    // 🔧 rectEditInfo初期化（キーポイントインデックス情報）
-                    if (!window.poseEditorGlobals.rectEditInfo) {
-                        window.poseEditorGlobals.rectEditInfo = {};
-                    }
-                    
-                    // 矩形タイプごとのキーポイントインデックスを設定
-                    window.poseEditorGlobals.rectEditInfo[rectType] = {
-                        originalRect: { ...currentRect },
-                        keypointIndices: getRectKeypointIndices(rectType)
-                    };
+                    debugLog(`🔧 Original rect saved for control point drag: ${rectType}`, window.poseEditorGlobals.originalRect);
                 }
                 
                 // コントロールポイントドラッグ（リサイズ）
@@ -300,23 +389,10 @@ function handleMouseDown(event) {
             // 矩形内ドラッグ（移動）
             const rectType = findRectContaining(mousePos.x, mousePos.y);
             if (rectType === window.poseEditorGlobals.rectEditMode) {
-                // 🔧 矩形移動時もrectEditInfo初期化
-                const currentRect = window.poseEditorGlobals.currentRects[rectType];
-                if (currentRect) {
-                    if (!window.poseEditorGlobals.rectEditInfo) {
-                        window.poseEditorGlobals.rectEditInfo = {};
-                    }
-                    
-                    window.poseEditorGlobals.rectEditInfo[rectType] = {
-                        originalRect: { ...currentRect },
-                        keypointIndices: getRectKeypointIndices(rectType)
-                    };
-                    
-                }
-                
                 window.poseEditorGlobals.draggedRect = rectType;
                 window.poseEditorGlobals.dragStartPos = { x: mousePos.x, y: mousePos.y };
                 isDragging = true;
+                debugLog(`🔧 Rectangle move drag started: ${rectType}`);
                 return;
             }
             
@@ -334,14 +410,30 @@ function handleMouseDown(event) {
             
             // 矩形外クリック → 編集モード終了
             
-            // 🚀 編集モード終了前に編集結果をGradioに送信
+            // 🚀 currentPoseData定義を先に移動
+            const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+            
+            // 🚀 編集完了データをGradio送信（データ改変はしない）
             sendPoseDataToGradio();
             
+            // 🔧 矩形編集モード終了時の完全な状態クリア（連続編集対応）
             window.poseEditorGlobals.rectEditModeActive = false;
             window.poseEditorGlobals.rectEditMode = null;
             
+            // 💖 編集用データ状態をクリア（baseOriginalKeypointsは保持！）
+            // window.poseEditorGlobals.baseOriginalKeypoints = null; // ← 💥 これが原因！削除
+            window.poseEditorGlobals.originalKeypoints = null;
+            window.poseEditorGlobals.originalRect = null;
+            window.poseEditorGlobals.rectEditInfo = null;
+            
+            // 🔧 ドラッグ状態もクリア
+            window.poseEditorGlobals.draggedRectControl = null;
+            window.poseEditorGlobals.draggedRect = null;
+            window.poseEditorGlobals.dragStartPos = { x: 0, y: 0 };
+            
+            debugLog("🔧 Rectangle edit mode ended - all editing states cleared for next editing session");
+            
             // 🚀 矩形位置を保持したまま再描画（再計算させない）
-            const currentPoseData = window.poseEditorGlobals.poseData || poseData;
             if (currentPoseData) {
                 // 矩形編集モードをfalseにした直後なので、矩形は保持される
                 drawPose(currentPoseData, window.poseEditorGlobals.enableHands, window.poseEditorGlobals.enableFace);
@@ -349,12 +441,17 @@ function handleMouseDown(event) {
             return;
         }
         
-        // 矩形編集モードでない場合の矩形クリック → 編集モード開始
+        // 💖 矩形編集モードでない場合の矩形クリック → 編集モード開始（refs準拠）
         const rectType = findRectContaining(mousePos.x, mousePos.y);
         if (rectType) {
+            // 矩形モード切り替え時の処理
+            if (window.poseEditorGlobals.rectEditMode !== rectType) {
+                debugLog(`💖 Switching rectangle edit mode: ${window.poseEditorGlobals.rectEditMode} → ${rectType}`);
+                window.poseEditorGlobals.rectEditMode = rectType;
+            }
+            
             window.poseEditorGlobals.rectEditModeActive = true;
-            window.poseEditorGlobals.rectEditMode = rectType;
-            debugLog(`Entered rectangle edit mode: ${rectType}`);
+            debugLog(`💖 Entered rectangle edit mode: ${rectType}`);
             
             // 🔧 rectEditInfo全体を初期化（全矩形タイプ対応）
             initializeRectEditInfo();
@@ -368,44 +465,671 @@ function handleMouseDown(event) {
         }
     }
     
-    // 🔧 詳細モードまたは矩形編集モードでない場合：通常のキーポイント編集
-    if (window.poseEditorGlobals.editMode === "詳細モード" || !window.poseEditorGlobals.rectEditModeActive) {
+    // 🔧 詳細モードまたは矩形編集モードでない場合：通常のキーポイント編集
+    if (window.poseEditorGlobals.editMode === "詳細モード" || !window.poseEditorGlobals.rectEditModeActive) {
+        
+        // 🎯 詳細モードでは手・顔・ボディ全て検索
+        if (window.poseEditorGlobals.editMode === "詳細モード") {
+            const detailKeypoint = findNearestKeypointInDetailMode(mousePos.x, mousePos.y);
+            
+            if (detailKeypoint) {
+                isDragging = true;
+                window.poseEditorGlobals.draggedDetailKeypoint = detailKeypoint;
+                debugLog(`🎯 Detail mode drag started: ${detailKeypoint.type} keypoint ${detailKeypoint.keypointIndex}`);
+                canvas.style.cursor = 'grabbing';
+                return;
+            }
+        }
+        // 🔧 簡易モードまたは詳細モードで何も見つからない場合：ボディキーポイント検索
+        else {
+            const keypointIndex = findNearestKeypoint(mousePos.x, mousePos.y);
+            
+            if (keypointIndex >= 0) {
+                isDragging = true;
+                draggedKeypoint = keypointIndex;
+                
+                // 🔧 refs互換：ドラッグオフセット計算（キーポイントの正確な位置からのオフセット）
+                const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+                if (currentPoseData && currentPoseData.bodies && currentPoseData.bodies.candidate) {
+                    const candidates = currentPoseData.bodies.candidate;
+                    const originalRes = currentPoseData.resolution || [512, 512];
+                    const scaleX = canvas.width / originalRes[0];
+                    const scaleY = canvas.height / originalRes[1];
+                    
+                    const point = candidates[keypointIndex];
+                    if (point) {
+                        const keypointX = point[0] * scaleX;
+                        const keypointY = point[1] * scaleY;
+                        
+                        dragOffset = {
+                            x: mousePos.x - keypointX,
+                            y: mousePos.y - keypointY
+                        };
+                    }
+                }
+                
+                debugLog(`Drag started: keypoint ${keypointIndex} at (${mousePos.x}, ${mousePos.y})`);
+                canvas.style.cursor = 'grabbing';
+            } else {
+                debugLog("No keypoint found near mouse position");
+            }
+        }
+    }
+}
+
+// 🎯 詳細モード用：手・顔・ボディキーポイント位置更新
+function updateDetailKeypointPosition(detailKeypoint, canvasX, canvasY) {
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    
+    if (!currentPoseData) {
+        debugLog("No poseData available for detail keypoint update");
+        return;
+    }
+    
+    const originalRes = currentPoseData.resolution || [512, 512];
+    const scaleX = canvas.width / originalRes[0];
+    const scaleY = canvas.height / originalRes[1];
+    
+    // Canvas座標をデータ座標に変換
+    const dataX = Math.max(0, Math.min(originalRes[0], canvasX / scaleX));
+    const dataY = Math.max(0, Math.min(originalRes[1], canvasY / scaleY));
+    
+    switch (detailKeypoint.type) {
+        case 'hand':
+            // 手のキーポイント更新
+            if (currentPoseData.people && currentPoseData.people[0]) {
+                const handDataKey = detailKeypoint.handType === 'left' ? 'hand_left_keypoints_2d' : 'hand_right_keypoints_2d';
+                
+                if (!currentPoseData.people[0][handDataKey]) {
+                    // 💖 people形式で編集済みデータが存在しない場合は作成
+                    let originalHandData = null;
+                    if (currentPoseData.people && currentPoseData.people[0]) {
+                        if (detailKeypoint.handIndex === 0) {
+                            originalHandData = currentPoseData.people[0].hand_left_keypoints_2d;
+                        } else if (detailKeypoint.handIndex === 1) {
+                            originalHandData = currentPoseData.people[0].hand_right_keypoints_2d;
+                        }
+                    }
+                    if (originalHandData && !currentPoseData.people[0][handDataKey]) {
+                        currentPoseData.people[0][handDataKey] = [...originalHandData];
+                    }
+                }
+                
+                if (currentPoseData.people[0][handDataKey]) {
+                    const handData = currentPoseData.people[0][handDataKey];
+                    const arrayIndex = detailKeypoint.arrayIndex;
+                    
+                    if (arrayIndex < handData.length - 1) {
+                        handData[arrayIndex] = dataX;
+                        handData[arrayIndex + 1] = dataY;
+                        // 信頼度は維持
+                        debugLog(`🫳 Hand ${detailKeypoint.handType} keypoint ${detailKeypoint.keypointIndex} updated to (${dataX}, ${dataY})`);
+                        
+                        // 🚀 元のhandsデータも同期更新
+                        syncHandsToOriginal(currentPoseData, detailKeypoint.handType, handData);
+                    }
+                }
+            }
+            break;
+            
+        case 'face':
+            // 顔のキーポイント更新
+            if (currentPoseData.people && currentPoseData.people[0]) {
+                if (!currentPoseData.people[0].face_keypoints_2d) {
+                    // 編集済みデータが存在しない場合は作成
+                    const originalFaceData = currentPoseData.faces && currentPoseData.faces[0];
+                    if (originalFaceData) {
+                        currentPoseData.people[0].face_keypoints_2d = [...originalFaceData];
+                    }
+                }
+                
+                if (currentPoseData.people[0].face_keypoints_2d) {
+                    const faceData = currentPoseData.people[0].face_keypoints_2d;
+                    const arrayIndex = detailKeypoint.arrayIndex;
+                    
+                    if (arrayIndex < faceData.length - 1) {
+                        faceData[arrayIndex] = dataX;
+                        faceData[arrayIndex + 1] = dataY;
+                        // 信頼度は維持
+                        debugLog(`😊 Face keypoint ${detailKeypoint.keypointIndex} updated to (${dataX}, ${dataY})`);
+                        
+                        // 🚀 元のfacesデータも同期更新
+                        syncFacesToOriginal(currentPoseData, faceData);
+                    }
+                }
+            }
+            break;
+            
+        case 'body':
+            // ボディキーポイント更新（既存の関数を使用）
+            updateKeypointPosition(detailKeypoint.keypointIndex, canvasX, canvasY);
+            break;
+    }
+}
+
+// 🚀 手のデータ同期関数
+function syncHandsToOriginal(poseData, handType, handData) {
+    if (!poseData.hands) return;
+    
+    const handIndex = handType === 'left' ? 0 : 1;
+    if (handIndex < poseData.hands.length) {
+        poseData.hands[handIndex] = [...handData];
+        debugLog(`🔄 Hand ${handType} synced to original hands data`);
+    }
+}
+
+// 🚀 顔のデータ同期関数
+function syncFacesToOriginal(poseData, faceData) {
+    if (!poseData.faces) return;
+    
+    if (poseData.faces.length > 0) {
+        poseData.faces[0] = [...faceData];
+        debugLog(`🔄 Face synced to original faces data`);
+    }
+}
+
+// 🎯 矩形変形によるキーポイント一括変換機能（refs互換・Issue 028実装）
+function transformKeypointsInRect(control, newMouseX, newMouseY) {
+    // 1. データとコントロールの存在確認
+    if (!window.poseEditorGlobals.poseData || !control) {
+        return;
+    }
+    
+    // 2. people形式データの確認
+    if (!window.poseEditorGlobals.poseData.people || 
+        !Array.isArray(window.poseEditorGlobals.poseData.people) ||
+        window.poseEditorGlobals.poseData.people.length === 0) {
+        return;
+    }
+    
+    const person = window.poseEditorGlobals.poseData.people[0];
+    
+    // 3. 対象キーポイントデータを取得
+    let targetKeypoints;
+    let fieldName;
+    
+    switch (control.type) {
+        case 'face':
+            targetKeypoints = person.face_keypoints_2d;
+            fieldName = 'face_keypoints_2d';
+            break;
+        case 'leftHand':
+            targetKeypoints = person.hand_left_keypoints_2d;
+            fieldName = 'hand_left_keypoints_2d';
+            break;
+        case 'rightHand':
+            targetKeypoints = person.hand_right_keypoints_2d;
+            fieldName = 'hand_right_keypoints_2d';
+            break;
+        default:
+            return;
+    }
+    
+    if (!targetKeypoints || !Array.isArray(targetKeypoints)) {
+        return;
+    }
+    
+    // 4. 元の矩形サイズを取得
+    const originalRect = control.rect;
+    
+    // 5. 新しい矩形サイズを計算（角に応じて）
+    let newRect = { ...originalRect };
+    
+    switch (control.corner) {
+        case 'TL': // 左上
+            newRect.width = originalRect.width + (originalRect.x - newMouseX);
+            newRect.height = originalRect.height + (originalRect.y - newMouseY);
+            newRect.x = newMouseX;
+            newRect.y = newMouseY;
+            break;
+        case 'TR': // 右上
+            newRect.width = newMouseX - originalRect.x;
+            newRect.height = originalRect.height + (originalRect.y - newMouseY);
+            newRect.y = newMouseY;
+            break;
+        case 'BL': // 左下
+            newRect.width = originalRect.width + (originalRect.x - newMouseX);
+            newRect.height = newMouseY - originalRect.y;
+            newRect.x = newMouseX;
+            break;
+        case 'BR': // 右下
+            newRect.width = newMouseX - originalRect.x;
+            newRect.height = newMouseY - originalRect.y;
+            break;
+    }
+    
+    // 6. 最小サイズ制限
+    const minSize = 20;
+    if (newRect.width < minSize || newRect.height < minSize) return;
+    
+    // 7. 変換比率を計算
+    const scaleX = newRect.width / originalRect.width;
+    const scaleY = newRect.height / originalRect.height;
+    
+    // 8. 座標変換設定の準備
+    const canvasWidth = window.poseEditorGlobals.canvas ? window.poseEditorGlobals.canvas.width : 512;
+    const canvasHeight = window.poseEditorGlobals.canvas ? window.poseEditorGlobals.canvas.height : 512;
+    
+    let dataResolutionWidth = canvasWidth;
+    let dataResolutionHeight = canvasHeight;
+    
+    // 解像度情報の取得（現在のデータ構造に対応）
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    if (currentPoseData.resolution && Array.isArray(currentPoseData.resolution) && currentPoseData.resolution.length >= 2) {
+        dataResolutionWidth = currentPoseData.resolution[0];
+        dataResolutionHeight = currentPoseData.resolution[1];
+    }
+    
+    const coordScaleX = canvasWidth / dataResolutionWidth;
+    const coordScaleY = canvasHeight / dataResolutionHeight;
+    
+    // 9. 正規化座標かピクセル座標かを判定
+    let isNormalized = false;
+    if (targetKeypoints.length > 0) {
+        // 最初の有効なキーポイントで判定
+        for (let i = 0; i < targetKeypoints.length; i += 3) {
+            if (i + 2 < targetKeypoints.length && targetKeypoints[i + 2] > 0) {
+                const x = targetKeypoints[i];
+                const y = targetKeypoints[i + 1];
+                isNormalized = (x >= 0 && x <= 1 && y >= 0 && y <= 1);
+                break;
+            }
+        }
+    }
+    
+    // 10. 対象キーポイントを一括変換
+    for (let i = 0; i < targetKeypoints.length; i += 3) {
+        if (i + 2 < targetKeypoints.length) {
+            const confidence = targetKeypoints[i + 2];
+            if (confidence > 0.1) {  // 閾値を下げて、より多くのポイントを変換
+                let x = targetKeypoints[i];
+                let y = targetKeypoints[i + 1];
+                
+                // データ座標→Canvas座標
+                let canvasX, canvasY;
+                if (isNormalized) {
+                    canvasX = (x * dataResolutionWidth) * coordScaleX;
+                    canvasY = (y * dataResolutionHeight) * coordScaleY;
+                } else {
+                    canvasX = x * coordScaleX;
+                    canvasY = y * coordScaleY;
+                }
+                
+                // 元矩形内での相対位置を計算
+                const relativeX = (canvasX - originalRect.x) / originalRect.width;
+                const relativeY = (canvasY - originalRect.y) / originalRect.height;
+                
+                // 新矩形での新しい位置を計算
+                const newCanvasX = newRect.x + (relativeX * newRect.width);
+                const newCanvasY = newRect.y + (relativeY * newRect.height);
+                
+                // Canvas座標→データ座標に戻す
+                if (isNormalized) {
+                    const dataX = newCanvasX / coordScaleX;
+                    const dataY = newCanvasY / coordScaleY;
+                    targetKeypoints[i] = dataX / dataResolutionWidth;
+                    targetKeypoints[i + 1] = dataY / dataResolutionHeight;
+                } else {
+                    targetKeypoints[i] = newCanvasX / coordScaleX;
+                    targetKeypoints[i + 1] = newCanvasY / coordScaleY;
+                }
+            }
+        }
+    }
+    
+    // 11. 矩形情報を更新
+    control.rect = newRect;
+    
+    debugLog(`🎯 Transformed ${fieldName} keypoints: scale=(${scaleX.toFixed(2)}, ${scaleY.toFixed(2)})`);
+}
+
+// 🔧 直接矩形変換関数（シンプル版）
+function transformKeypointsDirectly(rectType, originalRect, newRect) {
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    const originalKeypoints = window.poseEditorGlobals.originalKeypoints;
+    
+    if (!currentPoseData || !currentPoseData.people || !currentPoseData.people[0]) {
+        debugLog("❌ transformKeypointsDirectly: No pose data available");
+        return;
+    }
+    
+    if (!originalKeypoints || !originalKeypoints.people || !originalKeypoints.people[0]) {
+        debugLog("❌ transformKeypointsDirectly: No original keypoints available");
+        return;
+    }
+    
+    const person = currentPoseData.people[0];
+    const originalPerson = originalKeypoints.people[0];
+    
+    // 対象キーポイントデータを取得（元データと現在データ両方）
+    let targetKeypoints, originalTargetKeypoints;
+    let fieldName;
+    
+    switch (rectType) {
+        case 'face':
+            targetKeypoints = person.face_keypoints_2d;
+            originalTargetKeypoints = originalPerson.face_keypoints_2d;
+            fieldName = 'face_keypoints_2d';
+            break;
+        case 'leftHand':
+            targetKeypoints = person.hand_left_keypoints_2d;
+            originalTargetKeypoints = originalPerson.hand_left_keypoints_2d;
+            fieldName = 'hand_left_keypoints_2d';
+            break;
+        case 'rightHand':
+            targetKeypoints = person.hand_right_keypoints_2d;
+            originalTargetKeypoints = originalPerson.hand_right_keypoints_2d;
+            fieldName = 'hand_right_keypoints_2d';
+            break;
+        default:
+            debugLog(`❌ transformKeypointsDirectly: Unknown rectType ${rectType}`);
+            return;
+    }
+    
+    if (!targetKeypoints || !Array.isArray(targetKeypoints)) {
+        debugLog(`❌ transformKeypointsDirectly: No keypoints for ${fieldName}`);
+        debugLog(`🔍 Person keys: ${Object.keys(person)}`);
+        return;
+    }
+    
+    if (!originalTargetKeypoints || !Array.isArray(originalTargetKeypoints)) {
+        debugLog(`❌ transformKeypointsDirectly: No original keypoints for ${fieldName}`);
+        debugLog(`🔍 Original person keys: ${Object.keys(originalPerson)}`);
+        return;
+    }
+    
+    debugLog(`✅ transformKeypointsDirectly: Found ${fieldName} - current: ${targetKeypoints.length}, original: ${originalTargetKeypoints.length}`);
+    
+    // 座標変換設定
+    const canvasWidth = window.poseEditorGlobals.canvas ? window.poseEditorGlobals.canvas.width : 512;
+    const canvasHeight = window.poseEditorGlobals.canvas ? window.poseEditorGlobals.canvas.height : 512;
+    
+    let dataResolutionWidth = canvasWidth;
+    let dataResolutionHeight = canvasHeight;
+    
+    // 解像度情報の取得
+    if (currentPoseData.resolution && Array.isArray(currentPoseData.resolution) && currentPoseData.resolution.length >= 2) {
+        dataResolutionWidth = currentPoseData.resolution[0];
+        dataResolutionHeight = currentPoseData.resolution[1];
+    }
+    
+    const coordScaleX = canvasWidth / dataResolutionWidth;
+    const coordScaleY = canvasHeight / dataResolutionHeight;
+    
+    // 正規化座標かピクセル座標かを判定
+    let isNormalized = false;
+    if (targetKeypoints.length > 0) {
+        for (let i = 0; i < targetKeypoints.length; i += 3) {
+            if (i + 2 < targetKeypoints.length && targetKeypoints[i + 2] > 0) {
+                const x = targetKeypoints[i];
+                const y = targetKeypoints[i + 1];
+                isNormalized = (x >= 0 && x <= 1 && y >= 0 && y <= 1);
+                break;
+            }
+        }
+    }
+    
+    debugLog(`🔧 transformKeypointsDirectly: ${fieldName}, original rect: ${JSON.stringify(originalRect)}, new rect: ${JSON.stringify(newRect)}, normalized: ${isNormalized}`);
+    
+    // キーポイントを一括変換（元データから毎回変換）
+    for (let i = 0; i < originalTargetKeypoints.length; i += 3) {
+        if (i + 2 < originalTargetKeypoints.length && i + 2 < targetKeypoints.length) {
+            const confidence = originalTargetKeypoints[i + 2];
+            if (confidence > 0.1) {
+                // 🎯 元データから取得（累積変形防止）
+                let x = originalTargetKeypoints[i];
+                let y = originalTargetKeypoints[i + 1];
+                
+                // データ座標→Canvas座標
+                let canvasX, canvasY;
+                if (isNormalized) {
+                    canvasX = (x * dataResolutionWidth) * coordScaleX;
+                    canvasY = (y * dataResolutionHeight) * coordScaleY;
+                } else {
+                    canvasX = x * coordScaleX;
+                    canvasY = y * coordScaleY;
+                }
+                
+                // 元矩形内での相対位置を計算
+                const relativeX = (canvasX - originalRect.x) / originalRect.width;
+                const relativeY = (canvasY - originalRect.y) / originalRect.height;
+                
+                // 新矩形での新しい位置を計算
+                const newCanvasX = newRect.x + (relativeX * newRect.width);
+                const newCanvasY = newRect.y + (relativeY * newRect.height);
+                
+                // Canvas座標→データ座標に戻す
+                if (isNormalized) {
+                    const dataX = newCanvasX / coordScaleX;
+                    const dataY = newCanvasY / coordScaleY;
+                    targetKeypoints[i] = dataX / dataResolutionWidth;
+                    targetKeypoints[i + 1] = dataY / dataResolutionHeight;
+                } else {
+                    targetKeypoints[i] = newCanvasX / coordScaleX;
+                    targetKeypoints[i + 1] = newCanvasY / coordScaleY;
+                }
+            }
+        }
+    }
+    
+    debugLog(`✅ transformKeypointsDirectly: Transformed ${fieldName} keypoints successfully`);
+}
+
+// 🔧 元座標からキーポイントを移動（累積移動防止版）
+function moveKeypointsFromOriginal(rectType, totalDeltaX, totalDeltaY) {
+    console.log('🔍 [moveKeypointsFromOriginal] Called with:', {
+        rectType,
+        totalDeltaX,
+        totalDeltaY,
+        hasOriginalKeypoints: !!window.poseEditorGlobals.originalKeypoints,
+        hasBaseOriginalKeypoints: !!window.poseEditorGlobals.baseOriginalKeypoints
+    });
+    
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    const originalKeypoints = window.poseEditorGlobals.originalKeypoints;
+    
+    if (!currentPoseData || !currentPoseData.people || !currentPoseData.people[0]) {
+        debugLog("❌ moveKeypointsFromOriginal: No current pose data available");
+        return;
+    }
+    
+    if (!originalKeypoints || !originalKeypoints.people || !originalKeypoints.people[0]) {
+        debugLog("❌ moveKeypointsFromOriginal: No original keypoints available");
+        return;
+    }
+    
+    const person = currentPoseData.people[0];
+    const originalPerson = originalKeypoints.people[0];
+    
+    // 対象キーポイントデータを取得
+    let targetKeypoints, originalTargetKeypoints;
+    let fieldName;
+    
+    switch (rectType) {
+        case 'face':
+            targetKeypoints = person.face_keypoints_2d;
+            originalTargetKeypoints = originalPerson.face_keypoints_2d;
+            fieldName = 'face_keypoints_2d';
+            break;
+        case 'leftHand':
+            targetKeypoints = person.hand_left_keypoints_2d;
+            originalTargetKeypoints = originalPerson.hand_left_keypoints_2d;
+            fieldName = 'hand_left_keypoints_2d';
+            break;
+        case 'rightHand':
+            targetKeypoints = person.hand_right_keypoints_2d;
+            originalTargetKeypoints = originalPerson.hand_right_keypoints_2d;
+            fieldName = 'hand_right_keypoints_2d';
+            break;
+        default:
+            debugLog(`❌ moveKeypointsFromOriginal: Unknown rectType ${rectType}`);
+            return;
+    }
+    
+    if (!targetKeypoints || !Array.isArray(targetKeypoints)) {
+        debugLog(`❌ moveKeypointsFromOriginal: No current keypoints for ${fieldName}`);
+        return;
+    }
+    
+    if (!originalTargetKeypoints || !Array.isArray(originalTargetKeypoints)) {
+        debugLog(`❌ moveKeypointsFromOriginal: No original keypoints for ${fieldName}`);
+        return;
+    }
+    
+    // 座標変換設定
+    const canvasWidth = window.poseEditorGlobals.canvas ? window.poseEditorGlobals.canvas.width : 512;
+    const canvasHeight = window.poseEditorGlobals.canvas ? window.poseEditorGlobals.canvas.height : 512;
+    
+    let dataResolutionWidth = canvasWidth;
+    let dataResolutionHeight = canvasHeight;
+    
+    // 解像度情報の取得
+    if (currentPoseData.resolution && Array.isArray(currentPoseData.resolution) && currentPoseData.resolution.length >= 2) {
+        dataResolutionWidth = currentPoseData.resolution[0];
+        dataResolutionHeight = currentPoseData.resolution[1];
+    }
+    
+    const coordScaleX = canvasWidth / dataResolutionWidth;
+    const coordScaleY = canvasHeight / dataResolutionHeight;
+    
+    // 正規化座標かピクセル座標かを判定
+    let isNormalized = false;
+    if (originalTargetKeypoints.length > 0) {
+        for (let i = 0; i < originalTargetKeypoints.length; i += 3) {
+            if (i + 2 < originalTargetKeypoints.length && originalTargetKeypoints[i + 2] > 0) {
+                const x = originalTargetKeypoints[i];
+                const y = originalTargetKeypoints[i + 1];
+                isNormalized = (x >= 0 && x <= 1 && y >= 0 && y <= 1);
+                break;
+            }
+        }
+    }
+    
+    debugLog(`🔧 moveKeypointsFromOriginal: ${fieldName}, delta=(${totalDeltaX}, ${totalDeltaY}), normalized: ${isNormalized}`);
+    
+    // キーポイントを移動（元データから移動量を適用）
+    for (let i = 0; i < originalTargetKeypoints.length; i += 3) {
+        if (i + 2 < originalTargetKeypoints.length && i + 2 < targetKeypoints.length) {
+            const confidence = originalTargetKeypoints[i + 2];
+            if (confidence > 0.1) {
+                // 元データから取得
+                let origX = originalTargetKeypoints[i];
+                let origY = originalTargetKeypoints[i + 1];
+                
+                // データ座標→Canvas座標
+                let canvasX, canvasY;
+                if (isNormalized) {
+                    canvasX = (origX * dataResolutionWidth) * coordScaleX;
+                    canvasY = (origY * dataResolutionHeight) * coordScaleY;
+                } else {
+                    canvasX = origX * coordScaleX;
+                    canvasY = origY * coordScaleY;
+                }
+                
+                // 移動量を適用
+                const newCanvasX = canvasX + totalDeltaX;
+                const newCanvasY = canvasY + totalDeltaY;
+                
+                // Canvas座標→データ座標に戻す
+                if (isNormalized) {
+                    const dataX = newCanvasX / coordScaleX;
+                    const dataY = newCanvasY / coordScaleY;
+                    targetKeypoints[i] = dataX / dataResolutionWidth;
+                    targetKeypoints[i + 1] = dataY / dataResolutionHeight;
+                } else {
+                    targetKeypoints[i] = newCanvasX / coordScaleX;
+                    targetKeypoints[i + 1] = newCanvasY / coordScaleY;
+                }
+            }
+        }
+    }
+    
+    debugLog(`✅ moveKeypointsFromOriginal: Moved ${fieldName} keypoints successfully`);
+}
+
+// 🔧 矩形移動に合わせてキーポイントを移動（refs互換版）
+function moveKeypointsWithRect(rectType, deltaX, deltaY) {
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    if (!currentPoseData || !currentPoseData.people || !currentPoseData.people[0]) {
+        debugLog("❌ moveKeypointsWithRect: No current pose data available");
+        return;
+    }
+    
+    const person = currentPoseData.people[0];
+    
+    debugLog(`🔧 キーポイント移動: rectType=${rectType}, delta=(${deltaX}, ${deltaY})`);
+    
+    // 対応するキーポイントを取得
+    let keypoints = null;
+    let fieldName = '';
+    
+    switch (rectType) {
+        case 'face':
+            keypoints = person.face_keypoints_2d;
+            fieldName = 'face_keypoints_2d';
+            break;
+        case 'leftHand':
+            keypoints = person.hand_left_keypoints_2d;
+            fieldName = 'hand_left_keypoints_2d';
+            break;
+        case 'rightHand':
+            keypoints = person.hand_right_keypoints_2d;
+            fieldName = 'hand_right_keypoints_2d';
+            break;
+        default:
+            debugLog(`❌ moveKeypointsWithRect: Unknown rectType ${rectType}`);
+            return;
+    }
+    
+    if (!keypoints || !Array.isArray(keypoints)) {
+        debugLog(`❌ moveKeypointsWithRect: No keypoints for ${fieldName}`);
+        return;
+    }
+    
+    // すべてのキーポイントを移動（refs方式）
+    for (let i = 0; i < keypoints.length; i += 3) {
+        const confidence = keypoints[i + 2];
+        
+        if (confidence > 0.1) {  // 有効なキーポイントのみ移動
+            keypoints[i] += deltaX;      // X座標
+            keypoints[i + 1] += deltaY;  // Y座標
+        }
+    }
+    
+    // データを更新
+    person[fieldName] = keypoints;
+    
+    debugLog(`✅ moveKeypointsWithRect: Moved ${fieldName} keypoints successfully`);
+}
+
+// 🚀 全データをエクスポート用フォーマットに同期（refs互換）
+function syncAllDataToExportFormat(poseData) {
+    if (!poseData) return;
+    
+    // 1. bodies.candidate → people.pose_keypoints_2d 同期
+    syncBodiesToPeople(poseData);
+    
+    // 2. 手の編集データがあれば元データにも同期
+    if (poseData.people && poseData.people[0]) {
+        const person = poseData.people[0];
         
-        const keypointIndex = findNearestKeypoint(mousePos.x, mousePos.y);
+        // 左手同期
+        if (person.hand_left_keypoints_2d) {
+            syncHandsToOriginal(poseData, 'left', person.hand_left_keypoints_2d);
+        }
         
-        if (keypointIndex >= 0) {
-            isDragging = true;
-            draggedKeypoint = keypointIndex;
-            
-            // 🔧 refs互換：ドラッグオフセット計算（キーポイントの正確な位置からのオフセット）
-            const currentPoseData = window.poseEditorGlobals.poseData || poseData;
-            if (currentPoseData && currentPoseData.bodies && currentPoseData.bodies.candidate) {
-                const candidates = currentPoseData.bodies.candidate;
-                const originalRes = currentPoseData.resolution || [512, 512];
-                const scaleX = canvas.width / originalRes[0];
-                const scaleY = canvas.height / originalRes[1];
-                
-                const point = candidates[keypointIndex];
-                if (point) {
-                    const keypointX = point[0] * scaleX;
-                    const keypointY = point[1] * scaleY;
-                    
-                    dragOffset = {
-                        x: mousePos.x - keypointX,
-                        y: mousePos.y - keypointY
-                    };
-                    
-                }
-            }
-            
-            debugLog(`Drag started: keypoint ${keypointIndex} at (${mousePos.x}, ${mousePos.y})`);
-            
-            // カーソルを変更
-            canvas.style.cursor = 'grabbing';
-        } else {
-            debugLog("No keypoint found near mouse position");
+        // 右手同期
+        if (person.hand_right_keypoints_2d) {
+            syncHandsToOriginal(poseData, 'right', person.hand_right_keypoints_2d);
+        }
+        
+        // 顔同期
+        if (person.face_keypoints_2d) {
+            syncFacesToOriginal(poseData, person.face_keypoints_2d);
         }
     }
+    
+    debugLog(`🔄 All data synced to export format - People: ${poseData.people ? poseData.people.length : 0}`);
 }
 
 // マウス移動処理（refs互換 + 矩形編集対応）
@@ -427,19 +1151,54 @@ function handleMouseMove(event) {
             return;
         }
         
-        // 🔧 通常のキーポイントドラッグ処理
-        if (draggedKeypoint >= 0) {
+        // 🎯 詳細モードの手・顔・ボディキーポイントドラッグ処理
+        if (window.poseEditorGlobals.draggedDetailKeypoint) {
+            updateDetailKeypointPosition(window.poseEditorGlobals.draggedDetailKeypoint, mousePos.x, mousePos.y);
+            
+            // リアルタイム再描画（エラーハンドリング付き・手顔データ保持強化）
+            try {
+                const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+                if (currentPoseData) {
+                    // 🫳😊 手と顔データが存在することを確認してから描画
+                    debugLog(`🎨 Real-time redraw: hands=${!!(currentPoseData.people && currentPoseData.people[0] && (currentPoseData.people[0].hand_left_keypoints_2d || currentPoseData.people[0].hand_right_keypoints_2d))}, faces=${!!currentPoseData.faces}`);
+                    if (currentPoseData.people && currentPoseData.people[0]) {
+                        const person = currentPoseData.people[0];
+                        debugLog(`🎨 People data: left_hand=${!!person.hand_left_keypoints_2d}, right_hand=${!!person.hand_right_keypoints_2d}, face=${!!person.face_keypoints_2d}`);
+                    }
+                    
+                    drawPose(currentPoseData, window.poseEditorGlobals.enableHands, window.poseEditorGlobals.enableFace);
+                    debugLog("✅ Real-time redraw completed after keypoint update");
+                } else {
+                    debugLog("⚠️ No pose data available for real-time redraw");
+                }
+            } catch (error) {
+                console.error("❌ Error in real-time redraw:", error);
+            }
+        }
+        // 🔧 通常のボディキーポイントドラッグ処理
+        else if (draggedKeypoint >= 0) {
             // 🔧 refs互換：オフセット考慮の新座標計算
             const newX = mousePos.x - dragOffset.x;
             const newY = mousePos.y - dragOffset.y;
             
-            
             // ドラッグ中の座標更新（オフセット適用済み座標で）
             updateKeypointPosition(draggedKeypoint, newX, newY);
             
-            // リアルタイム再描画（ハイライト付き）- グローバルposeDataを使用
-            const currentPoseData = window.poseEditorGlobals.poseData || poseData;
-            drawPose(currentPoseData, window.poseEditorGlobals.enableHands, window.poseEditorGlobals.enableFace, draggedKeypoint);
+            // リアルタイム再描画（ハイライト付き）- エラーハンドリング付き・手顔データ保持強化
+            try {
+                const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+                if (currentPoseData) {
+                    // 🫳😊 手と顔データの存在確認
+                    debugLog(`🎨 Highlighted redraw: hands=${!!(currentPoseData.people && currentPoseData.people[0] && (currentPoseData.people[0].hand_left_keypoints_2d || currentPoseData.people[0].hand_right_keypoints_2d))}, faces=${!!currentPoseData.faces}`);
+                    
+                    drawPose(currentPoseData, window.poseEditorGlobals.enableHands, window.poseEditorGlobals.enableFace, draggedKeypoint);
+                    debugLog("✅ Real-time redraw with highlight completed");
+                } else {
+                    debugLog("⚠️ No pose data available for highlighted redraw");
+                }
+            } catch (error) {
+                console.error("❌ Error in highlighted redraw:", error);
+            }
         }
         
     } else {
@@ -454,9 +1213,14 @@ function handleMouseMove(event) {
                 canvas.style.cursor = rectType === window.poseEditorGlobals.rectEditMode ? 'move' : 'default';
             }
         } else {
-            // 通常モード：キーポイント近くでカーソル変更
-            const keypointIndex = findNearestKeypoint(mousePos.x, mousePos.y);
-            canvas.style.cursor = keypointIndex >= 0 ? 'grab' : 'default';
+            // 🎯 詳細モードまたは通常モード：キーポイント近くでカーソル変更
+            if (window.poseEditorGlobals.editMode === "詳細モード") {
+                const detailKeypoint = findNearestKeypointInDetailMode(mousePos.x, mousePos.y);
+                canvas.style.cursor = detailKeypoint ? 'grab' : 'default';
+            } else {
+                const keypointIndex = findNearestKeypoint(mousePos.x, mousePos.y);
+                canvas.style.cursor = keypointIndex >= 0 ? 'grab' : 'default';
+            }
         }
     }
 }
@@ -480,6 +1244,10 @@ function handleMouseUp(event) {
         } else if (window.poseEditorGlobals.draggedRect) {
             debugLog(`Rectangle move drag ended: ${window.poseEditorGlobals.draggedRect}`);
             window.poseEditorGlobals.draggedRect = null;
+        } else if (window.poseEditorGlobals.draggedDetailKeypoint) {
+            // 🎯 詳細モードキーポイントドラッグ終了
+            debugLog(`Detail keypoint drag ended: ${window.poseEditorGlobals.draggedDetailKeypoint.type} ${window.poseEditorGlobals.draggedDetailKeypoint.keypointIndex}`);
+            window.poseEditorGlobals.draggedDetailKeypoint = null;
         } else if (draggedKeypoint >= 0) {
             draggedKeypoint = -1;
         }
@@ -487,12 +1255,12 @@ function handleMouseUp(event) {
         isDragging = false;
         canvas.style.cursor = 'default';
         
-        // Gradioに更新データを送信
+        // 🚀 編集完了データをGradio送信（データ改変はしない）
         sendPoseDataToGradio();
     }
 }
 
-// キーポイント座標更新（refs互換）
+// キーポイント座標更新（refs互換・people形式同期対応）
 function updateKeypointPosition(keypointIndex, canvasX, canvasY) {
     // グローバルposeDataを参照
     const currentPoseData = window.poseEditorGlobals.poseData || poseData;
@@ -515,44 +1283,263 @@ function updateKeypointPosition(keypointIndex, canvasX, canvasY) {
     const clampedDataX = Math.max(0, Math.min(originalRes[0], dataX));
     const clampedDataY = Math.max(0, Math.min(originalRes[1], dataY));
     
-    // candidateリストを更新
+    // 1. candidateリストを更新
     const candidates = currentPoseData.bodies.candidate;
     if (keypointIndex < candidates.length) {
         candidates[keypointIndex][0] = clampedDataX;
         candidates[keypointIndex][1] = clampedDataY;
         
-        
         // 🔧 ローカルposeDataも同期更新
         if (poseData && poseData.bodies && poseData.bodies.candidate) {
             poseData.bodies.candidate[keypointIndex][0] = clampedDataX;
             poseData.bodies.candidate[keypointIndex][1] = clampedDataY;
         }
     }
+    
+    // 2. 🚀 people形式にも同期更新（export用）
+    syncBodiesToPeople(currentPoseData);
+    
+    // 3. 🫳😊 手と顔データも強制同期（編集後の表示維持のため）
+    if (currentPoseData.people && currentPoseData.people[0]) {
+        const person = currentPoseData.people[0];
+        
+        // 💖 手データの同期（people形式のみ）
+        if (person.hand_left_keypoints_2d) {
+            syncHandsToOriginal(currentPoseData, 'left', person.hand_left_keypoints_2d);
+        }
+        if (person.hand_right_keypoints_2d) {
+            syncHandsToOriginal(currentPoseData, 'right', person.hand_right_keypoints_2d);
+        }
+        
+        // 顔データの同期
+        if (person.face_keypoints_2d && currentPoseData.faces) {
+            syncFacesToOriginal(currentPoseData, person.face_keypoints_2d);
+        }
+        
+        debugLog(`🔄 Hands and face data synced after keypoint update`);
+    }
+    
+    debugLog(`🎯 Keypoint ${keypointIndex} updated to (${clampedDataX}, ${clampedDataY})`);
+}
+
+// 🚀 bodies.candidateからpeople.pose_keypoints_2dに同期（refs互換）
+function syncBodiesToPeople(poseData) {
+    if (!poseData || !poseData.bodies || !poseData.bodies.candidate) {
+        return;
+    }
+    
+    // people形式が存在しない場合は作成
+    if (!poseData.people) {
+        poseData.people = [{}];
+    }
+    if (!poseData.people[0]) {
+        poseData.people[0] = {};
+    }
+    
+    const candidates = poseData.bodies.candidate;
+    const person = poseData.people[0];
+    
+    // candidatesからpose_keypoints_2dフラ��ト配列を生成
+    const pose_keypoints_2d = [];
+    for (let i = 0; i < candidates.length; i++) {
+        const candidate = candidates[i];
+        if (candidate && candidate.length >= 2) {
+            pose_keypoints_2d.push(candidate[0]);  // x
+            pose_keypoints_2d.push(candidate[1]);  // y
+            pose_keypoints_2d.push(candidate[2] || 1.0);  // confidence (デフォルト1.0)
+        } else {
+            // 無効なキーポイントは0で埋める
+            pose_keypoints_2d.push(0, 0, 0);
+        }
+    }
+    
+    person.pose_keypoints_2d = pose_keypoints_2d;
+    
+    // 🫳😊 既存の手と顔データを保持（ボディ編集時に消失しないように）
+    if (!person.hand_left_keypoints_2d && poseData.hands && poseData.hands[0]) {
+        person.hand_left_keypoints_2d = poseData.hands[0];
+        debugLog(`🫳 Left hand data preserved in people format`);
+    }
+    if (!person.hand_right_keypoints_2d && poseData.hands && poseData.hands[1]) {
+        person.hand_right_keypoints_2d = poseData.hands[1];
+        debugLog(`🫳 Right hand data preserved in people format`);
+    }
+    if (!person.face_keypoints_2d && poseData.faces && poseData.faces.length > 0) {
+        person.face_keypoints_2d = poseData.faces[0] || poseData.faces;
+        debugLog(`😊 Face data preserved in people format`);
+    }
+    
+    debugLog(`🔄 Bodies synced to people: ${pose_keypoints_2d.length / 3} keypoints, hands preserved: ${!!person.hand_left_keypoints_2d}/${!!person.hand_right_keypoints_2d}, face: ${!!person.face_keypoints_2d}`);
 }
 
-// Gradioにデータ送信（refs互換）
+// Gradioにデータ送信（refs互換・強制changeイベント版）
 function sendPoseDataToGradio() {
+    console.log('🔍 [sendPoseDataToGradio] Called');
     // グローバルposeDataを参照
     const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    console.log('🔍 [sendPoseDataToGradio] currentPoseData state:', {
+        exists: !!currentPoseData,
+        hasPeople: !!currentPoseData?.people,
+        peopleCount: currentPoseData?.people?.length || 0,
+        hasHandLeft: !!currentPoseData?.people?.[0]?.hand_left_keypoints_2d,
+        hasHandRight: !!currentPoseData?.people?.[0]?.hand_right_keypoints_2d,
+        hasFace: !!currentPoseData?.people?.[0]?.face_keypoints_2d
+    });
     
     if (!currentPoseData) {
         debugLog("No poseData available for Gradio send");
         return;
     }
     
+    // Issue 038: JavaScript側更新フラグチェック（refs issue043準拠）
+    if (window.poseEditorGlobals && window.poseEditorGlobals.isUpdating) {
+        debugLog("⚠️ JavaScript更新処理中のため、Gradio送信をスキップ");
+        return;
+    }
+    
+    // 処理開始フラグを立てる
+    if (window.poseEditorGlobals) {
+        window.poseEditorGlobals.isUpdating = true;
+        debugLog("🔒 JavaScript更新フラグ設定: isUpdating=true");
+    }
+    
     try {
-        // JSON文字列化
-        const jsonString = JSON.stringify(currentPoseData);
+        // Issue #038: people形式でPythonに送信（refs互換）
+        const canvasData = {
+            "people": [],
+            "_t": Date.now()  // タイムスタンプで強制イベント発火
+        };
         
-        // Gradioのテキストボックスを探して更新
-        const textareas = document.querySelectorAll('textarea');
+        // 常に最新データで構築（people形式があっても再構築）
+        if (currentPoseData.bodies && currentPoseData.bodies.candidate) {
+            // bodies.candidateからpeople形式に変換
+            const pose_keypoints_2d = [];
+            const candidates = currentPoseData.bodies.candidate;
+            
+            for (let i = 0; i < candidates.length; i++) {
+                const candidate = candidates[i];
+                if (candidate && candidate.length >= 2) {
+                    pose_keypoints_2d.push(candidate[0]);  // x
+                    pose_keypoints_2d.push(candidate[1]);  // y
+                    pose_keypoints_2d.push(candidate.length > 2 ? candidate[2] : 1.0);  // confidence
+                }
+            }
+            
+            const person = {
+                "pose_keypoints_2d": pose_keypoints_2d
+            };
+            
+            // 🫳 手のデータを追加（複数のソースから確実に取得）
+            // people形式から取得を試行
+            let leftHandData = null;
+            let rightHandData = null;
+            let faceData = null;
+            
+            // 💖 people形式からのみデータ取得（フォールバック削除）
+            if (currentPoseData.people && currentPoseData.people[0]) {
+                leftHandData = currentPoseData.people[0].hand_left_keypoints_2d || [];
+                rightHandData = currentPoseData.people[0].hand_right_keypoints_2d || [];
+                faceData = currentPoseData.people[0].face_keypoints_2d || [];
+            }
+            if (!faceData && currentPoseData.faces && currentPoseData.faces.length > 0) {
+                faceData = currentPoseData.faces[0] || currentPoseData.faces;
+            }
+            
+            // 💖 手と顔データを確実に設定（配列コピーで安全に保持）
+            if (leftHandData && leftHandData.length > 0) {
+                person.hand_left_keypoints_2d = [...leftHandData]; // 配列コピー
+                debugLog(`🫳 Left hand data included (copied): ${leftHandData.length} points`);
+            } else {
+                debugLog(`⚠️ Left hand data missing or empty`);
+            }
+            
+            if (rightHandData && rightHandData.length > 0) {
+                person.hand_right_keypoints_2d = [...rightHandData]; // 配列コピー
+                debugLog(`🫳 Right hand data included (copied): ${rightHandData.length} points`);
+            } else {
+                debugLog(`⚠️ Right hand data missing or empty`);
+            }
+            
+            if (faceData && faceData.length > 0) {
+                person.face_keypoints_2d = [...faceData]; // 配列コピー
+                debugLog(`😊 Face data included (copied): ${faceData.length} points`);
+            } else {
+                debugLog(`⚠️ Face data missing or empty`);
+            }
+            
+            canvasData.people = [person];
+        } else {
+            // bodies.candidateがない場合でも手と顔データがあれば送信
+            debugLog("⚠️ No bodies data available, trying to send hands/face only");
+            
+            const person = {
+                "pose_keypoints_2d": [] // 空のボディデータ
+            };
+            
+            // 手と顔データのみ追加
+            if (currentPoseData.people && currentPoseData.people[0]) {
+                const existingPerson = currentPoseData.people[0];
+                if (existingPerson.hand_left_keypoints_2d) {
+                    person.hand_left_keypoints_2d = existingPerson.hand_left_keypoints_2d;
+                }
+                if (existingPerson.hand_right_keypoints_2d) {
+                    person.hand_right_keypoints_2d = existingPerson.hand_right_keypoints_2d;
+                }
+                if (existingPerson.face_keypoints_2d) {
+                    person.face_keypoints_2d = existingPerson.face_keypoints_2d;
+                }
+            }
+            
+            // 💖 people形式で手・顔データ存在確認
+            const hasHandsOrFace = currentPoseData.people && currentPoseData.people[0] && 
+                (currentPoseData.people[0].hand_left_keypoints_2d || 
+                 currentPoseData.people[0].hand_right_keypoints_2d || 
+                 currentPoseData.people[0].face_keypoints_2d) ||
+                currentPoseData.faces;
+            if (hasHandsOrFace) {
+                canvasData.people = [person];
+                debugLog("🔄 Sending hands/face only data");
+            }
+        }
+        
+        // 解像度情報を保持
+        if (currentPoseData.resolution) {
+            canvasData.resolution = currentPoseData.resolution;
+        }
+        
+        // 送信前の最終データ確認
+        console.log('🔍 [sendPoseDataToGradio] Final canvasData being sent:', {
+            hasPeople: !!canvasData.people,
+            peopleCount: canvasData.people?.length || 0,
+            hasHandLeft: !!canvasData.people?.[0]?.hand_left_keypoints_2d,
+            hasHandRight: !!canvasData.people?.[0]?.hand_right_keypoints_2d,
+            hasFace: !!canvasData.people?.[0]?.face_keypoints_2d,
+            handLeftLength: canvasData.people?.[0]?.hand_left_keypoints_2d?.length || 0,
+            handRightLength: canvasData.people?.[0]?.hand_right_keypoints_2d?.length || 0,
+            faceLength: canvasData.people?.[0]?.face_keypoints_2d?.length || 0
+        });
+        
+        const jsonString = JSON.stringify(canvasData);
+        console.log('🎯 [sendPoseDataToGradio] People形式でGradioに送信:', canvasData.people.length, 'people');
+        
+        // 専用の隠しテキストボックスを探して更新
+        const jsUpdateTextbox = document.querySelector('#js_pose_update textarea');
         
+        if (jsUpdateTextbox) {
+            jsUpdateTextbox.value = jsonString;
+            jsUpdateTextbox.dispatchEvent(new Event('input', { bubbles: true }));
+            debugLog('✅ Pose data sent to Gradio via js_pose_update with timestamp');
+            return;
+        }
+        
+        // フォールバック：従来の方法
+        const textareas = document.querySelectorAll('textarea');
         for (const textarea of textareas) {
             const currentValue = textarea.value || '';
             if (currentValue.includes('bodies') || currentValue.includes('candidate') || currentValue.trim() === '') {
                 textarea.value = jsonString;
                 textarea.dispatchEvent(new Event('input', { bubbles: true }));
-                debugLog('Pose data sent to Gradio successfully');
+                debugLog('⚠️ Pose data sent to Gradio via fallback method with timestamp');
                 return;
             }
         }
@@ -560,6 +1547,13 @@ function sendPoseDataToGradio() {
         
     } catch (error) {
         debugLog(`Error sending data to Gradio: ${error.message}`);
+    } finally {
+        // Issue 038: 処理完了後は必ずフラグを解除（refs issue043準拠）
+        if (window.poseEditorGlobals) {
+            const oldFlag = window.poseEditorGlobals.isUpdating;
+            window.poseEditorGlobals.isUpdating = false;
+            debugLog(`🔓 JavaScript更新処理完了 - フラグ解除: ${oldFlag} → ${window.poseEditorGlobals.isUpdating}`);
+        }
     }
 }
 
@@ -582,10 +1576,17 @@ function drawPose(poseData, enableHands = true, enableFace = true, highlightInde
     // キャンバスクリア
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     
+    // 🎨 背景画像描画
+    drawBackground();
+    
     // 🔧 矩形編集モード中でない場合のみ矩形を再計算
     if (window.poseEditorGlobals.editMode === "簡易モード" && !window.poseEditorGlobals.rectEditModeActive) {
         window.poseEditorGlobals.currentRects = { leftHand: null, rightHand: null, face: null };
     }
+    // 🎯 詳細モードでは常に矩形をクリア
+    else if (window.poseEditorGlobals.editMode === "詳細モード") {
+        window.poseEditorGlobals.currentRects = { leftHand: null, rightHand: null, face: null };
+    }
     
     // 📐 解像度情報の取得（手と顔描画のため）
     const originalRes = currentPoseData.resolution || [512, 512];
@@ -596,16 +1597,30 @@ function drawPose(poseData, enableHands = true, enableFace = true, highlightInde
     // ボディの描画（ハイライト対応）
     drawBody(currentPoseData, highlightIndex);
     
-    // 手の描画（設定制御・座標変換パラメータ付き）
-    if (enableHands && currentPoseData.hands) {
-        // 🚀 refs互換：編集済みのhand_keypoints_2dを優先使用
-        const handsDataForDrawing = currentPoseData.people && currentPoseData.people[0] 
-            ? [
-                currentPoseData.people[0].hand_left_keypoints_2d || (currentPoseData.hands && currentPoseData.hands[0]),
-                currentPoseData.people[0].hand_right_keypoints_2d || (currentPoseData.hands && currentPoseData.hands[1])
-              ]
-            : currentPoseData.hands;
-        drawHands(handsDataForDrawing, originalRes, scaleX, scaleY);
+    // 手の描画（設定制御・座標変換パラメータ付き・エラー耐性強化）
+    if (enableHands) {
+        try {
+            // 🚀 refs互換：編集済みのhand_keypoints_2dを優先使用、フォールバック付き
+            let handsDataForDrawing = null;
+            
+            if (currentPoseData.people && currentPoseData.people[0]) {
+                const person = currentPoseData.people[0];
+                handsDataForDrawing = [
+                    person.hand_left_keypoints_2d || [],
+                    person.hand_right_keypoints_2d || []
+                ];
+            // 💖 people形式のみサポート、古いhands形式は削除
+            } else {
+                handsDataForDrawing = [[], []]; // 空の手データ
+            }
+            
+            if (handsDataForDrawing && handsDataForDrawing.length >= 2) {
+                drawHands(handsDataForDrawing, originalRes, scaleX, scaleY);
+                debugLog(`🫳 Hands drawn: left=${handsDataForDrawing[0].length}, right=${handsDataForDrawing[1].length}`);
+            }
+        } catch (error) {
+            console.error("❌ Error drawing hands:", error);
+        }
         
         // 🔧 簡易モード：手の矩形描画（編集モード中は再計算しない）
         if (window.poseEditorGlobals.editMode === "簡易モード") {
@@ -614,12 +1629,13 @@ function drawPose(poseData, enableHands = true, enableFace = true, highlightInde
                 if (currentPoseData.people && currentPoseData.people[0]) {
                     const person = currentPoseData.people[0];
                     const editedHandsData = [
-                        person.hand_left_keypoints_2d || (currentPoseData.hands && currentPoseData.hands[0]),
-                        person.hand_right_keypoints_2d || (currentPoseData.hands && currentPoseData.hands[1])
+                        person.hand_left_keypoints_2d || [],
+                        person.hand_right_keypoints_2d || []
                     ];
                     drawHandRectangles(editedHandsData, originalRes, scaleX, scaleY);
                 } else {
-                    drawHandRectangles(currentPoseData.hands, originalRes, scaleX, scaleY);
+                    // 💖 people形式のみサポート、空データで矩形なし
+                    drawHandRectangles([[], []], originalRes, scaleX, scaleY);
                 }
             } else {
                 // 編集モード中：既存の矩形を描画（再計算��ない）
@@ -632,13 +1648,27 @@ function drawPose(poseData, enableHands = true, enableFace = true, highlightInde
         debugLog("No hand data available");
     }
     
-    // 顔の描画（設定制御・座標変換パラメータ付き）
-    if (enableFace && currentPoseData.faces) {
-        // 🚀 refs互換：編集済みのface_keypoints_2dを優先使用
-        const facesDataForDrawing = currentPoseData.people && currentPoseData.people[0] && currentPoseData.people[0].face_keypoints_2d 
-            ? [currentPoseData.people[0].face_keypoints_2d] 
-            : currentPoseData.faces;
-        drawFaces(facesDataForDrawing, originalRes, scaleX, scaleY);
+    // 顔の描画（設定制御・座標変換パラメータ付き・エラー耐性強化）
+    if (enableFace) {
+        try {
+            // 🚀 refs互換：編集済みのface_keypoints_2dを優先使用、フォールバック付き
+            let facesDataForDrawing = null;
+            
+            if (currentPoseData.people && currentPoseData.people[0] && currentPoseData.people[0].face_keypoints_2d) {
+                facesDataForDrawing = [currentPoseData.people[0].face_keypoints_2d];
+            } else if (currentPoseData.faces && Array.isArray(currentPoseData.faces)) {
+                facesDataForDrawing = currentPoseData.faces;
+            } else {
+                facesDataForDrawing = [[]]; // 空の顔データ
+            }
+            
+            if (facesDataForDrawing && facesDataForDrawing.length > 0) {
+                drawFaces(facesDataForDrawing, originalRes, scaleX, scaleY);
+                debugLog(`😊 Face drawn: ${facesDataForDrawing[0].length} keypoints`);
+            }
+        } catch (error) {
+            console.error("❌ Error drawing face:", error);
+        }
         
         // 🔧 簡易モード：顔の矩形描画（編集モード中は再計算しない）
         if (window.poseEditorGlobals.editMode === "簡易モード") {
@@ -662,6 +1692,50 @@ function drawPose(poseData, enableHands = true, enableFace = true, highlightInde
     }
 }
 
+// 🎨 背景画像描画（refs互換）
+function drawBackground() {
+    if (!isCanvasReady()) return;
+    
+    const canvas = window.poseEditorGlobals.canvas;
+    const ctx = window.poseEditorGlobals.ctx;
+    
+    // デフォルト背景（白）
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    
+    // 背景画像がある場合は暗くして描画
+    if (window.poseEditorGlobals.backgroundImage) {
+        const img = window.poseEditorGlobals.backgroundImage;
+        
+        // アスペクト比を保持してCanvas内に収める
+        const imgAspect = img.width / img.height;
+        const canvasAspect = canvas.width / canvas.height;
+        
+        let drawWidth, drawHeight, offsetX, offsetY;
+        
+        if (imgAspect > canvasAspect) {
+            // 画像の方が横長 → 幅をCanvasに合わせる
+            drawWidth = canvas.width;
+            drawHeight = canvas.width / imgAspect;
+            offsetX = 0;
+            offsetY = (canvas.height - drawHeight) / 2;
+        } else {
+            // 画像の方が縦長 → 高さをCanvasに合わせる
+            drawHeight = canvas.height;
+            drawWidth = canvas.height * imgAspect;
+            offsetX = (canvas.width - drawWidth) / 2;
+            offsetY = 0;
+        }
+        
+        // 画像を暗くして描画（30%透明度）
+        ctx.globalAlpha = 0.3;
+        ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
+        ctx.globalAlpha = 1.0; // 透明度を元に戻す
+        
+        debugLog(`🎨 Background image drawn: ${drawWidth}x${drawHeight} at (${offsetX}, ${offsetY})`);
+    }
+}
+
 // ボディ描画（ハイライト対応）
 function drawBody(poseData, highlightIndex = -1) {
     if (!poseData.bodies || !poseData.bodies.candidate) {
@@ -1010,9 +2084,87 @@ window.gradioCanvasUpdate = function(pose_json_str) {
             poseData = pose_json_str;
         }
         
-        // 🔧 グローバルposeDataを必ず更新（ドラッグ機能のため）
-        window.poseEditorGlobals.poseData = poseData;
+        // 💖 グローバルposeDataを更新（但し、people形式チェック付き）
+        console.log('🔍 [gradioCanvasUpdate] Received poseData structure:', {
+            hasPeople: !!poseData?.people,
+            peopleCount: poseData?.people?.length || 0,
+            hasHandLeft: !!poseData?.people?.[0]?.hand_left_keypoints_2d,
+            hasHandRight: !!poseData?.people?.[0]?.hand_right_keypoints_2d,
+            hasFace: !!poseData?.people?.[0]?.face_keypoints_2d,
+            hasBodies: !!poseData?.bodies,
+            hasHands: !!poseData?.hands,
+            hasFaces: !!poseData?.faces
+        });
+        
+        // 💥 既存の手・顔データを保護！Python側データで上書きしない
+        const existingPoseData = window.poseEditorGlobals.poseData;
+        if (existingPoseData && existingPoseData.people && existingPoseData.people[0] && 
+            poseData && (!poseData.people || !poseData.people[0])) {
+            
+            console.log('🛡️ [gradioCanvasUpdate] Protecting existing people data from overwrite');
+            console.log('🔍 [gradioCanvasUpdate] Existing data:', {
+                hasHandLeft: !!existingPoseData.people[0].hand_left_keypoints_2d,
+                hasHandRight: !!existingPoseData.people[0].hand_right_keypoints_2d,
+                hasFace: !!existingPoseData.people[0].face_keypoints_2d
+            });
+            
+            // Python側データを古い形式に変換してからマージ
+            if (poseData.bodies || poseData.hands || poseData.faces) {
+                // 既存のpeople形式を保持し、bodies部分だけ更新
+                const preservedPoseData = JSON.parse(JSON.stringify(existingPoseData));
+                
+                // bodies.candidateがある場合は pose_keypoints_2d を更新
+                if (poseData.bodies && poseData.bodies.candidate) {
+                    const pose_keypoints_2d = [];
+                    for (const candidate of poseData.bodies.candidate) {
+                        if (candidate && candidate.length >= 2) {
+                            pose_keypoints_2d.push(candidate[0], candidate[1], candidate[2] || 1.0);
+                        }
+                    }
+                    preservedPoseData.people[0].pose_keypoints_2d = pose_keypoints_2d;
+                }
+                
+                // 手と顔データは既存を保持（Python側で消失している可能性があるため）
+                console.log('🔍 [gradioCanvasUpdate] Preserving hands/face data from existing poseData');
+                
+                window.poseEditorGlobals.poseData = preservedPoseData;
+                poseData = preservedPoseData;  // 描画用も更新
+            } else {
+                // people形式で来た場合はそのまま使用
+                window.poseEditorGlobals.poseData = poseData;
+            }
+        } else {
+            // 通常通り更新
+            window.poseEditorGlobals.poseData = poseData;
+        }
         
+        // 💖 originalKeypointsも設定（但し、baseOriginalKeypointsは保護）
+        if (poseData && poseData.people && poseData.people[0]) {
+            // 💥 baseOriginalKeypointsは上書きしない！（編集セッション保持のため）
+            if (!window.poseEditorGlobals.baseOriginalKeypoints) {
+                window.poseEditorGlobals.baseOriginalKeypoints = JSON.parse(JSON.stringify(poseData));
+                console.log("💖 [gradioCanvasUpdate] baseOriginalKeypoints set for FIRST time");
+            } else {
+                console.log("💖 [gradioCanvasUpdate] baseOriginalKeypoints PROTECTED from overwrite");
+            }
+            
+            // originalKeypointsは更新してOK（作業用）
+            window.poseEditorGlobals.originalKeypoints = JSON.parse(JSON.stringify(poseData));
+            console.log("🔧 [gradioCanvasUpdate] originalKeypoints set from gradioCanvasUpdate for template/upload");
+            
+            // デバッグ：手のデータ確認
+            const person = poseData.people[0];
+            if (person.hand_left_keypoints_2d) {
+                debugLog(`🫳 Left hand keypoints: ${person.hand_left_keypoints_2d.length} elements`);
+            } else {
+                debugLog("🫳 No left hand keypoints found");
+            }
+            if (person.hand_right_keypoints_2d) {
+                debugLog(`🫳 Right hand keypoints: ${person.hand_right_keypoints_2d.length} elements`);
+            } else {
+                debugLog("🫳 No right hand keypoints found");
+            }
+        }
         
         if (!isCanvasReady()) {
             debugLog("Canvas not ready, initializing...");
@@ -1077,10 +2229,40 @@ window.updateDisplaySettings = function(enableHands, enableFace, editMode) {
     window.poseEditorGlobals.enableFace = enableFace;
     window.poseEditorGlobals.editMode = editMode;
     
-    // 既存データがあれば再描画
+    // 🎯 詳細モードに切り替えた時は矩形編集モードを確実に終了
+    if (editMode === "詳細モード") {
+        window.poseEditorGlobals.rectEditMode = null;
+        window.poseEditorGlobals.rectEditModeActive = false;
+        window.poseEditorGlobals.draggedRectControl = null;
+        window.poseEditorGlobals.draggedRect = null;
+        window.poseEditorGlobals.currentRects = { leftHand: null, rightHand: null, face: null };
+        
+        // 🔧 編集関連の状態も完全にクリア（連続編集対応）
+        window.poseEditorGlobals.baseOriginalKeypoints = null;
+        window.poseEditorGlobals.originalKeypoints = null;
+        window.poseEditorGlobals.originalRect = null;
+        window.poseEditorGlobals.rectEditInfo = null;
+        window.poseEditorGlobals.dragStartPos = { x: 0, y: 0 };
+        
+        debugLog("🔧 All rectangle edit states cleared when switching to detailed mode");
+    }
+    
+    // 🔧 設定更新時は強制的に再描画
+    debugLog(`🎨 Display settings updated: hands=${enableHands}, face=${enableFace}, mode=${editMode}`);
+    
     const currentPoseData = window.poseEditorGlobals.poseData || poseData;
     if (currentPoseData && Object.keys(currentPoseData).length > 0) {
+        debugLog("🔄 Redrawing pose with new settings...");
         drawPose(currentPoseData, enableHands, enableFace);
+    } else {
+        debugLog("⚠️ No pose data available for redraw");
+        // データがない場合でも背景だけ描画し直す
+        if (isCanvasReady()) {
+            const canvas = window.poseEditorGlobals.canvas;
+            const ctx = window.poseEditorGlobals.ctx;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            drawBackground();
+        }
     }
     
 };
@@ -1097,6 +2279,47 @@ window.showToast = function(type, message) {
     }
 };
 
+// 🎨 背景画像設定機能（refs互換）
+window.setBackgroundImage = function(imageData) {
+    if (!imageData) {
+        // 背景画像をクリア
+        window.poseEditorGlobals.backgroundImage = null;
+        debugLog("🎨 Background image cleared");
+        
+        // 現在のポーズデータがあれば再描画
+        const currentPoseData = window.poseEditorGlobals.poseData;
+        if (currentPoseData && Object.keys(currentPoseData).length > 0) {
+            drawPose(currentPoseData, window.poseEditorGlobals.enableHands, window.poseEditorGlobals.enableFace);
+        }
+        return;
+    }
+    
+    const img = new Image();
+    img.onload = function() {
+        window.poseEditorGlobals.backgroundImage = img;
+        debugLog(`🎨 Background image loaded: ${img.width}x${img.height}`);
+        
+        // 背景画像が設定されたらCanvas再描画
+        const currentPoseData = window.poseEditorGlobals.poseData;
+        if (currentPoseData && Object.keys(currentPoseData).length > 0) {
+            drawPose(currentPoseData, window.poseEditorGlobals.enableHands, window.poseEditorGlobals.enableFace);
+        }
+    };
+    
+    img.onerror = function() {
+        debugLog("🚨 Failed to load background image");
+    };
+    
+    // Base64データまたはURLから画像を設定
+    if (typeof imageData === 'string') {
+        img.src = imageData;
+    } else if (imageData.url) {
+        img.src = imageData.url;
+    } else if (imageData.path) {
+        img.src = imageData.path;
+    }
+};
+
 // Canvas操作時の通知
 function notifyCanvasOperation(message) {
     showToast('info', message);
@@ -1159,6 +2382,8 @@ function safeCanvasOperation(operation) {
 function drawHandRectangles(handsData, originalRes, scaleX, scaleY) {
     if (!handsData || handsData.length === 0) return;
     
+    debugLog(`🎨 Drawing hand rectangles in mode: ${window.poseEditorGlobals.editMode}`);
+    
     const ctx = window.poseEditorGlobals.ctx;
     
     // 矩形の色定義（refs互換）
@@ -1171,10 +2396,17 @@ function drawHandRectangles(handsData, originalRes, scaleX, scaleY) {
             if (rect) {
                 const handType = HAND_TYPES[handIndex] || `hand_${handIndex}`;
                 
-                // 🔧 グローバルに矩形情報保存
-                window.poseEditorGlobals.currentRects[handType] = rect;
+                // 🔧 グローバルに矩形情報保存（編集モード中は既存の矩形を保持）
+                if (!window.poseEditorGlobals.currentRects[handType] || !window.poseEditorGlobals.rectEditModeActive) {
+                    window.poseEditorGlobals.currentRects[handType] = rect;
+                    debugLog(`🔧 Hand rect calculated for ${handType}: ${JSON.stringify(rect)}`);
+                } else {
+                    debugLog(`🔧 Hand rect preserved for ${handType} (edit mode active)`);
+                }
                 
-                drawEditableRect(ctx, rect, HAND_RECT_COLORS[handIndex % 2], handType);
+                // 描画は現在の矩形を使用（編集中は保存されている矩形）
+                const drawRect = window.poseEditorGlobals.currentRects[handType] || rect;
+                drawEditableRect(ctx, drawRect, HAND_RECT_COLORS[handIndex % 2], handType);
             }
         }
     });
@@ -1184,6 +2416,8 @@ function drawHandRectangles(handsData, originalRes, scaleX, scaleY) {
 function drawFaceRectangles(facesData, originalRes, scaleX, scaleY) {
     if (!facesData || facesData.length === 0) return;
     
+    debugLog(`🎨 Drawing face rectangles in mode: ${window.poseEditorGlobals.editMode}`);
+    
     const ctx = window.poseEditorGlobals.ctx;
     
     // 矩形の色定義（refs互換）
@@ -1193,10 +2427,17 @@ function drawFaceRectangles(facesData, originalRes, scaleX, scaleY) {
     if (face && face.length > 0) {
         const rect = calculateFaceRect(face, originalRes, scaleX, scaleY);
         if (rect) {
-            // 🔧 グローバルに矩形情報保存
-            window.poseEditorGlobals.currentRects.face = rect;
+            // 🔧 グローバルに矩形情報保存（編集モード中は既存の矩形を保持）
+            if (!window.poseEditorGlobals.currentRects.face || !window.poseEditorGlobals.rectEditModeActive) {
+                window.poseEditorGlobals.currentRects.face = rect;
+                debugLog(`🔧 Face rect calculated: ${JSON.stringify(rect)}`);
+            } else {
+                debugLog(`🔧 Face rect preserved (edit mode active)`);
+            }
             
-            drawEditableRect(ctx, rect, FACE_RECT_COLOR, 'face');
+            // 描画は現在の矩形を使用（編集中は保存されている矩形）
+            const drawRect = window.poseEditorGlobals.currentRects.face || rect;
+            drawEditableRect(ctx, drawRect, FACE_RECT_COLOR, 'face');
         }
     }
 }
@@ -1347,8 +2588,14 @@ function redrawPoseWithoutRecalculation() {
     drawBody(currentPoseData, -1);
     
     // 手の描画（設定制御・座標変換パラメータ付き）
-    if (window.poseEditorGlobals.enableHands && currentPoseData.hands) {
-        drawHands(currentPoseData.hands, originalRes, scaleX, scaleY);
+    // 💖 people形式で手を描画
+    if (window.poseEditorGlobals.enableHands && currentPoseData.people && currentPoseData.people[0]) {
+        const person = currentPoseData.people[0];
+        const handsData = [
+            person.hand_left_keypoints_2d || [],
+            person.hand_right_keypoints_2d || []
+        ];
+        drawHands(handsData, originalRes, scaleX, scaleY);
     }
     
     // 顔の描画（設定制御・座標変換パラメータ付き）
@@ -1545,8 +2792,10 @@ function updateRectControlDrag(mouseX, mouseY) {
     window.poseEditorGlobals.currentRects[rectType] = newRect;
     
     
-    // 🔧 手・顔キーポイントの座標も更新（refs互換シンプル版）
-    updateKeypointsByRectSimple(rectType, newRect);
+    // 🔧 手・顔キーポイントの座標も更新（直接矩形変換版）
+    if (controlPoint) {
+        transformKeypointsDirectly(rectType, originalRect, newRect);
+    }
     
     // 🚀 refs互換：編集中もリアルタイム描画
     const currentPoseData = window.poseEditorGlobals.poseData || poseData;
@@ -1563,9 +2812,11 @@ function updateRectControlDrag(mouseX, mouseY) {
 function initializeRectEditInfo() {
     debugLog('🚀 Initializing rectEditInfo for all rect types');
     
-    if (!window.poseEditorGlobals.rectEditInfo) {
-        window.poseEditorGlobals.rectEditInfo = {};
-    }
+    // 🔧 前回の状態をクリアしてから初期化（連続編集対応）
+    window.poseEditorGlobals.rectEditInfo = {};
+    window.poseEditorGlobals.baseOriginalKeypoints = null;
+    window.poseEditorGlobals.originalKeypoints = null;
+    window.poseEditorGlobals.originalRect = null;
     
     const rectTypes = ['face', 'leftHand', 'rightHand'];
     
@@ -1580,11 +2831,40 @@ function initializeRectEditInfo() {
         }
     }
     
-    // 元のキーポイントも保存
+    // 💖 元のキーポイントを保存（連続編集対応：ベースデータは初回のみ保存）
     const currentPoseData = window.poseEditorGlobals.poseData || poseData;
     if (currentPoseData) {
-        window.poseEditorGlobals.originalKeypoints = JSON.parse(JSON.stringify(currentPoseData));
-        debugLog('🔧 Original keypoints saved for all rect types');
+        // 💥 ベースは初回のみ保存！編集済みデータで上書きしない
+        if (!window.poseEditorGlobals.baseOriginalKeypoints) {
+            window.poseEditorGlobals.baseOriginalKeypoints = JSON.parse(JSON.stringify(currentPoseData));
+            console.log('💖 [initializeRectEditInfo] Base original keypoints saved for FIRST editing session');
+            
+            // ベースデータの詳細確認
+            console.log('🔍 [initializeRectEditInfo] Base data details:', {
+                hasHandLeft: !!window.poseEditorGlobals.baseOriginalKeypoints.people?.[0]?.hand_left_keypoints_2d,
+                hasHandRight: !!window.poseEditorGlobals.baseOriginalKeypoints.people?.[0]?.hand_right_keypoints_2d,
+                hasFace: !!window.poseEditorGlobals.baseOriginalKeypoints.people?.[0]?.face_keypoints_2d,
+                handLeftLength: window.poseEditorGlobals.baseOriginalKeypoints.people?.[0]?.hand_left_keypoints_2d?.length || 0,
+                handRightLength: window.poseEditorGlobals.baseOriginalKeypoints.people?.[0]?.hand_right_keypoints_2d?.length || 0,
+                faceLength: window.poseEditorGlobals.baseOriginalKeypoints.people?.[0]?.face_keypoints_2d?.length || 0
+            });
+        } else {
+            console.log('💖 [initializeRectEditInfo] Base original keypoints already exists - keeping original data');
+        }
+        
+        // 作業用は常にベースからコピー（編集済みデータではなく！）
+        window.poseEditorGlobals.originalKeypoints = JSON.parse(JSON.stringify(window.poseEditorGlobals.baseOriginalKeypoints));
+        console.log('💖 [initializeRectEditInfo] Working original keypoints restored from base for current editing session');
+        
+        // 作業用データの詳細確認
+        console.log('🔍 [initializeRectEditInfo] Working data details:', {
+            hasHandLeft: !!window.poseEditorGlobals.originalKeypoints.people?.[0]?.hand_left_keypoints_2d,
+            hasHandRight: !!window.poseEditorGlobals.originalKeypoints.people?.[0]?.hand_right_keypoints_2d,
+            hasFace: !!window.poseEditorGlobals.originalKeypoints.people?.[0]?.face_keypoints_2d,
+            handLeftLength: window.poseEditorGlobals.originalKeypoints.people?.[0]?.hand_left_keypoints_2d?.length || 0,
+            handRightLength: window.poseEditorGlobals.originalKeypoints.people?.[0]?.hand_right_keypoints_2d?.length || 0,
+            faceLength: window.poseEditorGlobals.originalKeypoints.people?.[0]?.face_keypoints_2d?.length || 0
+        });
     }
 }
 
@@ -1753,7 +3033,7 @@ function moveKeypointsArray(keypointsArray, deltaX, deltaY, label) {
     
 }
 
-// 🔧 矩形移動ドラッグ処理（refs互換）
+// 🔧 矩形移動ドラッグ処理（refs互換修正版）
 function updateRectMoveDrag(mouseX, mouseY) {
     const rectType = window.poseEditorGlobals.draggedRect;
     if (!rectType) return;
@@ -1761,29 +3041,29 @@ function updateRectMoveDrag(mouseX, mouseY) {
     const rect = window.poseEditorGlobals.currentRects[rectType];
     if (!rect) return;
     
-    // ドラッグ量を計算
-    const deltaX = mouseX - window.poseEditorGlobals.dragStartPos.x;
-    const deltaY = mouseY - window.poseEditorGlobals.dragStartPos.y;
+    const startPos = window.poseEditorGlobals.dragStartPos;
+    const deltaX = mouseX - startPos.x;
+    const deltaY = mouseY - startPos.y;
     
-    // 開始位置を更新（連続ドラッグ対応）
-    window.poseEditorGlobals.dragStartPos.x = mouseX;
-    window.poseEditorGlobals.dragStartPos.y = mouseY;
+    debugLog(`🔧 矩形移動ドラッグ: ${rectType}, delta=(${deltaX}, ${deltaY})`);
     
-    // 矩形位置を移動
-    rect.x += deltaX;
-    rect.y += deltaY;
+    // 矩形の位置を更新（refs方式）
+    const newRect = {
+        ...rect,
+        x: rect.x + deltaX,
+        y: rect.y + deltaY
+    };
     
     // Canvas境界制限
     const canvas = window.poseEditorGlobals.canvas;
-    rect.x = Math.max(0, Math.min(canvas.width - rect.width, rect.x));
-    rect.y = Math.max(0, Math.min(canvas.height - rect.height, rect.y));
+    newRect.x = Math.max(0, Math.min(canvas.width - newRect.width, newRect.x));
+    newRect.y = Math.max(0, Math.min(canvas.height - newRect.height, newRect.y));
     
     // 矩形を更新
-    window.poseEditorGlobals.currentRects[rectType] = rect;
-    
+    window.poseEditorGlobals.currentRects[rectType] = newRect;
     
-    // 手・顔キーポイントの座標も移動（refs互換シンプル版）
-    moveKeypointsByRectSimple(rectType, deltaX, deltaY);
+    // キーポイントを矩形の移動に合わせて移動（refs方式）
+    moveKeypointsWithRect(rectType, deltaX, deltaY);
     
     // 🚀 refs互換：編集中もリアルタイム描画
     const currentPoseData = window.poseEditorGlobals.poseData || poseData;
@@ -1794,6 +3074,9 @@ function updateRectMoveDrag(mouseX, mouseY) {
             window.poseEditorGlobals.enableFace
         );
     }
+    
+    // ドラッグ開始位置を更新（連続移動対応）
+    window.poseEditorGlobals.dragStartPos = { x: mouseX, y: mouseY };
 }
 
 // 🔧 矩形タイプに応じた色取得
@@ -1848,14 +3131,15 @@ function updateKeypointsByRect(rectType, newRect) {
         }
     }
     
-    // 古い構造（hands[], faces[]）にフォールバック
-    if (!targetKeypoints) {
-        if (rectType === 'leftHand' && currentPoseData.hands && currentPoseData.hands[0]) {
-            targetKeypoints = currentPoseData.hands[0];
-        } else if (rectType === 'rightHand' && currentPoseData.hands && currentPoseData.hands[1]) {
-            targetKeypoints = currentPoseData.hands[1];
-        } else if (rectType === 'face' && currentPoseData.faces && currentPoseData.faces[0]) {
-            targetKeypoints = currentPoseData.faces[0];
+    // 💖 people形式で再取得を試行（古い構造フォールバックを削除）
+    if (!targetKeypoints && currentPoseData.people && currentPoseData.people[0]) {
+        const person = currentPoseData.people[0];
+        if (rectType === 'leftHand') {
+            targetKeypoints = person.hand_left_keypoints_2d;
+        } else if (rectType === 'rightHand') {
+            targetKeypoints = person.hand_right_keypoints_2d;
+        } else if (rectType === 'face') {
+            targetKeypoints = person.face_keypoints_2d;
         }
     }
     
@@ -1996,14 +3280,15 @@ function moveKeypointsByRect(rectType, deltaX, deltaY) {
         }
     }
     
-    // 古い構造（hands[], faces[]）にフォールバック
-    if (!targetKeypoints) {
-        if (rectType === 'leftHand' && currentPoseData.hands && currentPoseData.hands[0]) {
-            targetKeypoints = currentPoseData.hands[0];
-        } else if (rectType === 'rightHand' && currentPoseData.hands && currentPoseData.hands[1]) {
-            targetKeypoints = currentPoseData.hands[1];
-        } else if (rectType === 'face' && currentPoseData.faces && currentPoseData.faces[0]) {
-            targetKeypoints = currentPoseData.faces[0];
+    // 💖 people形式で再取得を試行（古い構造フォールバックを削除）
+    if (!targetKeypoints && currentPoseData.people && currentPoseData.people[0]) {
+        const person = currentPoseData.people[0];
+        if (rectType === 'leftHand') {
+            targetKeypoints = person.hand_left_keypoints_2d;
+        } else if (rectType === 'rightHand') {
+            targetKeypoints = person.hand_right_keypoints_2d;
+        } else if (rectType === 'face') {
+            targetKeypoints = person.face_keypoints_2d;
         }
     }
     

utils/export_utils.py

@@ -5,9 +5,24 @@ import numpy as np
 from PIL import Image, ImageDraw
 import io
 import base64
+from datetime import datetime
 from .notifications import notify_success, notify_error
 
-def export_pose_as_image(pose_data, canvas_size=(640, 640), background_color=(240, 240, 240)):
+def get_timestamp_filename(prefix, extension):
+    """
+    タイムスタンプ付きファイル名を生成
+    
+    Args:
+        prefix: ファイル名の前置詞
+        extension: ファイル拡張子（ドットなし）
+    
+    Returns:
+        str: タイムスタンプ付きファイル名
+    """
+    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+    return f"{prefix}_{timestamp}.{extension}"
+
+def export_pose_as_image(pose_data, canvas_size=(640, 640), background_color=(0, 0, 0), enable_hands=True, enable_face=True):
     """
     ポーズデータを画像として出力
     
@@ -15,101 +30,199 @@ def export_pose_as_image(pose_data, canvas_size=(640, 640), background_color=(24
         pose_data: DWPoseデータ
         canvas_size: 出力画像サイズ
         background_color: 背景色 (R, G, B)
+        enable_hands: 手を描画するかどうか
+        enable_face: 顔を描画するかどうか
     
     Returns:
         PIL.Image: ポーズ画像
     """
     try:
+        print(f"[DEBUG] 🎨 export_pose_as_image開始 - データ: {bool(pose_data)}")
         if not pose_data:
+            print(f"[DEBUG] ❌ export_pose_as_image: ポーズデータなし")
             notify_error("ポーズデータがありません")
             return None
         
+        print(f"[DEBUG] 🎨 ポーズデータ構造: {list(pose_data.keys()) if isinstance(pose_data, dict) else type(pose_data)}")
+        
         # 新しい画像を作成
         image = Image.new('RGB', canvas_size, background_color)
         draw = ImageDraw.Draw(image)
+        print(f"[DEBUG] 🎨 背景画像作成完了: {canvas_size}")
         
-        # ボディの描画
-        if 'bodies' in pose_data and pose_data['bodies'].get('candidate'):
-            draw_body_on_image(draw, pose_data['bodies'])
+        # ボディの描画（refs準拠）
+        if 'people' in pose_data and pose_data['people']:
+            print(f"[DEBUG] 🎨 ボディ描画開始（refs準拠）")
+            draw_body_on_image(draw, pose_data, canvas_size)
+            print(f"[DEBUG] 🎨 ボディ描画完了")
+        else:
+            print(f"[DEBUG] ⚠️ ボディデータなし - people: {'people' in pose_data}, count: {len(pose_data.get('people', []))}")
         
-        # 手の描画
-        if 'hands' in pose_data and pose_data['hands']:
-            draw_hands_on_image(draw, pose_data['hands'])
+        # 💖 手の描画（people形式とhands形式両対応）
+        if enable_hands:
+            hands_data = None
+            if 'people' in pose_data and pose_data['people'] and len(pose_data['people']) > 0:
+                person = pose_data['people'][0]
+                left_hand = person.get('hand_left_keypoints_2d', [])
+                right_hand = person.get('hand_right_keypoints_2d', [])
+                if left_hand or right_hand:
+                    hands_data = [left_hand, right_hand]
+                    print(f"[DEBUG] 🎨 手描画開始（people形式）- 左: {len(left_hand)}, 右: {len(right_hand)}")
+            elif 'hands' in pose_data and pose_data['hands']:
+                hands_data = pose_data['hands']
+                print(f"[DEBUG] 🎨 手描画開始（hands形式）")
+            
+            if hands_data:
+                draw_hands_on_image(draw, hands_data, canvas_size)
+                print(f"[DEBUG] 🎨 手描画完了")
+            else:
+                print(f"[DEBUG] ⚠️ 手描画スキップ - 手データなし")
         
-        # 顔の描画
-        if 'faces' in pose_data and pose_data['faces']:
-            draw_faces_on_image(draw, pose_data['faces'])
+        # 💖 顔の描画（people形式とfaces形式両対応）
+        if enable_face:
+            face_data = None
+            if 'people' in pose_data and pose_data['people'] and len(pose_data['people']) > 0:
+                person = pose_data['people'][0]
+                face_keypoints = person.get('face_keypoints_2d', [])
+                if face_keypoints:
+                    face_data = [face_keypoints]
+                    print(f"[DEBUG] 🎨 顔描画開始（people形式）- キーポイント: {len(face_keypoints)}")
+            elif 'faces' in pose_data and pose_data['faces']:
+                face_data = pose_data['faces']
+                print(f"[DEBUG] 🎨 顔描画開始（faces形式）")
+            
+            if face_data:
+                draw_faces_on_image(draw, face_data, canvas_size)
+                print(f"[DEBUG] 🎨 顔描画完了")
+            else:
+                print(f"[DEBUG] ⚠️ 顔描画スキップ - 顔データなし")
         
-        notify_success("ポーズ画像をエクスポートしました")
+        print(f"[DEBUG] 🎨 export_pose_as_image成功!")
+        # 通知はapp.py側で行う（重複回避）
         return image
         
     except Exception as e:
+        print(f"[DEBUG] ❌ export_pose_as_image例外: {e}")
         notify_error(f"ポーズ画像エクスポートに失敗しました: {str(e)}")
         return None
 
-def draw_body_on_image(draw, bodies_data):
-    """画像にボディを描画"""
-    candidates = bodies_data.get('candidate', [])
-    subset = bodies_data.get('subset', [])
-    
-    if not subset:
-        return
-    
-    # 接続定義
-    connections = [
-        [0, 1], [1, 2], [2, 3], [3, 4],    # 右腕
-        [0, 5], [5, 6], [6, 7], [7, 8],    # 左腕
-        [0, 9], [9, 10], [10, 11],         # 右脚
-        [0, 12], [12, 13], [13, 14],       # 左脚
-        [0, 15], [15, 16]                  # 首・頭
-    ]
-    
-    person = subset[0]  # 最初の人物
-    
-    # 接続線を描画
-    for start, end in connections:
-        if start < len(person) and end < len(person):
-            start_idx = person[start]
-            end_idx = person[end]
+def draw_body_on_image(draw, pose_data, canvas_size):
+    """画像にボディを描画（refs準拠）"""
+    try:
+        print(f"[DEBUG] 🎨 draw_body_on_image開始（refs準拠）")
+        
+        # refs準拠：peopleからpose_keypoints_2dを取得
+        people = pose_data.get("people", [])
+        if not people:
+            print(f"[DEBUG] ⚠️ people が空のため描画スキップ")
+            return
+        
+        # refs準拠：接続定義
+        connections = [
+            [1, 2], [1, 5], [2, 3], [3, 4], [5, 6], [6, 7], [1, 8], [8, 9],
+            [9, 10], [1, 11], [11, 12], [12, 13], [1, 0], [0, 14], [14, 16],
+            [0, 15], [15, 17], [10, 18], [13, 19]  # つま先まで含む
+        ]
+        
+        # refs準拠：色定義（BGR→RGB変換）
+        skeleton_colors = [
+            (0, 0, 255), (0, 85, 255), (0, 170, 255), (0, 255, 255), (0, 255, 170), (0, 255, 85), (0, 255, 0),
+            (85, 255, 0), (170, 255, 0), (255, 255, 0), (170, 255, 0), (85, 255, 0), (255, 0, 0), (255, 0, 85),
+            (255, 0, 170), (255, 0, 255), (170, 0, 255), (85, 0, 255), (255, 255, 170), (170, 255, 255)
+        ]
+        
+        W, H = canvas_size
+        detection_threshold = 0.3
+        
+        for person in people:
+            keypoints_flat = person.get("pose_keypoints_2d", [])
+            print(f"[DEBUG] 🎨 keypoints_flat length: {len(keypoints_flat)}")
+            
+            # refs準拠：3要素ずつ分割してキーポイントリスト作成
+            keypoints = []
+            for i in range(0, len(keypoints_flat), 3):
+                if i + 2 < len(keypoints_flat):
+                    x, y, confidence = keypoints_flat[i:i+3]
+                    keypoints.append([x, y, confidence])
+            
+            print(f"[DEBUG] 🎨 keypoints count: {len(keypoints)}")
             
-            if start_idx >= 0 and end_idx >= 0 and start_idx < len(candidates) and end_idx < len(candidates):
-                start_point = candidates[start_idx]
-                end_point = candidates[end_idx]
+            # 座標の正規化チェックと変換（refs準拠）
+            if len(keypoints) > 0 and all(0 <= kp[0] <= 1 and 0 <= kp[1] <= 1 for kp in keypoints if kp[2] > 0):
+                for kp in keypoints:
+                    if kp[2] > 0:
+                        kp[0] *= W
+                        kp[1] *= H
+            
+            # refs準拠：接続線の描画
+            for i, connection in enumerate(connections):
+                if i < len(skeleton_colors):
+                    color = skeleton_colors[i]
+                else:
+                    color = skeleton_colors[i % len(skeleton_colors)]
                 
-                if len(start_point) >= 2 and len(end_point) >= 2:
-                    draw.line([
-                        (start_point[0], start_point[1]),
-                        (end_point[0], end_point[1])
-                    ], fill=(255, 0, 85), width=3)
-    
-    # キーポイントを描画
-    for i in range(min(17, len(person))):
-        idx = person[i]
-        if idx >= 0 and idx < len(candidates):
-            point = candidates[idx]
-            if len(point) >= 2:
-                x, y = point[0], point[1]
-                draw.ellipse([x-4, y-4, x+4, y+4], fill=(255, 0, 85))
+                idx1, idx2 = connection
+                
+                if 0 <= idx1 < len(keypoints) and 0 <= idx2 < len(keypoints):
+                    kp1 = keypoints[idx1]
+                    kp2 = keypoints[idx2]
+                    
+                    if kp1[2] > detection_threshold and kp2[2] > detection_threshold:
+                        # refs準拠：太い線の描画（PIL版）
+                        draw.line([
+                            (int(kp1[0]), int(kp1[1])),
+                            (int(kp2[0]), int(kp2[1]))
+                        ], fill=color, width=4)
+            
+            # refs準拠���キーポイントの描画
+            for i, kp in enumerate(keypoints):
+                x, y, confidence = kp
+                if confidence > detection_threshold:
+                    if i < len(skeleton_colors):
+                        color = skeleton_colors[i]
+                    else:
+                        color = skeleton_colors[i % len(skeleton_colors)]
+                    
+                    draw.ellipse([int(x)-4, int(y)-4, int(x)+4, int(y)+4], fill=color)
+        
+        print(f"[DEBUG] 🎨 draw_body_on_image完了")
+        
+    except Exception as e:
+        print(f"[DEBUG] ❌ draw_body_on_image例外: {e}")
+        import traceback
+        traceback.print_exc()
 
-def draw_hands_on_image(draw, hands_data):
-    """画像に手を描画"""
+def draw_hands_on_image(draw, hands_data, canvas_size):
+    """💖 画像に手を描画（座標変換対応）"""
+    W, H = canvas_size
     for hand in hands_data:
         if hand and len(hand) > 0:
             for i in range(0, len(hand), 3):
                 if i + 2 < len(hand):
                     x, y, conf = hand[i], hand[i+1], hand[i+2]
                     if conf > 0.3:
-                        draw.ellipse([x-3, y-3, x+3, y+3], fill=(255, 149, 0))
+                        # 💖 座標の正規化チェック（0-1の場合はCanvas座標に変換）
+                        if 0 <= x <= 1 and 0 <= y <= 1:
+                            x = x * W
+                            y = y * H
+                        # refs準拠: OpenCV(255,0,0)BGR → PIL(0,0,255)RGB = 青
+                        draw.ellipse([int(x)-3, int(y)-3, int(x)+3, int(y)+3], fill=(0, 0, 255))
 
-def draw_faces_on_image(draw, faces_data):
-    """画像に顔を描画"""
+def draw_faces_on_image(draw, faces_data, canvas_size):
+    """💖 画像に顔を描画（座標変換対応）"""
+    W, H = canvas_size
     for face in faces_data:
         if face and len(face) > 0:
             for i in range(0, len(face), 3):
                 if i + 2 < len(face):
                     x, y, conf = face[i], face[i+1], face[i+2]
                     if conf > 0.3:
-                        draw.ellipse([x-2, y-2, x+2, y+2], fill=(0, 255, 0))
+                        # 💖 座標の正規化チェック（0-1の場合はCanvas座標に変換）
+                        if 0 <= x <= 1 and 0 <= y <= 1:
+                            x = x * W
+                            y = y * H
+                        # refs準拠: OpenCV(255,255,255)BGR → PIL(255,255,255)RGB = 白
+                        draw.ellipse([int(x)-2, int(y)-2, int(x)+2, int(y)+2], fill=(255, 255, 255))
 
 def export_pose_as_json(pose_data, include_metadata=True):
     """
@@ -138,7 +251,7 @@ def export_pose_as_json(pose_data, include_metadata=True):
             }
         
         json_str = json.dumps(export_data, indent=2, ensure_ascii=False)
-        notify_success("ポーズデータをJSONでエクスポートしました")
+        # 通知はapp.py側で行う（重複回避）
         return json_str
         
     except Exception as e: