From 7695ac3edf3fde2830ff727d542594cdb04722de Mon Sep 17 00:00:00 2001
From: jeremygan2021 <jeremygan2021@gmail.com>
Date: Tue, 17 Mar 2026 21:43:33 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=90=E5=AD=97=E7=A8=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/competition/judge_views.py            |  3 +-
 .../templates/judge/dashboard.html            | 65 ++++++++++++++++++-
 2 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/backend/competition/judge_views.py b/backend/competition/judge_views.py
index 0dd8d17..c3466eb 100644
--- a/backend/competition/judge_views.py
+++ b/backend/competition/judge_views.py
@@ -314,7 +314,8 @@ def project_detail_api(request, project_id):
         ai_data = {
             'transcription': latest_task.transcription,
             'summary': latest_task.summary,
-            'auto_chapters_data': latest_task.auto_chapters_data
+            'auto_chapters_data': latest_task.auto_chapters_data,
+            'transcription_data': latest_task.transcription_data
         }
 
     latest_task_any = TranscriptionTask.objects.filter(project=project).order_by('-created_at').first()
diff --git a/backend/competition/templates/judge/dashboard.html b/backend/competition/templates/judge/dashboard.html
index a539c7e..2d3f668 100644
--- a/backend/competition/templates/judge/dashboard.html
+++ b/backend/competition/templates/judge/dashboard.html
@@ -108,9 +108,12 @@
                     
                     <div>
                         <h4 class="text-lg font-semibold text-gray-900 mb-3 flex items-center"><i class="fas fa-headphones mr-2 text-blue-500"></i>项目录音</h4>
-                        <div id="modalAudioSection" class="bg-gray-50 p-4 rounded-lg border border-gray-100 flex items-center justify-center min-h-[80px]">
+                        <div id="modalAudioSection" class="bg-gray-50 p-4 rounded-t-lg border border-gray-100 flex items-center justify-center min-h-[80px]">
                             <!-- Audio player or "No audio" message will be injected here -->
                         </div>
+                        <div id="subtitleContainer" class="bg-black text-white p-3 rounded-b-lg text-center min-h-[48px] flex items-center justify-center text-lg font-medium" style="display: none;">
+                            <span id="subtitleText"></span>
+                        </div>
                     </div>
                     
                     <div id="aiResultSection" style="display:none;" class="border border-indigo-100 rounded-xl overflow-hidden">
@@ -379,9 +382,17 @@ async function viewProject(id) {
         
         // Render Audio Player
         const audioSection = document.getElementById('modalAudioSection');
+        const subtitleContainer = document.getElementById('subtitleContainer');
+        const subtitleText = document.getElementById('subtitleText');
+        
+        if (subtitleContainer && subtitleText) {
+            subtitleText.innerText = '';
+            subtitleContainer.style.display = 'none';
+        }
+
         if (data.audio_url) {
             audioSection.innerHTML = `
-                <audio controls class="w-full">
+                <audio id="projectAudio" controls class="w-full">
                     <source src="${data.audio_url}" type="audio/mpeg">
                     <source src="${data.audio_url}" type="audio/mp4">
                     您的浏览器不支持音频播放。
@@ -403,6 +414,56 @@ async function viewProject(id) {
         if (data.ai_result) {
             aiSection.style.display = 'block';
             
+            // Subtitle integration
+            if (data.audio_url && data.ai_result.transcription_data && subtitleContainer && subtitleText) {
+                let transData = data.ai_result.transcription_data;
+                if (typeof transData === 'string') {
+                    try { transData = JSON.parse(transData); } catch(e) { console.error('Error parsing transcription_data', e); }
+                }
+                
+                if (transData && transData.Transcription && transData.Transcription.Paragraphs) {
+                    subtitleContainer.style.display = 'flex';
+                    
+                    const sentences = [];
+                    transData.Transcription.Paragraphs.forEach(p => {
+                        if (p.Words && p.Words.length > 0) {
+                            let currentSentenceId = null;
+                            let currentSentence = { text: '', start: 0, end: 0 };
+                            
+                            p.Words.forEach(w => {
+                                if (w.SentenceId !== currentSentenceId) {
+                                    if (currentSentenceId !== null) {
+                                        sentences.push({...currentSentence});
+                                    }
+                                    currentSentenceId = w.SentenceId;
+                                    currentSentence = { text: w.Text, start: w.Start, end: w.End };
+                                } else {
+                                    currentSentence.text += w.Text;
+                                    currentSentence.end = w.End;
+                                }
+                            });
+                            if (currentSentenceId !== null) {
+                                sentences.push({...currentSentence});
+                            }
+                        }
+                    });
+                    
+                    const audio = document.getElementById('projectAudio');
+                    if (audio) {
+                        audio.addEventListener('timeupdate', () => {
+                            const currentTimeMs = audio.currentTime * 1000;
+                            // Add a small buffer (e.g. 200ms) to make subtitle display smoother
+                            const activeSentence = sentences.find(s => currentTimeMs >= (s.start - 200) && currentTimeMs <= (s.end + 200));
+                            if (activeSentence) {
+                                subtitleText.innerText = activeSentence.text;
+                            } else {
+                                subtitleText.innerText = '';
+                            }
+                        });
+                    }
+                }
+            }
+            
             const summaryDiv = document.getElementById('modalAiSummary');
             const toggleBtn = document.getElementById('toggleAiSummaryBtn');
             const toggleText = document.getElementById('toggleAiSummaryText');