openvoiceui 1.0.0

package/src/ui/settings/SettingsPanel.js

@@ -0,0 +1,419 @@
+/**
+ * SettingsPanel - Modular settings UI
+ * Theme picker, face mode selector, and other settings
+ */
+
+window.SettingsPanel = {
+    isOpen: false,
+    currentPanel: null,
+    container: null,
+    _voicePreview: null,     // TTSVoicePreview instance
+    _playlistEditor: null,   // PlaylistEditor instance
+    _profileSwitcher: null,  // ProfileSwitcher instance
+
+    init() {
+        // Create settings modal container
+        this.createContainer();
+
+        // Listen for escape key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && this.isOpen) {
+                this.close();
+            }
+        });
+    },
+
+    createContainer() {
+        // Check if already exists
+        if (document.getElementById('settings-panel-container')) return;
+
+        const container = document.createElement('div');
+        container.id = 'settings-panel-container';
+        container.innerHTML = `
+            <div class="settings-overlay" onclick="SettingsPanel.close()"></div>
+            <div class="settings-modal">
+                <div class="settings-header">
+                    <h2>Settings</h2>
+                    <button class="settings-close" onclick="SettingsPanel.close()">&times;</button>
+                </div>
+                <div class="settings-content" id="settings-content">
+                    <!-- Dynamic content loaded here -->
+                </div>
+            </div>
+        `;
+        document.body.appendChild(container);
+        this.container = container;
+    },
+
+    open(panel = 'themes') {
+        if (!this.container) this.createContainer();
+
+        this.isOpen = true;
+        this.currentPanel = panel;
+        this.container.classList.add('open');
+
+        // Load panel content
+        this.loadPanel(panel);
+    },
+
+    close() {
+        this.isOpen = false;
+        if (this.container) {
+            this.container.classList.remove('open');
+        }
+        // Clean up voice preview player on close
+        if (this._voicePreview) {
+            this._voicePreview.destroy();
+            this._voicePreview = null;
+        }
+        // Clean up playlist editor on close
+        if (this._playlistEditor) {
+            this._playlistEditor.destroy();
+            this._playlistEditor = null;
+        }
+        // Clean up profile switcher on close
+        if (this._profileSwitcher) {
+            this._profileSwitcher.destroy();
+            this._profileSwitcher = null;
+        }
+    },
+
+    loadPanel(panel) {
+        const content = document.getElementById('settings-content');
+        if (!content) return;
+
+        switch (panel) {
+            case 'themes':
+                content.innerHTML = this.renderThemesPanel();
+                this.attachThemeListeners();
+                break;
+            case 'face':
+                content.innerHTML = this.renderFacePanel();
+                this.attachFaceListeners();
+                break;
+            case 'voice':
+                content.innerHTML = this.renderVoicePanel();
+                this.mountVoicePreview();
+                break;
+            case 'playlist':
+                content.innerHTML = this.renderPlaylistPanel();
+                this.mountPlaylistEditor();
+                break;
+            case 'profiles':
+                content.innerHTML = this.renderProfilesPanel();
+                this.mountProfileSwitcher();
+                break;
+            case 'full':
+            default:
+                content.innerHTML = this.renderFullPanel();
+                this.attachAllListeners();
+                break;
+        }
+    },
+
+    renderFullPanel() {
+        return `
+            <div class="settings-section">
+                <h3 onclick="SettingsPanel.toggleSection(this)">
+                    <span class="section-arrow">&#9660;</span> Themes & Colors
+                </h3>
+                <div class="section-content">
+                    ${this.renderThemesContent()}
+                </div>
+            </div>
+            <div class="settings-section">
+                <h3 onclick="SettingsPanel.toggleSection(this)">
+                    <span class="section-arrow">&#9660;</span> Face Display
+                </h3>
+                <div class="section-content">
+                    ${this.renderFaceContent()}
+                </div>
+            </div>
+            <div class="settings-section">
+                <h3 onclick="SettingsPanel.toggleSection(this)">
+                    <span class="section-arrow">&#9660;</span> Voice Preview
+                </h3>
+                <div class="section-content">
+                    <div id="voice-preview-root"><div class="tts-preview-loading">Loading voices\u2026</div></div>
+                </div>
+            </div>
+            <div class="settings-section">
+                <h3 onclick="SettingsPanel.toggleSection(this)">
+                    <span class="section-arrow">&#9660;</span> Playlist Editor
+                </h3>
+                <div class="section-content">
+                    <div id="playlist-editor-root"><div class="pe-loading">Loading playlist\u2026</div></div>
+                </div>
+            </div>
+            <div class="settings-section">
+                <h3 onclick="SettingsPanel.toggleSection(this)">
+                    <span class="section-arrow">&#9660;</span> Agent Profiles
+                </h3>
+                <div class="section-content">
+                    <div id="profile-switcher-root"><div class="ps-loading">Loading profiles\u2026</div></div>
+                </div>
+            </div>
+        `;
+    },
+
+    renderThemesPanel() {
+        return `
+            <div class="settings-section open">
+                <h3>Themes & Colors</h3>
+                <div class="section-content">
+                    ${this.renderThemesContent()}
+                </div>
+            </div>
+        `;
+    },
+
+    renderThemesContent() {
+        const theme = window.ThemeManager?.getCurrentTheme() || {};
+        const presets = window.ThemeManager?.presets || {};
+
+        return `
+            <div class="theme-presets">
+                <label>Presets</label>
+                <div class="preset-grid">
+                    ${Object.entries(presets).map(([name, colors]) => `
+                        <button class="preset-btn" data-preset="${name}" style="background: linear-gradient(135deg, ${colors.primary}, ${colors.accent});">
+                            ${name}
+                        </button>
+                    `).join('')}
+                </div>
+            </div>
+            <div class="theme-custom">
+                <label>Custom Colors</label>
+                <div class="color-pickers">
+                    <div class="color-picker-group">
+                        <label>Primary</label>
+                        <input type="color" id="theme-primary" value="${theme.primary || '#0088ff'}">
+                    </div>
+                    <div class="color-picker-group">
+                        <label>Accent</label>
+                        <input type="color" id="theme-accent" value="${theme.accent || '#00ffff'}">
+                    </div>
+                </div>
+                <button class="reset-btn" onclick="SettingsPanel.resetTheme()">Reset to Default</button>
+            </div>
+        `;
+    },
+
+    renderFacePanel() {
+        return `
+            <div class="settings-section open">
+                <h3>Face Display</h3>
+                <div class="section-content">
+                    ${this.renderFaceContent()}
+                </div>
+            </div>
+        `;
+    },
+
+    renderFaceContent() {
+        // Kept for backwards compatibility — used when FacePicker is unavailable
+        const currentMode = window.FaceRenderer?.getCurrentMode() || 'eyes';
+        const modes = window.FaceRenderer?.getAvailableModes() || [];
+
+        return `
+            <div class="face-modes">
+                <label>Display Mode</label>
+                <div class="mode-grid">
+                    ${modes.map(mode => `
+                        <button class="mode-btn ${mode.id === currentMode ? 'active' : ''}" data-mode="${mode.id}">
+                            <span class="mode-name">${mode.name}</span>
+                            <span class="mode-desc">${mode.description}</span>
+                        </button>
+                    `).join('')}
+                </div>
+            </div>
+        `;
+    },
+
+    renderVoicePanel() {
+        return `
+            <div class="settings-section open">
+                <h3>Voice Preview</h3>
+                <div class="section-content">
+                    <p class="tts-preview-hint">Click a voice to hear a sample.</p>
+                    <div id="voice-preview-root"><div class="tts-preview-loading">Loading voices\u2026</div></div>
+                </div>
+            </div>
+        `;
+    },
+
+    renderPlaylistPanel() {
+        return `
+            <div class="settings-section open">
+                <h3>Playlist Editor</h3>
+                <div class="section-content">
+                    <div id="playlist-editor-root"><div class="pe-loading">Loading playlist\u2026</div></div>
+                </div>
+            </div>
+        `;
+    },
+
+    async mountPlaylistEditor() {
+        const root = document.getElementById('playlist-editor-root');
+        if (!root) return;
+
+        if (this._playlistEditor) {
+            this._playlistEditor.destroy();
+            this._playlistEditor = null;
+        }
+
+        try {
+            const mod = await import('/src/ui/settings/PlaylistEditor.js');
+            const PlaylistEditor = mod.PlaylistEditor || mod.default;
+            this._playlistEditor = new PlaylistEditor();
+            await this._playlistEditor.mount(root);
+        } catch (err) {
+            console.error('[SettingsPanel] Failed to load PlaylistEditor:', err);
+            root.innerHTML = '<div class="pe-error">Playlist editor unavailable.</div>';
+        }
+    },
+
+    async mountVoicePreview() {
+        const root = document.getElementById('voice-preview-root');
+        if (!root) return;
+
+        // Destroy previous instance if any
+        if (this._voicePreview) {
+            this._voicePreview.destroy();
+            this._voicePreview = null;
+        }
+
+        // Try to load TTSVoicePreview module dynamically
+        try {
+            const mod = await import('/src/ui/settings/TTSVoicePreview.js');
+            const TTSVoicePreview = mod.TTSVoicePreview || mod.default;
+            this._voicePreview = new TTSVoicePreview();
+            await this._voicePreview.mount(root);
+        } catch (err) {
+            console.error('[SettingsPanel] Failed to load TTSVoicePreview:', err);
+            root.innerHTML = '<div class="tts-preview-error">Voice preview unavailable.</div>';
+        }
+    },
+
+    renderProfilesPanel() {
+        return `
+            <div class="settings-section open">
+                <h3>Agent Profiles</h3>
+                <div class="section-content">
+                    <p class="ps-hint">Select a profile to switch the agent's personality, voice, and settings.</p>
+                    <div id="profile-switcher-root"><div class="ps-loading">Loading profiles\u2026</div></div>
+                </div>
+            </div>
+        `;
+    },
+
+    async mountProfileSwitcher() {
+        const root = document.getElementById('profile-switcher-root');
+        if (!root) return;
+
+        if (this._profileSwitcher) {
+            this._profileSwitcher.destroy();
+            this._profileSwitcher = null;
+        }
+
+        try {
+            const mod = await import('/src/ui/ProfileSwitcher.js');
+            const ProfileSwitcher = mod.ProfileSwitcher || mod.default;
+            this._profileSwitcher = new ProfileSwitcher();
+            await this._profileSwitcher.mount(root);
+        } catch (err) {
+            console.error('[SettingsPanel] Failed to load ProfileSwitcher:', err);
+            root.innerHTML = '<div class="ps-error">Profile switcher unavailable.</div>';
+        }
+    },
+
+    attachAllListeners() {
+        this.attachThemeListeners();
+        this.attachFaceListeners();
+        // Voice preview mounts async after render — trigger it now if the root exists
+        const voiceRoot = document.getElementById('voice-preview-root');
+        if (voiceRoot) {
+            this.mountVoicePreview();
+        }
+        // Playlist editor mounts async
+        const playlistRoot = document.getElementById('playlist-editor-root');
+        if (playlistRoot) {
+            this.mountPlaylistEditor();
+        }
+        // Profile switcher mounts async
+        const profileRoot = document.getElementById('profile-switcher-root');
+        if (profileRoot) {
+            this.mountProfileSwitcher();
+        }
+    },
+
+    attachThemeListeners() {
+        // Color picker listeners
+        const primaryPicker = document.getElementById('theme-primary');
+        const accentPicker = document.getElementById('theme-accent');
+
+        if (primaryPicker) {
+            primaryPicker.addEventListener('input', (e) => {
+                window.ThemeManager?.setPrimaryColor(e.target.value);
+            });
+        }
+
+        if (accentPicker) {
+            accentPicker.addEventListener('input', (e) => {
+                window.ThemeManager?.setAccentColor(e.target.value);
+            });
+        }
+
+        // Preset buttons
+        document.querySelectorAll('.preset-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const preset = btn.dataset.preset;
+                window.ThemeManager?.applyPreset(preset);
+
+                // Update color pickers
+                const theme = window.ThemeManager?.getCurrentTheme();
+                if (primaryPicker && theme) primaryPicker.value = theme.primary;
+                if (accentPicker && theme) accentPicker.value = theme.accent;
+            });
+        });
+    },
+
+    attachFaceListeners() {
+        const root = document.getElementById('face-picker-root');
+        if (root && window.FacePicker) {
+            window.FacePicker.mount(root);
+            return;
+        }
+
+        // Legacy fallback: plain mode buttons (FacePicker not loaded)
+        document.querySelectorAll('.mode-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const mode = btn.dataset.mode;
+                window.FaceRenderer?.setMode(mode);
+
+                document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+            });
+        });
+    },
+
+    toggleSection(header) {
+        const section = header.parentElement;
+        section.classList.toggle('open');
+        const arrow = header.querySelector('.section-arrow');
+        if (arrow) {
+            arrow.innerHTML = section.classList.contains('open') ? '&#9660;' : '&#9654;';
+        }
+    },
+
+    resetTheme() {
+        window.ThemeManager?.resetTheme();
+
+        // Update pickers
+        const theme = window.ThemeManager?.getCurrentTheme();
+        const primaryPicker = document.getElementById('theme-primary');
+        const accentPicker = document.getElementById('theme-accent');
+        if (primaryPicker && theme) primaryPicker.value = theme.primary;
+        if (accentPicker && theme) accentPicker.value = theme.accent;
+    }
+};

package/src/ui/settings/TTSVoicePreview.js

@@ -0,0 +1,210 @@
+/**
+ * TTSVoicePreview — Voice picker with live audio preview (P4-T5)
+ *
+ * Fetches available TTS providers + voices from /api/tts/providers,
+ * renders a voice grid with play buttons, and calls /api/tts/preview
+ * to generate short audio samples played via TTSPlayer.
+ *
+ * Usage (standalone):
+ *   import { TTSVoicePreview } from './settings/TTSVoicePreview.js';
+ *   const preview = new TTSVoicePreview();
+ *   preview.mount(document.getElementById('my-container'));
+ *
+ * Usage (via SettingsPanel):
+ *   SettingsPanel.open('voice');
+ */
+
+export class TTSVoicePreview {
+    constructor() {
+        this._player = null;
+        this._root = null;
+        this._activeBtn = null;
+        this._loading = false;
+    }
+
+    // -------------------------------------------------------------------------
+    // Public API
+    // -------------------------------------------------------------------------
+
+    /**
+     * Mount the voice preview widget into `container` (replaces contents).
+     * @param {HTMLElement} container
+     */
+    async mount(container) {
+        this._root = container;
+        this._root.innerHTML = '<div class="tts-preview-loading">Loading voices\u2026</div>';
+
+        let providers;
+        try {
+            const resp = await fetch('/api/tts/providers');
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+            providers = await resp.json();
+        } catch (err) {
+            this._root.innerHTML = `<div class="tts-preview-error">Failed to load voices: ${err.message}</div>`;
+            return;
+        }
+
+        this._root.innerHTML = this._render(providers);
+        this._attachListeners();
+    }
+
+    destroy() {
+        if (this._player) {
+            this._player.stop();
+            this._player = null;
+        }
+        if (this._root) {
+            this._root.innerHTML = '';
+            this._root = null;
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // Rendering
+    // -------------------------------------------------------------------------
+
+    _render(providersData) {
+        const providers = providersData.providers || {};
+        const defaultProvider = providersData.default_provider || 'supertonic';
+
+        const sections = Object.entries(providers)
+            .filter(([, p]) => p.mode !== 'full-voice' && Array.isArray(p.voices) && p.voices.length > 0)
+            .map(([id, p]) => this._renderProvider(id, p, id === defaultProvider))
+            .join('');
+
+        if (!sections) {
+            return '<div class="tts-preview-empty">No previewable TTS voices found.</div>';
+        }
+
+        return `<div class="tts-voice-preview">${sections}</div>`;
+    }
+
+    _renderProvider(id, provider, isDefault) {
+        const voices = provider.voices || [];
+        const voiceCards = voices.map(v => this._renderVoiceCard(id, v)).join('');
+        return `
+            <div class="tts-provider-section">
+                <div class="tts-provider-header">
+                    <span class="tts-provider-name">${this._esc(provider.name || id)}</span>
+                    ${isDefault ? '<span class="tts-provider-badge">default</span>' : ''}
+                    <span class="tts-provider-meta">${this._esc(provider.description || '')}</span>
+                </div>
+                <div class="tts-voice-grid">${voiceCards}</div>
+            </div>
+        `;
+    }
+
+    _renderVoiceCard(providerId, voice) {
+        return `
+            <button
+                class="tts-voice-card"
+                data-provider="${this._esc(providerId)}"
+                data-voice="${this._esc(voice)}"
+                title="Preview voice ${this._esc(voice)}"
+            >
+                <span class="tts-voice-play-icon">&#9654;</span>
+                <span class="tts-voice-name">${this._esc(voice)}</span>
+            </button>
+        `;
+    }
+
+    // -------------------------------------------------------------------------
+    // Event handling
+    // -------------------------------------------------------------------------
+
+    _attachListeners() {
+        if (!this._root) return;
+        this._root.addEventListener('click', (e) => {
+            const card = e.target.closest('.tts-voice-card');
+            if (card && !this._loading) {
+                this._previewVoice(card);
+            }
+        });
+    }
+
+    async _previewVoice(btn) {
+        const provider = btn.dataset.provider;
+        const voice = btn.dataset.voice;
+
+        // Stop any running preview
+        if (this._player) {
+            this._player.stop();
+        }
+
+        // Visual: mark active
+        if (this._activeBtn) {
+            this._activeBtn.classList.remove('tts-voice-card--playing', 'tts-voice-card--loading');
+        }
+        this._activeBtn = btn;
+        btn.classList.add('tts-voice-card--loading');
+        this._loading = true;
+
+        try {
+            const resp = await fetch('/api/tts/preview', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ provider, voice }),
+            });
+
+            if (!resp.ok) {
+                const err = await resp.json().catch(() => ({}));
+                throw new Error(err.error || `HTTP ${resp.status}`);
+            }
+
+            const { audio_b64 } = await resp.json();
+
+            btn.classList.remove('tts-voice-card--loading');
+            btn.classList.add('tts-voice-card--playing');
+
+            await this._playAudio(audio_b64);
+
+        } catch (err) {
+            console.error('[TTSVoicePreview] Preview failed:', err);
+            this._showError(btn, err.message);
+        } finally {
+            btn.classList.remove('tts-voice-card--loading', 'tts-voice-card--playing');
+            this._loading = false;
+        }
+    }
+
+    async _playAudio(audio_b64) {
+        // Use TTSPlayer if available (imported or on window), else HTMLAudio fallback
+        const TTSPlayerClass = window.TTSPlayer;
+        if (TTSPlayerClass) {
+            if (!this._player) {
+                this._player = new TTSPlayerClass();
+            }
+            await this._player.init();
+            await this._player.play(audio_b64);
+        } else {
+            // Fallback: HTMLAudioElement
+            const binary = atob(audio_b64);
+            const bytes = new Uint8Array(binary.length);
+            for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+            const blob = new Blob([bytes], { type: 'audio/wav' });
+            const url = URL.createObjectURL(blob);
+            const audio = new Audio(url);
+            await new Promise((resolve) => {
+                audio.onended = () => { URL.revokeObjectURL(url); resolve(); };
+                audio.onerror = () => { URL.revokeObjectURL(url); resolve(); };
+                audio.play().catch(resolve);
+            });
+        }
+    }
+
+    _showError(btn, message) {
+        btn.title = `Error: ${message}`;
+        btn.classList.add('tts-voice-card--error');
+        setTimeout(() => btn.classList.remove('tts-voice-card--error'), 3000);
+    }
+
+    _esc(str) {
+        return String(str)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;');
+    }
+}
+
+export default TTSVoicePreview;