| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Nova-1 Chat</title> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); |
| |
| :root { |
| --surface: #212121; |
| --surface2: #171717; |
| --surface3: #2f2f2f; |
| --sidebar-bg: #171717; |
| --text: #ececec; |
| --text2: #b4b4b4; |
| --text3: #7e7e7e; |
| --accent: #ffffff; |
| --accent-button: #676767; |
| --border: #3a3a3a; |
| --hover: #2f2f2f; |
| --user-bubble: #2f2f2f; |
| --shadow-sm: 0 1px 2px rgba(0,0,0,.3); |
| --radius-lg: 18px; |
| --radius-md: 10px; |
| --radius-sm: 6px; |
| --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; |
| --font-mono: 'JetBrains Mono', 'SF Mono', monospace; |
| } |
| |
| *{box-sizing:border-box;margin:0;padding:0} |
| html,body{height:100vh;overflow:hidden;background:var(--surface);font-family:var(--font-sans);color:var(--text);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased} |
| body{display:flex} |
| |
| |
| .sidebar{background:var(--sidebar-bg);height:100vh;display:flex;flex-direction:column;overflow:hidden;transition:width .35s cubic-bezier(.22,1,.36,1),min-width .35s cubic-bezier(.22,1,.36,1),opacity .35s ease;position:relative;z-index:10} |
| |
| #left-sidebar{width:260px;min-width:260px;border-right:1px solid var(--border)} |
| #left-sidebar.collapsed{width:0;min-width:0;opacity:0;pointer-events:none;border-right:none} |
| |
| #right-sidebar{width:280px;min-width:280px;border-left:1px solid var(--border)} |
| #right-sidebar.collapsed{width:0;min-width:0;opacity:0;pointer-events:none;border-left:none} |
| |
| .ls-header{padding:18px 16px 14px;border-bottom:1px solid var(--border)} |
| .ls-header h1{font-size:1.1rem;font-weight:700;letter-spacing:-.01em;color:var(--text)} |
| .ls-header .ls-sub{font-size:.68rem;color:var(--text3);margin-top:2px} |
| .new-chat-btn{margin:12px 14px;background:transparent;border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 14px;font-weight:500;font-size:.8rem;color:var(--text);cursor:pointer;width:calc(100% - 28px);transition:background .15s;font-family:inherit;display:flex;align-items:center;gap:8px} |
| .new-chat-btn svg{width:16px;height:16px;opacity:.7} |
| .new-chat-btn:hover{background:var(--hover)} |
| .ls-chats-label{padding:20px 16px 8px;font-size:.65rem;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em} |
| .ls-chat-item{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--radius-sm);cursor:pointer;color:var(--text2);font-size:.82rem;margin:0 8px 2px;transition:background .12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} |
| .ls-chat-item:hover{background:var(--hover);color:var(--text)} |
| .ls-chat-item.active{background:var(--hover);color:var(--text)} |
| .ls-footer{margin-top:auto;padding:14px 16px;border-top:1px solid var(--border);font-size:.68rem;color:var(--text3);text-align:center} |
| |
| .rs-header{padding:18px 16px 12px;border-bottom:1px solid var(--border)} |
| .rs-header h2{font-size:.75rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.06em} |
| .right-body{flex:1;overflow-y:auto;padding:14px 16px} |
| .right-body::-webkit-scrollbar{width:4px} |
| .right-body::-webkit-scrollbar-thumb{background:#444;border-radius:3px} |
| .rs-section{margin-bottom:22px} |
| .rs-section-title{font-size:.65rem;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px} |
| .param-group{margin-bottom:10px} |
| .param-group label{display:block;font-size:.75rem;color:var(--text2);margin-bottom:4px} |
| .param-group input[type="range"]{width:100%;accent-color:var(--accent);cursor:pointer;height:4px} |
| .param-val{float:right;color:var(--text2);font-weight:500;font-size:.72rem} |
| #system-prompt{background:var(--surface3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:8px 10px;font-size:.76rem;width:100%;font-family:inherit;resize:vertical;min-height:60px} |
| #system-prompt:focus{outline:none;border-color:#888} |
| .mode-group{display:flex;gap:6px} |
| .mode-btn{flex:1;background:var(--surface3);border:1px solid var(--border);color:var(--text2);border-radius:var(--radius-sm);padding:7px 0;font-size:.72rem;cursor:pointer;text-align:center;transition:all .12s;font-family:inherit} |
| .mode-btn.active{background:var(--hover);border-color:#777;color:var(--text);font-weight:500} |
| |
| #yarn-btn{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:var(--radius-md);padding:10px 14px;width:100%;cursor:pointer;font-size:.78rem;font-weight:500;transition:all .15s;font-family:inherit;display:flex;align-items:center;gap:8px} |
| #yarn-btn svg{width:18px;height:18px;opacity:.7} |
| #yarn-btn:hover{background:var(--hover);border-color:#666} |
| .yarn-current{display:inline-block;background:var(--hover);color:var(--text2);padding:4px 10px;border-radius:20px;font-size:.7rem;font-weight:500;margin-top:8px} |
| |
| |
| #chat-main{flex:1;display:flex;flex-direction:column;height:100vh;background:var(--surface);min-width:0;position:relative} |
| |
| .toggle-btn{position:absolute;top:18px;z-index:20;width:32px;height:32px;border-radius:50%;background:transparent;border:1px solid var(--border);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-size:1rem} |
| .toggle-btn:hover{background:var(--hover);color:var(--text)} |
| #toggle-left{left:12px} |
| #toggle-right{right:12px} |
| |
| |
| #chat-messages{flex:1;overflow-y:auto;overflow-x:hidden} |
| #chat-messages::-webkit-scrollbar{width:5px} |
| #chat-messages::-webkit-scrollbar-thumb{background:#444;border-radius:4px} |
| |
| #messages-inner{max-width:720px;width:100%;margin:0 auto;padding:20px 20px 0;display:flex;flex-direction:column;min-height:100%} |
| |
| |
| #messages-inner.empty{justify-content:center;align-items:center;padding-bottom:20px} |
| |
| .welcome-block{text-align:center;margin-bottom:0;animation:fadeUp .6s cubic-bezier(.22,1,.36,1)} |
| .welcome-block h2{font-size:1.5rem;font-weight:600;letter-spacing:-.01em;margin-bottom:6px} |
| .welcome-block p{font-size:.85rem;color:var(--text3);max-width:400px;line-height:1.6} |
| @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} |
| |
| |
| .msg-row{display:flex;margin-bottom:28px;animation:msgIn .4s cubic-bezier(.22,1,.36,1);position:relative} |
| .msg-row.user{justify-content:flex-end} |
| .msg-row.bot{justify-content:flex-start} |
| @keyframes msgIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}} |
| |
| .bubble-user{background:var(--user-bubble);color:var(--text);border-radius:var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);padding:11px 17px;max-width:75%;font-size:.92rem;line-height:1.65;white-space:pre-wrap;word-break:break-word} |
| .bubble-bot{color:var(--text);max-width:100%;font-size:.92rem;line-height:1.65;white-space:pre-wrap;word-break:break-word;padding:0} |
| .bubble-bot pre{background:#1a1a1a;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;overflow-x:auto;font-size:.78rem;margin:10px 0;font-family:var(--font-mono)} |
| .bubble-bot code{background:#1a1a1a;padding:2px 5px;border-radius:4px;font-size:.85em;font-family:var(--font-mono)} |
| .bubble-bot pre code{padding:0;background:transparent} |
| |
| |
| .msg-actions{display:flex;gap:2px;margin-top:6px;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none} |
| .msg-row.bot:hover .msg-actions, |
| .msg-row.bot:last-child .msg-actions{opacity:1;transform:translateY(0);pointer-events:auto} |
| .msg-actions button{background:transparent;border:none;color:var(--text3);border-radius:6px;padding:4px 8px;font-size:.72rem;cursor:pointer;transition:all .12s;font-family:inherit;display:flex;align-items:center;gap:4px} |
| .msg-actions button:hover{color:var(--text);background:var(--hover)} |
| .msg-actions button svg{width:13px;height:13px;opacity:.7} |
| |
| |
| .typing-indicator{display:inline-flex;gap:5px;padding:4px 0} |
| .typing-indicator span{width:6px;height:6px;border-radius:50%;background:var(--text3);animation:bounce 1.2s infinite} |
| .typing-indicator span:nth-child(2){animation-delay:.15s} |
| .typing-indicator span:nth-child(3){animation-delay:.3s} |
| @keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-7px);opacity:1}} |
| |
| |
| #input-area{flex-shrink:0;padding:0 20px 16px} |
| #input-inner{max-width:720px;width:100%;margin:0 auto} |
| #input-row{display:flex;align-items:flex-end;background:var(--surface3);border:1px solid var(--border);border-radius:28px;padding:5px 5px 5px 18px;transition:border-color .2s,box-shadow .2s} |
| #input-row:focus-within{border-color:#777;box-shadow:0 0 0 1px rgba(255,255,255,.05)} |
| #msg-input{flex:1;background:transparent;border:none;color:var(--text);padding:9px 0;font-size:.88rem;resize:none;outline:none;font-family:inherit;line-height:1.5;max-height:160px} |
| #msg-input::placeholder{color:var(--text3)} |
| #send-btn{width:36px;height:36px;min-width:36px;border-radius:50%;background:var(--text);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;color:var(--surface)} |
| #send-btn svg{width:16px;height:16px} |
| #send-btn:hover{background:#ddd} |
| #send-btn:disabled{opacity:.3;cursor:default;background:var(--text3)} |
| |
| .input-hint{text-align:center;font-size:.68rem;color:var(--text3);margin-top:8px} |
| |
| |
| #yarn-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.65);backdrop-filter:blur(6px)} |
| #yarn-modal.show{display:flex;animation:modalFade .2s ease} |
| @keyframes modalFade{from{opacity:0}to{opacity:1}} |
| .modal-card{background:var(--surface2);border:1px solid var(--border);border-radius:18px;width:440px;max-width:92vw;padding:28px;box-shadow:0 24px 64px rgba(0,0,0,.6);animation:cardPop .35s cubic-bezier(.22,1,.36,1)} |
| @keyframes cardPop{from{opacity:0;transform:translateY(24px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}} |
| .modal-card h3{font-size:1.05rem;font-weight:600;margin-bottom:4px;letter-spacing:-.01em} |
| .modal-desc{font-size:.78rem;color:var(--text2);margin-bottom:16px;line-height:1.55} |
| .modal-warning{background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.2);color:#d4a81a;padding:10px 14px;border-radius:var(--radius-sm);font-size:.72rem;margin-bottom:18px;line-height:1.55} |
| .yarn-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px} |
| .yarn-option{background:var(--surface3);border:1.5px solid var(--border);border-radius:12px;padding:14px;text-align:center;cursor:pointer;transition:all .18s;position:relative} |
| .yarn-option:hover{border-color:#555;transform:translateY(-1px)} |
| .yarn-option.selected{border-color:#999;background:rgba(255,255,255,.04);box-shadow:0 0 12px rgba(255,255,255,.04)} |
| .yarn-option .y-label{font-size:.92rem;font-weight:700;color:var(--text)} |
| .yarn-option.selected .y-label{color:var(--text)} |
| .yarn-option .y-factor{font-size:.68rem;color:var(--text2);margin-top:3px} |
| .yarn-option .y-native{font-size:.6rem;color:#22c55e;margin-top:2px;font-weight:600} |
| |
| |
| #yarn-stretch-anim{display:none;margin:0 0 16px;text-align:center} |
| #yarn-stretch-anim.show{display:block;padding:12px 4px 0} |
| .stretch-visual{display:flex;align-items:center;justify-content:center;margin:0 auto 20px;position:relative;height:80px;width:100%} |
| .helix-svg{width:100%;height:80px;overflow:visible} |
| .helix-path{stroke:var(--text3);stroke-width:2.5;fill:none;stroke-dasharray:0 400;transition:stroke-dasharray .15s ease;stroke-linecap:round} |
| .helix-path.active{stroke:#c4c4c4} |
| .helix-path.done{stroke:#22c55e} |
| .stretch-info{font-size:.78rem;color:var(--text2);margin-bottom:14px;text-align:center} |
| .stretch-bar-wrap{background:var(--surface3);border-radius:12px;height:8px;width:100%;overflow:hidden;margin-bottom:14px} |
| .stretch-bar{height:100%;background:var(--text3);border-radius:12px;width:0%;transition:width .15s ease} |
| .stretch-bar.active{background:var(--text)} |
| .stretch-bar.done{background:#22c55e} |
| .stretch-bar-label{display:flex;justify-content:space-between;font-size:.68rem;color:var(--text3);margin-bottom:6px;padding:0 2px} |
| .stretch-check{font-size:.82rem;color:#22c55e;margin-top:12px;display:none;font-weight:500;text-align:center} |
| .stretch-check.show{display:block;animation:checkPop .35s cubic-bezier(.22,1,.36,1)} |
| @keyframes checkPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}} |
| .modal-buttons{display:flex;gap:10px;justify-content:flex-end} |
| .modal-buttons button{border:none;border-radius:var(--radius-sm);padding:9px 20px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s;font-family:inherit} |
| .modal-cancel{background:#333;color:var(--text2)} |
| .modal-cancel:hover{background:#444;color:var(--text)} |
| .modal-apply{background:var(--text);color:#111;font-weight:600} |
| .modal-apply:hover{background:#ddd;transform:translateY(-1px)} |
| .modal-apply:disabled{opacity:.4;cursor:not-allowed;transform:none} |
| |
| @media (max-width:768px){ |
| #left-sidebar,#right-sidebar{display:none} |
| #toggle-left,#toggle-right{display:none} |
| #chat-messages{padding:0} |
| #messages-inner{padding:16px 12px 0} |
| #input-area{padding:0 12px 12px} |
| } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <div class="sidebar" id="left-sidebar"> |
| <div class="ls-header"> |
| <h1>Nova-1</h1> |
| <div class="ls-sub">Standard Preview</div> |
| </div> |
| <button class="new-chat-btn" id="new-chat-btn"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> |
| New Chat |
| </button> |
| <div class="ls-chats-label">Recent</div> |
| <div class="ls-chat-item active" id="chat-item-0">New conversation</div> |
| <div class="ls-footer">ZeroGPU ⚡ · Mixture of Depth</div> |
| </div> |
|
|
| |
| <div id="chat-main"> |
| <button class="toggle-btn" id="toggle-left" title="Toggle sidebar"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg> |
| </button> |
| <button class="toggle-btn" id="toggle-right" title="Toggle parameters"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v4m0 14v4M4.22 4.22l2.83 2.83m9.9 9.9l2.83 2.83M1 12h4m14 0h4M4.22 19.78l2.83-2.83m9.9-9.9l2.83-2.83"/></svg> |
| </button> |
|
|
| <div id="chat-messages"> |
| <div id="messages-inner" class="empty"> |
| <div class="welcome-block"> |
| <h2>How can I help you today?</h2> |
| <p>Ask me anything — I'm running on ZeroGPU with Mixture of Depth for fast, intelligent responses.</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="input-area"> |
| <div id="input-inner"> |
| <div id="input-row"> |
| <textarea id="msg-input" placeholder="Message Nova…" rows="1"></textarea> |
| <button id="send-btn"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg> |
| </button> |
| </div> |
| <div class="input-hint">Nova can make mistakes. Verify important information.</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="sidebar" id="right-sidebar"> |
| <div class="rs-header"><h2>Settings</h2></div> |
| <div class="right-body"> |
| <div class="rs-section"> |
| <div class="rs-section-title">Context Window</div> |
| <button id="yarn-btn"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c2.5 0 4.5-4 4.5-9S14.5 3 12 3m0 18c-2.5 0-4.5-4-4.5-9S9.5 3 12 3"/></svg> |
| YaRN Stretch <span id="yarn-current" style="margin-left:auto">2K</span> |
| </button> |
| <div class="yarn-current" id="yarn-status">Native 2K</div> |
| </div> |
| <div class="rs-section"> |
| <div class="rs-section-title">Generation</div> |
| <div class="param-group"><label>Max Tokens <span class="param-val" id="val-max-tokens">512</span></label><input type="range" id="max-tokens" min="128" max="2048" step="64" value="512"></div> |
| <div class="param-group"><label>Temperature <span class="param-val" id="val-temperature">0.6</span></label><input type="range" id="temperature" min="0.1" max="2.0" step="0.1" value="0.6"></div> |
| <div class="param-group"><label>Top-P <span class="param-val" id="val-top-p">0.90</span></label><input type="range" id="top-p" min="0.1" max="1.0" step="0.05" value="0.9"></div> |
| </div> |
| <div class="rs-section"> |
| <div class="rs-section-title">System Prompt</div> |
| <textarea id="system-prompt" rows="4">You are Nova, a helpful, honest AI assistant. Answer questions clearly and concisely.</textarea> |
| </div> |
| <div class="rs-section"> |
| <div class="rs-section-title">Mode</div> |
| <div class="mode-group"> |
| <button class="mode-btn active" id="mode-chat" data-mode="Chat">Chat</button> |
| <button class="mode-btn" id="mode-base" data-mode="Base">Base</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="yarn-modal"> |
| <div class="modal-card"> |
| <h3>Context Window Stretching</h3> |
| <div class="modal-desc">YaRN extrapolation extends the model's native 2K context to handle longer documents and conversations.</div> |
| <div class="modal-warning">Stretching may slightly reduce precision on fine details. For most use cases, native 2K works best.</div> |
| <div class="yarn-options" id="yarn-options"> |
| <div class="yarn-option selected" data-ctx="2K (Native)" data-factor="1.0"><div class="y-label">2K</div><div class="y-factor">×1.0</div><div class="y-native">Native</div></div> |
| <div class="yarn-option" data-ctx="4K (YaRN x2)" data-factor="2.0"><div class="y-label">4K</div><div class="y-factor">×2.0</div></div> |
| <div class="yarn-option" data-ctx="8K (YaRN x4)" data-factor="4.0"><div class="y-label">8K</div><div class="y-factor">×4.0</div></div> |
| <div class="yarn-option" data-ctx="16K (YaRN x8)" data-factor="8.0"><div class="y-label">16K</div><div class="y-factor">×8.0</div></div> |
| </div> |
| <div id="yarn-stretch-anim"> |
| <div class="stretch-visual"> |
| <svg class="helix-svg" viewBox="0 0 360 70"> |
| <path class="helix-path" id="helix1" d="M20,15 C70,35 60,5 110,25 C160,45 150,15 200,35 C250,55 240,25 290,45 C320,57 340,35 340,35" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/> |
| <path class="helix-path" id="helix2" d="M20,55 C70,35 60,65 110,45 C160,25 150,55 200,35 C250,15 240,45 290,25 C320,13 340,35 340,35" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/> |
| <circle cx="20" cy="15" r="3" fill="currentColor" opacity="0.3"/> |
| <circle cx="20" cy="55" r="3" fill="currentColor" opacity="0.3"/> |
| <circle cx="340" cy="35" r="4" fill="currentColor" opacity="0.5" id="helix-dot"/> |
| </svg> |
| </div> |
| <div class="stretch-bar-label"><span>2K</span><span id="stretch-target-label">2K</span></div> |
| <div class="stretch-bar-wrap"><div class="stretch-bar" id="yarn-bar" style="width:0%"></div></div> |
| <div class="stretch-info" id="yarn-anim-label">Ready</div> |
| <div class="stretch-check" id="yarn-check">Context stretched successfully</div> |
| </div> |
| <div class="modal-buttons"> |
| <button class="modal-cancel" id="yarn-cancel">Cancel</button> |
| <button class="modal-apply" id="yarn-apply">Apply</button> |
| </div> |
| </div> |
| </div> |
|
|
| <script type="module"> |
| import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"; |
| |
| |
| let history = []; |
| let isGenerating = false; |
| let mode = "Chat"; |
| let client = null; |
| |
| async function initClient() { |
| try { |
| client = await Client.connect(window.location.origin); |
| console.log("✅ Connected to Gradio backend"); |
| } catch (e) { |
| console.error("❌ Failed to connect:", e); |
| } |
| } |
| initClient(); |
| |
| |
| const chatMessages = document.getElementById("chat-messages"); |
| const messagesInner = document.getElementById("messages-inner"); |
| const msgInput = document.getElementById("msg-input"); |
| const sendBtn = document.getElementById("send-btn"); |
| const newChatBtn = document.getElementById("new-chat-btn"); |
| const inputArea = document.getElementById("input-area"); |
| const maxTokensSlider = document.getElementById("max-tokens"); |
| const temperatureSlider = document.getElementById("temperature"); |
| const topPSlider = document.getElementById("top-p"); |
| const systemPromptEl = document.getElementById("system-prompt"); |
| const leftSidebar = document.getElementById("left-sidebar"); |
| const rightSidebar = document.getElementById("right-sidebar"); |
| const toggleLeft = document.getElementById("toggle-left"); |
| const toggleRight = document.getElementById("toggle-right"); |
| |
| let leftOpen = true, rightOpen = true; |
| toggleLeft.addEventListener("click", () => { |
| leftOpen = !leftOpen; |
| leftSidebar.classList.toggle("collapsed", !leftOpen); |
| }); |
| toggleRight.addEventListener("click", () => { |
| rightOpen = !rightOpen; |
| rightSidebar.classList.toggle("collapsed", !rightOpen); |
| }); |
| |
| maxTokensSlider.addEventListener("input", () => { document.getElementById("val-max-tokens").textContent = maxTokensSlider.value; }); |
| temperatureSlider.addEventListener("input", () => { document.getElementById("val-temperature").textContent = parseFloat(temperatureSlider.value).toFixed(1); }); |
| topPSlider.addEventListener("input", () => { document.getElementById("val-top-p").textContent = parseFloat(topPSlider.value).toFixed(2); }); |
| |
| document.querySelectorAll(".mode-btn").forEach(btn => { |
| btn.addEventListener("click", () => { |
| document.querySelectorAll(".mode-btn").forEach(b => b.classList.remove("active")); |
| btn.classList.add("active"); |
| mode = btn.dataset.mode; |
| }); |
| }); |
| |
| msgInput.addEventListener("input", () => { |
| msgInput.style.height = "auto"; |
| msgInput.style.height = Math.min(msgInput.scrollHeight, 160) + "px"; |
| }); |
| |
| function scrollDown() { |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| } |
| |
| |
| function enterChatMode() { |
| messagesInner.classList.remove("empty"); |
| const wb = messagesInner.querySelector(".welcome-block"); |
| if (wb) wb.remove(); |
| } |
| |
| function resetToEmpty() { |
| messagesInner.classList.add("empty"); |
| if (!messagesInner.querySelector(".welcome-block")) { |
| const wb = document.createElement("div"); |
| wb.className = "welcome-block"; |
| wb.innerHTML = `<h2>How can I help you today?</h2><p>Ask me anything — I'm running on ZeroGPU with Mixture of Depth for fast, intelligent responses.</p>`; |
| messagesInner.prepend(wb); |
| } |
| } |
| |
| |
| function escapeHtml(text) { |
| const div = document.createElement("div"); |
| div.textContent = text; |
| return div.innerHTML; |
| } |
| |
| |
| function createMsgActions(msgIdx) { |
| const actions = document.createElement("div"); |
| actions.className = "msg-actions"; |
| |
| const copyBtn = document.createElement("button"); |
| copyBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy`; |
| copyBtn.addEventListener("click", () => { |
| navigator.clipboard.writeText(history[msgIdx]?.content || ""); |
| }); |
| |
| const reBtn = document.createElement("button"); |
| reBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.5 17.5A9 9 0 1 0 2 12"/></svg> Regenerate`; |
| reBtn.addEventListener("click", () => regenerate(msgIdx)); |
| actions.appendChild(copyBtn); |
| actions.appendChild(reBtn); |
| return actions; |
| } |
| |
| |
| function addUserMessage(text) { |
| const div = document.createElement("div"); |
| div.className = "msg-row user"; |
| div.innerHTML = `<div class="bubble-user">${escapeHtml(text)}</div>`; |
| messagesInner.appendChild(div); |
| scrollDown(); |
| } |
| |
| function addBotMessage(msgIdx) { |
| const div = document.createElement("div"); |
| div.className = "msg-row bot"; |
| div.innerHTML = `<div class="bubble-bot"><div class="typing-indicator"><span></span><span></span><span></span></div></div>`; |
| div.appendChild(createMsgActions(msgIdx)); |
| messagesInner.appendChild(div); |
| scrollDown(); |
| return div; |
| } |
| |
| function updateBotMessage(div, text) { |
| const bubble = div.querySelector(".bubble-bot"); |
| if (text) { |
| bubble.innerHTML = escapeHtml(text).replace(/\n/g, "<br>"); |
| } else { |
| bubble.innerHTML = `<div class="typing-indicator"><span></span><span></span><span></span></div>`; |
| } |
| scrollDown(); |
| } |
| |
| |
| async function sendMessage() { |
| if (isGenerating) return; |
| const message = msgInput.value.trim(); |
| if (!message) return; |
| if (!client) { console.error("Client not connected"); return; } |
| |
| isGenerating = true; |
| sendBtn.disabled = true; |
| msgInput.value = ""; |
| msgInput.style.height = "auto"; |
| |
| enterChatMode(); |
| addUserMessage(message); |
| history.push({ role: "user", content: message }); |
| |
| const assistantIdx = history.length; |
| history.push({ role: "assistant", content: "" }); |
| const botDiv = addBotMessage(assistantIdx); |
| |
| try { |
| const priorHistory = history.slice(0, -2); |
| const submission = client.submit("/generate", { |
| message: message, |
| history: priorHistory, |
| system_prompt: systemPromptEl.value, |
| max_tokens: parseInt(maxTokensSlider.value), |
| temperature: parseFloat(temperatureSlider.value), |
| top_p: parseFloat(topPSlider.value), |
| mode: mode, |
| }); |
| let fullResponse = ""; |
| for await (const msg of submission) { |
| if (msg.type === "data") { |
| let chunk = ""; |
| if (Array.isArray(msg.data)) chunk = msg.data[0] ?? ""; |
| else if (typeof msg.data === "string") chunk = msg.data; |
| else if (msg.data && typeof msg.data === "object") chunk = msg.data[0] ?? msg.data ?? ""; |
| if (chunk) { |
| fullResponse += chunk; |
| history[assistantIdx].content = fullResponse; |
| updateBotMessage(botDiv, fullResponse); |
| } |
| } else if (msg.type === "status" && msg.status === "error") { |
| fullResponse = "An error occurred during generation. Please try again."; |
| history[assistantIdx].content = fullResponse; |
| updateBotMessage(botDiv, fullResponse); |
| break; |
| } |
| } |
| if (!fullResponse) { |
| fullResponse = "No response received."; |
| history[assistantIdx].content = fullResponse; |
| updateBotMessage(botDiv, fullResponse); |
| } |
| } catch (e) { |
| console.error("Stream error:", e); |
| const errText = "Connection error: " + e.message; |
| history[assistantIdx].content = errText; |
| updateBotMessage(botDiv, errText); |
| } |
| isGenerating = false; |
| sendBtn.disabled = false; |
| } |
| |
| |
| async function regenerate(botIdx) { |
| if (isGenerating) return; |
| if (botIdx < 1 || history[botIdx - 1]?.role !== "user") return; |
| const userMsg = history[botIdx - 1].content; |
| |
| |
| const botRow = messagesInner.querySelectorAll(".msg-row.bot")[ |
| Array.from(messagesInner.querySelectorAll(".msg-row.bot")).findIndex(r => |
| r.querySelector(".msg-actions") && r === [...messagesInner.querySelectorAll(".msg-row.bot")].find((_,i) => { |
| |
| let botCount = 0; |
| for (const child of messagesInner.children) { |
| if (child.classList.contains("msg-row") && child.classList.contains("bot")) { |
| if (botCount === (() => { let c = 0; for (const ch of messagesInner.children) { if (ch.classList.contains("msg-row") && ch.classList.contains("bot")) { if (ch === r) return c; c++; } } return -1; })()) return true; |
| botCount++; |
| } |
| } |
| return false; |
| }) |
| ) |
| ]; |
| |
| |
| const allBotRows = messagesInner.querySelectorAll(".msg-row.bot"); |
| const targetRow = allBotRows[allBotRows.length - 1]; |
| |
| history.pop(); |
| if (targetRow) targetRow.remove(); |
| |
| const assistantIdx = history.length; |
| history.push({ role: "assistant", content: "" }); |
| const botDiv = addBotMessage(assistantIdx); |
| |
| isGenerating = true; |
| sendBtn.disabled = true; |
| try { |
| const priorHistory = history.slice(0, -2); |
| const submission = client.submit("/generate", { |
| message: userMsg, |
| history: priorHistory, |
| system_prompt: systemPromptEl.value, |
| max_tokens: parseInt(maxTokensSlider.value), |
| temperature: parseFloat(temperatureSlider.value), |
| top_p: parseFloat(topPSlider.value), |
| mode: mode, |
| }); |
| let fullResponse = ""; |
| for await (const msg of submission) { |
| if (msg.type === "data") { |
| let chunk = Array.isArray(msg.data) ? msg.data[0] : (typeof msg.data === "string" ? msg.data : ""); |
| if (chunk) { fullResponse += chunk; history[assistantIdx].content = fullResponse; updateBotMessage(botDiv, fullResponse); } |
| } |
| } |
| if (!fullResponse) updateBotMessage(botDiv, "No response received."); |
| } catch (e) { updateBotMessage(botDiv, "Error: " + e.message); } |
| isGenerating = false; |
| sendBtn.disabled = false; |
| } |
| |
| |
| sendBtn.addEventListener("click", sendMessage); |
| msgInput.addEventListener("keydown", (e) => { |
| if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendMessage(); } |
| }); |
| |
| newChatBtn.addEventListener("click", () => { |
| history = []; |
| messagesInner.innerHTML = ""; |
| resetToEmpty(); |
| }); |
| |
| |
| const yarnModal = document.getElementById("yarn-modal"); |
| const yarnBtn = document.getElementById("yarn-btn"); |
| const yarnCancel = document.getElementById("yarn-cancel"); |
| const yarnApply = document.getElementById("yarn-apply"); |
| const yarnStretchAnim = document.getElementById("yarn-stretch-anim"); |
| const yarnBar = document.getElementById("yarn-bar"); |
| const yarnAnimLabel = document.getElementById("yarn-anim-label"); |
| const yarnCheck = document.getElementById("yarn-check"); |
| const yarnStatus = document.getElementById("yarn-status"); |
| const yarnCurrentSpan = document.getElementById("yarn-current"); |
| const stretchTargetLabel = document.getElementById("stretch-target-label"); |
| const helix1 = document.getElementById("helix1"); |
| const helix2 = document.getElementById("helix2"); |
| |
| let yarnSelectedCtx = "2K (Native)"; |
| let yarnSelectedFactor = 1.0; |
| let yarnSelectedK = "2K"; |
| |
| function resetYarnModal() { |
| yarnStretchAnim.classList.remove("show"); |
| yarnBar.style.width = "0%"; |
| yarnBar.className = "stretch-bar"; |
| yarnAnimLabel.textContent = "Ready"; |
| yarnCheck.classList.remove("show"); |
| yarnApply.disabled = false; |
| helix1.classList.remove("active", "done"); |
| helix2.classList.remove("active", "done"); |
| document.querySelectorAll(".yarn-option").forEach(o => o.classList.remove("selected")); |
| const nativeOpt = document.querySelector('.yarn-option[data-ctx="2K (Native)"]'); |
| if (nativeOpt) nativeOpt.classList.add("selected"); |
| yarnSelectedCtx = "2K (Native)"; |
| yarnSelectedFactor = 1.0; |
| yarnSelectedK = "2K"; |
| stretchTargetLabel.textContent = "2K"; |
| } |
| |
| yarnBtn.addEventListener("click", () => { resetYarnModal(); yarnModal.classList.add("show"); }); |
| yarnCancel.addEventListener("click", () => { yarnModal.classList.remove("show"); }); |
| yarnModal.addEventListener("click", (e) => { if (e.target === yarnModal) yarnModal.classList.remove("show"); }); |
| |
| document.querySelectorAll(".yarn-option").forEach(opt => { |
| opt.addEventListener("click", () => { |
| document.querySelectorAll(".yarn-option").forEach(o => o.classList.remove("selected")); |
| opt.classList.add("selected"); |
| yarnSelectedCtx = opt.dataset.ctx; |
| yarnSelectedFactor = parseFloat(opt.dataset.factor); |
| yarnSelectedK = opt.querySelector(".y-label").textContent; |
| stretchTargetLabel.textContent = yarnSelectedK; |
| }); |
| }); |
| |
| yarnApply.addEventListener("click", async () => { |
| yarnApply.disabled = true; |
| yarnStretchAnim.classList.add("show"); |
| yarnCheck.classList.remove("show"); |
| helix1.classList.add("active"); |
| helix2.classList.add("active"); |
| |
| if (yarnSelectedFactor === 1.0) { |
| yarnBar.style.width = "100%"; |
| yarnBar.className = "stretch-bar done"; |
| helix1.classList.add("done"); helix1.classList.remove("active"); |
| helix2.classList.add("done"); helix2.classList.remove("active"); |
| yarnAnimLabel.textContent = "Native context — no stretching needed"; |
| yarnCheck.classList.add("show"); |
| try { |
| const result = await client.predict("/apply_yarn", { target_context: yarnSelectedCtx }); |
| const status = Array.isArray(result.data) ? result.data[0] : result.data; |
| yarnStatus.textContent = "Native 2K"; |
| yarnCurrentSpan.textContent = "2K"; |
| } catch (e) { console.error("YaRN apply error:", e); } |
| setTimeout(() => yarnModal.classList.remove("show"), 900); |
| return; |
| } |
| |
| const totalFrames = 60; |
| const duration = 1800; |
| const frameTime = duration / totalFrames; |
| let frame = 0; |
| const animInterval = setInterval(() => { |
| frame++; |
| const progress = frame / totalFrames; |
| const eased = 1 - Math.pow(1 - progress, 3); |
| const pct = Math.round(eased * 100); |
| yarnBar.style.width = pct + "%"; |
| yarnBar.className = "stretch-bar active"; |
| yarnAnimLabel.textContent = `Stretching to ${yarnSelectedK}… ${pct}%`; |
| helix1.style.strokeDasharray = (eased * 300) + " 300"; |
| helix2.style.strokeDasharray = (eased * 300) + " 300"; |
| if (frame >= totalFrames) { |
| clearInterval(animInterval); |
| yarnBar.className = "stretch-bar done"; |
| helix1.classList.add("done"); helix1.classList.remove("active"); |
| helix2.classList.add("done"); helix2.classList.remove("active"); |
| helix1.style.strokeDasharray = "300 0"; |
| helix2.style.strokeDasharray = "300 0"; |
| (async () => { |
| try { |
| const result = await client.predict("/apply_yarn", { target_context: yarnSelectedCtx }); |
| const status = Array.isArray(result.data) ? result.data[0] : result.data; |
| yarnAnimLabel.textContent = status || `Context: ${yarnSelectedK}`; |
| yarnStatus.textContent = status || `${yarnSelectedK} active`; |
| yarnCurrentSpan.textContent = yarnSelectedK; |
| } catch (e) { yarnAnimLabel.textContent = "Error applying"; console.error("YaRN error:", e); } |
| yarnCheck.classList.add("show"); |
| setTimeout(() => yarnModal.classList.remove("show"), 1200); |
| })(); |
| } |
| }, frameTime); |
| }); |
| </script> |
| </body> |
| </html> |
