노래를 찾을 수 없습니다.
;
const updateSong = (patch) => {
setAlbum(prev => ({
...prev,
songs: prev.songs.map(s => {
if (s.id !== songId) return s;
const nextPatch = typeof patch === "function" ? patch(s) : patch;
return { ...s, ...nextPatch };
}),
}));
};
useEffect(() => {
const nextStep = getDefaultCreatorStep(song);
if (nextStep !== step) {
setStep(nextStep);
}
}, [song.id, song.workflowStep]);
useEffect(() => {
if (song.workflowStep !== step) {
updateSong({ workflowStep: step });
}
}, [song.id]);
const goToStep = (nextStep) => {
setStep(nextStep);
if (song.workflowStep !== nextStep) {
updateSong({ workflowStep: nextStep });
}
};
const finalizeSong = () => {
updateSong({
status: "ready",
workflowStep: "video-play",
completedAt: new Date().toISOString(),
});
setStep("video-play");
window.toast("노래를 완결 상태로 표시했습니다.");
};
const persistSong = async ({ download = false } = {}) => {
if (!SongfilmSongStorage) {
window.toast("song storage helper가 로드되지 않았습니다");
return;
}
setSaving(true);
try {
const { patch, errors } = await SongfilmSongStorage.persistSongState(song, { step });
const mergedSong = {
...song,
...patch,
scenes: patch.scenes || song.scenes,
};
updateSong(patch);
if (download) {
const filename = await SongfilmSongStorage.downloadSongSnapshot(mergedSong);
if (errors.length) {
window.toast(`저장 후 다운로드 완료 · ${filename} · 경고 ${errors.length}건`);
} else {
window.toast(`"${filename}" 다운로드 준비 완료`);
}
return;
}
if (errors.length) {
window.toast(`저장 완료 · 경고 ${errors.length}건`);
} else {
window.toast("현재 단계 저장 완료");
}
} catch (error) {
window.toast(`저장 실패: ${error.message || error}`);
} finally {
setSaving(false);
}
};
const stepIdx = CREATOR_STEPS.findIndex(s => s.id === step);
const canAdvance = stepIdx < CREATOR_STEPS.length - 1;
const canGoBack = stepIdx > 0;
return (
{/* Stepper */}
{CREATOR_STEPS.map((s, i) => (
{ if (i < stepIdx) goToStep(s.id); }}
>
{i+1}
{s.label}
))}
{song.title || "제목 없음"}
·
{song.filename}
{/* Body */}
{step === "upload" &&
goToStep("transcribe")}/>}
{step === "transcribe" && goToStep("scenes")} onOpenLyricEditor={onOpenLyricEditor}/>}
{step === "scenes" && }
{step === "preview" && }
{step === "export" && }
{step === "video-play" && }
{/* Footer */}
{canGoBack && (
)}
{step === "export" && song.exportState?.status === "done" && (
)}
{canAdvance && step !== "export" && (
)}
);
}
// ─── Step 1: Upload ────────────────────────────────────
function UploadStep({ song, updateSong, onDone }) {
const { Icon, Waveform, fmtTime, SongfilmSongStorage } = window;
const [dragging, setDragging] = useState(false);
const inputRef = useRef();
const restoreRef = useRef();
const audioRef = useRef();
const [playing, setPlaying] = useState(false);
const [currentTime, setCurrentTime] = useState(0);
const { audioUrl, setSongAudioUrl, clearSongAudioUrl } = useSongAudioSource(song);
const titleFromFilename = (name) =>
name
.replace(/\.[^.]+$/, "") // 확장자 제거
.replace(/^\d+[._\- ]+/, "") // 앞 트랙 번호 제거 (예: 01_, 1. 등)
.replace(/_/g, " ") // 언더스코어 → 공백
.trim();
const handleFile = (f) => {
if (!f) return;
const sizeMB = (f.size / (1024*1024)).toFixed(1);
const title = titleFromFilename(f.name);
// revoke previous URL for this song
clearSongAudioUrl();
const url = URL.createObjectURL(f);
setSongAudioUrl(url);
// 서버 업로드 시도 → 실패 시 IndexedDB 폴백
function uploadAudio() {
const broker = window.SongfilmAIBroker;
const fallbackToIndexedDB = (err) => {
if (err) console.warn("[handleFile] 서버 업로드 실패, IndexedDB로 폴백:", err?.message || err);
SongfilmSongStorage?.persistAudioFile(song.id, f)
.then((audioPatch) => updateSong({ ...audioPatch, audioServerUrl: "" }))
.catch((e) => window.toast(`오디오 저장 실패: ${e.message || e}`));
};
if (broker) {
broker.saveAudioFile({ blob: f, filename: f.name })
.then((result) => {
if (result?.url) {
updateSong({
audioServerUrl: window.SongfilmApiConfig?.getMediaFilename?.(result.filename || result.url) || result.filename || result.url,
audioStorageKey: "",
audioPersistedAt: "",
audioMimeType: f.type || "audio/mpeg",
audioByteLength: f.size || 0,
});
} else {
fallbackToIndexedDB(null);
}
})
.catch(fallbackToIndexedDB);
} else {
fallbackToIndexedDB(null);
}
}
const basePatch = {
filename: f.name,
title,
size: `${sizeMB} MB`,
status: "uploaded",
cues: [],
scenes: [],
lyricTimeline: null,
transcribeMode: "",
transcribeWorkflow: null,
storyId: "",
workflowStep: "upload",
audioServerUrl: "",
audioStorageKey: "",
audioPersistedAt: "",
previewSettings: {
fontSize: 36,
subPos: "bottom",
transition: "fade",
},
exportState: {
status: "idle",
progress: 0,
done: false,
},
};
// probe real duration before committing
const probe = new Audio();
probe.src = url;
probe.addEventListener("loadedmetadata", () => {
updateSong({ ...basePatch, duration: probe.duration || 30 });
uploadAudio();
window.toast(`"${title}" 업로드 완료 · ${fmtTime(probe.duration || 0)}`);
});
probe.addEventListener("error", () => {
updateSong({ ...basePatch, duration: 30 });
uploadAudio();
window.toast(`"${title}" 업로드 완료 (메타데이터 읽기 실패)`);
});
};
const handleSnapshotImport = (event) => {
const file = event.target.files?.[0];
if (!file) return;
event.target.value = "";
SongfilmSongStorage.importSongSnapshotFile(file, song.id)
.then((patch) => {
updateSong({
...patch,
workflowStep: patch.workflowStep || "upload",
});
setPlaying(false);
setCurrentTime(0);
window.toast(`"${file.name}" 복구 완료`);
})
.catch((error) => {
window.toast(`복구 실패: ${error.message || error}`);
});
};
useEffect(() => {
const a = audioRef.current;
if (!a) return;
const onTime = () => setCurrentTime(a.currentTime);
const onEnd = () => { setPlaying(false); setCurrentTime(0); };
a.addEventListener("timeupdate", onTime);
a.addEventListener("ended", onEnd);
return () => {
a.removeEventListener("timeupdate", onTime);
a.removeEventListener("ended", onEnd);
};
}, [audioUrl]);
const togglePlay = () => {
const a = audioRef.current;
if (!a) return;
if (playing) {
a.pause();
setPlaying(false);
} else {
a.play()
.then(() => setPlaying(true))
.catch(() => window.toast("재생할 수 없습니다"));
}
};
const seek = (e) => {
const a = audioRef.current;
if (!a || !song.duration) return;
const rect = e.currentTarget.getBoundingClientRect();
const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
a.currentTime = pct * song.duration;
setCurrentTime(a.currentTime);
};
const removeFile = () => {
const a = audioRef.current;
if (a) a.pause();
clearSongAudioUrl();
SongfilmSongStorage?.clearSongAudio(song.id).catch(() => {});
setPlaying(false);
setCurrentTime(0);
updateSong({
filename: "",
size: "",
status: "empty",
cues: [],
scenes: [],
lyricTimeline: null,
transcribeMode: "",
transcribeWorkflow: null,
storyId: "",
workflowStep: "upload",
audioStorageKey: "",
audioPersistedAt: "",
audioByteLength: 0,
previewSettings: {
fontSize: 36,
subPos: "bottom",
transition: "fade",
},
exportState: {
status: "idle",
progress: 0,
done: false,
},
});
};
const hasFile = song.filename;
const progress = song.duration ? currentTime / song.duration : 0;
return (
노래를 업로드하세요
mp3 파일을 올리면 가사를 추출하고 장면을 디자인해 비디오를 만듭니다.
{!hasFile ? (
) : (
<>
{audioUrl &&
}
{song.title || song.filename.replace(/\.[^.]+$/, "")}
{song.filename} · {song.size} ·{" "}
{audioUrl
? <>{fmtTime(currentTime)} / {fmtTime(song.duration)}
: fmtTime(song.duration)}
{audioUrl ? (
업로드된 파일을 재생해서 확인해보세요. 새로고침 후에도 복구 가능한 상태로 저장됩니다.
) : (
* 샘플 노래이거나 새로고침 이후에는 재생할 수 없습니다. 재생하려면 파일을 다시 업로드하세요.
)}
)}
);
}
// ─── Step 2: Transcribe ────────────────────────────────
function TranscribeStep({ song, updateSong, onDone, onOpenLyricEditor }) {
const { Icon, fmtTime, fmtTimeMs, SongfilmSongStorage } = window;
const hasResult = !!(song.lyricTimeline || (song.cues && song.cues.length > 0));
const hasReferenceLyrics = !!(song.referenceLyricsText && song.referenceLyricsText.trim());
const referenceLyricsLineCount = hasReferenceLyrics
? song.referenceLyricsText.trim().split(/\n+/).length
: 0;
// lyricTimeline만 있는 경우 cues 파생 (표시용)
const displayCues = song.cues && song.cues.length > 0
? song.cues
: (song.lyricTimeline ? window.SongfilmAPI.flattenTimelineToCues(song.lyricTimeline) : []);
const [running, setRunning] = useState(false);
const [logs, setLogs] = useState([]);
const [progress, setProgress] = useState(hasResult ? 100 : 0);
const [workflow, setWorkflow] = useState(() => deriveTranscribeWorkflow(song));
// Audio playback
const audioRef = useRef();
const lyricsListRef = useRef();
const [playing, setPlaying] = useState(false);
const [currentTime, setCurrentTime] = useState(0);
const { audioUrl } = useSongAudioSource(song);
useEffect(() => {
setWorkflow(deriveTranscribeWorkflow(song));
}, [song.id, song.transcribeWorkflow, song.transcribeMode, song.referenceLyricsText, song.lyricTimeline, song.cues]);
useEffect(() => {
const a = audioRef.current;
if (!a) return;
const onTime = () => setCurrentTime(a.currentTime);
const onEnd = () => { setPlaying(false); setCurrentTime(0); };
a.addEventListener("timeupdate", onTime);
a.addEventListener("ended", onEnd);
return () => {
a.removeEventListener("timeupdate", onTime);
a.removeEventListener("ended", onEnd);
};
}, [audioUrl, hasResult]);
// displayCues 변경 시 콘솔에 현재 자막 목록 출력
useEffect(() => {
if (!displayCues.length) return;
console.group(`[Songfilm] 자막 목록 업데이트 — "${song.title || song.filename}"`);
console.log('총 줄 수:', displayCues.length);
console.log('총 길이:', window.fmtTime(displayCues[displayCues.length - 1].end));
console.table(displayCues.map((c, i) => ({
'#': i + 1,
'시작(s)': c.start,
'끝(s)': c.end,
'길이(s)': (c.end - c.start).toFixed(2),
'가사': c.text,
})));
console.groupEnd();
}, [displayCues]);
// 현재 재생 중인 자막 인덱스 (currentTime으로 계산)
const activeCueIdx = hasResult
? displayCues.findIndex(c => currentTime >= c.start && currentTime < c.end)
: -1;
// 활성 자막이 바뀌면 자동 스크롤
useEffect(() => {
if (activeCueIdx < 0 || !lyricsListRef.current) return;
const rows = lyricsListRef.current.querySelectorAll(".lyric-row");
rows[activeCueIdx]?.scrollIntoView({ block: "nearest", behavior: "smooth" });
}, [activeCueIdx]);
const handleCueClick = (cue, idx) => {
if (!audioUrl) {
window.toast("업로드 단계에서 파일을 업로드하면 여기서 재생할 수 있습니다");
return;
}
const a = audioRef.current;
if (!a) return;
if (playing && activeCueIdx === idx) {
// 같은 자막 다시 클릭 → 정지
a.pause();
setPlaying(false);
} else {
// 해당 자막 시작 위치로 이동 후 재생
a.currentTime = cue.start;
a.play().then(() => setPlaying(true)).catch(() => window.toast("재생할 수 없습니다"));
}
};
// ── 내보내기 / 불러오기 ──────────────────────────────────
const importFileRef = useRef();
const lyricsFileRef = useRef();
const sanitizeLyricsText = (text) => String(text || '').replace(/\ufeff/g, '').replace(/\r\n/g, '\n');
const normalizeLyricsText = (text) => sanitizeLyricsText(text).trim();
const referenceLyricsLabel = song.referenceLyricsName || '직접 입력';
const setReferenceLyrics = (text, sourceName) => {
const sanitized = sanitizeLyricsText(text);
const trimmed = sanitized.trim();
updateSong({
referenceLyricsText: sanitized,
referenceLyricsName: trimmed ? (sourceName || song.referenceLyricsName || '직접 입력') : '',
});
};
const downloadTimeline = () => {
const tl = song.lyricTimeline;
if (!tl) { window.toast('내보낼 lyric_timeline이 없습니다'); return; }
const filename = `${(song.title || 'song').replace(/[^\w가-힣\- ]/g, '_')}.lyric-timeline.json`;
const blob = new Blob([JSON.stringify(tl, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = filename; a.click();
URL.revokeObjectURL(url);
window.toast(`"${filename}" 저장됨`);
};
const handleImport = (e) => {
const file = e.target.files?.[0];
if (!file) return;
e.target.value = ''; // 같은 파일 재선택 허용
const reader = new FileReader();
reader.onload = (ev) => {
try {
const parsed = JSON.parse(ev.target.result);
if (parsed.schema !== 'lyric-timeline/v1' || !parsed.root) {
window.toast('올바른 lyric-timeline/v1 파일이 아닙니다'); return;
}
const cues = window.SongfilmAPI.flattenTimelineToCues(parsed);
const scenes = window.buildScenes(cues);
updateSong({
lyricTimeline: parsed,
cues,
scenes,
status: 'transcribed',
paletteName: song.paletteName || 'midnight-violet',
transcribeMode: 'imported_json',
transcribeWorkflow: buildTranscribeWorkflowState({
mode: 'imported_json',
status: 'completed',
currentStageId: 'import',
detail: '저장된 lyric_timeline_json을 불러왔습니다.',
hasReferenceLyrics,
}),
workflowStep: 'transcribe',
storyId: SongfilmSongStorage?.buildStoryId({ ...song, lyricTimeline: parsed }) || song.storyId || '',
});
window.toast(`"${file.name}" 불러오기 완료 · ${cues.length}줄`);
} catch (err) {
window.toast(`JSON 파싱 오류: ${err.message}`);
}
};
reader.readAsText(file);
};
const handleLyricsUpload = (e) => {
const file = e.target.files?.[0];
if (!file) return;
e.target.value = '';
const reader = new FileReader();
reader.onload = (ev) => {
try {
const text = normalizeLyricsText(String(ev.target?.result || ''));
if (!text) {
window.toast('가사 text 파일이 비어 있습니다');
return;
}
setReferenceLyrics(text, file.name);
window.toast(`"${file.name}" 가사 text 업로드 완료 · ${text.split(/\n+/).length}줄`);
} catch (err) {
window.toast(`가사 text 읽기 오류: ${err.message}`);
}
};
reader.onerror = () => window.toast('가사 text 파일을 읽을 수 없습니다');
reader.readAsText(file);
};
const clearLyricsUpload = () => {
setReferenceLyrics('', '');
window.toast('가사 text 입력 내용을 제거했습니다');
};
const logViewerRef = useRef();
const addLog = (tag, msg) => {
const ts = new Date();
const tsStr = `${ts.getMinutes().toString().padStart(2,"0")}:${ts.getSeconds().toString().padStart(2,"0")}.${Math.floor(ts.getMilliseconds()/10).toString().padStart(2,"0")}`;
console.log(`[Songfilm ASR] [${tag.toUpperCase()}] ${msg}`);
setLogs(prev => {
const next = [...prev, { tag, msg, ts: tsStr }];
return next;
});
};
// 새 로그 줄이 추가되면 log-viewer 자동 스크롤
useEffect(() => {
if (logViewerRef.current) {
logViewerRef.current.scrollTop = logViewerRef.current.scrollHeight;
}
}, [logs]);
const start = async ({ useReferenceLyrics = false } = {}) => {
const mode = useReferenceLyrics ? 'reference_lyrics' : 'asr';
let latestStageId = useReferenceLyrics ? 'lyrics' : 'transcribe';
setRunning(true);
setLogs([]);
setProgress(0);
setPlaying(false);
setCurrentTime(0);
try {
if (useReferenceLyrics && !hasReferenceLyrics) {
throw new Error('먼저 가사 text를 입력하거나 업로드해주세요.');
}
const blobUrl = (window.songAudioUrls || new Map()).get(song.id);
if (!blobUrl) throw new Error('업로드된 파일이 없습니다. 먼저 업로드 단계에서 파일을 올려주세요.');
const blobRes = await fetch(blobUrl);
const blob = await blobRes.blob();
const file = new File([blob], song.filename || 'audio.mp3', { type: blob.type || 'audio/mpeg' });
const startedWorkflow = buildTranscribeWorkflowState({
mode,
status: 'running',
currentStageId: latestStageId,
detail: useReferenceLyrics
? '가사가 이미 있으므로 ASR를 건너뛰고 정렬 준비를 시작합니다.'
: '1단계 ASR 가사 추출을 시작합니다.',
hasReferenceLyrics: useReferenceLyrics,
});
setWorkflow(startedWorkflow);
updateSong({
transcribeWorkflow: startedWorkflow,
});
addLog('info', useReferenceLyrics
? '2단계 워크플로우 중 2단계만 실행합니다. 입력된 가사로 qwen-forced-aligner 정렬을 시작합니다.'
: '2단계 워크플로우를 시작합니다. 1단계 ASR 가사 추출 후 2단계 forced aligner 정렬을 진행합니다.');
const { lyricTimeline, cues } = await window.SongfilmAPI.transcribe(file, {
onLog: addLog,
onProgress: setProgress,
onStageChange: ({ stageId, detail, status }) => {
latestStageId = stageId || latestStageId;
setWorkflow(buildTranscribeWorkflowState({
mode,
status: status || 'running',
currentStageId: latestStageId,
detail,
hasReferenceLyrics: useReferenceLyrics,
}));
},
referenceLyrics: useReferenceLyrics ? song.referenceLyricsText : null,
title: song.title || file.name.replace(/\.[^.]+$/, ''),
});
const scenes = window.buildScenes(cues);
const completedWorkflow = buildTranscribeWorkflowState({
mode,
status: 'completed',
currentStageId: mode === 'imported_json' ? 'import' : 'align',
detail: useReferenceLyrics
? '입력된 가사에 timestamp 정렬을 완료했습니다.'
: 'ASR 가사 추출과 timestamp 정렬을 모두 완료했습니다.',
hasReferenceLyrics: useReferenceLyrics,
});
setRunning(false);
setProgress(100);
setWorkflow(completedWorkflow);
updateSong({
lyricTimeline,
cues,
scenes,
status: 'transcribed',
paletteName: song.paletteName || 'midnight-violet',
transcribeMode: mode,
transcribeWorkflow: completedWorkflow,
workflowStep: 'transcribe',
storyId: SongfilmSongStorage?.buildStoryId({ ...song, lyricTimeline }) || song.storyId || '',
});
window.toast(`${useReferenceLyrics ? '가사 text 기준 forced aligner' : 'ASR + forced aligner'} 자막 추출 완료 · ${cues.length}줄`);
} catch (err) {
const failedWorkflow = buildTranscribeWorkflowState({
mode,
status: 'failed',
currentStageId: latestStageId,
detail: err.message,
hasReferenceLyrics: useReferenceLyrics,
});
setWorkflow(failedWorkflow);
updateSong({ transcribeWorkflow: failedWorkflow });
addLog('err', `오류: ${err.message}`);
setRunning(false);
window.toast(`오류: ${err.message}`);
}
};
return (
{audioUrl &&
}
{/* 숨겨진 파일 입력 — JSON 불러오기용 */}
가사 & 자막 추출
이 화면은 항상 2단계로 관리됩니다. 가사가 없으면 `qwen-asr-vllm -> qwen-forced-aligner`, 가사가 이미 있으면 `가사 확인 -> qwen-forced-aligner` 흐름으로 바로 timestamp를 붙입니다.
{workflow.steps.map((step, index) => {
const isActive = step.status === 'active';
const isDone = step.status === 'completed';
const isError = step.status === 'error';
return (
{step.label}
{isError ? 'error' : isDone ? 'done' : isActive ? 'active' : `${index + 1}/${workflow.stepCount}`}
{step.description}
);
})}
{workflow.detail}
가사 text 입력
txt/md/lrc 파일 업로드도 가능하고, 여기에 직접 붙여넣거나 수정해도 됩니다.
{hasReferenceLyrics && (
{referenceLyricsLabel}
· {referenceLyricsLineCount}줄
· {song.referenceLyricsText.trim().length}자
)}
{hasReferenceLyrics && (
<>
)}