Hugging Face's logo

Spaces:
Renderlib-dev
/
CodeVed
Running

App Files Community
1
Vedika commited on
Commit
e5e8693
·
verified ·
1 Parent(s): 12e7854

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +45 -904
index.html CHANGED
@@ -1,923 +1,64 @@
1
 
2
  <!DOCTYPE html>
3
- <html lang="en" dir="ltr">
4
  <head>
5
  <meta charset="UTF-8">
6
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
- <!-- Viewport Settings: Disables zoom, removes blue tap highlights on mobile devices -->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
9
- <meta name="description" content="Arjun 2.O Ultimate Enterprise Artificial Intelligence System engineered by Abhay Kumar.">
10
- <meta name="theme-color" content="#FF9933">
11
-
12
- <title>Arjun 2.O - Professional Advanced AI</title>
13
-
14
- <!-- =========================================================================================
15
- EXTERNAL RESOURCES, FONTS & LIBRARIES (बाहरी स्रोत)
16
- ========================================================================================= -->
17
- <link rel="preconnect" href="https://fonts.googleapis.com">
18
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
19
-
20
- <!-- Professional Typography -->
21
- <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">
22
-
23
- <!-- Syntax Highlighting -->
24
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
25
-
26
- <!-- Data Extraction & Rendering Utilities -->
27
- <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
28
- <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
29
- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
30
- <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
31
-
32
- <!-- TTS Gradio Engine Fallback Script (To prevent Module Import errors) -->
33
- <script type="module" src="https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"></script>
34
-
35
- <!-- =========================================================================================
36
- MASSIVE ENTERPRISE CSS ARCHITECTURE
37
- ========================================================================================= -->
38
- <style>
39
- /* ---------------------------------------------------------------------------------------
40
- A. CSS VARIABLES, DESIGN TOKENS & BRANDING
41
- --------------------------------------------------------------------------------------- */
42
- :root {
43
- /* Brand Identity: Saffron, White, Green (Tiranga Theme) */
44
- --brand-saffron: #FF9933;
45
- --brand-saffron-light: rgba(255, 153, 51, 0.12);
46
- --brand-saffron-dark: #e68a2e;
47
- --brand-saffron-glow: rgba(255, 153, 51, 0.4);
48
-
49
- --brand-white: #FFFFFF;
50
- --brand-white-glass: rgba(255, 255, 255, 0.88);
51
-
52
- --brand-green: #138808;
53
- --brand-green-light: rgba(19, 136, 8, 0.12);
54
- --brand-green-dark: #0f6e06;
55
- --brand-green-glow: rgba(19, 136, 8, 0.4);
56
-
57
- /* Structural Colors & Backgrounds */
58
- --bg-primary: #ffffff;
59
- --bg-secondary: #f8f9fa;
60
- --bg-tertiary: #f1f3f5;
61
- --bg-glass: rgba(255, 255, 255, 0.75);
62
- --bg-glass-heavy: rgba(255, 255, 255, 0.95);
63
-
64
- /* Text & Typography Colors */
65
- --text-primary: #111827;
66
- --text-secondary: #4b5563;
67
- --text-tertiary: #9ca3af;
68
- --text-inverse: #ffffff;
69
- --text-error: #ef4444;
70
- --text-success: #10b981;
71
-
72
- /* Borders & Dividers */
73
- --border-light: rgba(0, 0, 0, 0.08);
74
- --border-medium: rgba(0, 0, 0, 0.15);
75
-
76
- /* Shadows */
77
- --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
78
- --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
79
- --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.025);
80
- --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.02);
81
-
82
- /* Fonts & Metrics */
83
- --font-sans: 'Inter', sans-serif;
84
- --font-mono: 'Geist Mono', monospace;
85
- --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px;
86
- --ease-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
87
- --ease-spring: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
88
-
89
- /* Z-Indices */
90
- --z-ambient: -1; --z-base: 1; --z-header: 10; --z-dock: 20; --z-workspace: 25;
91
- --z-dropdown: 50; --z-sidebar: 100; --z-modal: 5000; --z-toast: 9000; --z-live: 9999;
92
- }
93
-
94
- /* ---------------------------------------------------------------------------------------
95
- B. GLOBAL RESET
96
- --------------------------------------------------------------------------------------- */
97
- *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent !important; }
98
- html { font-size: 16px; scroll-behavior: smooth; }
99
- 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; }
100
- *:focus-visible { outline: 2px solid var(--brand-saffron); outline-offset: 2px; }
101
- *:focus { outline: none; }
102
- button, input, textarea { font-family: inherit; border: none; background: transparent; }
103
- button { cursor: pointer; }
104
- button:disabled { cursor: not-allowed; opacity: 0.6; }
105
- img { max-width: 100%; height: auto; }
106
-
107
- /* Custom Enterprise Scrollbars */
108
- ::-webkit-scrollbar { width: 6px; height: 6px; }
109
- ::-webkit-scrollbar-track { background: transparent; }
110
- ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 10px; transition: background 0.3s; }
111
- ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }
112
-
113
- /* ---------------------------------------------------------------------------------------
114
- C. UI COMPONENTS
115
- --------------------------------------------------------------------------------------- */
116
- .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%); }
117
- .ambient-orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.35; animation: orbFloat 40s ease-in-out infinite alternate; }
118
- .orb-top-left { width: 600px; height: 600px; background: rgba(255,153,51,0.2); top: -200px; left: -150px; }
119
- .orb-bottom-right { width: 500px; height: 500px; background: rgba(19,136,8,0.15); bottom: -150px; right: -100px; animation-delay: -20s; }
120
- @keyframes orbFloat { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(60px, -20px) scale(1.1); } }
121
-
122
- /* Toast Notifications */
123
- .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; }
124
- .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); }
125
- .toast-notification.error { background: rgba(239, 68, 68, 0.95); }
126
- .toast-notification.success { background: rgba(16, 185, 129, 0.95); }
127
- @keyframes toastSlideIn { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
128
- @keyframes toastFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } }
129
-
130
- /* Startup Overlay */
131
- .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; }
132
- .startup-logo-container { position: relative; margin-bottom: 30px; }
133
- .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; }
134
- .startup-title { font-size: 2.8rem; font-weight: 900; margin-bottom: 10px; }
135
- .startup-desc { font-size: 1.1rem; color: var(--text-secondary); max-width: 600px; margin-bottom: 40px; }
136
- .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); }
137
- .btn-startup-launch:hover { transform: translateY(-3px); box-shadow: var(--shadow-xl); }
138
-
139
- /* Application Layout */
140
- .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); }
141
-
142
- /* Sidebar */
143
- .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; }
144
- .sidebar-header { padding: 24px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; }
145
- .brand-identity { display: flex; align-items: center; gap: 12px; }
146
- .brand-identity img { width: 44px; height: 44px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
147
- .brand-name { font-weight: 900; font-size: 18px; line-height: 1.1; }
148
- .brand-edition { font-size: 10px; font-weight: 800; color: var(--brand-saffron-dark); letter-spacing: 1px; text-transform: uppercase; }
149
- .sidebar-body { flex: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
150
-
151
- .auth-widget { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
152
- .btn-secure-connect { width: 100%; padding: 12px; background: #000; color: #fff; border-radius: var(--radius-md); font-weight: 700; font-size: 14px; }
153
-
154
- .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); }
155
- .dev-box img { width: 60px; height: 60px; border-radius: var(--radius-md); margin-bottom: 10px; margin-left: auto; margin-right: auto; }
156
- .dev-box h3 { font-size: 16px; font-weight: 800; }
157
- .dev-box p { font-size: 10px; font-weight: 700; color: var(--text-secondary); letter-spacing: 1px; }
158
-
159
- .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; }
160
- .btn-erase-memory:hover { background: #fee2e2; color: var(--text-error); border-color: #fca5a5; }
161
-
162
- /* Main Chat Area */
163
- .main-chat-wrapper { flex: 1; display: flex; flex-direction: column; position: relative; min-width: 0; }
164
- .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); }
165
- .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; }
166
-
167
- .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); }
168
- .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; }
169
- @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; } }
170
-
171
- .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; }
172
- .btn-live-mode:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(239, 68, 68, 0.5); }
173
- .btn-live-mode svg { width: 16px; height: 16px; animation: blink 1.5s infinite; }
174
- @keyframes blink { 50% { opacity: 0.5; } }
175
-
176
- /* Chat Scroll Area */
177
- .chat-scroll-area { flex: 1; overflow-y: auto; padding: 40px 10%; display: flex; flex-direction: column; gap: 30px; }
178
-
179
- .hero-section { text-align: center; padding: 40px 20px; max-width: 700px; margin: 0 auto; animation: fadeUp 0.6s ease; }
180
- .hero-section img { width: 90px; height: 90px; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); margin-bottom: 20px; border: 3px solid #fff; }
181
- .hero-section h2 { font-size: 36px; font-weight: 900; margin-bottom: 10px; letter-spacing: -1px; }
182
- .hero-section p { font-size: 16px; color: var(--text-secondary); margin-bottom: 40px; }
183
- @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
184
-
185
- .suggestions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
186
- .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; }
187
- .suggest-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-saffron); }
188
- .suggest-card span { font-size: 24px; margin-bottom: 10px; display: block; }
189
- .suggest-card h4 { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
190
- .suggest-card p { font-size: 13px; color: var(--text-secondary); }
191
-
192
- /* Chat Bubbles */
193
- .msg-row { display: flex; gap: 16px; max-width: 85%; animation: msgPop 0.4s var(--ease-spring) forwards; }
194
- @keyframes msgPop { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
195
- .msg-row.user { flex-direction: row-reverse; align-self: flex-end; }
196
- .msg-row.bot { align-self: flex-start; }
197
-
198
- .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); }
199
- .msg-row.user .msg-avatar { background: #111; color: #fff; }
200
- .msg-row.bot .msg-avatar { background: #fff; border: 1px solid var(--border-light); padding: 2px; }
201
- .msg-row.bot .msg-avatar img { width: 100%; height: 100%; border-radius: 8px; }
202
-
203
- .msg-content { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
204
- .msg-row.user .msg-content { align-items: flex-end; }
205
-
206
- .bubble { padding: 16px 20px; font-size: 16px; line-height: 1.6; word-wrap: break-word; position: relative; }
207
- .msg-row.user .bubble { background: #111; color: #fff; border-radius: 20px 20px 4px 20px; box-shadow: var(--shadow-md); }
208
- .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%; }
209
-
210
- /* Markdown rendering styles */
211
- .bubble p { margin-bottom: 12px; }
212
- .bubble p:last-child { margin-bottom: 0; }
213
- .bubble strong { font-weight: 800; }
214
- .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; }
215
- .msg-row.user .bubble code { background: rgba(255,255,255,0.2); color: #fff; }
216
- .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; }
217
- .bubble pre code { background: transparent; padding: 0; color: inherit; font-weight: 400; }
218
- .bubble img { max-width: 100%; border-radius: var(--radius-md); margin: 12px 0; border: 1px solid var(--border-light); }
219
-
220
- /* Actions Row */
221
- .actions-row { display: flex; gap: 8px; margin-top: 6px; opacity: 0; transition: 0.3s; padding-left: 10px; }
222
- .msg-row.bot:hover .actions-row { opacity: 1; }
223
- .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; }
224
- .btn-action:hover { background: #fff; color: #000; border-color: var(--border-medium); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
225
- .btn-action.tts { color: var(--brand-green-dark); background: var(--brand-green-light); border-color: rgba(19, 136, 8, 0.2); }
226
-
227
- /* Loading Dots */
228
- .typing-indicator { display: flex; gap: 4px; padding: 8px; }
229
- .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); animation: dotBounce 1.4s infinite; }
230
- .dot:nth-child(2) { animation-delay: 0.2s; } .dot:nth-child(3) { animation-delay: 0.4s; }
231
- @keyframes dotBounce { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-4px); opacity: 1; } }
232
-
233
- /* Input Dock */
234
- .input-dock { padding: 0 40px 30px; background: transparent; z-index: var(--z-dock); }
235
- .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; }
236
- .input-container:focus-within { border-color: var(--brand-saffron); box-shadow: 0 10px 30px rgba(255,153,51,0.15); }
237
-
238
- .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; }
239
- .btn-icon:hover { background: var(--bg-secondary); color: #000; }
240
-
241
- .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; }
242
-
243
- .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); }
244
- .btn-send:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255, 153, 51, 0.4); }
245
- .btn-send:disabled { filter: grayscale(100%); opacity: 0.5; cursor: not-allowed; }
246
-
247
- .btn-mic { position: relative; }
248
- .btn-mic.recording { background: var(--text-error); color: #fff; border-radius: var(--radius-full); animation: pulseRecord 1.5s infinite; }
249
- @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; } }
250
-
251
- .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); }
252
- .lang-toggle.hi { border-color: var(--brand-green); color: var(--brand-green-dark); background: var(--brand-green-light); }
253
-
254
- .branding-footer { text-align: center; font-size: 11px; color: var(--text-tertiary); font-weight: 600; margin-top: 12px; letter-spacing: 0.5px; }
255
-
256
- /* Workspace (Right Panel) */
257
- .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); }
258
- .workspace-panel.active { width: 50%; }
259
- .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; }
260
- .ws-tools { display: flex; gap: 8px; }
261
- .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; }
262
- .ws-btn:hover { background: #4b5263; }
263
- .ws-editor { flex: 1; padding: 20px; overflow: auto; background: #282c34; color: #abb2bf; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; }
264
- .ws-editor pre { margin: 0; }
265
-
266
- /* Workspace Launch Card generated in Chat */
267
- .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; }
268
- .ws-card-left { display: flex; align-items: center; gap: 12px; }
269
- .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); }
270
- .ws-title { font-weight: 800; font-size: 14px; color: var(--text-primary); }
271
- .ws-lang { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; font-family: var(--font-mono); font-weight: 700; }
272
- .btn-launch-ws { padding: 8px 16px; background: #111; color: #fff; font-weight: 700; font-size: 12px; border-radius: var(--radius-sm); transition: 0.2s; }
273
- .btn-launch-ws:hover { background: var(--brand-saffron); box-shadow: 0 4px 10px rgba(255,153,51,0.3); }
274
-
275
- /* Live Mode Fullscreen Overlay */
276
- .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); }
277
- .live-mode-overlay.active { opacity: 1; pointer-events: auto; }
278
- .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; }
279
- .btn-close-live:hover { background: #fee2e2; color: var(--text-error); transform: rotate(90deg); }
280
-
281
- .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; }
282
- .live-orb.listening { animation: orbListen 1.5s infinite alternate; }
283
- .live-orb.speaking { animation: orbSpeak 0.4s infinite alternate; }
284
- @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); } }
285
- @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); } }
286
-
287
- .live-status { font-size: 24px; font-weight: 900; margin-bottom: 16px; }
288
- .live-transcript { font-size: 18px; color: var(--text-secondary); font-weight: 500; max-width: 600px; text-align: center; min-height: 60px; }
289
-
290
- /* Responsive Fixes */
291
- @media (max-width: 900px) {
292
- .sidebar-container { position: absolute; left: -300px; height: 100%; box-shadow: var(--shadow-xl); }
293
- .sidebar-container.active { left: 0; }
294
- .btn-hamburger, .btn-mobile-close { display: flex; }
295
- .chat-scroll-area { padding: 20px 15px; }
296
- .input-dock { padding: 10px 15px 20px; }
297
- .workspace-panel.active { width: 100%; position: absolute; height: 100%; left: 0; top: 0; z-index: 3000; }
298
- .suggestions-grid { grid-template-columns: 1fr; }
299
- .msg-row { max-width: 95%; }
300
- }
301
- </style>
302
  </head>
303
- <body>
304
-
305
- <!-- Error/Toast Container -->
306
- <div id="toast-container" class="toast-wrapper"></div>
307
-
308
- <!-- Startup Overlay -->
309
- <div class="startup-overlay" id="welcomeOverlay">
310
- <div class="startup-logo-container">
311
- <div class="startup-logo-glow"></div>
312
- <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo">
313
- </div>
314
- <h1 class="startup-title">Welcome to Arjun 2.O</h1>
315
- <p class="startup-desc">Fully Self-Contained Enterprise Engine. Featuring Gemini API integration, flawless STT, and robust logic generation.</p>
316
- <button class="btn-startup-launch" id="btnLaunchSystem">
317
- Initialize Engine
318
- <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>
319
- </button>
320
- </div>
321
 
322
- <!-- Live Mode Overlay -->
323
- <div class="live-mode-overlay" id="liveOverlay">
324
- <button class="btn-close-live" id="btnExitLiveMode">
325
- <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>
 
326
  </button>
327
- <div class="live-orb" id="liveOrb"></div>
328
- <div class="live-status" id="liveStatusText">Initializing Audio Stream...</div>
329
- <div class="live-transcript" id="liveTranscriptText">Speak directly to Arjun. Natural language processing active.</div>
330
- </div>
331
-
332
- <!-- Ambient Background -->
333
- <div class="ambient-environment">
334
- <div class="ambient-orb orb-top-left"></div>
335
- <div class="ambient-orb orb-bottom-right"></div>
336
- </div>
337
-
338
- <!-- Main Layout -->
339
- <div class="app-root">
340
-
341
- <!-- Sidebar -->
342
- <aside class="sidebar-container" id="sidebar">
343
- <div class="sidebar-header">
344
- <div class="brand-identity">
345
- <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun">
346
- <div>
347
- <div class="brand-name">ARJUN 2.O</div>
348
- <div class="brand-edition">Enterprise Ready</div>
349
- </div>
350
- </div>
351
- <button class="btn-mobile-close" id="btnSidebarClose">
352
- <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>
353
- </button>
354
- </div>
355
- <div class="sidebar-body">
356
- <div class="dev-box">
357
- <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Dev">
358
- <h3>Arjun Intelligence</h3>
359
- <p>ENGINEERED BY ABHAY KUMAR</p>
360
- </div>
361
- <button class="btn-erase-memory" id="btnClearMemory">
362
- <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>
363
- Wipe Neural Context
364
- </button>
365
- </div>
366
- </aside>
367
-
368
- <!-- Main Chat Area -->
369
- <main class="main-chat-wrapper">
370
- <header class="chat-top-bar">
371
- <div style="display: flex; align-items: center; gap: 16px;">
372
- <button class="btn-hamburger" id="btnSidebarOpen">
373
- <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>
374
- </button>
375
- <div class="system-status">
376
- <div class="pulse-dot"></div>
377
- Gemini Neural Core Online
378
- </div>
379
- </div>
380
- <button class="btn-live-mode" id="btnStartLiveMode">
381
- <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>
382
- LIVE MODE
383
- </button>
384
- </header>
385
-
386
- <div class="chat-scroll-area" id="msgs">
387
- <div class="hero-section" id="welcomeState">
388
- <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun">
389
- <h2>How can I assist you today?</h2>
390
- <p>Experience zero-latency reasoning, flawless bilingual dictation, and standalone enterprise logic directly in your browser.</p>
391
-
392
- <div class="suggestions-grid">
393
- <div class="suggest-card" onclick="ChatEngine.sendExample('Write a highly secure, object-oriented Python script for a modern Flask backend API.')">
394
- <span>💻</span>
395
- <h4>Generate Production Code</h4>
396
- <p>Create secure, workspace-ready architecture.</p>
397
- </div>
398
- <div class="suggest-card" onclick="ChatEngine.sendExample('Create a hyper-realistic 8k image of a futuristic Indian smart city with neon lights.')">
399
- <span>🎨</span>
400
- <h4>Render Stunning Visions</h4>
401
- <p>Utilize Pollinations AI to paint your imagination.</p>
402
- </div>
403
- </div>
404
- </div>
405
- </div>
406
-
407
- <div class="input-dock">
408
- <div class="input-container">
409
- <!-- Language Toggle -->
410
- <button class="lang-toggle" id="btnLangToggle" title="Toggle Language">EN</button>
411
-
412
- <!-- Voice Dictation -->
413
- <button class="btn-icon btn-mic" id="btnMic" title="Voice Dictation">
414
- <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>
415
- </button>
416
-
417
- <!-- Text Area -->
418
- <textarea class="chat-input" id="chatInput" placeholder="Message Arjun Intelligence..." rows="1"></textarea>
419
-
420
- <!-- Send Button -->
421
- <button class="btn-send" id="btnSend">
422
- <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>
423
- </button>
424
- </div>
425
- <div class="branding-footer">Secured by Arjun Core Architecture • Developed by Abhay Kumar</div>
426
- </div>
427
- </main>
428
-
429
- <!-- Workspace Panel -->
430
- <aside class="workspace-panel" id="workspacePanel">
431
- <div class="ws-header">
432
- <span id="wsTitle">Compiled Logic</span>
433
- <div class="ws-tools">
434
- <button class="ws-btn" id="btnWsCopy">Copy Code</button>
435
- <button class="ws-btn" id="btnWsClose" style="background:transparent;">Close</button>
436
- </div>
437
- </div>
438
- <div class="ws-editor">
439
- <pre><code id="wsCodeBlock" class="hljs"></code></pre>
440
- </div>
441
- </aside>
442
-
443
  </div>
444
 
445
- <!-- =========================================================================================
446
- ENTERPRISE JAVASCRIPT LOGIC (100% BUG FREE & STANDALONE)
447
- ========================================================================================= -->
448
  <script>
449
- // ----------------------------------------------------------------------------------
450
- // STATE MANAGEMENT
451
- // ----------------------------------------------------------------------------------
452
- const State = {
453
- history: [],
454
- isProcessing: false,
455
- generatedCodes: [],
456
- activeCodeId: null,
457
- isLiveMode: false,
458
- sttLang: 'en-IN',
459
- baseInputText: '',
460
- silenceTimer: null,
461
- geminiApiKey: "" // Allowed empty API key for specific models via platform bypass
462
- };
 
463
 
464
- // ----------------------------------------------------------------------------------
465
- // UTILITY FUNCTIONS (Errors & UI)
466
- // ----------------------------------------------------------------------------------
467
- const Utils = {
468
- toast: (msg, type = 'success') => {
469
- const container = document.getElementById('toast-container');
470
- if(!container) return;
471
- const el = document.createElement('div');
472
- el.className = `toast-notification ${type}`;
473
- let icon = type === 'error'
474
- ? '<line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>'
475
- : '<polyline points="20 6 9 17 4 12"></polyline>';
476
- el.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">${icon}</svg> ${Utils.escape(msg)}`;
477
- container.appendChild(el);
478
- setTimeout(() => el.remove(), 3500);
479
- },
480
- escape: (str) => {
481
- if(!str) return '';
482
- return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
483
- },
484
- autoGrow: (el) => {
485
- el.style.height = 'auto';
486
- el.style.height = Math.min(el.scrollHeight, 200) + 'px';
487
- },
488
- copy: (btn, text) => {
489
- const ta = document.createElement('textarea');
490
- ta.value = text;
491
- ta.style.position = 'fixed'; ta.style.opacity = '0';
492
- document.body.appendChild(ta);
493
- ta.select();
494
- try {
495
- document.execCommand('copy');
496
- const orig = btn.innerText;
497
- btn.innerText = 'Copied!';
498
- setTimeout(() => btn.innerText = orig, 2000);
499
- Utils.toast("Copied to clipboard!");
500
- } catch(e) {
501
- Utils.toast("Copy failed", "error");
502
- }
503
- ta.remove();
504
- },
505
- cleanTTS: (text) => {
506
- if(!text) return "";
507
- let cleaned = String(text)
508
- .replace(/```[\s\S]*?```/g, '')
509
- .replace(/`.*?`/g, '')
510
- .replace(/!\[.*?\]\(.*?\)/g, '')
511
- .replace(/\[(.*?)\]\(.*?\)/g, '$1')
512
- .replace(/<think>[\s\S]*?<\/think>/gi, '')
513
- .replace(/https?:\/\/[^\s]+/g, '')
514
- .replace(/[*_~#|-]/g, '');
515
- return cleaned.trim();
516
- }
517
- };
518
 
519
- // ----------------------------------------------------------------------------------
520
- // MARKDOWN & WORKSPACE ENGINE
521
- // ----------------------------------------------------------------------------------
522
- // Safely initialize marked.js renderer
523
- if (typeof marked !== 'undefined') {
524
- const renderer = new marked.Renderer();
525
-
526
- renderer.code = function(codeInfo) {
527
- const codeText = typeof codeInfo === 'string' ? codeInfo : (codeInfo.text || '');
528
- const lang = typeof codeInfo === 'string' ? arguments : (codeInfo.lang || '');
529
-
530
- const id = State.generatedCodes.length;
531
- State.generatedCodes.push({ code: codeText, lang: lang });
532
-
533
- return `
534
- <div class="ws-card">
535
- <div class="ws-card-left">
536
- <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>
537
- <div>
538
- <div class="ws-title">Compiled Logic Module</div>
539
- <div class="ws-lang">${lang || 'Syntax Detected'}</div>
540
- </div>
541
- </div>
542
- <button class="btn-launch-ws" onclick="Workspace.launch(${id})">Open Editor</button>
543
- </div>`;
544
  };
545
- marked.use({ renderer: renderer, breaks: true, gfm: true });
546
- } else {
547
- console.error("Marked.js failed to load from CDN.");
548
  }
549
 
550
- const Workspace = {
551
- launch: (id) => {
552
- State.activeCodeId = id;
553
- const data = State.generatedCodes[id];
554
- document.getElementById('wsTitle').innerText = `Generated ${data.lang.toUpperCase() || 'CODE'}`;
555
- const block = document.getElementById('wsCodeBlock');
556
- block.className = `hljs language-${data.lang || 'plaintext'}`;
557
- block.textContent = data.code;
558
-
559
- if(typeof hljs !== 'undefined') hljs.highlightElement(block);
560
-
561
- document.getElementById('workspacePanel').classList.add('active');
562
- if(window.innerWidth <= 900) document.getElementById('sidebar').classList.remove('active');
563
- },
564
- close: () => document.getElementById('workspacePanel').classList.remove('active'),
565
- copyCode: (btn) => {
566
- if(State.activeCodeId !== null) Utils.copy(btn, State.generatedCodes[State.activeCodeId].code);
567
- }
568
- };
569
-
570
- // ----------------------------------------------------------------------------------
571
- // SPEECH RECOGNITION (STT) - FLAWLESS REWRITE
572
- // ----------------------------------------------------------------------------------
573
- const Speech = {
574
- engine: null,
575
- isRecording: false,
576
-
577
- init: () => {
578
- const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
579
- if (!SR) {
580
- console.warn("Speech API not supported.");
581
- document.getElementById('btnMic').style.display = 'none';
582
- return;
583
- }
584
-
585
- Speech.engine = new SR();
586
- Speech.engine.continuous = true;
587
- Speech.engine.interimResults = true;
588
- Speech.engine.lang = State.sttLang;
589
-
590
- Speech.engine.onstart = () => {
591
- Speech.isRecording = true;
592
- document.getElementById('btnMic').classList.add('recording');
593
-
594
- // SAVE BASE TEXT TO PREVENT DUPLICATES
595
- State.baseInputText = document.getElementById('chatInput').value;
596
-
597
- if (State.isLiveMode) {
598
- State.baseInputText = ''; // Clear in live mode
599
- document.getElementById('liveStatusText').innerText = "Listening...";
600
- document.getElementById('liveOrb').className = "live-orb listening";
601
- }
602
- };
603
-
604
- Speech.engine.onresult = (e) => {
605
- if (State.silenceTimer) clearTimeout(State.silenceTimer);
606
-
607
- let finalStr = '';
608
- let interimStr = '';
609
-
610
- // SAFE LOOP: Guaranteed no undefined errors and no duplicates
611
- for (let i = e.resultIndex; i < e.results.length; ++i) {
612
- let text = e.results[i].transcript;
613
- if (!text) continue;
614
- if (e.results[i].isFinal) finalStr += text;
615
- else interimStr += text;
616
- }
617
-
618
- if (State.isLiveMode) {
619
- // In live mode, we only care about the absolute current thought
620
- let display = (State.baseInputText + " " + finalStr + " " + interimStr).trim();
621
- if (finalStr) State.baseInputText += (State.baseInputText ? ' ' : '') + finalStr; // update base truth
622
-
623
- document.getElementById('liveTranscriptText').innerText = `"${display}"`;
624
- document.getElementById('chatInput').value = display;
625
-
626
- // VAD Timer: 2.5s silence triggers auto-send
627
- State.silenceTimer = setTimeout(() => {
628
- if (document.getElementById('chatInput').value.trim()) {
629
- Speech.engine.stop();
630
- }
631
- }, 2500);
632
-
633
- } else {
634
- // Normal mode: append cleanly
635
- let display = (State.baseInputText + " " + finalStr + " " + interimStr).trim();
636
- if (finalStr) State.baseInputText += (State.baseInputText ? ' ' : '') + finalStr; // Commit finals to base truth
637
-
638
- const inp = document.getElementById('chatInput');
639
- inp.value = display;
640
- Utils.autoGrow(inp);
641
- }
642
- };
643
-
644
- Speech.engine.onend = () => {
645
- Speech.isRecording = false;
646
- document.getElementById('btnMic').classList.remove('recording');
647
-
648
- if (State.isLiveMode) {
649
- document.getElementById('liveOrb').className = "live-orb";
650
- const inputVal = document.getElementById('chatInput').value.trim();
651
- if (inputVal && !State.isProcessing) {
652
- document.getElementById('liveStatusText').innerText = "Processing Logic...";
653
- ChatEngine.dispatch(); // Trigger send
654
- } else {
655
- document.getElementById('liveStatusText').innerText = "Tap mic to speak";
656
- }
657
- }
658
- };
659
-
660
- Speech.engine.onerror = (e) => {
661
- console.error("STT Error:", e.error);
662
- Speech.isRecording = false;
663
- document.getElementById('btnMic').classList.remove('recording');
664
- if (State.isLiveMode) document.getElementById('liveStatusText').innerText = "Audio Failure. Tap to retry.";
665
- };
666
- },
667
-
668
- toggle: () => {
669
- if(!Speech.engine) return Utils.toast("Mic not supported", "error");
670
- if(Speech.isRecording) Speech.engine.stop();
671
- else {
672
- try { Speech.engine.start(); }
673
- catch(e) { console.error(e); }
674
- }
675
- },
676
-
677
- switchLang: () => {
678
- const btn = document.getElementById('btnLangToggle');
679
- if (State.sttLang === 'en-IN') {
680
- State.sttLang = 'hi-IN';
681
- btn.innerText = 'HI';
682
- btn.classList.add('hi');
683
- Utils.toast("Hindi Dictation Activated");
684
- } else {
685
- State.sttLang = 'en-IN';
686
- btn.innerText = 'EN';
687
- btn.classList.remove('hi');
688
- Utils.toast("English Dictation Activated");
689
- }
690
- if (Speech.engine) {
691
- Speech.engine.lang = State.sttLang;
692
- if(Speech.isRecording) {
693
- Speech.engine.stop();
694
- setTimeout(() => Speech.toggle(), 300);
695
- }
696
- }
697
- }
698
- };
699
-
700
- // ----------------------------------------------------------------------------------
701
- // TEXT-TO-SPEECH (Gradio Fallback)
702
- // ----------------------------------------------------------------------------------
703
- const TTS = async (text) => {
704
- const cleanText = Utils.cleanTTS(text);
705
- if(!cleanText) return Utils.toast("No text to speak", "error");
706
-
707
- Utils.toast("Connecting to Neural TTS...", "success");
708
- if (State.isLiveMode) document.getElementById('liveOrb').className = "live-orb speaking";
709
-
710
- try {
711
- // Check if gradio loaded successfully dynamically
712
- if (typeof window.gradio !== 'undefined' && !State.gradioClient) {
713
- State.gradioClient = await window.gradio.Client.connect("Vedika66/Edge-TTS");
714
- }
715
-
716
- if(State.gradioClient) {
717
- const result = await State.gradioClient.predict("/smart_hybrid_tts", {
718
- text: cleanText,
719
- voice_type: "प्रभात (भारी और प्राकृतिक आवाज़ - हिंग्लिश के लिए)"
720
- });
721
- if (result.data && result.data) {
722
- const audioUrl = typeof result.data === 'string' ? result.data : result.data.url;
723
- const audio = new Audio(audioUrl);
724
- audio.onended = () => { if(State.isLiveMode) document.getElementById('liveOrb').className = "live-orb"; };
725
- audio.play();
726
- }
727
- } else {
728
- // Browser Native Fallback if Gradio fails
729
- const utterance = new SpeechSynthesisUtterance(cleanText);
730
- utterance.lang = 'hi-IN';
731
- utterance.onend = () => { if(State.isLiveMode) document.getElementById('liveOrb').className = "live-orb"; };
732
- window.speechSynthesis.speak(utterance);
733
- }
734
- } catch (error) {
735
- console.error("TTS Failed:", error);
736
- Utils.toast("Neural TTS unavailable, using native engine.", "error");
737
- const utterance = new SpeechSynthesisUtterance(cleanText);
738
- utterance.lang = 'hi-IN';
739
- utterance.onend = () => { if(State.isLiveMode) document.getElementById('liveOrb').className = "live-orb"; };
740
- window.speechSynthesis.speak(utterance);
741
- }
742
- };
743
-
744
- // ----------------------------------------------------------------------------------
745
- // CORE CHAT ENGINE (GEMINI INTEGRATION)
746
- // ----------------------------------------------------------------------------------
747
- const ChatEngine = {
748
- renderUser: (text) => {
749
- const container = document.getElementById('msgs');
750
- const div = document.createElement('div');
751
- div.className = 'msg-row user';
752
- div.innerHTML = `<div class="msg-avatar">U</div><div class="msg-content"><div class="bubble">${Utils.escape(text)}</div></div>`;
753
- container.appendChild(div);
754
- container.scrollTop = container.scrollHeight;
755
- },
756
-
757
- renderBot: (htmlContent, isStreaming = false) => {
758
- const container = document.getElementById('msgs');
759
- const div = document.createElement('div');
760
- div.className = 'msg-row bot';
761
-
762
- let content = htmlContent;
763
- if(isStreaming) content += `<div class="typing-indicator"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>`;
764
-
765
- div.innerHTML = `
766
- <div class="msg-avatar"><img src="${Config.LOGO_URL}" alt="AI"></div>
767
- <div class="msg-content">
768
- <div class="bubble">${content}</div>
769
- </div>`;
770
- container.appendChild(div);
771
- container.scrollTop = container.scrollHeight;
772
- return div;
773
- },
774
-
775
- updateBot: (div, text, isStreaming) => {
776
- const bubble = div.querySelector('.bubble');
777
- if(typeof marked !== 'undefined') {
778
- let html = marked.parse(text.replace(/<think>[\s\S]*?<\/think>/gi, ''));
779
- if(isStreaming) html += `<div class="typing-indicator"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>`;
780
- bubble.innerHTML = html;
781
- } else {
782
- bubble.innerText = text;
783
- }
784
-
785
- if(!isStreaming && text.trim() && !div.querySelector('.actions-row')) {
786
- const safeRaw = text.replace(/"/g, '&quot;').replace(/'/g, "\\'").replace(/\n/g, '\\n');
787
- const actions = `
788
- <div class="actions-row">
789
- <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>
790
- <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>
791
- </div>`;
792
- div.querySelector('.msg-content').insertAdjacentHTML('beforeend', actions);
793
- }
794
- const container = document.getElementById('msgs');
795
- container.scrollTop = container.scrollHeight;
796
- },
797
-
798
- callGemini: async (promptText) => {
799
- const seed = Math.floor(Math.random() * 9999999);
800
- const sysPrompt = `You are Arjun 2.O, a sophisticated enterprise AI system architected by Abhay Kumar.
801
- LANGUAGE REGULATION: Always reply in purely professional Hindi unless the user strictly requires English code/technical logic.
802
- IMAGE RENDER: If asked to generate/create an image, MUST output exact markdown: ![Vision](https://image.pollinations.ai/prompt/{ENCODED_PROMPT}?width=1024&height=1024&nologo=true&seed=${seed})
803
- ${State.isLiveMode ? 'LIVE MODE ACTIVE: Maximum brevity. Direct short telephonic answers.' : ''}`;
804
-
805
- const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${State.geminiApiKey}`;
806
-
807
- const payload = {
808
- contents: [{ parts: [{ text: promptText }] }],
809
- systemInstruction: { parts: [{ text: sysPrompt }] },
810
- tools: [{ google_search: {} }]
811
- };
812
-
813
- const delays =;
814
- for (let i = 0; i <= delays.length; i++) {
815
- try {
816
- const res = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
817
- if (!res.ok) throw new Error(`HTTP ${res.status}`);
818
- const data = await res.json();
819
- return data.candidates?.?.content?.parts?.?.text || "No response generated.";
820
- } catch (err) {
821
- if (i === delays.length) {
822
- console.error("Gemini Failure:", err);
823
- return "**System Error:** Internal LLM Matrix failed after retries.";
824
- }
825
- await new Promise(r => setTimeout(r, delays[i]));
826
- }
827
- }
828
- },
829
-
830
- dispatch: async () => {
831
- if(State.isProcessing) return;
832
- const inp = document.getElementById('chatInput');
833
- const text = inp.value.trim();
834
- if(!text) return;
835
-
836
- // UI Prep
837
- document.getElementById('welcomeState').style.display = 'none';
838
- inp.value = ''; inp.style.height = 'auto';
839
- State.isProcessing = true;
840
- document.getElementById('btnSend').disabled = true;
841
-
842
- // Push User Msg
843
- ChatEngine.renderUser(text);
844
- State.history.push({role: 'user', content: text});
845
-
846
- // Prep Bot Bubble
847
- const botDiv = ChatEngine.renderBot('', true);
848
- if(State.isLiveMode) document.getElementById('liveStatusText').innerText = "Arjun Processing...";
849
-
850
- // Fetch Gemini
851
- const responseText = await ChatEngine.callGemini(text);
852
-
853
- // Update Bot
854
- ChatEngine.updateBot(botDiv, responseText, false);
855
- State.history.push({role: 'bot', content: responseText});
856
-
857
- if(State.isLiveMode) {
858
- document.getElementById('liveStatusText').innerText = "Arjun Transmitting...";
859
- TTS(responseText);
860
- }
861
-
862
- State.isProcessing = false;
863
- document.getElementById('btnSend').disabled = false;
864
- },
865
-
866
- sendExample: (text) => {
867
- document.getElementById('chatInput').value = text;
868
- ChatEngine.dispatch();
869
- }
870
- };
871
-
872
- // ----------------------------------------------------------------------------------
873
- // BOOTSTRAP AND EVENT LISTENERS (Safe Binding)
874
- // ----------------------------------------------------------------------------------
875
- document.addEventListener('DOMContentLoaded', () => {
876
- // UI Basics
877
- try {
878
- document.getElementById('btnLaunchSystem').onclick = () => {
879
- document.getElementById('welcomeOverlay').style.opacity = '0';
880
- setTimeout(() => document.getElementById('welcomeOverlay').style.display = 'none', 500);
881
- };
882
-
883
- // Sidebar
884
- const sb = document.getElementById('sidebar');
885
- document.getElementById('btnSidebarOpen').onclick = () => sb.classList.add('active');
886
- document.getElementById('btnSidebarClose').onclick = () => sb.classList.remove('active');
887
-
888
- // Workspace
889
- document.getElementById('btnWsClose').onclick = Workspace.close;
890
- document.getElementById('btnWsCopy').onclick = function() { Workspace.copyCode(this); };
891
-
892
- // Input Actions
893
- const inp = document.getElementById('chatInput');
894
- inp.oninput = () => Utils.autoGrow(inp);
895
- inp.onkeydown = (e) => { if(e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); ChatEngine.dispatch(); } };
896
- document.getElementById('btnSend').onclick = ChatEngine.dispatch;
897
-
898
- // Live Mode & Voice
899
- document.getElementById('btnStartLiveMode').onclick = () => {
900
- State.isLiveMode = true;
901
- document.getElementById('liveOverlay').classList.add('active');
902
- if(Speech.engine && !Speech.isRecording) setTimeout(Speech.toggle, 500);
903
- };
904
- document.getElementById('btnExitLiveMode').onclick = () => {
905
- State.isLiveMode = false;
906
- document.getElementById('liveOverlay').classList.remove('active');
907
- if(Speech.engine && Speech.isRecording) Speech.engine.stop();
908
- };
909
-
910
- document.getElementById('btnLangToggle').onclick = Speech.switchLang;
911
- document.getElementById('btnMic').onclick = Speech.toggle;
912
-
913
- // Init Systems
914
- Speech.init();
915
 
916
- } catch (e) {
917
- console.error("DOM Binding Error:", e);
918
- Utils.toast("Critical UI failure during initialization.", "error");
919
- }
920
- });
921
  </script>
922
  </body>
923
  </html>
 
 
1
 
2
  <!DOCTYPE html>
3
+ <html lang="en">
4
  <head>
5
  <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Voice Assistant Interface</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </head>
10
+ <body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
 
12
+ <div class="w-full max-w-md bg-white p-6 rounded-xl shadow-lg">
13
+ <h1 class="text-xl font-bold mb-4">Voice Assistant</h1>
14
+ <div id="chat-box" class="h-64 overflow-y-auto border p-3 mb-4 rounded bg-gray-50 text-sm"></div>
15
+ <button id="voice-btn" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">
16
+ Start Listening
17
  </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  </div>
19
 
 
 
 
20
  <script>
21
+ const chatBox = document.getElementById('chat-box');
22
+ const voiceBtn = document.getElementById('voice-btn');
23
+
24
+ // Speech Recognition Setup
25
+ const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
26
+ if (SpeechRecognition) {
27
+ const recognition = new SpeechRecognition();
28
+ recognition.lang = 'en-US'; // Forced English
29
+ recognition.continuous = false; // Capture full sentence, not just first word
30
+ recognition.interimResults = false;
31
+
32
+ voiceBtn.onclick = () => {
33
+ recognition.start();
34
+ voiceBtn.innerText = "Listening...";
35
+ };
36
 
37
+ recognition.onresult = (event) => {
38
+ const transcript = event.results[0][0].transcript;
39
+ addMessage("User: " + transcript);
40
+ processInput(transcript);
41
+ voiceBtn.innerText = "Start Listening";
42
+ };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
 
44
+ recognition.onerror = () => {
45
+ voiceBtn.innerText = "Start Listening";
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
46
  };
 
 
 
47
  }
48
 
49
+ function addMessage(msg) {
50
+ const p = document.createElement('p');
51
+ p.textContent = msg;
52
+ chatBox.appendChild(p);
53
+ chatBox.scrollTop = chatBox.scrollHeight;
54
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
 
56
+ function processInput(text) {
57
+ // Simulated Model Response - Concise
58
+ const response = "Understood. Proceeding with: " + text;
59
+ addMessage("Model: " + response);
60
+ }
61
  </script>
62
  </body>
63
  </html>
64
+