From 32b2eae62c775b33e9d80876c0354b13b25371bb Mon Sep 17 00:00:00 2001
From: "hehihoho3@gmail.com" <hehihoho3@gmail.com>
Date: Thu, 25 Jun 2026 15:25:35 +0900
Subject: [PATCH] =?UTF-8?q?feat(rework):=20=EB=B0=9B=EC=95=84=EC=A7=84=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=EB=A9=B4=20'=EC=9B=90=EB=B3=B8=20=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=EB=A1=9C=EB=93=9C'=20=EC=88=A8=EA=B8=B0=EA=B3=A0=20'?=
 =?UTF-8?q?=EC=A0=84=EC=82=AC'=20=EB=B2=84=ED=8A=BC=20=EB=85=B8=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

캐시(받은 원본) 보유 시 '원본 다운로드'를 숨기고, 그 자리에 '전사' 버튼을 띄운다
(전사만 실패했을 때 재다운로드 없이 재시도). 캐시 없으면 다시 '원본 다운로드' 표시.

- updateCacheUI: downloadBtn 숨김/표시 대칭 토글 + transcribeCachedBtn 노출
- runTranscribeCached 헬퍼 추출(다운로드 2단계 전사와 '전사' 버튼이 공유)
- '전사' 버튼 onclick=transcribeCached()

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/main/resources/templates/rework.html | 56 +++++++++++++++++++-----
 1 file changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/main/resources/templates/rework.html b/src/main/resources/templates/rework.html
index 3f054f7..daa3e45 100644
--- a/src/main/resources/templates/rework.html
+++ b/src/main/resources/templates/rework.html
@@ -142,6 +142,9 @@
                             <button class="btn btn-primary px-3 py-2 flex items-center gap-1" id="downloadBtn" onclick="downloadOriginal()" title="저장된 URL로 원본을 yt-dlp로 받아 자동 전사(수동 다운로드+업로드 불필요)">
                                 <i data-lucide="download" style="width:15px;"></i> 원본 다운로드
                             </button>
+                            <button class="btn btn-primary px-3 py-2 flex items-center gap-1" id="transcribeCachedBtn" onclick="transcribeCached()" style="display:none;" title="받아둔 원본을 Whisper로 전사(전사만 다시 하기)">
+                                <i data-lucide="captions" style="width:15px;"></i> 전사
+                            </button>
                             <label class="btn btn-secondary px-3 py-2 flex items-center gap-1" id="uploadBtn" style="cursor:pointer;" title="직접 받은 영상 파일을 올려 전사">
                                 <i data-lucide="upload" style="width:15px;"></i> 영상 업로드·전사
                                 <input type="file" id="videoFile" accept="video/*" style="display:none;" onchange="onVideoSelected(event)">
@@ -527,11 +530,7 @@
                 }
                 // 2단계: 전사(분리). 실패해도 다운로드(영상)는 유지 → 화면자막 OCR/재시도 가능.
                 try {
-                    const lang = document.getElementById('langSel').value;
-                    const url = API + '/' + VIDEO_ID + '/transcribe-cached' + (lang ? ('?language=' + lang) : '');
-                    const s = await api(url, { method:'POST' });
-                    renderSegments(s.segments);
-                    document.getElementById('transcript').value = s.transcript || '';
+                    const s = await runTranscribeCached();
                     status.style.color = '#4ade80';
                     status.textContent = '다운로드+전사 완료 · ' + (s.segments ? s.segments.length : 0) + '개 세그먼트'
                         + (s.language ? (' · ' + s.language) : '')
@@ -539,7 +538,39 @@
                 } catch(e){
                     status.style.color = '#fbbf24';
                     status.textContent = '다운로드는 완료 ✓ · 전사 실패(서버 혼잡일 수 있음): ' + e.message
-                        + ' — 잠시 후 다시 전사하거나 ‘화면 자막 OCR’을 쓰세요';
+                        + ' — ‘전사’ 버튼으로 다시 시도하거나 ‘화면 자막 OCR’을 쓰세요';
+                } finally {
+                    btn.disabled = false; btn.style.opacity = ''; btn.innerHTML = orig;
+                    if(window.lucide) lucide.createIcons();
+                }
+            }
+
+            // 받아둔 원본을 Whisper 로 전사(다운로드와 분리). 세그먼트를 렌더하고 응답을 반환.
+            async function runTranscribeCached(){
+                const lang = document.getElementById('langSel').value;
+                const url = API + '/' + VIDEO_ID + '/transcribe-cached' + (lang ? ('?language=' + lang) : '');
+                const s = await api(url, { method:'POST' });
+                renderSegments(s.segments);
+                document.getElementById('transcript').value = s.transcript || '';
+                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 = '전사 중…';
+                status.style.display = 'block'; status.style.color = '#facc15';
+                status.textContent = '전사 중… (Shorts 기준 보통 20~60초, 서버 혼잡 시 더 걸림)';
+                try {
+                    const s = await runTranscribeCached();
+                    status.style.color = '#4ade80';
+                    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;
                 } finally {
                     btn.disabled = false; btn.style.opacity = ''; btn.innerHTML = orig;
                     if(window.lucide) lucide.createIcons();
@@ -549,11 +580,16 @@
             // 서버 캐시 보유 상태 → '받은 원본 삭제' 버튼 표시 + 렌더 캐시 사용 여부(HAS_SERVER_FILE) 갱신
             function updateCacheUI(cached, sizeBytes){
                 HAS_SERVER_FILE = !!cached;
-                const btn = document.getElementById('deleteDlBtn');
-                if(btn){
-                    btn.style.display = cached ? '' : 'none';
+                // 받아진 상태면 '원본 다운로드' 숨기고 '전사'·'받은 원본 삭제' 노출(없으면 반대)
+                const dl = document.getElementById('downloadBtn');
+                const tr = document.getElementById('transcribeCachedBtn');
+                const del = document.getElementById('deleteDlBtn');
+                if(dl) dl.style.display = cached ? 'none' : '';
+                if(tr) tr.style.display = cached ? '' : 'none';
+                if(del){
+                    del.style.display = cached ? '' : 'none';
                     if(cached && sizeBytes){
-                        btn.title = '서버에 받아둔 원본(' + (sizeBytes/1048576).toFixed(1) + 'MB) 삭제(자막은 유지)';
+                        del.title = '서버에 받아둔 원본(' + (sizeBytes/1048576).toFixed(1) + 'MB) 삭제(자막은 유지)';
                     }
                 }
                 // 업로드본이 없을 때만 플레이어를 서버 원본/YouTube로 전환(업로드본이 우선)