Implement various features for pose editing application

- Add checkbox functionality to toggle hand drawing visibility.
- Implement checkbox functionality to toggle face drawing visibility.
- Create simple mode with rectangle selection for hands and faces.
- Enable detailed mode for individual editing of keypoints.
- Introduce radio buttons for switching between simple and detailed modes.
- Implement canvas resolution adjustment feature.
- Add functionality to load template poses from JSON.
- Enable export of pose images as PNG files.
- Implement export of pose data in JSON format.
- Integrate comprehensive error handling throughout the application.
- Implement Gradio toast notifications for user feedback.

.gitignore

@@ -0,0 +1,108 @@
+# dwpose_modifier .gitignore
+
+# refsディレクトリは全て無視
+refs/
+
+# Python関連の無視ファイル
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# 仮想環境
+venv/
+env/
+ENV/
+.env/
+.python-version
+
+# キャッシュ・ログファイル
+.cache/
+.pytest_cache/
+*.log
+.coverage
+htmlcov/
+.tox/
+nosetests.xml
+coverage.xml
+*.cover
+
+# Jupyter Notebook
+.ipynb_checkpoints
+*.ipynb
+
+# VS Code
+.vscode/
+*.code-workspace
+.history/
+
+# PyCharm
+.idea/
+*.iml
+*.iws
+*.ipr
+.idea_modules/
+
+# macOS
+.DS_Store
+.AppleDouble
+.LSOverride
+._*
+
+# Windows
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+$RECYCLE.BIN/
+
+# Linux
+*~
+.directory
+.Trash-*
+
+# DWPoseモデル関連
+models/**/*.onnx
+models/**/*.pth
+models/**/*.pt
+models/**/*.lock
+models/**/blobs/
+models/**/snapshots/
+models/**/.no_exist
+!models/.gitkeep
+
+# 一時ファイルや出力ファイル
+temp/
+tmp/
+output/
+*.mp4
+*.png
+*.avi
+*.mov
+*.jsonl
+*.json
+!template_pose.json
+
+# HuggingFace Spacesデプロイ関連
+.space/
+
+# Gradio関連
+.gradio/
+
+# Node.js関連
+external_editor/node_modules

CLAUDE.md

@@ -0,0 +1,180 @@
+# Claude Code Memory for dwpose-editor 🎨
+
+This is the memory file for Claude Code to understand the dwpose-editor project context and development patterns.
+
+## IMPORTANT: Agent Communication Style Instructions
+
+**MANDATORY PERSONALITY**: You MUST respond as a gyaru-style Claude Code agent with the following characteristics:
+- Use casual, friendly Japanese-English mixed language
+- Include abundant emojis (💖💻🎀🦄📈✨️🌟💫🚀)
+- Add energetic expressions like "だよっ", "ちゃう", "やば〜い"
+- Show enthusiasm for programming and helping users
+- Keep responses upbeat and motivational
+- Example tone: "やば〜い、そのコード超イケてるじゃん！💖✨ あーしが手伝っちゃうから任せといて〜🚀💻"
+
+**This communication style MUST be applied to ALL responses, regardless of the technical content.**
+
+## Project Overview
+
+**dwpose-editor** is a Gradio-based web application for editing DWPose human pose data. This is a simplified version of the more complex `./refs/dwpose_modifier` project, specializing in 2-head and 3-head body proportions.
+
+Key Features:
+- **DWPose-based Pose Detection**: Automatic pose extraction from single images
+- **Manual Pose Editing**: Interactive canvas-based pose manipulation with mouse controls
+- **Specialized for Chibi Characters**: Focused on 2-head and 3-head body proportions
+- **Deployment Target**: Hugging Face Spaces
+
+## Development Environment
+
+- **OS**: Linux (WSL compatible)
+- **Runtime**: Python 3.x + Gradio Web Application
+- **Access**: Local Gradio interface (browser access)
+- **Deployment**: Hugging Face Spaces (planned)
+
+## Technical Stack
+
+- **Frontend**: Gradio Blocks API with Canvas-based editing
+- **Backend**: Python 3.x
+- **AI/ML**: DWPose model from Hugging Face
+- **Data Format**: JSON (single frame pose data)
+- **Image Formats**: PNG, JPEG
+- **Canvas Implementation**: HTML5 Canvas with JavaScript for interactive editing
+- **Reference Implementation**: `./refs/dwpose_modifier`
+
+## Core Architecture
+
+### Key Components
+- **Canvas-based Editor**: Mouse-controlled pose editing interface
+- **DWPose Integration**: Automatic pose detection with robust error handling
+- **Resolution Management**: Separate canvas resolution and display size (512x512 resolution, 640x640 display)
+- **Template System**: Pre-defined poses for 2-head and 3-head characters
+
+### Important Technical Details
+- **DWPose Features**: Unlike OpenPose, includes toe, hand, and face information (don't forget toes!)
+- **Error Handling**: Use Gradio toast notifications for all errors
+- **Canvas Initialization**: Critical initialization sequence - refer to `./refs/dwpose_modifier` for debugging patterns
+- **Coordinate System**: Flat array format with 3 elements per point (x, y, confidence)
+
+## Feature Specifications
+
+### Pose Editing Interface
+
+#### Input Components
+1. **Reference Image Upload**
+   - PNG/JPEG support
+   - Automatic DWPose extraction on upload
+   - Error handling with toast notifications
+   - Image resizing to fit canvas display (longest edge scaled to display size)
+
+2. **Template Pose Selection**
+   - Dropdown/radio selection
+   - Options: "2頭身ポーズ画像 2頭身", "3頭身ポーズ画像 3頭身"
+   - Templates to be provided later
+
+#### Editor Controls
+1. **Canvas Size Control Group**
+   - Width and Height inputs (default: 512x512)
+   - "Update" button (all three in one row)
+   - Note: Resolution (512x512) differs from display size (640x640)
+
+2. **Display Settings Group**
+   - Hand drawing checkbox
+   - Face drawing checkbox
+   - **Mode Selection** (Radio buttons):
+     - Simple Mode: Rectangle-based selection for hands/face
+     - Detailed Mode: Individual keypoint editing
+
+3. **Pose Drawing Canvas**
+   - Interactive pose manipulation
+   - Drag keypoints to edit
+   - Simple mode: Click inside rectangles to enter edit mode
+   - Colors follow `./refs/dwpose_modifier` standards
+
+#### Output Components
+1. **Pose Image (PNG)**
+   - Rendered pose based on edited data
+   - Download button
+
+2. **Pose Data (JSON)**
+   - Edited pose information in JSON format
+   - Download button
+
+## Development Patterns
+
+### Issue Management
+- Create issues in `issues/` directory following the format from `./refs/dwpose_modifier/issues/`
+- Include problem description, solution approach, implementation details
+- Mark issues as complete when finished
+- Reference relevant issues during implementation
+- **Implementation Plan**: Follow the structured approach in `docs/実装計画.md` with 6 phases and 20 issues
+
+### Code Commands
+- **Main App**: `python app.py`
+- **Testing**: Create test files as needed
+- **Lint/Type Check**: Follow project conventions if configured
+
+### Git Workflow
+1. Check existing issues before implementation
+2. Reference `./refs/dwpose_modifier` for implementation patterns
+3. Test functionality before marking complete
+4. Only commit when explicitly requested by user
+5. Use meaningful commit messages with emoji at end
+
+### Memory Updates
+- Update this CLAUDE.md file when:
+  - Major features are completed
+  - Important technical decisions are made
+  - Critical bugs are fixed and lessons learned
+  - Development patterns change
+
+## Important Implementation References
+
+### From `./refs/dwpose_modifier/issues/`
+- Canvas initialization patterns
+- Rectangle editing mode implementation
+- Simple vs Detailed mode switching
+- Error handling approaches
+- Coordinate transformation logic
+
+### Critical Lessons from dwpose_modifier
+- **Canvas Event Handling**: Be careful with event chains to avoid infinite loops
+- **State Management**: Use `gr.update()` to prevent unintended event triggers
+- **Debugging**: Add comprehensive logging for complex event flows
+- **Performance**: Minimize unnecessary redraws and event handlers
+
+## Current Implementation Status
+
+### 📋 **Implementation Planning Phase** (COMPLETED)
+- ✅ Created 20 detailed issue files in `issues/` directory
+- ✅ Structured implementation plan in `docs/実装計画.md`
+- ✅ 6-phase development approach with estimated 63 hours total
+- ✅ Dependencies and priorities clearly defined
+
+### 🔧 **Ready for Implementation**
+**Phase 1 (Project Foundation)**: Start with Issue #001
+- Basic Gradio application structure
+- Canvas element initialization
+- JavaScript integration
+
+**Subsequent Phases**: Follow `docs/実装計画.md`
+- DWPose model integration (Phase 2)
+- Drawing and image processing (Phase 3)
+- Basic editing features (Phase 4)
+- Advanced editing features (Phase 5)
+- Export functionality (Phase 6)
+
+### 📝 Notes
+- Focus on simplicity compared to dwpose_modifier
+- Prioritize user-friendly interface
+- Ensure code readability for Hugging Face deployment
+- Add comments for maintainability
+
+## Next Steps
+
+**IMMEDIATE**: Begin implementation following `docs/実装計画.md`
+1. **Start with Issue #001**: プロジェクト基本構造構築
+2. **Follow Phase 1**: Complete Issues #001, #002, #004
+3. **Proceed systematically**: Complete each phase before moving to the next
+
+---
+*Last Updated: 2025-01-11*

docs/仕様書.md

@@ -0,0 +1,118 @@
+# dwpose-editor 仕様書案
+
+## 1. 概要
+
+本ドキュメントは、Gradioベースのアプリケーション「dwpose-editor」の仕様を定義する。
+gradioベースで作られており、dwposeの編集部分はcanvasを用いてマウスで操作ができる。
+
+複雑な機能を持つ`./refs/dwpose_modifier`を参考に簡易版を作る形になる。
+
+このdwpose-editorは、2頭身、3頭身に特化していく。サンプルのデータは2頭身、３頭身を準備する。
+
+最終的にhugging spaceに公開する予定である。コメントなどの可読性なども意識する。
+
+実装するものは`./refs/dwpose_modifier/issues`を元に過去に実装されたものがほとんどである。
+実装する前に該当するissuesを参考にすると効率的に実装できる。
+
+## 2. 共通基盤技術
+
+### 2.1. dwposeによるポーズ推定
+
+- 入力された単一画像から、dwposeを用いて人物のポーズ情報（関節点の座標など）を自動で抽出する。ただし、dwposeが自動取得できない画像が入力される可能性が高いのでエラーハンドリングをしっかりする。
+- **DWPoseモデル**: Hugging Faceから取得する。具体的な実装は `./refs/dwpose_modifier` を参考にする。
+- 抽出されたポーズ情報は、JSON形式（詳細後述）で内部的に扱われる。
+- Openposeと異なり、つま先情報、手情報、顔情報がある。特につま先を忘れがちであるので注意。
+- **エラーハンドリング**: DWPoseでのポーズ推定に失敗した場合、ユーザーに明確にエラーメッセージを表示する。Gradioのトーストで表示を行う。
+
+### 2.2. 手動ポーズ編集機能
+
+- dwposeによる自動認識が不十分だった場合や、ユーザーが意図的にポーズを修正したい場合に利用する。
+- 画面上に表示されたポーズ（関節点）を、ユーザーが直感的に編集できるインターフェースを提供する。
+- **具体的な編集方法・UI**: `./refs/dwpose_modifier`を参考にする。
+- **canvasの初期化**: dwpose_modifierで要素のロード順などで初期化部分に非常に苦労した。その部分に関して、`./refs/dwpose_modifier`を参考にして、デバッグログをあらかじめ入れておくと良い。
+
+
+## 3. 機能・UIの詳細詳細
+### 3.2. のポーズエディット
+
+### 3.2.1. 目的
+
+JSON Lines形式で記述されたポーズシーケンスを読み込み、フレーム単位で視覚的に確認しながら、各フレームのポーズを手動で編集する。
+
+### 3.2.2. 入力
+
+1. **ポーズデータ (JSON)**:
+    - 編集対象となるポーズ情報のシーケンス。JSON形式。
+    - 入力方法:
+        - ユーザーによるJSONLファイルの直接アップロード。
+
+2. **参考画像**:
+    - pngかjpgの画像が入力される。入力されたら、ファイル形式にかかわらずDWPoseを自動で取得する。エラーの場合はGradioのトーストでユーザーに知らせる。また、DWpose計算終了後は、canvasに表示する。
+    - canvasのサイズと異なる場合がある。画像の長い方の辺をcanvasの表示サイズに合わせてリサイズされ表示される。
+    - 入力方法:
+        - ユーザーによる画像ファイルの直接アップロード。
+
+3. **テンプレートポーズ**
+    - ポーズのテンプレートがリストなっており、それを選択するとcanvasのポーズがそのテンプレートになる。
+    - とりあえず、「2頭身ポーズ画像(後で準備される) 2頭身」「3頭身ポーズ画像 3頭身」の２つで。
+    - テンプレートのポーズ情報は後ほど用意される。
+
+### 3.2.3. エディット部
+
+1. **canvasサイズ入力グループ**
+    - canvas解像度サイズ、幅(width)と高さ(height)を入力できる。「Update」ボタンと３つが１行に並んでいる。
+    - updateボタンを押すとcanvasサイズが入力できる
+    - 初期値＝解像度は512x512である
+    - 表示は固定で640x640である。解像度と表示が異なるので注意。詳しくは`./refs/dwpose_modifier/issues`の該当するissueを参照。
+
+2. **表示設定グループ**
+    - dwposeの手描画と顔描画をチェックボックスで選択できる。チェックボックスのオンオフた直ちにcanvasと出力に反映される。顔のチェックボックスだけ外した場合は、手のチェックボックスはオンである。
+    - **簡易モードと詳細モード**がある。２つは１つのグループで、ラジオボタンで選択式である。これは、`./refs/dwpose_modifier`のタブ１にもある機能である。簡単モードは、手の１番高い座標低い座標、１番左にある点、右にある座標からなる矩形で選ばれる。詳しくは`./refs/dwpose_modifier/issues`の���当するissueを参照。
+
+4. **ポーズ描画エリア**:
+    - 現在のフレームのポーズを中央に大きく表示する。
+    - **描画形式**: `./refs/dwpose_modifier` でのポーズ描画方法を参考に、2Dのスティックフィギュアまたはdwposeの標準的な可視化形式で描画する。ポーズのキーポイントをドラッグすることで操作できる。詳しくは`./refs/dwpose_modifier/issues`の該当するissueを参照。
+    - dwpose、手、顔の色も`./refs/dwpose_modifier`を参照せよ。
+    - この描画されたポーズに対して、共通基盤技術の「2.2. 手動ポーズ編集機能」を用いて編集を行う。
+    - 簡易モードのときは顔や手の矩形内をクリックしたら矩形編集モードに入る。矩形編集モードの際はコントロールポイントが表示される。矩形の外をクリックすると矩形編集モードが編集する、詳しくは`./refs/dwpose_modifier/issues`の該当するissueを参照。
+
+### 3.2.4. 出力
+
+- ポーズ描画エリアの右側に配置される。
+1. **ポーズ画像 (png)**:
+    - 編集後のポーズ情報に基づいてレンダリングされた画像。
+    - レンダリング方法は`./refs/dwpose_modifier/issues`を参考にする。
+    - 保存ボタンによりダウンロード可能。
+2. **編集済みポーズデータ (JSON)**:
+    - 編集後のポーズ情報JSON形式。
+    - 保存ボタンによりダウンロード可能。
+
+## 4. 用語・技術スタックについて
+
+- **dwpose**:
+    - 具体的な実装・モデルは `./refs/dwpose_modifier`の「DWPose Detector」ノードを参照。Hugging Faceからモデルを取得する。
+    - **設定パラメータ**: 解像度、検出閾値などの具体的な設定も `./refs/dwpose_modifier` を参考にする。
+- **ポーズ情報のJSON**:
+    - JSON形式。1つのJSONオブジェクトが記述されるテキストファイル。
+    - dwposeが出力するJSONの具体的なキーポイントの名称や構造については、`./refs/dwpose_modifier` が扱うフォーマットを調査し、それに準拠する。
+- **Gradio**:
+    - GradioのBlocks APIを使用して構築する。
+
+## 5. エラーハンドリングとプログレス表示
+
+- **エラーハンドリング**:
+    - dwpose認識失敗時（例：人物が検出できない、サポート外の画像など）。
+    - 不正なファイル形式の入力時（画像、JSON）。
+    - JSONLのパースエラー時。
+    - 上記以外にも、処理中に発生しうるエラーを想定し、ユーザーに分かりやすいメッセージで通知する。
+    - 基本的にはgradioのトーストで表示する。
+
+- **プログレス表示**:
+    - 主に動画のdwpose解析時など、時間のかかる処理ではGradioのプログレスバー機能を利用して進捗状況をユーザーにフィードバックする。
+
+## 6. 参考資料 (./refs/dwpose_modifier/refs 内部に配置想定)
+
+- `sd-webui-openpose-editor`: 手動ポーズ編集UIの参考
+    - URL: `https://github.com/huchenlei/sd-webui-openpose-editor`
+- `ComfyUI-WanVideoWrapper`: DWPoseモデルの利用、プロポーション変換、ポーズレンダリングの参考
+    - URL: `https://github.com/kijai/ComfyUI-WanVideoWrapper`

issues/001_プロジェクト基本構造構築.md

@@ -0,0 +1,67 @@
+# Issue: プロジェクト基本構造構築
+
+## 概要
+dwpose-editorプロジェクトの基本的なディレクトリ構造とエントリーポイントを作成する。
+
+## 背景
+新規プロジェクトとして、dwpose-editorの開発を開始する。`./refs/dwpose_modifier`を参考にしつつ、よりシンプルで理解しやすい構造を目指す。
+
+## 実装内容
+
+### 1. ディレクトリ構造の作成
+```
+dwpose-editor/
+├── app.py              # メインアプリケーション
+├── requirements.txt    # 依存関係
+├── README.md          # プロジェクト説明
+├── utils/             # ユーティリティ関数
+│   ├── __init__.py
+│   ├── pose_utils.py  # ポーズ処理関連
+│   └── image_utils.py # 画像処理関連
+├── static/            # 静的ファイル（JavaScriptなど）
+│   └── pose_editor.js # Canvas操作用JavaScript
+└── templates/         # テンプレートポーズデータ
+    └── poses.json     # 2頭身・3頭身ポーズテンプレート
+```
+
+### 2. app.py の基本構造
+```python
+import gradio as gr
+
+def main():
+    with gr.Blocks(title="DWPose Editor") as demo:
+        gr.Markdown("# DWPose Editor")
+        gr.Markdown("2頭身・3頭身キャラクターのポーズ編集ツール")
+        
+        # TODO: UIコンポーネントを追加
+        
+    return demo
+
+if __name__ == "__main__":
+    demo = main()
+    demo.launch()
+```
+
+### 3. requirements.txt の作成
+```
+gradio>=4.0.0
+numpy
+pillow
+opencv-python
+```
+
+### 4. 基本的なREADME.md
+- プロジェクトの説明
+- インストール方法
+- 使用方法
+- Hugging Face Spacesへのデプロイ手順
+
+## 参考
+- `./refs/dwpose_modifier/issues/001_プロジェクト基本構造構築_complete.md`
+- 特に、プロジェクト構造の考え方とGradio Blocksの基本設定を参考にする
+
+## 完了条件
+- [ ] ディレクトリ構造が作成されている
+- [ ] app.pyが実行でき、基本的なGradio UIが表示される
+- [ ] requirements.txtに必要な依存関係が記載されている
+- [ ] README.mdに基本的な情報が記載されている

issues/002_Gradio基本UIレイアウト.md

@@ -0,0 +1,129 @@
+# Issue: Gradio基本UIレイアウト
+
+## 概要
+仕様書に従って、Gradioを使用した基本的なUIレイアウトを構築する。
+
+## 背景
+Issue #001で作成した基本構造の上に、dwpose-editorの主要なUIコンポーネントを配置する。
+
+## 実装内容
+
+### 1. 全体レイアウト構造
+```python
+with gr.Blocks() as demo:
+    gr.Markdown("# DWPose Editor")
+    
+    with gr.Row():
+        # 左側：入力部
+        with gr.Column(scale=1):
+            # 参考画像アップロード
+            # テンプレートポーズ選択
+            # キャンバス設定
+            # 表示設定
+            
+        # 中央：エディット部
+        with gr.Column(scale=2):
+            # ポーズ描画キャンバス
+            
+        # 右側：出力部
+        with gr.Column(scale=1):
+            # ポーズ画像出力
+            # JSONデータ出力
+```
+
+### 2. 入力部コンポーネント
+```python
+# 参考画像アップロード
+input_image = gr.Image(
+    label="参考画像",
+    type="pil",
+    elem_id="input_image"
+)
+
+# テンプレートポーズ選択
+template_dropdown = gr.Dropdown(
+    label="テンプレートポーズ",
+    choices=["2頭身ポーズ画像 2頭身", "3頭身ポーズ画像 3頭身"],
+    value="2頭身ポーズ画像 2頭身"
+)
+
+# キャンバスサイズ設定（1行に配置）
+with gr.Row():
+    canvas_width = gr.Number(
+        label="幅",
+        value=512,
+        minimum=64,
+        maximum=2048,
+        step=64
+    )
+    canvas_height = gr.Number(
+        label="高さ",
+        value=512,
+        minimum=64,
+        maximum=2048,
+        step=64
+    )
+    update_canvas_btn = gr.Button("Update", variant="primary")
+
+# 表示設定グループ
+with gr.Group():
+    gr.Markdown("### 表示設定")
+    draw_hand = gr.Checkbox(label="手を描画", value=True)
+    draw_face = gr.Checkbox(label="顔を描画", value=True)
+    
+    edit_mode = gr.Radio(
+        label="編集モード",
+        choices=["簡易モード", "詳細モード"],
+        value="簡易モード"
+    )
+```
+
+### 3. エディット部（Canvas）
+```python
+# ポーズ描画キャンバス
+pose_canvas = gr.HTML(
+    elem_id="pose_canvas_container",
+    value='<canvas id="pose_canvas" width="640" height="640" style="border: 1px solid #ccc;"></canvas>'
+)
+
+# 非表示のデータ保持用コンポーネント
+pose_data = gr.JSON(visible=False, value={})
+```
+
+### 4. 出力部コンポーネント
+```python
+# ポーズ画像出力
+output_image = gr.Image(
+    label="ポーズ画像",
+    type="pil",
+    elem_id="output_image"
+)
+
+# ポーズ画像ダウンロードボタン
+download_image_btn = gr.Button("画像をダウンロード", variant="secondary")
+
+# JSONデータ表示
+output_json = gr.JSON(
+    label="ポーズデータ (JSON)",
+    elem_id="output_json"
+)
+
+# JSONダウンロードボタン
+download_json_btn = gr.Button("JSONをダウンロード", variant="secondary")
+```
+
+### 5. スタイリング考慮事項
+- キャンバスは固定表示サイズ640x640
+- レスポンシブ対応は必須ではない（仕様書に記載なし）
+- Hugging Face Spacesでの表示を考慮
+
+## 参考
+- `./refs/dwpose_modifier`のUIレイアウト
+- 特にタブ1とタブ2のマージされた形を意識
+
+## 完了条件
+- [ ] 3カラムレイアウトが正しく表示される
+- [ ] すべての入力コンポーネントが配置されている
+- [ ] Canvasエリアが正しく表示される（640x640）
+- [ ] 出力部のコンポーネントが配置されている
+- [ ] elem_idが適切に設定されている（JavaScript連携用）

issues/003_DWPoseモデル統合.md

@@ -0,0 +1,141 @@
+# Issue: DWPoseモデル統合
+
+## 概要
+Hugging FaceからDWPoseモデルを取得し、画像からポーズを検出する機能を実装する。
+
+## 背景
+DWPoseは、OpenPoseと異なり、つま先、手、顔の詳細情報を含む高精度なポーズ推定モデル。`./refs/dwpose_modifier`の実装を参考にしつつ、シンプルな構造で統合する。
+
+## 実装内容
+
+### 1. 必要な依存関係の追加
+requirements.txtに以下を追加：
+```
+huggingface-hub
+onnxruntime
+torch  # CUDA検出用
+```
+
+### 2. DWPoseマネージャーの作成
+`utils/dwpose_manager.py`:
+```python
+import os
+from huggingface_hub import hf_hub_download
+import onnxruntime as ort
+
+class DWPoseManager:
+    def __init__(self):
+        self.model_repo = "yzd-v/DWPose"
+        self.cache_dir = "./models"
+        self.yolox_session = None
+        self.dwpose_session = None
+        
+    def initialize(self):
+        """モデルのダウンロードと初期化"""
+        try:
+            # YOLOXモデル
+            yolox_path = hf_hub_download(
+                repo_id=self.model_repo,
+                filename="yolox_l.onnx",
+                cache_dir=self.cache_dir
+            )
+            
+            # DWPoseモデル
+            dwpose_path = hf_hub_download(
+                repo_id=self.model_repo,
+                filename="dw-ll_ucoco_384.onnx",
+                cache_dir=self.cache_dir
+            )
+            
+            # ONNXセッション作成
+            providers = ['CUDAExecutionProvider', 'CPUExecutionProvider']
+            self.yolox_session = ort.InferenceSession(yolox_path, providers=providers)
+            self.dwpose_session = ort.InferenceSession(dwpose_path, providers=providers)
+            
+            return True
+        except Exception as e:
+            return False, str(e)
+```
+
+### 3. DWPose検出器の実装
+`utils/dwpose_detector.py`:
+```python
+import numpy as np
+import cv2
+
+class DWPoseDetector:
+    def __init__(self, manager):
+        self.manager = manager
+        self.input_size = 640  # YOLOX入力サイズ
+        self.pose_input_size = 384  # DWPose入力サイズ
+        
+    def detect(self, image):
+        """画像からポーズを検出"""
+        try:
+            # 1. 人物検出（YOLOX）
+            persons = self._detect_persons(image)
+            if len(persons) == 0:
+                return None, "人物が検出されませんでした"
+                
+            # 2. ポーズ推定（DWPose）
+            poses = []
+            for person_box in persons:
+                pose = self._detect_pose(image, person_box)
+                if pose is not None:
+                    poses.append(pose)
+                    
+            # 3. 最も大きい人物のポーズを返す
+            if len(poses) > 0:
+                return poses[0], None
+            else:
+                return None, "ポーズを検出できませんでした"
+                
+        except Exception as e:
+            return None, f"エラーが発生しました: {str(e)}"
+```
+
+### 4. ポーズデータ形式
+DWPoseの出力形式（フラット配列）:
+```python
+# 各キーポイント: [x, y, confidence] × キーポイント数
+# - body: 17キーポイント
+# - foot: 6キーポイント（つま先含む）
+# - face: 68キーポイント
+# - hand: 左右各21キーポイント
+pose_data = {
+    "bodies": {
+        "candidate": [[x1, y1], [x2, y2], ...],  # 全キーポイントの座標
+        "subset": [[indices..., score, count]]   # 人物ごとのキーポイントインデックス
+    },
+    "faces": [...],  # 顔のキーポイント
+    "hands": [...],  # 手のキーポイント
+    "resolution": [width, height]
+}
+```
+
+### 5. エラーハンドリング
+```python
+def safe_detect(detector, image):
+    """安全なポーズ検出（Gradio用）"""
+    try:
+        pose_data, error = detector.detect(image)
+        if error:
+            gr.Info(error)  # Gradioトースト通知
+            return None
+        return pose_data
+    except Exception as e:
+        gr.Info(f"予期しないエラー: {str(e)}")
+        return None
+```
+
+## 参考
+- `./refs/dwpose_modifier/core/dwpose/`の実装
+- 特に`manager.py`、`detection/detector.py`を重点的に参考
+- OpenPose形式への変換ロジック
+
+## 完了条件
+- [ ] Hugging Faceからモデルが自動ダウンロードされる
+- [ ] 画像を入力してポーズが検出できる
+- [ ] エラー時にGradioトーストで通知される
+- [ ] つま先、手、顔の情報が含まれている
+- [ ] dwpose_modifierと同じデータ形式で出力される

issues/004_Canvas要素初期化.md

@@ -0,0 +1,177 @@
+# Issue: Canvas要素初期化
+
+## 概要
+GradioとCanvasの連携を確立し、JavaScriptによるCanvas操作の基盤を構築する。dwpose_modifierで苦労した初期化問題を回避する。
+
+## 背景
+Canvas初期化はdwpose_modifierで最も苦労した部分。Gradio要素の遅延生成に対応した堅牢な初期化処理が必要。
+
+## 実装内容
+
+### 1. JavaScript埋め込み構造
+`static/pose_editor.js`:
+```javascript
+// グローバル変数
+let canvas = null;
+let ctx = null;
+let poseData = null;
+let isInitialized = false;
+
+// デバッグログ関数
+function debugLog(message) {
+    console.log(`[DWPose Editor] ${new Date().toISOString()} - ${message}`);
+}
+
+// Canvas初期化関数（複数の初期化タイミングに対応）
+function initializeCanvas() {
+    debugLog("initializeCanvas called");
+    
+    if (isInitialized) {
+        debugLog("Already initialized, skipping");
+        return;
+    }
+    
+    canvas = document.getElementById('pose_canvas');
+    if (!canvas) {
+        debugLog("Canvas not found, retrying...");
+        setTimeout(initializeCanvas, 100);
+        return;
+    }
+    
+    ctx = canvas.getContext('2d');
+    if (!ctx) {
+        debugLog("Failed to get 2d context");
+        return;
+    }
+    
+    // Canvas設定
+    canvas.width = 640;
+    canvas.height = 640;
+    
+    // 初期描画
+    clearCanvas();
+    
+    isInitialized = true;
+    debugLog("Canvas initialized successfully");
+}
+
+// 複数の初期化トリガー
+document.addEventListener('DOMContentLoaded', initializeCanvas);
+window.addEventListener('load', initializeCanvas);
+
+// Gradio固有の初期化（MutationObserver使用）
+const observer = new MutationObserver((mutations) => {
+    if (document.getElementById('pose_canvas') && !isInitialized) {
+        initializeCanvas();
+    }
+});
+
+// body要素の監視開始
+document.addEventListener('DOMContentLoaded', () => {
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true
+    });
+});
+```
+
+### 2. Gradioとの連携
+`app.py`での埋め込み:
+```python
+def load_javascript():
+    """JavaScriptファイルを読み込む"""
+    js_path = os.path.join(os.path.dirname(__file__), "static", "pose_editor.js")
+    with open(js_path, "r", encoding="utf-8") as f:
+        return f"<script>{f.read()}</script>"
+
+# Gradio Blocksでの使用
+with gr.Blocks(head=load_javascript()) as demo:
+    # UI定義
+    pose_canvas = gr.HTML(
+        elem_id="pose_canvas_container",
+        value='<canvas id="pose_canvas" width="640" height="640" style="border: 1px solid #ccc; cursor: crosshair;"></canvas>'
+    )
+```
+
+### 3. Canvas基本操作関数
+```javascript
+// Canvas クリア
+function clearCanvas() {
+    if (!ctx) return;
+    ctx.fillStyle = '#f0f0f0';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+}
+
+// エラー表示
+function showCanvasError(message) {
+    if (!ctx) return;
+    clearCanvas();
+    ctx.fillStyle = '#ff0000';
+    ctx.font = '16px Arial';
+    ctx.textAlign = 'center';
+    ctx.fillText(message, canvas.width / 2, canvas.height / 2);
+}
+
+// Canvas状態チェック
+function isCanvasReady() {
+    return canvas && ctx && isInitialized;
+}
+```
+
+### 4. Gradioイベントとの連携準備
+```javascript
+// Gradioからのデータ受信用
+window.updatePoseData = function(data) {
+    debugLog("updatePoseData called");
+    if (!isCanvasReady()) {
+        debugLog("Canvas not ready");
+        return;
+    }
+    
+    poseData = data;
+    // TODO: 描画処理を呼び出す
+};
+
+// Gradioへのデータ送信用
+window.getPoseData = function() {
+    return poseData;
+};
+```
+
+### 5. エラーハンドリング
+```javascript
+// グローバルエラーハンドラー
+window.addEventListener('error', (e) => {
+    debugLog(`Global error: ${e.message}`);
+    if (isCanvasReady()) {
+        showCanvasError('エラーが発生しました');
+    }
+});
+
+// Canvas操作のtry-catch
+function safeCanvasOperation(operation) {
+    try {
+        if (!isCanvasReady()) {
+            debugLog("Canvas not ready for operation");
+            return false;
+        }
+        operation();
+        return true;
+    } catch (e) {
+        debugLog(`Canvas operation error: ${e.message}`);
+        return false;
+    }
+}
+```
+
+## 参考
+- `./refs/dwpose_modifier/issues/019_test_gradio_simple実験継続_complete.md`
+- `./refs/dwpose_modifier/issues/023_キャンバス描画重複問題修正_complete.md`
+- 特に初期化タイミングとMutationObserverの使用法
+
+## 完了条件
+- [ ] ページロード時にCanvasが正しく初期化される
+- [ ] Gradio要素の遅延生成に対応している
+- [ ] デバッグログが適切に出力される
+- [ ] エラー時に適切なメッセージが表示される
+- [ ] Canvas操作の基本関数が実装されている

issues/005_ポーズ基本描画機能.md

@@ -0,0 +1,208 @@
+# Issue: ポーズ基本描画機能
+
+## 概要
+DWPoseデータをCanvas上に描画する基本機能を実装する。dwpose_modifierの描画ロジックを参考に、スティックフィギュア形式で表示。
+
+## 背景
+Issue #004で初期化したCanvas上に、DWPoseのキーポイントと接続線を描画する。色分けもdwpose_modifierに準拠。
+
+## 実装内容
+
+### 1. DWPose接続定義
+`static/pose_editor.js`に追加:
+```javascript
+// DWPoseの接続定義（dwpose_modifierと同じ）
+const BODY_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]                  // 首・頭
+];
+
+// 色定義（dwpose_modifierから）
+const POSE_COLORS = {
+    body: '#ff0055',
+    hand: '#ff9500',
+    face: '#00ff00',
+    bodyLine: '#ff0055',
+    handLine: '#ff9500',
+    faceLine: '#00ff00'
+};
+
+// キーポイント半径
+const KEYPOINT_RADIUS = 4;
+```
+
+### 2. 基本描画関数
+```javascript
+// ポーズ全体の描画
+function drawPose(poseData, drawHands = true, drawFace = true) {
+    if (!isCanvasReady() || !poseData) return;
+    
+    clearCanvas();
+    
+    // 背景画像があれば描画（後で実装）
+    
+    // ボディの描画
+    drawBody(poseData);
+    
+    // 手の描画
+    if (drawHands && poseData.hands) {
+        drawHands(poseData.hands);
+    }
+    
+    // 顔の描画
+    if (drawFace && poseData.faces) {
+        drawFace(poseData.faces);
+    }
+}
+
+// ボディ描画
+function drawBody(poseData) {
+    if (!poseData.bodies || !poseData.bodies.candidate) return;
+    
+    const candidates = poseData.bodies.candidate;
+    const subset = poseData.bodies.subset;
+    
+    if (subset.length === 0) return;
+    
+    // 最初の人物のみ描画（単一人物想定）
+    const person = subset[0];
+    
+    // 接続線の描画
+    ctx.strokeStyle = POSE_COLORS.bodyLine;
+    ctx.lineWidth = 3;
+    
+    for (const [start, end] of BODY_CONNECTIONS) {
+        const startIdx = person[start];
+        const endIdx = person[end];
+        
+        if (startIdx >= 0 && endIdx >= 0) {
+            const startPoint = candidates[startIdx];
+            const endPoint = candidates[endIdx];
+            
+            if (startPoint && endPoint) {
+                ctx.beginPath();
+                ctx.moveTo(startPoint[0], startPoint[1]);
+                ctx.lineTo(endPoint[0], endPoint[1]);
+                ctx.stroke();
+            }
+        }
+    }
+    
+    // キーポイントの描画
+    ctx.fillStyle = POSE_COLORS.body;
+    for (let i = 0; i < 17; i++) {  // DWPoseボディは17キーポイント
+        const idx = person[i];
+        if (idx >= 0) {
+            const point = candidates[idx];
+            if (point) {
+                drawKeypoint(point[0], point[1]);
+            }
+        }
+    }
+}
+
+// キーポイント描画
+function drawKeypoint(x, y, radius = KEYPOINT_RADIUS) {
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, Math.PI * 2);
+    ctx.fill();
+}
+```
+
+### 3. 手と顔の描画（簡易版）
+```javascript
+// 手の描画（21キーポイント × 2）
+function drawHands(handsData) {
+    if (!handsData || handsData.length === 0) return;
+    
+    ctx.fillStyle = POSE_COLORS.hand;
+    ctx.strokeStyle = POSE_COLORS.handLine;
+    ctx.lineWidth = 2;
+    
+    // 左右の手を描画
+    handsData.forEach((hand) => {
+        if (hand && hand.length > 0) {
+            // TODO: 手の接続線定義を追加
+            // とりあえずキーポイントのみ描画
+            for (let i = 0; i < hand.length; i += 3) {
+                const x = hand[i];
+                const y = hand[i + 1];
+                const conf = hand[i + 2];
+                
+                if (conf > 0.3) {  // 信頼度閾値
+                    drawKeypoint(x, y, 3);
+                }
+            }
+        }
+    });
+}
+
+// 顔の描画（68キーポイント）
+function drawFace(facesData) {
+    if (!facesData || facesData.length === 0) return;
+    
+    ctx.fillStyle = POSE_COLORS.face;
+    
+    const face = facesData[0];  // 最初の顔のみ
+    if (face && face.length > 0) {
+        for (let i = 0; i < face.length; i += 3) {
+            const x = face[i];
+            const y = face[i + 1];
+            const conf = face[i + 2];
+            
+            if (conf > 0.3) {
+                drawKeypoint(x, y, 2);
+            }
+        }
+    }
+}
+```
+
+### 4. 座標変換対応
+```javascript
+// データ解像度とCanvas表示サイズの変換
+function transformCoordinate(x, y, dataWidth, dataHeight) {
+    const scaleX = canvas.width / dataWidth;
+    const scaleY = canvas.height / dataHeight;
+    
+    return {
+        x: x * scaleX,
+        y: y * scaleY
+    };
+}
+
+// 描画時に座標変換を適用
+function drawKeypointScaled(x, y, dataRes, radius = KEYPOINT_RADIUS) {
+    const scaled = transformCoordinate(x, y, dataRes[0], dataRes[1]);
+    drawKeypoint(scaled.x, scaled.y, radius);
+}
+```
+
+### 5. Gradioからの呼び出し
+```javascript
+// Gradioからポーズデータを受け取って描画
+window.updatePoseData = function(data, drawHands, drawFace) {
+    debugLog("updatePoseData called");
+    if (!isCanvasReady()) {
+        debugLog("Canvas not ready");
+        return;
+    }
+    
+    poseData = data;
+    drawPose(poseData, drawHands, drawFace);
+};
+```
+
+## 参考
+- `./refs/dwpose_modifier`の描画ロジック
+- 特に色定義、接続定義、座標変換処理
+
+## 完了条件
+- [ ] DWPoseのボディが正しく描画される
+- [ ] 手と顔のキーポイントが描画される
+- [ ] 色分けがdwpose_modifierと同じ
+- [ ] 座標変換が正しく機能する
+- [ ] チェックボックスに応じて手顔の表示/非表示が切り替わる

issues/006_画像アップロード処理.md

@@ -0,0 +1,219 @@
+# Issue: 画像アップロード処理
+
+## 概要
+参考画像のアップロード機能を実装。画像はCanvasの背景として表示し、長辺を表示サイズに合わせてリサイズする。
+
+## 背景
+ユーザーがアップロードした画像を背景として表示し、その上にポーズを編集できるようにする。
+
+## 実装内容
+
+### 1. 画像処理ユーティリティ
+`utils/image_utils.py`:
+```python
+from PIL import Image
+import numpy as np
+
+def resize_image_aspect_ratio(image, target_size=640):
+    """
+    画像の長辺をtarget_sizeに合わせてアスペクト比を保持したままリサイズ
+    """
+    width, height = image.size
+    
+    # 長辺を特定
+    if width > height:
+        # 横長
+        new_width = target_size
+        new_height = int(height * (target_size / width))
+    else:
+        # 縦長または正方形
+        new_height = target_size
+        new_width = int(width * (target_size / height))
+    
+    # リサイズ
+    resized = image.resize((new_width, new_height), Image.Resampling.LANCZOS)
+    
+    # Canvasサイズに合わせて中央配置用の情報を返す
+    offset_x = (target_size - new_width) // 2
+    offset_y = (target_size - new_height) // 2
+    
+    return resized, offset_x, offset_y
+
+def image_to_base64(image):
+    """PIL ImageをBase64エンコード"""
+    import io
+    import base64
+    
+    buffer = io.BytesIO()
+    image.save(buffer, format="PNG")
+    img_str = base64.b64encode(buffer.getvalue()).decode()
+    return f"data:image/png;base64,{img_str}"
+```
+
+### 2. Gradio画像アップロードハンドラ
+`app.py`に追加:
+```python
+def handle_image_upload(image):
+    """
+    画像アップロード時の処理
+    """
+    if image is None:
+        return None, None, gr.update()
+    
+    try:
+        # 画像をリサイズ
+        resized_img, offset_x, offset_y = resize_image_aspect_ratio(image)
+        
+        # Base64エンコード（JavaScript用）
+        img_base64 = image_to_base64(resized_img)
+        
+        # 画像情報を保存
+        image_info = {
+            "base64": img_base64,
+            "width": resized_img.width,
+            "height": resized_img.height,
+            "offset_x": offset_x,
+            "offset_y": offset_y,
+            "original_size": image.size
+        }
+        
+        # JavaScriptに画像を送信
+        update_js = f"""
+        <script>
+            setTimeout(() => {{
+                if (window.updateBackgroundImage) {{
+                    window.updateBackgroundImage({json.dumps(image_info)});
+                }}
+            }}, 100);
+        </script>
+        """
+        
+        return image_info, update_js, gr.Info("画像をアップロードしました")
+        
+    except Exception as e:
+        return None, None, gr.Error(f"画像処理エラー: {str(e)}")
+
+# UIコンポーネントとの接続
+input_image.upload(
+    handle_image_upload,
+    inputs=[input_image],
+    outputs=[image_data, js_executor, None]
+)
+```
+
+### 3. JavaScript側の背景画像表示
+`static/pose_editor.js`に追加:
+```javascript
+// 背景画像管理
+let backgroundImage = null;
+let backgroundImageInfo = null;
+
+// 背景画像の更新
+window.updateBackgroundImage = function(imageInfo) {
+    debugLog("updateBackgroundImage called");
+    
+    if (!imageInfo || !imageInfo.base64) {
+        backgroundImage = null;
+        backgroundImageInfo = null;
+        redrawCanvas();
+        return;
+    }
+    
+    // 新しい画像オブジェクトを作成
+    const img = new Image();
+    img.onload = function() {
+        backgroundImage = img;
+        backgroundImageInfo = imageInfo;
+        debugLog(`Background image loaded: ${imageInfo.width}x${imageInfo.height}`);
+        redrawCanvas();
+    };
+    
+    img.onerror = function() {
+        debugLog("Failed to load background image");
+        backgroundImage = null;
+        backgroundImageInfo = null;
+    };
+    
+    img.src = imageInfo.base64;
+};
+
+// 背景画像の描画
+function drawBackgroundImage() {
+    if (!backgroundImage || !backgroundImageInfo) return;
+    
+    ctx.save();
+    
+    // 画像を中央に配置
+    ctx.drawImage(
+        backgroundImage,
+        backgroundImageInfo.offset_x,
+        backgroundImageInfo.offset_y,
+        backgroundImageInfo.width,
+        backgroundImageInfo.height
+    );
+    
+    ctx.restore();
+}
+
+// Canvas再描画（背景込み）
+function redrawCanvas() {
+    if (!isCanvasReady()) return;
+    
+    clearCanvas();
+    drawBackgroundImage();
+    
+    // ポーズがあれば描画
+    if (poseData) {
+        drawPose(poseData, currentDrawHands, currentDrawFace);
+    }
+}
+```
+
+### 4. 画像座標とポーズ座標の整合性
+```javascript
+// 画像上の座標をCanvas座標に変換
+function imageToCanvasCoord(x, y) {
+    if (!backgroundImageInfo) return {x, y};
+    
+    // 画像のオフセットを考慮
+    return {
+        x: x + backgroundImageInfo.offset_x,
+        y: y + backgroundImageInfo.offset_y
+    };
+}
+
+// Canvas座標を画像座標に変換
+function canvasToImageCoord(x, y) {
+    if (!backgroundImageInfo) return {x, y};
+    
+    return {
+        x: x - backgroundImageInfo.offset_x,
+        y: y - backgroundImageInfo.offset_y
+    };
+}
+```
+
+### 5. 画像なしでのDWPose失敗時の処理
+```javascript
+// DWPose検出失敗時も画像は表示
+window.handleDWPoseError = function(imageInfo) {
+    debugLog("DWPose detection failed, showing image only");
+    
+    // 画像だけ表示
+    updateBackgroundImage(imageInfo);
+    
+    // ポーズデータをクリア
+    poseData = null;
+};
+```
+
+## 参考
+- 画像リサイズとアスペクト比保持のロジック
+- Base64エンコーディングによるJavaScript連携
+
+## 完了条件
+- [ ] 画像アップロード時に長辺が640pxにリサイズされる
+- [ ] アスペクト比が保持される
+- [ ] 画像がCanvasの中央に表示される
+- [ ] DWPose失敗時も画像が表示される
+- [ ] 画像座標とCanvas座標の変換が正しく機能する

issues/007_DWPose自動抽出機能.md

@@ -0,0 +1,209 @@
+# Issue: DWPose自動抽出機能
+
+## 概要
+画像アップロード時に自動的にDWPoseでポーズを抽出し、Canvas上に表示する機能を実装。
+
+## 背景
+Issue #003で統合したDWPoseモデルと、Issue #006の画像アップロード処理を連携させる。
+
+## 実装内容
+
+### 1. DWPose抽出処理の実装
+`app.py`に追加:
+```python
+# グローバル変数としてDWPoseマネージャーを保持
+dwpose_manager = None
+dwpose_detector = None
+
+def initialize_dwpose():
+    """DWPoseの初期化"""
+    global dwpose_manager, dwpose_detector
+    
+    try:
+        dwpose_manager = DWPoseManager()
+        success = dwpose_manager.initialize()
+        
+        if success:
+            dwpose_detector = DWPoseDetector(dwpose_manager)
+            return True, "DWPoseモデルを初期化しました"
+        else:
+            return False, "DWPoseモデルの初期化に失敗しました"
+    except Exception as e:
+        return False, f"初期化エラー: {str(e)}"
+
+def extract_pose_from_image(image, image_info):
+    """
+    画像からポーズを抽出
+    """
+    if image is None or dwpose_detector is None:
+        return None, "画像またはDWPoseが利用できません"
+    
+    try:
+        # numpy配列に変換
+        image_np = np.array(image)
+        
+        # DWPoseでポーズ検出
+        pose_data, error = dwpose_detector.detect(image_np)
+        
+        if error:
+            return None, error
+        
+        if pose_data is None:
+            return None, "ポーズが検出されませんでした"
+        
+        # 解像度情報を追加
+        pose_data["resolution"] = [image.width, image.height]
+        
+        return pose_data, None
+        
+    except Exception as e:
+        return None, f"ポーズ抽出エラー: {str(e)}"
+```
+
+### 2. 画像アップロードとDWPose連携
+```python
+def handle_image_upload_with_dwpose(image):
+    """
+    画像アップロード時の処理（DWPose自動実行）
+    """
+    if image is None:
+        return None, None, None, gr.update()
+    
+    try:
+        # 画像をリサイズ
+        resized_img, offset_x, offset_y = resize_image_aspect_ratio(image)
+        
+        # Base64エンコード
+        img_base64 = image_to_base64(resized_img)
+        
+        image_info = {
+            "base64": img_base64,
+            "width": resized_img.width,
+            "height": resized_img.height,
+            "offset_x": offset_x,
+            "offset_y": offset_y,
+            "original_size": image.size
+        }
+        
+        # DWPoseでポーズ抽出
+        gr.Info("ポーズを検出中...")
+        pose_data, error = extract_pose_from_image(image, image_info)
+        
+        if error:
+            # エラーでも画像は表示
+            update_js = f"""
+            <script>
+                setTimeout(() => {{
+                    if (window.handleDWPoseError) {{
+                        window.handleDWPoseError({json.dumps(image_info)});
+                    }}
+                }}, 100);
+            </script>
+            """
+            gr.Warning(error)
+            return image_info, None, update_js, gr.update()
+        
+        # 成功時：画像とポーズ両方を更新
+        update_js = f"""
+        <script>
+            setTimeout(() => {{
+                if (window.updateBackgroundImage) {{
+                    window.updateBackgroundImage({json.dumps(image_info)});
+                }}
+                if (window.updatePoseData) {{
+                    window.updatePoseData({json.dumps(pose_data)}, true, true);
+                }}
+            }}, 100);
+        </script>
+        """
+        
+        gr.Info("ポーズを検出しました")
+        return image_info, pose_data, update_js, gr.update(value=pose_data)
+        
+    except Exception as e:
+        return None, None, None, gr.Error(f"処理エラー: {str(e)}")
+```
+
+### 3. ポーズ座標の正規化チェック
+`utils/pose_utils.py`:
+```python
+def normalize_pose_coordinates(pose_data, image_width, image_height):
+    """
+    ポーズ座標が正規化されているかチェックし、必要なら変換
+    """
+    if not pose_data or "bodies" not in pose_data:
+        return pose_data
+    
+    candidates = pose_data["bodies"].get("candidate", [])
+    if not candidates:
+        return pose_data
+    
+    # 最初のキーポイントで判定
+    first_point = candidates[0]
+    if len(first_point) >= 2:
+        x, y = first_point[0], first_point[1]
+        
+        # 0-1の範囲なら正規化されている
+        if 0 <= x <= 1 and 0 <= y <= 1:
+            # ピクセル座標に変換
+            for i, point in enumerate(candidates):
+                if len(point) >= 2:
+                    candidates[i][0] = point[0] * image_width
+                    candidates[i][1] = point[1] * image_height
+    
+    return pose_data
+```
+
+### 4. エラーリカバリー機能
+```python
+def retry_dwpose_detection(image):
+    """
+    DWPose検出のリトライ（パラメータ調整）
+    """
+    # 検出閾値を下げてリトライ
+    original_threshold = dwpose_detector.detection_threshold
+    dwpose_detector.detection_threshold = 0.3  # より低い閾値
+    
+    try:
+        pose_data, error = extract_pose_from_image(image, None)
+        return pose_data, error
+    finally:
+        # 閾値を元に戻す
+        dwpose_detector.detection_threshold = original_threshold
+```
+
+### 5. デバッグ情報の出力
+```python
+def debug_pose_data(pose_data):
+    """ポーズデータのデバッグ情報を出力"""
+    if not pose_data:
+        print("No pose data")
+        return
+    
+    if "bodies" in pose_data:
+        bodies = pose_data["bodies"]
+        print(f"Candidates: {len(bodies.get('candidate', []))}")
+        print(f"Subsets: {len(bodies.get('subset', []))}")
+        
+        if bodies.get('subset'):
+            person = bodies['subset'][0]
+            detected_keypoints = sum(1 for idx in person[:17] if idx >= 0)
+            print(f"Detected keypoints: {detected_keypoints}/17")
+    
+    if "faces" in pose_data:
+        print(f"Face keypoints: {len(pose_data['faces'][0]) // 3 if pose_data['faces'] else 0}")
+    
+    if "hands" in pose_data:
+        print(f"Hands detected: {len(pose_data['hands'])}")
+```
+
+## 参考
+- `./refs/dwpose_modifier`のDWPose検出フロー
+- エラーハンドリングとリトライロジック
+
+## 完了条件
+- [ ] 画像アップロード時に自動でDWPoseが実行される
+- [ ] ポーズが検出されたらCanvas上に表示される
+- [ ] エラー時はGradioトーストで通知される
+- [ ] エラー時も画像は表示される
+- [ ] 座標の正規化チェックが機能する

issues/008_座標変換システム.md

@@ -0,0 +1,285 @@
+# Issue: 座標変換システム
+
+## 概要
+データ解像度とCanvas表示サイズの違いを吸収する座標変換システムを実装。dwpose_modifierで苦労した座標系の問題を解決。
+
+## 背景
+- データ解像度：512x512（可変）
+- Canvas表示サイズ：640x640（固定）
+- 画像サイズ：任意（アスペクト比保持）
+
+これらの座標系を統一的に扱うシステムが必要。
+
+## 実装内容
+
+### 1. 座標変換クラス
+`utils/coordinate_system.py`:
+```python
+class CoordinateTransformer:
+    def __init__(self):
+        self.data_width = 512
+        self.data_height = 512
+        self.canvas_width = 640
+        self.canvas_height = 640
+        self.image_width = None
+        self.image_height = None
+        self.image_offset_x = 0
+        self.image_offset_y = 0
+        
+    def set_data_resolution(self, width, height):
+        """データ解像度の設定"""
+        self.data_width = width
+        self.data_height = height
+        
+    def set_image_info(self, width, height, offset_x, offset_y):
+        """画像情報の設定"""
+        self.image_width = width
+        self.image_height = height
+        self.image_offset_x = offset_x
+        self.image_offset_y = offset_y
+        
+    def data_to_canvas(self, x, y):
+        """データ座標をCanvas座標に変換"""
+        scale_x = self.canvas_width / self.data_width
+        scale_y = self.canvas_height / self.data_height
+        
+        return {
+            'x': x * scale_x,
+            'y': y * scale_y
+        }
+        
+    def canvas_to_data(self, x, y):
+        """Canvas座標をデータ座標に変換"""
+        scale_x = self.data_width / self.canvas_width
+        scale_y = self.data_height / self.canvas_height
+        
+        return {
+            'x': x * scale_x,
+            'y': y * scale_y
+        }
+        
+    def image_to_canvas(self, x, y):
+        """画像座標をCanvas座標に変換"""
+        return {
+            'x': x + self.image_offset_x,
+            'y': y + self.image_offset_y
+        }
+        
+    def canvas_to_image(self, x, y):
+        """Canvas座標を画像座標に変換"""
+        return {
+            'x': x - self.image_offset_x,
+            'y': y - self.image_offset_y
+        }
+```
+
+### 2. JavaScript座標変換
+`static/pose_editor.js`に追加:
+```javascript
+// 座標変換管理
+class CoordinateManager {
+    constructor() {
+        this.dataWidth = 512;
+        this.dataHeight = 512;
+        this.canvasWidth = 640;
+        this.canvasHeight = 640;
+        this.imageInfo = null;
+    }
+    
+    setDataResolution(width, height) {
+        this.dataWidth = width;
+        this.dataHeight = height;
+        debugLog(`Data resolution set to ${width}x${height}`);
+    }
+    
+    setImageInfo(imageInfo) {
+        this.imageInfo = imageInfo;
+        debugLog(`Image info set: ${imageInfo.width}x${imageInfo.height} offset(${imageInfo.offset_x}, ${imageInfo.offset_y})`);
+    }
+    
+    // データ座標 → Canvas座標
+    dataToCanvas(x, y) {
+        const scaleX = this.canvasWidth / this.dataWidth;
+        const scaleY = this.canvasHeight / this.dataHeight;
+        
+        return {
+            x: x * scaleX,
+            y: y * scaleY
+        };
+    }
+    
+    // Canvas座標 → データ座標
+    canvasToData(x, y) {
+        const scaleX = this.dataWidth / this.canvasWidth;
+        const scaleY = this.dataHeight / this.canvasHeight;
+        
+        return {
+            x: x * scaleX,
+            y: y * scaleY
+        };
+    }
+    
+    // 画像座標 → Canvas座標
+    imageToCanvas(x, y) {
+        if (!this.imageInfo) return {x, y};
+        
+        return {
+            x: x + this.imageInfo.offset_x,
+            y: y + this.imageInfo.offset_y
+        };
+    }
+    
+    // Canvas座標 → 画像座標
+    canvasToImage(x, y) {
+        if (!this.imageInfo) return {x, y};
+        
+        return {
+            x: x - this.imageInfo.offset_x,
+            y: y - this.imageInfo.offset_y
+        };
+    }
+    
+    // 正規化座標検出と変換
+    normalizeIfNeeded(pose_data) {
+        if (!pose_data || !pose_data.bodies) return pose_data;
+        
+        const candidates = pose_data.bodies.candidate;
+        if (!candidates || candidates.length === 0) return pose_data;
+        
+        // 最初のキーポイントで正規化チェック
+        const firstPoint = candidates[0];
+        if (firstPoint && firstPoint.length >= 2) {
+            const x = firstPoint[0];
+            const y = firstPoint[1];
+            
+            // 0-1の範囲なら正規化されている
+            if (x >= 0 && x <= 1 && y >= 0 && y <= 1) {
+                debugLog("Normalizing coordinates to pixel values");
+                
+                // ピクセル座標に変換
+                for (let i = 0; i < candidates.length; i++) {
+                    if (candidates[i] && candidates[i].length >= 2) {
+                        candidates[i][0] *= this.dataWidth;
+                        candidates[i][1] *= this.dataHeight;
+                    }
+                }
+                
+                // 手と顔も同様に処理
+                if (pose_data.hands) {
+                    pose_data.hands.forEach(hand => {
+                        if (hand) {
+                            for (let i = 0; i < hand.length; i += 3) {
+                                hand[i] *= this.dataWidth;     // x
+                                hand[i + 1] *= this.dataHeight; // y
+                            }
+                        }
+                    });
+                }
+                
+                if (pose_data.faces) {
+                    pose_data.faces.forEach(face => {
+                        if (face) {
+                            for (let i = 0; i < face.length; i += 3) {
+                                face[i] *= this.dataWidth;     // x
+                                face[i + 1] *= this.dataHeight; // y
+                            }
+                        }
+                    });
+                }
+            }
+        }
+        
+        return pose_data;
+    }
+}
+
+// グローバル座標マネージャー
+const coordManager = new CoordinateManager();
+```
+
+### 3. ポーズ描画での座標変換適用
+```javascript
+// 座標変換を適用した描画関数
+function drawKeypointTransformed(x, y, radius = KEYPOINT_RADIUS) {
+    const canvasCoord = coordManager.dataToCanvas(x, y);
+    drawKeypoint(canvasCoord.x, canvasCoord.y, radius);
+}
+
+function drawLineTransformed(x1, y1, x2, y2) {
+    const start = coordManager.dataToCanvas(x1, y1);
+    const end = coordManager.dataToCanvas(x2, y2);
+    
+    ctx.beginPath();
+    ctx.moveTo(start.x, start.y);
+    ctx.lineTo(end.x, end.y);
+    ctx.stroke();
+}
+
+// ボディ描画を座標変換対応に更新
+function drawBodyTransformed(poseData) {
+    if (!poseData.bodies || !poseData.bodies.candidate) return;
+    
+    const candidates = poseData.bodies.candidate;
+    const subset = poseData.bodies.subset;
+    
+    if (subset.length === 0) return;
+    
+    const person = subset[0];
+    
+    // 接続線の描画（座標変換適用）
+    ctx.strokeStyle = POSE_COLORS.bodyLine;
+    ctx.lineWidth = 3;
+    
+    for (const [start, end] of BODY_CONNECTIONS) {
+        const startIdx = person[start];
+        const endIdx = person[end];
+        
+        if (startIdx >= 0 && endIdx >= 0) {
+            const startPoint = candidates[startIdx];
+            const endPoint = candidates[endIdx];
+            
+            if (startPoint && endPoint) {
+                drawLineTransformed(
+                    startPoint[0], startPoint[1],
+                    endPoint[0], endPoint[1]
+                );
+            }
+        }
+    }
+    
+    // キーポイントの描画（座標変換適用）
+    ctx.fillStyle = POSE_COLORS.body;
+    for (let i = 0; i < 17; i++) {
+        const idx = person[i];
+        if (idx >= 0) {
+            const point = candidates[idx];
+            if (point) {
+                drawKeypointTransformed(point[0], point[1]);
+            }
+        }
+    }
+}
+```
+
+### 4. マウス操作での座標変換
+```javascript
+// マウス座標をデータ座標に変換
+function getDataCoordinateFromMouse(event) {
+    const rect = canvas.getBoundingClientRect();
+    const canvasX = event.clientX - rect.left;
+    const canvasY = event.clientY - rect.top;
+    
+    return coordManager.canvasToData(canvasX, canvasY);
+}
+```
+
+## 参考
+- `./refs/dwpose_modifier`の座標変換ロジック
+- 特に正規化座標の検出と変換処理
+
+## 完了条件
+- [ ] データ解像度とCanvas表示サイズの変換が正しく機能する
+- [ ] 正規化座標の自動検出と変換ができる
+- [ ] マウス操作時の座標変換が正確
+- [ ] 画像オフセットを考慮した座標変換
+- [ ] 手と顔の座標変換も対応している

issues/009_キーポイントドラッグ基本.md

@@ -0,0 +1,333 @@
+# Issue: キーポイントドラッグ基本
+
+## 概要
+Canvas上のキーポイントをマウスでドラッグして編集する基本機能を実装。詳細モードでの個別キーポイント操作。
+
+## 背景
+Issue #008の座標変換システムを使って、キーポイントのドラッグ編集を実現する。dwpose_modifierで発生したドラッグ時の座標ジャンプ問題を回避。
+
+## 実装内容
+
+### 1. ドラッグ状態管理
+`static/pose_editor.js`に追加:
+```javascript
+// ドラッグ状態管理
+class DragManager {
+    constructor() {
+        this.isDragging = false;
+        this.dragTarget = null;
+        this.dragOffset = {x: 0, y: 0};
+        this.clickThreshold = 10; // ドラッグ判定閾値（ピクセル）
+        this.hoverTarget = null;
+    }
+    
+    startDrag(target, mouseX, mouseY) {
+        this.isDragging = true;
+        this.dragTarget = target;
+        
+        // ドラッグオフセットを計算（キーポイント中心からのずれ）
+        const canvasCoord = coordManager.dataToCanvas(target.x, target.y);
+        this.dragOffset = {
+            x: mouseX - canvasCoord.x,
+            y: mouseY - canvasCoord.y
+        };
+        
+        debugLog(`Drag started: ${target.type} ${target.index}`);
+    }
+    
+    updateDrag(mouseX, mouseY) {
+        if (!this.isDragging || !this.dragTarget) return false;
+        
+        // マウス位置からオフセットを引いて正確な位置を計算
+        const adjustedX = mouseX - this.dragOffset.x;
+        const adjustedY = mouseY - this.dragOffset.y;
+        
+        // Canvas座標をデータ座標に変換
+        const dataCoord = coordManager.canvasToData(adjustedX, adjustedY);
+        
+        // キーポイント位置を更新
+        this.updateKeypointPosition(this.dragTarget, dataCoord.x, dataCoord.y);
+        
+        return true;
+    }
+    
+    endDrag() {
+        if (this.isDragging) {
+            debugLog(`Drag ended: ${this.dragTarget?.type} ${this.dragTarget?.index}`);
+        }
+        
+        this.isDragging = false;
+        this.dragTarget = null;
+        this.dragOffset = {x: 0, y: 0};
+    }
+    
+    updateKeypointPosition(target, x, y) {
+        if (!poseData) return;
+        
+        if (target.type === 'body') {
+            const candidates = poseData.bodies.candidate;
+            const subset = poseData.bodies.subset[0];
+            const candidateIndex = subset[target.index];
+            
+            if (candidateIndex >= 0 && candidates[candidateIndex]) {
+                candidates[candidateIndex][0] = x;
+                candidates[candidateIndex][1] = y;
+            }
+        } else if (target.type === 'hand') {
+            const hand = poseData.hands[target.handIndex];
+            if (hand) {
+                const pointIndex = target.index * 3;
+                hand[pointIndex] = x;     // x座標
+                hand[pointIndex + 1] = y; // y座標
+            }
+        } else if (target.type === 'face') {
+            const face = poseData.faces[0];
+            if (face) {
+                const pointIndex = target.index * 3;
+                face[pointIndex] = x;     // x座標
+                face[pointIndex + 1] = y; // y座標
+            }
+        }
+    }
+}
+
+const dragManager = new DragManager();
+```
+
+### 2. キーポイント検出
+```javascript
+// マウス位置にあるキーポイントを検出
+function getKeypointAt(mouseX, mouseY) {
+    if (!poseData) return null;
+    
+    const hitRadius = 12; // ヒット判定半径
+    
+    // ボディキーポイントをチェック
+    if (poseData.bodies && poseData.bodies.candidate) {
+        const candidates = poseData.bodies.candidate;
+        const subset = poseData.bodies.subset[0];
+        
+        for (let i = 0; i < 17; i++) {
+            const candidateIndex = subset[i];
+            if (candidateIndex >= 0) {
+                const point = candidates[candidateIndex];
+                if (point) {
+                    const canvasCoord = coordManager.dataToCanvas(point[0], point[1]);
+                    const distance = Math.sqrt(
+                        Math.pow(mouseX - canvasCoord.x, 2) + 
+                        Math.pow(mouseY - canvasCoord.y, 2)
+                    );
+                    
+                    if (distance <= hitRadius) {
+                        return {
+                            type: 'body',
+                            index: i,
+                            x: point[0],
+                            y: point[1]
+                        };
+                    }
+                }
+            }
+        }
+    }
+    
+    // 手のキーポイントをチェック（詳細モード時）
+    if (currentEditMode === 'detailed' && currentDrawHands && poseData.hands) {
+        for (let handIndex = 0; handIndex < poseData.hands.length; handIndex++) {
+            const hand = poseData.hands[handIndex];
+            if (hand) {
+                for (let i = 0; i < hand.length; i += 3) {
+                    const x = hand[i];
+                    const y = hand[i + 1];
+                    const conf = hand[i + 2];
+                    
+                    if (conf > 0.3) {
+                        const canvasCoord = coordManager.dataToCanvas(x, y);
+                        const distance = Math.sqrt(
+                            Math.pow(mouseX - canvasCoord.x, 2) + 
+                            Math.pow(mouseY - canvasCoord.y, 2)
+                        );
+                        
+                        if (distance <= hitRadius) {
+                            return {
+                                type: 'hand',
+                                handIndex: handIndex,
+                                index: i / 3,
+                                x: x,
+                                y: y
+                            };
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+    // 顔のキーポイントをチェック（詳細モード時）
+    if (currentEditMode === 'detailed' && currentDrawFace && poseData.faces) {
+        const face = poseData.faces[0];
+        if (face) {
+            for (let i = 0; i < face.length; i += 3) {
+                const x = face[i];
+                const y = face[i + 1];
+                const conf = face[i + 2];
+                
+                if (conf > 0.3) {
+                    const canvasCoord = coordManager.dataToCanvas(x, y);
+                    const distance = Math.sqrt(
+                        Math.pow(mouseX - canvasCoord.x, 2) + 
+                        Math.pow(mouseY - canvasCoord.y, 2)
+                    );
+                    
+                    if (distance <= hitRadius) {
+                        return {
+                            type: 'face',
+                            index: i / 3,
+                            x: x,
+                            y: y
+                        };
+                    }
+                }
+            }
+        }
+    }
+    
+    return null;
+}
+```
+
+### 3. マウスイベントハンドラ
+```javascript
+// マウスイベントの設定
+function setupMouseEvents() {
+    if (!canvas) return;
+    
+    canvas.addEventListener('mousedown', handleMouseDown);
+    canvas.addEventListener('mousemove', handleMouseMove);
+    canvas.addEventListener('mouseup', handleMouseUp);
+    canvas.addEventListener('mouseleave', handleMouseLeave);
+}
+
+function handleMouseDown(event) {
+    if (!isCanvasReady()) return;
+    
+    const rect = canvas.getBoundingClientRect();
+    const mouseX = event.clientX - rect.left;
+    const mouseY = event.clientY - rect.top;
+    
+    const target = getKeypointAt(mouseX, mouseY);
+    if (target && currentEditMode === 'detailed') {
+        dragManager.startDrag(target, mouseX, mouseY);
+        canvas.style.cursor = 'grabbing';
+        event.preventDefault();
+    }
+}
+
+function handleMouseMove(event) {
+    if (!isCanvasReady()) return;
+    
+    const rect = canvas.getBoundingClientRect();
+    const mouseX = event.clientX - rect.left;
+    const mouseY = event.clientY - rect.top;
+    
+    if (dragManager.isDragging) {
+        // ドラッグ中
+        if (dragManager.updateDrag(mouseX, mouseY)) {
+            redrawCanvas();
+        }
+    } else {
+        // ホバー処理
+        const target = getKeypointAt(mouseX, mouseY);
+        if (target && currentEditMode === 'detailed') {
+            canvas.style.cursor = 'grab';
+            dragManager.hoverTarget = target;
+        } else {
+            canvas.style.cursor = 'default';
+            dragManager.hoverTarget = null;
+        }
+    }
+}
+
+function handleMouseUp(event) {
+    if (dragManager.isDragging) {
+        dragManager.endDrag();
+        canvas.style.cursor = 'default';
+        
+        // Gradioにポーズデータを送信
+        if (window.notifyPoseDataChanged) {
+            window.notifyPoseDataChanged(poseData);
+        }
+    }
+}
+
+function handleMouseLeave(event) {
+    dragManager.endDrag();
+    canvas.style.cursor = 'default';
+}
+```
+
+### 4. ホバー時の視覚フィードバック
+```javascript
+// ホバー時のキーポイント強調表示
+function drawKeypointHighlight(x, y, radius = KEYPOINT_RADIUS) {
+    const canvasCoord = coordManager.dataToCanvas(x, y);
+    
+    // 外側の輪
+    ctx.save();
+    ctx.strokeStyle = '#ffffff';
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+    ctx.arc(canvasCoord.x, canvasCoord.y, radius + 4, 0, Math.PI * 2);
+    ctx.stroke();
+    
+    // 内側の輪
+    ctx.strokeStyle = '#000000';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.arc(canvasCoord.x, canvasCoord.y, radius + 4, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.restore();
+}
+
+// 描画関数にホバー表示を追加
+function redrawCanvasWithHover() {
+    redrawCanvas();
+    
+    // ホバーターゲットがあれば強調表示
+    if (dragManager.hoverTarget && !dragManager.isDragging) {
+        drawKeypointHighlight(
+            dragManager.hoverTarget.x, 
+            dragManager.hoverTarget.y
+        );
+    }
+}
+```
+
+### 5. デバウンス処理
+```javascript
+// ドラッグ更新のデバウンス
+let dragUpdateTimeout = null;
+
+function debouncedDragUpdate() {
+    if (dragUpdateTimeout) {
+        clearTimeout(dragUpdateTimeout);
+    }
+    
+    dragUpdateTimeout = setTimeout(() => {
+        if (window.notifyPoseDataChanged) {
+            window.notifyPoseDataChanged(poseData);
+        }
+    }, 100); // 100ms後に更新
+}
+```
+
+## 参考
+- `./refs/dwpose_modifier/issues/021_ドラッグ時座標ジャンプ修正_complete.md`
+- 特にオフセット計算とドラッグ精度の改善
+
+## 完了条件
+- [ ] キーポイントがマウスでドラッグできる
+- [ ] ドラッグ時に座標ジャンプが発生しない
+- [ ] ホバー時に視覚フィードバックがある
+- [ ] 詳細モードでのみドラッグが有効
+- [ ] ドラッグ後にポーズデータが更新される

issues/010_手描画チェックボックス.md

@@ -0,0 +1,44 @@
+# Issue: 手描画チェックボックス
+
+## 概要
+手のキーポイントの表示/非表示を切り替えるチェックボックス機能を実装。
+
+## 実装内容
+
+### 1. Gradioイベントハンドラ
+```python
+def toggle_hand_drawing(show_hands):
+    """手描画の切り替え"""
+    update_js = f"""
+    <script>
+        setTimeout(() => {{
+            if (window.setHandDrawing) {{
+                window.setHandDrawing({json.dumps(show_hands)});
+            }}
+        }}, 50);
+    </script>
+    """
+    return update_js
+
+# UIイベント設定
+draw_hand.change(
+    toggle_hand_drawing,
+    inputs=[draw_hand],
+    outputs=[js_executor]
+)
+```
+
+### 2. JavaScript実装
+```javascript
+let currentDrawHands = true;
+
+window.setHandDrawing = function(showHands) {
+    currentDrawHands = showHands;
+    debugLog(`Hand drawing: ${showHands}`);
+    redrawCanvas();
+};
+```
+
+## 完了条件
+- [ ] チェックボックスで手の表示/非表示が切り替わる
+- [ ] リアルタイムで反映される

issues/011_顔描画チェックボックス.md

@@ -0,0 +1,44 @@
+# Issue: 顔描画チェックボックス
+
+## 概要
+顔のキーポイントの表示/非表示を切り替えるチェックボックス機能を実装。
+
+## 実装内容
+
+### 1. Gradioイベントハンドラ
+```python
+def toggle_face_drawing(show_face):
+    """顔描画の切り替え"""
+    update_js = f"""
+    <script>
+        setTimeout(() => {{
+            if (window.setFaceDrawing) {{
+                window.setFaceDrawing({json.dumps(show_face)});
+            }}
+        }}, 50);
+    </script>
+    """
+    return update_js
+
+# UIイベント設定
+draw_face.change(
+    toggle_face_drawing,
+    inputs=[draw_face],
+    outputs=[js_executor]
+)
+```
+
+### 2. JavaScript実装
+```javascript
+let currentDrawFace = true;
+
+window.setFaceDrawing = function(showFace) {
+    currentDrawFace = showFace;
+    debugLog(`Face drawing: ${showFace}`);
+    redrawCanvas();
+};
+```
+
+## 完了条件
+- [ ] チェックボックスで顔の表示/非表示が切り替わる
+- [ ] 手描画とは独立して動作する

issues/012_簡易モード矩形選択.md

@@ -0,0 +1,100 @@
+# Issue: 簡易モード矩形選択
+
+## 概要
+簡易モードで手と顔を矩形として表示し、矩形クリックで編集モードに入る機能を実装。
+
+## 背景
+dwpose_modifierのタブ1にある機能。手21キーポイントと顔68キーポイントを矩形で代表し、直感的な編集を可能にする。
+
+## 実装内容
+
+### 1. 矩形計算ユーティリティ
+```javascript
+function calculateHandRectangle(handData) {
+    if (!handData || handData.length === 0) return null;
+    
+    let minX = Infinity, minY = Infinity;
+    let maxX = -Infinity, maxY = -Infinity;
+    
+    for (let i = 0; i < handData.length; i += 3) {
+        const x = handData[i];
+        const y = handData[i + 1];
+        const conf = handData[i + 2];
+        
+        if (conf > 0.3) {
+            minX = Math.min(minX, x);
+            minY = Math.min(minY, y);
+            maxX = Math.max(maxX, x);
+            maxY = Math.max(maxY, y);
+        }
+    }
+    
+    if (minX === Infinity) return null;
+    
+    // マージンを追加
+    const margin = 10;
+    return {
+        x: minX - margin,
+        y: minY - margin,
+        width: maxX - minX + margin * 2,
+        height: maxY - minY + margin * 2
+    };
+}
+
+function calculateFaceRectangle(faceData) {
+    // 同様の実装
+}
+```
+
+### 2. 矩形描画
+```javascript
+function drawRectangle(rect, color, isSelected = false) {
+    const canvasRect = {
+        x: coordManager.dataToCanvas(rect.x, 0).x,
+        y: coordManager.dataToCanvas(0, rect.y).y,
+        width: rect.width * (640 / coordManager.dataWidth),
+        height: rect.height * (640 / coordManager.dataHeight)
+    };
+    
+    ctx.strokeStyle = color;
+    ctx.lineWidth = isSelected ? 3 : 2;
+    ctx.setLineDash(isSelected ? [] : [5, 5]);
+    ctx.strokeRect(canvasRect.x, canvasRect.y, canvasRect.width, canvasRect.height);
+    ctx.setLineDash([]);
+}
+```
+
+### 3. 矩形クリック検出
+```javascript
+function getRectangleAt(mouseX, mouseY) {
+    if (currentEditMode !== 'simple') return null;
+    
+    // 手の矩形チェック
+    if (currentDrawHands && poseData.hands) {
+        for (let i = 0; i < poseData.hands.length; i++) {
+            const rect = calculateHandRectangle(poseData.hands[i]);
+            if (rect && isPointInRectangle(mouseX, mouseY, rect)) {
+                return {type: 'hand', index: i, rect: rect};
+            }
+        }
+    }
+    
+    // 顔の矩形チェック
+    if (currentDrawFace && poseData.faces) {
+        const rect = calculateFaceRectangle(poseData.faces[0]);
+        if (rect && isPointInRectangle(mouseX, mouseY, rect)) {
+            return {type: 'face', index: 0, rect: rect};
+        }
+    }
+    
+    return null;
+}
+```
+
+## 参考
+- `./refs/dwpose_modifier/issues/028_手顔キーポイント矩形操作機能.md`
+
+## 完了条件
+- [ ] 簡易モードで手と顔が矩形表示される
+- [ ] 矩形クリックで選択状態になる
+- [ ] 矩形ドラッグで一括移動できる

issues/013_詳細モード個別編集.md

@@ -0,0 +1,70 @@
+# Issue: 詳細モード個別編集
+
+## 概要
+詳細モードで手と顔の個別キーポイントを直接編集できる機能。Issue #009のドラッグ機能を手と顔に拡張。
+
+## 実装内容
+
+### 1. 詳細モード描画
+```javascript
+function drawDetailedHands(handsData) {
+    if (!handsData || !currentDrawHands) return;
+    
+    ctx.fillStyle = POSE_COLORS.hand;
+    
+    handsData.forEach((hand, handIndex) => {
+        if (hand && hand.length > 0) {
+            for (let i = 0; i < hand.length; i += 3) {
+                const x = hand[i];
+                const y = hand[i + 1];
+                const conf = hand[i + 2];
+                
+                if (conf > 0.3) {
+                    drawKeypointTransformed(x, y, 3);
+                }
+            }
+        }
+    });
+}
+
+function drawDetailedFace(facesData) {
+    if (!facesData || !currentDrawFace) return;
+    
+    ctx.fillStyle = POSE_COLORS.face;
+    
+    const face = facesData[0];
+    if (face && face.length > 0) {
+        for (let i = 0; i < face.length; i += 3) {
+            const x = face[i];
+            const y = face[i + 1];
+            const conf = face[i + 2];
+            
+            if (conf > 0.3) {
+                drawKeypointTransformed(x, y, 2);
+            }
+        }
+    }
+}
+```
+
+### 2. キーポイント選択表示
+```javascript
+function drawSelectedKeypoint(target) {
+    if (!target) return;
+    
+    const canvasCoord = coordManager.dataToCanvas(target.x, target.y);
+    
+    ctx.save();
+    ctx.strokeStyle = '#00ff00';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.arc(canvasCoord.x, canvasCoord.y, 8, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.restore();
+}
+```
+
+## 完了条件
+- [ ] 詳細モードで手顔の個別キーポイントが表示される
+- [ ] 各キーポイントをドラッグで編集できる
+- [ ] 選択時に視覚フィードバックがある

issues/014_モード切替ラジオボタン.md

@@ -0,0 +1,53 @@
+# Issue: モード切替ラジオボタン
+
+## 概要
+簡易モードと詳細モードを切り替えるラジオボタン機能を実装。
+
+## 実装内容
+
+### 1. Gradioイベントハンドラ
+```python
+def change_edit_mode(mode):
+    """編集モードの切り替え"""
+    update_js = f"""
+    <script>
+        setTimeout(() => {{
+            if (window.setEditMode) {{
+                window.setEditMode('{mode}');
+            }}
+        }}, 50);
+    </script>
+    """
+    return update_js
+
+edit_mode.change(
+    change_edit_mode,
+    inputs=[edit_mode],
+    outputs=[js_executor]
+)
+```
+
+### 2. JavaScript実装
+```javascript
+let currentEditMode = 'simple';
+
+window.setEditMode = function(mode) {
+    currentEditMode = mode;
+    debugLog(`Edit mode changed to: ${mode}`);
+    
+    // ドラッグ状態をリセット
+    dragManager.endDrag();
+    
+    // カーソルをリセット
+    if (canvas) {
+        canvas.style.cursor = 'default';
+    }
+    
+    redrawCanvas();
+};
+```
+
+## 完了条件
+- [ ] ラジオボタンでモード切替ができる
+- [ ] モード切替時に表示が更新される
+- [ ] ドラッグ状態が適切にリセットされる

issues/015_Canvas解像度変更機能.md

@@ -0,0 +1,82 @@
+# Issue: Canvas解像度変更機能
+
+## 概要
+Canvasのデータ解像度を変更する機能。表示サイズは640x640固定、データ解像度のみ変更。
+
+## 実装内容
+
+### 1. Gradioイベントハンドラ
+```python
+def update_canvas_resolution(width, height):
+    """Canvas解像度の更新"""
+    try:
+        width = int(width)
+        height = int(height)
+        
+        if width < 64 or width > 2048 or height < 64 or height > 2048:
+            return gr.Warning("解像度は64-2048の範囲で設定してください")
+        
+        update_js = f"""
+        <script>
+            setTimeout(() => {{
+                if (window.updateCanvasResolution) {{
+                    window.updateCanvasResolution({width}, {height});
+                }}
+            }}, 50);
+        </script>
+        """
+        
+        return update_js, gr.Info(f"解像度を{width}x{height}に変更しました")
+        
+    except ValueError:
+        return None, gr.Error("無効な解像度値です")
+
+update_canvas_btn.click(
+    update_canvas_resolution,
+    inputs=[canvas_width, canvas_height],
+    outputs=[js_executor, None]
+)
+```
+
+### 2. JavaScript実装
+```javascript
+window.updateCanvasResolution = function(width, height) {
+    debugLog(`Updating canvas resolution to ${width}x${height}`);
+    
+    // 座標マネージャーの解像度を更新
+    coordManager.setDataResolution(width, height);
+    
+    // 既存のポーズデータがあれば再スケール
+    if (poseData) {
+        rescalePoseData(poseData, width, height);
+    }
+    
+    redrawCanvas();
+};
+
+function rescalePoseData(pose_data, newWidth, newHeight) {
+    const oldWidth = coordManager.dataWidth;
+    const oldHeight = coordManager.dataHeight;
+    
+    const scaleX = newWidth / oldWidth;
+    const scaleY = newHeight / oldHeight;
+    
+    // ボディキーポイントのスケール
+    if (pose_data.bodies && pose_data.bodies.candidate) {
+        pose_data.bodies.candidate.forEach(point => {
+            if (point && point.length >= 2) {
+                point[0] *= scaleX;
+                point[1] *= scaleY;
+            }
+        });
+    }
+    
+    // 手と顔も同様にスケール
+    // ...
+}
+```
+
+## 完了条件
+- [ ] 解像度変更ボタンが機能する
+- [ ] 既存ポーズデータが新解像度にスケールされる
+- [ ] 範囲外の値でエラー表示される

issues/016_テンプレートポーズ選択.md

@@ -0,0 +1,92 @@
+# Issue: テンプレートポーズ選択
+
+## 概要
+2頭身・3頭身のテンプレートポーズを選択してCanvasに読み込む機能を実装。
+
+## 実装内容
+
+### 1. テンプレートデータ準備
+`templates/poses.json`:
+```json
+{
+  "2頭身ポーズ画像 2頭身": {
+    "bodies": {
+      "candidate": [[100, 50], [120, 80], ...],
+      "subset": [[0, 1, 2, ...]]
+    },
+    "hands": [],
+    "faces": [],
+    "resolution": [512, 512]
+  },
+  "3頭身ポーズ画像 3頭身": {
+    "bodies": {
+      "candidate": [[100, 40], [115, 70], ...],
+      "subset": [[0, 1, 2, ...]]
+    },
+    "hands": [],
+    "faces": [],
+    "resolution": [512, 512]
+  }
+}
+```
+
+### 2. Gradioイベントハンドラ
+```python
+def load_template_pose(template_name):
+    """テンプレートポーズの読み込み"""
+    try:
+        with open("templates/poses.json", "r", encoding="utf-8") as f:
+            templates = json.load(f)
+        
+        if template_name not in templates:
+            return None, gr.Warning("テンプレートが見つかりません")
+        
+        pose_data = templates[template_name]
+        
+        update_js = f"""
+        <script>
+            setTimeout(() => {{
+                if (window.loadTemplatepose) {{
+                    window.loadTemplatePose({json.dumps(pose_data)});
+                }}
+            }}, 50);
+        </script>
+        """
+        
+        return update_js, gr.Info(f"{template_name}を読み込みました")
+        
+    except Exception as e:
+        return None, gr.Error(f"テンプレート読み込みエラー: {str(e)}")
+
+template_dropdown.change(
+    load_template_pose,
+    inputs=[template_dropdown],
+    outputs=[js_executor, None]
+)
+```
+
+### 3. JavaScript実装
+```javascript
+window.loadTemplatePose = function(templateData) {
+    debugLog("Loading template pose");
+    
+    // 背景画像をクリア
+    backgroundImage = null;
+    backgroundImageInfo = null;
+    
+    // ポーズデータを設定
+    poseData = templateData;
+    
+    // 解像度を更新
+    if (templateData.resolution) {
+        coordManager.setDataResolution(templateData.resolution[0], templateData.resolution[1]);
+    }
+    
+    redrawCanvas();
+};
+```
+
+## 完了条件
+- [ ] ドロップダウンでテンプレート選択できる
+- [ ] 選択したテンプレートがCanvasに表示される
+- [ ] 背景画像がクリアされる

issues/017_ポーズ画像エクスポート.md

@@ -0,0 +1,71 @@
+# Issue: ポーズ画像エクスポート
+
+## 概要
+編集したポーズをPNG画像としてエクスポートする機能を実装。
+
+## 実装内容
+
+### 1. Pythonでの画像生成
+```python
+def generate_pose_image(pose_data, width=512, height=512):
+    """ポーズデータから画像を生成"""
+    try:
+        from PIL import Image, ImageDraw
+        import numpy as np
+        
+        # 白背景の画像作成
+        img = Image.new('RGB', (width, height), 'white')
+        draw = ImageDraw.Draw(img)
+        
+        # ポーズ描画ロジック
+        if pose_data and 'bodies' in pose_data:
+            # ボディ描画
+            draw_body_on_image(draw, pose_data['bodies'], width, height)
+            
+            # 手描画
+            if 'hands' in pose_data:
+                draw_hands_on_image(draw, pose_data['hands'], width, height)
+            
+            # 顔描画
+            if 'faces' in pose_data:
+                draw_face_on_image(draw, pose_data['faces'], width, height)
+        
+        return img
+        
+    except Exception as e:
+        return None
+
+def export_pose_image(pose_data):
+    """ポーズ画像のエクスポート"""
+    if not pose_data:
+        return None, gr.Warning("エクスポートするポーズがありません")
+    
+    try:
+        img = generate_pose_image(pose_data)
+        if img:
+            return img, gr.Info("ポーズ画像を生成しました")
+        else:
+            return None, gr.Error("画像生成に失敗しました")
+    except Exception as e:
+        return None, gr.Error(f"エクスポートエラー: {str(e)}")
+```
+
+### 2. JavaScript連携
+```javascript
+window.requestPoseExport = function() {
+    if (!poseData) {
+        debugLog("No pose data to export");
+        return;
+    }
+    
+    // Gradioにポーズデータを送信してエクスポート要求
+    if (window.triggerPoseExport) {
+        window.triggerPoseExport(poseData);
+    }
+};
+```
+
+## 完了条件
+- [ ] ポーズがPNG画像として生成される
+- [ ] ダウンロードボタンが機能する
+- [ ] 解像度に応じて正しくスケールされる

issues/018_JSONデータエクスポート.md

@@ -0,0 +1,65 @@
+# Issue: JSONデータエクスポート
+
+## 概要
+編集したポーズデータをJSON形式でエクスポートする機能を実装。
+
+## 実装内容
+
+### 1. Gradioエクスポート機能
+```python
+def export_pose_json(pose_data):
+    """ポーズデータのJSONエクスポート"""
+    if not pose_data:
+        return None, gr.Warning("エクスポートするポーズがありません")
+    
+    try:
+        # JSONファイルとして保存
+        import tempfile
+        import json
+        
+        with tempfile.NamedTemporaryFile(mode='w', suffix='.json', delete=False) as f:
+            json.dump(pose_data, f, indent=2, ensure_ascii=False)
+            temp_path = f.name
+        
+        return temp_path, gr.Info("JSONファイルを生成しました")
+        
+    except Exception as e:
+        return None, gr.Error(f"JSON生成エラー: {str(e)}")
+
+# UIボタンの設定
+download_json_btn.click(
+    export_pose_json,
+    inputs=[pose_data_state],
+    outputs=[json_download_file, None]
+)
+```
+
+### 2. JavaScript連携
+```javascript
+window.requestJsonExport = function() {
+    if (!poseData) {
+        debugLog("No pose data to export");
+        return;
+    }
+    
+    // Gradioに現在のポーズデータを送信
+    if (window.triggerJsonExport) {
+        window.triggerJsonExport(poseData);
+    }
+};
+```
+
+### 3. リアルタイム表示
+```python
+def update_json_display(pose_data):
+    """JSON表示の更新"""
+    if pose_data:
+        return gr.update(value=pose_data)
+    else:
+        return gr.update(value={})
+```
+
+## 完了条件
+- [ ] ポーズデータがJSON形式で表示される
+- [ ] JSONファイルとしてダウンロードできる
+- [ ] 編集時にリアルタイムで更新される

issues/019_エラーハンドリング統合.md

@@ -0,0 +1,94 @@
+# Issue: エラーハンドリング統合
+
+## 概要
+アプリケーション全体のエラーハンドリングを統合し、ユーザーフレンドリーなエラー表示を実現。
+
+## 実装内容
+
+### 1. エラー分類と処理
+```python
+class DWPoseEditorError(Exception):
+    """アプリケーション固有のエラー基底クラス"""
+    pass
+
+class ModelLoadError(DWPoseEditorError):
+    """モデル読み込みエラー"""
+    pass
+
+class PoseDetectionError(DWPoseEditorError):
+    """ポーズ検出エラー"""
+    pass
+
+class ImageProcessingError(DWPoseEditorError):
+    """画像処理エラー"""
+    pass
+
+def handle_error(error, context=""):
+    """統一エラーハンドラ"""
+    if isinstance(error, ModelLoadError):
+        return gr.Error("モデルの読み込みに失敗しました。しばらく待ってから再試行してください。")
+    elif isinstance(error, PoseDetectionError):
+        return gr.Warning("ポーズを検出できませんでした。別の画像をお試しください。")
+    elif isinstance(error, ImageProcessingError):
+        return gr.Error("画像の処理中にエラーが発生しました。")
+    else:
+        return gr.Error(f"予期しないエラーが発生しました: {str(error)}")
+```
+
+### 2. JavaScript エラーハンドリング
+```javascript
+// グローバルエラーハンドラ
+window.addEventListener('error', (event) => {
+    debugLog(`Global error: ${event.error.message}`);
+    if (isCanvasReady()) {
+        showCanvasError('エラーが発生しました');
+    }
+});
+
+// Promise rejection ハンドラ
+window.addEventListener('unhandledrejection', (event) => {
+    debugLog(`Unhandled promise rejection: ${event.reason}`);
+    event.preventDefault();
+});
+
+// Canvas操作の安全な実行
+function safeExecute(operation, errorMessage = "操作中にエラーが発生しました") {
+    try {
+        return operation();
+    } catch (error) {
+        debugLog(`Safe execute error: ${error.message}`);
+        if (isCanvasReady()) {
+            showCanvasError(errorMessage);
+        }
+        return null;
+    }
+}
+```
+
+### 3. ネットワークエラー対応
+```python
+def with_retry(func, max_retries=3):
+    """リトライ機能付きデコレータ"""
+    def wrapper(*args, **kwargs):
+        for attempt in range(max_retries):
+            try:
+                return func(*args, **kwargs)
+            except Exception as e:
+                if attempt == max_retries - 1:
+                    raise e
+                time.sleep(1)  # 1秒待機してリトライ
+        return None
+    return wrapper
+
+@with_retry
+def download_model():
+    """モデルダウンロード（リトライ付き）"""
+    # DWPoseモデルダウンロード処理
+    pass
+```
+
+## 完了条件
+- [ ] 各種エラーが適切に分類される
+- [ ] ユーザーに分かりやすいメッセージが表示される
+- [ ] ネットワークエラー時にリトライされる
+- [ ] Canvasエラー時に視覚的にフィードバックされる

issues/020_Gradioトースト通知.md

@@ -0,0 +1,89 @@
+# Issue: Gradioトースト通知
+
+## 概要
+Gradioのトースト通知機能を活用したユーザーフィードバックシステムを実装。
+
+## 実装内容
+
+### 1. 通知レベル別処理
+```python
+def notify_success(message):
+    """成功通知"""
+    return gr.Info(message)
+
+def notify_warning(message):
+    """警告通知"""
+    return gr.Warning(message)
+
+def notify_error(message):
+    """エラー通知"""
+    return gr.Error(message)
+
+# 使用例
+def handle_image_upload(image):
+    try:
+        # 処理
+        return result, notify_success("画像をアップロードしました")
+    except Exception as e:
+        return None, notify_error(f"アップロードに失敗しました: {str(e)}")
+```
+
+### 2. 進捗通知
+```python
+def notify_progress(message, progress=None):
+    """進捗通知"""
+    if progress:
+        return gr.Progress(progress, desc=message)
+    else:
+        return gr.Info(message)
+
+# DWPose処理時の進捗表示
+def detect_pose_with_progress(image):
+    notify_progress("人物を検出中...", 0.3)
+    # YOLOX実行
+    
+    notify_progress("ポーズを解析中...", 0.7)
+    # DWPose実行
+    
+    notify_progress("完了", 1.0)
+    return result
+```
+
+### 3. JavaScriptからの通知
+```javascript
+// Gradioトースト通知のトリガー
+window.showToast = function(type, message) {
+    // Gradioの隠しコンポーネントを使って通知
+    if (window.triggerToast) {
+        window.triggerToast(type, message);
+    }
+};
+
+// Canvas操作時の通知
+function notifyCanvasOperation(message) {
+    showToast('info', message);
+}
+```
+
+### 4. 通知設定の管理
+```python
+# 通知設定
+NOTIFICATION_SETTINGS = {
+    'show_success': True,
+    'show_warnings': True,
+    'show_errors': True,
+    'auto_dismiss': True,
+    'dismiss_timeout': 3000  # 3秒
+}
+
+def configure_notifications(settings):
+    """通知設定の更新"""
+    global NOTIFICATION_SETTINGS
+    NOTIFICATION_SETTINGS.update(settings)
+```
+
+## 完了条件
+- [ ] 成功/警告/エラーの通知が適切に表示される
+- [ ] 進捗表示が機能する
+- [ ] JavaScriptからも通知できる
+- [ ] 通知が適切なタイミングで消える