Completed options menu and got kokoro to load.
This commit is contained in:
+120
-20
@@ -722,34 +722,134 @@ ol.choice {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
/* UI Effects */
|
||||
.effects-overlay {
|
||||
/* Options Modal Styling */
|
||||
.options-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none; /* Allow clicks to pass through */
|
||||
z-index: 998; /* Below lighting but above other elements */
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.candle-effect {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.options-content {
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
font-family: var(--book-font);
|
||||
color: #333;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.options-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.options-header h2 {
|
||||
margin: 0;
|
||||
font-family: var(--book-font);
|
||||
font-weight: normal;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.options-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.options-close:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.options-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.options-section h3 {
|
||||
font-family: var(--book-font);
|
||||
font-weight: normal;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.options-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.options-row label {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.options-row select,
|
||||
.options-row input[type="range"] {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Style range inputs to match the top-left menu */
|
||||
.options-row input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
mix-blend-mode: screen;
|
||||
background: radial-gradient(circle at center, rgba(255,230,150,0.2) 0%, rgba(0,0,0,0) 70%);
|
||||
animation: candle-flicker 4s infinite alternate;
|
||||
height: 0.5rem;
|
||||
background-color: transparent;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid black;
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes candle-flicker {
|
||||
0% { opacity: 0.2; transform: scale(1.02); }
|
||||
25% { opacity: 0.3; }
|
||||
50% { opacity: 0.25; transform: scale(0.98); }
|
||||
75% { opacity: 0.3; }
|
||||
100% { opacity: 0.35; transform: scale(1); }
|
||||
.options-row input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 0.5rem;
|
||||
width: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgba(0,0,0,0.9);
|
||||
border: none;
|
||||
box-shadow: -407px 0 0 400px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.options-row input[type="range"]::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
/* Reload notice styled like the book theme */
|
||||
.reload-notice {
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reload-notice span {
|
||||
font-family: var(--book-font);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
+665
-629
File diff suppressed because it is too large
Load Diff
@@ -1,123 +0,0 @@
|
||||
/**
|
||||
* Kokoro Web Worker
|
||||
* Handles TTS processing in a separate thread to keep UI responsive
|
||||
*/
|
||||
|
||||
// Global variables
|
||||
let kokoroLoaded = false;
|
||||
let isProcessing = false;
|
||||
let voiceOptions = {
|
||||
voice: 'bf_alice',
|
||||
speed: 1.0
|
||||
};
|
||||
|
||||
// Initialize when receiving init message
|
||||
self.onmessage = function(e) {
|
||||
const message = e.data;
|
||||
|
||||
try {
|
||||
switch (message.type) {
|
||||
case 'init':
|
||||
// Just acknowledge initialization - actual model loading happens on first generate call
|
||||
self.postMessage({ type: 'ready' });
|
||||
break;
|
||||
|
||||
case 'generate':
|
||||
if (!message.text) {
|
||||
self.postMessage({
|
||||
type: 'error',
|
||||
error: 'No text provided for generation'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Store voice options
|
||||
if (message.voice) voiceOptions.voice = message.voice;
|
||||
if (message.speed) voiceOptions.speed = message.speed;
|
||||
|
||||
// Generate speech
|
||||
generateSpeech(message.text)
|
||||
.then(result => {
|
||||
self.postMessage({
|
||||
type: 'generated',
|
||||
result: result
|
||||
}, [result.audio.buffer]);
|
||||
})
|
||||
.catch(error => {
|
||||
self.postMessage({
|
||||
type: 'error',
|
||||
error: `Generation error: ${error.message || error}`
|
||||
});
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
self.postMessage({
|
||||
type: 'error',
|
||||
error: `Unknown message type: ${message.type}`
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
self.postMessage({
|
||||
type: 'error',
|
||||
error: `Worker error: ${error.message || error}`
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate speech from text
|
||||
* @param {string} text - Text to convert to speech
|
||||
*/
|
||||
async function generateSpeech(text) {
|
||||
if (isProcessing) {
|
||||
throw new Error('Already processing another request');
|
||||
}
|
||||
|
||||
isProcessing = true;
|
||||
|
||||
try {
|
||||
// Load Kokoro if not already loaded
|
||||
if (!kokoroLoaded) {
|
||||
try {
|
||||
// Load the Kokoro script
|
||||
self.importScripts('/js/kokoro.js');
|
||||
|
||||
if (!self.Kokoro) {
|
||||
throw new Error('Kokoro failed to load correctly');
|
||||
}
|
||||
|
||||
kokoroLoaded = true;
|
||||
console.log('Kokoro loaded in worker');
|
||||
} catch (loadError) {
|
||||
console.error('Error loading Kokoro in worker:', loadError);
|
||||
throw new Error(`Failed to load Kokoro: ${loadError.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Generate speech using Kokoro
|
||||
const result = await self.Kokoro(text, {
|
||||
voice: voiceOptions.voice,
|
||||
speed: voiceOptions.speed,
|
||||
autoPlay: false
|
||||
});
|
||||
|
||||
// Extract audio data
|
||||
const audioContext = new (self.AudioContext || self.webkitAudioContext)();
|
||||
const audioBuffer = await audioContext.decodeAudioData(result.buffer);
|
||||
|
||||
// Get audio data as Float32Array
|
||||
const audioData = audioBuffer.getChannelData(0);
|
||||
|
||||
// Return the result
|
||||
return {
|
||||
audio: audioData,
|
||||
sampling_rate: audioBuffer.sampleRate
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error generating speech in worker:', error);
|
||||
throw error;
|
||||
} finally {
|
||||
isProcessing = false;
|
||||
}
|
||||
}
|
||||
+37
-26
@@ -22,20 +22,7 @@ class LocalizationModule extends BaseModule {
|
||||
this.languageNames = {
|
||||
'en-us': 'English (US)',
|
||||
'en-gb': 'English (UK)',
|
||||
'de': 'Deutsch',
|
||||
'de-de': 'Deutsch (Deutschland)',
|
||||
'fr': 'Français',
|
||||
'fr-fr': 'Français (France)',
|
||||
'es': 'Español',
|
||||
'es-es': 'Español (España)',
|
||||
'it': 'Italiano',
|
||||
'ja': 'Japanese',
|
||||
'ko': 'Korean',
|
||||
'zh': 'Chinese (Simplified)',
|
||||
'zh-tw': 'Chinese (Traditional)',
|
||||
'ru': 'Russian',
|
||||
'pt': 'Portuguese',
|
||||
'pt-br': 'Portuguese (Brazil)'
|
||||
'de-de': 'Deutsch (Deutschland)'
|
||||
};
|
||||
|
||||
// Bind methods
|
||||
@@ -57,23 +44,47 @@ class LocalizationModule extends BaseModule {
|
||||
try {
|
||||
this.reportProgress(10, "Initializing localization");
|
||||
|
||||
// Load default translations
|
||||
await this.loadTranslations('en-us');
|
||||
|
||||
// Try to load browser locale if available
|
||||
const browserLocale = navigator.language.toLowerCase();
|
||||
if (browserLocale && browserLocale !== 'en-us') {
|
||||
// Get stored locale from persistence manager if available
|
||||
const persistenceManager = this.getModule('persistence-manager');
|
||||
let storedLocale = null;
|
||||
|
||||
if (persistenceManager) {
|
||||
try {
|
||||
this.reportProgress(50, `Loading browser locale: ${browserLocale}`);
|
||||
await this.loadTranslations(browserLocale);
|
||||
this.currentLocale = browserLocale;
|
||||
} catch (localeError) {
|
||||
console.warn(`Failed to load browser locale ${browserLocale}:`, localeError);
|
||||
storedLocale = persistenceManager.getPreference('app', 'locale');
|
||||
if (storedLocale) {
|
||||
console.log(`Localization: Found stored locale: ${storedLocale}`);
|
||||
await this.loadTranslations(storedLocale);
|
||||
this.currentLocale = storedLocale;
|
||||
} else {
|
||||
// If no stored locale, ensure English is the default and persist it
|
||||
console.log('Localization: No stored locale found, defaulting to en-us');
|
||||
await this.loadTranslations('en-us');
|
||||
persistenceManager.updatePreference('app', 'locale', 'en-us');
|
||||
persistenceManager.updatePreference('tts', 'language', 'en-us');
|
||||
this.currentLocale = 'en-us';
|
||||
}
|
||||
} catch (persistError) {
|
||||
console.warn(`Failed to load stored locale:`, persistError);
|
||||
}
|
||||
} else {
|
||||
// If browser locale is available, just load it as a fallback but keep English as default
|
||||
const browserLocale = navigator.language.toLowerCase();
|
||||
if (browserLocale && browserLocale !== 'en-us') {
|
||||
try {
|
||||
this.reportProgress(50, `Loading browser locale as fallback: ${browserLocale}`);
|
||||
await this.loadTranslations(browserLocale);
|
||||
// Do NOT set browser locale as current - keep English as default
|
||||
} catch (localeError) {
|
||||
console.warn(`Failed to load browser locale ${browserLocale}:`, localeError);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// We don't check for persistence manager here to avoid circular dependency
|
||||
// The persistence manager will update our locale after it initializes if needed
|
||||
// Dispatch event to notify about loaded locale
|
||||
document.dispatchEvent(new CustomEvent('localization:languageChanged', {
|
||||
detail: { locale: this.currentLocale }
|
||||
}));
|
||||
|
||||
this.reportProgress(100, "Localization ready");
|
||||
return true;
|
||||
|
||||
+708
-928
File diff suppressed because it is too large
Load Diff
@@ -181,7 +181,15 @@ class TextProcessorModule extends BaseModule {
|
||||
// Define a custom loader for the patterns
|
||||
loader: (file) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const patternPath = `/js/patterns/${file}`;
|
||||
// Determine correct pattern file based on locale
|
||||
let patternFile = file;
|
||||
|
||||
// Special handling for 'en' locale - use en-us.wasm if available
|
||||
if (file === 'en.wasm') {
|
||||
patternFile = 'en-us.wasm';
|
||||
}
|
||||
|
||||
const patternPath = `/js/patterns/${patternFile}`;
|
||||
console.log(`Loading hyphenation pattern: ${patternPath}`);
|
||||
|
||||
fetch(patternPath)
|
||||
|
||||
+163
-84
@@ -15,21 +15,33 @@ class TTSFactoryModule extends BaseModule {
|
||||
constructor() {
|
||||
super('tts-factory', 'TTS Factory');
|
||||
|
||||
// Available TTS handlers
|
||||
this.dependencies = ['persistence-manager', 'localization'];
|
||||
this.handlers = {};
|
||||
|
||||
// Current active handler
|
||||
this.initStatus = {};
|
||||
this.activeHandler = null;
|
||||
|
||||
// Handler initialization status
|
||||
this.initStatus = {
|
||||
browser: false,
|
||||
api: false,
|
||||
kokoro: false
|
||||
};
|
||||
|
||||
// TTS availability flag
|
||||
this.ttsAvailable = false;
|
||||
this.speed = 1; // Default speed
|
||||
|
||||
// Listen for kokoro:ready event
|
||||
document.addEventListener('kokoro:ready', (event) => {
|
||||
if (event.detail && typeof event.detail.success === 'boolean') {
|
||||
console.log('TTS Factory: Received kokoro:ready event with success =', event.detail.success);
|
||||
this.initStatus['kokoro'] = event.detail.success;
|
||||
|
||||
// If this is the current active handler or we don't have an active handler yet,
|
||||
// try to activate Kokoro if it's now ready
|
||||
if ((this.activeHandler === 'kokoro' || !this.activeHandler) && event.detail.success) {
|
||||
// Only attempt to set active handler if TTS is enabled
|
||||
const ttsEnabled = this.getPreference('tts', 'enabled', false);
|
||||
if (ttsEnabled) {
|
||||
this.setActiveHandler('kokoro');
|
||||
}
|
||||
}
|
||||
|
||||
// Update overall TTS availability
|
||||
this.updateTTSAvailability();
|
||||
}
|
||||
});
|
||||
|
||||
// Bind methods
|
||||
this.bindMethods([
|
||||
@@ -45,11 +57,9 @@ class TTSFactoryModule extends BaseModule {
|
||||
'resume',
|
||||
'getVoices',
|
||||
'getPreference',
|
||||
'isSpeaking'
|
||||
'isSpeaking',
|
||||
'configure'
|
||||
]);
|
||||
|
||||
// Add dependencies
|
||||
this.dependencies = ['persistence-manager', 'localization'];
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -75,19 +85,37 @@ class TTSFactoryModule extends BaseModule {
|
||||
this.registerHandler('api', new ApiTTSHandler());
|
||||
this.registerHandler('kokoro', new KokoroHandler());
|
||||
|
||||
console.log('TTS Factory: Registered handlers:', Object.keys(this.handlers));
|
||||
this.reportProgress(30, "Registered TTS handlers");
|
||||
|
||||
// Force the initialization of all handlers for diagnostics
|
||||
// This ensures they're all initialized even if not selected
|
||||
const initPromises = [];
|
||||
for (const id of Object.keys(this.handlers)) {
|
||||
console.log(`TTS Factory: Initializing handler ${id}`);
|
||||
initPromises.push(this.initializeHandler(id).then(success => {
|
||||
console.log(`TTS Factory: Handler ${id} initialization ${success ? 'succeeded' : 'failed'}`);
|
||||
return { id, success };
|
||||
}));
|
||||
}
|
||||
|
||||
// Wait for all handlers to initialize
|
||||
const results = await Promise.all(initPromises);
|
||||
console.log('TTS Factory: All handler initialization results:', results);
|
||||
|
||||
// Get user preferences
|
||||
const ttsEnabled = this.getPreference('tts', 'enabled', false);
|
||||
const preferredProvider = this.getPreference('tts', 'provider', 'browser');
|
||||
|
||||
console.log(`TTS Factory: User preferences - enabled: ${ttsEnabled}, provider: ${preferredProvider}`);
|
||||
|
||||
// Initialize handlers based on preferences
|
||||
let initSuccess = false;
|
||||
|
||||
if (ttsEnabled) {
|
||||
// Try to initialize preferred handler first
|
||||
this.reportProgress(50, `Initializing preferred TTS handler: ${preferredProvider}`);
|
||||
initSuccess = await this.initializeHandler(preferredProvider);
|
||||
initSuccess = this.initStatus[preferredProvider] || false;
|
||||
|
||||
if (initSuccess) {
|
||||
this.setActiveHandler(preferredProvider);
|
||||
@@ -96,71 +124,44 @@ class TTSFactoryModule extends BaseModule {
|
||||
console.warn(`Failed to initialize preferred TTS handler: ${preferredProvider}, trying alternatives`);
|
||||
|
||||
// Try Kokoro TTS as fallback if not already tried
|
||||
if (preferredProvider !== 'kokoro') {
|
||||
this.reportProgress(60, "Trying Kokoro TTS as fallback");
|
||||
initSuccess = await this.initializeHandler('kokoro');
|
||||
if (initSuccess) {
|
||||
this.setActiveHandler('kokoro');
|
||||
// Update preference to Kokoro since it worked
|
||||
this.getModule('persistence-manager').updatePreference('tts', 'provider', 'kokoro');
|
||||
}
|
||||
if (preferredProvider !== 'kokoro' && this.initStatus.kokoro) {
|
||||
this.reportProgress(60, "Using Kokoro TTS as fallback");
|
||||
this.setActiveHandler('kokoro');
|
||||
// Update preference to Kokoro since it worked
|
||||
this.getModule('persistence-manager').updatePreference('tts', 'provider', 'kokoro');
|
||||
initSuccess = true;
|
||||
}
|
||||
|
||||
// If Kokoro TTS failed, try Browser TTS
|
||||
if (!initSuccess && preferredProvider !== 'browser') {
|
||||
this.reportProgress(70, "Trying Browser TTS as fallback");
|
||||
initSuccess = await this.initializeHandler('browser');
|
||||
if (initSuccess) {
|
||||
this.setActiveHandler('browser');
|
||||
// Update preference to browser since it worked
|
||||
this.getModule('persistence-manager').updatePreference('tts', 'provider', 'browser');
|
||||
}
|
||||
// Try Browser TTS as fallback if not already tried
|
||||
else if (preferredProvider !== 'browser' && this.initStatus.browser) {
|
||||
this.reportProgress(70, "Using Browser TTS as fallback");
|
||||
this.setActiveHandler('browser');
|
||||
// Update preference to Browser since it worked
|
||||
this.getModule('persistence-manager').updatePreference('tts', 'provider', 'browser');
|
||||
initSuccess = true;
|
||||
}
|
||||
else {
|
||||
// If all failed, disable TTS
|
||||
this.reportProgress(80, "All TTS handlers failed, disabling TTS");
|
||||
this.getModule('persistence-manager').updatePreference('tts', 'enabled', false);
|
||||
this.getModule('persistence-manager').updatePreference('tts', 'provider', 'none');
|
||||
}
|
||||
|
||||
// Note: API TTS is not used as a fallback as it requires manual configuration
|
||||
}
|
||||
} else {
|
||||
// Even if TTS is disabled, initialize handlers in the background
|
||||
// so they're ready if the user enables TTS later
|
||||
this.reportProgress(50, "TTS disabled, initializing handlers in background");
|
||||
|
||||
// Initialize Kokoro and Browser handlers in parallel (not API as it requires configuration)
|
||||
const initPromises = [
|
||||
this.initializeHandler('kokoro'),
|
||||
this.initializeHandler('browser')
|
||||
];
|
||||
|
||||
// Wait for all handlers to initialize
|
||||
await Promise.allSettled(initPromises);
|
||||
|
||||
// Check if any handler initialized successfully
|
||||
initSuccess = this.initStatus.kokoro || this.initStatus.browser;
|
||||
}
|
||||
|
||||
// Set TTS availability flag and dispatch event
|
||||
this.ttsAvailable = initSuccess;
|
||||
// Determine overall TTS availability
|
||||
this.ttsAvailable = this.initStatus.kokoro || this.initStatus.browser;
|
||||
|
||||
// Dispatch event to notify UI about TTS availability
|
||||
document.dispatchEvent(new CustomEvent('tts:availability', {
|
||||
// Dispatch TTS availability event
|
||||
window.dispatchEvent(new CustomEvent('tts:availability', {
|
||||
detail: { available: this.ttsAvailable }
|
||||
}));
|
||||
|
||||
this.reportProgress(100, initSuccess ? "TTS factory ready" : "TTS factory ready (no handlers available)");
|
||||
|
||||
// Always return true since TTS is optional for the application
|
||||
return true;
|
||||
this.reportProgress(100, "TTS factory initialized");
|
||||
return true; // TTS is optional, so always return true
|
||||
} catch (error) {
|
||||
console.error("Error initializing TTS factory:", error);
|
||||
console.error("TTS Factory: Error during initialization:", error);
|
||||
this.reportProgress(100, "TTS factory failed");
|
||||
|
||||
// Set TTS availability to false and dispatch event
|
||||
this.ttsAvailable = false;
|
||||
document.dispatchEvent(new CustomEvent('tts:availability', {
|
||||
detail: { available: false }
|
||||
}));
|
||||
|
||||
// Still return true since TTS is optional
|
||||
return true;
|
||||
return true; // TTS is optional, so always return true
|
||||
}
|
||||
}
|
||||
|
||||
@@ -228,27 +229,43 @@ class TTSFactoryModule extends BaseModule {
|
||||
* @returns {boolean} - Success status
|
||||
*/
|
||||
setActiveHandler(id) {
|
||||
if (!id || !this.handlers[id] || !this.initStatus[id]) {
|
||||
console.warn(`Cannot set active handler to ${id}: handler not found or not initialized`);
|
||||
// Handle 'none' option specially
|
||||
if (id === 'none') {
|
||||
this.activeHandler = null;
|
||||
|
||||
// Update TTS availability state
|
||||
this.ttsAvailable = false;
|
||||
|
||||
// Notify about TTS availability change
|
||||
document.dispatchEvent(new CustomEvent('tts:availability', {
|
||||
detail: { available: false }
|
||||
}));
|
||||
|
||||
console.log("TTS Factory: TTS disabled (none selected)");
|
||||
return true;
|
||||
}
|
||||
|
||||
if (!this.handlers[id]) {
|
||||
console.error(`TTS Factory: Handler not found: ${id}`);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Stop current handler if active
|
||||
if (this.activeHandler) {
|
||||
this.handlers[this.activeHandler].stop();
|
||||
if (!this.initStatus[id]) {
|
||||
console.error(`TTS Factory: Handler not initialized: ${id}`);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Set new active handler
|
||||
this.activeHandler = id;
|
||||
|
||||
// Update preference
|
||||
this.getModule('persistence-manager').updatePreference('tts', 'provider', id);
|
||||
// Update TTS availability state
|
||||
this.ttsAvailable = true;
|
||||
|
||||
// Dispatch event
|
||||
this.dispatchEvent('tts-handler-changed', {
|
||||
handler: id
|
||||
});
|
||||
// Notify about TTS availability change
|
||||
document.dispatchEvent(new CustomEvent('tts:availability', {
|
||||
detail: { available: true }
|
||||
}));
|
||||
|
||||
console.log(`TTS Factory: Active handler set to ${id}`);
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -268,8 +285,16 @@ class TTSFactoryModule extends BaseModule {
|
||||
getAvailableHandlers() {
|
||||
const available = {};
|
||||
|
||||
// Debug logging for diagnostic purposes
|
||||
console.log('TTS Factory: getAvailableHandlers called');
|
||||
console.log('TTS Factory: Current initialization status:', this.initStatus);
|
||||
console.log('TTS Factory: Registered handlers:', Object.keys(this.handlers).join(', '));
|
||||
|
||||
for (const id in this.handlers) {
|
||||
available[id] = this.initStatus[id];
|
||||
// Add the handler to the available list even if it's not initialized yet
|
||||
// This ensures all registered handlers appear in the options
|
||||
available[id] = true;
|
||||
console.log(`TTS Factory: Including handler ${id} in options`);
|
||||
}
|
||||
|
||||
return available;
|
||||
@@ -387,6 +412,60 @@ class TTSFactoryModule extends BaseModule {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update overall TTS availability
|
||||
*/
|
||||
updateTTSAvailability() {
|
||||
this.ttsAvailable = this.initStatus.kokoro || this.initStatus.browser;
|
||||
|
||||
// Dispatch TTS availability event
|
||||
window.dispatchEvent(new CustomEvent('tts:availability', {
|
||||
detail: { available: this.ttsAvailable }
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Configure TTS settings for all handlers
|
||||
* @param {Object} options - TTS options
|
||||
* @param {number} [options.speed] - Normalized speech rate (0-1 range)
|
||||
*/
|
||||
configure(options = {}) {
|
||||
// If speed is provided, convert the normalized speed (0-1) to the appropriate scale for each handler
|
||||
if (typeof options.speed === 'number') {
|
||||
const normalizedSpeed = Math.max(0, Math.min(1, options.speed));
|
||||
|
||||
// Scale for each handler type
|
||||
for (const id in this.handlers) {
|
||||
// Ensure the handler exists and has the setVoiceOptions method
|
||||
if (this.handlers[id] && typeof this.handlers[id].setVoiceOptions === 'function') {
|
||||
let scaledOptions = {};
|
||||
|
||||
// Scale the speed value appropriately for each handler type
|
||||
if (id === 'browser') {
|
||||
// Browser TTS uses rate from 0.1 to 2.0
|
||||
scaledOptions.rate = 0.1 + (normalizedSpeed * 1.9);
|
||||
} else if (id === 'kokoro') {
|
||||
// Kokoro uses rate from 0.5 to 1.5
|
||||
scaledOptions.rate = 0.5 + (normalizedSpeed);
|
||||
} else if (id === 'api') {
|
||||
// API uses speed from 0.5 to 2.0
|
||||
scaledOptions.speed = 0.5 + (normalizedSpeed * 1.5);
|
||||
}
|
||||
|
||||
// Apply the scaled options to the handler
|
||||
this.handlers[id].setVoiceOptions(scaledOptions);
|
||||
}
|
||||
}
|
||||
|
||||
// Store the normalized value
|
||||
this.speed = normalizedSpeed;
|
||||
|
||||
console.log(`TTS Factory: Speed set to ${normalizedSpeed} (normalized), ${Math.round(normalizedSpeed * 100)}/100`);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean up when module is disposed
|
||||
*/
|
||||
|
||||
+189
-78
@@ -166,41 +166,102 @@ class UIController extends BaseModule {
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Listen for command events from input handler - use arrow function to preserve context
|
||||
document.addEventListener('ui:command', (event) => {
|
||||
this.handleCommand(event.detail);
|
||||
});
|
||||
// Set up event listeners for menu buttons
|
||||
const saveButton = document.getElementById('save');
|
||||
const loadButton = document.getElementById('reload');
|
||||
const restartButton = document.getElementById('rewind');
|
||||
const speechToggle = document.getElementById('speech');
|
||||
const optionsButton = document.getElementById('options');
|
||||
|
||||
// Listen for text display events - use arrow function to preserve context
|
||||
document.addEventListener('ui:text:complete', (event) => {
|
||||
console.log('UIController: Text complete event received, ready for next text');
|
||||
});
|
||||
// Get persistence manager module
|
||||
const persistenceManager = this.getModule('persistence-manager');
|
||||
|
||||
// Listen for socket connection events
|
||||
document.addEventListener('socket:connected', () => {
|
||||
console.log('UIController: Socket connected');
|
||||
this.updateButtonStates();
|
||||
});
|
||||
// Set up save button
|
||||
if (saveButton) {
|
||||
saveButton.addEventListener('click', () => {
|
||||
document.dispatchEvent(new CustomEvent('ui:game:save'));
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('socket:disconnected', () => {
|
||||
console.log('UIController: Socket disconnected');
|
||||
this.updateButtonStates();
|
||||
});
|
||||
// Set up load button
|
||||
if (loadButton) {
|
||||
loadButton.addEventListener('click', () => {
|
||||
document.dispatchEvent(new CustomEvent('ui:game:load'));
|
||||
});
|
||||
}
|
||||
|
||||
// Listen for TTS state change events
|
||||
document.addEventListener('tts:stateChange', (event) => {
|
||||
if (event.detail) {
|
||||
if (typeof event.detail.enabled === 'boolean') {
|
||||
this.ttsEnabled = event.detail.enabled;
|
||||
}
|
||||
if (typeof event.detail.available === 'boolean') {
|
||||
this.ttsAvailable = event.detail.available;
|
||||
}
|
||||
// Set up restart button
|
||||
if (restartButton) {
|
||||
restartButton.addEventListener('click', () => {
|
||||
document.dispatchEvent(new CustomEvent('ui:game:restart'));
|
||||
});
|
||||
}
|
||||
|
||||
// Set up speech toggle button
|
||||
if (speechToggle) {
|
||||
// Initialize ttsEnabled from persistence manager
|
||||
if (persistenceManager) {
|
||||
const prefs = persistenceManager.getAllPreferences();
|
||||
this.ttsEnabled = prefs.tts?.enabled ?? false;
|
||||
|
||||
// Update button state
|
||||
this.updateButtonStates();
|
||||
}
|
||||
|
||||
speechToggle.addEventListener('click', () => {
|
||||
// Toggle TTS state
|
||||
this.ttsEnabled = !this.ttsEnabled;
|
||||
|
||||
// Update UI
|
||||
this.updateButtonStates();
|
||||
|
||||
// Save preference
|
||||
if (persistenceManager) {
|
||||
persistenceManager.updatePreference('tts', 'enabled', this.ttsEnabled);
|
||||
}
|
||||
|
||||
// Notify other components
|
||||
document.dispatchEvent(new CustomEvent('ui:tts:toggle', {
|
||||
detail: { enabled: this.ttsEnabled }
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
// Set up options button
|
||||
if (optionsButton) {
|
||||
optionsButton.addEventListener('click', () => {
|
||||
document.dispatchEvent(new CustomEvent('ui:options:toggle'));
|
||||
});
|
||||
}
|
||||
|
||||
// Listen for book events
|
||||
document.addEventListener('book:ready', () => {
|
||||
this.updateButtonStates({
|
||||
canSave: true,
|
||||
canLoad: true,
|
||||
canRestart: true
|
||||
});
|
||||
});
|
||||
|
||||
// Listen for TTS availability events
|
||||
// Listen for restart events
|
||||
document.addEventListener('story:restart', () => {
|
||||
this.updateButtonStates({
|
||||
canSave: true,
|
||||
canLoad: false,
|
||||
canRestart: false
|
||||
});
|
||||
});
|
||||
|
||||
// Listen for save events
|
||||
document.addEventListener('story:save', () => {
|
||||
this.updateButtonStates({
|
||||
canSave: true,
|
||||
canLoad: true,
|
||||
canRestart: true
|
||||
});
|
||||
});
|
||||
|
||||
// Listen for TTS availability changes
|
||||
document.addEventListener('tts:availability', (event) => {
|
||||
if (event.detail && typeof event.detail.available === 'boolean') {
|
||||
this.ttsAvailable = event.detail.available;
|
||||
@@ -208,45 +269,92 @@ class UIController extends BaseModule {
|
||||
}
|
||||
});
|
||||
|
||||
// Add options button to controls section
|
||||
const controlsSection = document.getElementById('controls');
|
||||
if (controlsSection) {
|
||||
// Check if options button already exists
|
||||
if (!document.getElementById('options-button')) {
|
||||
const optionsButton = document.createElement('a');
|
||||
optionsButton.id = 'options-button';
|
||||
optionsButton.href = '#';
|
||||
optionsButton.textContent = 'options';
|
||||
optionsButton.title = 'Show game options';
|
||||
optionsButton.className = 'control-button';
|
||||
optionsButton.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
document.dispatchEvent(new CustomEvent('ui:showOptions'));
|
||||
});
|
||||
controlsSection.appendChild(optionsButton);
|
||||
}
|
||||
|
||||
// Add speech toggle button
|
||||
const speechToggle = document.getElementById('speech-toggle');
|
||||
if (speechToggle) {
|
||||
speechToggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
// Dispatch an event for the TTS module to handle instead of calling directly
|
||||
document.dispatchEvent(new CustomEvent('tts:toggle'));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Listen for window resize events
|
||||
window.addEventListener('resize', () => {
|
||||
this.applyBookSizing();
|
||||
// Listen for TTS engine changes
|
||||
document.addEventListener('tts:engine:change', (event) => {
|
||||
// Update button states since TTS engine changed
|
||||
this.updateButtonStates();
|
||||
});
|
||||
|
||||
// Listen for key events
|
||||
document.addEventListener('keydown', (event) => {
|
||||
// Pass to input handler
|
||||
if (this.inputHandler) {
|
||||
this.inputHandler.handleKeyboardInput(event);
|
||||
// Listen for TTS toggle events from other components
|
||||
document.addEventListener('tts:enabled:change', (event) => {
|
||||
if (event.detail && typeof event.detail.enabled === 'boolean') {
|
||||
this.ttsEnabled = event.detail.enabled;
|
||||
this.updateButtonStates();
|
||||
|
||||
// Ensure persistence is updated
|
||||
if (persistenceManager) {
|
||||
persistenceManager.updatePreference('tts', 'enabled', this.ttsEnabled);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Set up speed slider in main UI
|
||||
const speedSlider = document.getElementById('speed');
|
||||
const speedReset = document.getElementById('speed_reset');
|
||||
|
||||
if (speedSlider) {
|
||||
// Initialize speed from persistence manager
|
||||
if (persistenceManager) {
|
||||
const prefs = persistenceManager.getAllPreferences();
|
||||
// Get the unified speed value (0-1 range)
|
||||
const speed = prefs.tts?.speed ?? 0.5;
|
||||
// Convert to slider range (0-100)
|
||||
speedSlider.value = Math.round(speed * 100);
|
||||
}
|
||||
|
||||
speedSlider.addEventListener('input', (e) => {
|
||||
// Convert slider value (0-100) to normalized speed (0-1)
|
||||
const speed = parseInt(e.target.value) / 100;
|
||||
|
||||
// Scale for different TTS engines
|
||||
// This value is used for real-time preview only
|
||||
const rate = this.ttsEnabled ? speed * 2 : 1;
|
||||
|
||||
// Update animation speed
|
||||
document.dispatchEvent(new CustomEvent('animation:speed:change', {
|
||||
detail: { speed: rate }
|
||||
}));
|
||||
|
||||
// Update TTS speed
|
||||
document.dispatchEvent(new CustomEvent('tts:speed:change', {
|
||||
detail: { speed: speed }
|
||||
}));
|
||||
|
||||
// Save preference
|
||||
if (persistenceManager) {
|
||||
persistenceManager.updatePreference('tts', 'speed', speed);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (speedReset) {
|
||||
speedReset.addEventListener('click', () => {
|
||||
// Reset to default speed (0.5)
|
||||
if (speedSlider) {
|
||||
// Default value is 0.5 in normalized form (0-1),
|
||||
// which is 50 in slider range (0-100)
|
||||
speedSlider.value = 50;
|
||||
|
||||
// Trigger the input event to update all components
|
||||
speedSlider.dispatchEvent(new Event('input'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Listen for speed change events from other components
|
||||
document.addEventListener('tts:speed:change', (event) => {
|
||||
if (event.detail && typeof event.detail.speed === 'number') {
|
||||
// Update the main UI speed slider
|
||||
const speedSlider = document.getElementById('speed');
|
||||
if (speedSlider) {
|
||||
// Convert normalized speed (0-1) to slider range (0-100)
|
||||
speedSlider.value = Math.round(event.detail.speed * 100);
|
||||
}
|
||||
|
||||
// Save to persistence manager
|
||||
if (persistenceManager) {
|
||||
persistenceManager.updatePreference('tts', 'speed', event.detail.speed);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -342,7 +450,6 @@ class UIController extends BaseModule {
|
||||
|
||||
/**
|
||||
* Update UI button states based on game state
|
||||
* @param {Object} state - Game state information
|
||||
*/
|
||||
updateButtonStates(state = {}) {
|
||||
const { canSave, canLoad, canRestart } = state;
|
||||
@@ -351,7 +458,7 @@ class UIController extends BaseModule {
|
||||
const saveButton = document.getElementById('save');
|
||||
const loadButton = document.getElementById('reload');
|
||||
const restartButton = document.getElementById('rewind');
|
||||
const speechToggle = document.getElementById('speech-toggle');
|
||||
const speechToggle = document.getElementById('speech');
|
||||
|
||||
// Update save button state
|
||||
if (saveButton) {
|
||||
@@ -382,21 +489,25 @@ class UIController extends BaseModule {
|
||||
|
||||
// Update speech toggle button state
|
||||
if (speechToggle) {
|
||||
// Update the button appearance based on TTS state
|
||||
if (this.ttsEnabled) {
|
||||
speechToggle.classList.add('active');
|
||||
speechToggle.title = 'Disable speech';
|
||||
} else {
|
||||
speechToggle.classList.remove('active');
|
||||
speechToggle.title = 'Enable speech';
|
||||
}
|
||||
|
||||
// Disable the button completely if TTS is not available
|
||||
if (this.ttsAvailable === false) {
|
||||
// Update the button appearance based on TTS state using existing styles
|
||||
if (!this.ttsAvailable) {
|
||||
// TTS is not available, disable the button
|
||||
speechToggle.setAttribute('disabled', 'disabled');
|
||||
speechToggle.title = 'Speech not available';
|
||||
speechToggle.title = 'Text-to-speech is not available';
|
||||
} else {
|
||||
// TTS is available, remove disabled attribute
|
||||
speechToggle.removeAttribute('disabled');
|
||||
|
||||
// Update based on whether TTS is enabled
|
||||
if (this.ttsEnabled) {
|
||||
speechToggle.style.fontWeight = 'bold';
|
||||
speechToggle.style.color = '#000';
|
||||
speechToggle.title = 'Disable speech';
|
||||
} else {
|
||||
speechToggle.style.fontWeight = 'normal';
|
||||
speechToggle.style.color = '#999';
|
||||
speechToggle.title = 'Enable speech';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -243,6 +243,7 @@ class UIDisplayHandler extends BaseModule {
|
||||
<a class="l10n-restart" id="rewind" title="Restart story from beginning" disabled="disabled">restart</a>
|
||||
<a class="l10n-save" id="save" title="Save progress">save</a>
|
||||
<a class="l10n-load" id="reload" title="Reload from save point" disabled="disabled">load</a>
|
||||
<a class="l10n-options" id="options" title="Options">options</a>
|
||||
`;
|
||||
this.pageLeft.appendChild(controls);
|
||||
|
||||
|
||||
@@ -0,0 +1,275 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kokoro Loader</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
#status {
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#log {
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background-color: #f9f9f9;
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
.error { color: red; }
|
||||
.info { color: blue; }
|
||||
.success { color: green; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="status">Loading Kokoro...</div>
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="module">
|
||||
// Import the KokoroTTS class from the module
|
||||
import { KokoroTTS } from '/js/kokoro-js.js';
|
||||
|
||||
// Logging function
|
||||
function log(message, type = 'info') {
|
||||
console.log(message);
|
||||
const logElement = document.getElementById('log');
|
||||
const entry = document.createElement('div');
|
||||
entry.className = type;
|
||||
entry.textContent = `[${new Date().toISOString()}] ${message}`;
|
||||
logElement.appendChild(entry);
|
||||
logElement.scrollTop = logElement.scrollHeight;
|
||||
|
||||
// Also send to parent
|
||||
if (window.parent !== window) {
|
||||
window.parent.postMessage({
|
||||
type: 'kokoro-log',
|
||||
logType: type,
|
||||
message: message
|
||||
}, '*');
|
||||
}
|
||||
}
|
||||
|
||||
// Create a global object to store Kokoro instance
|
||||
window.KokoroLoader = {
|
||||
loaded: false,
|
||||
error: null,
|
||||
instance: null,
|
||||
kokoroTTS: null,
|
||||
voices: null,
|
||||
callbacks: [],
|
||||
progress: 0,
|
||||
progressMessage: 'Initializing...',
|
||||
|
||||
// Register a callback for when Kokoro is loaded
|
||||
onLoad: function(callback) {
|
||||
if (this.loaded) {
|
||||
callback(this.instance);
|
||||
} else if (this.error) {
|
||||
callback(null, this.error);
|
||||
} else {
|
||||
this.callbacks.push(callback);
|
||||
}
|
||||
},
|
||||
|
||||
// Update progress
|
||||
updateProgress: function(progress, message) {
|
||||
this.progress = progress;
|
||||
this.progressMessage = message || 'Loading...';
|
||||
const progressPercent = Math.round(progress * 100);
|
||||
document.getElementById('status').textContent = `${this.progressMessage} (${isNaN(progressPercent) ? 0 : progressPercent}%)`;
|
||||
log(`Progress: ${this.progressMessage} (${isNaN(progressPercent) ? 0 : progressPercent}%)`);
|
||||
|
||||
// Notify parent window
|
||||
if (window.parent !== window) {
|
||||
window.parent.postMessage({
|
||||
type: 'kokoro-progress',
|
||||
progress: isNaN(progress) ? 0 : progress,
|
||||
message: this.progressMessage
|
||||
}, '*');
|
||||
}
|
||||
},
|
||||
|
||||
// Get default voices
|
||||
getDefaultVoices: function() {
|
||||
return [
|
||||
// American Female voices
|
||||
{ id: 'af_heart', name: 'Heart', lang: 'en-US', gender: 'female' },
|
||||
{ id: 'af_daisy', name: 'Daisy', lang: 'en-US', gender: 'female' },
|
||||
{ id: 'af_soft', name: 'Soft', lang: 'en-US', gender: 'female' },
|
||||
{ id: 'af_glados', name: 'GLaDOS', lang: 'en-US', gender: 'female' },
|
||||
{ id: 'af_southern_belle', name: 'Southern Belle', lang: 'en-US', gender: 'female' },
|
||||
{ id: 'af_dramatic', name: 'Dramatic', lang: 'en-US', gender: 'female' },
|
||||
{ id: 'af_valley_girl', name: 'Valley Girl', lang: 'en-US', gender: 'female' },
|
||||
{ id: 'af_british', name: 'British', lang: 'en-US', gender: 'female' },
|
||||
{ id: 'af_russian', name: 'Russian', lang: 'en-US', gender: 'female' },
|
||||
{ id: 'af_german', name: 'German', lang: 'en-US', gender: 'female' },
|
||||
{ id: 'af_cheeky_cute', name: 'Cheeky Cute', lang: 'en-US', gender: 'female' },
|
||||
|
||||
// American Male voices
|
||||
{ id: 'am_bruce', name: 'Bruce', lang: 'en-US', gender: 'male' },
|
||||
{ id: 'am_announcer', name: 'Announcer', lang: 'en-US', gender: 'male' },
|
||||
{ id: 'am_radio_host', name: 'Radio Host', lang: 'en-US', gender: 'male' },
|
||||
|
||||
// British Female voices
|
||||
{ id: 'bf_charlotte', name: 'Charlotte', lang: 'en-GB', gender: 'female' },
|
||||
{ id: 'bf_elizabeth', name: 'Elizabeth', lang: 'en-GB', gender: 'female' },
|
||||
{ id: 'bf_lily', name: 'Lily', lang: 'en-GB', gender: 'female' },
|
||||
{ id: 'bf_olivia', name: 'Olivia', lang: 'en-GB', gender: 'female' },
|
||||
{ id: 'bf_victoria', name: 'Victoria', lang: 'en-GB', gender: 'female' },
|
||||
|
||||
// British Male voices
|
||||
{ id: 'bm_william', name: 'William', lang: 'en-GB', gender: 'male' },
|
||||
{ id: 'bm_arthur', name: 'Arthur', lang: 'en-GB', gender: 'male' },
|
||||
{ id: 'bm_george', name: 'George', lang: 'en-GB', gender: 'male' },
|
||||
{ id: 'bm_harry', name: 'Harry', lang: 'en-GB', gender: 'male' },
|
||||
{ id: 'bm_jack', name: 'Jack', lang: 'en-GB', gender: 'male' }
|
||||
];
|
||||
},
|
||||
|
||||
// Initialize Kokoro
|
||||
init: async function() {
|
||||
try {
|
||||
log('Starting Kokoro initialization');
|
||||
this.updateProgress(0.1, 'Loading Kokoro library...');
|
||||
|
||||
// Store the KokoroTTS class
|
||||
this.kokoroTTS = KokoroTTS;
|
||||
log('Kokoro library loaded successfully', 'success');
|
||||
this.updateProgress(0.3, 'Initializing Kokoro model...');
|
||||
|
||||
// Initialize the model
|
||||
const model_id = "onnx-community/Kokoro-82M-v1.0-ONNX";
|
||||
this.instance = await this.kokoroTTS.from_pretrained(model_id, {
|
||||
dtype: "q8", // Use quantized model for better performance
|
||||
device: "wasm", // Use WebAssembly for compatibility
|
||||
progress_callback: (progress) => {
|
||||
// Map progress from 0-1 to 30-90
|
||||
const mappedProgress = 0.3 + (progress * 0.6);
|
||||
this.updateProgress(mappedProgress, `Loading Kokoro model: ${Math.round(progress * 100)}%`);
|
||||
}
|
||||
});
|
||||
|
||||
// Fetch available voices
|
||||
log('Fetching available voices...');
|
||||
this.updateProgress(0.8, 'Fetching voices...');
|
||||
|
||||
// Use default voices directly since the list_voices method is unreliable
|
||||
log('Using predefined voice list instead of attempting to fetch from model');
|
||||
this.voices = this.getDefaultVoices();
|
||||
log(`Using ${this.voices.length} predefined voices`, 'success');
|
||||
|
||||
log('Testing Kokoro with a simple text');
|
||||
this.updateProgress(0.95, 'Testing Kokoro...');
|
||||
|
||||
// Test with a simple text
|
||||
// Use the first available voice for testing
|
||||
const testVoice = this.voices && this.voices.length > 0 ? this.voices[0].id : 'af_heart';
|
||||
await this.instance.generate('Test', { voice: testVoice });
|
||||
|
||||
log('Kokoro initialized successfully', 'success');
|
||||
this.loaded = true;
|
||||
this.updateProgress(1.0, 'Kokoro ready');
|
||||
|
||||
// Notify parent window
|
||||
if (window.parent !== window) {
|
||||
log('Notifying parent window of successful initialization');
|
||||
window.parent.postMessage({
|
||||
type: 'kokoro-ready',
|
||||
success: true,
|
||||
voices: this.voices
|
||||
}, '*');
|
||||
}
|
||||
|
||||
// Call all callbacks
|
||||
log(`Calling ${this.callbacks.length} registered callbacks`);
|
||||
this.callbacks.forEach(callback => callback(this.instance));
|
||||
|
||||
document.getElementById('status').textContent = 'Kokoro loaded and ready!';
|
||||
} catch (error) {
|
||||
const errorMsg = error.message || 'Unknown error';
|
||||
log(`Error initializing Kokoro: ${errorMsg}`, 'error');
|
||||
console.error('Error initializing Kokoro:', error);
|
||||
this.error = error;
|
||||
|
||||
// Notify parent window
|
||||
if (window.parent !== window) {
|
||||
log('Notifying parent window of initialization failure');
|
||||
window.parent.postMessage({
|
||||
type: 'kokoro-ready',
|
||||
success: false,
|
||||
error: errorMsg
|
||||
}, '*');
|
||||
}
|
||||
|
||||
// Call all callbacks with error
|
||||
log(`Calling ${this.callbacks.length} registered callbacks with error`);
|
||||
this.callbacks.forEach(callback => callback(null, error));
|
||||
|
||||
document.getElementById('status').textContent = `Error loading Kokoro: ${errorMsg}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize Kokoro when the page loads
|
||||
window.addEventListener('load', () => {
|
||||
log('Page loaded, initializing Kokoro');
|
||||
window.KokoroLoader.init();
|
||||
});
|
||||
|
||||
// Handle messages from parent window
|
||||
window.addEventListener('message', function(event) {
|
||||
if (event.source !== window.parent) return;
|
||||
|
||||
const data = event.data;
|
||||
|
||||
if (data.type === 'kokoro-generate') {
|
||||
// Generate speech in a non-blocking way
|
||||
if (!window.KokoroLoader.loaded) {
|
||||
log(`Cannot process generation request ${data.id}: Kokoro not loaded`, 'error');
|
||||
window.parent.postMessage({
|
||||
type: 'kokoro-generated',
|
||||
id: data.id,
|
||||
success: false,
|
||||
error: 'Kokoro not loaded'
|
||||
}, '*');
|
||||
} else {
|
||||
log(`Processing generation request ${data.id}`);
|
||||
|
||||
// Make the generation asynchronous to avoid freezing the UI
|
||||
setTimeout(() => {
|
||||
window.KokoroLoader.instance.generate(data.text, { voice: data.voice, speed: data.speed })
|
||||
.then(result => {
|
||||
log(`Generation successful for request ${data.id}`, 'success');
|
||||
window.parent.postMessage({
|
||||
type: 'kokoro-generated',
|
||||
id: data.id,
|
||||
success: true,
|
||||
result: result
|
||||
}, '*');
|
||||
})
|
||||
.catch(error => {
|
||||
log(`Generation failed for request ${data.id}: ${error.message}`, 'error');
|
||||
window.parent.postMessage({
|
||||
type: 'kokoro-generated',
|
||||
id: data.id,
|
||||
success: false,
|
||||
error: error.message
|
||||
}, '*');
|
||||
});
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
{}
|
||||
@@ -0,0 +1 @@
|
||||
{}
|
||||
@@ -0,0 +1 @@
|
||||
{}
|
||||
Reference in New Issue
Block a user