(.+?)<\/summary>/g, '$1');
// Paragraphs: wrap lines that are not already HTML
md = md.replace(/^(?!<[a-z])(.+)$/gm, (line) => {
if (line.trim() === '' || line.startsWith('<')) return line;
return `${line}
`;
});
return md;
}
// ── Translate Notes ───────────────────────────────────────────────────────────
async function translateNotes() {
if (!currentJobId) {
showToast('⚠️ Process a video first to translate notes.', 'error');
return;
}
const lang = document.getElementById('translate-lang').value;
const btn = document.getElementById('translate-btn');
const originalText = btn.innerHTML;
btn.innerHTML = '⏳ Translating...';
btn.disabled = true;
notesOutput.innerHTML = `Translating notes to ${lang}...
`;
try {
const res = await fetch('/api/v1/notes/translate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ job_id: currentJobId, language: lang })
});
if (!res.ok) {
const err = await res.json();
throw new Error(err.message || 'Translation failed');
}
const data = await res.json();
// Update global state
currentNotes.markdown = data.data.translated_markdown;
if (data.data.translated_quiz) currentNotes.notes.quiz = data.data.translated_quiz;
if (data.data.translated_topics) currentNotes.notes.topics = data.data.translated_topics;
if (data.data.translated_qa_pairs) currentNotes.notes.qa_pairs = data.data.translated_qa_pairs;
if (data.data.translated_transcript) currentNotes.notes.transcript_segments = data.data.translated_transcript;
// Re-render everything
renderNotes(currentNotes.notes, currentNotes.markdown);
renderQuiz(currentNotes.notes.quiz || []);
renderTopics(currentNotes.notes.topics || []);
renderQA(currentNotes.notes.qa_pairs || []);
renderTranscript(currentNotes.notes.transcript_segments || []);
showToast(`✅ Everything translated to ${lang}`, 'success');
} catch (err) {
showToast('❌ Translation error: ' + err.message, 'error');
// Restore original on error
renderNotes(currentNotes.notes, currentNotes.markdown);
} finally {
btn.innerHTML = originalText;
btn.disabled = false;
}
}
// ── Render: Quiz ──────────────────────────────────────────────────────────────
function renderQuiz(quiz) {
const container = document.getElementById('quiz-output');
if (!quiz || !quiz.length) {
container.innerHTML = 'No quiz available.
';
return;
}
window.checkQuizAnswer = function(qIndex, optIndex, correctIndex, el) {
const parent = el.closest('.action-card');
const buttons = parent.querySelectorAll('button');
// Disable all buttons in this question
buttons.forEach(btn => btn.disabled = true);
// Highlight correct answer
buttons[correctIndex].style.backgroundColor = 'rgba(16, 185, 129, 0.2)'; // Green tint
buttons[correctIndex].style.borderColor = '#10b981';
buttons[correctIndex].style.color = '#10b981';
buttons[correctIndex].innerHTML += ' ✅';
// Highlight selected if incorrect
if (optIndex !== correctIndex) {
el.style.backgroundColor = 'rgba(239, 68, 68, 0.2)'; // Red tint
el.style.borderColor = '#ef4444';
el.style.color = '#ef4444';
el.innerHTML += ' ❌';
}
};
container.innerHTML = quiz.map((q, qIndex) => `
Q${qIndex + 1}: ${escHtml(q.question)}
${(q.options || []).map((opt, optIndex) => `
`).join('')}
`).join('');
}
// ── Render: Topic Summaries ───────────────────────────────────────────────────
function renderTopics(topics) {
if (!topics || !topics.length) {
actionsOutput.innerHTML = 'No topics extracted yet. Process a video to see structured topic summaries.
';
return;
}
actionsOutput.innerHTML = topics.map(item => `
🔹
${escHtml(item.topic || '')}
${escHtml(item.summary || '')}
${(item.key_points || []).map(kp => `- ${escHtml(kp)}
`).join('')}
`).join('');
}
// ── Render: Q&A ───────────────────────────────────────────────────────────────
function renderQA(qaPairs) {
if (!qaPairs.length) {
qaOutput.innerHTML = 'No Q&A generated.
';
return;
}
qaOutput.innerHTML = qaPairs.map(item => `
Q: ${escHtml(item.question)}
A: ${escHtml(item.answer)}
`).join('');
}
// ── Render: Transcript ────────────────────────────────────────────────────────
function renderTranscript(segments) {
if (!segments.length) {
transcriptOutput.innerHTML = 'No transcript available.
';
return;
}
transcriptOutput.innerHTML = segments.map(seg => `
▶ ${seg.start_ts || formatSec(seg.start)} — ${seg.end_ts || formatSec(seg.end)}
${escHtml(seg.text)}
`).join('');
}
// ── Tabs ──────────────────────────────────────────────────────────────────────
function switchTab(name, btn) {
document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.getElementById('tab-' + name).classList.add('active');
btn.classList.add('active');
}
// ── RAG Search ────────────────────────────────────────────────────────────────
async function doSearch() {
const query = document.getElementById('search-input').value.trim();
if (!query) { showToast('⚠️ Enter a search query.', 'error'); return; }
if (!currentJobId) { showToast('⚠️ Process a video first.', 'error'); return; }
const container = document.getElementById('search-results');
container.innerHTML = '🧠 AI is thinking...
';
try {
const res = await fetch('/api/v1/query/', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ job_id: currentJobId, query, top_k: 5 }),
});
const data = await res.json();
const answer = data.data?.answer || '';
if (!answer) {
container.innerHTML = 'No answer could be generated. Try rephrasing your question.
';
return;
}
container.innerHTML = `
✨
AI Answer
${markdownToHtml(answer)}
`;
} catch (err) {
container.innerHTML = `Error: ${err.message}
`;
}
}
// ── Downloads ─────────────────────────────────────────────────────────────────
function downloadMd() {
if (!currentJobId) { showToast('⚠️ No notes to download.', 'error'); return; }
window.open(`/api/v1/notes/${currentJobId}/download`, '_blank');
}
function copyNotes() {
if (!currentNotes?.markdown) { showToast('⚠️ No notes to copy.', 'error'); return; }
navigator.clipboard.writeText(currentNotes.markdown)
.then(() => showToast('📋 Notes copied to clipboard!'))
.catch(() => showToast('❌ Copy failed.', 'error'));
}
// ── Toast ─────────────────────────────────────────────────────────────────────
let toastTimer = null;
function showToast(msg, type = 'info') {
const toast = document.getElementById('toast');
const toastMsg = document.getElementById('toast-msg');
toastMsg.textContent = msg;
toast.classList.remove('hidden');
toast.style.borderColor = type === 'error' ? 'rgba(239,68,68,0.4)' : 'rgba(255,255,255,0.12)';
if (toastTimer) clearTimeout(toastTimer);
toastTimer = setTimeout(() => toast.classList.add('hidden'), 4000);
}
// ── Helpers ───────────────────────────────────────────────────────────────────
function formatBytes(bytes) {
if (bytes < 1024) return bytes + ' B';
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
if (bytes < 1024**3) return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
return (bytes / (1024**3)).toFixed(2) + ' GB';
}
function formatSec(s) {
s = Math.round(s || 0);
const h = Math.floor(s / 3600);
const m = Math.floor((s % 3600) / 60);
const sec = s % 60;
return `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(sec).padStart(2,'0')}`;
}
function escHtml(str) {
return String(str || '')
.replace(/&/g, '&')
.replace(//g, '>')
.replace(/"/g, '"');
}