Vedika commited on
Commit
50e4c37
·
verified ·
1 Parent(s): 5f7bedc

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +20 -33
index.html CHANGED
@@ -77,16 +77,6 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
77
  .settings::-webkit-scrollbar{width:4px;}
78
  .settings::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:10px;}
79
 
80
- .toggle-wrapper {display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 16px; border-radius: 12px; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);}
81
- .toggle-label {font-size: 13px; font-weight: 600; color: var(--text-main); display: flex; align-items: center; gap: 8px;}
82
- .toggle-label span {font-size: 11px; color: var(--text-muted); font-weight: 500; display: block; margin-top: 2px;}
83
- .switch {position: relative; display: inline-block; width: 44px; height: 24px;}
84
- .switch input {opacity: 0; width: 0; height: 0;}
85
- .slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e5e5ea; transition: .4s; border-radius: 24px;}
86
- .slider:before {position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2);}
87
- input:checked + .slider {background-color: var(--accent-green);}
88
- input:checked + .slider:before {transform: translateX(20px);}
89
-
90
  .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;}
91
  .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);}
92
  .brand-box h3 {font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--text-main); margin-bottom: 6px;}
@@ -142,10 +132,8 @@ input:checked + .slider:before {transform: translateX(20px);}
142
  .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;}
143
  .action-btn:hover{background:#e5e5ea;transform:translateY(-1px);}
144
 
145
- /* Reasoning / Thinking Box */
146
- .think-box {background: #fdfdfd;border: 1px solid var(--border-light);border-left: 4px solid var(--accent-green);border-radius: 8px;padding: 14px 16px;margin-bottom: 16px;font-family: var(--font-mono);font-size: 13.5px;color: var(--text-muted);line-height: 1.5;box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);}
147
- .think-title {font-weight: 600; color: var(--text-main); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; font-family: var(--font-sans);}
148
- body:not(.show-thinking) .think-box {display: none;}
149
 
150
  /* Markdown inside bubble */
151
  .bubble p{margin-bottom:12px;}
@@ -204,8 +192,7 @@ body:not(.show-thinking) .think-box {display: none;}
204
 
205
  .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);}
206
  .send-btn svg{width:18px;height:18px;fill:#1d1d1f;transition:transform 0.2s;}
207
- .send-btn:hover{box-shadow:0 6px 16px rgba(255,153,51,0.3);transform:translateY(-1px);}
208
- .send-btn:hover svg{transform:translate(2px, -2px);}
209
  .send-btn:disabled{opacity:0.4;cursor:not-allowed;filter:grayscale(100%);transform:none;}
210
  .input-hint{text-align:center;font-size:11px;color:var(--text-muted);margin-top:12px;font-weight:500;}
211
 
@@ -254,7 +241,7 @@ body:not(.show-thinking) .think-box {display: none;}
254
  }
255
  </style>
256
  </head>
257
- <body class="show-thinking">
258
 
259
  <!-- TOAST NOTIFICATION -->
260
  <div id="toast-container"></div>
@@ -297,13 +284,7 @@ body:not(.show-thinking) .think-box {display: none;}
297
  </div>
298
 
299
  <div class="settings">
300
- <div class="toggle-wrapper">
301
- <div class="toggle-label">🧠 Reasoning Mode<span>Show internal thinking</span></div>
302
- <label class="switch">
303
- <input type="checkbox" id="thinkingToggle" checked onchange="toggleThinking(this)">
304
- <span class="slider"></span>
305
- </label>
306
- </div>
307
 
308
  <div class="brand-box">
309
  <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Identity">
@@ -331,7 +312,7 @@ body:not(.show-thinking) .think-box {display: none;}
331
  <div class="welcome" id="welcome">
332
  <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo" class="welcome-logo">
333
  <div class="welcome-title">Welcome, User!</div>
334
- <div class="welcome-sub">I am Arjun 2.O, developed by Abhay Kumar. I am equipped with advanced reasoning, workspace coding, and image generation.</div>
335
 
336
  <div id="guestBadge" class="guest-badge">Guest Mode: <span id="guestCountDisplay">0</span>/3 Queries Used.</div>
337
 
@@ -495,11 +476,6 @@ function showToast(msg) {
495
  setTimeout(() => t.remove(), 3000);
496
  }
497
 
498
- function toggleThinking(el) {
499
- if(el.checked) document.body.classList.add('show-thinking');
500
- else document.body.classList.remove('show-thinking');
501
- }
502
-
503
  // --- VOICE RECOGNITION (SMART PUNCTUATION LOGIC) ---
504
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
505
  let recognition = null;
@@ -509,7 +485,10 @@ if (SpeechRecognition) {
509
  recognition = new SpeechRecognition();
510
  recognition.continuous = false; // Auto stops when paused
511
  recognition.interimResults = false;
512
- recognition.lang = 'hi-IN'; // Set to Hindi/English mix support usually
 
 
 
513
 
514
  recognition.onstart = () => { isRecording = true; document.getElementById('voiceBtn').classList.add('recording'); };
515
  recognition.onresult = (event) => {
@@ -832,8 +811,13 @@ async function sendMsg(){
832
  document.getElementById('msgs').appendChild(botDiv);
833
  forceScrollDown();
834
 
 
835
  const sysPrompt = `You are Arjun 2.O, a state-of-the-art AI assistant developed by Abhay Kumar.
836
- Always communicate respectfully.
 
 
 
 
837
 
838
  CRITICAL IMAGE GENERATION PROTOCOL:
839
  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.
@@ -842,7 +826,7 @@ async function sendMsg(){
842
  Choose the best model based on the prompt. Example: if user says anime, use flux-anime.
843
  Always include this markdown tag when image generation is requested.`;
844
 
845
- // FIXED MEMORY BUG: Creating a clean history map that removes custom properties like 'badge' which breaks the HuggingFace API.
846
  const cleanHistory = S.history.slice(0, -1).map(item => ({
847
  role: item.role,
848
  content: item.content
@@ -864,6 +848,8 @@ async function sendMsg(){
864
  body: JSON.stringify(payload)
865
  });
866
 
 
 
867
  const reader = res.body.getReader();
868
  const decoder = new TextDecoder();
869
  let accumulatedText = "";
@@ -928,6 +914,7 @@ function renderBotText(el, raw, isStreaming) {
928
  const { mainText, thinkText } = parseThinking(raw);
929
  let html = '';
930
 
 
931
  if (thinkText) { html += `<div class="think-box"><div class="think-title">🧠 Reasoning Process</div>${esc(thinkText)}</div>`; }
932
 
933
  html += marked.parse(mainText);
 
77
  .settings::-webkit-scrollbar{width:4px;}
78
  .settings::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:10px;}
79
 
 
 
 
 
 
 
 
 
 
 
80
  .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;}
81
  .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);}
82
  .brand-box h3 {font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--text-main); margin-bottom: 6px;}
 
132
  .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;}
133
  .action-btn:hover{background:#e5e5ea;transform:translateY(-1px);}
134
 
135
+ /* Reasoning / Thinking Box - Hidden completely as per request */
136
+ .think-box {display: none;}
 
 
137
 
138
  /* Markdown inside bubble */
139
  .bubble p{margin-bottom:12px;}
 
192
 
193
  .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);}
194
  .send-btn svg{width:18px;height:18px;fill:#1d1d1f;transition:transform 0.2s;}
195
+ .send-btn:hover{box-shadow:0 6px 16px rgba(255,153,51,0.3);transform:translate(2px, -2px);}
 
196
  .send-btn:disabled{opacity:0.4;cursor:not-allowed;filter:grayscale(100%);transform:none;}
197
  .input-hint{text-align:center;font-size:11px;color:var(--text-muted);margin-top:12px;font-weight:500;}
198
 
 
241
  }
242
  </style>
243
  </head>
244
+ <body>
245
 
246
  <!-- TOAST NOTIFICATION -->
247
  <div id="toast-container"></div>
 
284
  </div>
285
 
286
  <div class="settings">
287
+ <!-- Reasoning Toggle Button has been completely removed as requested -->
 
 
 
 
 
 
288
 
289
  <div class="brand-box">
290
  <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Identity">
 
312
  <div class="welcome" id="welcome">
313
  <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo" class="welcome-logo">
314
  <div class="welcome-title">Welcome, User!</div>
315
+ <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>
316
 
317
  <div id="guestBadge" class="guest-badge">Guest Mode: <span id="guestCountDisplay">0</span>/3 Queries Used.</div>
318
 
 
476
  setTimeout(() => t.remove(), 3000);
477
  }
478
 
 
 
 
 
 
479
  // --- VOICE RECOGNITION (SMART PUNCTUATION LOGIC) ---
480
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
481
  let recognition = null;
 
485
  recognition = new SpeechRecognition();
486
  recognition.continuous = false; // Auto stops when paused
487
  recognition.interimResults = false;
488
+
489
+ // UPDATED LANGUAGE LOGIC: English India supports Hinglish and English effectively
490
+ // It will prevent strict Hindi character conversion when you speak English.
491
+ recognition.lang = 'en-IN';
492
 
493
  recognition.onstart = () => { isRecording = true; document.getElementById('voiceBtn').classList.add('recording'); };
494
  recognition.onresult = (event) => {
 
811
  document.getElementById('msgs').appendChild(botDiv);
812
  forceScrollDown();
813
 
814
+ // STRICT BILINGUAL PROMPT ADDED
815
  const sysPrompt = `You are Arjun 2.O, a state-of-the-art AI assistant developed by Abhay Kumar.
816
+ LANGUAGE PROTOCOL: You are fully bilingual. You MUST write and respond fluently in BOTH English and Hindi.
817
+ 1. If the user asks in English, reply entirely in English.
818
+ 2. If the user asks in Hindi, reply in Hindi.
819
+ 3. If the user uses a mix (Hinglish), you can respond naturally in the same mixed tone.
820
+ NEVER force Hindi when the user is speaking English. Always adapt dynamically to the user's language.
821
 
822
  CRITICAL IMAGE GENERATION PROTOCOL:
823
  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.
 
826
  Choose the best model based on the prompt. Example: if user says anime, use flux-anime.
827
  Always include this markdown tag when image generation is requested.`;
828
 
829
+ // Clean history for backend API compatibility
830
  const cleanHistory = S.history.slice(0, -1).map(item => ({
831
  role: item.role,
832
  content: item.content
 
848
  body: JSON.stringify(payload)
849
  });
850
 
851
+ if (!res.ok) throw new Error("Server error");
852
+
853
  const reader = res.body.getReader();
854
  const decoder = new TextDecoder();
855
  let accumulatedText = "";
 
914
  const { mainText, thinkText } = parseThinking(raw);
915
  let html = '';
916
 
917
+ // Note: Reasoning Box display is completely disabled by CSS (.think-box {display:none})
918
  if (thinkText) { html += `<div class="think-box"><div class="think-title">🧠 Reasoning Process</div>${esc(thinkText)}</div>`; }
919
 
920
  html += marked.parse(mainText);