first commit
This commit is contained in:
Ashim Kumar
893
static/js/app.js
Normal file
893
static/js/app.js
Normal file
@@ -0,0 +1,893 @@
|
||||
/**
|
||||
* Main Application Module
|
||||
* Handles app initialization, API calls, database operations, and library management
|
||||
*/
|
||||
|
||||
// ==========================================
|
||||
// LOADER FUNCTIONS
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* Show loading overlay
|
||||
* @param {string} msg - Main message
|
||||
* @param {string} subtext - Subtext message
|
||||
*/
|
||||
function showLoader(msg, subtext = '') {
|
||||
document.getElementById('loadingText').textContent = msg;
|
||||
document.getElementById('loadingSubtext').textContent = subtext || 'Please wait...';
|
||||
document.getElementById('loader').style.display = 'flex';
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide loading overlay
|
||||
*/
|
||||
function hideLoader() {
|
||||
document.getElementById('loader').style.display = 'none';
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// UTILITY FUNCTIONS
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* Format bytes to human readable string
|
||||
* @param {number} bytes - Byte count
|
||||
* @returns {string} Formatted string
|
||||
*/
|
||||
function formatBytes(bytes) {
|
||||
if (!bytes) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
/**
|
||||
* Format date to human readable string
|
||||
* @param {string} dateStr - Date string
|
||||
* @returns {string} Formatted date
|
||||
*/
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return '';
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// APP INITIALIZATION
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* Initialize app with data
|
||||
* @param {Object} data - Audio and transcription data
|
||||
*/
|
||||
function initApp(data) {
|
||||
document.getElementById('editorSection').classList.remove('d-none');
|
||||
document.getElementById('editorSection').scrollIntoView({ behavior: 'smooth' });
|
||||
transcriptionData = data.transcription;
|
||||
currentAudioData = data.audio_data;
|
||||
currentAudioFormat = data.audio_format;
|
||||
initWaveSurferFromBase64(data.audio_data, data.audio_format);
|
||||
initReader(data.text_content);
|
||||
refreshLibraryStats();
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// UPLOAD FORM HANDLER
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* Initialize upload form handler
|
||||
*/
|
||||
function initUploadForm() {
|
||||
document.getElementById('uploadForm').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const audioInput = document.getElementById('audioFile').files[0];
|
||||
const txtInput = document.getElementById('txtFile').files[0];
|
||||
|
||||
if (!audioInput || !txtInput) return;
|
||||
|
||||
const fd = new FormData();
|
||||
fd.append('audioFile', audioInput);
|
||||
fd.append('txtFile', txtInput);
|
||||
|
||||
showLoader("Uploading...", "Processing audio and text files...");
|
||||
|
||||
try {
|
||||
const res = await fetch('/upload', { method: 'POST', body: fd });
|
||||
const data = await res.json();
|
||||
if (data.error) throw new Error(data.error);
|
||||
initApp(data);
|
||||
await refreshLibraryStats();
|
||||
} catch (e) {
|
||||
alert(e.message);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// PROJECT/DATABASE FUNCTIONS
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* Get or create project by name
|
||||
* @returns {Promise<number|null>} Project ID or null
|
||||
*/
|
||||
async function getOrCreateProject() {
|
||||
const projectName = document.getElementById('bulkProjectName').value.trim() || 'Book-1';
|
||||
|
||||
try {
|
||||
const listRes = await fetch('/projects');
|
||||
const listData = await listRes.json();
|
||||
const existing = listData.projects.find(p => p.name === projectName);
|
||||
|
||||
if (existing) {
|
||||
currentProjectId = existing.id;
|
||||
return existing.id;
|
||||
}
|
||||
|
||||
const createRes = await fetch('/projects', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({ name: projectName })
|
||||
});
|
||||
const createData = await createRes.json();
|
||||
|
||||
if (createData.error) {
|
||||
console.error('Error creating project:', createData.error);
|
||||
return null;
|
||||
}
|
||||
|
||||
currentProjectId = createData.project_id;
|
||||
return createData.project_id;
|
||||
} catch (e) {
|
||||
console.error('Error getting/creating project:', e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Save all sections to database
|
||||
* @returns {Promise<boolean>} Success status
|
||||
*/
|
||||
async function saveAllSectionsToDatabase() {
|
||||
const projectId = await getOrCreateProject();
|
||||
if (!projectId) {
|
||||
console.error('Could not get project ID');
|
||||
return false;
|
||||
}
|
||||
|
||||
const sections = collectAllSectionsFromEditor();
|
||||
console.log(`💾 Saving ${sections.length} sections to database...`);
|
||||
|
||||
for (const sec of sections) {
|
||||
try {
|
||||
await fetch(`/projects/${projectId}/sections/save`, {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({
|
||||
chapter: sec.chapter,
|
||||
section: sec.section,
|
||||
text: sec.text || '',
|
||||
html_content: sec.htmlContent || '',
|
||||
tts_text: sec.ttsText || '',
|
||||
audio_data: sec.audioData || '',
|
||||
audio_format: sec.audioFormat || 'mp3',
|
||||
transcription: sec.transcription || [],
|
||||
voice: sec.voice || 'af_heart',
|
||||
image_data: sec.imageData || '',
|
||||
image_format: sec.imageFormat || 'png'
|
||||
})
|
||||
});
|
||||
console.log(` ✅ Saved Ch${sec.chapter}.Sec${sec.section}`);
|
||||
} catch (e) {
|
||||
console.error(` ❌ Error saving Ch${sec.chapter}.Sec${sec.section}:`, e);
|
||||
}
|
||||
}
|
||||
|
||||
await refreshLibraryStats();
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Save single section to database
|
||||
* @param {number} chapterNum - Chapter number
|
||||
* @param {number} sectionNum - Section number
|
||||
* @param {Object} data - Section data
|
||||
* @returns {Promise<boolean>} Success status
|
||||
*/
|
||||
async function saveSectionToDatabase(chapterNum, sectionNum, data) {
|
||||
const projectId = await getOrCreateProject();
|
||||
if (!projectId) {
|
||||
console.error('Could not get project ID');
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(`/projects/${projectId}/sections/save`, {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({
|
||||
chapter: chapterNum,
|
||||
section: sectionNum,
|
||||
text: data.text || '',
|
||||
html_content: data.htmlContent || '',
|
||||
tts_text: data.ttsText || '',
|
||||
audio_data: data.audioData || '',
|
||||
audio_format: data.audioFormat || 'mp3',
|
||||
transcription: data.transcription || [],
|
||||
voice: data.voice || 'af_heart',
|
||||
image_data: data.imageData || '',
|
||||
image_format: data.imageFormat || 'png'
|
||||
})
|
||||
});
|
||||
|
||||
const result = await res.json();
|
||||
if (result.error) {
|
||||
console.error('Error saving section:', result.error);
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log(`✅ Saved Ch${chapterNum}.Sec${sectionNum} to database`);
|
||||
return true;
|
||||
} catch (e) {
|
||||
console.error('Error saving section to database:', e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// AUDIO GENERATION FUNCTIONS
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* Generate audio for a marker (section or chapter)
|
||||
* @param {string} id - Marker ID
|
||||
*/
|
||||
async function generateMarkerAudio(id) {
|
||||
const markerEl = document.getElementById(`marker-${id}`);
|
||||
if (!markerEl) return;
|
||||
|
||||
const type = markerEl.dataset.type;
|
||||
const num = markerEl.querySelector('input[type="number"]').value;
|
||||
const voice = markerEl.querySelector('select').value;
|
||||
const allMarkers = Array.from(document.querySelectorAll('.editor-marker'));
|
||||
const myIdx = allMarkers.indexOf(markerEl);
|
||||
|
||||
// Save all sections first
|
||||
showLoader('Saving all sections...', 'Preserving your content before generation...');
|
||||
await saveAllSectionsToDatabase();
|
||||
|
||||
// --- Generate for single section ---
|
||||
if (type === 'section') {
|
||||
const htmlContent = extractHtmlForMarker(markerEl, allMarkers);
|
||||
const displayText = extractMarkdownForMarker(markerEl, allMarkers);
|
||||
|
||||
if (!displayText || displayText.trim().length < 2) {
|
||||
hideLoader();
|
||||
alert("No text found.");
|
||||
return;
|
||||
}
|
||||
|
||||
let genText = markerState[id]?.ttsText || extractPlainTextForMarker(markerEl, allMarkers);
|
||||
|
||||
// Get image data from marker state
|
||||
const imageData = markerState[id]?.imageData || '';
|
||||
const imageFormat = markerState[id]?.imageFormat || 'png';
|
||||
|
||||
// Find chapter number
|
||||
let chapterNum = 0;
|
||||
for (let i = myIdx - 1; i >= 0; i--) {
|
||||
if (allMarkers[i].classList.contains('chapter-marker')) {
|
||||
chapterNum = allMarkers[i].querySelector('input[type="number"]').value;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const trackId = await processSingleSection(chapterNum, num, genText, displayText, htmlContent, voice, id, true, imageData, imageFormat);
|
||||
if (trackId) loadTrackFromPlaylist(trackId);
|
||||
|
||||
}
|
||||
// --- Generate for entire chapter ---
|
||||
else if (type === 'chapter') {
|
||||
await generateChapterAudio(markerEl, allMarkers, myIdx, num, voice, id);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate audio for entire chapter
|
||||
* @param {Element} markerEl - Chapter marker element
|
||||
* @param {Element[]} allMarkers - All marker elements
|
||||
* @param {number} myIdx - Index of chapter marker
|
||||
* @param {number} num - Chapter number
|
||||
* @param {string} voice - Voice ID
|
||||
* @param {string} id - Marker ID
|
||||
*/
|
||||
async function generateChapterAudio(markerEl, allMarkers, myIdx, num, voice, id) {
|
||||
const sectionsToGenerate = [];
|
||||
|
||||
// Check for implicit content after chapter marker
|
||||
let hasDirectContent = false;
|
||||
let nextEl = markerEl.nextSibling;
|
||||
while (nextEl) {
|
||||
if (nextEl.nodeType === 1 && nextEl.classList && nextEl.classList.contains('editor-marker')) {
|
||||
if (nextEl.classList.contains('section-marker')) break;
|
||||
else if (nextEl.classList.contains('chapter-marker')) break;
|
||||
} else if (nextEl.nodeType === 1 || (nextEl.nodeType === 3 && nextEl.textContent.trim())) {
|
||||
hasDirectContent = true;
|
||||
}
|
||||
nextEl = nextEl.nextSibling;
|
||||
}
|
||||
|
||||
// Add implicit section if content exists without section markers
|
||||
if (hasDirectContent) {
|
||||
let nextMarkerIdx = myIdx + 1;
|
||||
let nextMarker = nextMarkerIdx < allMarkers.length ? allMarkers[nextMarkerIdx] : null;
|
||||
|
||||
if (!nextMarker || nextMarker.classList.contains('chapter-marker')) {
|
||||
const secHtml = extractHtmlForMarker(markerEl, allMarkers);
|
||||
const secDisplay = extractMarkdownForMarker(markerEl, allMarkers);
|
||||
const secPlain = extractPlainTextForMarker(markerEl, allMarkers);
|
||||
|
||||
if (secDisplay && secDisplay.trim().length > 1) {
|
||||
sectionsToGenerate.push({
|
||||
id: id + '_implicit_1',
|
||||
num: 1,
|
||||
genText: secPlain,
|
||||
displayText: secDisplay,
|
||||
htmlContent: secHtml,
|
||||
voice: voice,
|
||||
imageData: '',
|
||||
imageFormat: 'png'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Collect explicit section markers in this chapter
|
||||
for (let i = myIdx + 1; i < allMarkers.length; i++) {
|
||||
const m = allMarkers[i];
|
||||
if (m.classList.contains('chapter-marker')) break;
|
||||
if (m.classList.contains('section-marker')) {
|
||||
const secId = m.dataset.markerId;
|
||||
const secNum = m.querySelector('input[type="number"]').value;
|
||||
const secVoice = m.querySelector('select').value;
|
||||
const secHtml = extractHtmlForMarker(m, allMarkers);
|
||||
const secDisplay = extractMarkdownForMarker(m, allMarkers);
|
||||
const secPlain = extractPlainTextForMarker(m, allMarkers);
|
||||
const secGen = markerState[secId]?.ttsText || secPlain;
|
||||
const imageData = markerState[secId]?.imageData || '';
|
||||
const imageFormat = markerState[secId]?.imageFormat || 'png';
|
||||
|
||||
if (secDisplay && secDisplay.trim().length > 1) {
|
||||
sectionsToGenerate.push({
|
||||
id: secId,
|
||||
num: secNum,
|
||||
genText: secGen,
|
||||
displayText: secDisplay,
|
||||
htmlContent: secHtml,
|
||||
voice: secVoice,
|
||||
imageData: imageData,
|
||||
imageFormat: imageFormat
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (sectionsToGenerate.length === 0) {
|
||||
hideLoader();
|
||||
alert("No sections found in this chapter.");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`📚 Found ${sectionsToGenerate.length} sections in Chapter ${num}`);
|
||||
|
||||
// Generate audio for each section
|
||||
showLoader(`Generating ${sectionsToGenerate.length} sections...`, 'This may take a while...');
|
||||
let firstId = null;
|
||||
|
||||
for (let i = 0; i < sectionsToGenerate.length; i++) {
|
||||
const sec = sectionsToGenerate[i];
|
||||
document.getElementById('loadingText').textContent = `Generating section ${i + 1} of ${sectionsToGenerate.length}...`;
|
||||
document.getElementById('loadingSubtext').textContent = `Chapter ${num}, Section ${sec.num}`;
|
||||
|
||||
console.log(`🔊 Generating Ch${num}.Sec${sec.num}...`);
|
||||
|
||||
const trackId = await processSingleSection(num, sec.num, sec.genText, sec.displayText, sec.htmlContent, sec.voice, sec.id, false, sec.imageData, sec.imageFormat);
|
||||
|
||||
if (trackId && i === 0) firstId = trackId;
|
||||
}
|
||||
|
||||
hideLoader();
|
||||
await refreshLibraryStats();
|
||||
|
||||
if (firstId) {
|
||||
loadTrackFromPlaylist(firstId);
|
||||
alert(`Chapter ${num} generation complete! Generated ${sectionsToGenerate.length} sections.`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Process single section generation
|
||||
* @param {number} cNum - Chapter number
|
||||
* @param {number} sNum - Section number
|
||||
* @param {string} genText - Text for TTS generation
|
||||
* @param {string} displayText - Display text (markdown)
|
||||
* @param {string} htmlContent - HTML content
|
||||
* @param {string} voice - Voice ID
|
||||
* @param {string} markerId - Marker ID
|
||||
* @param {boolean} autoHide - Whether to auto-hide loader
|
||||
* @param {string} imageData - Base64 image data
|
||||
* @param {string} imageFormat - Image format (png, jpg, etc.)
|
||||
* @returns {Promise<string|null>} Track ID or null
|
||||
*/
|
||||
async function processSingleSection(cNum, sNum, genText, displayText, htmlContent, voice, markerId, autoHide = true, imageData = '', imageFormat = 'png') {
|
||||
if (autoHide) showLoader(`Generating Section ${cNum}.${sNum}...`, 'Creating audio and timestamps...');
|
||||
|
||||
try {
|
||||
const res = await fetch('/generate', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({ text: genText, voice, save_to_db: false })
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.error) throw new Error(data.error);
|
||||
|
||||
const track = {
|
||||
id: markerId || (Date.now() + '_' + Math.random().toString(36).substr(2, 9)),
|
||||
chapter: cNum,
|
||||
section: sNum,
|
||||
audioData: data.audio_data,
|
||||
audioFormat: data.audio_format,
|
||||
transcription: data.transcription,
|
||||
text: displayText,
|
||||
htmlContent: htmlContent,
|
||||
ttsText: genText,
|
||||
voice: voice,
|
||||
imageData: imageData,
|
||||
imageFormat: imageFormat
|
||||
};
|
||||
|
||||
// Update playlist
|
||||
const existingIdx = playlist.findIndex(t => t.chapter == cNum && t.section == sNum);
|
||||
if (existingIdx !== -1) {
|
||||
playlist[existingIdx] = track;
|
||||
} else {
|
||||
playlist.push(track);
|
||||
}
|
||||
|
||||
// Sort playlist by chapter then section
|
||||
playlist.sort((a, b) => {
|
||||
if (Number(a.chapter) !== Number(b.chapter)) return Number(a.chapter) - Number(b.chapter);
|
||||
return Number(a.section) - Number(b.section);
|
||||
});
|
||||
|
||||
updatePlaylistUI();
|
||||
|
||||
// Save to database
|
||||
await saveSectionToDatabase(cNum, sNum, track);
|
||||
|
||||
if (autoHide) {
|
||||
hideLoader();
|
||||
await refreshLibraryStats();
|
||||
}
|
||||
|
||||
return track.id;
|
||||
|
||||
} catch (e) {
|
||||
console.error('Generation error:', e);
|
||||
if (autoHide) {
|
||||
hideLoader();
|
||||
alert("Error: " + e.message);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// LIBRARY MODAL FUNCTIONS
|
||||
// ==========================================
|
||||
|
||||
let libraryModal = null;
|
||||
|
||||
/**
|
||||
* Open library modal
|
||||
*/
|
||||
function openLibrary() {
|
||||
if (!libraryModal) libraryModal = new bootstrap.Modal(document.getElementById('libraryModal'));
|
||||
loadLibraryData();
|
||||
libraryModal.show();
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh library statistics
|
||||
*/
|
||||
async function refreshLibraryStats() {
|
||||
try {
|
||||
const res = await fetch('/db/stats');
|
||||
const stats = await res.json();
|
||||
document.getElementById('statUploads').textContent = stats.uploads;
|
||||
document.getElementById('statGenerations').textContent = stats.generations;
|
||||
document.getElementById('statProjects').textContent = stats.projects;
|
||||
document.getElementById('statSections').textContent = stats.sections;
|
||||
document.getElementById('statDbSize').textContent = stats.database_size_mb + ' MB';
|
||||
console.log('📊 Stats:', stats);
|
||||
} catch (e) {
|
||||
console.error('Stats error:', e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load all library data
|
||||
*/
|
||||
async function loadLibraryData() {
|
||||
await refreshLibraryStats();
|
||||
await Promise.all([loadUploads(), loadGenerations(), loadProjects()]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Load uploads list
|
||||
*/
|
||||
async function loadUploads() {
|
||||
const container = document.getElementById('uploadsList');
|
||||
try {
|
||||
const data = await (await fetch('/uploads')).json();
|
||||
container.innerHTML = data.uploads.length === 0
|
||||
? '<div class="text-center text-muted py-4">No uploads yet</div>'
|
||||
: data.uploads.map(u => `
|
||||
<div class="library-item">
|
||||
<div class="library-item-info">
|
||||
<div class="library-item-title"><i class="bi bi-file-earmark-music me-2"></i>${u.filename}</div>
|
||||
<div class="library-item-meta">${u.audio_format.toUpperCase()} • ${formatBytes(u.audio_size)} • ${formatDate(u.created_at)}</div>
|
||||
</div>
|
||||
<div class="library-item-actions">
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="loadUpload(${u.id})"><i class="bi bi-play-fill"></i></button>
|
||||
<button class="btn btn-sm btn-outline-success" onclick="downloadUpload(${u.id})"><i class="bi bi-download"></i></button>
|
||||
<button class="btn btn-sm btn-outline-danger" onclick="deleteUpload(${u.id})"><i class="bi bi-trash"></i></button>
|
||||
</div>
|
||||
</div>`).join('');
|
||||
} catch (e) {
|
||||
container.innerHTML = '<div class="text-danger">Failed to load</div>';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load generations list
|
||||
*/
|
||||
async function loadGenerations() {
|
||||
const container = document.getElementById('generationsList');
|
||||
try {
|
||||
const data = await (await fetch('/generations')).json();
|
||||
container.innerHTML = data.generations.length === 0
|
||||
? '<div class="text-center text-muted py-4">No generations yet</div>'
|
||||
: data.generations.map(g => `
|
||||
<div class="library-item">
|
||||
<div class="library-item-info">
|
||||
<div class="library-item-title"><i class="bi bi-soundwave me-2"></i>${g.name}</div>
|
||||
<div class="library-item-meta">Voice: ${g.voice} • ${formatBytes(g.audio_size)} • ${formatDate(g.created_at)}</div>
|
||||
</div>
|
||||
<div class="library-item-actions">
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="loadGeneration(${g.id})"><i class="bi bi-play-fill"></i></button>
|
||||
<button class="btn btn-sm btn-outline-success" onclick="downloadGeneration(${g.id})"><i class="bi bi-download"></i></button>
|
||||
<button class="btn btn-sm btn-outline-danger" onclick="deleteGeneration(${g.id})"><i class="bi bi-trash"></i></button>
|
||||
</div>
|
||||
</div>`).join('');
|
||||
} catch (e) {
|
||||
container.innerHTML = '<div class="text-danger">Failed to load</div>';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load projects list
|
||||
*/
|
||||
async function loadProjects() {
|
||||
const container = document.getElementById('projectsList');
|
||||
try {
|
||||
const data = await (await fetch('/projects')).json();
|
||||
container.innerHTML = data.projects.length === 0
|
||||
? '<div class="text-center text-muted py-4">No projects yet</div>'
|
||||
: data.projects.map(p => `
|
||||
<div class="library-item">
|
||||
<div class="library-item-info">
|
||||
<div class="library-item-title"><i class="bi bi-folder me-2"></i>${p.name}</div>
|
||||
<div class="library-item-meta">${p.section_count} sections • ${formatDate(p.updated_at)}</div>
|
||||
</div>
|
||||
<div class="library-item-actions">
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="loadProject(${p.id})"><i class="bi bi-folder-symlink"></i></button>
|
||||
<button class="btn btn-sm btn-outline-success" onclick="downloadProject(${p.id})"><i class="bi bi-download"></i></button>
|
||||
<button class="btn btn-sm btn-outline-danger" onclick="deleteProject(${p.id})"><i class="bi bi-trash"></i></button>
|
||||
</div>
|
||||
</div>`).join('');
|
||||
} catch (e) {
|
||||
container.innerHTML = '<div class="text-danger">Failed to load</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// LIBRARY ITEM LOADERS
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* Load upload by ID
|
||||
* @param {number} id - Upload ID
|
||||
*/
|
||||
async function loadUpload(id) {
|
||||
showLoader('Loading...', 'Retrieving upload data...');
|
||||
try {
|
||||
const data = await (await fetch(`/uploads/${id}`)).json();
|
||||
if (data.error) throw new Error(data.error);
|
||||
if (libraryModal) libraryModal.hide();
|
||||
initApp(data);
|
||||
} catch (e) {
|
||||
alert(e.message);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load generation by ID
|
||||
* @param {number} id - Generation ID
|
||||
*/
|
||||
async function loadGeneration(id) {
|
||||
showLoader('Loading...', 'Retrieving generation data...');
|
||||
try {
|
||||
const data = await (await fetch(`/generations/${id}`)).json();
|
||||
if (data.error) throw new Error(data.error);
|
||||
if (libraryModal) libraryModal.hide();
|
||||
initApp(data);
|
||||
} catch (e) {
|
||||
alert(e.message);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load project by ID
|
||||
* @param {number} id - Project ID
|
||||
*/
|
||||
async function loadProject(id) {
|
||||
showLoader('Loading project...', 'Retrieving all sections...');
|
||||
try {
|
||||
const data = await (await fetch(`/projects/${id}`)).json();
|
||||
if (data.error) throw new Error(data.error);
|
||||
|
||||
if (libraryModal) libraryModal.hide();
|
||||
document.getElementById('bulk-tab').click();
|
||||
document.getElementById('bulkProjectName').value = data.name;
|
||||
currentProjectId = id;
|
||||
|
||||
const editor = document.getElementById('bulk-editor');
|
||||
editor.innerHTML = '';
|
||||
Object.keys(markerState).forEach(key => delete markerState[key]);
|
||||
chapterCounter = 1;
|
||||
sectionCounter = 1;
|
||||
|
||||
// Group sections by chapter
|
||||
const chapters = {};
|
||||
data.sections.forEach(sec => {
|
||||
if (!chapters[sec.chapter]) chapters[sec.chapter] = [];
|
||||
chapters[sec.chapter].push(sec);
|
||||
});
|
||||
|
||||
// Rebuild editor
|
||||
const sortedChapterNums = Object.keys(chapters).sort((a, b) => Number(a) - Number(b));
|
||||
|
||||
sortedChapterNums.forEach(chapterNum => {
|
||||
const chapterSections = chapters[chapterNum];
|
||||
const chapterVoice = chapterSections[0]?.voice || 'af_alloy';
|
||||
const chapterMarkerId = `ch_${chapterNum}_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`;
|
||||
|
||||
// Insert chapter marker
|
||||
const chapterMarkerHtml = createMarkerHTML('chapter', chapterNum, chapterVoice, chapterMarkerId);
|
||||
editor.insertAdjacentHTML('beforeend', chapterMarkerHtml);
|
||||
|
||||
if (Number(chapterNum) >= chapterCounter) chapterCounter = Number(chapterNum) + 1;
|
||||
|
||||
// Sort and insert sections
|
||||
chapterSections.sort((a, b) => a.section - b.section);
|
||||
|
||||
chapterSections.forEach(sec => {
|
||||
const secMarkerId = `sec_${chapterNum}_${sec.section}_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`;
|
||||
const secMarkerHtml = createMarkerHTML('section', sec.section, sec.voice, secMarkerId);
|
||||
editor.insertAdjacentHTML('beforeend', secMarkerHtml);
|
||||
|
||||
const marker = document.getElementById(`marker-${secMarkerId}`);
|
||||
if (marker) {
|
||||
let content = sec.html_content;
|
||||
if (!content || content.trim() === '') {
|
||||
content = sec.text_content ? `<p>${sec.text_content}</p>` : '<p><br></p>';
|
||||
}
|
||||
|
||||
// Remove placeholder paragraph
|
||||
let nextEl = marker.nextElementSibling;
|
||||
if (nextEl && nextEl.tagName === 'P' && (nextEl.innerHTML === '<br>' || nextEl.innerHTML.trim() === '')) {
|
||||
nextEl.remove();
|
||||
}
|
||||
|
||||
// Insert content after marker
|
||||
const tempContainer = document.createElement('div');
|
||||
tempContainer.innerHTML = content;
|
||||
const insertBeforeElement = marker.nextSibling;
|
||||
while (tempContainer.firstChild) {
|
||||
editor.insertBefore(tempContainer.firstChild, insertBeforeElement);
|
||||
}
|
||||
|
||||
// Ensure at least one paragraph exists after content
|
||||
if (!marker.nextSibling || (marker.nextSibling.classList && marker.nextSibling.classList.contains('editor-marker'))) {
|
||||
const emptyP = document.createElement('p');
|
||||
emptyP.innerHTML = '<br>';
|
||||
if (insertBeforeElement) {
|
||||
editor.insertBefore(emptyP, insertBeforeElement);
|
||||
} else {
|
||||
editor.appendChild(emptyP);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Restore TTS text to marker state
|
||||
if (sec.tts_text) {
|
||||
updateMarkerData(secMarkerId, 'ttsText', sec.tts_text);
|
||||
}
|
||||
|
||||
// Restore image data to marker state and show preview
|
||||
if (sec.image_data && sec.image_data.length > 0) {
|
||||
updateMarkerData(secMarkerId, 'imageData', sec.image_data);
|
||||
updateMarkerData(secMarkerId, 'imageFormat', sec.image_format || 'png');
|
||||
|
||||
// Show image preview after DOM is ready
|
||||
setTimeout(() => {
|
||||
const imgFormat = sec.image_format || 'png';
|
||||
const dataUrl = `data:image/${imgFormat};base64,${sec.image_data}`;
|
||||
showImagePreview(secMarkerId, dataUrl, 'Loaded image', 0, imgFormat);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
if (Number(sec.section) >= sectionCounter) sectionCounter = Number(sec.section) + 1;
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize image handlers for newly created markers
|
||||
setTimeout(() => {
|
||||
initializeImageHandlers();
|
||||
}, 300);
|
||||
|
||||
// Build playlist from sections with audio
|
||||
playlist = data.sections
|
||||
.filter(s => s.audio_data && s.audio_data.length > 0)
|
||||
.map(sec => ({
|
||||
id: `sec_${sec.chapter}_${sec.section}_loaded`,
|
||||
chapter: sec.chapter,
|
||||
section: sec.section,
|
||||
audioData: sec.audio_data,
|
||||
audioFormat: sec.audio_format || 'mp3',
|
||||
transcription: sec.transcription || [],
|
||||
text: sec.text_content,
|
||||
htmlContent: sec.html_content,
|
||||
ttsText: sec.tts_text,
|
||||
voice: sec.voice,
|
||||
imageData: sec.image_data || '',
|
||||
imageFormat: sec.image_format || 'png'
|
||||
}))
|
||||
.sort((a, b) => {
|
||||
if (Number(a.chapter) !== Number(b.chapter)) return Number(a.chapter) - Number(b.chapter);
|
||||
return Number(a.section) - Number(b.section);
|
||||
});
|
||||
|
||||
updatePlaylistUI();
|
||||
document.getElementById('editorSection').classList.remove('d-none');
|
||||
|
||||
// Load first track if available
|
||||
if (playlist.length > 0) {
|
||||
loadTrackFromPlaylist(playlist[0].id);
|
||||
}
|
||||
|
||||
console.log(`✅ Loaded project: ${data.name} with ${data.sections.length} sections, ${playlist.length} with audio`);
|
||||
|
||||
} catch (e) {
|
||||
alert(e.message);
|
||||
console.error('Load project error:', e);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// DOWNLOAD FUNCTIONS
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* Download upload by ID
|
||||
* @param {number} id - Upload ID
|
||||
*/
|
||||
function downloadUpload(id) {
|
||||
window.location.href = `/uploads/${id}/download`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Download generation by ID
|
||||
* @param {number} id - Generation ID
|
||||
*/
|
||||
function downloadGeneration(id) {
|
||||
window.location.href = `/generations/${id}/download`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Download project by ID
|
||||
* @param {number} id - Project ID
|
||||
*/
|
||||
function downloadProject(id) {
|
||||
window.location.href = `/projects/${id}/download`;
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// DELETE FUNCTIONS
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* Delete upload by ID
|
||||
* @param {number} id - Upload ID
|
||||
*/
|
||||
async function deleteUpload(id) {
|
||||
if (!confirm('Delete this upload?')) return;
|
||||
showLoader('Deleting...', 'Removing upload from database...');
|
||||
try {
|
||||
await fetch(`/uploads/${id}`, { method: 'DELETE' });
|
||||
await loadLibraryData();
|
||||
} catch (e) {
|
||||
alert(e.message);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete generation by ID
|
||||
* @param {number} id - Generation ID
|
||||
*/
|
||||
async function deleteGeneration(id) {
|
||||
if (!confirm('Delete this generation?')) return;
|
||||
showLoader('Deleting...', 'Removing generation from database...');
|
||||
try {
|
||||
await fetch(`/generations/${id}`, { method: 'DELETE' });
|
||||
await loadLibraryData();
|
||||
} catch (e) {
|
||||
alert(e.message);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete project by ID
|
||||
* @param {number} id - Project ID
|
||||
*/
|
||||
async function deleteProject(id) {
|
||||
if (!confirm('Delete this project and all its sections?')) return;
|
||||
showLoader('Deleting...', 'Removing project from database...');
|
||||
try {
|
||||
await fetch(`/projects/${id}`, { method: 'DELETE' });
|
||||
await loadLibraryData();
|
||||
} catch (e) {
|
||||
alert(e.message);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// INITIALIZATION
|
||||
// ==========================================
|
||||
|
||||
// Initialize on DOM ready
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initUploadForm();
|
||||
refreshLibraryStats();
|
||||
});
|
||||
Reference in New Issue
Block a user