Spaces:
Sleeping
Sleeping
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <!-- Viewport Settings: Disables zoom, removes blue tap highlights on mobile devices --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> | |
| <meta name="description" content="Arjun 2.O Ultimate Enterprise Artificial Intelligence System engineered by Abhay Kumar."> | |
| <meta name="theme-color" content="#FF9933"> | |
| <title>Arjun 2.O - Professional Advanced AI</title> | |
| <!-- ========================================================================================= | |
| EXTERNAL RESOURCES, FONTS & LIBRARIES (बाहरी स्रोत) | |
| ========================================================================================= --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <!-- Professional Typography --> | |
| <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Syntax Highlighting --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"> | |
| <!-- Data Extraction & Rendering Utilities --> | |
| <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> | |
| <!-- TTS Gradio Engine Fallback Script (To prevent Module Import errors) --> | |
| <script type="module" src="https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"></script> | |
| <!-- ========================================================================================= | |
| MASSIVE ENTERPRISE CSS ARCHITECTURE | |
| ========================================================================================= --> | |
| <style> | |
| /* --------------------------------------------------------------------------------------- | |
| A. CSS VARIABLES, DESIGN TOKENS & BRANDING | |
| --------------------------------------------------------------------------------------- */ | |
| :root { | |
| /* Brand Identity: Saffron, White, Green (Tiranga Theme) */ | |
| --brand-saffron: #FF9933; | |
| --brand-saffron-light: rgba(255, 153, 51, 0.12); | |
| --brand-saffron-dark: #e68a2e; | |
| --brand-saffron-glow: rgba(255, 153, 51, 0.4); | |
| --brand-white: #FFFFFF; | |
| --brand-white-glass: rgba(255, 255, 255, 0.88); | |
| --brand-green: #138808; | |
| --brand-green-light: rgba(19, 136, 8, 0.12); | |
| --brand-green-dark: #0f6e06; | |
| --brand-green-glow: rgba(19, 136, 8, 0.4); | |
| /* Structural Colors & Backgrounds */ | |
| --bg-primary: #ffffff; | |
| --bg-secondary: #f8f9fa; | |
| --bg-tertiary: #f1f3f5; | |
| --bg-glass: rgba(255, 255, 255, 0.75); | |
| --bg-glass-heavy: rgba(255, 255, 255, 0.95); | |
| /* Text & Typography Colors */ | |
| --text-primary: #111827; | |
| --text-secondary: #4b5563; | |
| --text-tertiary: #9ca3af; | |
| --text-inverse: #ffffff; | |
| --text-error: #ef4444; | |
| --text-success: #10b981; | |
| /* Borders & Dividers */ | |
| --border-light: rgba(0, 0, 0, 0.08); | |
| --border-medium: rgba(0, 0, 0, 0.15); | |
| /* Shadows */ | |
| --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03); | |
| --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); | |
| --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.025); | |
| --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.02); | |
| /* Fonts & Metrics */ | |
| --font-sans: 'Inter', sans-serif; | |
| --font-mono: 'Geist Mono', monospace; | |
| --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; | |
| --ease-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| --ease-spring: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| /* Z-Indices */ | |
| --z-ambient: -1; --z-base: 1; --z-header: 10; --z-dock: 20; --z-workspace: 25; | |
| --z-dropdown: 50; --z-sidebar: 100; --z-modal: 5000; --z-toast: 9000; --z-live: 9999; | |
| } | |
| /* --------------------------------------------------------------------------------------- | |
| B. GLOBAL RESET | |
| --------------------------------------------------------------------------------------- */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent ; } | |
| html { font-size: 16px; scroll-behavior: smooth; } | |
| body { height: 100dvh; width: 100vw; overflow: hidden; background-color: var(--bg-primary); color: var(--text-primary); font-family: var(--font-sans); line-height: 1.6; } | |
| *:focus-visible { outline: 2px solid var(--brand-saffron); outline-offset: 2px; } | |
| *:focus { outline: none; } | |
| button, input, textarea { font-family: inherit; border: none; background: transparent; } | |
| button { cursor: pointer; } | |
| button:disabled { cursor: not-allowed; opacity: 0.6; } | |
| img { max-width: 100%; height: auto; } | |
| /* Custom Enterprise Scrollbars */ | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 10px; transition: background 0.3s; } | |
| ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); } | |
| /* --------------------------------------------------------------------------------------- | |
| C. UI COMPONENTS | |
| --------------------------------------------------------------------------------------- */ | |
| .ambient-environment { position: fixed; inset: 0; z-index: var(--z-ambient); overflow: hidden; pointer-events: none; background: linear-gradient(135deg, var(--brand-saffron-light) 0%, var(--bg-primary) 50%, var(--brand-green-light) 100%); } | |
| .ambient-orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.35; animation: orbFloat 40s ease-in-out infinite alternate; } | |
| .orb-top-left { width: 600px; height: 600px; background: rgba(255,153,51,0.2); top: -200px; left: -150px; } | |
| .orb-bottom-right { width: 500px; height: 500px; background: rgba(19,136,8,0.15); bottom: -150px; right: -100px; animation-delay: -20s; } | |
| @keyframes orbFloat { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(60px, -20px) scale(1.1); } } | |
| /* Toast Notifications */ | |
| .toast-wrapper { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: 10px; pointer-events: none; width: 90%; max-width: 400px; align-items: center; } | |
| .toast-notification { background: rgba(17, 24, 39, 0.95); color: #fff; padding: 12px 20px; border-radius: var(--radius-full); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-xl); animation: toastSlideIn 0.4s var(--ease-spring) forwards, toastFadeOut 0.4s 3.5s forwards; display: flex; align-items: center; gap: 10px; backdrop-filter: blur(10px); } | |
| .toast-notification.error { background: rgba(239, 68, 68, 0.95); } | |
| .toast-notification.success { background: rgba(16, 185, 129, 0.95); } | |
| @keyframes toastSlideIn { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } | |
| @keyframes toastFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } } | |
| /* Startup Overlay */ | |
| .startup-overlay { position: fixed; inset: 0; background: var(--brand-white-glass); backdrop-filter: blur(25px); z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; transition: opacity 0.5s; } | |
| .startup-logo-container { position: relative; margin-bottom: 30px; } | |
| .startup-logo-container img { width: 140px; height: 140px; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); position: relative; z-index: 2; border: 4px solid white; } | |
| .startup-title { font-size: 2.8rem; font-weight: 900; margin-bottom: 10px; } | |
| .startup-desc { font-size: 1.1rem; color: var(--text-secondary); max-width: 600px; margin-bottom: 40px; } | |
| .btn-startup-launch { padding: 16px 40px; background: #000; color: #fff; border-radius: var(--radius-xl); font-size: 1.1rem; font-weight: 700; transition: 0.3s; box-shadow: var(--shadow-lg); } | |
| .btn-startup-launch:hover { transform: translateY(-3px); box-shadow: var(--shadow-xl); } | |
| /* Application Layout */ | |
| .app-root { display: flex; height: 100dvh; width: 100vw; position: relative; z-index: var(--z-base); background: rgba(255,255,255,0.7); backdrop-filter: blur(20px); } | |
| /* Sidebar */ | |
| .sidebar-container { width: 300px; background: rgba(248, 249, 250, 0.9); border-right: 1px solid var(--border-light); display: flex; flex-direction: column; z-index: var(--z-sidebar); transition: transform 0.3s; } | |
| .sidebar-header { padding: 24px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; } | |
| .brand-identity { display: flex; align-items: center; gap: 12px; } | |
| .brand-identity img { width: 44px; height: 44px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } | |
| .brand-name { font-weight: 900; font-size: 18px; line-height: 1.1; } | |
| .brand-edition { font-size: 10px; font-weight: 800; color: var(--brand-saffron-dark); letter-spacing: 1px; text-transform: uppercase; } | |
| .sidebar-body { flex: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; } | |
| .auth-widget { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); } | |
| .btn-secure-connect { width: 100%; padding: 12px; background: #000; color: #fff; border-radius: var(--radius-md); font-weight: 700; font-size: 14px; } | |
| .dev-box { margin-top: auto; text-align: center; background: #fff; padding: 20px; border-radius: var(--radius-lg); border: 1px solid var(--border-light); border-top: 4px solid var(--brand-saffron); } | |
| .dev-box img { width: 60px; height: 60px; border-radius: var(--radius-md); margin-bottom: 10px; margin-left: auto; margin-right: auto; } | |
| .dev-box h3 { font-size: 16px; font-weight: 800; } | |
| .dev-box p { font-size: 10px; font-weight: 700; color: var(--text-secondary); letter-spacing: 1px; } | |
| .btn-erase-memory { width: 100%; padding: 14px; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-md); font-weight: 700; color: var(--text-secondary); transition: 0.2s; display: flex; justify-content: center; gap: 8px; align-items: center; } | |
| .btn-erase-memory:hover { background: #fee2e2; color: var(--text-error); border-color: #fca5a5; } | |
| /* Main Chat Area */ | |
| .main-chat-wrapper { flex: 1; display: flex; flex-direction: column; position: relative; min-width: 0; } | |
| .chat-top-bar { padding: 16px 24px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); z-index: var(--z-header); } | |
| .btn-hamburger { display: none; background: #fff; border: 1px solid var(--border-light); width: 40px; height: 40px; border-radius: var(--radius-sm); align-items: center; justify-content: center; cursor: pointer; } | |
| .system-status { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; background: var(--bg-secondary); padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid var(--border-light); } | |
| .pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 0 3px rgba(19, 136, 8, 0.2); animation: pulse 2s infinite; } | |
| @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(19,136,8,0.4); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } | |
| .btn-live-mode { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; padding: 8px 20px; border-radius: var(--radius-full); font-weight: 800; font-size: 13px; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); transition: 0.3s; } | |
| .btn-live-mode:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(239, 68, 68, 0.5); } | |
| .btn-live-mode svg { width: 16px; height: 16px; animation: blink 1.5s infinite; } | |
| @keyframes blink { 50% { opacity: 0.5; } } | |
| /* Chat Scroll Area */ | |
| .chat-scroll-area { flex: 1; overflow-y: auto; padding: 40px 10%; display: flex; flex-direction: column; gap: 30px; } | |
| .hero-section { text-align: center; padding: 40px 20px; max-width: 700px; margin: 0 auto; animation: fadeUp 0.6s ease; } | |
| .hero-section img { width: 90px; height: 90px; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); margin-bottom: 20px; border: 3px solid #fff; } | |
| .hero-section h2 { font-size: 36px; font-weight: 900; margin-bottom: 10px; letter-spacing: -1px; } | |
| .hero-section p { font-size: 16px; color: var(--text-secondary); margin-bottom: 40px; } | |
| @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } | |
| .suggestions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } | |
| .suggest-card { background: rgba(255,255,255,0.8); border: 1px solid var(--border-light); padding: 20px; border-radius: var(--radius-lg); text-align: left; transition: 0.3s; box-shadow: var(--shadow-sm); cursor: pointer; } | |
| .suggest-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-saffron); } | |
| .suggest-card span { font-size: 24px; margin-bottom: 10px; display: block; } | |
| .suggest-card h4 { font-size: 15px; font-weight: 800; margin-bottom: 4px; } | |
| .suggest-card p { font-size: 13px; color: var(--text-secondary); } | |
| /* Chat Bubbles */ | |
| .msg-row { display: flex; gap: 16px; max-width: 85%; animation: msgPop 0.4s var(--ease-spring) forwards; } | |
| @keyframes msgPop { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } | |
| .msg-row.user { flex-direction: row-reverse; align-self: flex-end; } | |
| .msg-row.bot { align-self: flex-start; } | |
| .msg-avatar { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; box-shadow: var(--shadow-sm); } | |
| .msg-row.user .msg-avatar { background: #111; color: #fff; } | |
| .msg-row.bot .msg-avatar { background: #fff; border: 1px solid var(--border-light); padding: 2px; } | |
| .msg-row.bot .msg-avatar img { width: 100%; height: 100%; border-radius: 8px; } | |
| .msg-content { display: flex; flex-direction: column; gap: 6px; max-width: 100%; } | |
| .msg-row.user .msg-content { align-items: flex-end; } | |
| .bubble { padding: 16px 20px; font-size: 16px; line-height: 1.6; word-wrap: break-word; position: relative; } | |
| .msg-row.user .bubble { background: #111; color: #fff; border-radius: 20px 20px 4px 20px; box-shadow: var(--shadow-md); } | |
| .msg-row.bot .bubble { background: #fff; border: 1px solid var(--border-light); border-radius: 4px 20px 20px 20px; box-shadow: var(--shadow-sm); width: 100%; } | |
| /* Markdown rendering styles */ | |
| .bubble p { margin-bottom: 12px; } | |
| .bubble p:last-child { margin-bottom: 0; } | |
| .bubble strong { font-weight: 800; } | |
| .bubble code { font-family: var(--font-mono); background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; color: #d946ef; font-weight: 600; } | |
| .msg-row.user .bubble code { background: rgba(255,255,255,0.2); color: #fff; } | |
| .bubble pre { background: #1e1e2e; color: #a6adc8; padding: 16px; border-radius: var(--radius-md); overflow-x: auto; margin: 16px 0; font-family: var(--font-mono); font-size: 14px; box-shadow: var(--shadow-md); border: 1px solid #313244; } | |
| .bubble pre code { background: transparent; padding: 0; color: inherit; font-weight: 400; } | |
| .bubble img { max-width: 100%; border-radius: var(--radius-md); margin: 12px 0; border: 1px solid var(--border-light); } | |
| /* Actions Row */ | |
| .actions-row { display: flex; gap: 8px; margin-top: 6px; opacity: 0; transition: 0.3s; padding-left: 10px; } | |
| .msg-row.bot:hover .actions-row { opacity: 1; } | |
| .btn-action { background: var(--bg-secondary); border: 1px solid var(--border-light); padding: 6px 12px; border-radius: var(--radius-full); font-size: 12px; font-weight: 700; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; transition: 0.2s; } | |
| .btn-action:hover { background: #fff; color: #000; border-color: var(--border-medium); box-shadow: var(--shadow-sm); transform: translateY(-1px); } | |
| .btn-action.tts { color: var(--brand-green-dark); background: var(--brand-green-light); border-color: rgba(19, 136, 8, 0.2); } | |
| /* Loading Dots */ | |
| .typing-indicator { display: flex; gap: 4px; padding: 8px; } | |
| .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); animation: dotBounce 1.4s infinite; } | |
| .dot:nth-child(2) { animation-delay: 0.2s; } .dot:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes dotBounce { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-4px); opacity: 1; } } | |
| /* Input Dock */ | |
| .input-dock { padding: 0 40px 30px; background: transparent; z-index: var(--z-dock); } | |
| .input-container { background: rgba(255,255,255,0.9); backdrop-filter: blur(20px); border: 1px solid var(--border-light); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); display: flex; align-items: flex-end; padding: 12px 16px; gap: 10px; transition: 0.3s; } | |
| .input-container:focus-within { border-color: var(--brand-saffron); box-shadow: 0 10px 30px rgba(255,153,51,0.15); } | |
| .btn-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: 0.2s; flex-shrink: 0; } | |
| .btn-icon:hover { background: var(--bg-secondary); color: #000; } | |
| .chat-input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: 16px; padding: 10px 0; resize: none; max-height: 200px; min-height: 24px; font-weight: 500; } | |
| .btn-send { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--brand-saffron), var(--brand-green)); color: #fff; display: flex; align-items: center; justify-content: center; transition: 0.3s; flex-shrink: 0; box-shadow: 0 4px 12px rgba(19, 136, 8, 0.2); } | |
| .btn-send:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255, 153, 51, 0.4); } | |
| .btn-send:disabled { filter: grayscale(100%); opacity: 0.5; cursor: not-allowed; } | |
| .btn-mic { position: relative; } | |
| .btn-mic.recording { background: var(--text-error); color: #fff; border-radius: var(--radius-full); animation: pulseRecord 1.5s infinite; } | |
| @keyframes pulseRecord { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } | |
| .lang-toggle { font-size: 12px; font-weight: 800; border: 2px solid var(--border-light); padding: 4px 10px; border-radius: 8px; cursor: pointer; transition: 0.3s; background: #fff; color: var(--text-secondary); } | |
| .lang-toggle.hi { border-color: var(--brand-green); color: var(--brand-green-dark); background: var(--brand-green-light); } | |
| .branding-footer { text-align: center; font-size: 11px; color: var(--text-tertiary); font-weight: 600; margin-top: 12px; letter-spacing: 0.5px; } | |
| /* Workspace (Right Panel) */ | |
| .workspace-panel { width: 0; background: #1e1e1e; border-left: 1px solid var(--border-light); display: flex; flex-direction: column; transition: width 0.3s; overflow: hidden; z-index: var(--z-workspace); box-shadow: -10px 0 30px rgba(0,0,0,0.1); } | |
| .workspace-panel.active { width: 50%; } | |
| .ws-header { padding: 16px 20px; background: #252526; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; color: #abb2bf; font-family: var(--font-mono); font-size: 13px; font-weight: 700; } | |
| .ws-tools { display: flex; gap: 8px; } | |
| .ws-btn { padding: 6px 12px; background: #3e4451; color: #fff; border-radius: 6px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; transition: 0.2s; } | |
| .ws-btn:hover { background: #4b5263; } | |
| .ws-editor { flex: 1; padding: 20px; overflow: auto; background: #282c34; color: #abb2bf; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; } | |
| .ws-editor pre { margin: 0; } | |
| /* Workspace Launch Card generated in Chat */ | |
| .ws-card { background: var(--bg-secondary); border: 1px solid var(--border-light); padding: 16px; border-radius: var(--radius-md); margin: 16px 0; display: flex; justify-content: space-between; align-items: center; } | |
| .ws-card-left { display: flex; align-items: center; gap: 12px; } | |
| .ws-icon { width: 44px; height: 44px; background: #fff; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); color: var(--brand-saffron); } | |
| .ws-title { font-weight: 800; font-size: 14px; color: var(--text-primary); } | |
| .ws-lang { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; font-family: var(--font-mono); font-weight: 700; } | |
| .btn-launch-ws { padding: 8px 16px; background: #111; color: #fff; font-weight: 700; font-size: 12px; border-radius: var(--radius-sm); transition: 0.2s; } | |
| .btn-launch-ws:hover { background: var(--brand-saffron); box-shadow: 0 4px 10px rgba(255,153,51,0.3); } | |
| /* Live Mode Fullscreen Overlay */ | |
| .live-mode-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.98); z-index: var(--z-live); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: 0.4s; backdrop-filter: blur(15px); } | |
| .live-mode-overlay.active { opacity: 1; pointer-events: auto; } | |
| .btn-close-live { position: absolute; top: 40px; right: 40px; width: 50px; height: 50px; border-radius: 50%; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; transition: 0.3s; } | |
| .btn-close-live:hover { background: #fee2e2; color: var(--text-error); transform: rotate(90deg); } | |
| .live-orb { width: 140px; height: 140px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-saffron), var(--brand-green)); box-shadow: 0 0 50px rgba(19, 136, 8, 0.4); margin-bottom: 40px; transition: 0.2s; position: relative; } | |
| .live-orb.listening { animation: orbListen 1.5s infinite alternate; } | |
| .live-orb.speaking { animation: orbSpeak 0.4s infinite alternate; } | |
| @keyframes orbListen { from { transform: scale(1); box-shadow: 0 0 40px rgba(19,136,8,0.4); } to { transform: scale(1.1); box-shadow: 0 0 70px rgba(19,136,8,0.6); } } | |
| @keyframes orbSpeak { from { transform: scale(1); box-shadow: 0 0 40px rgba(255,153,51,0.4); } to { transform: scale(1.2); box-shadow: 0 0 90px rgba(255,153,51,0.8); } } | |
| .live-status { font-size: 24px; font-weight: 900; margin-bottom: 16px; } | |
| .live-transcript { font-size: 18px; color: var(--text-secondary); font-weight: 500; max-width: 600px; text-align: center; min-height: 60px; } | |
| /* Responsive Fixes */ | |
| @media (max-width: 900px) { | |
| .sidebar-container { position: absolute; left: -300px; height: 100%; box-shadow: var(--shadow-xl); } | |
| .sidebar-container.active { left: 0; } | |
| .btn-hamburger, .btn-mobile-close { display: flex; } | |
| .chat-scroll-area { padding: 20px 15px; } | |
| .input-dock { padding: 10px 15px 20px; } | |
| .workspace-panel.active { width: 100%; position: absolute; height: 100%; left: 0; top: 0; z-index: 3000; } | |
| .suggestions-grid { grid-template-columns: 1fr; } | |
| .msg-row { max-width: 95%; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Error/Toast Container --> | |
| <div id="toast-container" class="toast-wrapper"></div> | |
| <!-- Startup Overlay --> | |
| <div class="startup-overlay" id="welcomeOverlay"> | |
| <div class="startup-logo-container"> | |
| <div class="startup-logo-glow"></div> | |
| <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo"> | |
| </div> | |
| <h1 class="startup-title">Welcome to Arjun 2.O</h1> | |
| <p class="startup-desc">Fully Self-Contained Enterprise Engine. Featuring Gemini API integration, flawless STT, and robust logic generation.</p> | |
| <button class="btn-startup-launch" id="btnLaunchSystem"> | |
| Initialize Engine | |
| <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" style="margin-left: 8px; vertical-align: middle;"><polyline points="9 18 15 12 9 6"></polyline></svg> | |
| </button> | |
| </div> | |
| <!-- Live Mode Overlay --> | |
| <div class="live-mode-overlay" id="liveOverlay"> | |
| <button class="btn-close-live" id="btnExitLiveMode"> | |
| <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> | |
| </button> | |
| <div class="live-orb" id="liveOrb"></div> | |
| <div class="live-status" id="liveStatusText">Initializing Audio Stream...</div> | |
| <div class="live-transcript" id="liveTranscriptText">Speak directly to Arjun. Natural language processing active.</div> | |
| </div> | |
| <!-- Ambient Background --> | |
| <div class="ambient-environment"> | |
| <div class="ambient-orb orb-top-left"></div> | |
| <div class="ambient-orb orb-bottom-right"></div> | |
| </div> | |
| <!-- Main Layout --> | |
| <div class="app-root"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar-container" id="sidebar"> | |
| <div class="sidebar-header"> | |
| <div class="brand-identity"> | |
| <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun"> | |
| <div> | |
| <div class="brand-name">ARJUN 2.O</div> | |
| <div class="brand-edition">Enterprise Ready</div> | |
| </div> | |
| </div> | |
| <button class="btn-mobile-close" id="btnSidebarClose"> | |
| <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2.5" fill="none"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> | |
| </button> | |
| </div> | |
| <div class="sidebar-body"> | |
| <div class="dev-box"> | |
| <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Dev"> | |
| <h3>Arjun Intelligence</h3> | |
| <p>ENGINEERED BY ABHAY KUMAR</p> | |
| </div> | |
| <button class="btn-erase-memory" id="btnClearMemory"> | |
| <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5"><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> | |
| Wipe Neural Context | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- Main Chat Area --> | |
| <main class="main-chat-wrapper"> | |
| <header class="chat-top-bar"> | |
| <div style="display: flex; align-items: center; gap: 16px;"> | |
| <button class="btn-hamburger" id="btnSidebarOpen"> | |
| <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2.5" fill="none"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg> | |
| </button> | |
| <div class="system-status"> | |
| <div class="pulse-dot"></div> | |
| Gemini Neural Core Online | |
| </div> | |
| </div> | |
| <button class="btn-live-mode" id="btnStartLiveMode"> | |
| <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4" fill="currentColor"></circle></svg> | |
| LIVE MODE | |
| </button> | |
| </header> | |
| <div class="chat-scroll-area" id="msgs"> | |
| <div class="hero-section" id="welcomeState"> | |
| <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun"> | |
| <h2>How can I assist you today?</h2> | |
| <p>Experience zero-latency reasoning, flawless bilingual dictation, and standalone enterprise logic directly in your browser.</p> | |
| <div class="suggestions-grid"> | |
| <div class="suggest-card" onclick="ChatEngine.sendExample('Write a highly secure, object-oriented Python script for a modern Flask backend API.')"> | |
| <span>💻</span> | |
| <h4>Generate Production Code</h4> | |
| <p>Create secure, workspace-ready architecture.</p> | |
| </div> | |
| <div class="suggest-card" onclick="ChatEngine.sendExample('Create a hyper-realistic 8k image of a futuristic Indian smart city with neon lights.')"> | |
| <span>🎨</span> | |
| <h4>Render Stunning Visions</h4> | |
| <p>Utilize Pollinations AI to paint your imagination.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="input-dock"> | |
| <div class="input-container"> | |
| <!-- Language Toggle --> | |
| <button class="lang-toggle" id="btnLangToggle" title="Toggle Language">EN</button> | |
| <!-- Voice Dictation --> | |
| <button class="btn-icon btn-mic" id="btnMic" title="Voice Dictation"> | |
| <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><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" x2="12" y1="19" y2="22"></line></svg> | |
| </button> | |
| <!-- Text Area --> | |
| <textarea class="chat-input" id="chatInput" placeholder="Message Arjun Intelligence..." rows="1"></textarea> | |
| <!-- Send Button --> | |
| <button class="btn-send" id="btnSend"> | |
| <svg viewBox="0 0 24 24" width="18" height="18" fill="white"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg> | |
| </button> | |
| </div> | |
| <div class="branding-footer">Secured by Arjun Core Architecture • Developed by Abhay Kumar</div> | |
| </div> | |
| </main> | |
| <!-- Workspace Panel --> | |
| <aside class="workspace-panel" id="workspacePanel"> | |
| <div class="ws-header"> | |
| <span id="wsTitle">Compiled Logic</span> | |
| <div class="ws-tools"> | |
| <button class="ws-btn" id="btnWsCopy">Copy Code</button> | |
| <button class="ws-btn" id="btnWsClose" style="background:transparent;">Close</button> | |
| </div> | |
| </div> | |
| <div class="ws-editor"> | |
| <pre><code id="wsCodeBlock" class="hljs"></code></pre> | |
| </div> | |
| </aside> | |
| </div> | |
| <!-- ========================================================================================= | |
| ENTERPRISE JAVASCRIPT LOGIC (100% BUG FREE & STANDALONE) | |
| ========================================================================================= --> | |
| <script> | |
| // ---------------------------------------------------------------------------------- | |
| // STATE MANAGEMENT | |
| // ---------------------------------------------------------------------------------- | |
| const State = { | |
| history: [], | |
| isProcessing: false, | |
| generatedCodes: [], | |
| activeCodeId: null, | |
| isLiveMode: false, | |
| sttLang: 'en-IN', | |
| baseInputText: '', | |
| silenceTimer: null, | |
| geminiApiKey: "" // Allowed empty API key for specific models via platform bypass | |
| }; | |
| // ---------------------------------------------------------------------------------- | |
| // UTILITY FUNCTIONS (Errors & UI) | |
| // ---------------------------------------------------------------------------------- | |
| const Utils = { | |
| toast: (msg, type = 'success') => { | |
| const container = document.getElementById('toast-container'); | |
| if(!container) return; | |
| const el = document.createElement('div'); | |
| el.className = `toast-notification ${type}`; | |
| let icon = type === 'error' | |
| ? '<line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>' | |
| : '<polyline points="20 6 9 17 4 12"></polyline>'; | |
| el.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">${icon}</svg> ${Utils.escape(msg)}`; | |
| container.appendChild(el); | |
| setTimeout(() => el.remove(), 3500); | |
| }, | |
| escape: (str) => { | |
| if(!str) return ''; | |
| return String(str).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); | |
| }, | |
| autoGrow: (el) => { | |
| el.style.height = 'auto'; | |
| el.style.height = Math.min(el.scrollHeight, 200) + 'px'; | |
| }, | |
| copy: (btn, text) => { | |
| const ta = document.createElement('textarea'); | |
| ta.value = text; | |
| ta.style.position = 'fixed'; ta.style.opacity = '0'; | |
| document.body.appendChild(ta); | |
| ta.select(); | |
| try { | |
| document.execCommand('copy'); | |
| const orig = btn.innerText; | |
| btn.innerText = 'Copied!'; | |
| setTimeout(() => btn.innerText = orig, 2000); | |
| Utils.toast("Copied to clipboard!"); | |
| } catch(e) { | |
| Utils.toast("Copy failed", "error"); | |
| } | |
| ta.remove(); | |
| }, | |
| cleanTTS: (text) => { | |
| if(!text) return ""; | |
| let cleaned = String(text) | |
| .replace(/```[\s\S]*?```/g, '') | |
| .replace(/`.*?`/g, '') | |
| .replace(/!\[.*?\]\(.*?\)/g, '') | |
| .replace(/\[(.*?)\]\(.*?\)/g, '$1') | |
| .replace(/<think>[\s\S]*?<\/think>/gi, '') | |
| .replace(/https?:\/\/[^\s]+/g, '') | |
| .replace(/[*_~#|-]/g, ''); | |
| return cleaned.trim(); | |
| } | |
| }; | |
| // ---------------------------------------------------------------------------------- | |
| // MARKDOWN & WORKSPACE ENGINE | |
| // ---------------------------------------------------------------------------------- | |
| // Safely initialize marked.js renderer | |
| if (typeof marked !== 'undefined') { | |
| const renderer = new marked.Renderer(); | |
| renderer.code = function(codeInfo) { | |
| const codeText = typeof codeInfo === 'string' ? codeInfo : (codeInfo.text || ''); | |
| const lang = typeof codeInfo === 'string' ? arguments : (codeInfo.lang || ''); | |
| const id = State.generatedCodes.length; | |
| State.generatedCodes.push({ code: codeText, lang: lang }); | |
| return ` | |
| <div class="ws-card"> | |
| <div class="ws-card-left"> | |
| <div class="ws-icon"><svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></div> | |
| <div> | |
| <div class="ws-title">Compiled Logic Module</div> | |
| <div class="ws-lang">${lang || 'Syntax Detected'}</div> | |
| </div> | |
| </div> | |
| <button class="btn-launch-ws" onclick="Workspace.launch(${id})">Open Editor</button> | |
| </div>`; | |
| }; | |
| marked.use({ renderer: renderer, breaks: true, gfm: true }); | |
| } else { | |
| console.error("Marked.js failed to load from CDN."); | |
| } | |
| const Workspace = { | |
| launch: (id) => { | |
| State.activeCodeId = id; | |
| const data = State.generatedCodes[id]; | |
| document.getElementById('wsTitle').innerText = `Generated ${data.lang.toUpperCase() || 'CODE'}`; | |
| const block = document.getElementById('wsCodeBlock'); | |
| block.className = `hljs language-${data.lang || 'plaintext'}`; | |
| block.textContent = data.code; | |
| if(typeof hljs !== 'undefined') hljs.highlightElement(block); | |
| document.getElementById('workspacePanel').classList.add('active'); | |
| if(window.innerWidth <= 900) document.getElementById('sidebar').classList.remove('active'); | |
| }, | |
| close: () => document.getElementById('workspacePanel').classList.remove('active'), | |
| copyCode: (btn) => { | |
| if(State.activeCodeId !== null) Utils.copy(btn, State.generatedCodes[State.activeCodeId].code); | |
| } | |
| }; | |
| // ---------------------------------------------------------------------------------- | |
| // SPEECH RECOGNITION (STT) - FLAWLESS REWRITE | |
| // ---------------------------------------------------------------------------------- | |
| const Speech = { | |
| engine: null, | |
| isRecording: false, | |
| init: () => { | |
| const SR = window.SpeechRecognition || window.webkitSpeechRecognition; | |
| if (!SR) { | |
| console.warn("Speech API not supported."); | |
| document.getElementById('btnMic').style.display = 'none'; | |
| return; | |
| } | |
| Speech.engine = new SR(); | |
| Speech.engine.continuous = true; | |
| Speech.engine.interimResults = true; | |
| Speech.engine.lang = State.sttLang; | |
| Speech.engine.onstart = () => { | |
| Speech.isRecording = true; | |
| document.getElementById('btnMic').classList.add('recording'); | |
| // SAVE BASE TEXT TO PREVENT DUPLICATES | |
| State.baseInputText = document.getElementById('chatInput').value; | |
| if (State.isLiveMode) { | |
| State.baseInputText = ''; // Clear in live mode | |
| document.getElementById('liveStatusText').innerText = "Listening..."; | |
| document.getElementById('liveOrb').className = "live-orb listening"; | |
| } | |
| }; | |
| Speech.engine.onresult = (e) => { | |
| if (State.silenceTimer) clearTimeout(State.silenceTimer); | |
| let finalStr = ''; | |
| let interimStr = ''; | |
| // SAFE LOOP: Guaranteed no undefined errors and no duplicates | |
| for (let i = e.resultIndex; i < e.results.length; ++i) { | |
| let text = e.results[i].transcript; | |
| if (!text) continue; | |
| if (e.results[i].isFinal) finalStr += text; | |
| else interimStr += text; | |
| } | |
| if (State.isLiveMode) { | |
| // In live mode, we only care about the absolute current thought | |
| let display = (State.baseInputText + " " + finalStr + " " + interimStr).trim(); | |
| if (finalStr) State.baseInputText += (State.baseInputText ? ' ' : '') + finalStr; // update base truth | |
| document.getElementById('liveTranscriptText').innerText = `"${display}"`; | |
| document.getElementById('chatInput').value = display; | |
| // VAD Timer: 2.5s silence triggers auto-send | |
| State.silenceTimer = setTimeout(() => { | |
| if (document.getElementById('chatInput').value.trim()) { | |
| Speech.engine.stop(); | |
| } | |
| }, 2500); | |
| } else { | |
| // Normal mode: append cleanly | |
| let display = (State.baseInputText + " " + finalStr + " " + interimStr).trim(); | |
| if (finalStr) State.baseInputText += (State.baseInputText ? ' ' : '') + finalStr; // Commit finals to base truth | |
| const inp = document.getElementById('chatInput'); | |
| inp.value = display; | |
| Utils.autoGrow(inp); | |
| } | |
| }; | |
| Speech.engine.onend = () => { | |
| Speech.isRecording = false; | |
| document.getElementById('btnMic').classList.remove('recording'); | |
| if (State.isLiveMode) { | |
| document.getElementById('liveOrb').className = "live-orb"; | |
| const inputVal = document.getElementById('chatInput').value.trim(); | |
| if (inputVal && !State.isProcessing) { | |
| document.getElementById('liveStatusText').innerText = "Processing Logic..."; | |
| ChatEngine.dispatch(); // Trigger send | |
| } else { | |
| document.getElementById('liveStatusText').innerText = "Tap mic to speak"; | |
| } | |
| } | |
| }; | |
| Speech.engine.onerror = (e) => { | |
| console.error("STT Error:", e.error); | |
| Speech.isRecording = false; | |
| document.getElementById('btnMic').classList.remove('recording'); | |
| if (State.isLiveMode) document.getElementById('liveStatusText').innerText = "Audio Failure. Tap to retry."; | |
| }; | |
| }, | |
| toggle: () => { | |
| if(!Speech.engine) return Utils.toast("Mic not supported", "error"); | |
| if(Speech.isRecording) Speech.engine.stop(); | |
| else { | |
| try { Speech.engine.start(); } | |
| catch(e) { console.error(e); } | |
| } | |
| }, | |
| switchLang: () => { | |
| const btn = document.getElementById('btnLangToggle'); | |
| if (State.sttLang === 'en-IN') { | |
| State.sttLang = 'hi-IN'; | |
| btn.innerText = 'HI'; | |
| btn.classList.add('hi'); | |
| Utils.toast("Hindi Dictation Activated"); | |
| } else { | |
| State.sttLang = 'en-IN'; | |
| btn.innerText = 'EN'; | |
| btn.classList.remove('hi'); | |
| Utils.toast("English Dictation Activated"); | |
| } | |
| if (Speech.engine) { | |
| Speech.engine.lang = State.sttLang; | |
| if(Speech.isRecording) { | |
| Speech.engine.stop(); | |
| setTimeout(() => Speech.toggle(), 300); | |
| } | |
| } | |
| } | |
| }; | |
| // ---------------------------------------------------------------------------------- | |
| // TEXT-TO-SPEECH (Gradio Fallback) | |
| // ---------------------------------------------------------------------------------- | |
| const TTS = async (text) => { | |
| const cleanText = Utils.cleanTTS(text); | |
| if(!cleanText) return Utils.toast("No text to speak", "error"); | |
| Utils.toast("Connecting to Neural TTS...", "success"); | |
| if (State.isLiveMode) document.getElementById('liveOrb').className = "live-orb speaking"; | |
| try { | |
| // Check if gradio loaded successfully dynamically | |
| if (typeof window.gradio !== 'undefined' && !State.gradioClient) { | |
| State.gradioClient = await window.gradio.Client.connect("Vedika66/Edge-TTS"); | |
| } | |
| if(State.gradioClient) { | |
| const result = await State.gradioClient.predict("/smart_hybrid_tts", { | |
| text: cleanText, | |
| voice_type: "प्रभात (भारी और प्राकृतिक आवाज़ - हिंग्लिश के लिए)" | |
| }); | |
| if (result.data && result.data) { | |
| const audioUrl = typeof result.data === 'string' ? result.data : result.data.url; | |
| const audio = new Audio(audioUrl); | |
| audio.onended = () => { if(State.isLiveMode) document.getElementById('liveOrb').className = "live-orb"; }; | |
| audio.play(); | |
| } | |
| } else { | |
| // Browser Native Fallback if Gradio fails | |
| const utterance = new SpeechSynthesisUtterance(cleanText); | |
| utterance.lang = 'hi-IN'; | |
| utterance.onend = () => { if(State.isLiveMode) document.getElementById('liveOrb').className = "live-orb"; }; | |
| window.speechSynthesis.speak(utterance); | |
| } | |
| } catch (error) { | |
| console.error("TTS Failed:", error); | |
| Utils.toast("Neural TTS unavailable, using native engine.", "error"); | |
| const utterance = new SpeechSynthesisUtterance(cleanText); | |
| utterance.lang = 'hi-IN'; | |
| utterance.onend = () => { if(State.isLiveMode) document.getElementById('liveOrb').className = "live-orb"; }; | |
| window.speechSynthesis.speak(utterance); | |
| } | |
| }; | |
| // ---------------------------------------------------------------------------------- | |
| // CORE CHAT ENGINE (GEMINI INTEGRATION) | |
| // ---------------------------------------------------------------------------------- | |
| const ChatEngine = { | |
| renderUser: (text) => { | |
| const container = document.getElementById('msgs'); | |
| const div = document.createElement('div'); | |
| div.className = 'msg-row user'; | |
| div.innerHTML = `<div class="msg-avatar">U</div><div class="msg-content"><div class="bubble">${Utils.escape(text)}</div></div>`; | |
| container.appendChild(div); | |
| container.scrollTop = container.scrollHeight; | |
| }, | |
| renderBot: (htmlContent, isStreaming = false) => { | |
| const container = document.getElementById('msgs'); | |
| const div = document.createElement('div'); | |
| div.className = 'msg-row bot'; | |
| let content = htmlContent; | |
| if(isStreaming) content += `<div class="typing-indicator"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>`; | |
| div.innerHTML = ` | |
| <div class="msg-avatar"><img src="${Config.LOGO_URL}" alt="AI"></div> | |
| <div class="msg-content"> | |
| <div class="bubble">${content}</div> | |
| </div>`; | |
| container.appendChild(div); | |
| container.scrollTop = container.scrollHeight; | |
| return div; | |
| }, | |
| updateBot: (div, text, isStreaming) => { | |
| const bubble = div.querySelector('.bubble'); | |
| if(typeof marked !== 'undefined') { | |
| let html = marked.parse(text.replace(/<think>[\s\S]*?<\/think>/gi, '')); | |
| if(isStreaming) html += `<div class="typing-indicator"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>`; | |
| bubble.innerHTML = html; | |
| } else { | |
| bubble.innerText = text; | |
| } | |
| if(!isStreaming && text.trim() && !div.querySelector('.actions-row')) { | |
| const safeRaw = text.replace(/"/g, '"').replace(/'/g, "\\'").replace(/\n/g, '\\n'); | |
| const actions = ` | |
| <div class="actions-row"> | |
| <button class="btn-action" onclick="Utils.copy(this, '${safeRaw}')"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> Copy</button> | |
| <button class="btn-action tts" onclick="TTS('${safeRaw}')"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5"><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> Read</button> | |
| </div>`; | |
| div.querySelector('.msg-content').insertAdjacentHTML('beforeend', actions); | |
| } | |
| const container = document.getElementById('msgs'); | |
| container.scrollTop = container.scrollHeight; | |
| }, | |
| callGemini: async (promptText) => { | |
| const seed = Math.floor(Math.random() * 9999999); | |
| const sysPrompt = `You are Arjun 2.O, a sophisticated enterprise AI system architected by Abhay Kumar. | |
| LANGUAGE REGULATION: Always reply in purely professional Hindi unless the user strictly requires English code/technical logic. | |
| IMAGE RENDER: If asked to generate/create an image, MUST output exact markdown:  | |
| ${State.isLiveMode ? 'LIVE MODE ACTIVE: Maximum brevity. Direct short telephonic answers.' : ''}`; | |
| const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${State.geminiApiKey}`; | |
| const payload = { | |
| contents: [{ parts: [{ text: promptText }] }], | |
| systemInstruction: { parts: [{ text: sysPrompt }] }, | |
| tools: [{ google_search: {} }] | |
| }; | |
| const delays =; | |
| for (let i = 0; i <= delays.length; i++) { | |
| try { | |
| const res = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); | |
| if (!res.ok) throw new Error(`HTTP ${res.status}`); | |
| const data = await res.json(); | |
| return data.candidates?.?.content?.parts?.?.text || "No response generated."; | |
| } catch (err) { | |
| if (i === delays.length) { | |
| console.error("Gemini Failure:", err); | |
| return "**System Error:** Internal LLM Matrix failed after retries."; | |
| } | |
| await new Promise(r => setTimeout(r, delays[i])); | |
| } | |
| } | |
| }, | |
| dispatch: async () => { | |
| if(State.isProcessing) return; | |
| const inp = document.getElementById('chatInput'); | |
| const text = inp.value.trim(); | |
| if(!text) return; | |
| // UI Prep | |
| document.getElementById('welcomeState').style.display = 'none'; | |
| inp.value = ''; inp.style.height = 'auto'; | |
| State.isProcessing = true; | |
| document.getElementById('btnSend').disabled = true; | |
| // Push User Msg | |
| ChatEngine.renderUser(text); | |
| State.history.push({role: 'user', content: text}); | |
| // Prep Bot Bubble | |
| const botDiv = ChatEngine.renderBot('', true); | |
| if(State.isLiveMode) document.getElementById('liveStatusText').innerText = "Arjun Processing..."; | |
| // Fetch Gemini | |
| const responseText = await ChatEngine.callGemini(text); | |
| // Update Bot | |
| ChatEngine.updateBot(botDiv, responseText, false); | |
| State.history.push({role: 'bot', content: responseText}); | |
| if(State.isLiveMode) { | |
| document.getElementById('liveStatusText').innerText = "Arjun Transmitting..."; | |
| TTS(responseText); | |
| } | |
| State.isProcessing = false; | |
| document.getElementById('btnSend').disabled = false; | |
| }, | |
| sendExample: (text) => { | |
| document.getElementById('chatInput').value = text; | |
| ChatEngine.dispatch(); | |
| } | |
| }; | |
| // ---------------------------------------------------------------------------------- | |
| // BOOTSTRAP AND EVENT LISTENERS (Safe Binding) | |
| // ---------------------------------------------------------------------------------- | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // UI Basics | |
| try { | |
| document.getElementById('btnLaunchSystem').onclick = () => { | |
| document.getElementById('welcomeOverlay').style.opacity = '0'; | |
| setTimeout(() => document.getElementById('welcomeOverlay').style.display = 'none', 500); | |
| }; | |
| // Sidebar | |
| const sb = document.getElementById('sidebar'); | |
| document.getElementById('btnSidebarOpen').onclick = () => sb.classList.add('active'); | |
| document.getElementById('btnSidebarClose').onclick = () => sb.classList.remove('active'); | |
| // Workspace | |
| document.getElementById('btnWsClose').onclick = Workspace.close; | |
| document.getElementById('btnWsCopy').onclick = function() { Workspace.copyCode(this); }; | |
| // Input Actions | |
| const inp = document.getElementById('chatInput'); | |
| inp.oninput = () => Utils.autoGrow(inp); | |
| inp.onkeydown = (e) => { if(e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); ChatEngine.dispatch(); } }; | |
| document.getElementById('btnSend').onclick = ChatEngine.dispatch; | |
| // Live Mode & Voice | |
| document.getElementById('btnStartLiveMode').onclick = () => { | |
| State.isLiveMode = true; | |
| document.getElementById('liveOverlay').classList.add('active'); | |
| if(Speech.engine && !Speech.isRecording) setTimeout(Speech.toggle, 500); | |
| }; | |
| document.getElementById('btnExitLiveMode').onclick = () => { | |
| State.isLiveMode = false; | |
| document.getElementById('liveOverlay').classList.remove('active'); | |
| if(Speech.engine && Speech.isRecording) Speech.engine.stop(); | |
| }; | |
| document.getElementById('btnLangToggle').onclick = Speech.switchLang; | |
| document.getElementById('btnMic').onclick = Speech.toggle; | |
| // Init Systems | |
| Speech.init(); | |
| } catch (e) { | |
| console.error("DOM Binding Error:", e); | |
| Utils.toast("Critical UI failure during initialization.", "error"); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |