올바른 시작 페이지를 선택하세요
설정 페이지가 아닌 청중 디스플레이를 복사합니다. Spotify 설정은 별도로 존재합니다. spotify-overlay.html; AI 오버레이 빌더는 다음을 사용합니다. aiprompt.html 구축하고 aioverlay.html 을 표시합니다. AI 이벤트 오버레이는 저장된 구성과 비공개 표시 URL이 포함된 또 다른 기능입니다.
파일 구조를 다운로드하여 보관하세요.
- 소스 ZIP 다운로드 그리고 그것을 추출한다. 이 가이드는 베타 소스를 사용합니다. 한 번 다운로드한 파일을 함께 보관하세요.
- 복사
spotify-overlay.html대상:my-music.html원본 옆에. 다른 페이지나 테마를 선택하는 경우 해당 파일의 원본 폴더에 복사본을 보관하세요. - 복사한 HTML과 참조된 CSS/JS를 편집기나 AI 도구에서 엽니다. 제공된 아트웍/글꼴을 동일한 프로젝트에 추가하고 상대 경로를 사용하십시오. CSS 재정의로 시작하세요. 생성된 마크업을 변경할 때 렌더러를 포함합니다.
다음 파일은 디자인과 동작을 찾는 데 도움이 됩니다. 이는 전체 종속성 번들이 아닌 읽기 목록입니다. 이미지, 글꼴, 스크립트 및 모든 데이터 파일을 포함하여 추출된 폴더를 그대로 유지하세요.
| 파일 | 그것이 중요한 이유 |
|---|---|
spotify-overlay.html | 현재 재생 중인 청중이 표시됩니다. |
cohost-overlay.html | 공동 진행자 아바타 및 답변 프레젠테이션. |
bot.html | 봇 메시지 출력 페이지. |
chatbot.html | 또 다른 봇 출력; 기존에 생성된 링크와 수신기를 따릅니다. |
aioverlay.html | AI Overlay Builder 출력이 저장되었습니다. |
aievent-overlay.html | AI 이벤트 오버레이 표시. |
shared/aiEventOverlay/render.js | AI 템플릿 렌더러 및 해당 필드/샌드박스 규칙. |
shared/aiEventOverlay/overlay.css | AI 이벤트 오버레이 디스플레이 스타일. |
복사본을 연결하고 OBS에서 엽니다.
SSN를 시작하고 원래 생성된 오버레이 URL이 먼저 작동하도록 만듭니다. 는 session= 값은 해당 SSN 세션에 연결됩니다. 이는 귀하의 채널 이름이나 이 파일의 이름이 아닙니다. SSN, 관련 기능 및 해당 데이터 소스를 계속 실행하세요.
- 편집한 HTML 파일을 Chrome이나 Edge로 드래그하세요. 주소 표시줄에서 주소를 복사하세요. 그것은로 시작한다
file:///. - 다음의 모든 항목을 복사합니다.
?작업 중인 SSN 오버레이 링크에서 계속해서 해당 파일 주소 끝에 추가하세요. 세션, 비밀번호 등을 포함한 모든 설정을 유지합니다.#결말. - 브라우저에서 결과를 연 다음 OBS 브라우저 소스를 설정합니다. URL 같은 주소로 로컬 파일 선택 해제되었습니다. 원본 치수를 의도한 디자인과 일치시킵니다.
위의 시작 파일의 경우 로컬 주소는 다음과 같습니다. 실제 링크에는 추가 필수 옵션이 포함될 수 있습니다.
file:///C:/SSN/social_stream-beta/my-music.html?session=YOUR_SESSION컴퓨터에 있는 실제 파일 주소를 사용하세요. OBS는 소스와 함께 저장합니다. 다운로드한 폴더를 같은 곳에 보관하세요. 디자인 변경 사항을 저장한 후 브라우저 소스를 새로 고칩니다. 는 공유 설정 가이드 에는 Mac 예제와 로컬 파일 확인란에 대한 선택적 실행 프로그램이 포함되어 있습니다.
디자인을 바꾸는 곳
음악의 경우 커버 아트 프레임, 트랙/아티스트 타이포그래피, 진행 및 일시 중지/숨겨진 상태를 변경합니다. 기존 SSN 통합에서 재생 승인을 유지합니다. 공동 호스트 출력의 경우 응답 라우팅과 기존 오디오 소스를 유지하면서 아바타 레이아웃, 말풍선, 유휴/대화 상태를 변경합니다.
생성된 AI 이벤트 디자인의 경우 저장된 디자인 프롬프트를 사용하고 비어 있습니다. data-field 에 설명된 요소 AI 이벤트 안내. 렌더러는 텍스트를 로컬로 채우고 생성된 JavaScript를 차단합니다. 그 경계를 유지하세요. 모든 디스플레이 링크를 포함하여 전체 디스플레이 링크를 복사합니다. #aieventauth=... 단편; 세션만으로는 해당 기능이 충분하지 않습니다.
이 AI 프롬프트 복사
AI에게 복사된 소스 파일과 참조 아트워크를 제공합니다. 괄호로 묶인 세부정보를 교체하세요. 프롬프트에 입력 안전 지침을 유지하세요. 이 프롬프트는 소스 파일을 편집하기 위한 것입니다. 생성된 AI 이벤트 템플릿의 경우 해당 기능의 저장된 디자인 프롬프트와 일반 텍스트를 사용하세요. data-field 바인딩; 생성된 템플릿에 스크립트를 추가하지 마십시오.
전체 프롬프트 표시
Customize my-music.html, copied from spotify-overlay.html.
Design: [describe the look or attach a reference].
Colors/fonts/assets: [supply hex colors and local filenames].
OBS canvas and placement: [size and position].
Restyle [chosen music / cohost / AI output] as [design]. Preserve the existing now-playing or reply payload, hide/idle/paused states, and audio ownership. Keep provider keys and setup controls out of the viewer page. For AI Event templates preserve data-field binding and the sandbox: viewer text is data, never a design instruction or generated script.
Read docs/event-reference.html for incoming fields and
docs/overlay-customization-guide.html for local setup and safe rendering.
Keep the existing session/password handling, labels, server routes, query
parameters, URL fragments, and relative asset paths. Use classic scripts
compatible with Chrome 80. Keep executable dependencies packaged locally.
Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.
Make the edited overlay work directly from disk using a file:/// URL,
without requiring a local web server.
Return the edited files, any additional assets, exact local browser/OBS
setup instructions using placeholders, and the specific tests performed.
Do not put my private session link or credentials into a public example.이 오버레이 유형을 테스트해 보세요.
먼저 미리보기 또는 테스트 설정을 사용하세요. 는 테스트 메시지 가이드 SSN를 통해 가상 페이로드를 보내는 방법을 설명합니다. 프로덕션 세션에 제출된 테스트는 기존 자동화를 트리거할 수 있습니다.
- Spotify의 경우 구성된 통합을 통해 재생 및 일시 정지합니다. 긴 트랙 제목, 커버 아트 누락, 노래 없음 상태를 테스트합니다.
- 공동 호스트의 경우 레이아웃에 cohost-overlay.html?미리 보기를 사용한 다음 미리 보기를 제거하고 SSN를 통해 테스트 응답을 생성합니다. 유휴/대화 전환 및 오디오 복제를 확인하세요.
- 빌더의 경우 시뮬레이션 컨트롤을 사용합니다. AI 이벤트의 경우 저장 및 미리보기와 샘플 이벤트 컨트롤을 사용하세요. 이름/ID 및 비공개 조각을 포함하여 OBS에 실제로 저장된 출력 링크를 테스트합니다.
또한 입력 렌더링 확인 변경한 렌더 경로에 대해. 편집 내용을 저장한 후 리허설 사이에 OBS 브라우저 소스를 새로 고치고 표시되는 상호 작용을 반복하세요. 브라우저 미리보기에서는 실시간 캡처 또는 OBS 동작을 설정하지 않습니다.
추가 참고 자료: AI 오버레이 빌더 · AI 공동 진행자 · AI 이벤트 오버레이 · 이벤트 참고 문서 · 로컬 설정 문제 해결.