feat(youtube): add time-synced subtitles via IFrame API; add proxy fallback to fetch auto-generated captions; annotate with hiragana + POS colors; clickable to seek

app.py

@@ -7,6 +7,12 @@ import pytesseract
 import cv2
 import numpy as np
 from typing import List, Dict, Optional
+import html as _html
+import json as _json
+try:
+    import requests
+except Exception:
+    requests = None
 
 # YouTube transcript & translation (optional)
 try:
@@ -340,7 +346,13 @@ def fetch_transcript(video_id: str, lang_priority: List[str]) -> List[Dict]:
     except TranscriptsDisabled:
         raise RuntimeError("该视频字幕被禁用。")
     except Exception as e:
-        raise RuntimeError(f"拉取字幕失败: {e}")
+        # 常见于平台无法访问 YouTube 的网络/DNS 限制，尝试代理抓取
+        fallback = _fetch_transcript_via_proxy(video_id, lang_priority)
+        if fallback:
+            return fallback
+        raise RuntimeError(
+            "拉取字幕失败: {}。若 Space 无法直连 YouTube，已尝试代理抓取。".format(e)
+        )
 
     for lang in lang_priority:
         try:
@@ -356,8 +368,72 @@ def fetch_transcript(video_id: str, lang_priority: List[str]) -> List[Dict]:
         translated = tr.translate(target)
         return translated.fetch()
     except Exception:
+        # 尝试代理抓取
+        fallback = _fetch_transcript_via_proxy(video_id, lang_priority)
+        if fallback:
+            return fallback
         raise RuntimeError("未找到可用字幕。建议换个视频或检查语言。")
 
+def _fetch_transcript_via_proxy(video_id: str, lang_priority: List[str]) -> Optional[List[Dict]]:
+    """Fallback: use r.jina.ai to fetch YouTube page and timedtext via a CORS-friendly proxy.
+    Returns list of dicts with text,start,duration or None if fails.
+    """
+    if requests is None:
+        return None
+    try:
+        resp = requests.get(f"https://r.jina.ai/https://www.youtube.com/watch?v={video_id}", timeout=12)
+        if resp.status_code != 200:
+            return None
+        html = resp.text
+        # Find captionTracks JSON
+        m = re.search(r'"captionTracks":\s*(\[.*?\])', html)
+        if not m:
+            return None
+        tracks_json = m.group(1)
+        tracks = _json.loads(tracks_json)
+        # Pick best track
+        chosen = None
+        # preferred languages
+        for lang in (lang_priority or []):
+            for tr in tracks:
+                if tr.get('languageCode') == lang:
+                    chosen = tr
+                    break
+            if chosen:
+                break
+        # fallback: any Japanese or ASR ja
+        if not chosen:
+            for tr in tracks:
+                lc = tr.get('languageCode', '')
+                if lc.startswith('ja'):
+                    chosen = tr
+                    break
+        # last resort: first track
+        if not chosen and tracks:
+            chosen = tracks[0]
+        if not chosen:
+            return None
+        base_url = chosen.get('baseUrl')
+        if not base_url:
+            return None
+        # Fetch timedtext XML through proxy
+        xml_url = f"https://r.jina.ai/{base_url}"
+        x = requests.get(xml_url, timeout=12)
+        if x.status_code != 200:
+            return None
+        xml = x.text
+        items: List[Dict] = []
+        for m in re.finditer(r'<text[^>]*start="([0-9.]+)"[^>]*dur="([0-9.]+)"[^>]*>(.*?)</text>', xml):
+            st = float(m.group(1))
+            du = float(m.group(2))
+            tx = m.group(3)
+            # Unescape HTML entities and replace line breaks
+            tx = _html.unescape(tx.replace('\n', ' ').replace('<br>', ' '))
+            items.append({'text': tx, 'start': st, 'duration': du})
+        return items or None
+    except Exception:
+        return None
+
 def translate_zh(text: str) -> Optional[str]:
     if not text or GoogleTranslator is None:
         return None
@@ -368,26 +444,32 @@ def translate_zh(text: str) -> Optional[str]:
 
 def render_transcript_html(items: List[Dict], grammar_mode: bool, with_zh: bool) -> str:
     lines = []
+    idx = 0
     for it in items:
         raw = normalize_text(it.get('text', ''))
         if not raw:
+            idx += 1
             continue
-        ts = seconds_to_mmss(float(it.get('start', 0)))
+        start = float(it.get('start', 0.0))
+        dur = float(it.get('duration', 0.0))
+        ts = seconds_to_mmss(start)
         jp_html = to_furigana_inline(raw, grammar_mode)
         zh = translate_zh(raw) if with_zh else None
         zh_html = f"<div style='color:#444;margin-top:4px;'>【中】{zh}</div>" if zh else ""
         lines.append(
-            f"<div style='padding:8px 10px;margin:6px 0;border-left:4px solid #ddd;background:#fff;'>"
+            f"<div class='yt-line' data-yt-idx='{idx}' data-yt-start='{start}' data-yt-dur='{dur}' "
+            f"style='padding:8px 10px;margin:6px 0;border-left:4px solid #ddd;background:#fff;border-radius:6px;'>"
             f"<div style='font-size:0.9em;color:#888;'>⏱ {ts}</div>"
             f"<div style='line-height:2.0;font-size:1.1em;'>{jp_html}</div>"
             f"{zh_html}"
             f"</div>"
         )
+        idx += 1
     if not lines:
         return "<div>未获取到字幕内容。</div>"
     legend = create_pos_legend() if grammar_mode else ""
     return (
-        "<div style='max-height:70vh;overflow:auto;padding:8px;background:#f6f7f9;border-radius:8px;'>"
+        "<div data-yt-scroll style='max-height:70vh;overflow:auto;padding:8px;background:#f6f7f9;border-radius:8px;'>"
         + legend
         + "".join(lines)
         + "</div>"
@@ -400,9 +482,10 @@ def show_youtube(url: str, grammar_mode: bool, with_zh: bool):
     vid = parse_video_id(url)
     if not vid:
         return "", "", "未能解析视频ID，请检查链接。"
+    iframe_id = f"yt-player-{vid}"
     iframe = (
         f"<div style='position:relative;padding-top:56.25%;'>"
-        f"<iframe src='https://www.youtube.com/embed/{vid}' "
+        f"<iframe id='{iframe_id}' src='https://www.youtube.com/embed/{vid}?enablejsapi=1' "
         f"style='position:absolute;top:0;left:0;width:100%;height:100%;border:0;' "
         f"allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>"
         f"</div>"
@@ -411,9 +494,87 @@ def show_youtube(url: str, grammar_mode: bool, with_zh: bool):
         items = fetch_transcript(vid, ["ja", "ja-JP"])
     except Exception as e:
         return iframe, "", f"加载字幕失败：{e}"
-    html = render_transcript_html(items, grammar_mode, with_zh)
-    tip = "已加载字幕。支持平假名注音与词性上色。" + (" 已附中文释义。" if with_zh else "")
-    return iframe, html, tip
+    # 渲染字幕并注入同步脚本
+    html_core = render_transcript_html(items, grammar_mode, with_zh)
+    # 将字幕的时间戳打包为 JSON，供前端脚本同步
+    safe_items = []
+    for it in items:
+        safe_items.append({
+            'start': float(it.get('start', 0.0)),
+            'duration': float(it.get('duration', 0.0)),
+        })
+    import json
+    times_json = json.dumps(safe_items)
+    sync_script = f"""
+    <style>
+      .yt-line-active {{
+        background: #fff4cc;
+        border-left-color: #f0b400 !important;
+      }}
+      .yt-line {{ cursor: pointer; }}
+    </style>
+    <script>
+    (function(){{
+      var vid = {repr(vid)};
+      var iframeId = {repr(iframe_id)};
+      var items = {times_json};
+      // 加载 IFrame API（若尚未加载）
+      function ensureAPI(cb){{
+        if (window.YT && window.YT.Player) return cb();
+        if (!document.getElementById('yt-iframe-api')){{
+          var s = document.createElement('script');
+          s.id='yt-iframe-api';
+          s.src='https://www.youtube.com/iframe_api';
+          document.body.appendChild(s);
+        }}
+        var t = setInterval(function(){{
+          if (window.YT && window.YT.Player) {{ clearInterval(t); cb(); }}
+        }}, 200);
+      }}
+      var player;
+      function startSync(){{
+        try {{
+          player = player || new YT.Player(iframeId);
+        }} catch(e) {{ return; }}
+        // 点击跳转
+        document.querySelectorAll('[data-yt-start]').forEach(function(el){{
+          el.addEventListener('click', function(){{
+            var st = parseFloat(el.getAttribute('data-yt-start')||'0');
+            if (player && player.seekTo) player.seekTo(st, true);
+          }});
+        }});
+        // 定时高亮
+        var last = -1;
+        setInterval(function(){{
+          if (!player || !player.getCurrentTime) return;
+          var t = player.getCurrentTime();
+          var idx = -1;
+          for (var i=0;i<items.length;i++){{
+            var s = items[i].start, e = s + items[i].duration;
+            if (t >= s && t < e) {{ idx = i; break; }}
+          }}
+          if (idx !== last) {{
+            last = idx;
+            document.querySelectorAll('[data-yt-idx]').forEach(function(el){{ el.classList.remove('yt-line-active'); }});
+            var cur = document.querySelector('[data-yt-idx="'+idx+'"]');
+            if (cur) {{
+              cur.classList.add('yt-line-active');
+              // 滚动到可见区域
+              var parent = cur.closest('[data-yt-scroll]');
+              if (parent) {{
+                 var top = cur.offsetTop - 80;
+                 parent.scrollTo({{ top: top, behavior: 'smooth' }});
+              }}
+            }}
+          }}
+        }}, 250);
+      }}
+      ensureAPI(startSync);
+    }})();
+    </script>
+    """
+    tip = "已加载字幕并开启同步。支持点击字幕跳转、自动高亮。" + (" 已附中文释义。" if with_zh else "")
+    return iframe, html_core + sync_script, tip
 
 # ----- OCR from screenshot -----
 def ocr_image(img: np.ndarray):

requirements.txt

@@ -6,3 +6,4 @@ pytesseract==0.3.13
 opencv-python-headless==4.10.0.84
 youtube-transcript-api==0.6.2
 deep-translator==1.11.4
+requests==2.32.3