Upload 27 files

adapters/language-selector.js

@@ -0,0 +1,153 @@
+// ============================================================
+// Language Selector — Ánh xạ ngôn ngữ tập trung
+// Tái sử dụng cho Voice, LLM, và các adapter khác
+// ============================================================
+
+/**
+ * Ánh xạ ngôn ngữ app → locale (BCP 47 format).
+ * Dùng cho Web Speech API, TTS, STT.
+ */
+var SPEECH_LOCALE_MAP = {
+    vi: 'vi-VN',
+    en: 'en-US',
+    ja: 'ja-JP'
+};
+
+/**
+ * Ánh xạ ngôn ngữ app → Whisper language code (ISO 639-1).
+ * Dùng cho STT (Whisper ONNX).
+ */
+var WHISPER_LANG_MAP = {
+    vi: 'vietnamese',
+    en: 'english',
+    ja: 'japanese'
+};
+
+/**
+ * Ánh xạ ngôn ngữ app → LLM language code.
+ * Dùng cho LLM adapter (Ollama, Hugging Face, v.v.).
+ */
+var LLM_LANG_MAP = {
+    vi: 'vi',
+    en: 'en',
+    ja: 'ja'
+};
+
+/**
+ * Danh sách ngôn ngữ được hỗ trợ.
+ */
+var SUPPORTED_LANGUAGES = ['vi', 'en', 'ja'];
+
+/**
+ * Lấy locale từ language code.
+ * @param {string} lang - Language code (vi, en, ja)
+ * @returns {string} Locale (vi-VN, en-US, ja-JP)
+ */
+function getLocale(lang) {
+    return SPEECH_LOCALE_MAP[lang] || lang;
+}
+
+/**
+ * Lấy Whisper language code từ language code.
+ * @param {string} lang - Language code (vi, en, ja)
+ * @returns {string} Whisper language code (vietnamese, english, japanese)
+ */
+function getWhisperLang(lang) {
+    return WHISPER_LANG_MAP[lang] || 'vietnamese';
+}
+
+/**
+ * Lấy LLM language code từ language code.
+ * @param {string} lang - Language code (vi, en, ja)
+ * @returns {string} LLM language code (vi, en, ja)
+ */
+function getLLMLang(lang) {
+    return LLM_LANG_MAP[lang] || 'vi';
+}
+
+/**
+ * Kiểm tra ngôn ngữ có được hỗ trợ không.
+ * @param {string} lang - Language code
+ * @returns {boolean}
+ */
+function isLanguageSupported(lang) {
+    return SUPPORTED_LANGUAGES.includes(lang);
+}
+
+/**
+ * Lấy ngôn ngữ mặc định.
+ * @returns {string} Language code (vi)
+ */
+function getDefaultLanguage() {
+    return 'vi';
+}
+
+/**
+ * Lấy danh sách ngôn ngữ được hỗ trợ.
+ * @returns {array} Danh sách language codes
+ */
+function getSupportedLanguages() {
+    return SUPPORTED_LANGUAGES.slice();
+}
+
+/**
+ * Lưu ngôn ngữ vào localStorage.
+ * @param {string} lang - Language code
+ */
+function saveLanguageToStorage(lang) {
+    if (typeof window !== 'undefined' && window.localStorage) {
+        try {
+            window.localStorage.setItem('selectedLanguage', lang);
+            console.log('[LanguageSelector] Saved language to localStorage:', lang);
+        } catch (err) {
+            console.error('[LanguageSelector] Error saving to localStorage:', err);
+        }
+    }
+}
+
+/**
+ * Lấy ngôn ngữ từ localStorage.
+ * @returns {string|null} Language code hoặc null nếu không có
+ */
+function getLanguageFromStorage() {
+    if (typeof window !== 'undefined' && window.localStorage) {
+        try {
+            var lang = window.localStorage.getItem('selectedLanguage');
+            return lang || null;
+        } catch (err) {
+            console.error('[LanguageSelector] Error reading from localStorage:', err);
+            return null;
+        }
+    }
+    return null;
+}
+
+/**
+ * Callback khi ngôn ngữ thay đổi.
+ * Lưu vào localStorage và có thể được override bởi các adapter để reload state.
+ * @param {string} lang - Language code mới
+ */
+function onLanguageChange(lang) {
+    console.log('[LanguageSelector] Language changed to:', lang);
+    saveLanguageToStorage(lang);
+    // Các adapter có thể override hàm này để reload state
+}
+
+// ============================================================
+// Export cho Node/test
+// ============================================================
+if (typeof module !== 'undefined' && module.exports) {
+    globalThis.SPEECH_LOCALE_MAP = SPEECH_LOCALE_MAP;
+    globalThis.WHISPER_LANG_MAP = WHISPER_LANG_MAP;
+    globalThis.LLM_LANG_MAP = LLM_LANG_MAP;
+    globalThis.SUPPORTED_LANGUAGES = SUPPORTED_LANGUAGES;
+    globalThis.getLocale = getLocale;
+    globalThis.getWhisperLang = getWhisperLang;
+    globalThis.getLLMLang = getLLMLang;
+    globalThis.isLanguageSupported = isLanguageSupported;
+    globalThis.getDefaultLanguage = getDefaultLanguage;
+    globalThis.getSupportedLanguages = getSupportedLanguages;
+    globalThis.saveLanguageToStorage = saveLanguageToStorage;
+    globalThis.getLanguageFromStorage = getLanguageFromStorage;
+    globalThis.onLanguageChange = onLanguageChange;
+}

adapters/voice-adapter.js

@@ -1,23 +1,14 @@
 // ============================================================
-// Voice Adapter — STT (Whisper ONNX via Transformers.js) + TTS (Web Speech API)
+// Voice Adapter — STT (Whisper ONNX via Transformers.js) + TTS (MMS-TTS via Transformers.js)
 // STT: chạy offline trong browser, không cần server
-// TTS: Web Speech API native
+// TTS: MMS-TTS (Xenova) - hỗ trợ en, vi; fallback Web Speech API cho ja
 // ============================================================
 
-/**
- * Ánh xạ ngôn ngữ app → locale / Whisper language code.
- */
-var SPEECH_LOCALE_MAP = {
-    vi: 'vi-VN',
-    en: 'en-US',
-    ja: 'ja-JP'
-};
-
-// Whisper language codes (ISO 639-1)
-var WHISPER_LANG_MAP = {
-    vi: 'vietnamese',
-    en: 'english',
-    ja: 'japanese'
+// TTS Model IDs (Xenova ONNX versions)
+var TTS_MODELS = {
+    en: 'Xenova/mms-tts-eng',
+    vi: 'Xenova/mms-tts-vie',
+    ja: null   // Use Web Speech API for Japanese
 };
 
 // === Trạng thái nội bộ ===
@@ -28,6 +19,10 @@ var _mediaRecorder = null;     // MediaRecorder instance
 var _audioChunks = [];         // Chunks audio thu được
 var _whisperPipeline = null;   // Transformers.js pipeline (lazy load)
 var _whisperLoading = false;   // Đang load model
+var _ttsPipelines = {};        // Cache pipelines per language
+var _ttsModelLoading = {};     // Track loading state per language
+var _isSpeaking = false;
+var _audioContext = null;
 
 // Whisper model — nhỏ, đa ngôn ngữ, chạy được trên browser
 var WHISPER_MODEL_ID = 'onnx-community/whisper-base';
@@ -46,30 +41,128 @@ function initVoiceAdapter() {
     );
     _ttsSupported = !!(
         typeof window !== 'undefined' &&
-        window.speechSynthesis
+        (typeof AudioContext !== 'undefined' || typeof window.webkitAudioContext !== 'undefined')
     );
     return { sttSupported: _sttSupported, ttsSupported: _ttsSupported };
 }
 
 // ============================================================
-// TTS — Text to Speech (Web Speech API, giữ nguyên)
+// TTS — Text to Speech (MMS-TTS via Transformers.js + Web Speech API fallback)
 // ============================================================
 
+/**
+ * Lazy-load TTS pipeline cho ngôn ngữ.
+ * @param {string} lang - Language code (en, vi, ja)
+ * @param {function} onStatus - Callback(message) để hiển thị trạng thái loading
+ * @returns {Promise<object>} Transformers.js pipeline hoặc null nếu fallback
+ */
+async function _getTTSPipeline(lang, onStatus) {
+    var langCode = getLLMLang(lang);
+    var modelId = TTS_MODELS[langCode];
+    
+    // Fallback to Web Speech API cho tiếng Nhật
+    if (!modelId) {
+        console.log('[TTS] No model for', langCode, '- using Web Speech API fallback');
+        return null;
+    }
+    
+    if (_ttsPipelines[langCode]) return _ttsPipelines[langCode];
+    if (_ttsModelLoading[langCode]) {
+        // Chờ cho đến khi load xong
+        return new Promise(function (resolve, reject) {
+            var interval = setInterval(function () {
+                if (_ttsPipelines[langCode]) {
+                    clearInterval(interval);
+                    resolve(_ttsPipelines[langCode]);
+                } else if (!_ttsModelLoading[langCode]) {
+                    clearInterval(interval);
+                    reject(new Error('TTS model load failed'));
+                }
+            }, 200);
+        });
+    }
+
+    _ttsModelLoading[langCode] = true;
+    if (onStatus) onStatus('⏳ Đang tải TTS model lần đầu (~100MB)...');
+    console.log('[TTS] Loading model:', modelId);
+
+    try {
+        var transformers = await import(
+            'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3/dist/transformers.min.js'
+        );
+
+        var pipeline = await transformers.pipeline(
+            'text-to-speech',
+            modelId,
+            {
+                dtype: 'fp32',
+                device: 'wasm',
+            }
+        );
+
+        _ttsPipelines[langCode] = pipeline;
+        _ttsModelLoading[langCode] = false;
+        if (onStatus) onStatus('✅ TTS model đã sẵn sàng');
+        console.log('[TTS] Model loaded successfully');
+        return pipeline;
+    } catch (err) {
+        _ttsModelLoading[langCode] = false;
+        console.error('[TTS] Load error:', err);
+        throw err;
+    }
+}
+
+/**
+ * Phát âm thanh từ audio data.
+ * @param {Float32Array} audioData - Audio samples
+ * @param {number} sampleRate - Sample rate (thường 22050 hoặc 24000)
+ */
+function _playAudio(audioData, sampleRate) {
+    if (!_audioContext) {
+        _audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    }
+
+    var audioBuffer = _audioContext.createBuffer(1, audioData.length, sampleRate);
+    var channelData = audioBuffer.getChannelData(0);
+    for (var i = 0; i < audioData.length; i++) {
+        channelData[i] = audioData[i];
+    }
+
+    var source = _audioContext.createBufferSource();
+    source.buffer = audioBuffer;
+    source.connect(_audioContext.destination);
+    source.onended = function () {
+        _isSpeaking = false;
+    };
+    source.start(0);
+    _isSpeaking = true;
+}
+
+/**
+ * Phát âm thanh bằng Web Speech API (fallback cho tiếng Nhật).
+ * @param {string} text - Text to speak
+ * @param {string} lang - Language code
+ */
+function _speakWithWebSpeechAPI(text, lang) {
+    if (!text || !text.trim()) return;
+    
+    try {
+        window.speechSynthesis.cancel();
+        var utterance = new SpeechSynthesisUtterance(text);
+        utterance.lang = getLocale(lang);
+        window.speechSynthesis.speak(utterance);
+        _isSpeaking = true;
+    } catch (err) {
+        console.error('[TTS] Web Speech API error:', err);
+    }
+}
+
 function getVoicesForLang(lang) {
-    if (!_ttsSupported) return [];
-    var locale = SPEECH_LOCALE_MAP[lang] || lang;
-    var prefix = locale.split('-')[0].toLowerCase();
-    var all = window.speechSynthesis.getVoices();
-    var filtered = all.filter(function (v) {
-        var vLang = (v.lang || '').toLowerCase();
-        return vLang === locale.toLowerCase() || vLang.startsWith(prefix + '-') || vLang.startsWith(prefix + '_');
-    });
-    filtered.sort(function (a, b) {
-        if (a.localService && !b.localService) return -1;
-        if (!a.localService && b.localService) return 1;
-        return 0;
-    });
-    return filtered;
+    // MMS-TTS hỗ trợ: en, vi
+    // Trả về danh sách "voices" (thực tế chỉ là language codes)
+    var langCode = getLLMLang(lang);
+    var supported = ['en', 'vi'];
+    return supported.includes(langCode) ? [{ name: langCode, lang: lang }] : [];
 }
 
 function getDefaultVoice(lang) {
@@ -77,27 +170,91 @@ function getDefaultVoice(lang) {
     return voices.length > 0 ? voices[0] : null;
 }
 
-function speakText(text, lang, voiceName) {
+async function speakText(text, lang, voiceName) {
     if (!_ttsSupported || !text || !text.trim()) return;
-    window.speechSynthesis.cancel();
-    var utterance = new SpeechSynthesisUtterance(text);
-    utterance.lang = SPEECH_LOCALE_MAP[lang] || lang;
-    var voices = getVoicesForLang(lang);
-    var selectedVoice = null;
-    if (voiceName) {
-        selectedVoice = voices.find(function (v) { return v.name === voiceName; }) || null;
+
+    var langCode = getLLMLang(lang);
+    
+    try {
+        // Show TTS status
+        if (typeof showTTSStatus === 'function') {
+            showTTSStatus('⏳ Đang tải model TTS...');
+        }
+        
+        // Thử dùng TTS model
+        var pipeline = await _getTTSPipeline(lang, function (msg) {
+            console.log('[TTS]', msg);
+            if (typeof showTTSStatus === 'function') {
+                showTTSStatus(msg);
+            }
+        });
+
+        if (pipeline) {
+            // TTS - MMS-TTS không cần speaker embeddings
+            if (typeof showTTSStatus === 'function') {
+                showTTSStatus('⏳ Đang tạo âm thanh...');
+            }
+            console.log('[TTS] Generating speech for:', text.substring(0, 50));
+            
+            var result = await pipeline(text);
+
+            // result.audio là Float32Array, result.sampling_rate là sample rate
+            if (result && result.audio) {
+                if (typeof showTTSStatus === 'function') {
+                    showTTSStatus('⏳ Đang phát âm thanh...');
+                }
+                _playAudio(result.audio, result.sampling_rate || 22050);
+                
+                // Hide status sau 1 giây
+                setTimeout(function () {
+                    if (typeof hideTTSStatus === 'function') {
+                        hideTTSStatus();
+                    }
+                }, 1000);
+            }
+        } else {
+            // Fallback to Web Speech API
+            if (typeof showTTSStatus === 'function') {
+                showTTSStatus('⏳ Đang phát âm thanh...');
+            }
+            _speakWithWebSpeechAPI(text, lang);
+            
+            // Hide status sau 1 giây
+            setTimeout(function () {
+                if (typeof hideTTSStatus === 'function') {
+                    hideTTSStatus();
+                }
+            }, 1000);
+        }
+    } catch (err) {
+        console.error('[TTS] Error:', err);
+        if (typeof hideTTSStatus === 'function') {
+            hideTTSStatus();
+        }
+        // Fallback to Web Speech API on error
+        _speakWithWebSpeechAPI(text, lang);
     }
-    if (!selectedVoice) selectedVoice = getDefaultVoice(lang);
-    if (selectedVoice) utterance.voice = selectedVoice;
-    window.speechSynthesis.speak(utterance);
 }
 
 function stopSpeaking() {
-    if (_ttsSupported) window.speechSynthesis.cancel();
+    _isSpeaking = false;
+    
+    // Stop Web Speech API
+    if (typeof window !== 'undefined' && window.speechSynthesis) {
+        window.speechSynthesis.cancel();
+    }
+    
+    // Stop Web Audio API
+    if (_audioContext) {
+        try {
+            _audioContext.close();
+        } catch (e) {}
+        _audioContext = null;
+    }
 }
 
 function isSpeaking() {
-    return _ttsSupported && window.speechSynthesis.speaking;
+    return _isSpeaking || (typeof window !== 'undefined' && window.speechSynthesis && window.speechSynthesis.speaking);
 }
 
 // ============================================================
@@ -265,7 +422,7 @@ async function startVoiceInput(lang, onInterim, onFinal, onError) {
                 });
 
                 var audioData = await _decodeAudioBlob(audioBlob);
-                var whisperLang = WHISPER_LANG_MAP[lang] || 'vietnamese';
+                var whisperLang = getWhisperLang(lang);
 
                 var result = await pipeline(audioData, {
                     language: whisperLang,
@@ -337,7 +494,6 @@ if (typeof window !== 'undefined') {
 // Export cho Node/test (stub functions)
 // ============================================================
 if (typeof module !== 'undefined' && module.exports) {
-    globalThis.SPEECH_LOCALE_MAP = SPEECH_LOCALE_MAP;
     globalThis.initVoiceAdapter = function () { return { sttSupported: false, ttsSupported: false }; };
     globalThis.getVoicesForLang = function () { return []; };
     globalThis.getDefaultVoice = function () { return null; };

app.js

@@ -732,6 +732,29 @@ function showError(message) {
     appendMessage(message, 'bot');
 }
 
+/**
+ * Hiển thị TTS processing status.
+ * @param {string} message - Status message
+ */
+function showTTSStatus(message) {
+    var ttsStatus = document.getElementById('tts-status');
+    var ttsStatusText = document.getElementById('tts-status-text');
+    if (ttsStatus && ttsStatusText) {
+        ttsStatusText.textContent = message || 'Đang xử lý âm thanh...';
+        ttsStatus.classList.remove('hidden');
+    }
+}
+
+/**
+ * Ẩn TTS processing status.
+ */
+function hideTTSStatus() {
+    var ttsStatus = document.getElementById('tts-status');
+    if (ttsStatus) {
+        ttsStatus.classList.add('hidden');
+    }
+}
+
 /**
  * Tính tỉ lệ khớp (confidence) dựa trên trigger đã match.
  * - Trigger chính xác (không chứa wildcard) → 100
@@ -871,6 +894,12 @@ async function initBot(lang) {
  */
 async function changeLanguage(lang) {
     currentLang = lang;
+    
+    // Notify language selector
+    if (typeof onLanguageChange === 'function') {
+        onLanguageChange(lang);
+    }
+    
     await initBot(lang);
 
     // Xóa lịch sử hội thoại
@@ -1095,7 +1124,7 @@ async function sendMessage() {
         return;
     }
 
-    // Hiển thị tin nhắn người dùng (kèm ảnh nếu có)
+    // Hiển thị tin nhắn người dùng NGAY LẬP TỨC (kèm ảnh nếu có)
     appendMessage(text || '', 'user', undefined, undefined, undefined, attachment ? attachment.dataURL : undefined);
 
     // Lưu user message vào history (nếu có ảnh mà không có text, ghi chú [image])
@@ -1997,16 +2026,27 @@ async function initializeApp() {
         await loadPreprocessedData();
     }
 
-    // Khởi tạo bot với tiếng Việt (ngôn ngữ mặc định)
-    await initBot('vi');
+    // Lấy ngôn ngữ từ localStorage, nếu không có thì dùng mặc định
+    var savedLang = (typeof getLanguageFromStorage === 'function') ? getLanguageFromStorage() : null;
+    var initialLang = (savedLang && (typeof isLanguageSupported === 'function' ? isLanguageSupported(savedLang) : true)) ? savedLang : 'vi';
+    currentLang = initialLang;
+
+    // Cập nhật language selector UI
+    var langSelector = document.getElementById('language-selector');
+    if (langSelector) {
+        langSelector.value = initialLang;
+    }
+
+    // Khởi tạo bot với ngôn ngữ đã lưu
+    await initBot(initialLang);
 
     // Hiển thị lời chào khởi tạo
     if (bot) {
-        var greeting = await bot.reply(USERNAME, GREETING_TRIGGERS['vi']);
+        var greeting = await bot.reply(USERNAME, GREETING_TRIGGERS[initialLang]);
         _skipHistoryOnce = true;
         appendMessage(greeting, 'bot');
-        updateRulesList('vi');
-        updateMacrosList('vi');
+        updateRulesList(initialLang);
+        updateMacrosList(initialLang);
     }
 
     // Load 10 messages gần nhất từ IndexedDB

index.html

@@ -121,6 +121,10 @@
             </div>
         </div>
         <div id="message-display" class="message-display"></div>
+        <div id="tts-status" class="tts-status hidden" aria-live="polite">
+            <span class="tts-spinner">⏳</span>
+            <span id="tts-status-text">Đang xử lý âm thanh...</span>
+        </div>
         <div class="input-area">
             <button id="attach-button" title="Đính kèm ảnh" aria-label="Đính kèm ảnh">📎</button>
             <input type="file" id="file-input" accept="image/*" class="hidden">
@@ -170,6 +174,7 @@
     <script src="brain.js"></script>
     <script src="data-loader.js"></script>
     <script src="data/chat-history-db.js"></script>
+    <script src="adapters/language-selector.js"></script>
     <script src="adapters/text-similarity.js"></script>
     <script src="adapters/specific-response.js"></script>
     <script src="adapters/time-adapter.js"></script>

style.css

@@ -1081,3 +1081,42 @@ body {
     object-fit: cover;
     border: 1px solid #dee2e6;
 }
+
+
+/* === TTS Status Indicator === */
+.tts-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background-color: #fff3cd;
+    border-bottom: 1px solid #ffc107;
+    color: #856404;
+    font-size: 0.875rem;
+    animation: slideDown 0.3s ease-out;
+}
+
+.tts-status.hidden {
+    display: none;
+}
+
+.tts-spinner {
+    display: inline-block;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}