Select Template
${templates
.map(
(t) => `
`
)
.join("")}
`;
document.body.appendChild(modal);
// Wait for user selection
await new Promise((resolve) => {
modal.querySelectorAll(".template-option").forEach((btn) => {
btn.addEventListener("click", () => {
templateId = btn.dataset.templateId;
modal.remove();
resolve();
});
});
modal
.querySelector(".cancel-btn")
.addEventListener("click", () => {
templateId = "cancelled"; // Mark as cancelled
modal.remove();
resolve();
});
modal
.querySelector(".download-without-template-btn")
.addEventListener("click", () => {
templateId = "none"; // Use 'none' to indicate no template
modal.remove();
resolve();
});
modal.addEventListener("click", (e) => {
if (e.target === modal) {
templateId = "cancelled"; // Mark as cancelled when clicking outside
modal.remove();
resolve();
}
});
});
if (
templateId === null ||
templateId === undefined ||
templateId === "cancelled"
) {
// User cancelled
return;
}
}
// Download the transcript with the selected template
const url = templateId && templateId !== "none"
? `/tool/speakr/recording/${selectedRecording.value.id}/download/transcript?template_id=${templateId}`
: `/tool/speakr/recording/${selectedRecording.value.id}/download/transcript?template_id=none`;
const response = await fetch(url);
if (!response.ok) {
throw new Error("Failed to download transcript");
}
const blob = await response.blob();
const contentDisposition = response.headers.get(
"content-disposition"
);
const filename = getDownloadFilenameFromHeaders(
contentDisposition,
"转录稿.docx"
);
// Create download link
const downloadUrl = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(downloadUrl);
showToast("Transcript downloaded successfully!");
} catch (error) {
console.error("Error downloading transcript:", error);
showToast("Failed to download transcript", "fa-exclamation-circle");
}
};
const downloadNotes = async () => {
if (!selectedRecording.value || !selectedRecording.value.notes) {
showToast("No notes available to download.", "fa-exclamation-circle");
return;
}
try {
const response = await fetch(
`/tool/speakr/recording/${selectedRecording.value.id}/download/notes`
);
if (!response.ok) {
const error = await response.json();
showToast(
error.error || "Failed to download notes",
"fa-exclamation-circle"
);
return;
}
// Create blob and download
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.style.display = "none";
a.href = url;
// Get filename from response headers or use default
const contentDisposition = response.headers.get(
"Content-Disposition"
);
const filename = getDownloadFilenameFromHeaders(
contentDisposition,
"笔记.docx"
);
a.download = filename;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
showToast("Notes downloaded successfully!", "fa-check-circle");
} catch (error) {
console.error("Download failed:", error);
showToast("Failed to download notes", "fa-exclamation-circle");
}
};
const downloadEventICS = async (event) => {
if (!event || !event.id) {
showToast("Invalid event data", "fa-exclamation-circle");
return;
}
try {
const response = await fetch(
`/tool/speakr/api/event/${event.id}/ics`
);
if (!response.ok) {
const error = await response.json();
showToast(
error.error || "Failed to download event",
"fa-exclamation-circle"
);
return;
}
// Create blob and download
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.style.display = "none";
a.href = url;
a.download = `${event.title || "event"}.ics`;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
showToast(
`Event "${event.title}" downloaded. Open the file to add to your calendar.`,
"fa-calendar-check",
3000
);
} catch (error) {
console.error("Download failed:", error);
showToast("Failed to download event", "fa-exclamation-circle");
}
};
const downloadICS = async () => {
if (
!selectedRecording.value ||
!selectedRecording.value.events ||
selectedRecording.value.events.length === 0
) {
showToast("No events to export", "fa-exclamation-circle");
return;
}
try {
const response = await fetch(
`/tool/speakr/api/recording/${selectedRecording.value.id}/events/ics`
);
if (!response.ok) {
const error = await response.json();
showToast(
error.error || "Failed to export events",
"fa-exclamation-circle"
);
return;
}
// Create blob and download
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.style.display = "none";
a.href = url;
a.download = `events-${
selectedRecording.value.title || selectedRecording.value.id
}.ics`;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
showToast(
`Exported ${selectedRecording.value.events.length} events`,
"fa-calendar-check"
);
} catch (error) {
console.error("Download all events ICS error:", error);
showToast("Failed to export events", "fa-exclamation-circle");
}
};
const formatEventDateTime = (dateTimeStr) => {
if (!dateTimeStr) return "";
try {
const date = new Date(dateTimeStr);
const options = {
weekday: "short",
year: "numeric",
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
};
return date.toLocaleString(undefined, options);
} catch (e) {
return dateTimeStr;
}
};
const downloadChat = async () => {
if (!selectedRecording.value || chatMessages.value.length === 0) {
showToast("No chat messages to download.", "fa-exclamation-circle");
return;
}
try {
const response = await fetch(
`/tool/speakr/recording/${selectedRecording.value.id}/download/chat`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRFToken": csrfToken.value,
},
body: JSON.stringify({
messages: chatMessages.value,
}),
}
);
if (!response.ok) {
const error = await response.json();
showToast(
error.error || "Failed to download chat",
"fa-exclamation-circle"
);
return;
}
// Create blob and download
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.style.display = "none";
a.href = url;
// Get filename from response headers or use default
const contentDisposition = response.headers.get(
"Content-Disposition"
);
const filename = getDownloadFilenameFromHeaders(
contentDisposition,
"对话记录.docx"
);
a.download = filename;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
showToast("Notes downloaded successfully!");
} catch (error) {
console.error("Download failed:", error);
showToast("Failed to download notes", "fa-exclamation-circle");
}
};
const clearChat = () => {
if (chatMessages.value.length > 0) {
chatMessages.value = [];
showToast("Chat cleared", "fa-broom");
}
};
const openShareModal = async (recording) => {
recordingToShare.value = recording;
shareOptions.share_summary = true;
shareOptions.share_notes = true;
generatedShareLink.value = "";
existingShareDetected.value = false;
showShareModal.value = true;
// Check for existing share
try {
const response = await fetch(
`/tool/speakr/api/recording/${recording.id}/share`,
{
method: "GET",
}
);
const data = await response.json();
if (response.ok && data.exists) {
generatedShareLink.value = data.share_url;
existingShareDetected.value = true;
shareOptions.share_summary = data.share.share_summary;
shareOptions.share_notes = data.share.share_notes;
}
} catch (error) {
console.error("Error checking for existing share:", error);
}
};
const closeShareModal = () => {
showShareModal.value = false;
recordingToShare.value = null;
existingShareDetected.value = false;
};
const createShare = async (forceNew = false) => {
if (!recordingToShare.value) return;
try {
const response = await fetch(
`/tool/speakr/api/recording/${recordingToShare.value.id}/share`,
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
...shareOptions,
force_new: forceNew,
}),
}
);
const data = await response.json();
if (!response.ok)
throw new Error(data.error || "Failed to create share link");
generatedShareLink.value = data.share_url;
existingShareDetected.value = data.existing && !forceNew;
if (data.existing && !forceNew) {
// Show that we're using an existing share
showToast("Using existing share link", "fa-link");
} else {
showToast("Share link created successfully!", "fa-check-circle");
}
} catch (error) {
setGlobalError(`Failed to create share link: ${error.message}`);
}
};
const copyShareLink = () => {
if (!generatedShareLink.value) return;
navigator.clipboard.writeText(generatedShareLink.value).then(() => {
showToast("Share link copied to clipboard!");
});
};
const openSharesList = async () => {
isLoadingShares.value = true;
showSharesListModal.value = true;
try {
const response = await fetch("/tool/speakr/api/shares");
const data = await response.json();
if (!response.ok)
throw new Error(data.error || "Failed to load shared items");
userShares.value = data;
} catch (error) {
setGlobalError(`Failed to load shared items: ${error.message}`);
} finally {
isLoadingShares.value = false;
}
};
const closeSharesList = () => {
showSharesListModal.value = false;
userShares.value = [];
};
const updateShare = async (share) => {
try {
const response = await fetch(`/tool/speakr/api/share/${share.id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
share_summary: share.share_summary,
share_notes: share.share_notes,
}),
});
const data = await response.json();
if (!response.ok)
throw new Error(data.error || "Failed to update share");
showToast("Share permissions updated.", "fa-check-circle");
} catch (error) {
setGlobalError(`Failed to update share: ${error.message}`);
}
};
const confirmDeleteShare = (share) => {
shareToDelete.value = share;
showShareDeleteModal.value = true;
};
const cancelDeleteShare = () => {
shareToDelete.value = null;
showShareDeleteModal.value = false;
};
const deleteShare = async () => {
if (!shareToDelete.value) return;
const shareId = shareToDelete.value.id;
try {
const response = await fetch(`/tool/speakr/api/share/${shareId}`, {
method: "DELETE",
});
const data = await response.json();
if (!response.ok)
throw new Error(data.error || "Failed to delete share");
userShares.value = userShares.value.filter((s) => s.id !== shareId);
showToast("Share link deleted successfully.", "fa-check-circle");
showShareDeleteModal.value = false;
shareToDelete.value = null;
} catch (error) {
setGlobalError(`Failed to delete share: ${error.message}`);
}
};
// --- Watchers ---
watch(
uploadQueue,
(newQueue, oldQueue) => {
if (
newQueue.length === 0 &&
oldQueue.length > 0 &&
!isProcessingActive.value
) {
console.log("Upload queue processing finished.");
setTimeout(() => (progressPopupMinimized.value = true), 500);
setTimeout(() => {
if (
completedInQueue.value === totalInQueue.value &&
!isProcessingActive.value
) {
progressPopupClosed.value = true;
}
}, 2000);
}
},
{ deep: true }
);
// Watch for changes to speakerMap to handle "This is Me" functionality
watch(
speakerMap,
(newSpeakerMap) => {
if (!newSpeakerMap) return;
Object.keys(newSpeakerMap).forEach((speakerId) => {
const speakerData = newSpeakerMap[speakerId];
if (
speakerData.isMe &&
currentUserName.value &&
!speakerData.name
) {
// Automatically fill in the user's name when "This is Me" is checked
speakerData.name = currentUserName.value;
} else if (
!speakerData.isMe &&
speakerData.name === currentUserName.value
) {
// Clear the name if "This is Me" is unchecked and the name matches the current user
speakerData.name = "";
}
});
},
{ deep: true }
);
// Watch for tab changes to save content properly
watch(selectedTab, (newTab, oldTab) => {
// Close maximized chat when switching tabs
if (isChatMaximized.value) {
isChatMaximized.value = false;
}
// Save content when switching away from notes tab but keep editor open
if (
oldTab === "notes" &&
editingNotes.value &&
markdownEditorInstance.value
) {
// Save the current content from the editor
const currentContent = markdownEditorInstance.value.value();
selectedRecording.value.notes = currentContent;
// Call auto-save instead of saveInlineEdit to keep editor open
autoSaveNotes();
// Store that we need to recreate the editor when coming back
tempNotesContent.value = currentContent;
}
// Save content when switching away from summary tab but keep editor open
if (
oldTab === "summary" &&
editingSummary.value &&
summaryMarkdownEditorInstance.value
) {
// Save the current content from the editor
const currentContent = summaryMarkdownEditorInstance.value.value();
selectedRecording.value.summary = currentContent;
// Call auto-save instead of saveInlineEdit to keep editor open
autoSaveSummary();
// Store that we need to recreate the editor when coming back
tempSummaryContent.value = currentContent;
}
// Re-initialize editors when switching back to tabs
if (newTab === "notes" && editingNotes.value) {
// Destroy old instance if exists
if (markdownEditorInstance.value) {
markdownEditorInstance.value.toTextArea();
markdownEditorInstance.value = null;
}
// Re-initialize the editor in next tick
nextTick(() => {
initializeMarkdownEditor();
});
}
if (newTab === "summary" && editingSummary.value) {
// Destroy old instance if exists
if (summaryMarkdownEditorInstance.value) {
summaryMarkdownEditorInstance.value.toTextArea();
summaryMarkdownEditorInstance.value = null;
}
// Re-initialize the editor in next tick
nextTick(() => {
initializeSummaryMarkdownEditor();
});
}
});
// Watch for mobile tab changes similarly
watch(mobileTab, (newTab, oldTab) => {
// Save content when switching away from notes tab but keep editor open
if (
oldTab === "notes" &&
editingNotes.value &&
markdownEditorInstance.value
) {
const currentContent = markdownEditorInstance.value.value();
selectedRecording.value.notes = currentContent;
autoSaveNotes(); // Use auto-save instead
tempNotesContent.value = currentContent;
}
// Save content when switching away from summary tab but keep editor open
if (
oldTab === "summary" &&
editingSummary.value &&
summaryMarkdownEditorInstance.value
) {
const currentContent = summaryMarkdownEditorInstance.value.value();
selectedRecording.value.summary = currentContent;
autoSaveSummary(); // Use auto-save instead
tempSummaryContent.value = currentContent;
}
// Re-initialize editors when switching back to tabs on mobile
if (newTab === "notes" && editingNotes.value) {
if (markdownEditorInstance.value) {
markdownEditorInstance.value.toTextArea();
markdownEditorInstance.value = null;
}
nextTick(() => {
initializeMarkdownEditor();
});
}
if (newTab === "summary" && editingSummary.value) {
if (summaryMarkdownEditorInstance.value) {
summaryMarkdownEditorInstance.value.toTextArea();
summaryMarkdownEditorInstance.value = null;
}
nextTick(() => {
initializeSummaryMarkdownEditor();
});
}
});
watch(selectedRecording, (newVal, oldVal) => {
if (newVal?.id !== oldVal?.id) {
// Save any pending edits before switching recordings
if (
editingNotes.value &&
markdownEditorInstance.value &&
oldVal?.id
) {
selectedRecording.value = oldVal; // Temporarily restore old recording
saveEditNotes(); // This will save and cleanup
selectedRecording.value = newVal; // Switch back to new recording
}
if (
editingSummary.value &&
summaryMarkdownEditorInstance.value &&
oldVal?.id
) {
selectedRecording.value = oldVal; // Temporarily restore old recording
saveEditSummary(); // This will save and cleanup
selectedRecording.value = newVal; // Switch back to new recording
}
chatMessages.value = [];
showChat.value = false;
selectedTab.value = "summary";
editingParticipants.value = false;
editingMeetingDate.value = false;
editingSummary.value = false;
editingNotes.value = false;
// Fix WebM duration issue by forcing metadata load
if (newVal?.id) {
nextTick(() => {
const audioElements = document.querySelectorAll("audio");
audioElements.forEach((audio) => {
if (
audio.src &&
audio.src.includes(`tool/speakr/audio/${newVal.id}`)
) {
// For WebM files, we need to seek to end to get duration
const fixDuration = () => {
if (!isFinite(audio.duration) || audio.duration === 0) {
audio.currentTime = 1e101; // Seek to "infinity" to load duration
audio.addEventListener(
"timeupdate",
function resetTime() {
audio.currentTime = 0;
audio.removeEventListener("timeupdate", resetTime);
},
{ once: true }
);
}
};
// Try to fix duration when metadata loads
audio.addEventListener("loadedmetadata", fixDuration, {
once: true,
});
// Also try immediately in case metadata is already loaded
if (audio.readyState >= 1) {
fixDuration();
}
}
});
});
}
}
});
// 会议记录页面
watch(currentView, (newView) => {
if (newView === "recording") {
// Initialize recording markdown editor when switching to recording view
nextTick(() => {
initializeRecordingMarkdownEditor();
getBaseInfo();
is_final.value = false;
// 清空上一次的实时转录文本
asrResultOnline.value = "";
// ===== 清理旧的 Recorder 实例 =====
// 根本原因修复：旧 rec 的 onProcess 回调在旧闭包中持续活跃，
// 向已停止的旧 wsconnecter 发送数据，导致缓冲区溢出和 WebSocket 未连接刷屏
if (rec) {
try { rec.close(); } catch(e) { console.warn('关闭旧rec失败:', e); }
rec = null;
}
if (rec2) {
try { rec2.close(); } catch(e) { console.warn('关闭旧rec2失败:', e); }
rec2 = null;
}
if (asrAudioContext) {
try { asrAudioContext.close(); } catch(e) {}
asrAudioContext = null;
}
if (asrAudioContext2) {
try { asrAudioContext2.close(); } catch(e) {}
asrAudioContext2 = null;
}
//语音实时转换相关
//online的ws示例
var wsconnecter = new WebSocketConnectMethod({
msgHandle: getJsonMessage,
stateHandle: getConnState,
});
//offline的ws示例
var wsconnecter2 = new WebSocketConnectMethod({
msgHandle: getJsonMessage2,
stateHandle: getConnState2,
});
webReader = wsconnecter;
webReader2 = wsconnecter2;
var audioBlob;
var sampleBuf = new Int16Array();
var sampleBuf2 = new Int16Array();
const asrChunkSize = 960;
const asrBufferWarnSamples = 20000;
const asrBufferHardLimitSamples = 16000 * 5;
var rec_text = "";
var offline_text = "";
var rec_textOnline = "";
var offlineSentenceHandoffText = "";
var rec_textoffline = "";
var pendingSentenceQueue = [];
let pendingSentenceSequence = 0;
var lastOnlineTimestamp = null; // 记录上次在线转录的时间戳
function extractTimestampMs(timestampPayload) {
if (!timestampPayload) {
return null;
}
try {
const timestampData =
typeof timestampPayload === "string"
? JSON.parse(timestampPayload)
: timestampPayload;
if (!Array.isArray(timestampData) || timestampData.length === 0) {
return null;
}
const lastItem = timestampData[timestampData.length - 1];
if (!Array.isArray(lastItem) || lastItem.length === 0) {
return null;
}
const endOrStart =
lastItem.length > 1 ? Number(lastItem[1]) : Number(lastItem[0]);
return Number.isFinite(endOrStart) ? endOrStart : null;
} catch (error) {
return null;
}
}
function getLatestRealtimeTimestamp() {
const latestSegmentTimestamp = segmentList.reduce(
(latest, segment) =>
Number.isFinite(segment?.timestampMs)
? Math.max(latest, segment.timestampMs)
: latest,
-1
);
const latestPendingTimestamp = pendingSentenceQueue.reduce(
(latest, item) =>
Number.isFinite(item.timestampMs)
? Math.max(latest, item.timestampMs)
: latest,
-1
);
const latestOnlineTimestamp = Number.isFinite(lastOnlineTimestamp)
? lastOnlineTimestamp
: -1;
return Math.max(
latestSegmentTimestamp,
latestPendingTimestamp,
latestOnlineTimestamp
);
}
function getRealtimeCarryoverTail(text, maxLength = 160) {
return (text || "").slice(-maxLength);
}
function getSharedRealtimeSuffix(
originalText,
editedText,
maxLength = 80
) {
const original = originalText || "";
const edited = editedText || "";
const maxSuffixLength = Math.min(
maxLength,
original.length,
edited.length
);
for (let size = maxSuffixLength; size >= 1; size--) {
const suffix = edited.slice(-size);
if (original.endsWith(suffix)) {
return suffix;
}
}
return "";
}
function buildRealtimeEditCarryover(baseText) {
const tailText = getRealtimeCarryoverTail(baseText);
if (tailText.length < 4) {
return null;
}
return {
tailText,
};
}
function trimOfflineTextWithCarryover(rawText) {
const incomingText = rawText || "";
if (!realtimeEditCarryover || !incomingText) {
return incomingText;
}
const tailText = realtimeEditCarryover.tailText || "";
const minOverlapLength = 4;
const maxOverlapLength = Math.min(
80,
tailText.length,
incomingText.length
);
for (
let size = maxOverlapLength;
size >= minOverlapLength;
size--
) {
const overlapText = tailText.slice(-size);
const matchIndex = incomingText.lastIndexOf(overlapText);
if (matchIndex === -1) {
continue;
}
const remainingText = incomingText.slice(
matchIndex + overlapText.length
);
realtimeEditCarryover.tailText = getRealtimeCarryoverTail(
tailText + remainingText
);
return remainingText;
}
realtimeEditCarryover = null;
return incomingText;
}
function clearRealtimePipeline({
preserveTimestampBarrier = false,
} = {}) {
sampleBuf = new Int16Array();
sampleBuf2 = new Int16Array();
rec_text = "";
offline_text = "";
rec_textOnline = "";
offlineSentenceHandoffText = "";
rec_textoffline = "";
pendingSentenceQueue = [];
pendingSentenceSequence = 0;
lastOnlineTimestamp = null;
asrResultOnline.value = "";
asrResultOffline.value = "";
if (!preserveTimestampBarrier) {
realtimeTimestampBarrierMs = -1;
}
syncRealtimePreview();
}
function isStaleRealtimeMessage(
messageTimestampMs,
messageEpoch = liveTranscriptionEpoch
) {
if (messageEpoch !== liveTranscriptionEpoch) {
return true;
}
return (
Number.isFinite(messageTimestampMs) &&
realtimeTimestampBarrierMs >= 0 &&
messageTimestampMs <= realtimeTimestampBarrierMs
);
}
clearRealtimePipelineRef = clearRealtimePipeline;
getLatestRealtimeTimestampRef = getLatestRealtimeTimestamp;
buildRealtimeEditCarryoverRef = buildRealtimeEditCarryover;
renderFullTextRef = renderFullText;
function getPendingSentencePreviewText() {
return pendingSentenceQueue
.filter((item) => item.epoch === liveTranscriptionEpoch)
.map((item) => item.correctedText || item.rawText)
.join("");
}
function syncRealtimePreview() {
asrResultOnline.value =
getPendingSentencePreviewText() +
offlineSentenceHandoffText +
rec_textOnline;
}
function findPendingSentenceBySource(
sourceText,
pendingTimestamp,
messageEpoch = liveTranscriptionEpoch
) {
const normalizedSourceText = sourceText || "";
const normalizedTimestamp = pendingTimestamp || "";
return (
pendingSentenceQueue.find(
(item) =>
item.epoch === messageEpoch &&
item.sourceText === normalizedSourceText &&
item.timestamp === normalizedTimestamp
) ||
segmentList.find(
(item) =>
item.epoch === messageEpoch &&
item.sourceText === normalizedSourceText &&
item.timestamp === normalizedTimestamp
) ||
null
);
}
function ensurePendingSentence(
sourceText,
pendingTimestamp,
messageEpoch = liveTranscriptionEpoch
) {
const timestampMs = extractTimestampMs(pendingTimestamp);
if (isStaleRealtimeMessage(timestampMs, messageEpoch)) {
return null;
}
const existingItem = findPendingSentenceBySource(
sourceText,
pendingTimestamp,
messageEpoch
);
if (existingItem) {
return existingItem;
}
const trimmedText = trimOfflineTextWithCarryover(sourceText || "");
if (!trimmedText) {
syncRealtimePreview();
return null;
}
const pendingItem = {
id: pendingSentenceSequence++,
sourceText: sourceText || "",
rawText: trimmedText,
timestamp: pendingTimestamp || "",
timestampMs,
correctedText: "",
processed: false,
correctionRequested: false,
epoch: messageEpoch,
};
pendingSentenceQueue.push(pendingItem);
syncRealtimePreview();
return pendingItem;
}
function flushProcessedPendingSentences() {
let didFlush = false;
while (pendingSentenceQueue.length > 0) {
if (pendingSentenceQueue[0].epoch !== liveTranscriptionEpoch) {
pendingSentenceQueue.shift();
continue;
}
if (!pendingSentenceQueue[0].processed) {
break;
}
const item = pendingSentenceQueue.shift();
segmentList.push({
text: item.correctedText || item.rawText,
sourceText: item.sourceText,
timestamp: item.timestamp,
timestampMs: item.timestampMs,
speaker: null,
processed: true,
epoch: item.epoch,
});
didFlush = true;
}
if (didFlush) {
renderFullText();
} else {
syncRealtimePreview();
}
}
function finalizePendingSentence(
pendingSentenceId,
finalText,
messageEpoch = liveTranscriptionEpoch
) {
const target = pendingSentenceQueue.find(
(item) =>
item.id === pendingSentenceId && item.epoch === messageEpoch
);
if (!target) {
return;
}
target.correctedText = finalText || target.rawText || "";
target.processed = true;
target.correctionRequested = false;
flushProcessedPendingSentences();
}
async function record() {
// rec.open(function () {
// rec.start();
// });
// await startRecording();
await openMixedStream();
}
async function record2() {
// rec2.open(function () {
// rec2.start();
// });
// await startRecording();
await openMixedStream2();
}
function recProcess(
buffer,
powerLevel,
bufferDuration,
bufferSampleRate,
newBufferIdx,
asyncEnd
) {
if (isRec === true) {
var data_48k = buffer[buffer.length - 1];
var array_48k = new Array(data_48k);
var data_16k = Recorder.SampleData(
array_48k,
bufferSampleRate,
16000
).data;
sampleBuf = Int16Array.from([...sampleBuf, ...data_16k]);
if (sampleBuf.length > asrBufferHardLimitSamples) {
const overflowSamples =
sampleBuf.length - asrBufferHardLimitSamples;
console.warn(
`⚠️ [Online] 丢弃过量本地音频缓冲: ${overflowSamples} samples`
);
sampleBuf = sampleBuf.slice(-asrBufferHardLimitSamples);
}
while (sampleBuf.length >= asrChunkSize) {
const sendBuf = sampleBuf.slice(0, asrChunkSize);
const sendAccepted = wsconnecter.wsSend(sendBuf);
if (!sendAccepted) {
break;
}
sampleBuf = sampleBuf.slice(asrChunkSize);
}
if (sampleBuf.length > asrBufferWarnSamples) {
console.warn(
`⚠️ [Online] 音频缓冲区溢出: ${sampleBuf.length} samples (${(
sampleBuf.length / 16000
).toFixed(2)}s)`
);
}
}
}
function recProcess2(
buffer,
powerLevel,
bufferDuration,
bufferSampleRate,
newBufferIdx,
asyncEnd
) {
if (isRec === true) {
var data_48k = buffer[buffer.length - 1];
var array_48k = new Array(data_48k);
var data_16k = Recorder.SampleData(
array_48k,
bufferSampleRate,
16000
).data;
sampleBuf2 = Int16Array.from([...sampleBuf2, ...data_16k]);
if (sampleBuf2.length > asrBufferHardLimitSamples) {
const overflowSamples =
sampleBuf2.length - asrBufferHardLimitSamples;
console.warn(
`⚠️ [Offline] 丢弃过量本地音频缓冲: ${overflowSamples} samples`
);
sampleBuf2 = sampleBuf2.slice(-asrBufferHardLimitSamples);
}
while (sampleBuf2.length >= asrChunkSize) {
const sendBuf2 = sampleBuf2.slice(0, asrChunkSize);
const sendAccepted = wsconnecter2.wsSend(sendBuf2);
if (!sendAccepted) {
break;
}
sampleBuf2 = sampleBuf2.slice(asrChunkSize);
}
if (sampleBuf2.length > asrBufferWarnSamples) {
console.warn(
`⚠️ [Offline] 音频缓冲区溢出: ${sampleBuf2.length} samples (${(
sampleBuf2.length / 16000
).toFixed(2)}s)`
);
}
}
}
function addNewlineAfterPeriod(str) {
return str.replace(/[。？！]/g, "$&\n");
}
function handleWithTimestamp(
tmptext,
tmptime,
keywordStr,
timeThreshold
) {
if (!tmptime || tmptext.length <= 0) return tmptext;
const keywordList = keywordStr
.split(",")
.map((k) => k.trim())
.filter((k) => k.length > 0);
const keywordsAsRegex = keywordList.map((k) => new RegExp(k));
const segments = tmptext.match(/[^。！？]+[。！？]?/g) || [];
// console.log(segments, "segments");
const jsontime = JSON.parse(tmptime);
let char_index = 0;
let text_withtime = "";
// 辅助函数：去除新行开头的标点符号
function removeLeadingPunctuation(text) {
// 匹配开头的标点符号（中文和英文标点）
return text.replace(/^[，。！？、；：,\.!?;:]+/, "");
}
for (let i = 0; i < segments.length; i++) {
let seg = segments[i];
if (!seg || seg === "undefined") continue;
let nowTime = jsontime[char_index][0] / 1000;
if (
lastTimer.value > 0 &&
nowTime - lastTimer.value > timeThreshold
) {
const lastChar = text_withtime.slice(-1);
const endsWithPunc = /[。！？]/.test(lastChar);
// 换行后，如果新行开头是标点，去除第一个标点
let processedSeg = removeLeadingPunctuation(seg);
text_withtime +=
(endsWithPunc ? "\n" : "。\n") + processedSeg;
} else {
let hitKeyword = keywordsAsRegex.some((reg) => reg.test(seg));
if (hitKeyword) {
// 关键词后换行，如果下一行开头是标点，去除第一个标点
let processedSeg = removeLeadingPunctuation(seg);
// text_withtime += processedSeg + "。" + "\n";
} else {
text_withtime += seg;
}
}
lastTimer.value = nowTime;
char_index++;
}
return text_withtime;
}
function getSpeakerBeforeIndex(endIndex) {
let previousSpeaker = null;
for (let i = 0; i < endIndex; i++) {
if (segmentList[i] && segmentList[i].speaker) {
previousSpeaker = segmentList[i].speaker;
}
}
return previousSpeaker;
}
function buildSegmentText(segments, initialSpeaker = null) {
let displayText = "";
let lastRenderedSpeaker = initialSpeaker;
segments.forEach((seg) => {
if (showSpeaker.value) {
if (
seg.speaker &&
seg.speaker !== lastRenderedSpeaker &&
!seg.speaker.includes("SPK")
) {
displayText +=
(displayText ? "\n" : "") + seg.speaker + ":\n";
lastRenderedSpeaker = seg.speaker;
} else if (
seg.speaker &&
seg.speaker !== lastRenderedSpeaker
) {
displayText +=
(displayText ? "\n" : "") + seg.speaker + ":\n";
lastRenderedSpeaker = seg.speaker;
}
}
let textContent = handleWithTimestamp(
seg.text,
seg.timestamp,
configwords,
6
);
displayText += textContent;
});
return displayText;
}
function renderFullText() {
const initialSpeaker =
segmentRenderStartIndex > 0
? getSpeakerBeforeIndex(segmentRenderStartIndex)
: null;
const displayText = buildSegmentText(
segmentList.slice(segmentRenderStartIndex),
initialSpeaker
);
rec_text = displayText;
// 保留历史转录内容（来自暂停/继续草稿）
asrResult.value = pausedTranscription.value + rec_text; // 更新主显示区域
// 更新实时显示，展示剩余的待处理句子 + 当前正在识别的内容
syncRealtimePreview();
// 移除旧的清空逻辑
// asrResultOnline.value = "";
// rec_textOnline = "";
}
// Legacy implementation kept temporarily for reference; the active
// realtime path uses the clean getJsonMessage defined below.
function getJsonMessageLegacy(jsonMsg) {
const parsedMessage = JSON.parse(jsonMsg.data);
var rectxt = "" + parsedMessage["text"];
var asrmodel = parsedMessage["mode"];
var timestamp = parsedMessage["timestamp"];
// 检查是否需要重置转录状态（从暂停/恢复时）
if (resetTranscriptionFlag) {
console.log("🔄 重置转录状态（暂停/恢复后）");
clearRealtimePipeline();
resetTranscriptionFlag = false;
}
const messageEpoch = liveTranscriptionEpoch;
if (asrmodel == "2pass-online") {
// ✅ 实时转录换行逻辑
// 规则1：凡是换行的，末尾必须是句号（。）
// 规则2：不修改标点符号
// 规则3：停顿3秒以上才换行
// 解析时间戳（获取最后一个字符的时间）
const currentTimestamp = extractTimestampMs(timestamp);
if (isStaleRealtimeMessage(currentTimestamp, messageEpoch)) {
syncRealtimePreview();
return;
}
// 检查是否需要换行
let shouldBreak = false;
if (lastOnlineTimestamp !== null && currentTimestamp !== null) {
// 计算时间差（单位：秒）
const timeDiff = (currentTimestamp - lastOnlineTimestamp) / 1000;
// 停顿超过3秒，且当前文本以句号结尾
if (timeDiff >= 3 && /。\s*$/.test(rectxt)) {
shouldBreak = true;
}
}
// 拼接文本（不修改标点）
if (shouldBreak) {
rec_textOnline = rec_textOnline + rectxt + "\n";
} else {
rec_textOnline = rec_textOnline + rectxt;
}
// 更新时间戳
lastOnlineTimestamp = currentTimestamp;
} else if (asrmodel == "2pass-offline") {
// Bug fix: 使用offline返回的完整文本替代可能不完整的online累积文本
// rectxt包含了完整的转录结果，比rec_textOnline更准确
ensurePendingSentence(rectxt, timestamp, messageEpoch);
rec_textOnline = "";
lastOnlineTimestamp = null; // 重置时间戳
} else{
}
// 更新显示：队列中的内容 + 当前实时内容
syncRealtimePreview();
}
function getJsonMessage(jsonMsg) {
const parsedMessage = JSON.parse(jsonMsg.data);
var rectxt = "" + parsedMessage["text"];
var asrmodel = parsedMessage["mode"];
var timestamp = parsedMessage["timestamp"];
if (resetTranscriptionFlag) {
console.log("重置实时转录状态（暂停/恢复后）");
clearRealtimePipeline();
resetTranscriptionFlag = false;
}
const messageEpoch = liveTranscriptionEpoch;
if (asrmodel == "2pass-online") {
const currentTimestamp = extractTimestampMs(timestamp);
if (isStaleRealtimeMessage(currentTimestamp, messageEpoch)) {
syncRealtimePreview();
return;
}
let shouldBreak = false;
if (lastOnlineTimestamp !== null && currentTimestamp !== null) {
const timeDiff = (currentTimestamp - lastOnlineTimestamp) / 1000;
if (timeDiff >= 3 && /。\s*$/.test(rectxt)) {
shouldBreak = true;
}
}
if (shouldBreak) {
rec_textOnline = rec_textOnline + rectxt + "\n";
} else {
rec_textOnline = rec_textOnline + rectxt;
}
lastOnlineTimestamp = currentTimestamp;
} else if (asrmodel == "2pass-offline") {
// 离线句子的正式入队只走 getJsonMessage2，避免双通路重复落句。
rec_textOnline = "";
offlineSentenceHandoffText = rectxt || rec_textOnline || "";
rec_textOnline = "";
lastOnlineTimestamp = null;
}
syncRealtimePreview();
}
async function getJsonMessage2(jsonMsg) {
const parsedMessage = JSON.parse(jsonMsg.data);
var asrmodeltype = parsedMessage["mode"];
var timestamp = parsedMessage["timestamp"];
const messageEpoch = liveTranscriptionEpoch;
const messageTimestampMs = extractTimestampMs(timestamp);
// ============================
// 场景 A: 2pass-offline (文本先到)
// ============================
if (asrmodeltype == "2pass-offline") {
if (isStaleRealtimeMessage(messageTimestampMs, messageEpoch)) {
return;
}
var rectxt = "" + parsedMessage["text"];
rec_textOnline = "";
lastOnlineTimestamp = null;
// 3. 准备进行 LLM 矫正
// 使用当前数组里已有的文本 (就是 2pass-offline 的文本)
const pendingSentence = ensurePendingSentence(
rectxt,
timestamp,
messageEpoch
);
offlineSentenceHandoffText = "";
syncRealtimePreview();
if (
!pendingSentence ||
pendingSentence.processed ||
pendingSentence.correctionRequested
) {
return;
}
pendingSentence.correctionRequested = true;
pendingCorrectionCount++;
try {
const response = await fetch(`/tool/speakr/api/asr/correct`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ text: pendingSentence.rawText }), // 发送当前新增文本去矫正
});
if (!response.ok) {
throw new Error("ASR correction failed");
}
const data = await response.json();
let correctedText =
data.corrected_text || pendingSentence.rawText;
// 4. LLM 回来后，直接更新文本内容（自动应用）
finalizePendingSentence(
pendingSentence.id,
correctedText,
messageEpoch
);
console.log("LLM矫正完成");
} catch (error) {
finalizePendingSentence(
pendingSentence.id,
pendingSentence.rawText,
messageEpoch
);
console.error("LLM矫正出错:", error);
} finally {
pendingCorrectionCount = Math.max(
0,
pendingCorrectionCount - 1
);
}
}
// ============================
// 场景 B: offline-speaker (说话人后到)
// ============================
else if (asrmodeltype == "offline-speaker") {
if (isStaleRealtimeMessage(messageTimestampMs, messageEpoch)) {
return;
}
// 【修改点】：这里不再获取 full_text 用于替换
// var rectxt = "" + JSON.parse(jsonMsg.data)["full_text"]; // 这行删掉或注释
let nowSpeaker =
(parsedMessage["segments"] &&
parsedMessage["segments"][0] &&
parsedMessage["segments"][0].speaker) ||
"未命名演讲者";
// 找到最后一个还没认领说话人的句子
let targetIndex = -1;
for (let i = segmentList.length - 1; i >= 0; i--) {
const segment = segmentList[i];
if (!segment || segment.epoch !== messageEpoch) {
continue;
}
if (
segment.speaker === null &&
Number.isFinite(messageTimestampMs) &&
Number.isFinite(segment.timestampMs) &&
segment.timestampMs === messageTimestampMs
) {
targetIndex = i;
break;
}
if (targetIndex === -1 && segment.speaker === null) {
targetIndex = i;
}
}
if (targetIndex !== -1) {
// 1. 只更新说话人
segmentList[targetIndex].speaker = nowSpeaker;
// 【关键】：这里绝对不更新 text，保持 2pass-offline 时的原样
// segmentList[targetIndex].text = ...; // 不要这行
// 2. 立即渲染
// 效果：文本没变（不会跳变），只是头上多了个名字
renderFullText();
}
}
}
// 连接状态响应
function getConnState(connState) {
if (connState === 0) {
record();
} else if (connState === 1) {
} else if (connState === 2) {
stop();
}
}
// 连接状态响应
function getConnState2(connState) {
if (connState === 0) {
record2();
} else if (connState === 1) {
} else if (connState === 2) {
stop();
}
}
async function getMicrophoneInfo() {
if (
!navigator.mediaDevices ||
!navigator.mediaDevices.enumerateDevices
) {
console.warn("当前浏览器不支持获取设备信息");
return null;
}
const devices = await navigator.mediaDevices.enumerateDevices();
const mics = devices.filter((d) => d.kind === "audioinput");
// 当前默认麦克风（大多数浏览器）
const defaultMic =
mics.find((d) => d.deviceId === "default") || mics[0];
return {
name: defaultMic?.label || "未知麦克风",
deviceId: defaultMic?.deviceId || "",
all: mics.map((d) => ({
name: d.label,
deviceId: d.deviceId,
})),
};
}
async function openMixedStream() {
try {
const micInfo = await getMicrophoneInfo();
if (micInfo) {
console.log("🎤 当前麦克风：", micInfo.name, micInfo);
}
// 获取麦克风音频流
const micStreams = micStream;
// 尝试获取系统音频流
let systemStreams;
try {
systemStreams = systemStream;
} catch (err) {
console.warn("未能获取系统音频，仅使用麦克风录音:", err);
}
// 创建音频上下文和混音目标
if (asrAudioContext) {
try { asrAudioContext.close(); } catch(e) {}
}
asrAudioContext = new (window.AudioContext ||
window.webkitAudioContext)();
const audioContext = asrAudioContext;
const destination = audioContext.createMediaStreamDestination();
// 把麦克风接入混音输出
const micSource =
audioContext.createMediaStreamSource(micStreams);
micSource.connect(destination);
// 如果有系统音频，混入
if (systemStream && systemStream.getAudioTracks().length > 0) {
const sysSource =
audioContext.createMediaStreamSource(systemStream);
sysSource.connect(destination);
} else {
console.log("⚠️ 未检测到系统音频，使用麦克风录音");
}
// 打开 recorder 并传入混合后的流
rec.open(
() => {
rec.start(destination.stream);
},
(msg) => {
console.error("❌ 录音权限被拒绝:", msg);
}
);
} catch (err) {
console.error("初始化录音失败:", err);
}
}
async function openMixedStream2() {
try {
// 获取麦克风音频流
const micStreams = micStream;
// 尝试获取系统音频流（Chrome 需要用户手动勾选“共享系统音频”）
let systemStreams;
try {
systemStreams = systemStream;
} catch (err) {
console.warn("未能获取系统音频，仅使用麦克风录音:", err);
}
// 创建音频上下文和混音目标
if (asrAudioContext2) {
try { asrAudioContext2.close(); } catch(e) {}
}
asrAudioContext2 = new (window.AudioContext ||
window.webkitAudioContext)();
const audioContext = asrAudioContext2;
const destination = audioContext.createMediaStreamDestination();
// 把麦克风接入混音输出
const micSource =
audioContext.createMediaStreamSource(micStreams);
micSource.connect(destination);
// 如果有系统音频，混入
if (systemStream && systemStream.getAudioTracks().length > 0) {
const sysSource =
audioContext.createMediaStreamSource(systemStream);
sysSource.connect(destination);
} else {
console.log("⚠️ 未检测到系统音频，使用麦克风录音");
}
// 打开 recorder 并传入混合后的流
rec2.open(
() => {
rec2.start(destination.stream);
},
(msg) => {
console.error("❌ 录音权限被拒绝:", msg);
}
);
} catch (err) {
console.error("初始化录音失败:", err);
}
}
const start = () => {
// 清除显示
// clear();
//控件状态更新
//启动连接
var ret = wsconnecter.wsStart();
if (ret == 1) {
isRec = true;
return 1;
} else {
return 0;
}
};
const start2 = () => {
// 清除显示
// clear();
//控件状态更新
//启动连接（offline）
var ret = wsconnecter2.wsStart("offline");
if (ret == 1) {
isRec = true;
return 1;
} else {
return 0;
}
};
if (!isPaused.value) {
start();
start2();
}
// 录音; 定义录音对象,wav格式
rec = Recorder({
type: "pcm",
bitRate: 16,
sampleRate: 16000,
onProcess: recProcess,
});
rec2 = Recorder({
type: "pcm",
bitRate: 16,
sampleRate: 16000,
onProcess: recProcess2,
});
// Fix audio duration for recorded files
if (audioBlobURL.value) {
const recordingAudio = document.querySelector(
'audio[src*="blob:"]'
);
if (recordingAudio) {
const fixDuration = () => {
if (
!isFinite(recordingAudio.duration) ||
recordingAudio.duration === 0
) {
const originalTime = recordingAudio.currentTime;
recordingAudio.currentTime = 1e101;
recordingAudio.addEventListener(
"timeupdate",
function resetTime() {
recordingAudio.currentTime = originalTime;
recordingAudio.removeEventListener(
"timeupdate",
resetTime
);
},
{ once: true }
);
}
};
recordingAudio.addEventListener("loadedmetadata", fixDuration, {
once: true,
});
recordingAudio.addEventListener("canplay", fixDuration, {
once: true,
});
if (recordingAudio.readyState >= 1) {
setTimeout(fixDuration, 100);
}
}
}
});
} else {
liveTranscriptionEpoch += 1;
realtimeTimestampBarrierMs = -1;
clearRealtimePipelineRef = null;
getLatestRealtimeTimestampRef = null;
buildRealtimeEditCarryoverRef = null;
renderFullTextRef = null;
isRec = false;
analysisResult.value = "";
asrResult.value = "";
segmentList = [];
segmentRenderStartIndex = 0;
isEditingTranscription.value = false;
is_final.value = false;
if (recordingMarkdownEditorInstance.value) {
recordingMarkdownEditorInstance.value.toTextArea();
recordingMarkdownEditorInstance.value = null;
}
if (webReader) {
webReader.wsStop();
}
if (webReader2) {
webReader2.wsStop();
}
// 关闭 Recorder 实例，停止 onProcess 回调
if (rec) {
try { rec.close(); } catch(e) {}
rec = null;
}
if (rec2) {
try { rec2.close(); } catch(e) {}
rec2 = null;
}
if (asrAudioContext) {
try { asrAudioContext.close(); } catch(e) {}
asrAudioContext = null;
}
if (asrAudioContext2) {
try { asrAudioContext2.close(); } catch(e) {}
asrAudioContext2 = null;
}
// Clean up recording markdown editor when leaving recording view
}
});
// 监听内容变化
watch(asrResult, async () => {
await nextTick(); // 等 DOM 更新完再操作
if (asrTextarea.value) {
// console.log(asrTextarea.value.scrollHeight,'asrTextarea.value.scrollHeight');
asrTextarea.value.scrollTop = asrTextarea.value.scrollHeight;
}
if (asrResultTextarea.value) {
asrResultTextarea.value.scrollTop =
asrResultTextarea.value.scrollHeight;
}
});
// 监听内容变化
watch(asrResultOnline, async () => {
await nextTick(); // 等 DOM 更新完再操作
if (asrResultTextareaOnline.value) {
asrResultTextareaOnline.value.scrollTop =
asrResultTextareaOnline.value.scrollHeight;
}
});
watch(asrResultOffline, async () => {
await nextTick(); // 等 DOM 更新完再操作
if (asrResultTextareaOnline.value) {
asrResultTextareaOnline.value.scrollTop =
asrResultTextareaOnline.value.scrollHeight;
}
});
let realtimeAutoScrollFrame = null;
const scrollRealtimeTextareaToBottom = (textarea) => {
if (!textarea) return;
textarea.scrollTop = textarea.scrollHeight;
};
const scrollVisibleRealtimeTextareas = () => {
[
asrTextarea.value,
asrResultTextarea.value,
asrResultTextareaOnline.value,
].forEach(scrollRealtimeTextareaToBottom);
};
const scheduleRealtimeAutoScroll = async (force = false) => {
if (isEditingTranscription.value && !force) {
return;
}
await nextTick();
scrollVisibleRealtimeTextareas();
if (
typeof window === "undefined" ||
typeof window.requestAnimationFrame !== "function"
) {
return;
}
if (realtimeAutoScrollFrame !== null) {
window.cancelAnimationFrame(realtimeAutoScrollFrame);
realtimeAutoScrollFrame = null;
}
realtimeAutoScrollFrame = window.requestAnimationFrame(() => {
scrollVisibleRealtimeTextareas();
realtimeAutoScrollFrame = window.requestAnimationFrame(() => {
scrollVisibleRealtimeTextareas();
realtimeAutoScrollFrame = null;
});
});
};
watch(fullRealtimeTranscription, () => {
scheduleRealtimeAutoScroll();
});
watch(isEditingTranscription, () => {
scheduleRealtimeAutoScroll(true);
});
watch(isyjDialogVisible, (visible) => {
if (visible) {
scheduleRealtimeAutoScroll(true);
}
});
watch(analysisResult, async () => {
await nextTick(); // 等 DOM 更新完再操作
if (sumupResultTextarea.value) {
sumupResultTextarea.value.scrollTop =
sumupResultTextarea.value.scrollHeight;
}
});
watch(audioBlobURL, (newURL) => {
if (newURL) {
nextTick(() => {
const recordingAudio = document.querySelector(
'audio[src*="blob:"]'
);
if (recordingAudio) {
const fixDuration = () => {
if (
!isFinite(recordingAudio.duration) ||
recordingAudio.duration === 0
) {
const originalTime = recordingAudio.currentTime;
// recordingAudio.currentTime = 1e101;
recordingAudio.currentTime = originalTime + 0.01
recordingAudio.addEventListener(
"timeupdate",
function resetTime() {
recordingAudio.currentTime = originalTime;
recordingAudio.removeEventListener(
"timeupdate",
resetTime
);
},
{ once: true }
);
}
};
// Multiple events to ensure we catch the duration
recordingAudio.addEventListener("loadedmetadata", fixDuration, {
once: true,
});
recordingAudio.addEventListener("loadeddata", fixDuration, {
once: true,
});
recordingAudio.addEventListener("canplay", fixDuration, {
once: true,
});
// Also try after a delay
if (recordingAudio.readyState >= 1) {
setTimeout(fixDuration, 100);
}
}
});
}
});
watch(playerVolume, (newVolume) => {
const audioElements = document.querySelectorAll("audio");
audioElements.forEach((audio) => {
if (audio.volume !== newVolume) {
audio.volume = newVolume;
}
});
});
// Watch for search query changes
watch(searchQuery, (newQuery) => {
debouncedSearch(newQuery);
});
// Auto-apply filters when they change (except text query which is debounced)
watch(
filterTags,
() => {
applyAdvancedFilters();
},
{ deep: true }
);
watch(filterDatePreset, () => {
applyAdvancedFilters();
});
watch(
filterDateRange,
() => {
applyAdvancedFilters();
},
{ deep: true }
);
// Debounce text query changes
watch(filterTextQuery, (newValue) => {
clearTimeout(searchDebounceTimer.value);
searchDebounceTimer.value = setTimeout(() => {
applyAdvancedFilters();
}, 300);
});
// --- Configuration Loading ---
const loadConfiguration = async () => {
try {
const response = await fetch("/tool/speakr/api/config");
if (response.ok) {
const config = await response.json();
maxFileSizeMB.value = config.max_file_size_mb || 250;
chunkingEnabled.value =
config.chunking_enabled !== undefined
? config.chunking_enabled
: true;
chunkingMode.value = config.chunking_mode || "size";
chunkingLimit.value = config.chunking_limit || 20;
chunkingLimitDisplay.value =
config.chunking_limit_display || "20MB";
recordingDisclaimer.value = config.recording_disclaimer || "";
console.log(
`Loaded configuration: max size ${
maxFileSizeMB.value
}MB, chunking ${
chunkingEnabled.value ? "enabled" : "disabled"
} (${chunkingLimitDisplay.value})`
);
} else {
console.warn("Failed to load configuration, using default values");
}
} catch (error) {
console.error("Error loading configuration:", error);
// Keep default values on error
}
};
const initializeSummaryMarkdownEditor = () => {
if (!summaryMarkdownEditor.value) return;
try {
summaryMarkdownEditorInstance.value = new EasyMDE({
element: summaryMarkdownEditor.value,
spellChecker: false,
autofocus: true,
placeholder: "Enter summary in Markdown format...",
initialValue: selectedRecording.value?.summary || "",
status: false,
toolbar: [
"bold",
"italic",
"heading",
"|",
"quote",
"unordered-list",
"ordered-list",
"|",
"link",
"image",
"|",
"preview",
"side-by-side",
"fullscreen",
"|",
"guide",
],
previewClass: ["editor-preview", "notes-preview"],
theme: isDarkMode.value ? "dark" : "light",
});
// Add auto-save functionality
summaryMarkdownEditorInstance.value.codemirror.on("change", () => {
if (autoSaveTimer.value) {
clearTimeout(autoSaveTimer.value);
}
autoSaveTimer.value = setTimeout(() => {
autoSaveSummary();
}, autoSaveDelay);
});
} catch (error) {
console.error("Failed to initialize summary markdown editor:", error);
editingSummary.value = true;
}
};
const pollInboxRecordings = async () => {
try {
const response = await fetch("/tool/speakr/api/inbox_recordings");
if (!response.ok) {
// Silently fail, as this is a background task
return;
}
const inboxRecordings = await response.json();
if (inboxRecordings && inboxRecordings.length > 0) {
inboxRecordings.forEach((recording) => {
// Add to main recordings list if it's not there already
const existingRecording = recordings.value.find(
(r) => r.id === recording.id
);
if (!existingRecording) {
recordings.value.unshift(recording);
totalRecordings.value++; // Update total count
}
// Check if this recording is already in the upload queue or currently being processed
const existingItem = uploadQueue.value.find(
(item) => item.recordingId === recording.id
);
const isCurrentlyProcessing =
currentlyProcessingFile.value &&
currentlyProcessingFile.value.recordingId === recording.id;
// Don't add if it's already in queue or being processed
if (existingItem || isCurrentlyProcessing) {
// Update status if the existing item status has changed
if (existingItem && existingItem.status !== recording.status) {
console.log(
`Updating status for existing recording ${recording.original_filename}: ${existingItem.status} -> ${recording.status}`
);
}
return;
}
// Only add recordings that are still processing (not completed)
if (recording.status === "COMPLETED") {
console.log(
`Skipping completed inbox recording: ${recording.original_filename}`
);
return;
}
console.log(
`Found new inbox recording: ${recording.original_filename} (status: ${recording.status})`
);
// Don't add recordings that are already being handled by main processing
if (
recording.status === "SUMMARIZING" &&
isProcessingActive.value
) {
console.log(
`Skipping ${recording.original_filename} - already in summarization phase of main processing`
);
return;
}
// Add it to the queue to be displayed in the progress modal
const inboxItem = {
file: {
name:
recording.original_filename || `Recording ${recording.id}`,
size: recording.file_size || 0,
},
status: "pending", // It's already being processed on backend
recordingId: recording.id,
clientId: `inbox-${recording.id}-${Date.now()}`,
error: null,
isReprocessing: true, // Use reprocessing logic to poll for status
reprocessType: "transcription",
};
uploadQueue.value.unshift(inboxItem);
// If nothing is currently being processed, make this the active item for the main progress bar
if (!isProcessingActive.value && !currentlyProcessingFile.value) {
currentlyProcessingFile.value = inboxItem;
}
// Show progress modal if it's hidden
progressPopupMinimized.value = false;
progressPopupClosed.value = false;
// Start polling its status
startReprocessingPoll(recording.id);
});
}
} catch (error) {
console.error("Error polling for inbox recordings:", error);
}
};
// --- Audio Format Detection ---
const detectSupportedAudioFormats = () => {
const formats = [
"audio/webm;codecs=opus",
"audio/webm;codecs=vp9",
"audio/webm",
"audio/mp4;codecs=mp4a.40.2",
"audio/mp4",
"audio/ogg;codecs=opus",
"audio/wav",
];
const supportedFormats = formats.filter((format) =>
MediaRecorder.isTypeSupported(format)
);
console.log("Supported audio recording formats:", supportedFormats);
if (supportedFormats.length === 0) {
console.warn(
"No optimized audio formats supported, will use browser default"
);
}
return supportedFormats;
};
// --- System Audio Detection ---
const detectSystemAudioCapabilities = async () => {
systemAudioSupported.value = false;
canRecordSystemAudio.value = false;
systemAudioError.value = "";
// Check if getDisplayMedia is available
if (
!navigator.mediaDevices ||
!navigator.mediaDevices.getDisplayMedia
) {
systemAudioError.value = "getDisplayMedia API not supported";
return;
}
try {
// Test if we can request system audio (this will prompt user)
// We'll do this only when user actually tries to record
systemAudioSupported.value = true;
canRecordSystemAudio.value = true;
systemAudioError.value = "";
} catch (error) {
systemAudioError.value = error.message;
console.warn("System audio detection failed:", error);
}
};
const detectBrowser = () => {
const userAgent = navigator.userAgent;
if (userAgent.includes("Firefox")) {
browser.value = "firefox";
} else if (userAgent.includes("Chrome")) {
browser.value = "chrome";
} else if (userAgent.includes("Safari")) {
browser.value = "safari";
} else if (
userAgent.includes("MSIE") ||
userAgent.includes("Trident/")
) {
browser.value = "ie";
} else {
browser.value = "unknown";
}
};
// --- Lifecycle ---
onMounted(async () => {
const loader = document.getElementById("loader");
const app = document.getElementById("app");
if (loader) {
loader.style.opacity = "0";
setTimeout(() => {
loader.style.display = "none";
}, 500);
}
if (app) {
app.style.opacity = "1";
}
const appDiv = document.getElementById("app");
if (appDiv) {
const asrFlag = appDiv.dataset.useAsrEndpoint;
useAsrEndpoint.value = asrFlag === "True" || asrFlag === "true";
currentUserName.value = appDiv.dataset.currentUserName || "";
}
// Load configuration first
await loadConfiguration();
// Detect system audio capabilities
await detectSystemAudioCapabilities();
detectBrowser();
// Check if language was changed in account settings
if (localStorage.getItem("ui_language_changed") === "true") {
localStorage.removeItem("ui_language_changed");
// Force reload to apply new language
window.location.reload();
return;
}
// i18n is already initialized before Vue app creation
if (window.i18n) {
currentLanguage.value = window.i18n.getLocale();
availableLanguages.value = window.i18n.getAvailableLocales();
const lang = availableLanguages.value.find(
(l) => l.code === currentLanguage.value
);
currentLanguageName.value = lang ? lang.nativeName : "English";
// Listen for locale changes
window.addEventListener("localeChanged", (event) => {
currentLanguage.value = event.detail.locale;
const lang = availableLanguages.value.find(
(l) => l.code === currentLanguage.value
);
currentLanguageName.value = lang ? lang.nativeName : "English";
});
}
loadRecordings();
loadTags();
loadDrafts(); // 加载草稿列表
initializeDarkMode();
initializeColorScheme();
const savedVolume = localStorage.getItem("playerVolume");
if (savedVolume !== null) {
playerVolume.value = parseFloat(savedVolume);
}
const savedTranscriptionViewMode = localStorage.getItem(
"transcriptionViewMode"
);
if (savedTranscriptionViewMode) {
transcriptionViewMode.value = savedTranscriptionViewMode;
}
// Load saved column widths
const savedLeftWidth = localStorage.getItem("transcriptColumnWidth");
const savedRightWidth = localStorage.getItem("summaryColumnWidth");
if (savedLeftWidth && savedRightWidth) {
leftColumnWidth.value = parseFloat(savedLeftWidth);
rightColumnWidth.value = parseFloat(savedRightWidth);
}
const updateMobileStatus = () => {
windowWidth.value = window.innerWidth;
};
window.addEventListener("resize", updateMobileStatus);
updateMobileStatus();
// Start polling for inbox recordings
setInterval(pollInboxRecordings, 10000);
const handleEsc = (e) => {
if (e.key === "Escape") {
if (showColorSchemeModal.value) {
closeColorSchemeModal();
}
if (showEditModal.value) {
cancelEdit();
}
if (showDeleteModal.value) {
cancelDelete();
}
if (showSortOptions.value) {
showSortOptions.value = false;
}
}
};
document.addEventListener("keydown", handleEsc);
// Click away handler for dropdowns
const handleClickAway = (e) => {
// Close user menu if clicking outside
if (isUserMenuOpen.value) {
// Check if we clicked within the user menu area (button or dropdown)
const userMenuButton = e.target.closest(
'button[class*="flex items-center gap"]'
);
const userMenuDropdown = e.target.closest(
'div[class*="absolute right-0"]'
);
// Check if the click was on the user menu button specifically
const isUserMenuButtonClick =
userMenuButton &&
userMenuButton.querySelector("i.fa-user-circle");
// If we didn't click on the user menu button or dropdown, close it
if (!isUserMenuButtonClick && !userMenuDropdown) {
isUserMenuOpen.value = false;
}
}
// Close speaker suggestions if clicking outside in the modal
if (showSpeakerModal.value) {
// If not clicking on an input field or suggestion dropdown
const clickedOnInput = e.target.closest('input[type="text"]');
const clickedOnSuggestion = e.target.closest(
'[class*="absolute z-10"]'
);
if (!clickedOnInput && !clickedOnSuggestion) {
// Close all suggestion dropdowns
Object.keys(speakerSuggestions.value).forEach((speakerId) => {
speakerSuggestions.value[speakerId] = [];
});
}
}
};
document.addEventListener("click", handleClickAway);
});
// --- 转录文本编辑功能 ---
// 用户手动编辑后，以编辑结果为准，旧的实时结果不再回灌。
let editModeOriginalText = "";
function enterEditMode() {
editModeOriginalText = fullRealtimeTranscription.value || "";
editableText.value = editModeOriginalText;
editModeBufferStartIndex = segmentList.length;
const barrierTimestampMs = getLatestRealtimeTimestampRef
? getLatestRealtimeTimestampRef()
: null;
startNewRealtimeEpoch({
barrierTimestampMs,
clearEditCarryover: false,
});
realtimeEditCarryover = buildRealtimeEditCarryoverRef
? buildRealtimeEditCarryoverRef(editModeOriginalText)
: null;
isEditingTranscription.value = true;
}
function exitEditMode() {
const nextText = editableText.value ?? "";
isEditingTranscription.value = false;
pausedTranscription.value = nextText;
asrResult.value = nextText;
asrResultOnline.value = "";
asrResultOffline.value = "";
segmentRenderStartIndex = editModeBufferStartIndex;
editModeOriginalText = nextText;
if (renderFullTextRef) {
renderFullTextRef();
}
}
return {
// Core State
currentView,
dragover,
recordings,
selectedRecording,
selectedTab,
searchQuery,
isLoadingRecordings,
globalError,
maxFileSizeMB,
chunkingEnabled,
chunkingMode,
chunkingLimit,
chunkingLimitDisplay,
sortBy,
showAdvancedFilters,
filterTags,
filterDateRange,
filterDatePreset,
filterTextQuery,
// Pagination State
currentPage,
perPage,
totalRecordings,
totalPages,
hasNextPage,
hasPrevPage,
isLoadingMore,
// UI State
browser,
isSidebarCollapsed,
searchTipsExpanded,
isUserMenuOpen,
isDarkMode,
currentColorScheme,
showColorSchemeModal,
windowWidth,
isMobileScreen,
mobileTab,
isMetadataExpanded,
// i18n State
currentLanguage,
currentLanguageName,
availableLanguages,
showLanguageMenu,
// Upload State
uploadQueue,
currentlyProcessingFile,
processingProgress,
processingMessage,
isProcessingActive,
progressPopupMinimized,
progressPopupClosed,
totalInQueue,
completedInQueue,
finishedFilesInQueue,
clearCompletedUploads,
// Audio Recording
editingDraftId,
editingDraftName,
isRecording,
canRecordAudio,
canRecordSystemAudio,
systemAudioSupported,
systemAudioError,
audioBlobURL,
recordingTime,
recordingNotes,
visualizer,
micVisualizer,
systemVisualizer,
recordingMode,
recordingDisclaimer,
showRecordingDisclaimerModal,
acceptRecordingDisclaimer,
cancelRecordingDisclaimer,
showAdvancedOptions,
uploadLanguage,
uploadMinSpeakers,
uploadMaxSpeakers,
asrLanguage,
asrMinSpeakers,
asrMaxSpeakers,
availableTags,
selectedTagIds,
selectedTags,
uploadTagSearchFilter,
filteredAvailableTagsForUpload,
onTagSelected,
addTagToSelection,
removeTagFromSelection,
showSystemAudioHelp,
// Draft/Pause Recording
isPaused,
isStoppingRecording,
currentDraftId,
showRecordingControls,
pausedDuration,
pausedTranscription,
draftRecordings,
draftsExpanded,
pauseRecording,
resumeRecording,
loadDrafts,
continueDraftRecording,
deleteDraft,
// Modal State
showEditModal,
showDeleteModal,
showResetModal,
editingRecording,
recordingToDelete,
showEditTagsModal,
selectedNewTagId,
tagSearchFilter,
filteredAvailableTagsForModal,
editRecordingTags,
closeEditTagsModal,
addTagToRecording,
removeTagFromRecording,
getRecordingTags,
getAvailableTagsForRecording,
filterByTag,
clearTagFilter,
applyAdvancedFilters,
clearAllFilters,
showTextEditorModal,
showAsrEditorModal,
editingTranscriptionContent,
editingSegments,
availableSpeakers,
// Inline Editing
editingParticipants,
editingMeetingDate,
editingSummary,
editingNotes,
// Markdown Editor
notesMarkdownEditor,
markdownEditorInstance,
summaryMarkdownEditor,
summaryMarkdownEditorInstance,
recordingNotesEditor,
// Transcription
transcriptionViewMode,
legendExpanded,
highlightedSpeaker,
processedTranscription,
// Chat
showChat,
isChatMaximized,
toggleChatMaximize,
chatMessages,
chatInput,
isChatLoading,
chatMessagesRef,
// Audio Player
playerVolume,
// Column Resizing
leftColumnWidth,
rightColumnWidth,
isResizing,
// App Configuration
useAsrEndpoint,
currentUserName,
// Computed
filteredRecordings,
groupedRecordings,
activeRecordingMetadata,
datePresetOptions,
languageOptions,
// Color Schemes
colorSchemes,
asrResult,
asrResultOnline,
asrResultOffline,
fullRealtimeTranscription,
asrTextarea,
asrResultTextarea,
asrResultTextareaOnline,
analysisResult,
sumupResultTextarea,
isDialogVisible,
isyjDialogVisible,
baseInfo,
isModalOpen,
urlinfo,
urlmsg,
zjloding,
// Methods
openmodel,
openzjmodel,
closeModal,
setGlobalError,
formatFileSize,
formatDisplayDate,
formatStatus,
getStatusClass,
formatTime,
t,
tc,
changeLanguage,
toggleDarkMode,
applyColorScheme,
initializeColorScheme,
openColorSchemeModal,
closeColorSchemeModal,
selectColorScheme,
resetColorScheme,
toggleSidebar,
switchToUploadView,
selectRecording,
handleDragOver,
handleDragLeave,
handleDrop,
handleFileSelect,
addFilesToQueue,
startRecording,
stopRecording,
uploadRecordedAudio,
discardRecording,
downloadRecordedAudio,
loadRecordings,
loadMoreRecordings,
performSearch,
debouncedSearch,
saveMetadata,
editRecording,
cancelEdit,
saveEdit,
confirmDelete,
cancelDelete,
deleteRecording,
toggleEditParticipants,
toggleEditMeetingDate,
toggleEditSummary,
cancelEditSummary,
saveEditSummary,
toggleEditNotes,
cancelEditNotes,
saveEditNotes,
initializeMarkdownEditor,
saveInlineEdit,
clickToEditNotes,
clickToEditSummary,
autoSaveNotes,
autoSaveSummary,
sendChatMessage,
isChatScrolledToBottom,
scrollChatToBottom,
startColumnResize,
handleChatKeydown,
seekAudio,
seekAudioFromEvent,
onPlayerVolumeChange,
showToast,
copyMessage,
copyTranscription,
copySummary,
copyNotes,
downloadSummary,
downloadTranscript,
downloadNotes,
downloadChat,
clearChat,
downloadEventICS,
downloadICS,
formatEventDateTime,
toggleInbox,
toggleHighlight,
toggleTranscriptionViewMode,
reprocessTranscription,
reprocessSummary,
generateSummary,
resetRecordingStatus,
confirmReset,
cancelReset,
executeReset,
openTranscriptionEditor,
openTextEditorModal,
closeTextEditorModal,
saveTranscription,
openAsrEditorModal,
closeAsrEditorModal,
saveAsrTranscription,
adjustTime,
filterSpeakers,
openSpeakerSuggestions,
closeSpeakerSuggestions,
selectSpeaker,
addSegment,
removeSegment,
showReprocessModal,
reprocessType,
reprocessRecording,
cancelReprocess,
executeReprocess,
asrReprocessOptions,
showSpeakerModal,
showShareModal,
recordingToShare,
shareOptions,
generatedShareLink,
existingShareDetected,
userShares,
isLoadingShares,
showSharesListModal,
shareToDelete,
showShareDeleteModal,
confirmDeleteShare,
cancelDeleteShare,
speakerMap,
speakerDisplayMap,
modalSpeakers,
regenerateSummaryAfterSpeakerUpdate,
identifiedSpeakers,
identifiedSpeakersInOrder,
hasSpeakerNames,
openSpeakerModal,
closeSpeakerModal,
saveSpeakerNames,
highlightedTranscript,
highlightedSpeaker,
highlightSpeakerInTranscript,
focusSpeaker,
blurSpeaker,
clearSpeakerHighlight,
currentSpeakerGroupIndex,
speakerGroups,
navigateToNextSpeakerGroup,
navigateToPrevSpeakerGroup,
speakerSuggestions,
loadingSuggestions,
activeSpeakerInput,
searchSpeakers,
selectSpeakerSuggestion,
closeSpeakerSuggestionsOnClick,
autoIdentifySpeakers,
isAutoIdentifying,
formatDuration,
openShareModal,
closeShareModal,
createShare,
openSharesList,
closeSharesList,
updateShare,
deleteShare,
copyShareLink,
startDraftRename,
saveDraftRename,
editingDraftId,
editingDraftName,
draftNameInput,
draftRecordings,
deleteDraft,
continueDraftRecording,
loadDrafts,
// Recording Size Monitoring
estimatedFileSize,
fileSizeWarningShown,
recordingQuality,
actualBitrate,
maxRecordingMB,
sizeCheckInterval,
updateFileSizeEstimate,
startSizeMonitoring,
stopSizeMonitoring,
sumupResult,
lastTimer,
promptVisible,
promptList,
openPromptModal,
closePromptModal,
confirmPromptSelection,
selectedPromptId,
recommendPromptId,
recommendPromptName,
isMarkdown,
renderedMarkdown,
recommendPromptReason,
showSpeaker,
isEditingTranscription,
editableText,
enterEditMode,
exitEditMode,
};
},
delimiters: ["${", "}"],
});
// Add t function as a global property BEFORE mounting so it's available in templates immediately
app.config.globalProperties.t = safeT;
// Also add tc for pluralization
app.config.globalProperties.tc = (key, count, params = {}) => {
if (!window.i18n || !window.i18n.tc) {
return key;
}
return window.i18n.tc(key, count, params);
};
// Provide t and tc to the app
app.provide("t", safeT);
app.provide("tc", (key, count, params = {}) => {
if (!window.i18n || !window.i18n.tc) {
return key;
}
return window.i18n.tc(key, count, params);
});
// Mount the app
app.mount("#app");
// Hide loading overlay after Vue is mounted and ready
Vue.nextTick(() => {
const overlay = document.querySelector(".app-loading-overlay");
if (overlay) {
// Small delay to ensure everything is rendered
setTimeout(() => {
overlay.classList.add("fade-out");
setTimeout(() => {
overlay.remove();
document.body.classList.remove("app-loading");
}, 300);
}, 100);
} else {
document.body.classList.remove("app-loading");
}
});
});