fix FE & schema

app/schemas/models.py

@@ -15,15 +15,23 @@ class ProcessingStatus(str, Enum):
 
 
 class TranscriptSegment(BaseModel):
-    """A single segment of the transcript with speaker and timing."""
-    start: float = Field(..., description="Start time in seconds")
-    end: float = Field(..., description="End time in seconds")
-    speaker: str = Field(..., description="Speaker identifier (e.g. SPEAKER_0)")
-    role: Optional[str] = Field(
+    start: float
+    end: float
+
+    speaker: Optional[str] = Field(
         default=None,
-        description="Speaker role (e.g. NV, KH)"
+        description="Internal speaker id (debug only)"
+    )
+
+    role: str = Field(
+        ...,
+        description="Conversation role (NV = agent, KH = customer)"
+    )
+
+    text: str = Field(
+        ...,
+        description="Transcribed text"
     )
-    text: str = Field(..., description="Transcribed text")
 
     
     @property
@@ -63,11 +71,13 @@ class TranscriptionResponse(BaseModel):
     duration: float = Field(default=0.0, description="Audio duration in seconds")
     speaker_count: int = Field(default=0, description="Number of detected speakers")
     processing_time: float = Field(default=0.0, description="Processing time in seconds")
+    speakers: Optional[list[str]] = None
     
     roles: Optional[dict[str, str]] = Field(
         default=None,
-        description="Speaker to role mapping (e.g. SPEAKER_0 → AGENT)"
+        description="Internal mapping speaker_id → role (debug / audit only)"
     )
+
     download_txt: Optional[str] = Field(default=None, description="Download URL for TXT file")
     download_csv: Optional[str] = Field(default=None, description="Download URL for CSV file")
 

app/static/js/app.js

@@ -206,53 +206,68 @@ document.addEventListener('DOMContentLoaded', () => {
     // =====================
 
     function displayResults(result) {
-        // Update metadata
-        elements.speakerCount.textContent =`${result.speaker_count} speaker${result.speaker_count !== 1 ? 's' : ''}`;
+        // ===== Metadata =====
+
+        // Nếu chỉ dùng ROLE thì không nên hiển thị speaker_count
+        if (result.roles) {
+            const roleCount = Object.keys(result.roles).length;
+            elements.speakerCount.textContent = `${roleCount} role${roleCount !== 1 ? 's' : ''}`;
+        } else {
+            elements.speakerCount.textContent = '';
+        }
+
+        elements.durationInfo.textContent = formatDuration(result.duration || 0);
+        elements.processingTime.textContent = `${result.processing_time || 0}s`;
 
-        elements.durationInfo.textContent = formatDuration(result.duration);
-        elements.processingTime.textContent = `${result.processing_time}s`;
+        // ===== Download links =====
+        if (result.download_txt) {
+            elements.downloadTxt.href = result.download_txt;
+            elements.downloadTxt.style.display = 'inline-block';
+        }
 
-        // Set download links
-        elements.downloadTxt.href = result.download_txt;
-        elements.downloadCsv.href = result.download_csv;
+        if (result.download_csv) {
+            elements.downloadCsv.href = result.download_csv;
+            elements.downloadCsv.style.display = 'inline-block';
+        }
 
-        // Render transcript segments
-        renderTranscript(result.segments);
+        // ===== Render transcript =====
+        renderTranscript(result.segments || []);
 
-        // Show results section
+        // ===== Show results =====
         showSection('results');
     }
 
     function renderTranscript(segments) {
         elements.transcriptContainer.innerHTML = '';
 
-        const speakerColors = {};
+        const roleColors = {};
         let colorIndex = 0;
 
         segments.forEach((segment) => {
+            const role = segment.role || 'UNKNOWN';
 
-            const displayName = segment.role
-                ? segment.role
-                : segment.speaker;
-
-            if (!(displayName in speakerColors)) {
+            if (!(role in roleColors)) {
                 colorIndex++;
-                speakerColors[displayName] = `speaker-${Math.min(colorIndex, 5)}`;
+                roleColors[role] = `speaker-${Math.min(colorIndex, 5)}`;
             }
 
             const segmentEl = document.createElement('div');
-            segmentEl.className = `segment ${speakerColors[displayName]}`;
+            segmentEl.className = `segment ${roleColors[role]}`;
+
+            const start = typeof segment.start === 'number' ? segment.start : 0;
+            const end = typeof segment.end === 'number' ? segment.end : 0;
+            const text = segment.text ? escapeHtml(segment.text) : '';
 
             segmentEl.innerHTML = `
                 <div class="segment-header">
                     <span class="segment-speaker">
-                        ${escapeHtml(displayName)}
+                        ${escapeHtml(role)}
                     </span>
                     <span class="segment-time">
-                        ${formatTime(segment.start)} - ${formatTime(segment.end)}
+                        ${formatTime(start)} - ${formatTime(end)}
                     </span>
                 </div>
-                <p class="segment-text">${escapeHtml(segment.text)}</p>
+                <p class="segment-text">${text}</p>
             `;
 
             elements.transcriptContainer.appendChild(segmentEl);
@@ -260,6 +275,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
 
+
     function formatTime(seconds) {
         const h = Math.floor(seconds / 3600);
         const m = Math.floor((seconds % 3600) / 60);