Fix Kokoro TTS integration issues: Remove API key requirement and ensure system-specific options display correctly

public/js/loader.js

@@ -96,6 +96,12 @@ const ModuleLoader = (function() {
      */
     async function loadModuleScripts() {
         
+        // Define dependency scripts that need to be loaded first but aren't modules themselves
+        const dependenciesToLoad = [
+            { script: '/js/api-tts-module-base.js' }, // Abstract base class, not a module
+            { script: '/js/tts-handler-module.js' }  // Abstract base class for TTS handlers, not a module
+        ];
+        
         // Define modules with their weights
         const modulesToLoad = [
             // Core functionality modules
@@ -108,6 +114,10 @@ const ModuleLoader = (function() {
             
             // Audio and TTS modules
             { id: 'audio-manager', script: '/js/audio-manager.js', weight: 60 },
+            { id: 'kokoro', script: '/js/kokoro-tts-module.js', weight: 65 },
+            { id: 'browser', script: '/js/browser-tts-module.js', weight: 65 },
+            { id: 'elevenlabs', script: '/js/elevenlabs-tts-module.js', weight: 65 },
+            { id: 'openai', script: '/js/openai-tts-module.js', weight: 65 },
             { id: 'tts-factory', script: '/js/tts-factory.js', weight: 70 }, // TTSFactory must be loaded before TTSPlayer
             { id: 'tts', script: '/js/tts-player.js', weight: 75 },
             
@@ -134,6 +144,10 @@ const ModuleLoader = (function() {
             createModuleListItem(module.id, getModuleNameFromId(module.id));
         });
         
+        // Load dependencies first
+        const loadDependencies = dependenciesToLoad.map(dependency => loadScript(dependency.script));
+        await Promise.all(loadDependencies);
+        
         // Load each module script
         const loadPromises = modulesToLoad.map(module => loadScript(module.script));
         return Promise.all(loadPromises);