blomios/Nodecast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show Laya model download progress and surface errors in Settings (#12)

Browse Source 
Track download progress in layaService (bytes/total, phase, error
state) and expose it through the laya status route. Render a progress
bar during model download in Settings via a layaStatusPresentation
service, and display download/status errors inline instead of failing
silently. Cover progress tracking and status presentation with tests.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
blomios
2026-10-02 11:49:36 +02:00
parent d134c9790d
commit d276d3b4c3
8 changed files with 486 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
public/js/pages/Settings.js
View File

@ -125,6 +125,14 @@ class SettingsPage {
this.runLayaModelAction('remove');
}
});
document.getElementById('laya-use-standard')?.addEventListener('click', () => this.useStandardLanguageDetection());
document.getElementById('laya-show-details')?.addEventListener('click', () => {
const details = document.getElementById('laya-error-details');
const button = document.getElementById('laya-show-details');
const expanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', String(!expanded));
details.hidden = expanded;
});
void this.loadLayaStatus();
}
@ -135,6 +143,7 @@ class SettingsPage {
this.layaStatus = { runtimeAvailable: false, modelPresent: false, error: err.message };
}
this.renderLayaStatus(this.layaStatus);
if (this.layaStatus?.downloading) this.startLayaStatusPolling();
return this.layaStatus;
}
@ -144,25 +153,56 @@ class SettingsPage {
const messageElement = document.getElementById('laya-model-message');
const downloadButton = document.getElementById('laya-download-model');
const removeButton = document.getElementById('laya-remove-model');
const useStandardButton = document.getElementById('laya-use-standard');
const progress = document.getElementById('laya-download-progress');
const progressTrack = document.getElementById('laya-progress-track');
const progressBar = document.getElementById('laya-progress-bar');
const progressText = document.getElementById('laya-progress-text');
const detailsButton = document.getElementById('laya-show-details');
const details = document.getElementById('laya-error-details');
if (!statusElement) return;
const modelPresent = status.modelPresent === true;
const runtimeAvailable = status.runtimeAvailable === true;
statusElement.textContent = modelPresent
? (runtimeAvailable ? 'Model ready' : 'Model downloaded · runtime unavailable')
: (runtimeAvailable ? 'Model not downloaded' : 'Local AI runtime unavailable');
const size = status.modelSizeBytes || status.sizeBytes || status.runtime?.modelSizeBytes;
sizeElement.textContent = size ? this.formatBytes(size) : '';
downloadButton.hidden = modelPresent;
removeButton.hidden = !modelPresent;
downloadButton.disabled = Boolean(this.layaOperationPending);
removeButton.disabled = Boolean(this.layaOperationPending);
const mode = this.app.player?.settings?.languageDetectionMode || 'algo';
if (this.layaOperationPending) messageElement.textContent = this.layaOperationPending;
else if (mode !== 'algo' && (!modelPresent || !runtimeAvailable)) {
const presentation = LayaStatusPresentation.presentLayaStatus(status, mode);
statusElement.textContent = presentation.statusLabel;
const size = status.sizeBytes || status.runtime?.modelSizeBytes;
sizeElement.textContent = size ? this.formatBytes(size) : '';
downloadButton.hidden = !presentation.showDownload;
downloadButton.textContent = presentation.downloadLabel;
removeButton.hidden = !presentation.showRemove;
useStandardButton.hidden = !presentation.showUseStandard;
downloadButton.disabled = presentation.busy || Boolean(this.layaOperationPending);
removeButton.disabled = presentation.busy || Boolean(this.layaOperationPending);
progress.hidden = !presentation.showProgress;
progressTrack.classList.toggle('indeterminate', presentation.progressIndeterminate);
if (presentation.progressPercent !== null) {
progressTrack.setAttribute('aria-valuemin', '0');
progressTrack.setAttribute('aria-valuemax', '100');
progressTrack.setAttribute('aria-valuenow', String(presentation.progressPercent));
progressBar.style.width = `${presentation.progressPercent}%`;
progressText.textContent = `${presentation.progressPercent}%${presentation.bytesDownloaded !== null ? ` · ${this.formatBytes(presentation.bytesDownloaded)} downloaded` : ''}`;
progressTrack.setAttribute('aria-valuetext', progressText.textContent);
} else {
progressTrack.removeAttribute('aria-valuemin');
progressTrack.removeAttribute('aria-valuemax');
progressTrack.removeAttribute('aria-valuenow');
progressBar.style.width = '';
progressText.textContent = presentation.bytesDownloaded !== null
? `${this.formatBytes(presentation.bytesDownloaded)} downloaded`
: 'Downloading…';
progressTrack.setAttribute('aria-valuetext', progressText.textContent);
}
detailsButton.hidden = !presentation.errorDetail;
detailsButton.setAttribute('aria-expanded', 'false');
details.hidden = true;
details.textContent = presentation.errorDetail;
if (presentation.errorMessage) messageElement.textContent = presentation.errorMessage;
else if (this.layaOperationPending) messageElement.textContent = this.layaOperationPending;
else if (mode !== 'algo' && (!status.modelPresent || !status.runtimeAvailable)) {
messageElement.textContent = 'Local AI is not ready. Download the model and ensure the runtime is running. Live TV will remain available.';
} else messageElement.textContent = status.error || '';
} else messageElement.textContent = '';
}
formatBytes(bytes) {
@ -176,24 +216,56 @@ class SettingsPage {
async runLayaModelAction(action) {
if (this.layaOperationPending) return;
this.layaOperationPending = action === 'download' ? 'Downloading model…' : 'Removing model…';
this.layaStatus = {
...(this.layaStatus || {}),
phase: action === 'download' ? 'preparing' : 'deleting',
downloading: action === 'download'
};
this.renderLayaStatus(this.layaStatus);
const poll = setInterval(() => void this.loadLayaStatus(), 2000);
try {
this.layaStatus = action === 'download'
? await API.laya.downloadModel('multilingual')
: await API.laya.removeModel();
this.layaOperationPending = '';
this.renderLayaStatus(this.layaStatus);
if (this.layaStatus?.downloading) this.startLayaStatusPolling();
else await this.loadLayaStatus();
} catch (err) {
this.layaStatus = { ...(this.layaStatus || {}), error: err.message };
} finally {
clearInterval(poll);
this.layaOperationPending = '';
await this.loadLayaStatus();
if (this.app.player.settings.languageDetectionMode !== 'algo') {
this.app.channelList.setLanguageDetectionMode(this.app.player.settings.languageDetectionMode);
}
}
}
startLayaStatusPolling() {
if (this.layaPollTimer) return;
this.layaPollTimer = setInterval(async () => {
if (this.layaPollInFlight) return;
this.layaPollInFlight = true;
try {
const status = await this.loadLayaStatus();
if (!status?.downloading && ['ready', 'failed', 'idle'].includes(status?.phase)) {
clearInterval(this.layaPollTimer);
this.layaPollTimer = null;
if (status.phase === 'ready' && this.app.player.settings.languageDetectionMode !== 'algo') {
this.app.channelList.setLanguageDetectionMode(this.app.player.settings.languageDetectionMode);
}
}
} finally {
this.layaPollInFlight = false;
}
}, 1000);
}
useStandardLanguageDetection() {
const radio = document.querySelector('input[name="language-detection-mode"][value="algo"]');
if (radio) radio.checked = true;
this.app.player.settings.languageDetectionMode = 'algo';
this.app.player.saveSettings();
this.app.channelList.setLanguageDetectionMode('algo');
this.renderLayaStatus(this.layaStatus);
}
async initTranscodingSettings() {
// Encoder settings
const hwEncoderSelect = document.getElementById('setting-hw-encoder');