Fix: restore gr.Blocks + WebRTC, add prevention checklist

- Reverted from Stream.ui.launch() to gr.Blocks + WebRTC
- Fixed track_constraints structure with "video" key
- Enhanced CSS for footer hiding
- Added prevention checklist to TROUBLESHOOTING.md

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

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

TROUBLESHOOTING.md

@@ -739,3 +739,43 @@ Dockerfile でビルド時に事前ダウンロード：
 ```dockerfile
 RUN python -c "from paddleocr import PaddleOCR; PaddleOCR(use_angle_cls=True, lang='japan')" || true
 ```
+
+## 再発防止チェックリスト
+
+### 必須確認事項（コード変更時に必ずチェック）
+
+1. **外カメラ設定**
+   - `track_constraints` に `"facingMode": {"exact": "environment"}` が含まれているか
+   - `track_constraints` の構造が正しいか（`{"video": {...}}` 形式）
+
+2. **フッター非表示**
+   - `CUSTOM_CSS` に `footer { display: none !important; }` が含まれているか
+   - `gr.Blocks()` に `css=CUSTOM_CSS` が渡されているか
+
+3. **ボタンラベル**
+   - `button_labels` に日本語ではなく英語（"Start", "Stop"）が設定されているか
+   - "録音" という文字列がコード内に存在しないか
+
+4. **Stream.ui.launch() は使わない**
+   - `Stream.ui.launch()` はデフォルトUIを使うため、カスタマイズ不可
+   - 必ず `gr.Blocks()` + `WebRTC` コンポーネントを使用すること
+
+### track_constraints の正しい形式
+
+```python
+# 正しい形式
+TRACK_CONSTRAINTS = {
+    "video": {
+        "width": {"ideal": 1280},
+        "height": {"ideal": 720},
+        "frameRate": {"ideal": 15},
+        "facingMode": {"exact": "environment"},
+    }
+}
+
+# 間違った形式（videoキーがない）
+TRACK_CONSTRAINTS = {
+    "width": {"ideal": 1280},
+    "facingMode": {"exact": "environment"},
+}
+```

app.py

@@ -5,7 +5,8 @@ dokoCame - Real-time video location identification service
 from typing import Optional
 import os
 import numpy as np
-from fastrtc import Stream, get_cloudflare_turn_credentials
+import gradio as gr
+from fastrtc import WebRTC, get_cloudflare_turn_credentials
 import cv2
 
 from config.settings import settings
@@ -153,20 +154,66 @@ def process_video_frame(frame: np.ndarray) -> np.ndarray:
         return frame
 
 
+# ========== 設定 ==========
+# 外カメラ強制
+TRACK_CONSTRAINTS = {
+    "video": {
+        "width": {"ideal": 1280},
+        "height": {"ideal": 720},
+        "frameRate": {"ideal": 15},
+        "facingMode": {"exact": "environment"},
+    }
+}
+
+# フッター非表示CSS
+CUSTOM_CSS = """
+.gradio-container { max-width: 100% !important; padding: 0 !important; }
+footer { display: none !important; visibility: hidden !important; height: 0 !important; }
+.built-with { display: none !important; }
+.svelte-1rjryqp { display: none !important; }
+#footer { display: none !important; }
+.footer { display: none !important; }
+.gr-footer { display: none !important; }
+[class*="footer"] { display: none !important; }
+"""
+
+
+# ========== メイン ==========
 if __name__ == "__main__":
     if not settings.validate():
         print("Warning: GEMINI_API_KEY required for VLM")
 
     rtc_config = get_cloudflare_turn_credentials if os.getenv("HF_TOKEN") else None
 
-    stream = Stream(
-        handler=process_video_frame,
-        modality="video",
-        mode="send-receive",
-        rtc_configuration=rtc_config,
-    )
+    with gr.Blocks(
+        title="dokoCame",
+        css=CUSTOM_CSS,
+        theme=gr.themes.Default(),
+    ) as demo:
+        gr.Markdown("# dokoCame")
+
+        webrtc = WebRTC(
+            label="Camera",
+            mode="send-receive",
+            modality="video",
+            track_constraints=TRACK_CONSTRAINTS,
+            rtc_configuration=rtc_config,
+            icon_button_color="#4CAF50",
+            button_labels={
+                "start": "Start",
+                "stop": "Stop",
+                "waiting": "...",
+            },
+        )
+
+        webrtc.stream(
+            fn=process_video_frame,
+            inputs=[webrtc],
+            outputs=[webrtc],
+            time_limit=None,
+        )
 
-    stream.ui.launch(
+    demo.launch(
         server_name="0.0.0.0",
         server_port=7860,
         share=False,