Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>🧬 Aura Gen 2.0</title> | |
| <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"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css"> | |
| <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> | |
| /* आपका पूरा CSS यहाँ है (बिना किसी बदलाव के) */ | |
| *{margin:0;padding:0;box-sizing:border-box;} | |
| :root{ | |
| --bg-color: #ffffff; --bg-secondary: #f5f5f7; --text-main: #1d1d1f; --text-muted: #86868b; | |
| --accent: #0071e3; --accent-hover: #0077ed; --border-light: rgba(0, 0, 0, 0.08); | |
| --glass-bg: rgba(255, 255, 255, 0.75); --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); | |
| --font-serif: 'Instrument Serif', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| --font-mono: 'Geist Mono', monospace; --radius-lg: 24px; --radius-md: 16px; --radius-sm: 8px; | |
| } | |
| html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;} | |
| .bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background: #fafafa;} | |
| .orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:0.4;animation:drift 25s ease-in-out infinite alternate;} | |
| .orb1{width:600px;height:600px;background:radial-gradient(circle,rgba(0,113,227,0.15),transparent 70%);top:-150px;left:-100px;} | |
| .orb2{width:500px;height:500px;background:radial-gradient(circle,rgba(52,199,89,0.12),transparent 70%);bottom:-100px;right:-100px;animation-delay:-10s;} | |
| @keyframes drift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(80px,50px) scale(1.1);}} | |
| .shell{position:relative;z-index:1;display:grid;grid-template-columns:280px 1fr;height:100vh;} | |
| .sidebar{display:flex;flex-direction:column;background:var(--bg-secondary);border-right:1px solid var(--border-light);overflow:hidden;} | |
| .logo-area{padding:24px 20px;border-bottom:1px solid var(--border-light);} | |
| .logo-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;} | |
| .logo-img{width:48px;height:48px;border-radius:12px;object-fit:cover;box-shadow:var(--shadow-sm);border:1px solid var(--border-light);} | |
| .logo-text{line-height:1.2;} | |
| .logo-name{font-family:var(--font-sans);font-weight:700;font-size:18px;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);} | |
| .settings{padding:20px;flex:1;overflow-y:auto;} | |
| .settings::-webkit-scrollbar{width:4px;} | |
| .settings::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:10px;} | |
| .section-lbl{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;} | |
| .field{margin-bottom:20px;} | |
| .field-lbl{font-size:12px;font-weight:500;color:var(--text-main);margin-bottom:8px;display:block;} | |
| .field textarea{width:100%;background:#ffffff;border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text-main);font-family:var(--font-sans);font-size:13px;line-height:1.5;padding:12px;resize:none;outline:none;transition:border-color 0.2s, box-shadow 0.2s;height:80px;box-shadow:inset 0 1px 2px rgba(0,0,0,0.02);} | |
| .field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,113,227,0.15);} | |
| .sl-wrap{margin-bottom:16px;} | |
| .sl-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;} | |
| .sl-title{font-size:12px;font-weight:500;color:var(--text-main);} | |
| .sl-val{font-size:11px;font-weight:500;font-family:var(--font-mono);background:#ffffff;color:var(--text-muted);padding:2px 8px;border-radius:6px;border:1px solid var(--border-light);} | |
| input[type=range]{width:100%;height:4px;appearance:none;background:rgba(0,0,0,0.1);border-radius:2px;outline:none;} | |
| input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#ffffff;box-shadow:0 1px 4px rgba(0,0,0,0.2);border:1px solid var(--border-light);cursor:pointer;transition:transform 0.1s;} | |
| input[type=range]::-webkit-slider-thumb:active{transform:scale(1.1);} | |
| .presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;} | |
| .chip{font-size:11px;font-weight:500;padding:4px 10px;border-radius:14px;background:#ffffff;border:1px solid var(--border-light);color:var(--text-muted);cursor:pointer;transition:all 0.2s;} | |
| .chip:hover{background:var(--accent);color:#ffffff;border-color:var(--accent);} | |
| .clear-btn{width:100%;padding:10px;border-radius:var(--radius-sm);background:#ffffff;border:1px solid var(--border-light);color:var(--text-main);font-family:var(--font-sans);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.2s;margin-top:10px;} | |
| .clear-btn:hover{background:#fff0f0;color:#ff3b30;border-color:#ff3b30;} | |
| .chat-main{display:flex;flex-direction:column;background:transparent;overflow:hidden;position:relative;} | |
| .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;justify-content:space-between;flex-shrink:0;z-index:10;} | |
| .model-badge{font-size:13px;font-weight:600;color:var(--text-main);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;} | |
| .messages::-webkit-scrollbar{width:6px;} | |
| .messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:10px;} | |
| .welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;flex:1;min-height:400px;animation:fadeIn 0.5s ease-out;} | |
| @keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} | |
| .welcome-logo{width:80px;height:80px;border-radius:20px;object-fit:cover;box-shadow:var(--shadow-md);margin-bottom:24px;} | |
| .welcome-title{font-family:var(--font-sans);font-size:32px;font-weight:700;color:var(--text-main);letter-spacing:-1px;margin-bottom:12px;} | |
| .welcome-sub{font-size:15px;color:var(--text-muted);max-width:500px;line-height:1.5;margin-bottom:32px;} | |
| .ex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;max-width:600px;} | |
| .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(-2px);box-shadow:var(--shadow-md);border-color:rgba(0,113,227,0.3);} | |
| .ex-title{font-size:13px;font-weight:600;color:var(--text-main);margin-bottom:4px;} | |
| .ex-desc{font-size:12px;color:var(--text-muted);line-height:1.4;} | |
| .msg{display:flex;gap:16px;animation:msgIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;max-width:85%;} | |
| @keyframes msgIn{from{opacity:0;transform:translateY(12px) scale(0.98);}to{opacity:1;transform:none;}} | |
| .msg.user{flex-direction:row-reverse;align-self:flex-end;} | |
| .msg.bot{align-self:flex-start;} | |
| .avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;} | |
| .msg.user .avatar{background:var(--bg-secondary);color:var(--text-main);border:1px solid var(--border-light);} | |
| .msg.bot .avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:1px solid var(--border-light);} | |
| .body{display:flex;flex-direction:column;gap:4px;} | |
| .msg.user .body{align-items:flex-end;} | |
| .bubble{padding:14px 18px;font-size:14.5px;line-height:1.6;color:var(--text-main);} | |
| .msg.user .bubble{background:var(--accent);color:#ffffff;border-radius:20px 20px 4px 20px;box-shadow:0 4px 12px rgba(0,113,227,0.2);} | |
| .msg.bot .bubble{background:#ffffff;border:1px solid var(--border-light);border-radius:4px 20px 20px 20px;box-shadow:var(--shadow-sm);width:100%;} | |
| .bubble p{margin-bottom:10px;} | |
| .bubble p:last-child{margin-bottom:0;} | |
| .bubble pre{background:#f5f5f7;border:1px solid rgba(0,0,0,0.05);border-radius:12px;padding:12px;margin:10px 0;overflow-x:auto;font-family:var(--font-mono);font-size:13px;} | |
| .msg.user .bubble pre{background:rgba(255,255,255,0.1);border:none;color:#fff;} | |
| .bubble code{font-family:var(--font-mono);background:rgba(0,0,0,0.05);padding:2px 6px;border-radius:6px;font-size:0.9em;} | |
| .msg.user .bubble code{background:rgba(255,255,255,0.2);} | |
| .bubble pre code{background:transparent;padding:0;} | |
| .code-wrap{position:relative;margin:12px 0;} | |
| .code-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:#e5e5ea;border-radius:12px 12px 0 0;border:1px solid rgba(0,0,0,0.05);border-bottom:none;} | |
| .code-lang-tag{font-size:12px;font-weight:600;color:var(--text-muted);font-family:var(--font-mono);} | |
| .copy-btn{padding:4px 12px;border-radius:8px;background:#ffffff;border:1px solid rgba(0,0,0,0.1);color:var(--text-main);font-size:11px;font-weight:500;cursor:pointer;transition:all 0.2s;} | |
| .copy-btn:hover{background:#f5f5f7;} | |
| .code-wrap pre{border-radius:0 0 12px 12px;margin:0;} | |
| .think-blk {background: rgba(0, 0, 0, 0.02);border: 1px solid rgba(0, 0, 0, 0.08);border-radius: 12px;padding: 12px 16px;margin-bottom: 14px;box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);transition: all 0.3s ease;} | |
| .think-blk:hover {background: rgba(0, 0, 0, 0.04);} | |
| .think-hdr {display: flex;align-items: center;font-size: 13px;font-weight: 600;color: var(--text-muted);cursor: pointer;user-select: none;} | |
| .think-hdr::before {content: '►';font-size: 10px;margin-right: 10px;transition: transform 0.2s ease;color: #a1a1a6;} | |
| .think-blk.open .think-hdr::before {transform: rotate(90deg);} | |
| .think-body {margin-top: 12px;display: none;border-top: 1px dashed rgba(0,0,0,0.1);padding-top: 12px;font-size: 13.5px;color: var(--text-muted);line-height: 1.6;font-family: var(--font-mono);white-space: pre-wrap;} | |
| .think-blk.open .think-body {display: block;animation: fadeInDown 0.3s ease;} | |
| @keyframes fadeInDown {from { opacity: 0; transform: translateY(-5px); }to { opacity: 1; transform: translateY(0); }} | |
| .typing{display:flex;align-items:center;gap:6px;padding:8px 4px;} | |
| .typing span{width:8px;height:8px;border-radius:50%;background:var(--text-muted);opacity:0.4;animation:bounce 1s ease-in-out infinite;} | |
| .typing span:nth-child(2){animation-delay:0.2s;} | |
| .typing span:nth-child(3){animation-delay:0.4s;} | |
| @keyframes bounce{0%,100%{transform:translateY(0);opacity:0.4;}50%{transform:translateY(-6px);opacity:1;}} | |
| .input-container{padding:0 40px 30px;background:linear-gradient(to top, var(--bg-color) 70%, transparent);position:relative;z-index:10;} | |
| .input-wrap{display:flex;align-items:flex-end;gap:12px;background:var(--glass-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-light);border-radius:24px;padding:10px 14px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow 0.3s;} | |
| .input-wrap:focus-within{box-shadow:0 12px 40px rgba(0,0,0,0.12), 0 0 0 3px rgba(0,113,227,0.1);} | |
| .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:200px;min-height:24px;padding:10px 0;} | |
| .chat-ta::placeholder{color:var(--text-muted);} | |
| .input-acts{display:flex;align-items:center;gap:8px;padding-bottom:6px;} | |
| .icon-btn{width:36px;height:36px;border-radius:50%;background:#f5f5f7;border:1px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);font-size:16px;transition:all 0.2s;flex-shrink:0;} | |
| .icon-btn:hover{background:#e5e5ea;color:var(--text-main);} | |
| .file-btn{position:relative;} | |
| .file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;} | |
| .send-btn{width:40px;height:40px;border-radius:50%;border:none;background:var(--text-main);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.2s, opacity 0.2s;} | |
| .send-btn svg{width:18px;height:18px;fill:currentColor;} | |
| .send-btn:hover{transform:scale(1.05);} | |
| .send-btn:disabled{opacity:0.3;cursor:not-allowed;transform:none;} | |
| .input-hint{text-align:center;font-size:11px;color:var(--text-muted);margin-top:12px;font-weight:500;} | |
| .img-prev{display:none;padding:12px 20px;background:#f5f5f7;border-radius:16px;margin:0 40px 12px;border:1px solid var(--border-light);} | |
| .img-prev.show{display:flex;align-items:center;gap:12px;} | |
| .img-th{width:48px;height:48px;object-fit:cover;border-radius:10px;box-shadow:var(--shadow-sm);} | |
| .img-nm{font-size:13px;font-weight:600;color:var(--text-main);} | |
| .img-sz{font-size:11px;color:var(--text-muted);} | |
| .img-rm{margin-left:auto;width:28px;height:28px;border-radius:50%;background:#e5e5ea;border:none;cursor:pointer;color:var(--text-muted);transition:background 0.2s;} | |
| .img-rm:hover{background:#ff3b30;color:#fff;} | |
| @media(max-width:768px){ | |
| .shell{grid-template-columns:1fr;} | |
| .sidebar{display:none;} | |
| .messages{padding:20px;} | |
| .input-container{padding:0 20px 20px;} | |
| .msg{max-width:95%;} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bg"> | |
| <div class="orb orb1"></div> | |
| <div class="orb orb2"></div> | |
| </div> | |
| <div class="shell"> | |
| <aside class="sidebar"> | |
| <div class="logo-area"> | |
| <div class="logo-row"> | |
| <img src="https://i.ibb.co/5hkfdYHz/Clean-Elegant-Typography-Brand-Logo-20260519-212839-0000.png" alt="Aura Logo" class="logo-img"> | |
| <div class="logo-text"> | |
| <div class="logo-name">Aura Gen 2.0</div> | |
| <div class="logo-sub">Advanced AI System</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="settings"> | |
| <div class="section-lbl">Preferences</div> | |
| <div class="field"> | |
| <span class="field-lbl">System Prompt (Instructions)</span> | |
| <div class="presets"> | |
| <span class="chip" onclick="setPreset('general')">General</span> | |
| <span class="chip" onclick="setPreset('code')">Code</span> | |
| <span class="chip" onclick="setPreset('math')">Math</span> | |
| </div> | |
| <textarea id="sysPrompt">You are Aura Gen 2.0, a state-of-the-art AI assistant developed by Divy Bhai. You possess world-class expertise in software engineering, advanced algorithmic logic, and complex problem-solving. Always provide highly optimized, secure, and precise solutions.</textarea> | |
| </div> | |
| <div class="sl-wrap"> | |
| <div class="sl-meta"><span class="sl-title">Max Tokens</span><span class="sl-val" id="tokVal">4096</span></div> | |
| <input type="range" id="tokSl" min="64" max="16384" value="4096" step="64" oninput="document.getElementById('tokVal').textContent=this.value"> | |
| </div> | |
| <div class="sl-wrap"> | |
| <div class="sl-meta"><span class="sl-title">Temperature</span><span class="sl-val" id="tempVal">0.60</span></div> | |
| <input type="range" id="tempSl" min="0" max="1.5" value="0.6" step="0.05" oninput="document.getElementById('tempVal').textContent=parseFloat(this.value).toFixed(2)"> | |
| </div> | |
| <button class="clear-btn" onclick="clearChat()">Clear Conversation</button> | |
| </div> | |
| </aside> | |
| <main class="chat-main"> | |
| <header class="chat-hdr"> | |
| <div class="model-badge"> | |
| <div class="status-dot"></div> | |
| Aura Gen 2.0 Ready | |
| </div> | |
| </header> | |
| <div class="img-prev" id="imgPrev"> | |
| <img class="img-th" id="imgThumb" src=""> | |
| <div> | |
| <div class="img-nm" id="imgName">document.pdf</div> | |
| <div class="img-sz" id="imgSize">0 KB</div> | |
| </div> | |
| <button class="img-rm" onclick="removeImg()">✕</button> | |
| </div> | |
| <div class="messages" id="msgs"> | |
| <div class="welcome" id="welcome"> | |
| <img src="https://i.ibb.co/5hkfdYHz/Clean-Elegant-Typography-Brand-Logo-20260519-212839-0000.png" alt="Aura Logo" class="welcome-logo"> | |
| <div class="welcome-title">How can I help you today?</div> | |
| <div class="welcome-sub">I am Aura Gen 2.0. I specialize in coding, deep reasoning, and complex logic. Upload images or ask anything!</div> | |
| <div class="ex-grid"> | |
| <div class="ex-card" onclick="sendEx('Write a modern React component with Tailwind CSS that displays a glass-morphism pricing card.')"> | |
| <div class="ex-title">Code Generation</div> | |
| <div class="ex-desc">Write optimized, secure code</div> | |
| </div> | |
| <div class="ex-card" onclick="sendEx('Explain the Model Context Protocol (MCP) and how it improves AI latency compared to standard REST APIs.')"> | |
| <div class="ex-title">Deep Reasoning</div> | |
| <div class="ex-desc">Step-by-step technical analysis</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="input-container"> | |
| <div class="input-wrap"> | |
| <textarea class="chat-ta" id="chatInput" placeholder="Message Aura Gen 2.0..." rows="1" onkeydown="handleKey(event)" oninput="autoGrow(this)"></textarea> | |
| <div class="input-acts"> | |
| <label class="icon-btn file-btn" title="Upload Image or File"> | |
| 📎<input type="file" accept="image/*,audio/*,.txt,.pdf" onchange="handleFile(this)" id="fileInput"> | |
| </label> | |
| <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">Aura Gen 2.0 can make mistakes. Consider verifying critical information.</div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| const S={history:[],pending:null,busy:false, | |
| presets:{ | |
| general:'You are Aura Gen 2.0, a state-of-the-art AI assistant developed by Divy Bhai. You possess world-class expertise in software engineering, advanced algorithmic logic, and complex problem-solving. Always provide highly optimized, secure, and precise solutions in English by default.', | |
| code:'You are an expert software engineer. Write clean, efficient, well-commented code. Explain your approach before writing. Use modern best practices.', | |
| math:'You are a world-class mathematician. Break problems step-by-step. Show full working. Use LaTeX where helpful.' | |
| } | |
| }; | |
| function setPreset(k){document.getElementById('sysPrompt').value=S.presets[k];} | |
| // मल्टीमोडल फ़ाइल हैंडलिंग | |
| function handleFile(input){ | |
| const f=input.files[0];if(!f)return; | |
| const r=new FileReader(); | |
| r.onload=e=>{ | |
| const base64Data = e.target.result.split(',')[1]; | |
| let type = 'file'; | |
| if(f.type.startsWith('image/')) type = 'image'; | |
| else if(f.type.startsWith('audio/')) type = 'audio'; | |
| S.pending={type: type, data: base64Data, name: f.name, size: fmtSz(f.size)}; | |
| if(type === 'image') { | |
| document.getElementById('imgThumb').src = e.target.result; | |
| document.getElementById('imgThumb').style.display='block'; | |
| } else { | |
| document.getElementById('imgThumb').style.display='none'; | |
| } | |
| document.getElementById('imgName').textContent=f.name; | |
| document.getElementById('imgSize').textContent=fmtSz(f.size); | |
| document.getElementById('imgPrev').classList.add('show'); | |
| }; | |
| r.readAsDataURL(f); | |
| } | |
| function removeImg(){S.pending=null;document.getElementById('imgPrev').classList.remove('show');document.getElementById('fileInput').value='';} | |
| function fmtSz(b){return b<1048576?`${(b/1024).toFixed(0)} KB`:`${(b/1048576).toFixed(1)} MB`;} | |
| 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';} | |
| // 🌐 नई API कॉलिंग लॉजिक (Flask Backend के लिए) | |
| async function sendMsg(){ | |
| if(S.busy)return; | |
| const inp=document.getElementById('chatInput'); | |
| const msg=inp.value.trim();if(!msg && !S.pending)return; | |
| 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 attachments = []; | |
| if(S.pending) { | |
| attachments.push(S.pending); | |
| appendUser(msg || '[फ़ाइल संलग्न की गई]', '📎 '+S.pending.name); | |
| } else { | |
| appendUser(msg); | |
| } | |
| removeImg(); | |
| const botDiv=appendBot(); | |
| // साइडबार से वैल्यूज़ लेना | |
| const sysPrompt = document.getElementById('sysPrompt').value.trim(); | |
| const maxTokens = parseInt(document.getElementById('tokSl').value); | |
| const temp = parseFloat(document.getElementById('tempSl').value); | |
| const payload = { | |
| message: msg, | |
| attachments: attachments, | |
| system_prompt: sysPrompt, | |
| max_tokens: maxTokens, | |
| temperature: temp | |
| }; | |
| try{ | |
| const res = await fetch('/api/chat', { | |
| method: 'POST', | |
| headers: {'Content-Type': 'application/json'}, | |
| body: JSON.stringify(payload) | |
| }); | |
| const reader = res.body.getReader(); | |
| const decoder = new TextDecoder(); | |
| let accumulatedText = ""; | |
| 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; | |
| renderBot(botDiv, accumulatedText); | |
| scrollDown(); | |
| } | |
| } catch (e) { } | |
| } | |
| } | |
| } | |
| }catch(err){ | |
| renderBot(botDiv,`**Error:** सर्वर से संपर्क नहीं हो पाया। कृपया दोबारा प्रयास करें।`); | |
| } | |
| S.busy=false; | |
| document.getElementById('sendBtn').disabled=false; | |
| scrollDown(); | |
| } | |
| function sendEx(t){document.getElementById('chatInput').value=t;sendMsg();} | |
| function appendUser(text, badgeText){ | |
| let bHtml = badgeText ? `<div class="pdf-badge">${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);scrollDown(); | |
| } | |
| function appendBot(){ | |
| const el=document.createElement('div');el.className='msg bot'; | |
| el.innerHTML=`<div class="avatar"><img src="https://i.ibb.co/5hkfdYHz/Clean-Elegant-Typography-Brand-Logo-20260519-212839-0000.png" class="avatar-img"></div><div class="body"><div class="bubble"><div class="typing"><span></span><span></span><span></span></div></div></div>`; | |
| document.getElementById('msgs').appendChild(el);scrollDown();return el; | |
| } | |
| function renderBot(el, raw) { | |
| const b = el.querySelector('.bubble'); | |
| let thinkHtml = ''; | |
| let ans = raw; | |
| const thinkRegex = /<think>([\s\S]*?)(<\/think>|$)/i; | |
| let match = raw.match(thinkRegex); | |
| if (match) { | |
| const fullTag = match[0]; | |
| let chain = match[1].replace(/<[^>]+>/g, '').trim(); | |
| ans = raw.replace(fullTag, '').trim(); | |
| if (match[2] === '') { | |
| thinkHtml = `<div class="think-blk open" style="border-color:var(--accent)"><div class="think-hdr">Reasoning <span class="typing" style="display:inline-flex;padding:0 4px"><span></span><span></span><span></span></span></div><div class="think-body">${esc(chain)}</div></div>`; | |
| ans = ''; | |
| } else { | |
| thinkHtml = `<div class="think-blk" onclick="this.classList.toggle('open')"><div class="think-hdr">Reasoning Process</div><div class="think-body">${esc(chain)}</div></div>`; | |
| } | |
| } | |
| b.innerHTML = thinkHtml + md(ans); | |
| } | |
| (function setupMarked(){ | |
| if(typeof marked==='undefined')return; | |
| const renderer=new marked.Renderer(); | |
| renderer.code=(code,lang)=>{ | |
| const language=lang&&hljs.getLanguage(lang)?lang:'plaintext'; | |
| const highlighted=hljs.highlight(code.text||code,{language}).value; | |
| const escaped=(code.text||code).replace(/'/g,"\\'").replace(/\\n/g,"\\\\n"); | |
| return `<div class="code-wrap"><div class="code-header"><span class="code-lang-tag">${language}</span><button class="copy-btn" onclick="navigator.clipboard.writeText('${escaped}')">Copy</button></div><pre><code class="hljs">${highlighted}</code></pre></div>`; | |
| }; | |
| marked.setOptions({renderer,breaks:true}); | |
| })(); | |
| function md(t){return marked?marked.parse(t):t;} | |
| function esc(t){return t.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');} | |
| function scrollDown(){const m=document.getElementById('msgs');m.scrollTop=m.scrollHeight;} | |
| function clearChat(){S.history=[];document.getElementById('msgs').innerHTML='';location.reload();} | |
| </script> | |
| </body> | |
| </html> | |