Add new features: title display, dark mode, history, URL cleanup

- Fetch video title via YouTube oembed API (parallel with transcript)
- Add character count and estimated reading time per result
- Add dark mode toggle with localStorage persistence
- Add keep_newlines option (default: continuous text)
- Support m.youtube.com URLs, strip tracking params (si, utm, etc.)
- Add recent extraction history (localStorage, last 10 videos)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

main.py

@@ -1,4 +1,6 @@
 import logging
+import json
+import urllib.request
 from fastapi import FastAPI
 from fastapi.responses import FileResponse, JSONResponse
 from fastapi.middleware.cors import CORSMiddleware
@@ -30,14 +32,17 @@ class TranscriptRequest(BaseModel):
     language: str = "ko"
     denoise: bool = False
     format: str = "text"
+    keep_newlines: bool = False
 
 
 def extract_video_id(url: str) -> str | None:
     url = url.strip()
     if not url:
         return None
+    # Remove tracking parameters
+    url = re.sub(r'[&?](si|feature|utm_\w+|fbclid|gclid)=[^&]*', '', url)
     patterns = [
-        r"(?:youtube\.com/watch\?.*v=)([a-zA-Z0-9_-]{11})",
+        r"(?:(?:m\.)?youtube\.com/watch\?.*v=)([a-zA-Z0-9_-]{11})",
         r"(?:youtu\.be/)([a-zA-Z0-9_-]{11})",
         r"(?:youtube\.com/embed/)([a-zA-Z0-9_-]{11})",
         r"(?:youtube\.com/shorts/)([a-zA-Z0-9_-]{11})",
@@ -50,6 +55,17 @@ def extract_video_id(url: str) -> str | None:
     return None
 
 
+def _fetch_title(video_id: str) -> str | None:
+    try:
+        oembed_url = f"https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v={video_id}&format=json"
+        req = urllib.request.Request(oembed_url)
+        with urllib.request.urlopen(req, timeout=5) as response:
+            data = json.loads(response.read().decode("utf-8"))
+            return data.get("title")
+    except Exception:
+        return None
+
+
 KOREAN_FILLERS = {
     "어", "음", "그", "아", "네", "예", "에", "으", "흠",
     "어어", "음음", "아아", "네네", "예예",
@@ -80,7 +96,7 @@ def denoise_text(text: str) -> str:
     return "\n".join(result)
 
 
-def _fetch_transcript(video_id: str, language: str, denoise: bool, fmt: str) -> dict:
+def _fetch_transcript(video_id: str, language: str, denoise: bool, fmt: str, keep_newlines: bool = False) -> dict:
     languages = [language]
     if language == "ko":
         languages.append("en")
@@ -113,9 +129,12 @@ def _fetch_transcript(video_id: str, language: str, denoise: bool, fmt: str) ->
                     entries = deduped
                 return {"transcript": entries, "error": None}
             else:
-                text = "\n".join(e.text for e in data)
+                separator = "\n" if keep_newlines else " "
+                text = separator.join(e.text for e in data)
                 if denoise:
                     text = denoise_text(text)
+                if not keep_newlines:
+                    text = " ".join(text.split())
                 return {"transcript": text, "error": None}
         except Exception as e:
             last_error = str(e)
@@ -162,22 +181,28 @@ async def get_transcripts(request: TranscriptRequest):
             return {
                 "url": url,
                 "video_id": None,
+                "title": None,
                 "transcript": None,
                 "error": "유효하지 않은 YouTube URL입니다.",
             }
 
-        result = await loop.run_in_executor(
-            _executor,
-            _fetch_transcript,
-            video_id,
-            request.language,
-            request.denoise,
-            request.format,
+        result, title = await asyncio.gather(
+            loop.run_in_executor(
+                _executor,
+                _fetch_transcript,
+                video_id,
+                request.language,
+                request.denoise,
+                request.format,
+                request.keep_newlines,
+            ),
+            loop.run_in_executor(_executor, _fetch_title, video_id),
         )
 
         return {
             "url": url,
             "video_id": video_id,
+            "title": title,
             "transcript": result["transcript"],
             "error": result["error"],
         }

static/index.html

@@ -37,8 +37,9 @@
             --transition: 200ms ease;
         }
 
+        /* Dark theme: system preference (when no manual override) */
         @media (prefers-color-scheme: dark) {
-            :root {
+            :root:not([data-theme="light"]) {
                 --bg-primary: #111113;
                 --bg-secondary: #1b1b1f;
                 --bg-surface: #1b1b1f;
@@ -62,6 +63,30 @@
             }
         }
 
+        /* Dark theme: manual override */
+        [data-theme="dark"] {
+            --bg-primary: #111113;
+            --bg-secondary: #1b1b1f;
+            --bg-surface: #1b1b1f;
+            --bg-elevated: #232328;
+            --border: #2e2e35;
+            --border-light: #252529;
+            --text-primary: #ededef;
+            --text-secondary: #8f8f96;
+            --text-tertiary: #5c5c63;
+            --accent: #6366f1;
+            --accent-hover: #818cf8;
+            --accent-subtle: rgba(99, 102, 241, 0.06);
+            --accent-light: rgba(99, 102, 241, 0.12);
+            --error: #f87171;
+            --error-light: rgba(248, 113, 113, 0.08);
+            --error-border: rgba(248, 113, 113, 0.2);
+            --success: #4ade80;
+            --success-light: rgba(74, 222, 128, 0.08);
+            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+            --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
+        }
+
         *, *::before, *::after {
             box-sizing: border-box;
             margin: 0;
@@ -94,11 +119,17 @@
             padding: 72px 24px 120px;
         }
 
-        /* ── Header ── */
+        /* -- Header -- */
         header {
             margin-bottom: 56px;
         }
 
+        .header-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
         header h1 {
             font-size: 28px;
             font-weight: 700;
@@ -115,7 +146,44 @@
             line-height: 1.5;
         }
 
-        /* ── Section Label ── */
+        /* -- Theme Toggle -- */
+        .theme-toggle {
+            background: var(--bg-surface);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            width: 36px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            color: var(--text-secondary);
+            transition: all var(--transition);
+            flex-shrink: 0;
+        }
+
+        .theme-toggle:hover {
+            color: var(--text-primary);
+            border-color: var(--text-tertiary);
+            background: var(--bg-elevated);
+        }
+
+        /* Show sun icon in dark mode, moon icon in light mode */
+        .theme-icon.sun { display: none; }
+        .theme-icon.moon { display: block; }
+
+        @media (prefers-color-scheme: dark) {
+            :root:not([data-theme="light"]) .theme-icon.sun { display: block; }
+            :root:not([data-theme="light"]) .theme-icon.moon { display: none; }
+        }
+
+        [data-theme="dark"] .theme-icon.sun { display: block; }
+        [data-theme="dark"] .theme-icon.moon { display: none; }
+
+        [data-theme="light"] .theme-icon.sun { display: none; }
+        [data-theme="light"] .theme-icon.moon { display: block; }
+
+        /* -- Section Label -- */
         .section-label {
             font-size: 12px;
             font-weight: 600;
@@ -125,7 +193,7 @@
             margin-bottom: 12px;
         }
 
-        /* ── Input Section ── */
+        /* -- Input Section -- */
         .input-section {
             display: flex;
             flex-direction: column;
@@ -184,7 +252,7 @@
             color: var(--error);
         }
 
-        /* ── Options Panel ── */
+        /* -- Options Panel -- */
         .options-panel {
             background: var(--bg-elevated);
             border: 1px solid var(--border);
@@ -221,7 +289,7 @@
             white-space: nowrap;
         }
 
-        /* ── Toggle Group ── */
+        /* -- Toggle Group -- */
         .toggle-group {
             display: flex;
             background: var(--bg-surface);
@@ -256,7 +324,7 @@
             background: var(--accent-subtle);
         }
 
-        /* ── Custom Checkbox ── */
+        /* -- Custom Checkbox -- */
         .checkbox-wrapper {
             display: flex;
             align-items: center;
@@ -310,7 +378,7 @@
             transform: rotate(45deg);
         }
 
-        /* ── Buttons ── */
+        /* -- Buttons -- */
         .btn {
             font-family: var(--font-sans);
             font-size: 14px;
@@ -392,14 +460,14 @@
             box-shadow: 0 1px 0 var(--border);
         }
 
-        /* ── Divider ── */
+        /* -- Divider -- */
         .section-divider {
             height: 1px;
             background: var(--border-light);
             margin: 48px 0;
         }
 
-        /* ── Loading ── */
+        /* -- Loading -- */
         .loading-section {
             margin-top: 48px;
             display: flex;
@@ -440,7 +508,7 @@
             50% { opacity: 0.35; }
         }
 
-        /* ── Results ── */
+        /* -- Results -- */
         .results-section {
             margin-top: 48px;
         }
@@ -481,7 +549,7 @@
             gap: 16px;
         }
 
-        /* ── Result Card ── */
+        /* -- Result Card -- */
         .result-card {
             background: var(--bg-elevated);
             border: 1px solid var(--border);
@@ -559,6 +627,17 @@
             flex-shrink: 0;
         }
 
+        .result-card-title {
+            font-size: 14px;
+            font-weight: 500;
+            color: var(--text-primary);
+            margin-bottom: 12px;
+            line-height: 1.5;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
         .result-card-content {
             font-family: var(--font-mono);
             font-size: 13px;
@@ -574,6 +653,15 @@
             border-radius: 6px;
         }
 
+        .result-card-stats {
+            display: flex;
+            gap: 8px;
+            margin-top: 10px;
+            font-family: var(--font-mono);
+            font-size: 12px;
+            color: var(--text-tertiary);
+        }
+
         .result-card.is-error {
             border-color: var(--error-border);
             background: var(--error-light);
@@ -608,7 +696,61 @@
             background: var(--text-tertiary);
         }
 
-        /* ── Footer ── */
+        /* -- History -- */
+        .history-section {
+            margin-top: 48px;
+        }
+
+        .history-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+        }
+
+        .history-list {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .history-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 14px;
+            background: var(--bg-elevated);
+            border: 1px solid var(--border-light);
+            border-radius: 6px;
+            font-size: 13px;
+            cursor: pointer;
+            transition: all var(--transition);
+        }
+
+        .history-item:hover {
+            border-color: var(--border);
+            background: var(--bg-surface);
+        }
+
+        .history-item-title {
+            color: var(--text-primary);
+            font-weight: 500;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            min-width: 0;
+            flex: 1;
+        }
+
+        .history-item-time {
+            font-family: var(--font-mono);
+            font-size: 11px;
+            color: var(--text-tertiary);
+            flex-shrink: 0;
+            margin-left: 12px;
+        }
+
+        /* -- Footer -- */
         .footer {
             margin-top: 64px;
             padding-top: 24px;
@@ -622,7 +764,7 @@
             line-height: 1.6;
         }
 
-        /* ── Responsive ── */
+        /* -- Responsive -- */
         @media (max-width: 640px) {
             .container {
                 padding: 40px 16px 80px;
@@ -668,8 +810,26 @@
 <body>
     <div class="container">
         <header>
-            <h1>YouTube Transcript</h1>
-            <p class="subtitle">YouTube 영상의 자막을 텍스트로 추출합니다</p>
+            <div class="header-row">
+                <h1>YouTube Transcript</h1>
+                <button id="themeToggle" class="theme-toggle" title="테마 전환" aria-label="Toggle theme">
+                    <svg class="theme-icon sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="5"></circle>
+                        <line x1="12" y1="1" x2="12" y2="3"></line>
+                        <line x1="12" y1="21" x2="12" y2="23"></line>
+                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                        <line x1="1" y1="12" x2="3" y2="12"></line>
+                        <line x1="21" y1="12" x2="23" y2="12"></line>
+                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+                    </svg>
+                    <svg class="theme-icon moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                    </svg>
+                </button>
+            </div>
+            <p class="subtitle">Extract subtitles from YouTube videos</p>
         </header>
 
         <section class="input-section">
@@ -713,6 +873,14 @@
                             </label>
                         </div>
 
+                        <div class="option-group">
+                            <label class="checkbox-wrapper">
+                                <input type="checkbox" id="keepNewlines">
+                                <span class="checkbox-custom"></span>
+                                <span>줄바꿈 유지</span>
+                            </label>
+                        </div>
+
                         <div class="option-group">
                             <label class="checkbox-wrapper">
                                 <input type="checkbox" id="metadata" checked>
@@ -748,6 +916,15 @@
             <div id="resultsList" class="results-list"></div>
         </section>
 
+        <section id="history" class="history-section" style="display: none;">
+            <div class="section-divider"></div>
+            <div class="history-header">
+                <p class="section-label">최근 추출 기록</p>
+                <button class="btn btn-secondary btn-sm" id="clearHistoryBtn">기록 삭제</button>
+            </div>
+            <div id="historyList" class="history-list"></div>
+        </section>
+
         <div class="footer" id="footer" style="display: none;">
             <p>youtube-transcript-api &middot; 자막 원문만 추출합니다</p>
         </div>
@@ -771,10 +948,42 @@
         var copyAllBtn = $('#copyAllBtn');
         var downloadAllBtn = $('#downloadAllBtn');
         var denoiseCheckbox = $('#denoise');
+        var keepNewlinesCheckbox = $('#keepNewlines');
         var metadataCheckbox = $('#metadata');
         var urlCount = $('#urlCount');
         var footer = $('#footer');
 
+        // Theme toggle
+        var themeToggle = $('#themeToggle');
+        var THEME_KEY = 'yt-transcript-theme';
+
+        function getSystemTheme() {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+
+        function getCurrentTheme() {
+            var saved = localStorage.getItem(THEME_KEY);
+            if (saved === 'dark' || saved === 'light') return saved;
+            return getSystemTheme();
+        }
+
+        function applyTheme(theme) {
+            document.documentElement.setAttribute('data-theme', theme);
+            localStorage.setItem(THEME_KEY, theme);
+        }
+
+        // Initialize theme from localStorage
+        var savedTheme = localStorage.getItem(THEME_KEY);
+        if (savedTheme) {
+            applyTheme(savedTheme);
+        }
+
+        themeToggle.addEventListener('click', function () {
+            var current = getCurrentTheme();
+            var next = current === 'dark' ? 'light' : 'dark';
+            applyTheme(next);
+        });
+
         // URL count
         function updateUrlCount() {
             var lines = urlInput.value.split('\n').filter(function (l) { return l.trim(); });
@@ -839,6 +1048,7 @@
                         urls: urls,
                         language: currentLanguage,
                         denoise: denoiseCheckbox.checked,
+                        keep_newlines: keepNewlinesCheckbox.checked,
                         format: currentFormat,
                     }),
                 });
@@ -852,6 +1062,7 @@
 
                 currentResults = data;
                 renderResults(data);
+                addToHistory(data.results);
             } catch (err) {
                 alert('요청 중 오류가 발생했습니다: ' + err.message);
             } finally {
@@ -901,6 +1112,21 @@
                     idHtml = '<span class="result-card-id">' + escapeHtml(result.url) + '</span>';
                 }
 
+                var titleHtml = '';
+                if (result.title && !result.error) {
+                    titleHtml = '<div class="result-card-title">' + escapeHtml(result.title) + '</div>';
+                }
+
+                var cardStatsHtml = '';
+                if (!result.error && result.transcript) {
+                    var text = typeof result.transcript === 'string' ? result.transcript : JSON.stringify(result.transcript);
+                    var charCount = text.length;
+                    var readingMinutes = Math.max(1, Math.ceil(charCount / 500));
+                    cardStatsHtml = '<div class="result-card-stats">' +
+                        charCount.toLocaleString() + '\uC790 \u00B7 \uC57D ' + readingMinutes + '\uBD84 \uC77D\uAE30' +
+                        '</div>';
+                }
+
                 card.innerHTML =
                     '<div class="result-card-header">' +
                         '<div class="result-card-meta">' +
@@ -909,7 +1135,9 @@
                         '</div>' +
                         actionsHtml +
                     '</div>' +
-                    '<div class="result-card-content">' + escapeHtml(contentText) + '</div>';
+                    titleHtml +
+                    '<div class="result-card-content">' + escapeHtml(contentText) + '</div>' +
+                    cardStatsHtml;
 
                 resultsList.appendChild(card);
             });
@@ -1025,7 +1253,7 @@
 
         function showCopied(btn) {
             var original = btn.textContent;
-            btn.textContent = '복사됨 ✓';
+            btn.textContent = '\uBCF5\uC0AC\uB428 \u2713';
             btn.classList.add('copied');
             setTimeout(function () {
                 btn.textContent = original;
@@ -1049,6 +1277,88 @@
             div.textContent = text;
             return div.innerHTML;
         }
+
+        // History
+        var HISTORY_KEY = 'yt-transcript-history';
+        var MAX_HISTORY = 10;
+        var historySection = $('#history');
+        var historyList = $('#historyList');
+        var clearHistoryBtn = $('#clearHistoryBtn');
+
+        function getHistory() {
+            try {
+                return JSON.parse(localStorage.getItem(HISTORY_KEY)) || [];
+            } catch (e) {
+                return [];
+            }
+        }
+
+        function saveHistory(items) {
+            localStorage.setItem(HISTORY_KEY, JSON.stringify(items));
+        }
+
+        function addToHistory(results) {
+            var history = getHistory();
+            results.forEach(function (r) {
+                if (r.error || !r.video_id) return;
+                // Remove duplicate
+                history = history.filter(function (h) { return h.video_id !== r.video_id; });
+                history.unshift({
+                    video_id: r.video_id,
+                    title: r.title || r.video_id,
+                    time: new Date().toISOString(),
+                });
+            });
+            history = history.slice(0, MAX_HISTORY);
+            saveHistory(history);
+            renderHistory();
+        }
+
+        function renderHistory() {
+            var history = getHistory();
+            if (history.length === 0) {
+                historySection.style.display = 'none';
+                return;
+            }
+            historySection.style.display = 'block';
+            historyList.innerHTML = '';
+            history.forEach(function (item) {
+                var div = document.createElement('div');
+                div.className = 'history-item';
+                var timeStr = formatTime(item.time);
+                div.innerHTML =
+                    '<span class="history-item-title">' + escapeHtml(item.title) + '</span>' +
+                    '<span class="history-item-time">' + timeStr + '</span>';
+                div.addEventListener('click', function () {
+                    urlInput.value = 'https://www.youtube.com/watch?v=' + item.video_id;
+                    updateUrlCount();
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                });
+                historyList.appendChild(div);
+            });
+        }
+
+        function formatTime(isoStr) {
+            var d = new Date(isoStr);
+            var now = new Date();
+            var diff = now - d;
+            var minutes = Math.floor(diff / 60000);
+            if (minutes < 1) return '\uBC29\uAE08';
+            if (minutes < 60) return minutes + '\uBD84 \uC804';
+            var hours = Math.floor(minutes / 60);
+            if (hours < 24) return hours + '\uC2DC\uAC04 \uC804';
+            var days = Math.floor(hours / 24);
+            if (days < 7) return days + '\uC77C \uC804';
+            return d.toLocaleDateString('ko-KR');
+        }
+
+        clearHistoryBtn.addEventListener('click', function () {
+            localStorage.removeItem(HISTORY_KEY);
+            renderHistory();
+        });
+
+        // Show history on load
+        renderHistory();
     })();
     </script>
 </body>