AI 疊加畫面建構器

產生並測試疊加畫面，再將儲存的輸出載入 OBS。

是什麼

AI 疊加畫面建構器根據提示詞產生 HTML 疊加畫面。建構器本身不是 OBS 中要使用的頁面。請使用 aiprompt.html 進行建構和預覽，然後使用 aioverlay.html 作為輸出頁面。

AI 疊加畫面建構器頁面，包含提示詞框、預覽控制項、事件模擬按鈕、儲存控制項和 HTML 原始碼分頁 — 將疊加畫面放進 OBS 前，先預覽並模擬事件。

1. 在提示詞頁面建構

開啟 aiprompt.html?session=YOUR_SESSION.
描述疊加畫面的功能和外觀。
提示詞應聚焦於版面配置、訊息行為、色彩、動畫時間和需要處理的事件類型。
點擊預覽控制項，模擬聊天、追隨、訂閱、禮物、突襲、贊助和自訂 JSON 事件。
使用清楚的頁面名稱儲存疊加畫面。

2. 將輸出頁面新增至 OBS

儲存後，將輸出頁面新增為 OBS 瀏覽器來源。使用相同的工作階段和已儲存頁面名稱。

https://socialstream.ninja/aioverlay.html?session=YOUR_SESSION&overlay=chat-overlay

如果疊加畫面透明，或只在事件發生時出現，請先使用建構器的模擬按鈕，確認能正常呈現。

3. 需要快速設定時使用範本

如果想快速取得可靠的效果，請從範本開始自訂。需要更具體的效果時，再使用 AI 建構器。

Social Stream Ninja 疊加畫面預覽範例，顯示帶樣式的聊天訊息 — 已知版面配置較適合用範本，自訂實驗較適合用 AI 產生。

常見解決方式

預覽空白： 點擊模擬按鈕並檢查主控台面板。
OBS 畫面空白： 確認儲存的頁面名稱和工作階段與建構器一致。
事件行為不正確： 使用預期收到的精確事件類型測試，不要只測試一般聊天。
產生的程式碼有問題： 使用 Review & polish，或簡化提示詞。
疊加畫面在建構器中正常，但在 OBS 中無法運作： 開啟相同的 aioverlay.html URL，先在一般瀏覽器中測試。