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，先在普通浏览器中测试。