Spaces:
Running
Running
Vedika commited on
Update index.html
Browse files- 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 {
|
| 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:
|
| 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
|
| 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 |
-
<
|
| 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
|
| 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 |
-
|
|
|
|
|
|
|
|
|
|
| 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 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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 |
-
//
|
| 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);
|