Spaces:
Sleeping
Sleeping
| <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"> | |
| <title>Arjun 2.O - Advanced AI</title> | |
| <!-- Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <!-- Highlight.js for Syntax Highlighting --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"> | |
| <!-- PDF.js for PDF to Text Extraction --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script> | |
| <!-- Mammoth.js for Word (.docx) to Text Extraction --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script> | |
| <!-- Highlight.js and Marked.js --> | |
| <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> | |
| <style> | |
| /* ========================================================================== | |
| BASE RESET & VARIABLES (आधारभूत सेटिंग्स) | |
| ========================================================================== */ | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| :root { | |
| --bg-color: #ffffff; | |
| --bg-secondary: #f9f9fb; | |
| --text-main: #1d1d1f; | |
| --text-muted: #86868b; | |
| --accent: #FF9933; | |
| --accent-green: #138808; | |
| --accent-hover: #e68a2e; | |
| --border-light: rgba(0, 0, 0, 0.08); | |
| --border-focus: rgba(255, 153, 51, 0.3); | |
| --glass-bg: rgba(255, 255, 255, 0.85); | |
| --glass-border: rgba(255, 255, 255, 0.4); | |
| --shadow-sm: 0 2px 8px rgba(0,0,0,0.04); | |
| --shadow-md: 0 8px 32px rgba(0,0,0,0.08); | |
| --shadow-lg: 0 16px 48px rgba(0,0,0,0.12); | |
| --font-serif: 'Instrument Serif', serif; | |
| --font-sans: 'Inter', -apple-system, sans-serif; | |
| --font-mono: 'Geist Mono', monospace; | |
| --radius-lg: 24px; | |
| --radius-md: 16px; | |
| --radius-sm: 8px; | |
| } | |
| html, body { | |
| height: 100dvh; | |
| overflow: hidden; | |
| background: var(--bg-color); | |
| color: var(--text-main); | |
| font-family: var(--font-sans); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* ========================================================================== | |
| BACKGROUND ANIMATIONS (बैकग्राउंड इफ़ेक्ट) | |
| ========================================================================== */ | |
| .bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(135deg, rgba(255,153,51,0.05) 0%, rgba(255,255,255,1) 50%, rgba(19,136,8,0.05) 100%); } | |
| .orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.5; animation: drift 25s ease-in-out infinite alternate; } | |
| .orb1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,153,51,0.2), transparent 70%); top: -150px; left: -100px; } | |
| .orb2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(19,136,8,0.18), transparent 70%); bottom: -100px; right: -100px; animation-delay: -10s; } | |
| @keyframes drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(60px,40px) scale(1.05); } } | |
| /* ========================================================================== | |
| TOAST NOTIFICATION SYSTEM (नोटिफिकेशन) | |
| ========================================================================== */ | |
| #toast-container { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: 10px; } | |
| .toast { background: var(--text-main); color: #fff; padding: 12px 24px; border-radius: 50px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-md); animation: slideDownFade 0.4s ease; } | |
| @keyframes slideDownFade { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } | |
| /* ========================================================================== | |
| WELCOME OVERLAY (प्रारंभिक स्क्रीन) | |
| ========================================================================== */ | |
| .welcome-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; transition: opacity 0.4s ease; } | |
| .welcome-overlay.hidden { opacity: 0; pointer-events: none; } | |
| .welcome-overlay img { width: 120px; height: 120px; border-radius: 28px; object-fit: cover; box-shadow: var(--shadow-lg); margin-bottom: 24px; border: 1px solid var(--border-light); } | |
| .welcome-overlay h1 { font-family: var(--font-sans); font-size: 36px; font-weight: 800; color: var(--text-main); letter-spacing: -1px; margin-bottom: 12px; } | |
| .welcome-overlay p { font-size: 16px; color: var(--text-muted); line-height: 1.6; max-width: 450px; margin-bottom: 36px; } | |
| .start-btn { padding: 16px 40px; background: var(--text-main); color: #fff; border: none; border-radius: 16px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 8px 24px rgba(0,0,0,0.15); } | |
| .start-btn:hover { background: #333; transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); } | |
| /* ========================================================================== | |
| LAYOUT STRUCTURING (मुख्य ढांचा) | |
| ========================================================================== */ | |
| .shell { position: relative; z-index: 1; display: flex; height: 100dvh; width: 100vw; overflow: hidden; } | |
| .sidebar { width: 280px; display: flex; flex-direction: column; background: var(--bg-secondary); border-right: 1px solid var(--border-light); flex-shrink: 0; z-index: 100; transition: left 0.3s ease; } | |
| .main-wrapper { flex: 1; display: flex; position: relative; overflow: hidden; } | |
| .chat-main { flex: 1; display: flex; flex-direction: column; background: transparent; position: relative; min-width: 300px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); height: 100%; } | |
| .workspace { width: 0; background: #fafafa; border-left: 1px solid var(--border-light); display: flex; flex-direction: column; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; box-shadow: -10px 0 30px rgba(0,0,0,0.02); z-index: 25; } | |
| .workspace.open { width: 50%; } | |
| /* ========================================================================== | |
| SIDEBAR COMPONENTS (साइडबार तत्व) | |
| ========================================================================== */ | |
| .logo-area { padding: 24px 20px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; } | |
| .logo-row { display: flex; align-items: center; gap: 12px; } | |
| .logo-img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); background: #fff; } | |
| .logo-text { line-height: 1.2; } | |
| .logo-name { font-family: var(--font-sans); font-weight: 800; font-size: 16px; color: var(--text-main); letter-spacing: -0.5px; } | |
| .logo-sub { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); } | |
| .close-sidebar-btn { display: none; background: none; border: none; font-size: 20px; color: var(--text-main); cursor: pointer; } | |
| /* Auth Block */ | |
| .auth-block { padding: 20px; border-bottom: 1px solid var(--border-light); } | |
| .user-profile { display: none; align-items: center; gap: 10px; background: #fff; padding: 10px; border-radius: 12px; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); } | |
| .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--text-main); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; } | |
| .user-email { flex: 1; font-size: 12px; font-weight: 600; color: var(--text-main); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } | |
| .logout-btn { background: none; border: none; color: #ff3b30; cursor: pointer; font-size: 16px; padding: 4px; } | |
| .login-prompt-btn { width: 100%; padding: 12px; border-radius: 12px; background: var(--text-main); color: #fff; border: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; } | |
| .login-prompt-btn:hover { background: #333; transform: translateY(-1px); box-shadow: var(--shadow-sm); } | |
| /* Settings / Clear Button */ | |
| .settings { padding: 20px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; } | |
| .brand-box { background: #ffffff; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 24px 16px; text-align: center; box-shadow: var(--shadow-sm); margin-top: auto; } | |
| .brand-box img { width: 70px; height: 70px; border-radius: 16px; object-fit: cover; margin-bottom: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); } | |
| .brand-box h3 { font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--text-main); margin-bottom: 6px; } | |
| .brand-box p { font-size: 10px; font-weight: 600; color: var(--accent-green); line-height: 1.4; letter-spacing: 0.5px; } | |
| .clear-btn { width: 100%; padding: 12px; border-radius: var(--radius-sm); background: #ffffff; border: 1px solid var(--border-light); color: var(--text-main); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; } | |
| .clear-btn:hover { background: #fff0f0; color: #ff3b30; border-color: #ff3b30; } | |
| /* ========================================================================== | |
| MAIN CHAT AREA (मुख्य चैट क्षेत्र) | |
| ========================================================================== */ | |
| .chat-hdr { padding: 14px 24px; border-bottom: 1px solid var(--border-light); background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; align-items: center; z-index: 10; flex-shrink: 0; } | |
| .mobile-menu-btn { display: none; background: none; border: none; font-size: 24px; color: var(--text-main); cursor: pointer; margin-right: 16px; } | |
| .model-badge { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; } | |
| .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 2px rgba(52,199,89,0.2); } | |
| .messages { flex: 1; overflow-y: auto; padding: 30px 40px; display: flex; flex-direction: column; gap: 24px; scroll-behavior: smooth; position: relative; min-height: 0; } | |
| .messages::-webkit-scrollbar { width: 6px; } | |
| .messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; } | |
| /* Inner Welcome Screen */ | |
| .welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; margin: auto; animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; width: 100%; max-width: 650px; } | |
| @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } | |
| .welcome-logo { width: 80px; height: 80px; border-radius: 24px; object-fit: cover; box-shadow: var(--shadow-md); margin-bottom: 24px; border: 1px solid var(--border-light); } | |
| .welcome-title { font-size: 32px; font-weight: 800; letter-spacing: -1px; margin-bottom: 12px; } | |
| .welcome-sub { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; max-width: 500px; } | |
| .guest-badge { background: #fff0f0; color: #ff3b30; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; margin-bottom: 24px; border: 1px solid #ffcccb; display: none; } | |
| .ex-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; } | |
| .ex-card { background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 16px; cursor: pointer; text-align: left; transition: all 0.2s; box-shadow: var(--shadow-sm); } | |
| .ex-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); } | |
| .ex-title { font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } | |
| .ex-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; } | |
| /* Message Bubbles */ | |
| .msg { display: flex; gap: 16px; animation: msgIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; max-width: 85%; } | |
| @keyframes msgIn { from { opacity: 0; transform: translateY(15px) scale(0.96); } to { opacity: 1; transform: none; } } | |
| .msg.user { flex-direction: row-reverse; align-self: flex-end; } | |
| .msg.bot { align-self: flex-start; } | |
| .avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; overflow: hidden; } | |
| .msg.user .avatar { background: #f0f0f0; color: var(--text-main); border: 1px solid var(--border-light); } | |
| .msg.bot .avatar { border: 1px solid var(--border-light); background: #fff; padding: 2px; } | |
| .msg.bot .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } | |
| .body { display: flex; flex-direction: column; gap: 6px; max-width: 100%; width: 100%; } | |
| .msg.user .body { align-items: flex-end; } | |
| .bubble { padding: 16px 20px; font-size: 15px; line-height: 1.6; color: var(--text-main); position: relative; word-break: break-word; overflow-wrap: anywhere; } | |
| .msg.user .bubble { background: var(--text-main); color: #ffffff; border-radius: 20px 20px 4px 20px; box-shadow: var(--shadow-sm); } | |
| .msg.bot .bubble { background: #ffffff; border: 1px solid var(--border-light); border-radius: 4px 20px 20px 20px; box-shadow: var(--shadow-sm); width: 100%; } | |
| /* Bot Actions (Copy & Text to Speech) */ | |
| .msg-actions { display: flex; gap: 8px; margin-top: 4px; padding-left: 12px; opacity: 0.7; transition: opacity 0.2s; flex-wrap: wrap;} | |
| .msg.bot:hover .msg-actions { opacity: 1; } | |
| .action-btn { background: var(--bg-secondary); border: 1px solid var(--border-light); color: var(--text-main); font-size: 12px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; transition: all 0.2s; } | |
| .action-btn:hover { background: #e5e5ea; transform: translateY(-1px); } | |
| .action-btn.tts-btn { color: var(--accent-green); } | |
| /* Reasoning Box (Hidden as requested) */ | |
| .think-box { display: none; } | |
| /* Markdown Formatting */ | |
| .bubble p { margin-bottom: 12px; } | |
| .bubble p:last-child { margin-bottom: 0; } | |
| .bubble code { font-family: var(--font-mono); background: rgba(0,0,0,0.05); padding: 3px 6px; border-radius: 6px; font-size: 0.85em; color: #e83e8c; } | |
| .msg.user .bubble code { background: rgba(255,255,255,0.2); color: #fff; } | |
| .bubble img { max-width: 100%; border-radius: 12px; margin: 10px 0; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); } | |
| .bubble pre { background: #1d1d1f; color: #fff; padding: 16px; border-radius: 12px; overflow-x: auto; margin: 10px 0;} | |
| .bubble pre code { background: transparent; color: #fff; padding: 0;} | |
| /* ========================================================================== | |
| CODE GENERATING UI (नया फीचर: "Generating Code...") | |
| ========================================================================== */ | |
| .streaming-code-wrapper { background: #1d1d1f; border-radius: 12px; border: 1px solid #333; overflow: hidden; margin: 10px 0; box-shadow: var(--shadow-md); } | |
| .streaming-code-header { background: #2d2d30; padding: 10px 16px; font-size: 13px; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #444; font-family: var(--font-mono); } | |
| .loader-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #FF9933; border-radius: 50%; animation: spin 1s linear infinite; } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .streaming-code-wrapper pre { margin: 0; background: transparent; border-radius: 0; } | |
| /* Final Workspace Trigger Card */ | |
| .ws-trigger-card { background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 12px; padding: 16px; margin: 12px 0; display: flex; align-items: center; justify-content: space-between; box-shadow: inset 0 1px 2px rgba(255,255,255,0.5); } | |
| .ws-trigger-info { display: flex; align-items: center; gap: 12px; } | |
| .ws-trigger-icon { width: 44px; height: 44px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); } | |
| .ws-trigger-text h4 { font-size: 14px; font-weight: 600; margin-bottom: 2px; } | |
| .ws-trigger-text p { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); text-transform: uppercase; } | |
| .ws-btn { padding: 8px 16px; background: var(--text-main); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; } | |
| .ws-btn:hover { transform: scale(1.05); background: var(--accent); } | |
| /* Typing & Cursor */ | |
| .blinking-cursor { display: inline-block; width: 8px; height: 16px; background: var(--accent); margin-left: 4px; animation: blink 1s step-end infinite; vertical-align: middle; } | |
| @keyframes blink { 50% { opacity: 0; } } | |
| .typing { display: flex; align-items: center; gap: 6px; padding: 4px; } | |
| .typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); opacity: 0.4; animation: bounce 1.4s infinite ease-in-out both; } | |
| .typing span:nth-child(1) { animation-delay: -0.32s; } | |
| .typing span:nth-child(2) { animation-delay: -0.16s; } | |
| @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } | |
| /* Scroll to Bottom */ | |
| .scroll-bottom-btn { position: absolute; bottom: 120px; left: 50%; width: 44px; height: 44px; border-radius: 50%; background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--border-light); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; color: var(--text-main); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 20; } | |
| .scroll-bottom-btn.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } | |
| .scroll-bottom-btn:hover { background: #fff; transform: translateX(-50%) translateY(-3px); box-shadow: var(--shadow-lg); } | |
| /* ========================================================================== | |
| INPUT AREA & ATTACHMENT MENU (इनपुट और फाइल अटैचमेंट) | |
| ========================================================================== */ | |
| .input-container { flex-shrink: 0; padding: 10px 40px 24px; background: var(--bg-color); border-top: 1px solid var(--border-light); position: relative; z-index: 20; } | |
| .input-wrap { display: flex; flex-direction: column; background: var(--glass-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--border-light); border-radius: 24px; box-shadow: var(--shadow-md); transition: box-shadow 0.3s, border-color 0.3s; } | |
| .input-wrap:focus-within { border-color: var(--border-focus); box-shadow: 0 12px 40px rgba(0,0,0,0.1), 0 0 0 3px rgba(255,153,51,0.1); } | |
| .img-prev-inline { display: none; padding: 12px 20px 0; align-items: center; gap: 12px; } | |
| .img-prev-inline.show { display: flex; animation: fadeIn 0.3s; } | |
| .inline-th { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-light); display: flex; justify-content: center; align-items: center; background: #f0f0f0; font-size: 20px; } | |
| .inline-info { flex: 1; } | |
| .inline-nm { font-size: 12px; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } | |
| .inline-rm { background: rgba(0,0,0,0.05); border: none; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } | |
| .inline-rm:hover { background: #ff3b30; color: #fff; } | |
| .input-row { display: flex; align-items: flex-end; gap: 12px; padding: 12px 16px 12px 20px; } | |
| .chat-ta { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: 15px; color: var(--text-main); line-height: 1.5; resize: none; max-height: 150px; min-height: 24px; padding: 8px 0; } | |
| .chat-ta::placeholder { color: var(--text-muted); } | |
| /* Gemini Style Attachment Menu */ | |
| .attach-wrapper { position: relative; } | |
| .attach-btn { width: 38px; height: 38px; border-radius: 12px; background: transparent; border: 1px solid transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: all 0.2s; position: relative; overflow: hidden; padding-bottom: 4px; } | |
| .attach-btn:hover { background: rgba(0,0,0,0.04); color: var(--text-main); } | |
| .attach-btn svg { width: 20px; height: 20px; } | |
| .attach-menu { position: absolute; bottom: 50px; left: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-light); border-radius: 16px; padding: 8px; box-shadow: var(--shadow-lg); display: none; flex-direction: column; gap: 4px; z-index: 100; min-width: 160px; transform: translateY(10px); opacity: 0; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } | |
| .attach-menu.show { display: flex; transform: translateY(0); opacity: 1; } | |
| .attach-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text-main); transition: background 0.2s; } | |
| .attach-menu-item:hover { background: rgba(0,0,0,0.05); } | |
| .attach-menu-item span.icon { font-size: 16px; } | |
| /* Hidden Inputs */ | |
| .hidden-file-input { display: none; } | |
| .voice-btn.recording { color: #ff3b30; animation: pulseRecord 1.5s infinite; } | |
| @keyframes pulseRecord { 0% { background: rgba(255,59,48,0.1); } 50% { background: rgba(255,59,48,0.3); } 100% { background: rgba(255,59,48,0.1); } } | |
| .send-btn { width: 42px; height: 42px; border-radius: 14px; border: none; background: linear-gradient(135deg, #FF9933 0%, #ffffff 50%, #138808 100%); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } | |
| .send-btn svg { width: 18px; height: 18px; fill: #1d1d1f; transition: transform 0.2s; } | |
| .send-btn:hover { box-shadow: 0 6px 16px rgba(255,153,51,0.3); transform: translate(2px, -2px); } | |
| .send-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(100%); transform: none; } | |
| .input-hint { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 12px; font-weight: 500; } | |
| /* ========================================================================== | |
| WORKSPACE PANEL (कोड वर्कस्पेस) | |
| ========================================================================== */ | |
| .ws-hdr { padding: 14px 20px; border-bottom: 1px solid var(--border-light); background: #fff; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } | |
| .ws-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; } | |
| .ws-actions { display: flex; gap: 8px; } | |
| .ws-icon-btn { padding: 6px 12px; border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--border-light); cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--text-main); transition: all 0.2s; font-size: 12px; font-weight: 600; } | |
| .ws-icon-btn:hover { background: #e5e5ea; } | |
| .ws-close { padding: 6px; background: transparent; border-color: transparent; } | |
| .ws-close:hover { color: #ff3b30; background: #fff0f0; } | |
| .ws-content { flex: 1; overflow-y: auto; background: #fafafa; padding: 20px; } | |
| /* Modified workspace pre styling to match Highlight.js dark theme better if needed, | |
| but since background is #fafafa, we need a dark box for code */ | |
| .ws-content pre { margin: 0; padding: 20px; background: #0d1117; border: 1px solid var(--border-light); border-radius: 12px; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; overflow-x: auto; box-shadow: var(--shadow-sm); color: #c9d1d9;} | |
| /* ========================================================================== | |
| AUTH MODAL (लॉगिन सिस्टम) | |
| ========================================================================== */ | |
| .modal-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 5000; display: none; justify-content: center; align-items: center; animation: fadeIn 0.3s ease; } | |
| .modal-card { background: #fff; padding: 32px 36px; border-radius: 24px; width: 90%; max-width: 420px; border: 1px solid var(--border-light); box-shadow: var(--shadow-lg); position: relative; } | |
| .close-modal { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 24px; color: var(--text-muted); cursor: pointer; transition: 0.2s; } | |
| .close-modal:hover { color: var(--text-main); transform: rotate(90deg); } | |
| .auth-header { text-align: center; margin-bottom: 24px; } | |
| .auth-header h2 { font-family: var(--font-sans); font-size: 24px; font-weight: 800; color: var(--text-main); } | |
| .auth-tabs { display: flex; background: var(--bg-secondary); padding: 4px; border-radius: 12px; margin-bottom: 24px; } | |
| .auth-tab { flex: 1; padding: 10px; text-align: center; border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: 0.3s; } | |
| .auth-tab.active { background: #fff; color: var(--text-main); box-shadow: var(--shadow-sm); } | |
| .auth-step { display: none; flex-direction: column; animation: slideIn 0.3s ease; } | |
| .auth-step.active { display: flex; } | |
| .input-group { margin-bottom: 16px; } | |
| .modal-card input { width: 100%; padding: 14px 16px; border: 1px solid var(--border-light); border-radius: 12px; font-size: 15px; outline: none; background: #fafafa; transition: 0.3s; font-family: var(--font-sans); } | |
| .modal-card input:focus { border-color: var(--text-main); background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } | |
| .primary-btn { width: 100%; padding: 14px; background: var(--text-main); color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.2s; margin-top: 8px; } | |
| .primary-btn:hover { background: #333; transform: translateY(-2px); box-shadow: var(--shadow-sm); } | |
| .secondary-btn { width: 100%; padding: 12px; background: transparent; color: var(--text-muted); border: none; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 4px; } | |
| .secondary-btn:hover { color: var(--text-main); } | |
| /* ========================================================================== | |
| MOBILE RESPONSIVENESS (मोबाइल लेआउट) | |
| ========================================================================== */ | |
| @media(max-width:850px){ | |
| .sidebar { position: absolute; left: -280px; z-index: 100; height: 100%; transition: left 0.3s ease; } | |
| .sidebar.show { left: 0; box-shadow: var(--shadow-lg); } | |
| .mobile-menu-btn { display: block; } | |
| .close-sidebar-btn { display: block; } | |
| .workspace.open { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; } | |
| .messages { padding: 20px; } | |
| .input-container { padding: 10px 15px 15px; } | |
| .msg { max-width: 95%; } | |
| .scroll-bottom-btn { bottom: 110px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- TOAST NOTIFICATION --> | |
| <div id="toast-container"></div> | |
| <!-- GET STARTED WELCOME OVERLAY --> | |
| <div class="welcome-overlay" id="welcomeOverlay"> | |
| <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo"> | |
| <h1>Welcome to Arjun 2.O</h1> | |
| <p>Developed by Abhay Kumar. Experience advanced reasoning, secure workspace coding, and high-quality image generation in one place.</p> | |
| <button class="start-btn" onclick="startArjunApp()">Get Started</button> | |
| </div> | |
| <!-- BACKGROUND ANIMATION --> | |
| <div class="bg"><div class="orb orb1"></div><div class="orb orb2"></div></div> | |
| <div class="shell"> | |
| <!-- SIDEBAR --> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="logo-area"> | |
| <div class="logo-row"> | |
| <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo" class="logo-img"> | |
| <div class="logo-text"> | |
| <div class="logo-name">ARJUN 2.O</div> | |
| <div class="logo-sub">Advanced Edition</div> | |
| </div> | |
| </div> | |
| <button class="close-sidebar-btn" onclick="toggleSidebar()">✕</button> | |
| </div> | |
| <div class="auth-block"> | |
| <button id="loginPromptBtn" class="login-prompt-btn" onclick="openAuthModal()">🔒 Secure Login</button> | |
| <div id="userProfile" class="user-profile"> | |
| <div class="user-avatar" id="uAvatar">U</div> | |
| <div class="user-email" id="uEmail">user@email.com</div> | |
| <button class="logout-btn" onclick="logout()" title="Logout">🚪</button> | |
| </div> | |
| </div> | |
| <div class="settings"> | |
| <div class="brand-box"> | |
| <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Identity"> | |
| <h3>Arjun 2.O</h3> | |
| <p>DEVELOPED BY ABHAY KUMAR</p> | |
| </div> | |
| <button class="clear-btn" onclick="clearMemory()">🗑️ Clear Chat Memory</button> | |
| </div> | |
| </aside> | |
| <!-- MAIN CHAT AREA --> | |
| <div class="main-wrapper"> | |
| <main class="chat-main" id="chatMain"> | |
| <header class="chat-hdr"> | |
| <button class="mobile-menu-btn" onclick="toggleSidebar()">☰</button> | |
| <div class="model-badge"> | |
| <div class="status-dot"></div> | |
| Arjun Intelligence | |
| </div> | |
| <div style="width:24px;"></div> | |
| </header> | |
| <div class="messages" id="msgs" onscroll="checkScroll()"> | |
| <!-- Welcome Screen inside Chat --> | |
| <div class="welcome" id="welcome"> | |
| <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo" class="welcome-logo"> | |
| <div class="welcome-title">Welcome, User!</div> | |
| <div class="welcome-sub">I am Arjun 2.O, developed by Abhay Kumar. I am equipped with advanced intelligence, workspace coding, and image generation.</div> | |
| <div id="guestBadge" class="guest-badge">Guest Mode: <span id="guestCountDisplay">0</span>/3 Queries Used.</div> | |
| <div class="ex-grid"> | |
| <div class="ex-card" onclick="sendEx('Write a python script for a simple HTTP server. Provide the code.')"> | |
| <div class="ex-title">💻 Code Generation</div> | |
| <div class="ex-desc">Generate secure, workspace-ready code</div> | |
| </div> | |
| <div class="ex-card" onclick="sendEx('Create an image of a futuristic Indian city with flying cars, highly detailed, 8k resolution.')"> | |
| <div class="ex-title">🎨 Generate Images</div> | |
| <div class="ex-desc">Stunning visuals using Pollinations AI</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="scroll-bottom-btn" id="scrollBtn" onclick="forceScrollDown()"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M19 12l-7 7-7-7"/></svg> | |
| </button> | |
| <!-- INPUT CONTAINER --> | |
| <div class="input-container"> | |
| <div class="input-wrap"> | |
| <div class="img-prev-inline" id="imgPrev"> | |
| <img class="inline-th" id="imgThumb" src="" style="display:none;"> | |
| <div class="inline-th" id="fileIcon" style="display:none;">📄</div> | |
| <div class="inline-info"> | |
| <div class="inline-nm" id="imgName">file.txt</div> | |
| </div> | |
| <button class="inline-rm" onclick="removeImg()">✕</button> | |
| </div> | |
| <div class="input-row"> | |
| <!-- GEMINI STYLE ATTACHMENT MENU --> | |
| <div class="attach-wrapper"> | |
| <button class="attach-btn" id="attachToggleBtn" onclick="toggleAttachMenu()" title="Attach File"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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="attach-menu" id="attachMenu"> | |
| <div class="attach-menu-item" onclick="triggerInput('image')"><span class="icon">🖼️</span> Image</div> | |
| <div class="attach-menu-item" onclick="triggerInput('video')"><span class="icon">🎥</span> Video</div> | |
| <div class="attach-menu-item" onclick="triggerInput('audio')"><span class="icon">🎵</span> Audio</div> | |
| <div class="attach-menu-item" onclick="triggerInput('document')"><span class="icon">📄</span> Document / Code</div> | |
| </div> | |
| <!-- Hidden Inputs for strict validation --> | |
| <input type="file" id="inp-image" class="hidden-file-input" accept="image/*" onchange="handleSpecificFile(this, 'image')"> | |
| <input type="file" id="inp-video" class="hidden-file-input" accept="video/*" onchange="handleSpecificFile(this, 'video')"> | |
| <input type="file" id="inp-audio" class="hidden-file-input" accept="audio/*" onchange="handleSpecificFile(this, 'audio')"> | |
| <!-- Accept all major document and code extensions --> | |
| <input type="file" id="inp-document" class="hidden-file-input" accept=".pdf,.doc,.docx,.txt,.md,.csv,.json,.py,.js,.html,.css,.cpp,.c,.java" onchange="handleSpecificFile(this, 'document')"> | |
| </div> | |
| <!-- Voice Input Mic (Smart Punctuation & Hindi/English) --> | |
| <button class="attach-btn voice-btn" id="voiceBtn" onclick="toggleVoice()" title="Voice Input"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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> | |
| <textarea class="chat-ta" id="chatInput" placeholder="Message Arjun 2.O..." rows="1" onkeydown="handleKey(event)" oninput="autoGrow(this)"></textarea> | |
| <button class="send-btn" id="sendBtn" onclick="sendMsg()"> | |
| <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="input-hint">Arjun 2.O is engineered for extreme performance. Developed by Abhay Kumar.</div> | |
| </div> | |
| </main> | |
| <!-- WORKSPACE PANEL --> | |
| <aside class="workspace" id="workspace"> | |
| <div class="ws-hdr"> | |
| <div class="ws-title"><span>💻</span><span id="wsTitleText">Generated Code</span></div> | |
| <div class="ws-actions"> | |
| <button class="ws-icon-btn" onclick="copyWorkspaceCode(this)" id="wsCopyBtn">📋 Copy</button> | |
| <button class="ws-icon-btn ws-close" onclick="closeWorkspace()" title="Close">✕</button> | |
| </div> | |
| </div> | |
| <div class="ws-content"> | |
| <!-- Syntax highlighted code block will appear here --> | |
| <pre><code id="wsCodeBlock" class="hljs"></code></pre> | |
| </div> | |
| </aside> | |
| </div> | |
| </div> | |
| <!-- AUTH MODAL (GAS) --> | |
| <div class="modal-overlay" id="authModal"> | |
| <div class="modal-card"> | |
| <button class="close-modal" onclick="closeAuthModal()">✕</button> | |
| <div class="auth-header"><h2>Arjun Network</h2></div> | |
| <div class="auth-tabs"> | |
| <div class="auth-tab active" id="tab-login" onclick="switchAuthTab('login')">Login</div> | |
| <div class="auth-tab" id="tab-register" onclick="switchAuthTab('register')">Register</div> | |
| </div> | |
| <!-- Login Form --> | |
| <div id="flow-login"> | |
| <div class="auth-step active" id="log-step-1"> | |
| <div class="input-group"><input type="email" id="logEmail" placeholder="Registered Email"></div> | |
| <button class="primary-btn" id="btn-log-otp" onclick="processAuth('login_send_otp')">Get Secure OTP</button> | |
| </div> | |
| <div class="auth-step" id="log-step-2"> | |
| <div class="input-group"><input type="number" id="logOTP" placeholder="Enter OTP"></div> | |
| <button class="primary-btn" id="btn-log-verify" onclick="processAuth('login_verify')">Verify & Login</button> | |
| <button class="secondary-btn" onclick="switchAuthStep('log-step-2', 'log-step-1')">Back</button> | |
| </div> | |
| </div> | |
| <!-- Register Form --> | |
| <div id="flow-register" style="display:none;"> | |
| <div class="auth-step active" id="reg-step-1"> | |
| <div class="input-group"><input type="text" id="regName" placeholder="Full Name"></div> | |
| <div class="input-group"><input type="email" id="regEmail" placeholder="Email Address"></div> | |
| <button class="primary-btn" id="btn-reg-otp" onclick="processAuth('register_send_otp')">Send OTP</button> | |
| </div> | |
| <div class="auth-step" id="reg-step-2"> | |
| <div class="input-group"><input type="number" id="regOTP" placeholder="Enter Verification OTP"></div> | |
| <button class="primary-btn" id="btn-reg-verify" onclick="processAuth('register_verify')">Create Account</button> | |
| <button class="secondary-btn" onclick="switchAuthStep('reg-step-2', 'reg-step-1')">Back</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| /* ========================================================================== | |
| GLOBAL VARIABLES & CONFIGURATION (वैश्विक चर) | |
| ========================================================================== */ | |
| // PDF.JS Worker setup for PDF extraction | |
| pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js'; | |
| const GAS_URL = "https://script.google.com/macros/s/AKfycbzTsXGoVh97JjtFAAG825GF4WUZqf7FDB3Zbxyf0nrLXt_1HjJSSqA829UcdoamRPvg0A/exec"; | |
| const LOGO_URL = "https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png"; | |
| let currentUser = localStorage.getItem('arjun_user'); | |
| let guestCount = parseInt(localStorage.getItem('arjun_guest') || '0'); | |
| window.isStreamingGlobalFlag = false; | |
| // State management object | |
| const S = { | |
| history: [], | |
| pending: null, | |
| busy: false, | |
| isUserScrolling: false, | |
| codeBlocks: [], | |
| currentWorkspaceId: null | |
| }; | |
| /* ========================================================================== | |
| INITIALIZATION (शुरुआती प्रक्रिया) | |
| ========================================================================== */ | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Show welcome overlay only once | |
| if(!localStorage.getItem('arjun_welcome_seen')) { | |
| document.getElementById('welcomeOverlay').style.display = 'flex'; | |
| } else { | |
| document.getElementById('welcomeOverlay').style.display = 'none'; | |
| } | |
| updateAuthUI(); | |
| // Fetch cloud history if user is logged in | |
| if(currentUser) { | |
| fetchHistoryFromGAS(); | |
| } else { | |
| document.getElementById('guestBadge').style.display = 'inline-block'; | |
| document.getElementById('guestCountDisplay').innerText = guestCount; | |
| } | |
| // Initialize Speech Synthesis Voices (so it's ready when needed) | |
| if('speechSynthesis' in window) { | |
| window.speechSynthesis.getVoices(); | |
| window.speechSynthesis.onvoiceschanged = function() { | |
| window.speechSynthesis.getVoices(); | |
| }; | |
| } | |
| }); | |
| function startArjunApp() { | |
| const overlay = document.getElementById('welcomeOverlay'); | |
| overlay.classList.add('hidden'); | |
| localStorage.setItem('arjun_welcome_seen', 'true'); | |
| setTimeout(() => { overlay.style.display = 'none'; }, 400); | |
| } | |
| function toggleSidebar() { document.getElementById('sidebar').classList.toggle('show'); } | |
| function showToast(msg) { | |
| const container = document.getElementById('toast-container'); | |
| const t = document.createElement('div'); t.className = 'toast'; t.innerText = msg; | |
| container.appendChild(t); | |
| setTimeout(() => t.remove(), 3000); | |
| } | |
| /* ========================================================================== | |
| ROBUST COPY FUNCTIONALITY (मजबूत कॉपी फंक्शन - NO COMPROMISE) | |
| ========================================================================== */ | |
| // Fallback method for devices/browsers that restrict navigator.clipboard | |
| function fallbackCopyTextToClipboard(text, btn) { | |
| var textArea = document.createElement("textarea"); | |
| textArea.value = text; | |
| // Avoid scrolling to bottom | |
| textArea.style.top = "0"; | |
| textArea.style.left = "0"; | |
| textArea.style.position = "fixed"; | |
| document.body.appendChild(textArea); | |
| textArea.focus(); | |
| textArea.select(); | |
| try { | |
| var successful = document.execCommand('copy'); | |
| if(successful) { | |
| const orig = btn.innerHTML; | |
| btn.innerHTML = "✓ Copied"; | |
| setTimeout(() => btn.innerHTML = orig, 2000); | |
| } else { | |
| showToast("Failed to copy using fallback!"); | |
| } | |
| } catch (err) { | |
| showToast("Error copying text!"); | |
| console.error('Fallback: Oops, unable to copy', err); | |
| } | |
| document.body.removeChild(textArea); | |
| } | |
| // Main copy function called from UI | |
| function copyText(btn, text) { | |
| // If modern clipboard API is not available or we are in restricted iframe | |
| if (!navigator.clipboard) { | |
| fallbackCopyTextToClipboard(text, btn); | |
| return; | |
| } | |
| // Try modern API | |
| navigator.clipboard.writeText(text).then(function() { | |
| const orig = btn.innerHTML; | |
| btn.innerHTML = "✓ Copied"; | |
| setTimeout(() => btn.innerHTML = orig, 2000); | |
| }, function(err) { | |
| // If modern API fails (e.g. permission denied), use fallback | |
| console.warn('Async: Could not copy text, using fallback: ', err); | |
| fallbackCopyTextToClipboard(text, btn); | |
| }); | |
| } | |
| function copyWorkspaceCode(btn) { | |
| if(S.currentWorkspaceId !== null) { | |
| const codeText = S.codeBlocks[S.currentWorkspaceId].code; | |
| copyText(btn, codeText); | |
| } | |
| } | |
| /* ========================================================================== | |
| TEXT TO SPEECH: MICROSOFT EDGE (Prabhat Neural) | |
| ========================================================================== */ | |
| function speakText(text) { | |
| if (!('speechSynthesis' in window)) { | |
| showToast("Text-to-Speech not supported in this browser."); | |
| return; | |
| } | |
| // Cancel any ongoing speech | |
| window.speechSynthesis.cancel(); | |
| // Clean markdown symbols from text before speaking | |
| let cleanText = text.replace(/[*_~`#]/g, '').replace(/<[^>]*>?/gm, ''); | |
| let utterance = new SpeechSynthesisUtterance(cleanText); | |
| // Default language setting | |
| utterance.lang = 'hi-IN'; | |
| utterance.rate = 1.0; | |
| utterance.pitch = 1.0; | |
| let voices = window.speechSynthesis.getVoices(); | |
| // 1. Search for Microsoft Prabhat Neural explicitly | |
| let bestVoice = voices.find(v => v.name.includes('Prabhat') && v.name.includes('Neural')); | |
| // 2. Fallback: Search for any Hindi Neural voice | |
| if(!bestVoice) { | |
| bestVoice = voices.find(v => v.lang.includes('hi') && v.name.includes('Neural')); | |
| } | |
| // 3. Fallback: Any Hindi Voice | |
| if(!bestVoice) { | |
| bestVoice = voices.find(v => v.lang.includes('hi-IN')); | |
| } | |
| if (bestVoice) { | |
| utterance.voice = bestVoice; | |
| console.log("Using TTS Voice:", bestVoice.name); | |
| } else { | |
| console.log("Prabhat/Hindi voice not found. Using default system voice."); | |
| } | |
| window.speechSynthesis.speak(utterance); | |
| showToast("🔊 Playing Audio..."); | |
| } | |
| /* ========================================================================== | |
| SMART VOICE RECOGNITION (वॉइस टाइपिंग) | |
| ========================================================================== */ | |
| const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; | |
| let recognition = null; | |
| let isRecording = false; | |
| if (SpeechRecognition) { | |
| recognition = new SpeechRecognition(); | |
| recognition.continuous = false; | |
| recognition.interimResults = false; | |
| // 'hi-IN' correctly captures pure Hindi in Devanagari and English words dynamically. | |
| recognition.lang = 'hi-IN'; | |
| recognition.onstart = () => { | |
| isRecording = true; | |
| document.getElementById('voiceBtn').classList.add('recording'); | |
| }; | |
| recognition.onresult = (event) => { | |
| let transcript = ''; | |
| for (let i = event.resultIndex; i < event.results.length; ++i) { | |
| transcript += event.results[i][0].transcript; | |
| } | |
| transcript = transcript.trim(); | |
| if(transcript.length > 0) { | |
| // Capitalize first letter | |
| transcript = transcript.charAt(0).toUpperCase() + transcript.slice(1); | |
| // Add punctuation if missing | |
| if (!/[.!?।]$/.test(transcript)) transcript += '.'; | |
| transcript += ' '; | |
| } | |
| const inp = document.getElementById('chatInput'); | |
| inp.value = (inp.value + ' ' + transcript).trim(); | |
| autoGrow(inp); | |
| }; | |
| recognition.onend = () => { | |
| isRecording = false; | |
| document.getElementById('voiceBtn').classList.remove('recording'); | |
| }; | |
| recognition.onerror = (event) => { | |
| showToast("Voice recognition failed: " + event.error); | |
| isRecording = false; | |
| document.getElementById('voiceBtn').classList.remove('recording'); | |
| }; | |
| } | |
| function toggleVoice() { | |
| if(!recognition) return showToast("Voice input not supported in this browser."); | |
| if(isRecording) recognition.stop(); else recognition.start(); | |
| } | |
| /* ========================================================================== | |
| AUTHENTICATION & HISTORY (लॉगिन और डेटा सिंक) | |
| ========================================================================== */ | |
| function updateAuthUI() { | |
| if (currentUser) { | |
| document.getElementById('loginPromptBtn').style.display = 'none'; | |
| document.getElementById('userProfile').style.display = 'flex'; | |
| document.getElementById('uEmail').innerText = currentUser; | |
| document.getElementById('uAvatar').innerText = currentUser.charAt(0).toUpperCase(); | |
| document.getElementById('guestBadge').style.display = 'none'; | |
| } else { | |
| document.getElementById('loginPromptBtn').style.display = 'flex'; | |
| document.getElementById('userProfile').style.display = 'none'; | |
| } | |
| } | |
| function openAuthModal() { document.getElementById('authModal').style.display = 'flex'; } | |
| function closeAuthModal() { document.getElementById('authModal').style.display = 'none'; } | |
| function switchAuthTab(tab) { | |
| document.querySelectorAll('.auth-tab').forEach(e => e.classList.remove('active')); | |
| document.getElementById(`tab-${tab}`).classList.add('active'); | |
| document.getElementById('flow-login').style.display = tab === 'login' ? 'block' : 'none'; | |
| document.getElementById('flow-register').style.display = tab === 'register' ? 'block' : 'none'; | |
| } | |
| function switchAuthStep(curr, next) { | |
| document.getElementById(curr).classList.remove('active'); | |
| document.getElementById(next).classList.add('active'); | |
| } | |
| async function processAuth(action) { | |
| let payload = { action }; let btnId = ''; | |
| if (action === 'register_send_otp') { | |
| payload.name = document.getElementById('regName').value.trim(); | |
| payload.email = document.getElementById('regEmail').value.trim(); | |
| payload.phone = "0000000000"; payload.organization = "Arjun Compound"; | |
| if(!payload.email || !payload.name) return showToast("Name and Email required."); | |
| btnId = 'btn-reg-otp'; | |
| } else if (action === 'login_send_otp') { | |
| payload.email = document.getElementById('logEmail').value.trim(); | |
| if(!payload.email) return showToast("Enter email first."); | |
| btnId = 'btn-log-otp'; | |
| } else if (action === 'register_verify' || action === 'login_verify') { | |
| payload.email = document.getElementById(action === 'register_verify' ? 'regEmail' : 'logEmail').value.trim(); | |
| payload.otp = document.getElementById(action === 'register_verify' ? 'regOTP' : 'logOTP').value.trim(); | |
| if(!payload.otp) return showToast("Enter OTP!"); | |
| btnId = action === 'register_verify' ? 'btn-reg-verify' : 'btn-log-verify'; | |
| } | |
| const btn = document.getElementById(btnId); const ogText = btn.innerHTML; | |
| btn.disabled = true; btn.innerText = 'Processing...'; | |
| try { | |
| const res = await fetch(GAS_URL, { method: 'POST', body: JSON.stringify(payload) }); | |
| const data = await res.json(); | |
| if (data.status === 'success') { | |
| showToast(data.message); | |
| if (action === 'register_send_otp') switchAuthStep('reg-step-1', 'reg-step-2'); | |
| else if (action === 'login_send_otp') switchAuthStep('log-step-1', 'log-step-2'); | |
| else if (action === 'register_verify' || action === 'login_verify') { | |
| currentUser = payload.email; | |
| localStorage.setItem('arjun_user', currentUser); | |
| closeAuthModal(); updateAuthUI(); fetchHistoryFromGAS(); | |
| } | |
| } else { | |
| showToast(data.message); | |
| } | |
| } catch (e) { | |
| showToast("Network Error."); | |
| } | |
| btn.disabled = false; btn.innerHTML = ogText; | |
| } | |
| function logout() { localStorage.removeItem('arjun_user'); location.reload(); } | |
| async function clearMemory() { | |
| if(currentUser) { | |
| showToast("Clearing Cloud History..."); | |
| await fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: "delete_history", email: currentUser }) }); | |
| } | |
| location.reload(); | |
| } | |
| async function fetchHistoryFromGAS() { | |
| const m = document.getElementById('msgs'); | |
| document.getElementById('welcome').style.display = 'none'; | |
| m.innerHTML = '<div style="text-align:center; padding:40px; color:var(--text-muted);">Syncing Secure Data...</div>'; | |
| try { | |
| const res = await fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: "get_history", email: currentUser }) }); | |
| const data = await res.json(); | |
| m.innerHTML = ''; | |
| if (data.status === 'success' && data.historyJSON !== "[]") { | |
| S.history = JSON.parse(data.historyJSON); | |
| S.history.forEach(msg => { | |
| if(msg.role === 'user') appendUserDOM(msg.content, msg.badge); | |
| else { | |
| window.isStreamingGlobalFlag = false; | |
| appendBotDOM(msg.content, true); | |
| } | |
| }); | |
| setTimeout(forceScrollDown, 100); | |
| } else { | |
| document.getElementById('welcome').style.display = 'flex'; | |
| } | |
| } catch(e) { | |
| m.innerHTML = ''; document.getElementById('welcome').style.display = 'flex'; | |
| } | |
| } | |
| function syncHistory() { | |
| if(currentUser) { | |
| fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: "save_history", email: currentUser, historyJSON: JSON.stringify(S.history) }) }); | |
| } | |
| } | |
| /* ========================================================================== | |
| ATTACHMENT SYSTEM (मल्टीमॉडल फाइल सपोर्ट) | |
| ========================================================================== */ | |
| function toggleAttachMenu() { | |
| const menu = document.getElementById('attachMenu'); | |
| menu.classList.toggle('show'); | |
| } | |
| // Close attachment menu if clicked outside | |
| document.addEventListener('click', function(event) { | |
| const wrapper = document.querySelector('.attach-wrapper'); | |
| if (!wrapper.contains(event.target)) { | |
| document.getElementById('attachMenu').classList.remove('show'); | |
| } | |
| }); | |
| // Trigger hidden file inputs | |
| function triggerInput(type) { | |
| document.getElementById('attachMenu').classList.remove('show'); | |
| document.getElementById('inp-' + type).click(); | |
| } | |
| async function handleSpecificFile(input, expectedType) { | |
| const file = input.files[0]; if(!file) return; | |
| const fileName = file.name.toLowerCase(); | |
| const fileMime = file.type; | |
| // 1. STRICT FORMAT VALIDATION (सख्त जांच) | |
| if (expectedType === 'image' && !fileMime.startsWith('image/')) { | |
| showToast("Invalid Format! Please select an Image file."); input.value=''; return; | |
| } | |
| if (expectedType === 'video' && !fileMime.startsWith('video/')) { | |
| showToast("Invalid Format! Please select a Video file."); input.value=''; return; | |
| } | |
| if (expectedType === 'audio' && !fileMime.startsWith('audio/')) { | |
| showToast("Invalid Format! Please select an Audio file."); input.value=''; return; | |
| } | |
| // Setup UI for file preview | |
| document.getElementById('imgThumb').style.display = 'none'; | |
| document.getElementById('fileIcon').style.display = 'none'; | |
| document.getElementById('imgName').textContent = file.name; | |
| document.getElementById('imgPrev').classList.add('show'); | |
| showToast(`Processing ${file.name}...`); | |
| const reader = new FileReader(); | |
| // 2. PROCESS IMAGE | |
| if (expectedType === 'image') { | |
| reader.onload = e => { | |
| S.pending = { type: 'image', data: e.target.result.split(',')[1], name: file.name }; | |
| document.getElementById('imgThumb').src = e.target.result; | |
| document.getElementById('imgThumb').style.display = 'flex'; | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| // 3. PROCESS VIDEO / AUDIO (Send directly as Base64 to Model API) | |
| else if (expectedType === 'video' || expectedType === 'audio') { | |
| reader.onload = e => { | |
| S.pending = { type: expectedType, data: e.target.result.split(',')[1], name: file.name }; | |
| document.getElementById('fileIcon').textContent = expectedType === 'video' ? '🎥' : '🎵'; | |
| document.getElementById('fileIcon').style.display = 'flex'; | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| // 4. PROCESS DOCUMENTS & CODE (Extract Text) | |
| else if (expectedType === 'document') { | |
| document.getElementById('fileIcon').textContent = '📄'; | |
| document.getElementById('fileIcon').style.display = 'flex'; | |
| // A. PDF Extraction | |
| if (fileName.endsWith('.pdf')) { | |
| reader.onload = async function() { | |
| try { | |
| const typedarray = new Uint8Array(this.result); | |
| const pdf = await pdfjsLib.getDocument(typedarray).promise; | |
| let fullText = ""; | |
| for (let i = 1; i <= pdf.numPages; i++) { | |
| const page = await pdf.getPage(i); | |
| const textContent = await page.getTextContent(); | |
| fullText += textContent.items.map(s => s.str).join(' ') + "\n"; | |
| } | |
| S.pending = { type: 'text', data: fullText.trim() || "No text found in PDF.", name: file.name }; | |
| showToast("PDF converted to text successfully!"); | |
| } catch (e) { | |
| showToast("Error parsing PDF."); removeImg(); | |
| } | |
| }; | |
| reader.readAsArrayBuffer(file); | |
| } | |
| // B. Word (.docx) Extraction | |
| else if (fileName.endsWith('.docx') || fileName.endsWith('.doc')) { | |
| reader.onload = async function() { | |
| try { | |
| const arrayBuffer = this.result; | |
| const result = await mammoth.extractRawText({arrayBuffer: arrayBuffer}); | |
| S.pending = { type: 'text', data: result.value.trim() || "No text found in DOCX.", name: file.name }; | |
| showToast("Word document converted to text!"); | |
| } catch(e) { | |
| showToast("Error parsing Word doc."); removeImg(); | |
| } | |
| }; | |
| reader.readAsArrayBuffer(file); | |
| } | |
| // C. HTML, Code, Text Extraction (Direct Read) | |
| else { | |
| reader.onload = e => { | |
| S.pending = { type: 'text', data: e.target.result, name: file.name }; | |
| showToast("Code/Text file attached and extracted!"); | |
| }; | |
| reader.readAsText(file); | |
| } | |
| } | |
| // Reset file input so same file can be selected again | |
| input.value = ''; | |
| } | |
| function removeImg(){ S.pending=null; document.getElementById('imgPrev').classList.remove('show'); } | |
| /* ========================================================================== | |
| UI UTILITIES (सुविधाजनक फंक्शन्स) | |
| ========================================================================== */ | |
| function handleKey(e){ if(e.key==='Enter'&&!e.shiftKey){ e.preventDefault(); sendMsg(); } } | |
| function autoGrow(el){ el.style.height='auto'; el.style.height=Math.min(el.scrollHeight,200)+'px'; } | |
| function checkScroll() { | |
| const m = document.getElementById('msgs'); | |
| const isAtBottom = Math.abs((m.scrollHeight - m.scrollTop) - m.clientHeight) < 80; | |
| S.isUserScrolling = !isAtBottom; | |
| const btn = document.getElementById('scrollBtn'); | |
| if(S.isUserScrolling) btn.classList.add('show'); else btn.classList.remove('show'); | |
| } | |
| function forceScrollDown(){ | |
| const m = document.getElementById('msgs'); | |
| m.scrollTo({top: m.scrollHeight, behavior: 'smooth'}); | |
| S.isUserScrolling = false; | |
| document.getElementById('scrollBtn').classList.remove('show'); | |
| } | |
| function autoScroll() { | |
| if(!S.isUserScrolling) { | |
| const m = document.getElementById('msgs'); | |
| m.scrollTop = m.scrollHeight; | |
| } | |
| } | |
| /* ========================================================================== | |
| WORKSPACE RENDERING & STREAMING UI (कोड वर्कस्पेस रेंडरर) | |
| ========================================================================== */ | |
| function openWorkspace(id) { | |
| S.currentWorkspaceId = id; | |
| const block = S.codeBlocks[id]; | |
| document.getElementById('wsTitleText').textContent = block.lang ? `Generated ${block.lang.toUpperCase()}` : "Generated Code"; | |
| const codeBlock = document.getElementById('wsCodeBlock'); | |
| codeBlock.className = `hljs language-${block.lang || 'plaintext'}`; | |
| codeBlock.textContent = block.code; | |
| hljs.highlightElement(codeBlock); | |
| document.getElementById('workspace').classList.add('open'); | |
| if(window.innerWidth <= 850) { | |
| document.getElementById('sidebar').classList.remove('show'); | |
| } | |
| } | |
| function closeWorkspace() { document.getElementById('workspace').classList.remove('open'); } | |
| // MARKED.JS Custom Renderer (handles 'Generating Code' UI logic) | |
| const renderer = new marked.Renderer(); | |
| renderer.code = function(token) { | |
| const codeText = typeof token === 'string' ? token : (token.text || ''); | |
| const language = typeof token === 'string' ? arguments[1] : (token.lang || ''); | |
| // NEW FEATURE: Gemini style "Generating Code..." UI while streaming | |
| if (window.isStreamingGlobalFlag) { | |
| return ` | |
| <div class="streaming-code-wrapper"> | |
| <div class="streaming-code-header"> | |
| <div class="loader-spinner"></div> | |
| Generating Code... | |
| </div> | |
| <pre><code class="language-${language}">${codeText.replace(/</g, '<').replace(/>/g, '>')}</code></pre> | |
| </div>`; | |
| } | |
| // When streaming stops, generate the Workspace View Button Card | |
| const id = S.codeBlocks.length; | |
| S.codeBlocks.push({ code: codeText, lang: language }); | |
| return ` | |
| <div class="ws-trigger-card"> | |
| <div class="ws-trigger-info"> | |
| <div class="ws-trigger-icon">💻</div> | |
| <div class="ws-trigger-text"> | |
| <h4>Code Generated</h4> | |
| <p>${language || 'Snippet'}</p> | |
| </div> | |
| </div> | |
| <button class="ws-btn" onclick="openWorkspace(${id})">View in Workspace</button> | |
| </div>`; | |
| }; | |
| marked.use({ renderer }); | |
| function parseThinking(raw) { | |
| const thinkRegex = /<think>([\s\S]*?)(<\/think>|$)/gi; | |
| let text = raw, thinkContent = ''; | |
| text = text.replace(thinkRegex, (match, p1) => { thinkContent += p1; return ''; }); | |
| return { mainText: text.trim(), thinkText: thinkContent.trim() }; | |
| } | |
| /* ========================================================================== | |
| MAIN CHAT CONTROLLER (मुख्य चैट लॉजिक) | |
| ========================================================================== */ | |
| async function sendMsg(){ | |
| if(S.busy)return; | |
| const inp = document.getElementById('chatInput'); | |
| const msg = inp.value.trim(); | |
| if(!msg && !S.pending) return; | |
| // Check Guest Limit | |
| if (!currentUser) { | |
| if (guestCount >= 3) { | |
| openAuthModal(); | |
| return showToast("Guest limit reached. Please Login."); | |
| } | |
| guestCount++; | |
| localStorage.setItem('arjun_guest', guestCount.toString()); | |
| document.getElementById('guestCountDisplay').innerText = guestCount; | |
| } | |
| inp.value=''; inp.style.height='auto'; | |
| document.getElementById('sendBtn').disabled=true; | |
| S.busy=true; | |
| const w = document.getElementById('welcome'); | |
| if(w) w.style.display='none'; | |
| let backendPayloadMsg = msg; | |
| let attachments = []; | |
| let badge = null; | |
| // Multi-modal attachment routing | |
| if(S.pending) { | |
| if(S.pending.type === 'text') { | |
| // PDF/DOC/Code extracted text | |
| backendPayloadMsg = `[Attached File Data: ${S.pending.name}]\n\n---FILE CONTENT START---\n${S.pending.data}\n---FILE CONTENT END---\n\nUser Question: ${msg}`; | |
| badge = '📄 '+S.pending.name; | |
| } else { | |
| // Raw Image/Audio/Video processing | |
| attachments.push({ type: S.pending.type, data: S.pending.data, name: S.pending.name }); | |
| const icon = S.pending.type === 'video' ? '🎥 ' : (S.pending.type === 'audio' ? '🎵 ' : '🖼️ '); | |
| badge = icon + S.pending.name; | |
| } | |
| appendUserDOM(msg || '[File Attached]', badge); | |
| S.history.push({role: 'user', content: backendPayloadMsg, badge: badge}); | |
| } else { | |
| appendUserDOM(msg); | |
| S.history.push({role: 'user', content: msg}); | |
| } | |
| removeImg(); | |
| syncHistory(); | |
| const botDiv = document.createElement('div');botDiv.className='msg bot'; | |
| botDiv.innerHTML=`<div class="avatar"><img src="${LOGO_URL}"></div><div class="body"><div class="bubble"><div class="typing"><span></span><span></span><span></span></div></div></div>`; | |
| document.getElementById('msgs').appendChild(botDiv); | |
| forceScrollDown(); | |
| // STRICT SYSTEM PROMPT (Bilingual & Pollinations support) | |
| const sysPrompt = `You are Arjun 2.O, a state-of-the-art AI assistant developed by Abhay Kumar. | |
| LANGUAGE PROTOCOL: You are fully bilingual. You MUST write and respond fluently in BOTH English and Hindi. | |
| 1. If the user asks in English, reply entirely in English. | |
| 2. If the user asks in Hindi, reply in Hindi. | |
| 3. If the user uses a mix (Hinglish), you can respond naturally in the same mixed tone. | |
| NEVER force Hindi when the user is speaking English. Always adapt dynamically to the user's language. | |
| CRITICAL IMAGE GENERATION PROTOCOL: | |
| If the user asks to generate, create, or draw an image/photo, you MUST generate the image by responding with a markdown image tag using Pollinations AI. | |
| Format to use:  | |
| Available models for {MODEL}: flux, flux-realism, flux-anime, flux-3d. | |
| Choose the best model based on the prompt. Example: if user says anime, use flux-anime. | |
| Always include this markdown tag when image generation is requested.`; | |
| // Stripping extra 'badge' property before sending to backend to avoid API errors | |
| const cleanHistory = S.history.slice(0, -1).map(item => ({ role: item.role, content: item.content })); | |
| const payload = { | |
| message: backendPayloadMsg, | |
| attachments: attachments, | |
| system_prompt: sysPrompt, | |
| history: cleanHistory, | |
| max_tokens: 4096, | |
| temperature: 0.7 | |
| }; | |
| try { | |
| const res = await fetch('/api/chat', { | |
| method: 'POST', | |
| headers: {'Content-Type': 'application/json'}, | |
| body: JSON.stringify(payload) | |
| }); | |
| if (!res.ok) throw new Error("Server error"); | |
| const reader = res.body.getReader(); | |
| const decoder = new TextDecoder(); | |
| let accumulatedText = ""; | |
| window.isStreamingGlobalFlag = true; | |
| while (true) { | |
| const { done, value } = await reader.read(); | |
| if (done) break; | |
| const chunk = decoder.decode(value, {stream: true}); | |
| const lines = chunk.split('\n'); | |
| for (let line of lines) { | |
| if (line.startsWith('data: ')) { | |
| const dataStr = line.substring(6); | |
| if (dataStr.trim() === '[DONE]') continue; | |
| try { | |
| const dataObj = JSON.parse(dataStr); | |
| if (dataObj.choices && dataObj.choices[0].delta.content) { | |
| accumulatedText += dataObj.choices[0].delta.content; | |
| // Stream with updating UI (triggers Generating Code visual) | |
| renderBotText(botDiv, accumulatedText, true); | |
| autoScroll(); | |
| } | |
| } catch (e) { /* silent catch for partial chunks */ } | |
| } | |
| } | |
| } | |
| window.isStreamingGlobalFlag = false; | |
| // Final render (Transforms "Generating Code" into "Workspace Buttons") | |
| renderBotText(botDiv, accumulatedText, false); | |
| S.history.push({role: 'bot', content: accumulatedText}); | |
| syncHistory(); | |
| } catch(err) { | |
| window.isStreamingGlobalFlag = false; | |
| renderBotText(botDiv, `**Error:** Server communication failed.`, false); | |
| } | |
| S.busy = false; | |
| document.getElementById('sendBtn').disabled = false; | |
| autoScroll(); | |
| } | |
| function sendEx(t){ document.getElementById('chatInput').value=t; sendMsg(); } | |
| function appendUserDOM(text, badgeText){ | |
| let bHtml = badgeText ? `<div style="font-size:11px;color:var(--accent);margin-bottom:4px;font-weight:600;">${esc(badgeText)}</div>` : ''; | |
| const el = document.createElement('div'); | |
| el.className = 'msg user'; | |
| el.innerHTML = `<div class="avatar">U</div><div class="body">${bHtml}<div class="bubble">${esc(text)}</div></div>`; | |
| document.getElementById('msgs').appendChild(el); | |
| } | |
| function appendBotDOM(content, isHistoryLoading=false) { | |
| const el = document.createElement('div'); | |
| el.className = 'msg bot'; | |
| el.innerHTML = `<div class="avatar"><img src="${LOGO_URL}"></div><div class="body"><div class="bubble"></div></div>`; | |
| document.getElementById('msgs').appendChild(el); | |
| renderBotText(el, content, !isHistoryLoading); | |
| } | |
| // Bot DOM Renderer (Text, Markdown, Actions & TTS) | |
| function renderBotText(el, raw, isStreaming) { | |
| const b = el.querySelector('.bubble'); | |
| const { mainText, thinkText } = parseThinking(raw); | |
| let html = ''; | |
| if (thinkText) { | |
| html += `<div class="think-box"><div class="think-title">🧠 Reasoning Process</div>${esc(thinkText)}</div>`; | |
| } | |
| html += marked.parse(mainText); | |
| if(isStreaming) { | |
| html += '<span class="blinking-cursor"></span>'; | |
| } | |
| b.innerHTML = html; | |
| let actionsDiv = el.querySelector('.msg-actions'); | |
| // Add action buttons only when streaming is completely done | |
| if(!isStreaming && !actionsDiv && mainText.trim().length > 0) { | |
| // Ensure string is properly escaped for passing into onclick function | |
| const cleanRaw = mainText.replace(/"/g, '"').replace(/'/g, "\\'").replace(/\n/g, '\\n').replace(/\r/g, ''); | |
| const rawForTTS = mainText.replace(/"/g, '"').replace(/'/g, "\\'").replace(/\n/g, ' '); | |
| const actionsHTML = ` | |
| <div class="msg-actions"> | |
| <!-- ROBUST COPY BUTTON --> | |
| <button class="action-btn" onclick="copyText(this, \`${cleanRaw}\`)"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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 Text | |
| </button> | |
| <!-- TEXT TO SPEECH (PRABHAT NEURAL) BUTTON --> | |
| <button class="action-btn tts-btn" onclick="speakText(\`${rawForTTS}\`)"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 Aloud | |
| </button> | |
| </div>`; | |
| el.querySelector('.body').insertAdjacentHTML('beforeend', actionsHTML); | |
| } | |
| } | |
| function esc(t){ return t.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); } | |
| </script> | |
| </body> | |
| </html> | |