Spaces:
Running
Running
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hikari Chatbot</title> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌟</text></svg>"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="chat-container"> | |
| <header class="chat-header"> | |
| <h1>Hikari</h1> | |
| <div class="header-controls"> | |
| <span id="interaction-mode-badge" class="interaction-mode-badge" title="Click để đổi chế độ tương tác">📝→📝</span> | |
| <label class="thinking-toggle" title="Enable/Disable LLM Thinking"> | |
| <input type="checkbox" id="thinking-toggle" onchange="if(typeof setLLMThinkingEnabled==='function')setLLMThinkingEnabled(this.checked)"> | |
| <span class="thinking-toggle-label">🧠</span> | |
| </label> | |
| <button id="help-button" title="Hướng dẫn sử dụng">❓</button> | |
| <button id="rules-button" title="Xem danh sách rules">📋</button> | |
| <button id="macros-button" title="Xem danh sách Object Macros">🔧</button> | |
| <button id="settings-button" title="Cài đặt">⚙️</button> | |
| <select id="language-selector"> | |
| <option value="vi" selected>Tiếng Việt</option> | |
| <option value="en">English</option> | |
| <option value="ja">日本語</option> | |
| </select> | |
| </div> | |
| </header> | |
| <div id="rules-panel" class="slide-panel hidden"> | |
| <div class="slide-panel-header"> | |
| <h3 id="rules-title">📋 Các câu hỏi Hikari có thể trả lời</h3> | |
| <button class="slide-panel-close" onclick="toggleRulesPanel()" aria-label="Đóng">×</button> | |
| </div> | |
| <div class="slide-panel-body"> | |
| <ul id="rules-list" class="rules-list"></ul> | |
| </div> | |
| </div> | |
| <div id="macros-panel" class="slide-panel hidden"> | |
| <div class="slide-panel-header"> | |
| <h3 id="macros-title">🔧 Object Macros (Subroutines)</h3> | |
| <button class="slide-panel-close" onclick="toggleMacrosPanel()" aria-label="Đóng">×</button> | |
| </div> | |
| <div class="slide-panel-body"> | |
| <ul id="macros-list" class="macros-list"></ul> | |
| </div> | |
| </div> | |
| <div id="settings-panel" class="slide-panel hidden"> | |
| <div class="slide-panel-header"> | |
| <h3>⚙️ Settings</h3> | |
| <button class="slide-panel-close" onclick="toggleSettingsPanel()" aria-label="Đóng">×</button> | |
| </div> | |
| <div class="slide-panel-body settings-body"> | |
| <div class="setting-item"> | |
| <label> | |
| <input type="checkbox" id="history-toggle"> | |
| Chat History (gửi lịch sử cho LLM) | |
| </label> | |
| </div> | |
| <div class="setting-item"> | |
| <label> | |
| Max turns: | |
| <input type="number" id="history-max-turns" value="5" min="0" max="50" class="setting-number"> | |
| </label> | |
| <span class="setting-hint">0 = không giới hạn</span> | |
| </div> | |
| <div class="setting-item setting-buttons"> | |
| <button id="view-history-button" class="setting-btn">📜 View History</button> | |
| <button id="clear-history-button" class="setting-btn setting-btn-danger">🗑 Clear History</button> | |
| </div> | |
| <div class="setting-item"> | |
| <label class="setting-label">Giới hạn lưu trữ:</label> | |
| <select id="retention-mode-select" class="setting-select"> | |
| <option value="count">Giới hạn số lượng</option> | |
| <option value="days">Giới hạn thời gian</option> | |
| </select> | |
| </div> | |
| <div id="retention-count-section" class="setting-item"> | |
| <label> | |
| Tối đa: | |
| <input type="number" id="retention-max-count" value="50" min="1" max="10000" class="setting-number"> | |
| </label> | |
| <span class="setting-hint">hội thoại</span> | |
| </div> | |
| <div id="retention-days-section" class="setting-item hidden"> | |
| <label> | |
| Tối đa: | |
| <input type="number" id="retention-max-days" value="30" min="1" max="3650" class="setting-number"> | |
| </label> | |
| <span class="setting-hint">ngày</span> | |
| </div> | |
| <hr class="setting-divider"> | |
| <div class="setting-item"> | |
| <label class="setting-label">Chế độ tương tác:</label> | |
| <select id="interaction-mode-select" class="setting-select"> | |
| <option value="text-text">📝→📝 Text → Text</option> | |
| <option value="text-voice">📝→🔊 Text → Voice</option> | |
| <option value="voice-text">🎤→📝 Voice → Text</option> | |
| <option value="voice-voice">🎤→🔊 Voice → Voice</option> | |
| </select> | |
| </div> | |
| <div id="tts-settings-section"> | |
| <div class="setting-item"> | |
| <label> | |
| <input type="checkbox" id="voice-input-toggle"> | |
| Voice Input (Speech to Text) | |
| </label> | |
| </div> | |
| <div class="setting-item"> | |
| <label> | |
| <input type="checkbox" id="voice-output-toggle"> | |
| Voice Output (Text to Speech) | |
| </label> | |
| </div> | |
| <div class="setting-item"> | |
| <label class="setting-label">Giọng đọc:</label> | |
| <select id="tts-voice-select" class="setting-select"></select> | |
| </div> | |
| </div> | |
| </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"> | |
| <button id="voice-input-button" class="hidden" title="Nhập bằng giọng nói" aria-label="Nhập bằng giọng nói">🎤</button> | |
| <div id="adapter-prefix-badge" class="adapter-prefix-badge hidden" aria-live="polite"></div> | |
| <input type="text" id="message-input" placeholder="Nhập tin nhắn..."> | |
| <button id="send-button">Gửi</button> | |
| </div> | |
| <div id="attachment-preview" class="attachment-preview hidden"> | |
| <img id="attachment-thumb" alt="Preview" class="attachment-thumb"> | |
| <span id="attachment-name" class="attachment-name"></span> | |
| <button id="attachment-remove" class="attachment-remove" aria-label="Xóa">×</button> | |
| </div> | |
| </div> | |
| <!-- Help Dialog --> | |
| <div id="help-overlay" class="help-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="help-dialog-title"> | |
| <div class="help-dialog"> | |
| <div class="help-dialog-header"> | |
| <h2 id="help-dialog-title">📖 Hướng dẫn sử dụng</h2> | |
| <button id="help-close-button" class="help-close-button" aria-label="Đóng">×</button> | |
| </div> | |
| <div id="help-dialog-body" class="help-dialog-body"> | |
| <!-- Nội dung được render bởi JS theo ngôn ngữ --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- History Dialog --> | |
| <div id="history-overlay" class="help-overlay hidden" role="dialog" aria-modal="true"> | |
| <div class="help-dialog history-dialog"> | |
| <div class="help-dialog-header"> | |
| <h2 id="history-dialog-title">📜 Chat History</h2> | |
| <div class="history-tab-buttons"> | |
| <button id="history-tab-db" class="history-tab active">IndexedDB</button> | |
| <button id="history-tab-session" class="history-tab">Session</button> | |
| </div> | |
| <button id="history-close-button" class="help-close-button" aria-label="Đóng">×</button> | |
| </div> | |
| <div id="history-dialog-body" class="help-dialog-body"> | |
| <div id="history-list" class="history-list"></div> | |
| <div id="history-paging" class="history-paging"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://unpkg.com/rivescript@latest/dist/rivescript.min.js"></script> | |
| <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> | |
| <script src="adapters/math-adapter.js"></script> | |
| <script src="adapters/unit-conversion.js"></script> | |
| <script src="adapters/best-match.js"></script> | |
| <script src="adapters/logic-dispatcher.js"></script> | |
| <script src="adapters/web-search.js"></script> | |
| <script src="adapters/llm-adapter.js"></script> | |
| <script src="adapters/voice-adapter.js"></script> | |
| <script src="adapters/adapter-registry.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |