| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> |
| <title>Vedika | Engineered by Divy Patel</title> |
| |
| |
| <link rel="icon" type="image/webp" id="faviconLink"> |
|
|
| |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> |
|
|
| |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"> |
| |
| |
| <link rel="stylesheet" href="css/style.css"> |
| </head> |
|
|
| <body oncontextmenu="return false;"> |
|
|
| |
| <button class="btn-menu" id="btnMenuOpen"> |
| <svg style="width:20px;height:20px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="14" y2="15"></line></svg> |
| </button> |
|
|
| |
| <div class="mobile-overlay" id="mobileOverlay"></div> |
|
|
| |
| <aside class="sidebar collapsed" id="sidebar"> |
| <div class="sidebar-header"> |
| <div class="sidebar-logo"> |
| <img id="sidebarLogoImg" alt="Vedika" style="width:24px;height:24px;border-radius:6px;object-fit:contain;"> |
| <span>Vedika</span> |
| </div> |
| <button class="btn-menu btn-close-sidebar" id="btnCloseSidebar" style="position:static; width:32px; height:32px; box-shadow:none; border:none; background:transparent;"> |
| <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> |
| </button> |
| </div> |
| |
| <button class="btn-new-chat" id="btnNewChat"> |
| <svg style="width:16px; height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg> |
| New Workspace |
| </button> |
| |
| <div class="sidebar-history" id="chatHistory"></div> |
|
|
| <div class="sidebar-footer"> |
| <div class="user-avatar" id="uAv">G</div> |
| <div class="user-info-box"> |
| <div class="user-name" id="uName">Guest Session</div> |
| <div class="user-sub" id="uSub">Queries: 0/10</div> |
| </div> |
| <button class="btn-login-register" id="btnLoginRegister">Access</button> |
| <button class="btn-power" id="btnMemory" style="display:none;" title="Manage Memory"> |
| <svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg> |
| </button> |
| <button class="btn-power" id="btnDeleteAcc" style="display:none;" title="Delete Account"> |
| <svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path></svg> |
| </button> |
| <button class="btn-power" id="btnLogout" style="display:none;" title="Logout"> |
| <svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path><line x1="12" y1="2" x2="12" y2="12"></line></svg> |
| </button> |
| </div> |
| </aside> |
|
|
| |
| <main class="main-area"> |
| <div class="chat-container" id="chatContainer"> |
| <div class="welcome-center" id="welcomeScreen"> |
| <img id="welcomeLogoImg" alt="Vedika"> |
| <h1 id="welcomeTitle">Hello, Guest!</h1> |
| <p id="welcomeGreeting">How can I help you today?</p> |
| </div> |
| <div id="chatMessages"></div> |
| </div> |
|
|
| <button id="scrollToBottomBtn" class="btn-scroll-bottom"> |
| <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg> |
| </button> |
|
|
| |
| <div class="input-dock" id="inputDock"> |
| <div class="input-dock-wrapper" id="dockWrapper"> |
| |
| <div class="file-preview-bar" id="filePreviewBar"> |
| <div class="file-preview-pill"> |
| <img id="imgPreview" class="file-preview-icon" src="" style="display:none;"> |
| <svg id="docPreview" style="display:none; width:14px; height:14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg> |
| <div class="file-preview-name" id="fileName">doc.pdf</div> |
| <button class="btn-remove-file" id="btnRemoveFile"> |
| <svg style="width:12px;height:12px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> |
| </button> |
| </div> |
| </div> |
|
|
| <textarea class="chat-input" id="mainInput" placeholder="Ask Vedika..." rows="1"></textarea> |
|
|
| <div class="input-row"> |
| <div class="tools-left"> |
| |
| <div style="position: relative;"> |
| <button class="tool-btn" id="btnModelSelect" title="Select Model"> |
| <svg style="width:20px;height:20px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg> |
| </button> |
| |
| |
| <div class="dropdown-menu" id="modelMenu" style="min-width: 260px; left: 0; bottom: 40px;"> |
| <div class="dropdown-header">Vedika Models</div> |
| <div class="dropdown-item" data-model="Vedika 4.1 Flash"> |
| <span>⚡ Vedika 4.1 Flash</span> |
| <span class="model-badge badge-fast">Fast Mode</span> |
| </div> |
| <div class="dropdown-item" data-model="Vedika 2.5 Balanced"> |
| <span>🧠 Vedika 2.5 Balanced</span> |
| <span class="model-badge badge-image-only">Image Only</span> |
| </div> |
| <div class="dropdown-item" data-model="Vedika 5.6 Pro"> |
| <span>🔬 Vedika 5.6 Pro</span> |
| <span class="model-badge badge-reasoning">Deep Reasoning</span> |
| </div> |
| </div> |
| </div> |
|
|
| <div style="position: relative;"> |
| <button class="tool-btn" id="btnAttach" title="Attach File"> |
| <svg style="width:20px;height:20px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg> |
| </button> |
| |
| |
| <div class="dropdown-menu" id="attachMenu"> |
| <div class="dropdown-item" id="optUploadImg"> |
| <svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg> |
| Upload Image |
| </div> |
| <div class="dropdown-item" id="optUploadVideo"> |
| <svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg> |
| Upload Video |
| </div> |
| <div style="height:1px; background:var(--border-light); margin:4px 0;"></div> |
| <div class="dropdown-item" id="optUploadDoc"> |
| <svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg> |
| Upload Document |
| </div> |
| <div style="height:1px; background:var(--border-light); margin:4px 0;"></div> |
| <div class="dropdown-item" id="optVoice"> |
| <svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg> |
| Select Voice |
| </div> |
| </div> |
|
|
| |
| <div class="dropdown-menu" id="voiceMenu" style="min-width: 220px; left: 45px; bottom: 40px; max-height: 300px; overflow-y: auto;"> |
| <div class="dropdown-header">Premium Voices</div> |
| <div id="voiceOptionsList"></div> |
| <div style="height:1px; background:var(--border-light); margin:4px 0;"></div> |
| <div class="dropdown-header">Language</div> |
| <div id="languageOptionsList"></div> |
| </div> |
|
|
| |
| <input type="file" id="imgUpload" class="hidden-input" accept="image/*"> |
| <input type="file" id="videoUpload" class="hidden-input" accept="video/mp4,video/webm,video/quicktime"> |
| <input type="file" id="docUpload" class="hidden-input" accept=".pdf,.txt,.docx,.html,.js,.py,.css,.cpp,.c,.json,.md"> |
| </div> |
|
|
| <button class="tool-btn btn-mic" id="btnStt" title="Voice Typing"> |
| <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg> |
| </button> |
| </div> |
|
|
| <div class="tools-right"> |
| <button class="btn-stop" id="btnStop"> |
| <svg style="width:14px;height:14px;" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"></rect></svg> |
| </button> |
| <button class="btn-send" id="btnSend"> |
| <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <div class="auth-overlay" id="authModal"> |
| <div class="auth-modal"> |
| <button class="auth-close" id="btnAuthClose"> |
| <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> |
| </button> |
| <div class="auth-title">System Access</div> |
| <div class="auth-tabs"> |
| <div class="auth-tab active" id="tabLogin" data-tab="login">Login</div> |
| <div class="auth-tab" id="tabRegister" data-tab="register">Register</div> |
| </div> |
| |
| |
| <div id="flowLogin"> |
| <div class="auth-phase active" id="loginPhase1"> |
| <input type="email" class="auth-input" id="logEmail" placeholder="Email Address"> |
| <button class="auth-btn" id="btnLogOtp">Continue</button> |
| </div> |
| <div class="auth-phase" id="loginPhase2"> |
| <input type="number" class="auth-input" id="logOtp" placeholder="Enter OTP"> |
| <button class="auth-btn" id="btnLogVerify">Verify</button> |
| </div> |
| </div> |
| |
| |
| <div id="flowRegister" style="display:none;"> |
| <div class="auth-phase active" id="regPhase1"> |
| <input type="text" class="auth-input" id="regName" placeholder="Full Name"> |
| <input type="email" class="auth-input" id="regEmail" placeholder="Email Address"> |
| <button class="auth-btn" id="btnRegOtp">Create Account</button> |
| </div> |
| <div class="auth-phase" id="regPhase2"> |
| <input type="number" class="auth-input" id="regOtp" placeholder="Enter OTP"> |
| <button class="auth-btn" id="btnRegVerify">Verify</button> |
| </div> |
| </div> |
| <div class="auth-message" id="authMsg"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="custom-confirm-overlay" id="customConfirmOverlay"> |
| <div class="custom-confirm-box"> |
| <div class="custom-confirm-msg" id="customConfirmMsg"></div> |
| <div class="custom-confirm-btns"> |
| <button class="custom-confirm-btn cancel" id="customConfirmCancel">Cancel</button> |
| <button class="custom-confirm-btn confirm" id="customConfirmOk">Confirm</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="auth-overlay" id="memoryModal" style="display:none;"> |
| <div class="auth-modal memory-modal" style="max-width: 800px;"> |
| <button class="auth-close" id="btnMemoryClose"> |
| <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> |
| </button> |
| |
| <div class="memory-header"> |
| <div class="memory-icon-wrapper"> |
| <svg class="memory-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> |
| <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"></path> |
| <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path> |
| <line x1="12" y1="19" x2="12" y2="23"></line> |
| <line x1="8" y1="23" x2="16" y2="23"></line> |
| </svg> |
| </div> |
| <div class="memory-title-group"> |
| <h2 class="memory-title">Intuitive Intelligence</h2> |
| <p class="memory-subtitle">Personal Memory & Context Management</p> |
| </div> |
| </div> |
| |
| <div class="memory-section"> |
| <div class="toggle-row"> |
| <label class="toggle-label" for="personalizationToggle"> |
| <span class="toggle-text"> |
| <span class="toggle-title">Enable Personalization</span> |
| <span class="toggle-description">Allow Vedika to remember important facts about you and personalize responses</span> |
| </span> |
| <div class="toggle-switch"> |
| <input type="checkbox" id="personalizationToggle" class="toggle-input"> |
| <span class="toggle-slider"></span> |
| </div> |
| </label> |
| </div> |
| </div> |
| |
| <div class="memory-section"> |
| <div class="memory-content-header"> |
| <div class="header-left"> |
| <svg class="section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> |
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> |
| <polyline points="14 2 14 8 20 8"></polyline> |
| <line x1="16" y1="13" x2="8" y2="13"></line> |
| <line x1="16" y1="17" x2="8" y2="17"></line> |
| <polyline points="10 9 9 9 8 9"></polyline> |
| </svg> |
| <span class="section-title">Saved Memory Context</span> |
| </div> |
| <button class="btn-memory-action btn-delete" id="btnDeleteMemory"> |
| <svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <polyline points="3 6 5 6 21 6"></polyline> |
| <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path> |
| </svg> |
| Clear Memory |
| </button> |
| </div> |
| <textarea id="memoryContent" class="memory-textarea" placeholder="No memory saved yet. The AI will automatically save important information here when personalization is enabled."></textarea> |
| <p class="memory-hint"> |
| <svg style="width:14px;height:14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <circle cx="12" cy="12" r="10"></circle> |
| <line x1="12" y1="16" x2="12" y2="12"></line> |
| <line x1="12" y1="8" x2="12.01" y2="8"></line> |
| </svg> |
| This memory is independent of your chat history. Deleting chats will not affect saved memories. |
| </p> |
| </div> |
| |
| <div class="memory-actions"> |
| <button class="btn-memory-action btn-save" id="btnSaveMemory"> |
| <svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path> |
| <polyline points="17 21 17 13 7 13 7 21"></polyline> |
| <polyline points="7 3 7 8 15 8"></polyline> |
| </svg> |
| Save Changes |
| </button> |
| </div> |
| |
| <div class="memory-message" id="memoryMsg"></div> |
| </div> |
| </div> |
|
|
| |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script> |
|
|
| |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"> |
| |
| |
| <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script> |
| <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script> |
|
|
| |
| <script> |
| window.MathJax = { |
| tex: { |
| inlineMath: [['$', '$'], ['\\(', '\\)']], |
| displayMath: [['$$', '$$'], ['\\[', '\\]']], |
| processEscapes: true, |
| processEnvironments: true, |
| packages: { '[+]': ['mhchem', 'physics', 'cancel', 'color', 'amsmath', 'amssymb', 'boldsymbol'] } |
| }, |
| loader: { |
| load: ['[tex]/mhchem', '[tex]/physics', '[tex]/cancel', '[tex]/color', '[tex]/amsmath', '[tex]/amssymb', '[tex]/boldsymbol'] |
| }, |
| options: { |
| skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'], |
| ignoreHtmlClass: 'tex2jax_ignore', |
| processHtmlClass: 'tex2jax_process' |
| }, |
| startup: { |
| typeset: false, |
| ready: function() { |
| MathJax.startup.defaultReady(); |
| } |
| }, |
| chtml: { |
| scale: 1, |
| matchFontHeight: true |
| } |
| }; |
| </script> |
| <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> |
|
|
| |
| |
| <script type="module" src="js/markdownRenderer.js"></script> |
| <script type="module" src="js/script.js"></script> |
|
|
| </body> |
| </html> |
|
|
