UI polish: i18n toggle, Apple-style design, token count

- Add KO/EN language toggle with full i18n translations
- Apple-style design: reduced border-radius, no glow effects
- Show token count instead of reading time in result stats
- Bigger/bolder option text, buttons, and history items
- Darker text colors for better readability
- Merge checkboxes into one row, thicker checkbox borders
- Remove footer, remove keep_newlines checkbox
- Increase URL limit from 20 to 50
- Card header shows video title instead of raw ID

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

main.py

@@ -160,10 +160,10 @@ def _fetch_transcript(video_id: str, language: str, denoise: bool, fmt: str, kee
 
 @app.post("/api/transcripts")
 async def get_transcripts(request: TranscriptRequest):
-    if len(request.urls) > 20:
+    if len(request.urls) > 50:
         return JSONResponse(
             status_code=400,
-            content={"error": "최대 20개의 URL만 처리할 수 있습니다."},
+            content={"error": "최대 50개의 URL만 처리할 수 있습니다."},
         )
 
     urls = [u.strip() for u in request.urls if u.strip()]

static/index.html

@@ -17,8 +17,8 @@
             --border: #e4e4e7;
             --border-light: #f0f0f2;
             --text-primary: #18181b;
-            --text-secondary: #71717a;
-            --text-tertiary: #a1a1aa;
+            --text-secondary: #3f3f46;
+            --text-tertiary: #71717a;
             --accent: #4f46e5;
             --accent-hover: #4338ca;
             --accent-subtle: rgba(79, 70, 229, 0.06);
@@ -32,8 +32,8 @@
             --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
             --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
             --font-mono: 'JetBrains Mono', monospace;
-            --radius: 8px;
-            --radius-lg: 12px;
+            --radius: 6px;
+            --radius-lg: 8px;
             --transition: 200ms ease;
         }
 
@@ -47,8 +47,8 @@
                 --border: #2e2e35;
                 --border-light: #252529;
                 --text-primary: #ededef;
-                --text-secondary: #8f8f96;
-                --text-tertiary: #5c5c63;
+                --text-secondary: #b0b0b8;
+                --text-tertiary: #8f8f96;
                 --accent: #6366f1;
                 --accent-hover: #818cf8;
                 --accent-subtle: rgba(99, 102, 241, 0.06);
@@ -72,8 +72,8 @@
             --border: #2e2e35;
             --border-light: #252529;
             --text-primary: #ededef;
-            --text-secondary: #8f8f96;
-            --text-tertiary: #5c5c63;
+            --text-secondary: #b0b0b8;
+            --text-tertiary: #8f8f96;
             --accent: #6366f1;
             --accent-hover: #818cf8;
             --accent-subtle: rgba(99, 102, 241, 0.06);
@@ -131,7 +131,7 @@
         }
 
         header h1 {
-            font-size: 28px;
+            font-size: 32px;
             font-weight: 700;
             letter-spacing: -0.035em;
             line-height: 1.15;
@@ -146,6 +146,38 @@
             line-height: 1.5;
         }
 
+        /* -- Header Actions -- */
+        .header-actions {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+        }
+
+        /* -- Language Toggle -- */
+        .lang-toggle {
+            background: var(--bg-surface);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 0 12px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            color: var(--text-secondary);
+            font-family: var(--font-sans);
+            font-size: 13px;
+            font-weight: 600;
+            transition: all var(--transition);
+            flex-shrink: 0;
+        }
+
+        .lang-toggle:hover {
+            color: var(--text-primary);
+            border-color: var(--text-tertiary);
+            background: var(--bg-elevated);
+        }
+
         /* -- Theme Toggle -- */
         .theme-toggle {
             background: var(--bg-surface);
@@ -185,7 +217,7 @@
 
         /* -- Section Label -- */
         .section-label {
-            font-size: 12px;
+            font-size: 14px;
             font-weight: 600;
             color: var(--text-tertiary);
             text-transform: uppercase;
@@ -227,7 +259,7 @@
 
         textarea:focus {
             border-color: var(--accent);
-            box-shadow: 0 0 0 3px var(--accent-subtle);
+            box-shadow: none;
         }
 
         .url-count {
@@ -275,13 +307,13 @@
 
         .option-divider {
             width: 1px;
-            height: 20px;
+            height: 24px;
             background: var(--border);
             flex-shrink: 0;
         }
 
         .option-label {
-            font-size: 12px;
+            font-size: 14px;
             font-weight: 600;
             color: var(--text-tertiary);
             text-transform: uppercase;
@@ -294,20 +326,20 @@
             display: flex;
             background: var(--bg-surface);
             border: 1px solid var(--border);
-            border-radius: 6px;
-            padding: 2px;
+            border-radius: 5px;
+            padding: 3px;
             gap: 2px;
         }
 
         .toggle-btn {
-            padding: 5px 12px;
+            padding: 7px 16px;
             font-family: var(--font-sans);
-            font-size: 13px;
+            font-size: 16px;
             font-weight: 500;
             color: var(--text-secondary);
             background: transparent;
             border: none;
-            border-radius: 4px;
+            border-radius: 3px;
             cursor: pointer;
             transition: all var(--transition);
             white-space: nowrap;
@@ -330,7 +362,7 @@
             align-items: center;
             gap: 8px;
             cursor: pointer;
-            font-size: 13px;
+            font-size: 16px;
             color: var(--text-secondary);
             user-select: none;
             transition: color var(--transition);
@@ -348,10 +380,10 @@
         }
 
         .checkbox-custom {
-            width: 16px;
-            height: 16px;
-            border: 1.5px solid var(--border);
-            border-radius: 4px;
+            width: 20px;
+            height: 20px;
+            border: 2px solid var(--text-tertiary);
+            border-radius: 5px;
             transition: all var(--transition);
             position: relative;
             flex-shrink: 0;
@@ -369,10 +401,10 @@
         .checkbox-wrapper input:checked + .checkbox-custom::after {
             content: '';
             position: absolute;
-            left: 4.5px;
-            top: 1.5px;
-            width: 5px;
-            height: 9px;
+            left: 6px;
+            top: 2.5px;
+            width: 6px;
+            height: 11px;
             border: solid #fff;
             border-width: 0 1.5px 1.5px 0;
             transform: rotate(45deg);
@@ -392,15 +424,17 @@
         }
 
         .btn:focus-visible {
-            box-shadow: 0 0 0 3px var(--accent-subtle);
+            box-shadow: none;
+            outline: 2px solid var(--accent);
+            outline-offset: 2px;
         }
 
         .btn-primary {
             background: var(--accent);
             color: #fff;
             width: 100%;
-            padding: 13px;
-            font-size: 14px;
+            padding: 15px;
+            font-size: 16px;
             font-weight: 600;
             letter-spacing: -0.01em;
         }
@@ -410,7 +444,7 @@
         }
 
         .btn-primary:active:not(:disabled) {
-            transform: scale(0.995);
+            transform: scale(0.98);
         }
 
         .btn-primary:disabled {
@@ -433,8 +467,9 @@
         }
 
         .btn-sm {
-            padding: 5px 10px;
-            font-size: 12px;
+            padding: 8px 14px;
+            font-size: 14px;
+            font-weight: 600;
         }
 
         .btn.copied {
@@ -554,7 +589,7 @@
             background: var(--bg-elevated);
             border: 1px solid var(--border);
             border-radius: var(--radius);
-            padding: 20px;
+            padding: 28px;
             transition: box-shadow var(--transition), border-color var(--transition);
             animation: fadeIn 0.35s ease forwards;
             opacity: 0;
@@ -603,12 +638,10 @@
         }
 
         .result-card-id {
-            font-family: var(--font-mono);
-            font-size: 13px;
+            font-family: var(--font-sans);
+            font-size: 15px;
             color: var(--text-secondary);
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            font-weight: 600;
             min-width: 0;
         }
 
@@ -628,20 +661,18 @@
         }
 
         .result-card-title {
-            font-size: 14px;
-            font-weight: 500;
+            font-size: 20px;
+            font-weight: 700;
             color: var(--text-primary);
-            margin-bottom: 12px;
-            line-height: 1.5;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            margin-bottom: 16px;
+            line-height: 1.4;
+            letter-spacing: -0.02em;
         }
 
         .result-card-content {
             font-family: var(--font-mono);
-            font-size: 13px;
-            line-height: 1.75;
+            font-size: 14px;
+            line-height: 1.8;
             color: var(--text-primary);
             white-space: pre-wrap;
             word-break: break-word;
@@ -656,10 +687,11 @@
         .result-card-stats {
             display: flex;
             gap: 8px;
-            margin-top: 10px;
+            margin-top: 12px;
             font-family: var(--font-mono);
-            font-size: 12px;
-            color: var(--text-tertiary);
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-weight: 500;
         }
 
         .result-card.is-error {
@@ -718,11 +750,11 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 10px 14px;
+            padding: 14px 18px;
             background: var(--bg-elevated);
             border: 1px solid var(--border-light);
             border-radius: 6px;
-            font-size: 13px;
+            font-size: 16px;
             cursor: pointer;
             transition: all var(--transition);
         }
@@ -734,7 +766,7 @@
 
         .history-item-title {
             color: var(--text-primary);
-            font-weight: 500;
+            font-weight: 600;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -744,26 +776,12 @@
 
         .history-item-time {
             font-family: var(--font-mono);
-            font-size: 11px;
+            font-size: 13px;
             color: var(--text-tertiary);
             flex-shrink: 0;
             margin-left: 12px;
         }
 
-        /* -- Footer -- */
-        .footer {
-            margin-top: 64px;
-            padding-top: 24px;
-            border-top: 1px solid var(--border-light);
-            text-align: center;
-        }
-
-        .footer p {
-            font-size: 12px;
-            color: var(--text-tertiary);
-            line-height: 1.6;
-        }
-
         /* -- Responsive -- */
         @media (max-width: 640px) {
             .container {
@@ -797,7 +815,11 @@
             }
 
             .result-card {
-                padding: 16px;
+                padding: 20px;
+            }
+
+            .result-card-title {
+                font-size: 18px;
             }
 
             .result-card-content {
@@ -812,24 +834,29 @@
         <header>
             <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 class="header-actions">
+                    <button id="langToggle" class="lang-toggle" title="Language">
+                        <span>KO</span>
+                    </button>
+                    <button id="themeToggle" class="theme-toggle" title="Toggle theme" 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>
             </div>
-            <p class="subtitle">Extract subtitles from YouTube videos</p>
+            <p class="subtitle">YouTube 영상의 자막을 추출합니다</p>
         </header>
 
         <section class="input-section">
@@ -837,7 +864,7 @@
                 <p class="section-label">URL 입력</p>
                 <div class="textarea-wrapper">
                     <textarea id="urlInput" placeholder="YouTube URL을 한 줄에 하나씩 입력하세요&#10;&#10;https://www.youtube.com/watch?v=...&#10;https://youtu.be/..." spellcheck="false"></textarea>
-                    <span class="url-count" id="urlCount">0 / 20</span>
+                    <span class="url-count" id="urlCount">0 / 50</span>
                 </div>
             </div>
 
@@ -865,27 +892,16 @@
 
                         <div class="option-divider"></div>
 
-                        <div class="option-group">
+                        <div class="option-group" style="gap: 16px;">
                             <label class="checkbox-wrapper">
                                 <input type="checkbox" id="denoise">
                                 <span class="checkbox-custom"></span>
                                 <span>노이즈 제거</span>
                             </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>
                                 <span class="checkbox-custom"></span>
-                                <span>메타데이터 포함</span>
+                                <span>URL 포함</span>
                             </label>
                         </div>
                     </div>
@@ -924,10 +940,6 @@
             </div>
             <div id="historyList" class="history-list"></div>
         </section>
-
-        <div class="footer" id="footer" style="display: none;">
-            <p>youtube-transcript-api &middot; 자막 원문만 추출합니다</p>
-        </div>
     </div>
 
     <script>
@@ -948,10 +960,132 @@
         var copyAllBtn = $('#copyAllBtn');
         var downloadAllBtn = $('#downloadAllBtn');
         var denoiseCheckbox = $('#denoise');
-        var keepNewlinesCheckbox = $('#keepNewlines');
         var metadataCheckbox = $('#metadata');
         var urlCount = $('#urlCount');
-        var footer = $('#footer');
+
+        // i18n
+        var LANG_KEY = 'yt-transcript-lang';
+        var currentLang = localStorage.getItem(LANG_KEY) || 'ko';
+        var langToggle = $('#langToggle');
+
+        var i18n = {
+            ko: {
+                pageTitle: 'YouTube Transcript',
+                subtitle: 'YouTube 영상의 자막을 추출합니다',
+                urlLabel: 'URL 입력',
+                urlPlaceholder: 'YouTube URL을 한 줄에 하나씩 입력하세요\n\nhttps://www.youtube.com/watch?v=...\nhttps://youtu.be/...',
+                optionsLabel: '옵션',
+                formatLabel: '형식',
+                langLabel: '언어',
+                denoise: '노이즈 제거',
+                urlInclude: 'URL 포함',
+                extractBtn: '자막 추출',
+                copyAll: '전체 복사',
+                downloadAll: '전체 다운로드',
+                copy: '복사',
+                download: '다운로드',
+                copied: '복사됨 \u2713',
+                loading: '자막을 추출하고 있습니다',
+                successCount: '개 성공',
+                errorCount: '개 실패',
+                maxUrlAlert: '최대 50개의 URL만 입력할 수 있습니다.',
+                requestError: '요청 중 오류가 발생했습니다: ',
+                historyLabel: '최근 추출 기록',
+                clearHistory: '기록 삭제',
+                justNow: '방금',
+                minutesAgo: '분 전',
+                hoursAgo: '시간 전',
+                daysAgo: '일 전',
+                charCount: '자',
+            },
+            en: {
+                pageTitle: 'YouTube Transcript',
+                subtitle: 'Extract subtitles from YouTube videos',
+                urlLabel: 'URLs',
+                urlPlaceholder: 'Enter YouTube URLs, one per line\n\nhttps://www.youtube.com/watch?v=...\nhttps://youtu.be/...',
+                optionsLabel: 'Options',
+                formatLabel: 'Format',
+                langLabel: 'Language',
+                denoise: 'Denoise',
+                urlInclude: 'Include URL',
+                extractBtn: 'Extract',
+                copyAll: 'Copy All',
+                downloadAll: 'Download All',
+                copy: 'Copy',
+                download: 'Download',
+                copied: 'Copied \u2713',
+                loading: 'Extracting subtitles...',
+                successCount: ' succeeded',
+                errorCount: ' failed',
+                maxUrlAlert: 'Maximum 50 URLs allowed.',
+                requestError: 'Request failed: ',
+                historyLabel: 'Recent History',
+                clearHistory: 'Clear',
+                justNow: 'Just now',
+                minutesAgo: 'm ago',
+                hoursAgo: 'h ago',
+                daysAgo: 'd ago',
+                charCount: ' chars',
+            }
+        };
+
+        function t(key) {
+            return i18n[currentLang][key] || i18n['ko'][key] || key;
+        }
+
+        function applyLanguage() {
+            langToggle.querySelector('span').textContent = currentLang.toUpperCase();
+
+            // Update all text elements
+            $('header h1').textContent = t('pageTitle');
+            $('header .subtitle').textContent = t('subtitle');
+
+            // Section labels
+            var labels = $$('.section-label');
+            if (labels[0]) labels[0].textContent = t('urlLabel');
+            if (labels[1]) labels[1].textContent = t('optionsLabel');
+
+            // Textarea placeholder
+            urlInput.placeholder = t('urlPlaceholder');
+
+            // Option labels
+            var optLabels = $$('.option-label');
+            if (optLabels[0]) optLabels[0].textContent = t('formatLabel');
+            if (optLabels[1]) optLabels[1].textContent = t('langLabel');
+
+            // Checkboxes
+            var checkboxSpans = $$('.checkbox-wrapper span:last-child');
+            if (checkboxSpans[0]) checkboxSpans[0].textContent = t('denoise');
+            if (checkboxSpans[1]) checkboxSpans[1].textContent = t('urlInclude');
+
+            // Buttons
+            extractBtn.textContent = t('extractBtn');
+            copyAllBtn.textContent = t('copyAll');
+            downloadAllBtn.textContent = t('downloadAll');
+
+            // Loading text
+            var loadingText = $('.loading-text');
+            if (loadingText) loadingText.textContent = t('loading');
+
+            // History
+            var historyLabel = $('#history .section-label');
+            if (historyLabel) historyLabel.textContent = t('historyLabel');
+            if (clearHistoryBtn) clearHistoryBtn.textContent = t('clearHistory');
+
+            // Update copy/download buttons in results if they exist
+            $$('.btn-copy').forEach(function(btn) {
+                if (!btn.classList.contains('copied')) btn.textContent = t('copy');
+            });
+            $$('.btn-download').forEach(function(btn) { btn.textContent = t('download'); });
+        }
+
+        langToggle.addEventListener('click', function () {
+            currentLang = currentLang === 'ko' ? 'en' : 'ko';
+            localStorage.setItem(LANG_KEY, currentLang);
+            applyLanguage();
+            // Re-render history with new language
+            renderHistory();
+        });
 
         // Theme toggle
         var themeToggle = $('#themeToggle');
@@ -989,10 +1123,10 @@
             var lines = urlInput.value.split('\n').filter(function (l) { return l.trim(); });
             var count = lines.length;
             if (!urlInput.value.trim()) count = 0;
-            urlCount.textContent = count + ' / 20';
+            urlCount.textContent = count + ' / 50';
             urlCount.className = 'url-count';
             if (count > 0) urlCount.classList.add('has-urls');
-            if (count > 20) urlCount.classList.add('limit');
+            if (count > 50) urlCount.classList.add('limit');
         }
 
         urlInput.addEventListener('input', updateUrlCount);
@@ -1029,15 +1163,14 @@
 
             var urls = text.split('\n').map(function (u) { return u.trim(); }).filter(function (u) { return u; });
             if (urls.length === 0) return;
-            if (urls.length > 20) {
-                alert('최대 20개의 URL만 입력할 수 있습니다.');
+            if (urls.length > 50) {
+                alert(t('maxUrlAlert'));
                 return;
             }
 
             extractBtn.disabled = true;
             loading.style.display = 'flex';
             resultsSection.style.display = 'none';
-            footer.style.display = 'none';
             resultsList.innerHTML = '';
 
             try {
@@ -1048,7 +1181,6 @@
                         urls: urls,
                         language: currentLanguage,
                         denoise: denoiseCheckbox.checked,
-                        keep_newlines: keepNewlinesCheckbox.checked,
                         format: currentFormat,
                     }),
                 });
@@ -1064,7 +1196,7 @@
                 renderResults(data);
                 addToHistory(data.results);
             } catch (err) {
-                alert('요청 중 오류가 발생했습니다: ' + err.message);
+                alert(t('requestError') + err.message);
             } finally {
                 extractBtn.disabled = false;
                 loading.style.display = 'none';
@@ -1073,11 +1205,10 @@
 
         function renderResults(data) {
             resultsSection.style.display = 'block';
-            footer.style.display = 'block';
 
-            var statsHtml = '<span class="success-count">' + data.success_count + '개 성공</span>';
+            var statsHtml = '<span class="success-count">' + data.success_count + t('successCount') + '</span>';
             if (data.error_count > 0) {
-                statsHtml += ' &middot; <span class="error-count">' + data.error_count + '개 실패</span>';
+                statsHtml += ' &middot; <span class="error-count">' + data.error_count + t('errorCount') + '</span>';
             }
             stats.innerHTML = statsHtml;
 
@@ -1100,30 +1231,28 @@
                 var actionsHtml = '';
                 if (!result.error) {
                     actionsHtml = '<div class="result-card-actions">' +
-                        '<button class="btn btn-secondary btn-sm btn-copy" data-index="' + index + '">복사</button>' +
-                        '<button class="btn btn-secondary btn-sm btn-download" data-index="' + index + '">다운로드</button>' +
+                        '<button class="btn btn-secondary btn-sm btn-copy" data-index="' + index + '">' + t('copy') + '</button>' +
+                        '<button class="btn btn-secondary btn-sm btn-download" data-index="' + index + '">' + t('download') + '</button>' +
                         '</div>';
                 }
 
                 var idHtml = '';
                 if (result.video_id) {
-                    idHtml = '<a class="result-card-id" href="https://youtube.com/watch?v=' + encodeURIComponent(result.video_id) + '" target="_blank" rel="noopener">' + escapeHtml(result.video_id) + '</a>';
+                    var linkText = result.title || result.video_id;
+                    idHtml = '<a class="result-card-id" href="https://youtube.com/watch?v=' + encodeURIComponent(result.video_id) + '" target="_blank" rel="noopener">' + escapeHtml(linkText) + '</a>';
                 } else {
                     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));
+                    var tokenCount = Math.ceil(charCount / 2);
                     cardStatsHtml = '<div class="result-card-stats">' +
-                        charCount.toLocaleString() + '\uC790 \u00B7 \uC57D ' + readingMinutes + '\uBD84 \uC77D\uAE30' +
+                        charCount.toLocaleString() + t('charCount') + ' \u00B7 ~' + tokenCount.toLocaleString() + ' tokens' +
                         '</div>';
                 }
 
@@ -1253,7 +1382,7 @@
 
         function showCopied(btn) {
             var original = btn.textContent;
-            btn.textContent = '\uBCF5\uC0AC\uB428 \u2713';
+            btn.textContent = t('copied');
             btn.classList.add('copied');
             setTimeout(function () {
                 btn.textContent = original;
@@ -1343,13 +1472,13 @@
             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';
+            if (minutes < 1) return t('justNow');
+            if (minutes < 60) return minutes + t('minutesAgo');
             var hours = Math.floor(minutes / 60);
-            if (hours < 24) return hours + '\uC2DC\uAC04 \uC804';
+            if (hours < 24) return hours + t('hoursAgo');
             var days = Math.floor(hours / 24);
-            if (days < 7) return days + '\uC77C \uC804';
-            return d.toLocaleDateString('ko-KR');
+            if (days < 7) return days + t('daysAgo');
+            return d.toLocaleDateString(currentLang === 'ko' ? 'ko-KR' : 'en-US');
         }
 
         clearHistoryBtn.addEventListener('click', function () {
@@ -1359,6 +1488,9 @@
 
         // Show history on load
         renderHistory();
+
+        // Apply language on load
+        applyLanguage();
     })();
     </script>
 </body>