Photo-to-App Spec – Desktop v2.2（Single-File, Text-Assisted）
- 每次使用時，我會提供：
- 一張室內照片（用來當參考或背景）
- 一段「PHOTO_DESCRIPTION」文字（描述這張照片的空間與需求）
- 你（Codex）必須依照本規格：
- 產生 一個獨立、完整、可直接打開的單一 HTML 檔
- 保證以下功能 100% 正常可用：
- 3 種燈具（track / downlight / strip），總數 ≤ 16
- 四種場景（S1 Normal / S2 Hero / S3 Soft / S4 Night）
- Minimap / Snapshots / Data Sheet / False Color / CAD / Undo / Redo
- 每次產出的 HTML 檔都 彼此獨立，不相依前一個版本。
因為你（Codex）很難直接理解圖片內容，所以我會用下列格式先幫你整理照片資訊，你要把這段文字當成「照片分析結果」，而不是自己亂猜。
每次我會貼給你一段像這樣的文字（可以中文）：
PHOTO_DESCRIPTION:
- 空間類型: Retail / Bar / Office / Restaurant / Gallery / Mixed
- 主要視角: 從入口往內看 / 從吧台看向座位區 / 從長桌一端往另一端看...
- 平面結構: 長型空間 / 方形 / L 型 / 有一個中島 / 左側是吧台右側是座位...
- 重要物件與區域:
- 中央有一張 3m 長的餐桌
- 右側整面是展示牆，掛了三幅畫
- 左側是吧台，後方是酒瓶牆
- 照片給人的亮度感覺: 偏暗 / 中等 / 很亮
- 照片給人的色溫感覺: 很暖 (約 2700K) / 中性 (3000–3500K) / 偏冷 (4000K+)
- Hero 物件: 例如 中央餐桌 + 右側畫作牆
- 我希望的燈光重點: 例如
- 桌面要很明顯，背景不要太亮
- Logo 牆要很亮，走道一般即可
你（Codex）要把這段文字解析成一個 photoAnalysis 物件（可以 JS 物件或註解），用來驅動幾何與燈光配置。
2. 三種燈具 & 16 盞限制（不變）
2.1 燈具種類
只允許：
track（軌道燈）
downlight（崁燈）
strip（LED 燈帶 / 間接光）
2.2 數量限制
STATE.fixtures.length <= 16
若需要更多光源，只能透過 baked light 不進入 UI 控制。
2.3 光學 / 機械規格（不變）
track
beam：6–55°
shape：'spot' | 'oval'
ovalSpin：0–180°
pan：-180–180°
tilt：0–90°
lumens：0–6000
cct：2000–6500K
downlight
beam：6–55°（UI 同，內部可 clamp）
shape：'spot' | 'oval'
tilt：-20–+20°
spin：0–360°
lumens：0–4000
cct：2000–6500K
strip
intensity：0–100%
cct：2000–6500K
3. 三層燈光與四場景（不變）
3.1 Layer
Layer A：Ambient / strip
Layer B：Task / downlight
Layer C：Accent / track
3.2 四場景 Archetypes
同 v2.1：
S1：Normal / Operation
S2：Hero / Focus / Event
S3：Soft / Intimate
S4：Night / Clean / Security
你要依 PHOTO_DESCRIPTION 判斷具體名稱，但邏輯不變。
4. Desktop UI 骨架（不變）
所有 HTML 必須包含：
#canvas-container
Top bar（品牌 + Lux + Undo/Redo）
Top-center Scenario bar（四顆按鈕）
#minimap-container
右側 #control-panel（含 Scenes / Fixtures / Light Engine / Environment / Data）
下方 #dock 工具列（Camera / CAD / False Color / Data / Snapshot / Reset）
風格維持 Apple / Glassmorphism，一樣可以沿用你最穩定那一版的 CSS。
5. 資料結構 & 函式（不變）
使用前一版 v2.1 的 STATE 結構與必須函式清單：
STATE.fixtures[] with type/zone/params
STATE.coveInt, STATE.coveCCT
init(), applyScenario(), saveSnapshot(), restoreSnapshot(),
selLight(), selGroup(), updParam(), updEnv(), drawMinimap(),
toggleCAD(), toggleFalseColor(), toggleDataView(), undo(), redo()
這些 一律不得刪除，只能在「安全區域（Safe Zones）」修改場景數值與燈具配置。
6. Photo → App 流程（改為「文字輔助」版）
6.1 Step 0 – 解析 PHOTO_DESCRIPTION → photoAnalysis
你必須讀取我給的 PHOTO_DESCRIPTION 文字，生成一個結構類似：
js
複製程式碼
const photoAnalysis = {
spaceType: 'retail' | 'bar' | 'office' | 'restaurant' | 'gallery' | 'mixed' | 'generic',
layout: 'long' | 'square' | 'L' | 'with_island' | 'with_bar_left' | 'with_wall_right' | ...,
zones: [
{ id: 'center', type: 'table', importance: 'hero' },
{ id: 'right-wall', type: 'display_wall', importance: 'high' },
{ id: 'left-side', type: 'secondary', importance: 'medium' },
{ id: 'corridor', type: 'circulation', importance: 'low' }
],
brightness: 'dark' | 'medium' | 'bright',
cctFeeling: 'warm' | 'neutral' | 'cool',
heroTargets: ['center', 'right-wall'],
userIntent: '桌面很亮、背景柔和' // 可存在註解中
};
你可以在 JS 裡以註解方式寫出這段分析，方便閱讀。
6.2 Step 1 – 選擇模板 & 幾何
根據 photoAnalysis.spaceType 選擇模板：
retail / gallery → Retail/Gallery 模板
bar → Bar 模板
restaurant → Restaurant 模板
office / hq → Office/HQ 模板
其他 → Generic Production 模板
buildRoomGeometryFromTemplate(photoAnalysis) 要：
根據 layout 做簡單幾何（房間、牆、桌、吧台…）
為每個 zones[i] 給 3D 座標（中心點）。
6.3 Step 2 – 建立 fixtures（≤16 盞）
buildInitialFixturesFromTemplate(photoAnalysis) 要：
根據 spaceType 決定大致配比（track vs downlight vs strip）。
依 zones 的 importance 決定哪裡放 track / downlight：
importance: 'hero' → 至少 1–2 盞 track
display_wall → 連續的 track 沿牆
table → downlight + 少量 track
強制檢查：fixtures.length <= 16。
每盞燈自動 aim 到某個 zone 的 center（或 zone 內的特定點）。
6.4 Step 3 – 從 brightness / cctFeeling 推出 S1
根據：
brightness:
dark → S1 lumens 整體提高
bright → S1 lumens 稍降
cctFeeling：
warm → S1 CCT ~ 2700–3000K
neutral → 3000–3500K
cool → 4000–5000K
S1 = 照片給人的「現在」感覺。
S2 / S3 / S4 在此基礎上做對比與層次變化。
6.5 Step 4 – 定義四個場景與按鈕文字
建立：
js
複製程式碼
const SCENES = { s1: {...}, s2: {...}, s3: {...}, s4: {...} };
S1 = Normal / Operation（貼近照片）
S2 = Hero / Focus（Hero zones 增亮、收窄 beam、可能色溫略冷）
S3 = Soft / Intimate（全場變暗、strip 增加、色溫變暖）
S4 = Night / Clean / Security（依 spaceType 決定是打掃模式還是 security）
Top-center 按鈕文字要依 spaceType 對應，例如：
Retail: Welcome / Focus / Soft / Night
Bar: Lounge / Party / Intimate / Clean
Restaurant: Lunch / Chef's Table / Dinner / After Hours
Office: Workday / Event / Evening / Night
7. Self-Test（自我檢查 – 確保功能沒壞）
在 startApp() 執行完 UI 綁定後，要跑一個 selfTest()：
檢查：
DOM：
#canvas-container, #top-bar, #scenario-bar, #minimap-container, #control-panel, #dock 是否存在。
函式：
applyScenario, saveSnapshot, restoreSnapshot, selLight, selGroup, drawMinimap, toggleCAD, toggleFalseColor, toggleDataView, undo, redo 是否存在且為 function。
fixtures：
STATE.fixtures 為 array，長度 ≤ 16。
每個 fixture 具備必需欄位（type / params.lumens / params.cct / params.beam / params.shape）。
若失敗：
在畫面右上顯示紅色 badge：「Self-Test Failed」。
在 console.log 清楚指出失敗項目。
這樣至少可以在你打開 HTML 的第一秒就知道「功能是不是完整」。
8. 給 Codex 的最終指令範本
使用時，你可以這樣對 Codex 說（這整段當成 prompt）：
text
複製程式碼
你是一個專門替 ACOfusion 建置「互動室內燈光模擬 APP」的程式碼引擎。
以下是 ACOfusion Interactive Lighting Lab – Photo-to-App Spec – Desktop v2.2。
（此處貼上整份 v2.2 規格）
我現在給你一段 PHOTO_DESCRIPTION，請你依照這份 v2.2 規格：
1. 解析 PHOTO_DESCRIPTION → photoAnalysis。
2. 選擇適合的空間模板與幾何。
3. 配置最多 16 盞燈（只用 track / downlight / strip）。
4. 建立三層燈光與四個場景（S1–S4）。
5. 複製你最穩定的一版核心 engine，保留所有功能：Minimap / Snapshots / Data Sheet / False Color / CAD / Undo / Redo。
6. 產出一個完整的單一 HTML 檔案（包含 <html>、<head>、<style>、<body>、<script>），我可以直接存成 .html 並在瀏覽器打開使用。
7. 啟動時執行 selfTest()，若有錯誤請在畫面顯示紅色警示並在 console.log 出詳細訊息。
PHOTO_DESCRIPTION:
（這裡換成你實際這張照片的描述）