894 lines
32 KiB
JavaScript
894 lines
32 KiB
JavaScript
/**
|
|
* 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();
|
|
});
|