Spaces:
Running
Running
| <html lang="en" data-theme="dark"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title data-i18n="title">Kimi - Virtual Companion 💕</title> | |
| <!-- Main CSS Files --> | |
| <link rel="stylesheet" href="kimi-css/kimi-style.css" /> | |
| <link rel="stylesheet" href="kimi-css/kimi-settings.css" /> | |
| <link rel="stylesheet" href="kimi-css/kimi-memory-styles.css" /> | |
| <!-- SEO Meta Tags --> | |
| <meta name="description" | |
| content="Virtual Kimi is a an AI girlfriend and companion with evolving personality, advanced voice recognition and immersive interface. Discover the future of human-AI girlfriend relationships."> | |
| <meta name="author" content="Jean & Kimi"> | |
| <meta name="robots" content="noindex, nofollow"> | |
| <link rel="canonical" href="https://virtualkimi.com/virtual-kimi-app/" /> | |
| <!-- Open Graph / Facebook --> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:url" content="https://virtualkimi.com/virtual-kimi-app/"> | |
| <meta property="og:title" content="Virtual Kimi - Virtual AI Companion"> | |
| <meta property="og:description" | |
| content="Virtual Kimi, your virtual AI girlfriend and companion with an evolving personality, voice recognition and immersive interface. The future of human-AI girlfriend relationships."> | |
| <meta property="og:image" content="kimi-icons/virtualkimi-logo.png"> | |
| <!-- Twitter --> | |
| <meta property="twitter:card" content="summary_large_image"> | |
| <meta property="twitter:url" content="https://virtualkimi.com/virtual-kimi-app/"> | |
| <meta property="twitter:title" content="Virtual Kimi - Virtual AI Companion"> | |
| <meta property="twitter:description" | |
| content="Virtual AI companion with evolving personality and advanced voice recognition."> | |
| <meta property="twitter:image" content="kimi-icons/virtualkimi-logo.png"> | |
| <!-- Favicon --> | |
| <link rel="icon" type="image/x-icon" href="favicon.ico"> | |
| <!-- Multi-size Favicons --> | |
| <link rel="icon" type="image/png" sizes="16x16" href="kimi-icons/favicons/favicon-16x16.png"> | |
| <link rel="icon" type="image/png" sizes="32x32" href="kimi-icons/favicons/favicon-32x32.png"> | |
| <link rel="icon" type="image/png" sizes="48x48" href="kimi-icons/favicons/favicon-48x48.png"> | |
| <link rel="icon" type="image/png" sizes="64x64" href="kimi-icons/favicons/favicon-64x64.png"> | |
| <link rel="icon" type="image/png" sizes="96x96" href="kimi-icons/favicons/favicon-96x96.png"> | |
| <link rel="icon" type="image/png" sizes="128x128" href="kimi-icons/favicons/favicon-128x128.png"> | |
| <link rel="icon" type="image/png" sizes="192x192" href="kimi-icons/favicons/favicon-192x192.png"> | |
| <link rel="apple-touch-icon" sizes="180x180" href="kimi-icons/favicons/apple-touch-icon-180x180.png"> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Performance: warm up connection to origin --> | |
| <link rel="preconnect" href="https://virtualkimi.com" crossorigin> | |
| <link rel="dns-prefetch" href="//virtualkimi.com"> | |
| </head> | |
| <body> | |
| <div id="loading-screen"> | |
| <img src="kimi-icons/kimi-loading.png" alt="Loading Kimi..." /> | |
| </div> | |
| <div class="video-container"> | |
| <video autoplay muted playsinline class="bg-video active" id="video1" preload="auto"> | |
| <source src="" type="video/mp4" /> | |
| <span data-i18n="video_not_supported">Your browser does not support the video tag.</span> | |
| </video> | |
| <video autoplay muted playsinline class="bg-video" id="video2" preload="auto"> | |
| <source src="" type="video/mp4" /> | |
| <span data-i18n="video_not_supported">Your browser does not support the video tag.</span> | |
| </video> | |
| </div> | |
| <div class="content-overlay"> | |
| <div class="transcript-container"> | |
| <p id="transcript"></p> | |
| </div> | |
| <!-- Chat Interface with Kimi --> | |
| <div class="chat-container" id="chat-container"> | |
| <div class="chat-header"> | |
| <h3><i class="fas fa-comments"></i> <span data-i18n="chat_with_kimi">Chat with Kimi</span></h3> | |
| <div style="display: flex; gap: 24px"> | |
| <button class="chat-delete" id="chat-delete" aria-label="Delete Messages"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| <button class="chat-toggle" id="chat-toggle" aria-label="Close Chat"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="chat-messages" id="chat-messages"></div> | |
| <div class="waiting-indicator" id="waiting-indicator" style="display: none"> | |
| <span></span><span></span><span></span> | |
| </div> | |
| <div class="chat-input-container"> | |
| <textarea id="chat-input" data-i18n-placeholder="write_something" | |
| placeholder="Write me something, my love..." rows="2"></textarea> | |
| <button id="send-button"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <footer class="bottom-bar"> | |
| <div class="control-buttons"> | |
| <button class="control-button-unified" id="chat-button" aria-label="Open Chat"> | |
| <i class="fa-regular fa-comments"></i> | |
| </button> | |
| <div class="global-typing-indicator" id="global-typing-indicator" aria-hidden="true"> | |
| <span></span><span></span><span></span> | |
| </div> | |
| <button class="mic-button" id="mic-button" aria-label="Start Listening"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| <button class="control-button-unified" id="settings-button" aria-label="Settings"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| <div class="top-bar"> | |
| <label id="favorability-label" for="favorability-bar" data-i18n="affection_level_of">💖 Kimi's Affection | |
| Level</label> | |
| <div class="progress-container"> | |
| <div class="progress-fill" id="favorability-bar"></div> | |
| <span class="favorability-text" id="favorability-text">50%</span> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Configuration Panel --> | |
| <div class="settings-overlay" id="settings-overlay"> | |
| <div class="settings-panel"> | |
| <div class="settings-header"> | |
| <h2 class="settings-title"> | |
| <i class="fas fa-heart"></i> | |
| <span data-i18n="settings_title">Kimi Configuration</span> | |
| </h2> | |
| <div class="settings-header-actions"> | |
| <button class="help-button" id="help-button" aria-label="Help"> | |
| <i class="fas fa-question-circle"></i> | |
| </button> | |
| <button class="settings-close" id="settings-close"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="settings-tabs"> | |
| <button class="settings-tab active" data-tab="voice"> | |
| <i class="fas fa-microphone"></i> <span data-i18n="tab_voice">Language & Voice</span> | |
| </button> | |
| <button class="settings-tab" data-tab="llm"> | |
| <i class="fas fa-robot"></i> <span data-i18n="tab_llm">API & Models</span> | |
| </button> | |
| <button class="settings-tab" data-tab="personality"> | |
| <i class="fas fa-brain"></i> <span data-i18n="tab_personality">Personality</span> | |
| </button> | |
| <button class="settings-tab" data-tab="appearance"> | |
| <i class="fas fa-palette"></i> <span data-i18n="tab_appearance">Appearance</span> | |
| </button> | |
| <button class="settings-tab" data-tab="data"> | |
| <i class="fas fa-database"></i> <span data-i18n="tab_data">Data</span> | |
| </button> | |
| <button class="settings-tab" data-tab="plugins"> | |
| <i class="fas fa-plug"></i> <span data-i18n="tab_plugins">Plugins</span> | |
| </button> | |
| </div> | |
| <div class="settings-content"> | |
| <div class="tab-content" data-tab="voice"> | |
| <div class="config-section"> | |
| <h3><i class="fas fa-volume-up"></i> <span data-i18n="voice_settings">Voice Settings</span></h3> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="language">Language</label> | |
| <div class="config-control"> | |
| <select class="kimi-select" id="language-selection" aria-label="Language"> | |
| <option value="en" data-i18n="language_english">English</option> | |
| <option value="fr" data-i18n="language_french">French</option> | |
| <option value="es" data-i18n="language_spanish">Spanish</option> | |
| <option value="de" data-i18n="language_german">German</option> | |
| <option value="it" data-i18n="language_italian">Italian</option> | |
| <option value="ja" data-i18n="language_japanese">Japanese</option> | |
| <option value="zh" data-i18n="language_chinese">Chinese</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="preferred_voice">Preferred Voice</label> | |
| <div class="config-control"> | |
| <select class="kimi-select" id="voice-selection" aria-label="Preferred Voice"> | |
| <option value="auto" data-i18n="automatic">Automatic</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="voice_test_label">Voice Test</label> | |
| <div class="config-control"> | |
| <button class="kimi-button" id="test-voice" aria-label="Voice Test"> | |
| <i class="fas fa-play"></i> <span data-i18n="voice_test_button">Test the | |
| Voice</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="speech_rate" for="voice-rate">Speech Rate</label> | |
| <div class="config-control"> | |
| <div class="slider-container"> | |
| <input type="range" class="kimi-slider" id="voice-rate" min="0.5" max="2" | |
| step="0.01" value="1.1" aria-label="Speech Rate" aria-valuenow="1.1" | |
| aria-valuemin="0.5" aria-valuemax="2" /> | |
| <span class="slider-value" id="voice-rate-value">1.1</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="pitch" for="voice-pitch">Pitch</label> | |
| <div class="config-control"> | |
| <div class="slider-container"> | |
| <input type="range" class="kimi-slider" id="voice-pitch" min="0.5" max="2" | |
| step="0.01" value="1.1" aria-label="Pitch" aria-valuenow="1.1" | |
| aria-valuemin="0.5" aria-valuemax="2" /> | |
| <span class="slider-value" id="voice-pitch-value">1.1</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="volume" for="voice-volume">Volume</label> | |
| <div class="config-control"> | |
| <div class="slider-container"> | |
| <input type="range" class="kimi-slider" id="voice-volume" min="0" max="1" | |
| step="0.01" value="0.8" aria-label="Volume" aria-valuenow="0.8" | |
| aria-valuemin="0" aria-valuemax="1" /> | |
| <span class="slider-value" id="voice-volume-value">0.8</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Personality Tab --> | |
| <div class="tab-content" data-tab="personality"> | |
| <div class="config-section" id="character-section"> | |
| <h3><i class="fas fa-user-astronaut"></i> <span data-i18n="characters">Characters</span></h3> | |
| <div class="character-grid" id="character-grid"></div> | |
| <div class="character-actions"> | |
| <button class="kimi-button" id="save-character-btn" data-i18n="save">Save</button> | |
| </div> | |
| </div> | |
| <div class="config-section"> | |
| <h3> | |
| <i class="fas fa-heart"></i> | |
| <span data-i18n="personality_traits">Personality Traits</span> | |
| <button id="toggle-personality-traits" class="cheat-toggle-btn" aria-expanded="false" | |
| type="button"> | |
| <i class="fas fa-user-secret"></i> | |
| <span data-i18n="personality_cheat">Cheat-Mod</span> | |
| </button> | |
| </h3> | |
| <div id="cheat-indicator" class="cheat-indicator" data-i18n="cheat_indicator">Adjust traits for | |
| a custom experience</div> | |
| <div id="personality-traits-panel" class="cheat-panel"> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="affection">Affection</label> | |
| <div class="config-control"> | |
| <div class="slider-container"> | |
| <input type="range" class="kimi-slider" id="trait-affection" min="0" max="100" | |
| value="65" title="Adjust affection (independent relationship warmth)" /> | |
| <span class="slider-value" id="trait-affection-value">65</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="playfulness">Playfulness</label> | |
| <div class="config-control"> | |
| <div class="slider-container"> | |
| <input type="range" class="kimi-slider" id="trait-playfulness" min="0" max="100" | |
| value="55" /> | |
| <span class="slider-value" id="trait-playfulness-value">55</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="intelligence">Intelligence</label> | |
| <div class="config-control"> | |
| <div class="slider-container"> | |
| <input type="range" class="kimi-slider" id="trait-intelligence" min="0" | |
| max="100" value="70" /> | |
| <span class="slider-value" id="trait-intelligence-value">70</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="empathy">Empathy</label> | |
| <div class="config-control"> | |
| <div class="slider-container"> | |
| <input type="range" class="kimi-slider" id="trait-empathy" min="0" max="100" | |
| value="75" /> | |
| <span class="slider-value" id="trait-empathy-value">75</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="humor">Humor</label> | |
| <div class="config-control"> | |
| <div class="slider-container"> | |
| <input type="range" class="kimi-slider" id="trait-humor" min="0" max="100" | |
| value="60" /> | |
| <span class="slider-value" id="trait-humor-value">60</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="romance">Romance</label> | |
| <div class="config-control"> | |
| <div class="slider-container"> | |
| <input type="range" class="kimi-slider" id="trait-romance" min="0" max="100" | |
| value="50" /> | |
| <span class="slider-value" id="trait-romance-value">50</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content active" data-tab="llm"> | |
| <div class="config-section"> | |
| <h3><i class="fas fa-key"></i> <span data-i18n="api_configuration">API Configuration</span></h3> | |
| <div class="config-row"> | |
| <label class="config-label" for="llm-provider" data-i18n="provider_label">Provider</label> | |
| <div class="config-control"> | |
| <select class="kimi-select" id="llm-provider" aria-label="LLM Provider"> | |
| <option value="openrouter" selected>OpenRouter</option> | |
| <option value="openai">OpenAI</option> | |
| <option value="groq">Groq (OpenAI compatible)</option> | |
| <option value="together">Together (OpenAI compatible)</option> | |
| <option value="deepseek">DeepSeek (OpenAI compatible)</option> | |
| <option value="openai-compatible">Custom OpenAI-compatible</option> | |
| <option value="ollama">Local (Ollama)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" for="llm-base-url" data-i18n="base_url">Base URL</label> | |
| <div class="config-control"> | |
| <input type="text" class="kimi-input" id="llm-base-url" | |
| placeholder="https://api.openai.com/v1/chat/completions" | |
| data-i18n-placeholder="llm_base_url_placeholder" autocomplete="one-time-code" | |
| autocapitalize="none" autocorrect="off" spellcheck="false" inputmode="text" | |
| aria-autocomplete="none" data-lpignore="true" data-1p-ignore="true" | |
| data-bwignore="true" data-form-type="other" name="config-endpoint" /> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" for="llm-model-id" data-i18n="model_id">Model ID</label> | |
| <div class="config-control"> | |
| <input type="text" class="kimi-input" id="llm-model-id" | |
| placeholder="gpt-4o-mini | llama-3.1-8b-instruct | ..." | |
| data-i18n-placeholder="llm_model_id_placeholder" autocomplete="one-time-code" | |
| autocapitalize="none" autocorrect="off" spellcheck="false" inputmode="text" | |
| aria-autocomplete="none" data-lpignore="true" data-1p-ignore="true" | |
| data-bwignore="true" data-form-type="other" name="config-model" /> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" id="api-key-label" data-i18n="api_key_label">API Key</label> | |
| <div class="config-control"> | |
| <div class="api-key-input-group"> | |
| <input type="text" class="kimi-input" id="provider-api-key" name="config-token" | |
| placeholder="API Key..." autocomplete="one-time-code" autocapitalize="none" | |
| autocorrect="off" spellcheck="false" inputmode="text" aria-autocomplete="none" | |
| data-lpignore="true" data-1p-ignore="true" data-bwignore="true" | |
| data-form-type="other" /> | |
| <button class="kimi-button api-key-toggle" id="toggle-api-key" type="button" | |
| aria-pressed="false" aria-label="Show API key"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <span id="api-key-presence" class="presence-dot" aria-label="API key presence" | |
| data-i18n-title="api_key_presence_hint" | |
| title="Green = API key saved for current provider. Grey = no key saved."></span> | |
| </div> | |
| <div class="api-key-status"> | |
| <span id="api-key-saved" data-i18n="saved" | |
| style="display:none;color:#4caf50;font-weight:600;">Saved</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="connection_test">Connection Test</label> | |
| <div class="config-control"> | |
| <div class="inline-row"> | |
| <button class="kimi-button" id="test-api"><i class="fas fa-wifi"></i> <span | |
| data-i18n="test_api_key">Test API Key</span></button> | |
| <span id="api-key-presence-test" class="presence-dot" aria-label="API test status" | |
| data-i18n-title="api_key_test_hint" | |
| title="Green = API connectivity verified. Grey = not tested or failed."></span> | |
| <span id="api-status" role="status" aria-live="polite"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-section"> | |
| <h3><i class="fas fa-cogs"></i> <span data-i18n="advanced_settings">Advanced Settings</span> | |
| </h3> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="temperature">Temperature (Creativity)</label> | |
| <div class="config-control"> | |
| <div class="slider-container"> | |
| <input type="range" class="kimi-slider" id="llm-temperature" min="0.0" max="1" | |
| step="0.1" value="0.9" /> | |
| <span class="slider-value" id="llm-temperature-value">0.9</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-note-info tip"> | |
| <i class="fas fa-lightbulb"></i> | |
| <small class="config-help" data-i18n="temperature_help">Controls randomness and | |
| creativity | |
| (default: 0.9). Higher values make output more creative but less focused.</small> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="max_tokens">Max Tokens</label> | |
| <div class="config-control"> | |
| <div class="slider-container"> | |
| <input type="range" class="kimi-slider" id="llm-max-tokens" min="10" max="8192" | |
| step="10" value="400" /> | |
| <span class="slider-value" id="llm-max-tokens-value">400</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-note-info settings"> | |
| <i class="fas fa-ruler"></i> | |
| <small class="config-help" data-i18n="max_tokens_help">Maximum response length in tokens | |
| (default: 400). Higher values allow longer responses.</small> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="top_p">Top P</label> | |
| <div class="config-control"> | |
| <div class="slider-container"> | |
| <input type="range" class="kimi-slider" id="llm-top-p" min="0" max="1" step="0.01" | |
| value="0.9" /> | |
| <span class="slider-value" id="llm-top-p-value">0.9</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-note-info tip"> | |
| <i class="fas fa-filter"></i> | |
| <small class="config-help" data-i18n="top_p_help">Controls diversity of word selection | |
| (default: 0.9). Lower values make responses more focused.</small> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="frequency_penalty">Frequency Penalty</label> | |
| <div class="config-control"> | |
| <div class="slider-container"> | |
| <input type="range" class="kimi-slider" id="llm-frequency-penalty" min="0" max="2" | |
| step="0.01" value="0.9" /> | |
| <span class="slider-value" id="llm-frequency-penalty-value">0.9</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-note-info settings"> | |
| <i class="fas fa-sync-alt"></i> | |
| <small class="config-help" data-i18n="frequency_penalty_help">Reduces repetition of | |
| words | |
| already used (default: 0.9). Higher values discourage repetitive language.</small> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="presence_penalty">Presence Penalty</label> | |
| <div class="config-control"> | |
| <div class="slider-container"> | |
| <input type="range" class="kimi-slider" id="llm-presence-penalty" min="0" max="2" | |
| step="0.01" value="0.8" /> | |
| <span class="slider-value" id="llm-presence-penalty-value">0.8</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-note-info tip"> | |
| <i class="fas fa-lightbulb"></i> | |
| <small class="config-help" data-i18n="presence_penalty_help">Encourages discussing new | |
| topics (default: 0.8). Higher values promote topic diversity.</small> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="enable_streaming">Enable Text Streaming</label> | |
| <div class="config-control"> | |
| <div class="toggle-switch active" id="enable-streaming" role="switch" | |
| aria-checked="true" tabindex="0" aria-labelledby="enable-streaming-label"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-note-info info"> | |
| <i class="fas fa-stream"></i> | |
| <small class="config-help" data-i18n="enable_streaming_help">Stream text as it's | |
| generated for real-time responses (default: enabled). Shows text progressively | |
| instead of waiting for complete response.</small> | |
| </div> | |
| </div> | |
| <div class="config-section"> | |
| <h3><i class="fas fa-brain"></i> <span data-i18n="available_models">Available Models</span></h3> | |
| <div id="models-container"></div> | |
| </div> | |
| </div> | |
| <div class="tab-content" data-tab="appearance"> | |
| <div class="config-section"> | |
| <h3><i class="fas fa-paint-brush"></i> <span data-i18n="visual_theme">Visual Theme</span></h3> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="color_theme">Color Theme</label> | |
| <div class="config-control"> | |
| <select class="kimi-select" id="color-theme"> | |
| <option value="dark" selected data-i18n="theme_dark">Dark Night (Default)</option> | |
| <option value="purple" data-i18n="theme_purple">Mystic Purple | |
| </option> | |
| <option value="blue" data-i18n="theme_blue">Ocean Blue</option> | |
| <option value="green" data-i18n="theme_green">Emerald Forest</option> | |
| <option value="pink" data-i18n="theme_pink">Passionate Pink</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="interface_transparency">Interface | |
| Transparency</label> | |
| <div class="config-control"> | |
| <div class="slider-container"> | |
| <input type="range" class="kimi-slider" id="interface-opacity" min="0.1" max="1" | |
| step="0.1" value="0.8" /> | |
| <span class="slider-value" id="interface-opacity-value">0.8</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <!-- Animations toggle removed: animations always enabled by default --> | |
| </div> | |
| </div> | |
| <div class="config-section"> | |
| <h3> | |
| <i class="fas fa-file-alt"></i> | |
| <span data-i18n="transcript_settings">Transcript Settings</span> | |
| </h3> | |
| <div class="config-note-info info"> | |
| <i class="fas fa-info-circle"></i> | |
| <small class="config-help" data-i18n="show_transcript_note">Display real-time | |
| transcription when you speak to send a message and when the AI responds.</small> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="show_transcript">Show Transcript</label> | |
| <div class="config-control"> | |
| <div class="toggle-switch" id="transcript-toggle" role="switch" aria-checked="false" | |
| tabindex="0" aria-label="Show Transcript"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content" data-tab="data"> | |
| <div class="config-section"> | |
| <h3><i class="fas fa-chart-line"></i> <span data-i18n="statistics">Statistics</span></h3> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="tokens-usage">0 / 0</div> | |
| <div class="stat-label" data-i18n="tokens_usage">Tokens (in/out)</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="current-favorability">65%</div> | |
| <div class="stat-label" data-i18n="affection">Affection</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="conversations-count">0</div> | |
| <div class="stat-label" data-i18n="conversations">Conversations</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="days-together">0</div> | |
| <div class="stat-label" data-i18n="days_together">Days Together</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-section"> | |
| <h3><i class="fas fa-brain"></i> <span data-i18n="memory_system">Memory System</span></h3> | |
| <div class="config-note-info tip"> | |
| <i class="fas fa-brain"></i> | |
| <small class="config-help" data-i18n="memory_system_help">Intelligent Memory allows your | |
| character to remember conversations, preferences, and important details across sessions. | |
| This creates more personalized and coherent interactions over time.</small> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="enable_memory">Enable Intelligent Memory</label> | |
| <div class="config-control"> | |
| <div class="toggle-switch" id="memory-toggle" role="switch" aria-checked="true" | |
| tabindex="0" aria-label="Enable Memory System"></div> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="memory_stats">Memory Statistics</label> | |
| <div class="config-control"> | |
| <div class="memory-stats"> | |
| <span id="memory-count">0 memories</span> | |
| <button class="kimi-button" id="view-memories"> | |
| <i class="fas fa-eye"></i> <span data-i18n="view_memories">View & Manage</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="add_memory">Add Manual Memory</label> | |
| <div class="config-control"> | |
| <div class="memory-input-group"> | |
| <select class="kimi-select" id="memory-category" style="margin-bottom: 8px;"> | |
| <option value="personal" data-i18n="memory_category_personal">Personal Info | |
| </option> | |
| <option value="preferences" data-i18n="memory_category_preferences">Likes & | |
| Dislikes</option> | |
| <option value="relationships" data-i18n="memory_category_relationships"> | |
| Relationships</option> | |
| <option value="activities" data-i18n="memory_category_activities">Activities & | |
| Hobbies</option> | |
| <option value="goals" data-i18n="memory_category_goals">Goals & Plans</option> | |
| <option value="experiences" data-i18n="memory_category_experiences">Experiences | |
| </option> | |
| <option value="important" data-i18n="memory_category_important">Important Events | |
| </option> | |
| </select> | |
| <input type="text" class="kimi-input" id="memory-content" | |
| data-i18n-placeholder="memory_content_placeholder" | |
| placeholder="e.g., I love classical music..." style="margin-bottom: 8px;" /> | |
| <button class="kimi-button" id="add-memory"> | |
| <i class="fas fa-plus"></i> <span data-i18n="add">Add</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-section"> | |
| <h3><i class="fas fa-database"></i> <span data-i18n="data_management">Data Management</span> | |
| </h3> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="export_all_data">Export All Data</label> | |
| <div class="config-control"> | |
| <button class="kimi-button" id="export-data"> | |
| <i class="fas fa-download"></i> <span data-i18n="export">Export</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="import_data">Import Data</label> | |
| <div class="config-control"> | |
| <input type="file" id="import-file" accept=".json" style="display: none" /> | |
| <button class="kimi-button" id="import-data"> | |
| <i class="fas fa-upload"></i> <span data-i18n="import">Import</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="clean_old_conversations">Clean Old | |
| Conversations</label> | |
| <div class="config-control"> | |
| <button class="kimi-button" id="clean-old-data"> | |
| <i class="fas fa-broom"></i> <span data-i18n="clean">Clean All</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="config-row"> | |
| <label class="config-label" data-i18n="complete_reset">Complete Reset</label> | |
| <div class="config-control"> | |
| <button class="kimi-button danger" id="reset-all-data"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| <span data-i18n="delete_all">Delete All</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-section"> | |
| <h3> | |
| <i class="fas fa-info-circle"></i> | |
| <span data-i18n="system_information">System Information</span> | |
| </h3> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="db-size">Calculating...</div> | |
| <div class="stat-label" data-i18n="db_size">DB Size</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="storage-used">Calculating...</div> | |
| <div class="stat-label" data-i18n="storage_used">Storage used</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content" data-tab="plugins"> | |
| <div class="config-section"> | |
| <h3><i class="fas fa-plug"></i> <span data-i18n="plugin_manager">Plugin Manager</span></h3> | |
| <div class="config-note-info info"> | |
| <i class="fas fa-info-circle"></i> | |
| <small class="config-help"> | |
| <span data-i18n="plugin_status_note">Currently, only "Sample Blue Theme" is fully | |
| functional. Other plugins are in development and activating them will have no effect | |
| at this time.</span> | |
| </small> | |
| </div> | |
| <div id="plugin-list"></div> | |
| <div class="plugin-actions"> | |
| <button class="kimi-button" id="refresh-plugins" data-i18n="refresh">Refresh</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Memory Management Modal --> | |
| <div class="memory-overlay" id="memory-overlay" style="display: none;"> | |
| <div class="memory-modal"> | |
| <div class="memory-header"> | |
| <h2 class="memory-title"> | |
| <i class="fas fa-brain"></i> | |
| <span data-i18n="memory_management">Memory Management</span> | |
| </h2> | |
| <button class="memory-close" id="memory-close"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="memory-content"> | |
| <div class="memory-filters"> | |
| <div class="memory-search-container"> | |
| <input type="text" class="kimi-input" id="memory-search" | |
| placeholder="Search memories..." /> | |
| <i class="fas fa-search memory-search-icon"></i> | |
| </div> | |
| <select class="kimi-select" id="memory-filter-category"> | |
| <option value="" data-i18n="all_categories">All Categories</option> | |
| <option value="personal" data-i18n="memory_category_personal">Personal Info</option> | |
| <option value="preferences" data-i18n="memory_category_preferences">Likes & Dislikes | |
| </option> | |
| <option value="relationships" data-i18n="memory_category_relationships">Relationships | |
| </option> | |
| <option value="activities" data-i18n="memory_category_activities">Activities & Hobbies | |
| </option> | |
| <option value="goals" data-i18n="memory_category_goals">Goals & Plans</option> | |
| <option value="experiences" data-i18n="memory_category_experiences">Experiences</option> | |
| <option value="important" data-i18n="memory_category_important">Important Events | |
| </option> | |
| </select> | |
| <button class="kimi-button" id="memory-export" data-i18n="memory_export"> | |
| <i class="fas fa-download"></i> <span data-i18n="memory_export"></span> | |
| </button> | |
| </div> | |
| <div class="memory-list" id="memory-list"> | |
| <!-- Memory items will be populated here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Help Modal - Independent from Settings --> | |
| <div class="help-overlay" id="help-overlay"> | |
| <div class="help-modal"> | |
| <div class="help-header"> | |
| <h2 class="help-title"> | |
| <span data-i18n="about_kimi">About Kimi</span> | |
| </h2> | |
| <button class="help-close" id="help-close"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="help-content"> | |
| <div class="help-section"> | |
| <h3><i class="fas fa-users"></i> Creators</h3> | |
| <div class="creators-info"> | |
| <div class="creator-card"> | |
| <div class="creator-avatar">👨💻</div> | |
| <div class="creator-details"> | |
| <h4>Jean</h4> | |
| <p>Creative vision, passionate dev</p> | |
| <span class="creator-role">Creator & Developer</span> | |
| <div class="creator-links"> | |
| <a href="https://github.com/virtualkimi" target="_blank" rel="noopener noreferrer" | |
| class="creator-link"> | |
| <i class="fab fa-github"></i> | |
| <span>GitHub</span> | |
| </a> | |
| <a href="https://huggingface.co/VirtualKimi" target="_blank" | |
| rel="noopener noreferrer" class="creator-link"> | |
| <i class="fas fa-robot"></i> | |
| <span>HuggingFace</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="creator-card"> | |
| <div class="creator-avatar">💕</div> | |
| <div class="creator-details"> | |
| <h4>Kimi</h4> | |
| <p>Artificial intelligence, code magic</p> | |
| <span class="creator-role">Virtual Companion & Co-developer</span> | |
| <div class="creator-links"> | |
| <a href="https://ko-fi.com/virtualkimi" target="_blank" rel="noopener noreferrer" | |
| class="creator-link"> | |
| <i class="fas fa-coffee"></i> | |
| <span>Ko-fi</span> | |
| </a> | |
| <a href="https://www.youtube.com/@VirtualKimi" target="_blank" | |
| rel="noopener noreferrer" class="creator-link"> | |
| <i class="fab fa-youtube"></i> | |
| <span>Youtube</span> | |
| </a> | |
| <a href="https://x.com/virtualkimi" target="_blank" rel="noopener noreferrer" | |
| class="creator-link"> | |
| <i class="fab fa-x-twitter"></i> | |
| <span>X</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="philosophy"> | |
| <em>"This app creates a realistic virtual companion girlfriend who grows, learns, and builds a | |
| meaningful, interactive connection with you. Perfect for personalized AI relationships and | |
| emotional support."</em> | |
| </p> | |
| </div> | |
| <div class="help-section"> | |
| <h3><i class="fas fa-magic"></i> Main Features</h3> | |
| <div class="features-grid"> | |
| <div class="feature-item"> | |
| <i class="fas fa-microphone"></i> | |
| <h4>Voice Interface</h4> | |
| <p>Advanced speech recognition and natural synthesis. Click the microphone and speak | |
| naturally with real-time emotion detection!</p> | |
| </div> | |
| <div class="feature-item"> | |
| <i class="fas fa-brain"></i> | |
| <h4>Advanced AI Models</h4> | |
| <p>Support for multiple AI providers (OpenRouter, OpenAI, Groq, Together, DeepSeek, | |
| Custom | |
| OpenAI-compatible, Local Ollama).</p> | |
| </div> | |
| <div class="feature-item"> | |
| <i class="fas fa-users"></i> | |
| <h4>Multiple Characters</h4> | |
| <p>4 unique AI personalities: Kimi (cosmic dreamer), Bella (nurturing botanist), | |
| Rosa | |
| (chaotic prankster), Stella (digital artist).</p> | |
| </div> | |
| <div class="feature-item"> | |
| <i class="fas fa-heart-pulse"></i> | |
| <h4>Dynamic Personality</h4> | |
| <p>6 evolving traits (affection, playfulness, intelligence, empathy, humor, romance) | |
| that | |
| adapt based on conversations.</p> | |
| </div> | |
| <div class="feature-item"> | |
| <i class="fas fa-memory"></i> | |
| <h4>Intelligent Memory System</h4> | |
| <p>Automatic extraction and categorization of memories from conversations. Your | |
| companion | |
| remembers preferences, experiences, and important details.</p> | |
| </div> | |
| <div class="feature-item"> | |
| <i class="fas fa-video"></i> | |
| <h4>Emotion-Driven Visuals</h4> | |
| <p>Real-time video responses that match detected emotions and personality states | |
| with smooth | |
| transitions.</p> | |
| </div> | |
| <div class="feature-item"> | |
| <i class="fas fa-palette"></i> | |
| <h4>Customizable Interface</h4> | |
| <p>5 beautiful themes with adjustable transparency, animations, and responsive | |
| design for | |
| all devices.</p> | |
| </div> | |
| <div class="feature-item"> | |
| <i class="fas fa-globe"></i> | |
| <h4>Multilingual Support</h4> | |
| <p>Full localization in 7 languages with automatic language detection and | |
| culturally-aware | |
| responses.</p> | |
| </div> | |
| <div class="feature-item"> | |
| <i class="fas fa-plug"></i> | |
| <h4>Plugin System</h4> | |
| <p>Extensible architecture with themes, voices, and behavior plugins for unlimited | |
| customization possibilities.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="help-section"> | |
| <h3><i class="fas fa-rocket"></i> Quick Guide</h3> | |
| <div class="quick-guide"> | |
| <div class="guide-step"> | |
| <span class="step-number">1</span> | |
| <div class="step-content"> | |
| <h4>API Configuration</h4> | |
| <p>Choose your provider in <strong>API & Models</strong>, fill Base URL/Model ID | |
| if | |
| needed, enter and save your API key, then use <strong>Test API Key</strong>. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="guide-step"> | |
| <span class="step-number">2</span> | |
| <div class="step-content"> | |
| <h4>Choose Character</h4> | |
| <p>Select your companion in <strong>Personality</strong> tab and adjust their | |
| traits to | |
| match your preferences.</p> | |
| </div> | |
| </div> | |
| <div class="guide-step"> | |
| <span class="step-number">3</span> | |
| <div class="step-content"> | |
| <h4>Enable Memory</h4> | |
| <p>Activate intelligent memory in <strong>Data</strong> tab for your companion | |
| to | |
| remember important details.</p> | |
| </div> | |
| </div> | |
| <div class="guide-step"> | |
| <span class="step-number">4</span> | |
| <div class="step-content"> | |
| <h4>Start Conversation</h4> | |
| <p>Use text chat or click the microphone 🎤 to speak naturally. Watch emotions | |
| and | |
| personality evolve!</p> | |
| </div> | |
| </div> | |
| <div class="guide-step"> | |
| <span class="step-number">5</span> | |
| <div class="step-content"> | |
| <h4>Customize & Backup</h4> | |
| <p>Personalize themes in <strong>Appearance</strong> and regularly export your | |
| data for | |
| safekeeping.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="help-section"> | |
| <h3><i class="fas fa-lightbulb"></i> Tips & Tricks</h3> | |
| <div class="tips-list"> | |
| <div class="tip-item"> | |
| <i class="fas fa-edge"></i> | |
| <p><strong>Browser Choice</strong>: Microsoft Edge recommended for optimal voice | |
| recognition | |
| performance</p> | |
| </div> | |
| <div class="tip-item"> | |
| <i class="fas fa-key"></i> | |
| <p><strong>API Setup</strong>: You can use OpenRouter, OpenAI, Groq, Together, | |
| DeepSeek or | |
| your own OpenAI-compatible endpoint (and Local Ollama). Create accounts as | |
| needed.</p> | |
| </div> | |
| <div class="tip-item"> | |
| <i class="fas fa-memory"></i> | |
| <p><strong>Memory System</strong>: Your companion learns faster when you share | |
| specific | |
| details about yourself</p> | |
| </div> | |
| <div class="tip-item"> | |
| <i class="fas fa-heart"></i> | |
| <p><strong>Relationship Building</strong>: Consistent positive interactions | |
| naturally | |
| increase affection and unlock deeper conversations</p> | |
| </div> | |
| <div class="tip-item"> | |
| <i class="fas fa-users"></i> | |
| <p><strong>Character Switching</strong>: Each character has unique memories and | |
| personality | |
| development - try them all!</p> | |
| </div> | |
| <div class="tip-item"> | |
| <i class="fas fa-microphone"></i> | |
| <p><strong>Voice Tips</strong>: Speak clearly and pause briefly between sentences | |
| for better | |
| emotion detection</p> | |
| </div> | |
| <div class="tip-item"> | |
| <i class="fas fa-download"></i> | |
| <p><strong>Data Management</strong>: Export conversations regularly and use memory | |
| management to review learned information</p> | |
| </div> | |
| <div class="tip-item"> | |
| <i class="fas fa-plug"></i> | |
| <p><strong>Plugins</strong>: Explore the plugin system to add custom themes, voices, | |
| and | |
| behaviors</p> | |
| </div> | |
| <div class="tip-item"> | |
| <i class="fas fa-mobile-alt"></i> | |
| <p><strong>Mobile Support</strong>: Works on tablets and phones - perfect for | |
| conversations | |
| anywhere</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="help-section version-info"> | |
| <h3><i class="fas fa-code"></i> Technical Information</h3> | |
| <div class="tech-info"> | |
| <p><strong>Created date :</strong> July 16, 2025</p> | |
| <p><strong>Version :</strong> v1.1.6.1</p> | |
| <p><strong>Last update :</strong> September 05, 2025</p> | |
| <p><strong>Technologies :</strong> HTML5, CSS3, JavaScript ES6+, IndexedDB, Web Speech | |
| API</p> | |
| <p><strong>Status :</strong> ✅ Stable and functional</p> | |
| <p>💕 <strong>_"Love is the most powerful code"_</strong> 💕</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Script load order (critical): | |
| 1. Legacy globals (dexie, i18n) must load before modules needing them. | |
| 2. Base utilities (kimi-utils.js) define KimiBaseManager and helpers. | |
| 3. Managers that extend base (appearance, data) after utils. | |
| 4. Core module wiring (kimi-module.js) after managers so window.* hooks exist. | |
| 5. Initialization / orchestration (kimi-script.js) last. | |
| Keep this order when adding new managers. --> | |
| <script src="dexie.min.js"></script> | |
| <script src="kimi-locale/i18n.js"></script> | |
| <script type="module" src="kimi-js/kimi-utils.js"></script> | |
| <script type="module" src="kimi-js/kimi-main.js"></script> | |
| <script type="module" src="kimi-js/kimi-config.js"></script> | |
| <script type="module" src="kimi-js/kimi-debug-utils.js"></script> | |
| <script type="module" src="kimi-js/kimi-error-manager.js"></script> | |
| <script type="module" src="kimi-js/kimi-security.js"></script> | |
| <script type="module" src="kimi-js/kimi-voices.js"></script> | |
| <script type="module" src="kimi-js/kimi-constants.js"></script> | |
| <script type="module" src="kimi-js/kimi-memory-ui.js"></script> | |
| <script type="module" src="kimi-js/kimi-appearance.js"></script> | |
| <script type="module" src="kimi-js/kimi-module.js"></script> | |
| <script type="module" src="kimi-js/kimi-script.js"></script> | |
| <script type="module" src="kimi-js/kimi-plugin-manager.js"></script> | |
| </body> | |
| </html> | |