AI 비디오 편집기

사용자 비디오에 모션 그래픽 추가하기

설치된 HyperFrames 스킬 위에 동작하는 워크스페이스 레이어입니다. HTML/타임라인 메커니즘을 위해 hyperframes-core(구성 계약)와 hyperframes-animation(GSAP 규칙)을 로드하며, 가장 가까운 업스트림 라우팅은 talking-head-recut입니다. 이 스킬은 제작자의 하우스 룰을 추가하며, 충돌 시 하우스 룰이 우선합니다.

빠른 경로 (reel-sep30, 3:20 우르두어/영어 릴, Paper Cut에서 검증됨)

1. powershell -NoProfile -ExecutionPolicy Bypass -File tools/new-project.ps1 -Name <n> -Video raw/<file> -Transcribe → Deepgram으로 수 초 내 전사 완료.
2. transcript-words.txt(index:text@start) 덤프 → 읽고 요약하여 중요한 순간 선택.
3. 자막: captions-src.json(로만 힌글리시 청크, 단어 인덱스 기준) → node tools/build-captions.mjs projects/<n>.
4. 스타일 템플릿: kit/templates/paper-cut-vertical.html을 복사하여 index.html로 만들고, 두 data-duration 설정; EXAMPLE 호출을 이 비디오의 순간으로 대체.
5. lint → snapshot --at ...(약 12프레임씩 2회) → 콘택트 시트 확인 → 수정.
6. 사운드: mg-sound의 오프셋 테이블을 참고하여 sfx.json 작성 → node tools/sfx.mjs projects/<n> (렌더링 전에 실행하여 한 번에 사운드 포함).
7. 사용자에게 렌더링 시간을 미리 알린 후(참고: mg-export: 4코어 노트북에서 1080x1920 비디오 1분당 약 25~30분 소요) 한 번 렌더링하여 exports/에 복사.
8. 추후 수정: 오디오만 → sfx.mjs --mix (초 단위, 재렌더링 불필요). 시각적 수정 → 먼저 스냅샷 찍고, 한 번 재렌더링.

금지 사항: 로컬 음성 모델 설치, 중단된 다운로드 재개, 확인용 렌더링(스냅샷 사용), VS Code 플레이어에서 미리보기(AAC 오디오 없음 - VLC 사용).

1. 프로젝트 설정

1. 비디오가 raw/ 폴더에 없더라도 그대로 둡니다. 파일 이름에서 짧은 케밥-케이스 프로젝트 이름을 선택합니다.
2. 워크스페이스 루트에서 다음 실행:

   powershell -NoProfile -ExecutionPolicy Bypass -File tools/new-project.ps1 -Name "<name>" -Video "<path>" -Transcribe
   

   • 전사는 Deepgram(nova-3, 기본 language=multi: 우르두어/힌디어 + 영어 코드 스위칭 처리; 힌디어/우르두어 단어는 데바나가리 문자로 반환될 수 있음 — 힌글리시로 로마자 변환하고 타이밍 유지)을 사용합니다. 사용자 환경 변수 DEEPGRAM_API_KEY가 필요하며, 없으면 사용자에게 직접 powershell -NoProfile -ExecutionPolicy Bypass -File tools/set-deepgram-key.ps1를 실행하도록 요청합니다(채팅에서 절대 실행 금지). 영어 전용 비디오: -Language en. 재실행: powershell -NoProfile -ExecutionPolicy Bypass -File tools/transcribe-deepgram.ps1 -Project projects/<name>.
   • npx hyperframes transcribe를 whisper와 함께 사용하거나 설치하지 마십시오(너무 느리고 시끄러움); Deepgram을 사용하세요.
   • projects/<name>/에 다음 파일들이 생성됩니다: clip.mp4(CFR H.264), audio.mp3, metadata.json, transcript.json, fonts/, sfx/, renders/.
   • 사용자가 특정 순간에 사용할 스크린샷을 제공한 경우 -Screenshots "<folder>"를 추가합니다.
3. 이후부터는 projects/<name>/ 내에서 작업합니다(cd로 이동한 후 npx hyperframes 명령 실행).

2. 비디오 진단 분석

• metadata.json(너비, 높이, fps = r_frame_rate, 길이)과 transcript.json(평면 [{text,start,end}])을 읽습니다.
• 명백한 ASR 오류는 제자리에서 수정하고 타임스탬프는 유지합니다. 음성-텍스트 변환은 약 1초 정도 오차가 있을 수 있으므로, 중요한 순간은 숫자를 신뢰하지 말고 ffmpeg -ss <t-0.5> -t 2 -i clip.mp4 ... 또는 스냅샷으로 확인하세요.
• 길거나 혼합 언어 전사: 인덱싱된 단어 목록(index:text@start, 한 줄에 한 문장)을 transcript-words.txt로 덤프하여 읽습니다.

자막 (사용자가 원할 때)

• captions-src.json 작성: [[첫단어인덱스, 마지막단어인덱스, "자막 텍스트", ["키","단어"]], ...], 청크당 3~7단어, 모든 단어 포함. 우르두어/힌디어/힌글리시 음성 → 텍스트를 로만 힌글리시(예: "ke 9 maah guzar gaye hain")로 작성하고, 영어 단어는 그대로 유지하며, 오인을 문맥으로 수정합니다("नौ मां" → 9 maah, "New York" → New Year).
• 빌드: node tools/build-captions.mjs projects/<name> → captions.js(window.CAPTIONS = [{s,e,text,key}]), 포함되지 않은 단어에 대해 경고. <script src="captions.js">로 로드합니다.
• 얼굴 위치 찾기: 컴포지션이 있기 전에는 npx hyperframes snapshot을 사용할 수 없으므로 프레임을 추출합니다: ffmpeg -nostdin -v error -ss <t> -i clip.mp4 -frames:v 1 renders/_probe_<t>.png를 3~4개 지점에서 실행하여 확인합니다.
• 한 문단 요약 작성: 비디오의 내용과 중요한 3~8개 순간(숫자, 목록, 전/후, 주요 주장, CTA)을 적습니다.
• 사용자가 스타일을 지정하지 않은 경우 물어봅니다(mg-styles 참조). 기본값: 깔끔한 흰색 프로스트 카드(Liquid Glass).

3. 계획 (비디오가 30초를 넘거나 요청이 모호한 경우 사용자에게 보여줍니다)

각 순간에 대해: 트리거 단어와 정확한 start, 그래픽 유형, 내용, 영역, 종료 시간. 그래픽 유형은 말하는 내용에 따라 결정:

• 숫자 → 카운트업 · 목록 → 체크리스트 체크 · 전/후 → 비교 · 핵심 대사 → 펀치인 또는 큰 글씨
• 스크린샷/증거 → 순차적 팝업(PROMPT 12) · 새 주제 → 리프레임(비디오가 카드 안으로 축소됨) 동사와 스타일 어휘는 mg-styles 스킬에 있습니다.

4. 하우스 룰 (불가침)

1. 비디오를 정확히 그대로 유지: 동일한 크기, fps, 오디오, 컷. 컴포지션 data-width/height = 비디오 크기, fps = 비디오 fps, 루트 data-duration = 비디오 길이(metadata.json에 맞춤). 비디오는 <video id="a-roll" class="clip" src="clip.mp4" data-has-audio="true" data-start="0" ...> 형식으로 muted나 crossorigin 없이 사용.
2. 모든 그래픽은 정확한 단어 시작 시점에 시작합니다(전사에서 해당 단어의 start).
3. 비디오 전체에 하나의 스타일을 적용합니다.
4. 처음 3초 내에는 아무것도 넣지 않습니다 — 이는 후크입니다.
5. 그래픽은 얼굴을 피하고, 하단 1/3(자막 영역)을 피하며, 가로 중앙 80% 이내(좌우 10% 마진)에 배치합니다.
6. 폰트는 프로젝트의 fonts/ 폴더에서만 @font-face로 사용(Google Fonts URL 절대 사용 금지); GSAP는 <script src="vendor/gsap.min.js">로 로드합니다.
7. 프로스트 글래스는 뒤에 무언가가 있어야 효과가 있음; 푸티지 위에서는 잘 작동하지만 투명 내보내기에는 솔리드 카드를 사용합니다.

5. 빌드, 확인, 검토

1. index.html 작성(독립형 컴포지션, 하나의 일시정지된 GSAP 타임라인이 window.__timelines["<id>"]에 등록됨). Paper Cut 스타일: kit/templates/paper-cut-vertical.html에서 시작. 저해상도 폰 푸티지(예: 480x864 WhatsApp): 여전히 1080x1920 캔버스에서 제작하여 그래픽/자막이 선명하게 유지되도록 하고, 비디오는 아래에서 확대되어 표시됩니다.
2. npx hyperframes lint 후 npx hyperframes check — 모든 오류 수정.
3. 각 그래픽의 중간 지점에서 npx hyperframes snapshot --at <t1>,<t2>,... 실행 후 PNG를 확인 — 얼굴/자막 겹침과 텍스트 잘림 확인.
4. 드래프트 렌더링: npx hyperframes render . -o renders/with-cards.mp4 (렌더링은 일반 PC에서 느림; 스냅샷으로 반복하고, 프레임이 올바르게 보일 때만 렌더링).
5. 승인된 최종본을 exports/<name>.mp4로 복사.

6. 후속 작업 (같은 세션)

• 한 곳 수정(PROMPT 12): "내가 <구문>을 말하면 <것>을 보여줘". 전사에서 구문을 찾아 해당 순간만 변경하고, 나머지는 동일하게 유지한 후 같은 파일로 재렌더링.
• 사운드: mg-sound 스킬 사용. 내보내기 변형/투명: mg-export 스킬.
• 일반 언어로 된 수정(표면, 색상, 타이포그래피, 모션, 타이밍, 레이아웃) → 해당 부분만 편집하고, 나머지는 동일하게 유지한 후 재렌더링.

기본 작업을 먼저 수행한 후, 한 번에 한 곳씩 수정합니다. 한 번에 모든 것을 처리하려 하지 마십시오.