feat: テンプレート選択機能の改善と手動更新方式の実装

- CLAUDE.md:
- テンプレート選択機能を改善し、ドロップダウンを「3頭身立ちポーズ」に集約
- 「🔄 ポーズ更新」ボタンを追加し、手動更新方式に変更
- 3heads.jsonファイルを直接活用するテンプレート読み込み機能を実装
- Python側でpeople形式とbodies形式のハイブリッドデータ構造を採用
- JavaScript側でテンプレート読み込み時の表示設定強制同期を実装
- 体・手・顔の全データが初期表示から正常に描画される仕組みを完成

- app.py:
- デバッグ用の手データ確認コードを削除し、コードをクリーンアップ

- pose_editor.js:
- 手データのデバッグログを削除し、コードをクリーンアップ

CLAUDE.md

@@ -192,6 +192,14 @@ Key Features:
   * 詳細モードでは矩形を非表示にして、キーポイント直接操作を可能に
   * ラジオボタン監視機能の追加で編集モード切り替えをリアルタイム反映
 
+- **Issue #039**: テンプレート選択機能改善 (2025-01-15) 🎯
+  * テンプレートドロップダウンを1つの選択肢（「3頭身立ちポーズ」）に集約
+  * 「🔄 ポーズ更新」ボタンを追加し、手動更新方式に変更
+  * 3heads.jsonファイルを直接活用するテンプレート読み込み機能を実装
+  * Python側でpeople形式とbodies形式のハイブリッドデータ構造を採用
+  * JavaScript側でテンプレート読み込み時の表示設定強制同期を実装
+  * 体・手・顔の全データが初期表示から正常に描画される仕組みを完成
+
 ### 🔧 **Current Implementation Status**
 **Phase 1 (Project Foundation)**: COMPLETED ✅
 - Basic Gradio application structure ✅

app.py

@@ -325,40 +325,12 @@ def main():
                         "face_keypoints_2d": actual_pose_data.get('faces', [[]])[0] if actual_pose_data.get('faces') else []
                     }
                     
-                    # デバッグ：手データの変換確認
-                    print(f"[DEBUG] 🫳 Hand data conversion:")
-                    print(f"  - hands in data: {bool(actual_pose_data.get('hands'))}")
-                    print(f"  - hands length: {len(actual_pose_data.get('hands', []))}")
-                    if actual_pose_data.get('hands'):
-                        print(f"  - left hand length: {len(actual_pose_data['hands'][0]) if len(actual_pose_data['hands']) > 0 else 0}")
-                        print(f"  - right hand length: {len(actual_pose_data['hands'][1]) if len(actual_pose_data['hands']) > 1 else 0}")
-                    print(f"  - person_data left hand: {len(person_data['hand_left_keypoints_2d'])}")
-                    print(f"  - person_data right hand: {len(person_data['hand_right_keypoints_2d'])}")
-                    
-                    # デバッグ：actual_pose_dataの構造確認
-                    print(f"[DEBUG] 🔍 actual_pose_data structure check:")
-                    print(f"  - keys: {list(actual_pose_data.keys())}")
-                    print(f"  - has bodies: {'bodies' in actual_pose_data}")
-                    if 'bodies' in actual_pose_data:
-                        print(f"  - bodies keys: {list(actual_pose_data['bodies'].keys())}")
-                        print(f"  - has candidate: {'candidate' in actual_pose_data['bodies']}")
-                    
                     # bodies.candidateからpose_keypoints_2d変換
                     if 'bodies' in actual_pose_data and 'candidate' in actual_pose_data['bodies']:
                         candidates = actual_pose_data['bodies']['candidate']
-                        print(f"[DEBUG] 🤖 Body data conversion:")
-                        print(f"  - bodies.candidate length: {len(candidates)}")
-                        for i, candidate in enumerate(candidates):
+                        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])
-                                if i < 3:  # 最初の3つだけログ出力
-                                    print(f"  - candidate {i}: {candidate[:3]}")
-                        print(f"  - final pose_keypoints_2d length: {len(person_data['pose_keypoints_2d'])}")
-                    else:
-                        print(f"[DEBUG] ❌ No bodies.candidate found in actual_pose_data!")
-                        print(f"  - has bodies: {bool(actual_pose_data.get('bodies'))}")
-                        if actual_pose_data.get('bodies'):
-                            print(f"  - bodies keys: {list(actual_pose_data['bodies'].keys())}")
                     
                     _current_poses = [{
                         'people': [person_data],
@@ -367,8 +339,6 @@ def main():
                         }
                     }]
                     _current_frame_index = 0
-                    print(f"[DEBUG] ✅ グローバル変数更新完了（テンプレート読み込み・refs互換）: {template_name}")
-                    
                     # people形式でデータを構築（元のbodies/hands/facesも保持）
                     people_format_data = {
                         'people': [person_data],
@@ -381,8 +351,6 @@ def main():
                         'is_template_load': True  # テンプレート読み込みフラグ
                     }
                     
-                    print(f"[DEBUG] 🔄 Returning people format data with {len(person_data['hand_left_keypoints_2d'])} left hand points")
-                    
                     notify_success(f"{template_name}を読み込みました")
                     return people_format_data, people_format_data
                 else:

issues/039_テンプレート選択機能改善.md

@@ -131,6 +131,27 @@ template_update_btn = gr.Button(
 
 ---
 *Created: 2025-01-15*
-*Status: 新規作成*
+*Completed: 2025-01-15*
+*Status: ✅ 完了*
 *Assignee: Claude Code Agent*
-*Tags: UI改善, テンプレート機能, ユーザビリティ*
+*Tags: UI改善, テンプレート機能, ユーザビリティ*
+
+## 実装結果
+
+### ✅ 完了した機能
+1. **テンプレートUI改善**: ドロップダウンを「3頭身立ちポーズ」1つに集約
+2. **手動更新ボタン**: 「🔄 ポーズ更新」ボタンの追加と手動更新方式への変更
+3. **3heads.json活用**: 実際のテンプレートファイルを直接読み込む機能の実装
+4. **ハイブリッドデータ構造**: people形式とbodies形式を両方含むデータ送信
+5. **表示設定同期**: テンプレート読み込み時の表示設定強制同期機能
+
+### 🛠️ 技術的解決策
+- **Python側**: people形式とbodies/hands/faces形式のハイブリッド送信
+- **JavaScript側**: テンプレート読み込み時の表示設定強制取得
+- **初期表示問題解決**: 体・手・顔の全データが最初から正常描画される
+
+### 📊 成果
+- シンプルで分かりやすいUI（選択肢1つ）
+- ユーザー制御可能な手動更新方式
+- 3heads.jsonテンプレートファイルの有効活用
+- 全ポーズデータの完全な初期表示

static/pose_editor.js

@@ -1876,23 +1876,14 @@ function drawPose(poseData, enableHands = true, enableFace = true, highlightInde
                     person.hand_left_keypoints_2d || [],
                     person.hand_right_keypoints_2d || []
                 ];
-                console.log('🫳 [HANDS DEBUG] Hand data prepared:', {
-                    leftLength: handsDataForDrawing[0].length,
-                    rightLength: handsDataForDrawing[1].length,
-                    leftSample: handsDataForDrawing[0].slice(0, 9),
-                    rightSample: handsDataForDrawing[1].slice(0, 9)
-                });
             // 💖 people形式のみサポート、古いhands形式は削除
             } else {
                 handsDataForDrawing = [[], []]; // 空の手データ
-                console.log('🫳 [HANDS DEBUG] No people data, using empty hands');
             }
             
             if (handsDataForDrawing && handsDataForDrawing.length >= 2) {
                 drawHands(handsDataForDrawing, originalRes, scaleX, scaleY);
                 debugLog(`🫳 Hands drawn: left=${handsDataForDrawing[0].length}, right=${handsDataForDrawing[1].length}`);
-            } else {
-                console.log('🫳 [HANDS DEBUG] Invalid handsDataForDrawing structure');
             }
         } catch (error) {
             console.error("❌ Error drawing hands:", error);
@@ -2363,28 +2354,6 @@ window.gradioCanvasUpdate = function(pose_json_str) {
         }
         
         // 💖 グローバル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,
-            hasBackgroundImage: !!poseData?.background_image,
-            handLeftLength: poseData?.people?.[0]?.hand_left_keypoints_2d?.length || 0,
-            handRightLength: poseData?.people?.[0]?.hand_right_keypoints_2d?.length || 0,
-            isTemplateLoad: !!poseData?.is_template_load
-        });
-        
-        // 🔍 テンプレート読み込み時の詳細ログ
-        if (poseData?.is_template_load) {
-            console.log('🔄 [TEMPLATE LOAD] Detailed hand data check:', {
-                leftHandData: poseData?.people?.[0]?.hand_left_keypoints_2d?.slice(0, 9) || 'NO DATA',
-                rightHandData: poseData?.people?.[0]?.hand_right_keypoints_2d?.slice(0, 9) || 'NO DATA'
-            });
-        }
         
         // 🎨 背景画像が含まれている場合は設定
         if (poseData && poseData.background_image) {
@@ -2398,31 +2367,19 @@ window.gradioCanvasUpdate = function(pose_json_str) {
         const existingPoseData = window.poseEditorGlobals.poseData;
         
         if (isTemplateLoad) {
-            console.log('🔄 [gradioCanvasUpdate] Template load detected - complete replacement');
             // テンプレート読み込み時は完全置換
             window.poseEditorGlobals.poseData = poseData;
             // baseOriginalKeypointsもリセット（新しいテンプレート用）
             window.poseEditorGlobals.baseOriginalKeypoints = null;
             
-            // 🔧 テンプレート読み込み時は現在のチェックボックス状態を強制取得
+            // テンプレート読み込み時は現在のチェックボックス状態を強制取得
             updateDisplaySettingsFromCheckbox();
-            console.log('🔧 [TEMPLATE LOAD] Forced display settings update:', {
-                enableHands: window.poseEditorGlobals.enableHands,
-                enableFace: window.poseEditorGlobals.enableFace,
-                editMode: window.poseEditorGlobals.editMode
-            });
             
-            // 念のため、チェックボックス監視も再設定
+            // チェックボックス監視も再設定
             setTimeout(() => setupGradioCheckboxListeners(), 100);
         } else 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) {
@@ -2441,7 +2398,6 @@ window.gradioCanvasUpdate = function(pose_json_str) {
                 }
                 
                 // 手と顔データは既存を保持（Python側で消失している可能性があるため）
-                console.log('🔍 [gradioCanvasUpdate] Preserving hands/face data from existing poseData');
                 
                 window.poseEditorGlobals.poseData = preservedPoseData;
                 poseData = preservedPoseData;  // 描画用も更新
@@ -2456,30 +2412,14 @@ window.gradioCanvasUpdate = function(pose_json_str) {
         
         // 💖 originalKeypointsも設定（但し、baseOriginalKeypointsは保護）
         if (poseData && poseData.people && poseData.people[0]) {
-            // 💥 baseOriginalKeypointsは上書きしない！（編集セッション保持のため）
+            // 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()) {
@@ -2498,16 +2438,8 @@ window.gradioCanvasUpdate = function(pose_json_str) {
         const ctx = window.poseEditorGlobals.ctx;
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         
-        // 🔧 グローバル設定で描画（手・顔表示設定を反映）
+        // グローバル設定で描画（手・顔表示設定を反映）
         if (poseData && Object.keys(poseData).length > 0) {
-            console.log('🎨 [DRAW CALL] About to call drawPose with settings:', {
-                enableHands: window.poseEditorGlobals.enableHands,
-                enableFace: window.poseEditorGlobals.enableFace,
-                editMode: window.poseEditorGlobals.editMode,
-                hasPeopleData: !!poseData.people,
-                handDataAvailable: !!(poseData.people?.[0]?.hand_left_keypoints_2d?.length > 0)
-            });
-            
             drawPose(
                 poseData, 
                 window.poseEditorGlobals.enableHands,