From 31b7720af9526117cc914c2ec29c10c3478a27a5 Mon Sep 17 00:00:00 2001 From: "hehihoho3@gmail.com" Date: Thu, 25 Jun 2026 18:12:26 +0900 Subject: [PATCH] =?UTF-8?q?feat(rework):=20'=EC=A0=84=EC=82=AC'=20?= =?UTF-8?q?=E2=86=92=20'=EC=9E=90=EB=A7=89=20=EC=B6=94=EC=B6=9C(=EC=9D=8C?= =?UTF-8?q?=EC=84=B1)'=20=EC=9A=A9=EC=96=B4=20=EB=B3=80=EA=B2=BD=20+=20?= =?UTF-8?q?=EC=99=BC=EC=AA=BD=20=EC=98=81=EC=83=81=20=ED=8C=A8=EB=84=90=20?= =?UTF-8?q?sticky?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 이해하기 쉽게 모든 '전사' 문구를 '자막 추출'로 변경(메인 버튼은 '자막 추출(음성)') - 좌측 영상 카드 position:sticky(top:1rem) → 스크롤해도 상단에 고정되어 항상 보임 Co-Authored-By: Claude Opus 4.8 (1M context) --- src/main/resources/templates/rework.html | 74 ++++++++++++------------ 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/src/main/resources/templates/rework.html b/src/main/resources/templates/rework.html index be7d33b..2a50042 100644 --- a/src/main/resources/templates/rework.html +++ b/src/main/resources/templates/rework.html @@ -26,11 +26,11 @@

📖 재가공 사용법

- +
🎬 원본 다운로드 한 번에 NEW

유튜브에서 직접 받아 올릴 필요 없이, 버튼 한 번으로 원본을 받아 - 자동 전사하고 그대로 컷편집·내보내기까지 이어집니다.

+ 자동 자막 추출하고 그대로 컷편집·내보내기까지 이어집니다.

1 @@ -45,8 +45,8 @@
2
-
자동 전사 완료 → 시간 싱크 자막 생성
-
다운로드가 끝나면 Whisper가 바로 전사해 [00:00] 자막 세그먼트가 만들어집니다. +
자동 자막 추출 완료 → 시간 싱크 자막 생성
+
다운로드가 끝나면 Whisper가 바로 자막 추출해 [00:00] 자막 세그먼트가 만들어집니다. 줄을 클릭하면 영상이 그 지점으로 이동해요.
자동 생성된 시간 싱크 자막
@@ -62,14 +62,14 @@
-

💡 직접 받은 파일을 쓰고 싶으면 옆의 ‘영상 업로드·전사’로 올리면 됩니다(기존 방식 그대로).

+

💡 직접 받은 파일을 쓰고 싶으면 옆의 ‘영상 업로드·자막 추출’로 올리면 됩니다(기존 방식 그대로).

-
영상 업로드 · 전사
영상 파일을 올리면 Whisper가 말소리를 시간 싱크 자막으로 추출합니다. 언어는 자동감지(틀리면 옆에서 ko/en/zh/ja 선택). ‘URL자막’은 YouTube 자막을 평문으로(시간 없음) 가져옵니다.
+
영상 업로드 · 자막 추출
영상 파일을 올리면 Whisper가 말소리를 시간 싱크 자막으로 추출합니다. 언어는 자동감지(틀리면 옆에서 ko/en/zh/ja 선택). ‘URL자막’은 YouTube 자막을 평문으로(시간 없음) 가져옵니다.
@@ -112,8 +112,8 @@
- -
+ +
@@ -132,21 +132,21 @@

원본 스크립트

- - - -
@@ -348,7 +348,7 @@ } // ===== 세그먼트(영상 싱크) ===== - let SEGMENTS = []; // 전사 원본 세그먼트(원본 영상 재생에 싱크) + let SEGMENTS = []; // 자막 추출 원본 세그먼트(원본 영상 재생에 싱크) let UPLOADED_FILE = null; // 업로드한 영상 File (렌더 재전송용) let HAS_SERVER_FILE = false; // '원본 다운로드'로 서버에 캐시된 영상 보유 여부(렌더가 업로드 없이 재사용) let AI_AUDIO = []; // AI 자막 - 음성(Whisper+한국어) 세그먼트 @@ -457,7 +457,7 @@ try { const r = await api(API + '/' + VIDEO_ID + '/translate?target=ko&format=segments', { method:'POST' }); const ko = (r && r.texts) || []; - if(!ko.length){ alert('번역할 세그먼트가 없습니다. 먼저 전사하세요.'); return; } + if(!ko.length){ alert('번역할 세그먼트가 없습니다. 먼저 자막 추출하세요.'); return; } // 현재 작업 세그먼트(원본/무음제거 후)와 1:1 정렬 → 텍스트만 한국어로 교체(타임코드·배속 그대로) const segs = workingSegments(); const koSegs = segs.map((sg, i) => ({ start: sg.start, end: sg.end, text: (ko[i] != null ? ko[i] : (sg.text || '')) })); @@ -495,7 +495,7 @@ // 왼쪽: 저장된 Whisper 세그먼트 → 한국어 번역(LibreTranslate) const audioP = (async () => { // 말소리가 없는(음악·화면자막만) 영상은 오류가 아니라 '음성 없음' 안내. - if(!SEGMENTS || !SEGMENTS.length) return { note: '음성 없음 — 말소리가 없거나(음악·화면자막만) ‘전사’ 미실행' }; + if(!SEGMENTS || !SEGMENTS.length) return { note: '음성 없음 — 말소리가 없거나(음악·화면자막만) ‘자막 추출’ 미실행' }; const r = await api(API + '/' + VIDEO_ID + '/translate?target=ko&format=segments', { method:'POST' }); const ko = (r && r.texts) || []; return { segments: SEGMENTS.map((sg, i) => ({ start: sg.start, end: sg.end, text: (ko[i] != null ? ko[i] : (sg.text || '')) })) }; @@ -560,7 +560,7 @@ } async function renderVideo(){ - if(!UPLOADED_FILE && !HAS_SERVER_FILE){ alert('먼저 "원본 다운로드" 또는 "영상 업로드·전사"를 실행하세요. (렌더에는 원본 영상이 필요합니다)'); return; } + if(!UPLOADED_FILE && !HAS_SERVER_FILE){ alert('먼저 "원본 다운로드" 또는 "영상 업로드·자막 추출"를 실행하세요. (렌더에는 원본 영상이 필요합니다)'); return; } const pad = parseFloat(document.getElementById('trimPad').value) || 0; const gap = parseFloat(document.getElementById('trimGap').value) || 0; const speed = curSpeed(); @@ -593,7 +593,7 @@ } } - // 저장된 URL로 원본을 서버에서 yt-dlp로 받아 자동 전사. 성공 시 렌더도 업로드 없이 가능. + // 저장된 URL로 원본을 서버에서 yt-dlp로 받아 자동 자막 추출. 성공 시 렌더도 업로드 없이 가능. async function downloadOriginal(){ const status = document.getElementById('transcribeStatus'); const btn = document.getElementById('downloadBtn'); @@ -608,7 +608,7 @@ updateCacheUI(true, d.sizeBytes || 0); // 캐시 보유 → 삭제버튼 노출 + 왼쪽 플레이어를 받은 원본으로 const mb = d.sizeBytes ? ((d.sizeBytes/1048576).toFixed(1) + 'MB') : ''; status.style.color = '#4ade80'; - status.textContent = '다운로드 완료 ✓ ' + mb + ' · 전사 중…'; + status.textContent = '다운로드 완료 ✓ ' + mb + ' · 자막 추출 중…'; } catch(e){ status.style.color = '#f87171'; status.textContent = '다운로드 실패: ' + e.message; @@ -616,24 +616,24 @@ if(window.lucide) lucide.createIcons(); return; } - // 2단계: 전사(분리). 실패해도 다운로드(영상)는 유지 → '전사' 버튼으로 재시도 가능. + // 2단계: 자막 추출(분리). 실패해도 다운로드(영상)는 유지 → '자막 추출' 버튼으로 재시도 가능. try { const s = await runTranscribeCached(); status.style.color = '#4ade80'; - status.textContent = '다운로드+전사 완료 · ' + (s.segments ? s.segments.length : 0) + '개 세그먼트' + status.textContent = '다운로드+자막 추출 완료 · ' + (s.segments ? s.segments.length : 0) + '개 세그먼트' + (s.language ? (' · ' + s.language) : '') + (s.duration ? (' · ' + mmss(s.duration)) : ''); } catch(e){ status.style.color = '#fbbf24'; - status.textContent = '다운로드는 완료 ✓ · 전사 실패(서버 혼잡일 수 있음): ' + e.message - + ' — ‘전사’ 버튼으로 다시 시도하세요'; + status.textContent = '다운로드는 완료 ✓ · 자막 추출 실패(서버 혼잡일 수 있음): ' + e.message + + ' — ‘자막 추출’ 버튼으로 다시 시도하세요'; } finally { btn.disabled = false; btn.style.opacity = ''; btn.innerHTML = orig; if(window.lucide) lucide.createIcons(); } } - // 받아둔 원본을 Whisper 로 전사(다운로드와 분리). 세그먼트를 렌더하고 응답을 반환. + // 받아둔 원본을 Whisper 로 자막 추출(다운로드와 분리). 세그먼트를 렌더하고 응답을 반환. async function runTranscribeCached(){ const lang = document.getElementById('langSel').value; const url = API + '/' + VIDEO_ID + '/transcribe-cached' + (lang ? ('?language=' + lang) : ''); @@ -643,22 +643,22 @@ return s; } - // '전사' 버튼: 받아둔 원본만 다시 전사(전사만 실패했을 때 재시도용). + // '자막 추출' 버튼: 받아둔 원본만 다시 자막 추출(자막 추출만 실패했을 때 재시도용). async function transcribeCached(){ const status = document.getElementById('transcribeStatus'); const btn = document.getElementById('transcribeCachedBtn'); - const orig = btn.innerHTML; btn.disabled = true; btn.style.opacity = '0.6'; btn.innerHTML = '전사 중…'; + const orig = btn.innerHTML; btn.disabled = true; btn.style.opacity = '0.6'; btn.innerHTML = '자막 추출 중…'; status.style.display = 'block'; status.style.color = '#facc15'; - status.textContent = '전사 중… (Shorts 기준 보통 20~60초, 서버 혼잡 시 더 걸림)'; + status.textContent = '자막 추출 중… (Shorts 기준 보통 20~60초, 서버 혼잡 시 더 걸림)'; try { const s = await runTranscribeCached(); status.style.color = '#4ade80'; - status.textContent = '전사 완료 · ' + (s.segments ? s.segments.length : 0) + '개 세그먼트' + status.textContent = '자막 추출 완료 · ' + (s.segments ? s.segments.length : 0) + '개 세그먼트' + (s.language ? (' · ' + s.language) : '') + (s.duration ? (' · ' + mmss(s.duration)) : ''); } catch(e){ status.style.color = '#f87171'; - status.textContent = '전사 실패: ' + e.message; + status.textContent = '자막 추출 실패: ' + e.message; } finally { btn.disabled = false; btn.style.opacity = ''; btn.innerHTML = orig; if(window.lucide) lucide.createIcons(); @@ -668,7 +668,7 @@ // 서버 캐시 보유 상태 → '받은 원본 삭제' 버튼 표시 + 렌더 캐시 사용 여부(HAS_SERVER_FILE) 갱신 function updateCacheUI(cached, sizeBytes){ HAS_SERVER_FILE = !!cached; - // 받아진 상태면 '원본 다운로드' 숨기고 '전사'·'받은 원본 삭제' 노출(없으면 반대) + // 받아진 상태면 '원본 다운로드' 숨기고 '자막 추출'·'받은 원본 삭제' 노출(없으면 반대) const dl = document.getElementById('downloadBtn'); const tr = document.getElementById('transcribeCachedBtn'); const del = document.getElementById('deleteDlBtn'); @@ -717,11 +717,11 @@ v.style.display = 'block'; document.getElementById('player').style.display = 'none'; - // 2) 서버로 보내 Whisper 전사 + // 2) 서버로 보내 Whisper 자막 추출 const status = document.getElementById('transcribeStatus'); const btn = document.getElementById('uploadBtn'); status.style.display = 'block'; status.style.color = '#facc15'; - status.textContent = '전사 중… (Shorts 기준 보통 20~60초)'; + status.textContent = '자막 추출 중… (Shorts 기준 보통 20~60초)'; btn.style.pointerEvents = 'none'; btn.style.opacity = '0.6'; try { const fd = new FormData(); @@ -732,12 +732,12 @@ renderSegments(s.segments); document.getElementById('transcript').value = s.transcript || ''; status.style.color = '#4ade80'; - status.textContent = '전사 완료 · ' + (s.segments ? s.segments.length : 0) + '개 세그먼트' + status.textContent = '자막 추출 완료 · ' + (s.segments ? s.segments.length : 0) + '개 세그먼트' + (s.language ? (' · ' + s.language) : '') + (s.duration ? (' · ' + mmss(s.duration)) : ''); } catch(e){ status.style.color = '#f87171'; - status.textContent = '전사 실패: ' + e.message; + status.textContent = '자막 추출 실패: ' + e.message; } finally { btn.style.pointerEvents = ''; btn.style.opacity = ''; if(window.lucide) lucide.createIcons();