Fix: Default rear camera with retry + improve UI instructions

- Add retry logic for rear camera initialization
- Add gr.Blocks(js=...) for auto rear camera on page load
- Update label to clarify: "capture photo first, then analyze"
- Update usage instructions
- Record issues in TROUBLESHOOTING.md

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

TROUBLESHOOTING.md

@@ -266,3 +266,60 @@ async () => {
 
 switch_camera_btn.click(fn=None, js=switch_camera_js)
 ```
+
+## gr.Image streaming=False で画像がサーバーに送信されない
+
+### 問題
+- 解析ボタンを押しても「カメラを起動してください」表示
+- Container ログにデバッグ出力なし
+- `frame=None` がサーバーに渡されている
+
+### 原因
+- `gr.Image(sources=["webcam"], streaming=False)` では、カメラUI内の**撮影ボタン**を押して静止画をキャプチャしないと画像がセットされない
+- カメラプレビューは表示されるが、ユーザーが明示的に撮影しないと `None` のまま
+
+### 解決策
+UIの説明を改善して、ユーザーに操作手順を明示：
+```
+1. カメラUI内の撮影ボタンで写真を撮る
+2. 解析ボタンを押す
+```
+
+### ラベルの改善
+```python
+webcam = gr.Image(
+    sources=["webcam"],
+    streaming=False,
+    label="📷 カメラで撮影してから解析ボタンを押してください",
+)
+```
+
+## デフォルト外カメラが適用されない
+
+### 問題
+- `gr.Blocks(js=camera_js)` を設定したが、カメラが内カメラのまま
+
+### 原因
+- ページ読み込み時にカメラがまだ起動していない
+- タイミングの問題で `video.srcObject` が `null`
+
+### 解決策
+リトライロジック付きのJavaScriptを使用：
+```javascript
+const initRearCamera = async () => {
+    await new Promise(r => setTimeout(r, 2000));
+
+    const video = document.querySelector('video');
+    if (!video || !video.srcObject) {
+        setTimeout(initRearCamera, 1000);  // リトライ
+        return;
+    }
+
+    // 外カメラに切り替え
+    const stream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: { ideal: 'environment' } }
+    });
+    video.srcObject = stream;
+};
+initRearCamera();
+```

app.py

@@ -195,12 +195,54 @@ def reset_state():
 def create_ui():
     """Gradio UIを作成"""
 
-    # カメラ状態を管理
-    camera_state = {"facing": "environment"}  # environment=外カメ, user=内カメ
+    # ページ読み込み時に外カメラをデフォルトにするJavaScript
+    init_camera_js = """
+    () => {
+        // Gradioのカメラが起動したら外カメラに切り替える
+        const initRearCamera = async () => {
+            // 少し待ってからカメラを探す
+            await new Promise(r => setTimeout(r, 2000));
+
+            const video = document.querySelector('video');
+            if (!video) {
+                console.log('Video element not found, retrying...');
+                setTimeout(initRearCamera, 1000);
+                return;
+            }
+
+            // カメラが起動するまで待つ
+            if (!video.srcObject) {
+                console.log('Camera not started yet, retrying...');
+                setTimeout(initRearCamera, 1000);
+                return;
+            }
+
+            try {
+                const tracks = video.srcObject.getVideoTracks();
+                if (tracks.length > 0) {
+                    tracks.forEach(track => track.stop());
+                }
+
+                // 外カメラを要求
+                const stream = await navigator.mediaDevices.getUserMedia({
+                    video: { facingMode: { ideal: 'environment' } }
+                });
+                video.srcObject = stream;
+                console.log('外カメラに切り替え成功');
+            } catch (err) {
+                console.log('外カメラ切り替え失敗:', err);
+            }
+        };
+
+        // ページ読み込み後に実行
+        initRearCamera();
+    }
+    """
 
     with gr.Blocks(
         title="どこカメ - リアルタイム位置特定",
         theme=gr.themes.Soft(),
+        js=init_camera_js,
     ) as demo:
         gr.Markdown(
             """
@@ -215,13 +257,13 @@ def create_ui():
                 webcam = gr.Image(
                     sources=["webcam"],
                     streaming=False,
-                    label="カメラ映像",
+                    label="📷 カメラで撮影してから解析ボタンを押してください",
                     mirror_webcam=False,
                 )
 
                 with gr.Row():
                     # 解析ボタン
-                    analyze_btn = gr.Button("📸 解析する", variant="primary", size="lg")
+                    analyze_btn = gr.Button("🔍 解析する", variant="primary", size="lg")
                     # カメラ切り替えボタン
                     switch_camera_btn = gr.Button("🔄 内/外カメラ切替", variant="secondary")
 
@@ -311,14 +353,16 @@ def create_ui():
             """
             ---
             ### 使い方
-            1. カメラを許可して起動
-            2. **「内/外カメラ切替」**ボタンでカメラを選択
-            3. 周囲の看板や店舗が見える位置で**「解析する」**ボタンを押す
-            4. 複数回解析すると精度が上がります
+            1. カメラを許可して起動（自動で外カメラが選択されます）
+            2. 必要に応じて**「内/外カメラ切替」**で切り替え
+            3. 周囲の看板や店舗が見える位置で**カメラUI内の撮影ボタン**を押して写真を撮る
+            4. **「解析する」**ボタンを押して位置を特定
+            5. 複数回解析すると精度が上がります
 
             ### 注意事項
             - GPSは使用していません（映像のみで位置を推定）
             - コンビニ、飲食店、駅などが見えると精度が上がります
+            - **先に写真を撮ってから解析ボタンを押してください**
             """
         )