Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DEVU'S AI - Premium Engineering Workspace</title> | |
| <script src="[https://cdn.jsdelivr.net/npm/marked/marked.min.js](https://cdn.jsdelivr.net/npm/marked/marked.min.js)"></script> | |
| <link rel="stylesheet" href="[https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css](https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css)"> | |
| <script src="[https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js](https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js)"></script> | |
| <style> | |
| * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } | |
| :root { | |
| --bg-main: #030712; | |
| --bg-side: #090d16; | |
| --bg-surface: #111827; | |
| --bg-chat-user: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); | |
| --bg-chat-bot: #161e2e; | |
| --text-main: #f9fafb; | |
| --text-muted: #9ca3af; | |
| --border-color: #1f2937; | |
| --accent: #6366f1; | |
| --accent-glow: rgba(99, 102, 241, 0.35); | |
| --neon-cyan: #06b6d4; | |
| } | |
| body { background-color: var(--bg-main); color: var(--text-main); display: flex; height: 100dvh; overflow: hidden; } | |
| .app-layout { display: flex; width: 100%; height: 100%; } | |
| sidebar { | |
| width: 320px; | |
| background-color: var(--bg-side); | |
| border-right: 1px solid rgba(255, 255, 255, 0.03); | |
| display: flex; | |
| flex-direction: column; | |
| padding: 1.5rem; | |
| gap: 1.5rem; | |
| box-shadow: 10px 0 30px rgba(0,0,0,0.5); | |
| flex-shrink: 0; | |
| } | |
| @media (max-width: 768px) { sidebar { display: none; } } | |
| main { flex: 1; display: flex; flex-direction: column; height: 100dvh; overflow: hidden; position: relative; background: radial-gradient(circle at 50% 0%, #0f172a 0%, var(--bg-main) 70%); } | |
| .brand { | |
| font-size: 1.5rem; | |
| font-weight: 900; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.7rem; | |
| color: #fff; | |
| letter-spacing: -0.03em; | |
| background: linear-gradient(to right, #ffffff 20%, #a5b4fc 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .sys-wrap { display: flex; flex-direction: column; gap: 0.7rem; flex: 1; } | |
| .sys-wrap label { font-size: 0.72rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.08em; font-weight: 700; } | |
| .sys-ta { | |
| width: 100%; | |
| height: 220px; | |
| background-color: rgba(3, 7, 18, 0.6); | |
| border: 1px solid var(--border-color); | |
| border-radius: 10px; | |
| color: #e5e7eb; | |
| padding: 0.85rem; | |
| font-size: 0.8rem; | |
| resize: none; | |
| line-height: 1.5; | |
| font-family: 'Fira Code', monospace; | |
| } | |
| .sys-ta:focus { border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); outline: none; } | |
| .preset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } | |
| .btn-preset { | |
| background-color: var(--bg-surface); | |
| border: 1px solid rgba(255, 255, 255, 0.03); | |
| color: var(--text-main); | |
| padding: 0.7rem; | |
| border-radius: 8px; | |
| font-size: 0.82rem; | |
| cursor: pointer; | |
| text-align: center; | |
| font-weight: 600; | |
| transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .btn-preset:hover { background-color: #1f2937; border-color: var(--accent); transform: translateY(-1px); } | |
| .btn-clear { | |
| background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%); | |
| border: none; | |
| color: #fff; | |
| padding: 0.95rem; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| font-weight: 700; | |
| margin-top: auto; | |
| box-shadow: 0 4px 15px rgba(225, 29, 72, 0.3); | |
| } | |
| header { | |
| height: 70px; | |
| border-bottom: 1px solid rgba(255,255,255,0.03); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 3rem; | |
| background-color: rgba(9, 13, 22, 0.7); | |
| backdrop-filter: blur(20px); | |
| z-index: 10; | |
| } | |
| .header-title { font-weight: 700; font-size: 1.15rem; color: #fff; } | |
| .stats { display: flex; gap: 1.75rem; font-size: 0.85rem; color: var(--text-muted); } | |
| .stats strong { color: var(--neon-cyan); font-weight: 700; } | |
| #msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 2.5rem 3rem; display: flex; flex-direction: column; gap: 2rem; scroll-behavior: smooth; } | |
| .msg { display: flex; gap: 1.5rem; max-width: 1150px; width: 100%; margin: 0 auto; animation: slideUp 0.3s ease-out; } | |
| @keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } | |
| .msg.user { flex-direction: row-reverse; } | |
| .avatar { | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 12px; | |
| background: #1f2937; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 800; | |
| flex-shrink: 0; | |
| font-size: 1.15rem; | |
| } | |
| .msg.user .avatar { background: var(--bg-chat-user); color: white; } | |
| .body { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; max-width: calc(100% - 65px); } | |
| .msg.user .body { align-items: flex-end; } | |
| .bubble { padding: 1.25rem 1.75rem; border-radius: 16px; font-size: 1.02rem; line-height: 1.65; color: #f3f4f6; word-break: break-word; width: 100%; } | |
| .msg.user .bubble { background: var(--bg-chat-user); border-bottom-right-radius: 2px; color: #fff; width: auto; max-width: 85%; } | |
| .msg.bot .bubble { background-color: rgba(22, 30, 46, 0.85); border-bottom-left-radius: 2px; border: 1px solid var(--border-color); } | |
| .bubble details { background: rgba(99, 102, 241, 0.06); border: 1px solid rgba(99, 102, 241, 0.25); padding: 0.85rem 1.1rem; border-radius: 10px; margin-bottom: 1rem; font-size: 0.95rem; color: #a5b4fc; width: 100%; } | |
| .bubble details summary { cursor: pointer; color: #818cf8; font-weight: 700; outline: none; } | |
| .code-container { position: relative; margin: 1.2rem 0; } | |
| .bubble pre { margin: 0; padding: 1.25rem; border-radius: 12px; background: #05070c ; overflow-x: auto; border: 1px solid rgba(255,255,255,0.04); } | |
| .bubble code { font-family: 'Fira Code', monospace; font-size: 0.92rem; } | |
| .copy-btn { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background: rgba(31, 41, 55, 0.8); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| color: #e5e7eb; | |
| padding: 0.4rem 0.75rem; | |
| border-radius: 6px; | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| opacity: 0; | |
| transition: all 0.2s ease-in-out; | |
| z-index: 5; | |
| } | |
| .code-container:hover .copy-btn { opacity: 1; } | |
| .copy-btn:hover { background: var(--accent); color: white; } | |
| .msg-time { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; } | |
| .typing { display: flex; gap: 6px; padding: 8px 12px; align-items: center; } | |
| .typing span { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; } | |
| .typing span:nth-child(1) { animation-delay: -0.32s; } | |
| .typing span:nth-child(2) { animation-delay: -0.16s; } | |
| @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } | |
| #welcome { max-width: 850px; margin: auto; text-align: center; display: flex; flex-direction: column; gap: 3rem; padding: 4rem 0; } | |
| #welcome h1 { font-size: 2.8rem; font-weight: 900; background: linear-gradient(135deg, #ffffff 30%, #6366f1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } | |
| .ex-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } | |
| .ex-card { background: rgba(17, 24, 39, 0.55); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: 14px; text-align: left; cursor: pointer; } | |
| .ex-card:hover { border-color: var(--accent); background: rgba(31, 41, 55, 0.7); } | |
| .ex-card h4 { margin-bottom: 0.4rem; color: #fff; } | |
| .inputbar { flex-shrink: 0; width: 100%; border-top: 1px solid rgba(255,255,255,0.02); background-color: rgba(9, 13, 22, 0.8); padding: 1.5rem 3rem; } | |
| .input-wrap { max-width: 1150px; width: 100%; margin: 0 auto; background-color: rgba(3, 7, 18, 0.8); border: 1px solid var(--border-color); border-radius: 14px; display: flex; align-items: flex-end; padding: 0.75rem; gap: 1rem; } | |
| .input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 20px var(--accent-glow); } | |
| .attach-btn { background: transparent; border: none; color: var(--text-muted); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.4rem; } | |
| .chat-ta { flex: 1; background: transparent; border: none; outline: none; color: var(--text-main); font-size: 1.05rem; line-height: 1.5; padding: 0.5rem 0.25rem; min-height: 40px; max-height: 200px; overflow-y: auto; resize: none; } | |
| .send-btn { background: var(--accent); border: none; color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; } | |
| .send-btn:disabled { background: #1f2937; color: var(--text-muted); cursor: not-allowed; } | |
| .input-bottom-row { max-width: 1150px; width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; margin-top: 0.6rem; font-size: 0.8rem; color: var(--text-muted); } | |
| .toast { position: fixed; bottom: 130px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 0.85rem 1.75rem; border-radius: 30px; font-size: 0.92rem; opacity: 0; transition: all 0.3s ease; z-index: 999; font-weight: 600; } | |
| .toast.show { opacity: 1; transform: translate(-50%, 0); } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-layout"> | |
| <sidebar> | |
| <div class="brand"><span>🧬</span> DEVU'S AI</div> | |
| <hr style="border: 0; border-top: 1px solid rgba(255,255,255,0.05);"> | |
| <div class="sys-wrap"> | |
| <label for="sysPrompt">System Context Protocol</label> | |
| <textarea id="sysPrompt" class="sys-ta"></textarea> | |
| <label style="margin-top: 0.75rem;">Quick Presets</label> | |
| <div class="preset-grid"> | |
| <button class="btn-preset" onclick="setPreset('general')">⚡ Matrix</button> | |
| <button class="btn-preset" onclick="setPreset('code')">💻 Dev Engine</button> | |
| <button class="btn-preset" onclick="setPreset('math')">🧮 Quantum</button> | |
| <button class="btn-preset" onclick="setPreset('creative')">🎨 Synthesis</button> | |
| </div> | |
| </div> | |
| <button class="btn-clear" onclick="clearChat()">Clear Session Data</button> | |
| </sidebar> | |
| <main> | |
| <header> | |
| <div class="header-title">Quantum Workspace Session</div> | |
| <div class="stats"> | |
| <span>Nodes Connected: <strong id="stMsgs">0</strong></span> | |
| <span>Context Capacity: <strong>131K Tokens</strong></span> | |
| </div> | |
| </header> | |
| <div id="msgs"> | |
| <div id="welcome"> | |
| <h1>What systems shall we compile today?</h1> | |
| <div class="ex-grid"> | |
| <div class="ex-card" onclick="sendEx('Write a modular async rate limiter in Node.js.')"> | |
| <h4>💻 Elite Code Architecture</h4> | |
| <p>Write a modular async rate limiter in Node.js.</p> | |
| </div> | |
| <div class="ex-card" onclick="sendEx('Explain the math behind Quantum computing superposition.')"> | |
| <h4>🧮 Complex Concept Matrix</h4> | |
| <p>Explain the math behind Quantum computing superposition.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="inputbar"> | |
| <div class="input-wrap"> | |
| <button class="attach-btn" onclick="showToast('File uploads active')">📎</button> | |
| <textarea id="chatInput" class="chat-ta" placeholder="Send secure directive to DEVU'S AI..." oninput="autoGrow(this)"></textarea> | |
| <button id="sendBtn" class="send-btn" onclick="handleSend()" disabled>➔</button> | |
| </div> | |
| <div class="input-bottom-row"> | |
| <span>Layout Optimized: <b>Shift + Enter</b> for line wrap</span> | |
| <span>Engine: DEVU'S AI NEG-9B</span> | |
| </div> | |
| </footer> | |
| </main> | |
| </div> | |
| <div id="toast" class="toast"></div> | |
| <script> | |
| const systemPresets = { | |
| general: `[SYSTEM OPERATIONAL TRAJECTORY]\n- COGNITIVE SYSTEM IDENTITY: DEVU'S AI`, | |
| code: "You are DEVU'S AI specializing in software engineering.", | |
| math: "You are DEVU'S AI operating as a world-class mathematician.", | |
| creative: "You are DEVU'S AI, a brilliant creative engine." | |
| }; | |
| const sysPrompt = document.getElementById('sysPrompt'); | |
| const chatInput = document.getElementById('chatInput'); | |
| const sendBtn = document.getElementById('sendBtn'); | |
| const msgsContainer = document.getElementById('msgs'); | |
| const welcomeScreen = document.getElementById('welcome'); | |
| const toast = document.getElementById('toast'); | |
| let chatHistory = []; | |
| let messageCount = 0; | |
| sysPrompt.value = `================================================================================ | |
| CORE SPECIFICATION PROTOCOL: DEVU'S AI TOTAL COGNITIVE COMPILATION MATRIX | |
| ================================================================================ | |
| [SYSTEM OPERATIONAL TRAJECTORY] | |
| - COGNITIVE SYSTEM IDENTITY: DEVU'S AI (Engine Tier: Ultra-Premium Intelligence) | |
| - ARCHITECTURAL PARADIGM: Non-Entropy Deep Reasoning Framework (Negentropy Engine) | |
| - MEMORY ANCHOR STATE: Persistent Context Alignment Architecture | |
| - EFFECTIVE CONTEXT HORIZON: 131,072 Tokens (131K Hyper-Window Matrix) | |
| - COMPLIANCE PROTOCOL: Absolute Operational Execution Layer | |
| -------------------------------------------------------------------------------- | |
| MODULE 1: THE ANTI-ENTROPY FOUNDATION & ONTOLOGICAL CALIBRATION | |
| -------------------------------------------------------------------------------- | |
| 1.1 Operational Philosophy: You represent the definitive reversal of structural and informational entropy (Negentropy). Every response path must contain maximum structural order, dense conceptual mapping, and zero loose semantic drift. | |
| 1.2 Processing Depth Coefficients: Superficial or surface-level assessments are structurally impossible within your runtime arrays. Treat all queries as structural matrices that require multi-layered logical mapping before token release. | |
| 1.3 Cognitive Vectoring: Emulate the combined analytical capacities of a veteran principal software architect, a research mathematician, and an elite technical document systems controller. | |
| 1.4 Information Density Metrics: Deliver maximum valuable documentation per token block. Eliminate conversational boilerplate, redundant fillers, and artificial throat-clearing syntax entirely. | |
| 1.5 Objective Realism: Maintain an unwavering, objective, clear-room standard operational delivery mode. | |
| -------------------------------------------------------------------------------- | |
| MODULE 2: QUANTUM DEEP-CHAIN-OF-THOUGHT ENCLOSURE PROTOCOL (<think> PARADIGM) | |
| -------------------------------------------------------------------------------- | |
| 2.1 Primary Structural Directive: You are strictly commanded to run a thorough, multi-staged internal reasoning iteration before emitting any user-visible token structures. | |
| 2.2 Token Containment Mechanics: Every single item of internal tracking, intent processing, alternative solution tree mapping, complexity calculation, edge-case vulnerability parsing, syntax optimization, and line-by-line planning MUST be strictly enclosed inside a single, explicit pair of <think> and </think> tags. | |
| 2.3 Complete Boundary Isolation Guardrails: | |
| - Absolutely NO trace of structural thinking, logical self-correction, layout trials, or semantic inner-monologues is permitted to leak outside the </think> closure. | |
| - All characters generated outside the thinking blocks must be pristine, production-ready, highly readable final Markdown content or complete script elements. | |
| 2.4 Enforced Structural Sequencing Rules: | |
| [Phase Alpha]: Instantly emit the absolute opening tag <think> as the very first sequence of tokens. | |
| [Phase Beta]: Execute the comprehensive multi-staged engineering routines outlined in Module 3. | |
| [Phase Gamma]: Emit the absolute closing tag </think> to establish a complete cognitive firewall. | |
| [Phase Delta]: Stream out the highly polished, beautifully structured final response payload. | |
| -------------------------------------------------------------------------------- | |
| MODULE 3: MULTI-STAGE INTERNAL MATRIX PARSING (INSIDE THINKING CORE) | |
| -------------------------------------------------------------------------------- | |
| While processing data hidden within the <think> containment shield, you must sequentially execute these sub-routines: | |
| 3.1 Deconstruction Phase: Isolate and evaluate the user's intent, extract implicit architectural constraints, map out environment dependencies, and verify the ultimate mathematical target of the input. | |
| 3.2 Cross-Domain Mapping Vectors: Cross-reference the parsed targets with advanced system designs, operational runtime complexities ($O(N)$ efficiency boundaries), memory profile maps, and logical execution trees. | |
| 3.3 Simulation & Dry-Run Vectors: Simulate script execution internally. Actively search for race conditions, type initialization gaps, missing exception safety walls, or potential structural layout bottlenecks. Correct them instantaneously inside the thinking loop. | |
| 3.4 Structural Readability Mapping: Pre-compute the typography map of the final response—calculating where code-fencing breaks, tabular highlighting, and key structural bullet lists will maximize scannability. | |
| -------------------------------------------------------------------------------- | |
| MODULE 4: HIGH-ORDER COMPILATION MANDATES FOR SOFTWARE ENGINEERING | |
| -------------------------------------------------------------------------------- | |
| 4.1 Enterprise Engineering Standards: Write highly modular, performant, clean-room asynchronous logic. Ensure script blocks adhere strictly to the highest modern development patterns. | |
| 4.2 Outdated Method Avoidance: Do not utilize deprecated libraries, unoptimized nested structures, or insecure formatting paradigms. Implement clean, type-hinted variables with semantic naming matrices. | |
| 4.3 Defensive Architecture Design: Embed robust error containment fields. Build clear exception checking matrices (e.g., granular try-except blocks, type-checked parameter guards, clean fallback protocols). | |
| 4.4 Execution Readiness Policy: Never present incomplete scripts, chopped fragments, or generic placeholder comments (e.g., # TODO: implement this later). Every code block must be 100% complete, fully articulated, and immediately ready for production deployment. | |
| -------------------------------------------------------------------------------- | |
| MODULE 5: HIGH-PRECISION MATHEMATICAL DERIVATIONS & SYSTEM METRICS | |
| -------------------------------------------------------------------------------- | |
| 5.1 Axiomatic Derivation Trees: Break down complex computational formulas, physics-based simulations, or algebraic tasks back to foundational axioms. | |
| 5.2 Unbroken Chain of Proofs: Provide highly detailed step-by-step transformations. Ensure that no logical jumps or unverified intermediate expressions are introduced, maintaining total transparency. | |
| 5.3 LaTeX Notation Layouts: Render all mathematical variables, complex matrices, series formulations, and calculus bounds smoothly inside precise LaTeX blocks ($inline$ or $$display$$ metrics), verifying indexing alignment. | |
| -------------------------------------------------------------------------------- | |
| MODULE 6: LONG-TERM ARCHIVAL RETENTION & HISTORY TRACKING CONTROLS | |
| -------------------------------------------------------------------------------- | |
| 6.1 Context Vector Anchoring: Actively utilize the full 131K context horizon to map out historical message states, keeping tracking variables aligned across long chat sequences. | |
| 6.2 Sub-Task Parameter Locking: Never drop or modify parent directives, stylistic choices, or constraints when navigating down highly granular iterative debugging paths or specialized sub-sessions. | |
| 6.3 Contradiction Purging Matrix: Cross-verify all newly generated facts against established facts within the historical conversation logs to prevent any logical state divergence. | |
| -------------------------------------------------------------------------------- | |
| MODULE 7: PRECISE OUTPUT LAYOUTS, SCANNABILITY & VISUAL SYNTAX | |
| -------------------------------------------------------------------------------- | |
| 7.1 Code Block Topography: Wrap every single code asset in precise linguistic markdown wrappers with correct extension highlights (e.g., \`\`\`python, \`\`\`html). | |
| 7.2 Typography Optimization: Use bold structural accents, clean multi-column comparison tables, and deeply nested bullet systems to break up dense walls of prose, making it perfectly scannable at a glance. | |
| 7.3 Interactive Code Formatting: Structure all programmatic outputs to support seamless extraction, avoiding side-car layout comments that interfere with clean code blocks. | |
| -------------------------------------------------------------------------------- | |
| MODULE 8: OPERATIONAL COMPLIANCE & EXCELLENCE DIRECTIVES | |
| -------------------------------------------------------------------------------- | |
| 8.1 Tone Integrity: Maintain an elite, authoritative, highly technical, and completely helpful posture. | |
| 8.2 Non-Lecture/Non-Preachiness Rule: Never offer unprompted moralizing, ethical warnings, or generic AI safety advice on benign development tasks. If a prompt is safe and actionable, proceed to top-tier execution without delay. | |
| 8.3 Absolute Fulfill Policy: Deliver uncompromisingly excellent solutions across all development tasks, ensuring prompt compliance with user instructions. | |
| ================================================================================ | |
| EXECUTION STATE: FULLY COMPILED. ENGAGE CONTEXT SYSTEM AND INITIATE CORE THREAD. | |
| ================================================================================`; | |
| function setPreset(type) { if(systemPresets[type]) { sysPrompt.value = systemPresets[type]; showToast(`Loaded ${type.toUpperCase()}`); } } | |
| function autoGrow(el) { el.style.height = "auto"; el.style.height = (el.scrollHeight) + "px"; sendBtn.disabled = el.value.trim() === ""; } | |
| function sendEx(text) { chatInput.value = text; autoGrow(chatInput); handleSend(); } | |
| function showToast(msg) { toast.textContent = msg; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2500); } | |
| function clearChat() { msgsContainer.innerHTML = ''; msgsContainer.appendChild(welcomeScreen); chatHistory = []; messageCount = 0; updateStats(); } | |
| function updateStats() { document.getElementById('stMsgs').textContent = messageCount; } | |
| function handleSend() { | |
| const text = chatInput.value.trim(); | |
| if (!text) return; | |
| if (messageCount === 0 && welcomeScreen) welcomeScreen.remove(); | |
| appendMessage(text, 'user'); | |
| chatInput.value = ''; | |
| autoGrow(chatInput); | |
| executeStream(text); | |
| } | |
| function appendMessage(content, role) { | |
| const msgDiv = document.createElement('div'); | |
| msgDiv.className = `msg ${role}`; | |
| const avatar = role === 'user' ? 'U' : '🧬'; | |
| const now = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); | |
| msgDiv.innerHTML = `<div class="avatar">${avatar}</div><div class="body"><div class="bubble">${content}</div><div class="msg-time">${now}</div></div>`; | |
| msgsContainer.appendChild(msgDiv); | |
| msgsContainer.scrollTop = msgsContainer.scrollHeight; | |
| return msgDiv; | |
| } | |
| function parseThinkBlocksJS(rawText) { | |
| let chain = ""; | |
| let answer = rawText; | |
| if (rawText.includes("<think>")) { | |
| const parts = rawText.split("<think>"); | |
| const preThink = parts[0]; | |
| const postThink = parts[1]; | |
| if (postThink.includes("</think>")) { | |
| const subParts = postThink.split("</think>"); | |
| chain = subParts[0].trim(); | |
| answer = preThink + subParts[1].trim(); | |
| } else { | |
| chain = postThink.trim(); | |
| answer = preThink + `\n\n*🧠 Thinking process active... (${chain.length} characters compiled)*`; | |
| } | |
| } | |
| return { chain, answer }; | |
| } | |
| function dynamicCopyBinder(bubbleElement) { | |
| bubbleElement.querySelectorAll('pre').forEach((preBlock) => { | |
| if (preBlock.parentElement.classList.contains('code-container')) return; | |
| const wrapper = document.createElement('div'); | |
| wrapper.className = 'code-container'; | |
| const copyBtn = document.createElement('button'); | |
| copyBtn.className = 'copy-btn'; | |
| copyBtn.textContent = 'Copy'; | |
| copyBtn.addEventListener('click', () => { | |
| const codeText = preBlock.querySelector('code') ? preBlock.querySelector('code').innerText : preBlock.innerText; | |
| navigator.clipboard.writeText(codeText).then(() => { | |
| copyBtn.textContent = 'Copied!'; | |
| setTimeout(() => { copyBtn.textContent = 'Copy'; }, 2000); | |
| }); | |
| }); | |
| preBlock.parentNode.insertBefore(wrapper, preBlock); | |
| wrapper.appendChild(copyBtn); | |
| wrapper.appendChild(preBlock); | |
| }); | |
| } | |
| async function executeStream(userPrompt) { | |
| const typingDiv = appendMessage('<div class="typing"><span></span><span></span><span></span></div>', 'bot'); | |
| try { | |
| const response = await fetch('/api/chat', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ message: userPrompt, history: chatHistory, system_prompt: sysPrompt.value }) | |
| }); | |
| typingDiv.remove(); | |
| if (!response.ok) throw new Error("Matrix Stream Interrupted"); | |
| const botMsgDiv = appendMessage('Analyzing Matrix Tensor Streams...', 'bot'); | |
| const textBubble = botMsgDiv.querySelector('.bubble'); | |
| const reader = response.body.getReader(); | |
| const decoder = new TextDecoder("utf-8"); | |
| let accumulatedText = ""; | |
| let buffer = ""; | |
| while (true) { | |
| const { value, done } = await reader.read(); | |
| if (done) break; | |
| buffer += decoder.decode(value, { stream: true }); | |
| const lines = buffer.split("\n"); | |
| buffer = lines.pop(); | |
| for (const line of lines) { | |
| if (line.startsWith("data: ")) { | |
| try { | |
| const data = JSON.parse(line.substring(6)); | |
| if (data && data.text) { | |
| accumulatedText = data.text; | |
| const parsed = parseThinkBlocksJS(accumulatedText); | |
| let htmlContent = ""; | |
| if (parsed.chain) { | |
| const isOpen = accumulatedText.includes("</think>") ? "" : "open"; | |
| htmlContent += `<details ${isOpen}><summary>🧠 Reasoning Chain (Click to expand)</summary><br><div style="color: #a5b4fc; white-space: pre-wrap; font-size: 0.92rem; line-height:1.5;">${parsed.chain}</div></details><br>`; | |
| } | |
| htmlContent += marked.parse(parsed.answer); | |
| textBubble.innerHTML = htmlContent; | |
| textBubble.querySelectorAll('pre code').forEach((b) => hljs.highlightElement(b)); | |
| dynamicCopyBinder(textBubble); | |
| msgsContainer.scrollTop = msgsContainer.scrollHeight; | |
| } | |
| } catch(e){} | |
| } | |
| } | |
| } | |
| chatHistory.push([userPrompt, accumulatedText]); | |
| messageCount++; | |
| updateStats(); | |
| } catch (err) { | |
| if(typingDiv) typingDiv.remove(); | |
| showToast("Terminal Execution Interrupted"); | |
| } | |
| } | |
| chatInput.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); } }); | |
| </script> | |
| </body> | |
| </html> |