| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Hyze Code</title>
|
| <link rel="icon" type="image/png" href="https://i.imgur.com/f5QyYpV.png">
|
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
|
| <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
|
| <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
|
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
|
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
| <link href="https://fonts.googleapis.com/css2?family=VT323&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
| <style>
|
| :root {
|
| --bg-primary: #151A28;
|
| --bg-secondary: #1e2535;
|
| --bg-tertiary: #252d3f;
|
| --accent-primary: #1C4297;
|
| --accent-secondary: #2d5bc4;
|
| --accent-dim: #0f2a5c;
|
| --text-primary: #e0f0ff;
|
| --text-secondary: #8aa8c2;
|
| --text-muted: #4a6075;
|
| --border-color: #1C4297;
|
| --border-dim: #0f2a5c;
|
| --error: #ff3366;
|
| --success: #00ff88;
|
| --warning: #ffcc00;
|
| }
|
|
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| image-rendering: pixelated;
|
| image-rendering: -moz-crisp-edges;
|
| image-rendering: crisp-edges;
|
| }
|
|
|
| body {
|
| font-family: 'VT323', monospace;
|
| background: var(--bg-primary);
|
| color: var(--text-primary);
|
| height: 100vh;
|
| overflow: hidden;
|
| font-size: 18px;
|
| line-height: 1.4;
|
| }
|
|
|
|
|
| body::before {
|
| content: "";
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background: repeating-linear-gradient(
|
| 0deg,
|
| rgba(0, 0, 0, 0.15),
|
| rgba(0, 0, 0, 0.15) 1px,
|
| transparent 1px,
|
| transparent 2px
|
| );
|
| pointer-events: none;
|
| z-index: 9999;
|
| opacity: 0.3;
|
| }
|
|
|
|
|
| body::after {
|
| content: "";
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background: radial-gradient(circle at center, rgba(28, 66, 151, 0.05) 0%, transparent 70%);
|
| pointer-events: none;
|
| z-index: 9998;
|
| }
|
|
|
| .terminal-container {
|
| display: flex;
|
| flex-direction: column;
|
| height: 100vh;
|
| padding: 20px;
|
| gap: 10px;
|
| }
|
|
|
|
|
| .terminal-header {
|
| border: 2px solid var(--border-color);
|
| background: var(--bg-secondary);
|
| padding: 15px 20px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| box-shadow: 0 0 20px rgba(28, 66, 151, 0.3);
|
| }
|
|
|
| .logo-section {
|
| display: flex;
|
| align-items: center;
|
| gap: 15px;
|
| cursor: pointer;
|
| }
|
|
|
| .logo-ascii {
|
| color: var(--accent-primary);
|
| font-size: 10px;
|
| line-height: 1;
|
| white-space: pre;
|
| font-family: 'JetBrains Mono', monospace;
|
| text-shadow: 0 0 10px rgba(28, 66, 151, 0.5);
|
| }
|
|
|
| .header-status {
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| color: var(--text-secondary);
|
| font-size: 16px;
|
| }
|
|
|
| .status-dot {
|
| width: 12px;
|
| height: 12px;
|
| background: var(--success);
|
| box-shadow: 0 0 10px var(--success);
|
| animation: blink 1s infinite;
|
| }
|
|
|
| @keyframes blink {
|
| 0%, 50% { opacity: 1; }
|
| 51%, 100% { opacity: 0.3; }
|
| }
|
|
|
|
|
| .terminal-main {
|
| flex: 1;
|
| border: 2px solid var(--border-color);
|
| background: var(--bg-primary);
|
| overflow: hidden;
|
| display: flex;
|
| flex-direction: column;
|
| position: relative;
|
| box-shadow: inset 0 0 30px rgba(28, 66, 151, 0.05);
|
| }
|
|
|
| .terminal-messages {
|
| flex: 1;
|
| overflow-y: auto;
|
| padding: 20px;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 15px;
|
| }
|
|
|
|
|
| .terminal-messages::-webkit-scrollbar {
|
| width: 12px;
|
| }
|
|
|
| .terminal-messages::-webkit-scrollbar-track {
|
| background: var(--bg-secondary);
|
| border-left: 2px solid var(--border-dim);
|
| }
|
|
|
| .terminal-messages::-webkit-scrollbar-thumb {
|
| background: var(--accent-dim);
|
| border: 2px solid var(--bg-secondary);
|
| }
|
|
|
| .terminal-messages::-webkit-scrollbar-thumb:hover {
|
| background: var(--accent-primary);
|
| }
|
|
|
|
|
| .welcome-screen {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: flex-start;
|
| justify-content: flex-start;
|
| height: 100%;
|
| text-align: left;
|
| gap: 20px;
|
| padding: 20px;
|
| animation: flicker 4s infinite;
|
| }
|
|
|
| @keyframes flicker {
|
| 0%, 100% { opacity: 1; }
|
| 50% { opacity: 0.95; }
|
| 52% { opacity: 0.8; }
|
| 54% { opacity: 0.95; }
|
| }
|
|
|
| .welcome-ascii {
|
| color: var(--accent-primary);
|
| font-size: 12px;
|
| line-height: 1.1;
|
| white-space: pre;
|
| text-shadow: 0 0 20px rgba(28, 66, 151, 0.5);
|
| font-family: 'JetBrains Mono', monospace;
|
| letter-spacing: 0;
|
| }
|
|
|
| .welcome-text {
|
| color: var(--text-secondary);
|
| font-size: 20px;
|
| max-width: 600px;
|
| }
|
|
|
| .command-hints {
|
| display: flex;
|
| flex-wrap: wrap;
|
| gap: 10px;
|
| justify-content: flex-start;
|
| margin-top: 20px;
|
| }
|
|
|
| .cmd-hint {
|
| border: 1px solid var(--border-dim);
|
| padding: 8px 16px;
|
| cursor: pointer;
|
| transition: all 0.2s;
|
| color: var(--text-secondary);
|
| font-size: 16px;
|
| }
|
|
|
| .cmd-hint:hover {
|
| border-color: var(--accent-primary);
|
| color: var(--accent-primary);
|
| background: rgba(28, 66, 151, 0.1);
|
| box-shadow: 0 0 15px rgba(28, 66, 151, 0.3);
|
| }
|
|
|
|
|
| .message {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 5px;
|
| animation: typeIn 0.3s ease;
|
| align-items: flex-start;
|
| }
|
|
|
| @keyframes typeIn {
|
| from { opacity: 0; transform: translateX(-10px); }
|
| to { opacity: 1; transform: translateX(0); }
|
| }
|
|
|
| .message-header {
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| color: var(--accent-primary);
|
| font-size: 16px;
|
| }
|
|
|
| .message.user .message-header {
|
| color: var(--success);
|
| }
|
|
|
| .message-timestamp {
|
| color: var(--text-muted);
|
| font-size: 14px;
|
| }
|
|
|
| .message-content {
|
| padding-left: 20px;
|
| color: var(--text-primary);
|
| line-height: 1.5;
|
| white-space: pre-wrap;
|
| text-align: left;
|
| width: 100%;
|
| }
|
|
|
| .message-content code {
|
| background: var(--bg-tertiary);
|
| color: var(--accent-primary);
|
| padding: 2px 6px;
|
| border: 1px solid var(--border-dim);
|
| font-family: 'JetBrains Mono', monospace;
|
| font-size: 14px;
|
| }
|
|
|
| .message-content pre {
|
| background: var(--bg-secondary);
|
| border: 1px solid var(--border-dim);
|
| padding: 15px;
|
| margin: 10px 0;
|
| overflow-x: auto;
|
| position: relative;
|
| width: 100%;
|
| }
|
|
|
| .message-content pre code {
|
| background: transparent;
|
| border: none;
|
| padding: 0;
|
| color: var(--text-primary);
|
| }
|
|
|
|
|
| .code-block-container {
|
| border: 2px solid var(--border-dim);
|
| margin: 15px 0;
|
| background: var(--bg-secondary);
|
| width: 100%;
|
| }
|
|
|
| .code-block-header {
|
| background: var(--bg-tertiary);
|
| padding: 10px 15px;
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| border-bottom: 1px solid var(--border-dim);
|
| }
|
|
|
| .code-lang {
|
| color: var(--accent-primary);
|
| font-size: 16px;
|
| text-transform: uppercase;
|
| letter-spacing: 1px;
|
| }
|
|
|
| .copy-btn {
|
| background: transparent;
|
| border: 1px solid var(--accent-primary);
|
| color: var(--accent-primary);
|
| padding: 5px 15px;
|
| font-family: 'VT323', monospace;
|
| font-size: 16px;
|
| cursor: pointer;
|
| transition: all 0.2s;
|
| text-transform: uppercase;
|
| }
|
|
|
| .copy-btn:hover {
|
| background: var(--accent-primary);
|
| color: var(--bg-primary);
|
| box-shadow: 0 0 15px rgba(28, 66, 151, 0.5);
|
| }
|
|
|
| .copy-btn.copied {
|
| background: var(--success);
|
| border-color: var(--success);
|
| color: var(--bg-primary);
|
| }
|
|
|
|
|
| .help-menu {
|
| border: 2px solid var(--accent-primary);
|
| background: var(--bg-secondary);
|
| padding: 20px;
|
| margin: 10px 0;
|
| max-width: 500px;
|
| }
|
|
|
| .help-title {
|
| color: var(--accent-primary);
|
| font-size: 24px;
|
| margin-bottom: 15px;
|
| text-align: left;
|
| border-bottom: 1px solid var(--border-dim);
|
| padding-bottom: 10px;
|
| }
|
|
|
| .help-item {
|
| display: flex;
|
| gap: 20px;
|
| margin: 10px 0;
|
| font-size: 16px;
|
| }
|
|
|
| .help-cmd {
|
| color: var(--success);
|
| min-width: 100px;
|
| font-family: 'JetBrains Mono', monospace;
|
| }
|
|
|
| .help-desc {
|
| color: var(--text-secondary);
|
| }
|
|
|
|
|
| .terminal-input-area {
|
| border-top: 2px solid var(--border-color);
|
| background: var(--bg-secondary);
|
| padding: 15px 20px;
|
| }
|
|
|
| .input-wrapper {
|
| display: flex;
|
| align-items: flex-end;
|
| gap: 10px;
|
| max-width: 100%;
|
| }
|
|
|
| .input-prompt {
|
| color: var(--accent-primary);
|
| font-size: 20px;
|
| white-space: nowrap;
|
| text-shadow: 0 0 10px rgba(28, 66, 151, 0.5);
|
| }
|
|
|
| .terminal-input {
|
| flex: 1;
|
| background: transparent;
|
| border: none;
|
| color: var(--text-primary);
|
| font-family: 'VT323', monospace;
|
| font-size: 20px;
|
| outline: none;
|
| resize: none;
|
| min-height: 30px;
|
| max-height: 150px;
|
| line-height: 1.4;
|
| }
|
|
|
| .terminal-input::placeholder {
|
| color: var(--text-muted);
|
| }
|
|
|
| .send-btn {
|
| background: transparent;
|
| border: 2px solid var(--accent-primary);
|
| color: var(--accent-primary);
|
| width: 40px;
|
| height: 40px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| cursor: pointer;
|
| font-size: 20px;
|
| transition: all 0.2s;
|
| }
|
|
|
| .send-btn:hover:not(:disabled) {
|
| background: var(--accent-primary);
|
| color: var(--bg-primary);
|
| box-shadow: 0 0 20px rgba(28, 66, 151, 0.5);
|
| }
|
|
|
| .send-btn:disabled {
|
| opacity: 0.3;
|
| cursor: not-allowed;
|
| border-color: var(--text-muted);
|
| color: var(--text-muted);
|
| }
|
|
|
| .input-footer {
|
| text-align: left;
|
| margin-top: 10px;
|
| color: var(--accent-primary);
|
| font-size: 14px;
|
| letter-spacing: 1px;
|
| font-family: 'JetBrains Mono', monospace;
|
| }
|
|
|
|
|
| .typing-indicator {
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| color: var(--accent-primary);
|
| padding: 10px 0;
|
| }
|
|
|
| .typing-text {
|
| animation: pulse 1.5s infinite;
|
| }
|
|
|
| @keyframes pulse {
|
| 0%, 100% { opacity: 0.4; }
|
| 50% { opacity: 1; }
|
| }
|
|
|
|
|
| .cursor {
|
| display: inline-block;
|
| width: 10px;
|
| height: 20px;
|
| background: var(--accent-primary);
|
| animation: cursorBlink 1s infinite;
|
| vertical-align: middle;
|
| margin-left: 2px;
|
| }
|
|
|
| @keyframes cursorBlink {
|
| 0%, 50% { opacity: 1; }
|
| 51%, 100% { opacity: 0; }
|
| }
|
|
|
|
|
| @media (max-width: 768px) {
|
| body {
|
| font-size: 16px;
|
| }
|
|
|
| .logo-ascii {
|
| font-size: 8px;
|
| }
|
|
|
| .welcome-ascii {
|
| font-size: 8px;
|
| }
|
|
|
| .terminal-container {
|
| padding: 10px;
|
| }
|
| }
|
|
|
|
|
| ::selection {
|
| background: var(--accent-primary);
|
| color: var(--bg-primary);
|
| }
|
|
|
|
|
| pre::-webkit-scrollbar {
|
| height: 10px;
|
| }
|
|
|
| pre::-webkit-scrollbar-track {
|
| background: var(--bg-tertiary);
|
| }
|
|
|
| pre::-webkit-scrollbar-thumb {
|
| background: var(--accent-dim);
|
| }
|
|
|
| pre::-webkit-scrollbar-thumb:hover {
|
| background: var(--accent-primary);
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="terminal-container">
|
| <header class="terminal-header">
|
| <div class="logo-section" title="Double-click to reset">
|
| <img src="https://i.imgur.com/f5QyYpV.png" alt="Hyze Code" class="logo-img">
|
| </div>
|
| <div class="header-status">
|
| <span>SYSTEM:</span>
|
| <div class="status-dot"></div>
|
| <span>ONLINE</span>
|
| </div>
|
| </header>
|
|
|
| <main class="terminal-main">
|
| <div class="terminal-messages" id="messagesContainer">
|
| <div class="welcome-screen" id="welcomeScreen">
|
| <div class="welcome-ascii">
|
| ██╗ ██╗██╗ ██╗███████╗███████╗ ██████╗ ██████╗ ██████╗ ███████╗
|
| ██║ ██║╚██╗ ██╔╝╚══███╔╝██╔════╝ ██╔════╝██╔═══██╗██╔══██╗██╔════╝
|
| ███████║ ╚████╔╝ ███╔╝ █████╗ ██║ ██║ ██║██║ ██║█████╗
|
| ██╔══██║ ╚██╔╝ ███╔╝ ██╔══╝ ██║ ██║ ██║██║ ██║██╔══╝
|
| ██║ ██║ ██║ ███████╗███████╗ ╚██████╗╚██████╔╝██████╔╝███████╗
|
| ╚═╝ ╚═╝ ╚═╝ ╚══════╝╚══════╝ ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝
|
| </div>
|
| <div class="welcome-text">
|
| > Welcome to Hyze Code!<br>
|
| > Powered by Hyze H1 and Kimi K2<br>
|
| > TYPE /help FOR COMMANDS<br>
|
| > TYPE /clear for clearing HISTORY
|
| </div>
|
| <div class="command-hints">
|
| <div class="cmd-hint" onclick="sendSuggestion('Create HTML/CSS layout')">> CREATE_LAYOUT</div>
|
| <div class="cmd-hint" onclick="sendSuggestion('Debug JavaScript code')">> DEBUG_JS</div>
|
| <div class="cmd-hint" onclick="sendSuggestion('Explain Python functions')">> EXPLAIN_PY</div>
|
| <div class="cmd-hint" onclick="sendSuggestion('Optimize SQL query')">> OPTIMIZE_SQL</div>
|
| </div>
|
| </div>
|
| </div>
|
| </main>
|
|
|
| <div class="terminal-input-area">
|
| <div class="input-wrapper">
|
| <span class="input-prompt">></span>
|
| <textarea class="terminal-input" id="messageInput" placeholder="Enter command..." rows="1" onkeydown="handleKeyDown(event)" oninput="autoResize(this)"></textarea>
|
| <button class="send-btn" id="sendBtn" onclick="sendMessage()">➤</button>
|
| </div>
|
| <div class="input-footer">[ HYZE CODE v2.0 | SECURE CONNECTION ]</div>
|
| </div>
|
| </div>
|
|
|
| <script>
|
|
|
| const API_KEY = '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';
|
| const MODEL = 'moonshotai/kimi-k2-instruct-0905';
|
| const API_URL = 'https://api.groq.com/openai/v1/chat/completions';
|
|
|
|
|
| let messages = [];
|
| let isGenerating = false;
|
| let codeBlockCounter = 0;
|
|
|
|
|
| document.addEventListener('DOMContentLoaded', () => {
|
| loadChatHistory();
|
| document.getElementById('messageInput').focus();
|
| });
|
|
|
|
|
| function autoResize(textarea) {
|
| textarea.style.height = 'auto';
|
| textarea.style.height = Math.min(textarea.scrollHeight, 150) + 'px';
|
| }
|
|
|
| function handleKeyDown(e) {
|
| if (e.key === 'Enter' && !e.shiftKey) {
|
| e.preventDefault();
|
| sendMessage();
|
| }
|
| }
|
|
|
| function sendSuggestion(text) {
|
| document.getElementById('messageInput').value = text;
|
| autoResize(document.getElementById('messageInput'));
|
| sendMessage();
|
| }
|
|
|
| function getTimestamp() {
|
| const now = new Date();
|
| return now.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
|
| }
|
|
|
| function scrollToBottom() {
|
| const container = document.getElementById('messagesContainer');
|
| container.scrollTop = container.scrollHeight;
|
| }
|
|
|
|
|
| function showHelp() {
|
| const container = document.getElementById('messagesContainer');
|
| const helpDiv = document.createElement('div');
|
| helpDiv.className = 'message system';
|
| helpDiv.innerHTML = `
|
| <div class="message-header" style="color: var(--warning)">
|
| <span>SYSTEM</span>
|
| <span class="message-timestamp">[${getTimestamp()}]</span>
|
| </div>
|
| <div class="message-content">
|
| <div class="help-menu">
|
| <div class="help-title">=== HYZE CODE COMMANDS ===</div>
|
| <div class="help-item">
|
| <span class="help-cmd">/clear</span>
|
| <span class="help-desc">Clear all chat history and reset terminal</span>
|
| </div>
|
| <div class="help-item">
|
| <span class="help-cmd">/help</span>
|
| <span class="help-desc">Display this help menu</span>
|
| </div>
|
| <div class="help-item">
|
| <span class="help-cmd">[message]</span>
|
| <span class="help-desc">Send message to AI assistant</span>
|
| </div>
|
| <div style="margin-top: 15px; padding-top: 10px; border-top: 1px solid var(--border-dim); color: var(--text-muted); text-align: left;">
|
| Double-click logo to force reset
|
| </div>
|
| </div>
|
| </div>
|
| `;
|
| container.appendChild(helpDiv);
|
| scrollToBottom();
|
| }
|
|
|
| function clearChat() {
|
| messages = [];
|
| codeBlockCounter = 0;
|
| localStorage.removeItem('hyze_code_chats');
|
|
|
| const container = document.getElementById('messagesContainer');
|
| container.innerHTML = `
|
| <div class="welcome-screen" id="welcomeScreen">
|
| <div class="welcome-ascii">
|
| ██╗ ██╗██╗ ██╗███████╗███████╗ ██████╗ ██████╗ ██████╗ ███████╗
|
| ██║ ██║╚██╗ ██╔╝╚══███╔╝██╔════╝ ██╔════╝██╔═══██╗██╔══██╗██╔════╝
|
| ███████║ ╚████╔╝ ███╔╝ █████╗ ██║ ██║ ██║██║ ██║█████╗
|
| ██╔══██║ ╚██╔╝ ███╔╝ ██╔══╝ ██║ ██║ ██║██║ ██║██╔══╝
|
| ██║ ██║ ██║ ███████╗███████╗ ╚██████╗╚██████╔╝██████╔╝███████╗
|
| ╚═╝ ╚═╝ ╚═╝ ╚══════╝╚══════╝ ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝
|
| </div>
|
| <div class="welcome-text">
|
| > TERMINAL INTERFACE INITIALIZED...<br>
|
| > CONNECTED TO NEURAL NETWORK<br>
|
| > TYPE /help FOR COMMANDS<br>
|
| > READY FOR INPUT_
|
| </div>
|
| <div class="command-hints">
|
| <div class="cmd-hint" onclick="sendSuggestion('Create HTML/CSS layout')">> CREATE_LAYOUT</div>
|
| <div class="cmd-hint" onclick="sendSuggestion('Debug JavaScript code')">> DEBUG_JS</div>
|
| <div class="cmd-hint" onclick="sendSuggestion('Explain Python functions')">> EXPLAIN_PY</div>
|
| <div class="cmd-hint" onclick="sendSuggestion('Optimize SQL query')">> OPTIMIZE_SQL</div>
|
| </div>
|
| </div>
|
| `;
|
|
|
|
|
| const confirmDiv = document.createElement('div');
|
| confirmDiv.className = 'message system';
|
| confirmDiv.innerHTML = `
|
| <div class="message-header" style="color: var(--success)">
|
| <span>SYSTEM</span>
|
| <span class="message-timestamp">[${getTimestamp()}]</span>
|
| </div>
|
| <div class="message-content">> TERMINAL CLEARED. HISTORY RESET.</div>
|
| `;
|
| container.appendChild(confirmDiv);
|
| scrollToBottom();
|
| }
|
|
|
|
|
| async function sendMessage() {
|
| const input = document.getElementById('messageInput');
|
| const text = input.value.trim();
|
|
|
| if (!text || isGenerating) return;
|
|
|
|
|
| if (text.toLowerCase() === '/clear') {
|
| clearChat();
|
| input.value = '';
|
| input.style.height = 'auto';
|
| return;
|
| }
|
|
|
| if (text.toLowerCase() === '/help') {
|
| showHelp();
|
| input.value = '';
|
| input.style.height = 'auto';
|
| return;
|
| }
|
|
|
| document.getElementById('welcomeScreen').style.display = 'none';
|
|
|
| const timestamp = getTimestamp();
|
| addMessage('user', text, timestamp);
|
| messages.push({ role: 'user', content: text });
|
|
|
| input.value = '';
|
| input.style.height = 'auto';
|
| showTypingIndicator();
|
|
|
| try {
|
| isGenerating = true;
|
| document.getElementById('sendBtn').disabled = true;
|
|
|
| const response = await fetch(API_URL, {
|
| method: 'POST',
|
| headers: {
|
| 'Authorization': `Bearer ${API_KEY}`,
|
| 'Content-Type': 'application/json'
|
| },
|
| body: JSON.stringify({
|
| model: MODEL,
|
| messages: [
|
| {
|
| role: 'system',
|
| content: 'You are Hyze Code, a terminal-style AI coding assistant. Provide concise, technical responses. Use code blocks with language specification.'
|
| },
|
| ...messages
|
| ],
|
| temperature: 0.6,
|
| max_tokens: 3000,
|
| stream: true
|
| })
|
| });
|
|
|
| if (!response.ok) throw new Error(`API Error: ${response.status}`);
|
|
|
| removeTypingIndicator();
|
|
|
| const messageDiv = document.createElement('div');
|
| messageDiv.className = 'message assistant';
|
| const msgTimestamp = getTimestamp();
|
| messageDiv.innerHTML = `
|
| <div class="message-header">
|
| <span>HYZE_AI</span>
|
| <span class="message-timestamp">[${msgTimestamp}]</span>
|
| </div>
|
| <div class="message-content" id="streamingContent"></div>
|
| `;
|
| document.getElementById('messagesContainer').appendChild(messageDiv);
|
|
|
| const contentDiv = messageDiv.querySelector('#streamingContent');
|
| const reader = response.body.getReader();
|
| const decoder = new TextDecoder();
|
| let fullContent = '';
|
|
|
| while (true) {
|
| const { done, value } = await reader.read();
|
| if (done) break;
|
|
|
| const chunk = decoder.decode(value);
|
| const lines = chunk.split('\n');
|
|
|
| for (const line of lines) {
|
| if (line.startsWith('data: ')) {
|
| const data = line.slice(6);
|
| if (data === '[DONE]') continue;
|
| try {
|
| const parsed = JSON.parse(data);
|
| const content = parsed.choices?.[0]?.delta?.content || '';
|
| if (content) {
|
| fullContent += content;
|
| contentDiv.innerHTML = formatMessage(fullContent);
|
| scrollToBottom();
|
| }
|
| } catch (e) {}
|
| }
|
| }
|
| }
|
|
|
|
|
| contentDiv.innerHTML = formatMessage(fullContent);
|
|
|
|
|
| contentDiv.querySelectorAll('pre code').forEach((block) => {
|
| hljs.highlightElement(block);
|
| });
|
|
|
|
|
| addCopyButtons(contentDiv);
|
|
|
| messages.push({ role: 'assistant', content: fullContent });
|
| saveChatHistory();
|
|
|
| } catch (error) {
|
| removeTypingIndicator();
|
| addMessage('assistant', `ERROR: ${error.message}`, getTimestamp());
|
| } finally {
|
| isGenerating = false;
|
| document.getElementById('sendBtn').disabled = false;
|
| }
|
| }
|
|
|
| function addMessage(role, content, timestamp) {
|
| const container = document.getElementById('messagesContainer');
|
| const messageDiv = document.createElement('div');
|
| messageDiv.className = `message ${role}`;
|
|
|
| const sender = role === 'user' ? 'USER' : 'HYZE_AI';
|
| const color = role === 'user' ? 'var(--success)' : 'var(--accent-primary)';
|
|
|
| messageDiv.innerHTML = `
|
| <div class="message-header" style="color: ${color}">
|
| <span>${sender}</span>
|
| <span class="message-timestamp">[${timestamp}]</span>
|
| </div>
|
| <div class="message-content">${formatMessage(content)}</div>
|
| `;
|
|
|
| container.appendChild(messageDiv);
|
| scrollToBottom();
|
|
|
|
|
| messageDiv.querySelectorAll('pre code').forEach((block) => {
|
| hljs.highlightElement(block);
|
| });
|
| addCopyButtons(messageDiv);
|
| }
|
|
|
| function showTypingIndicator() {
|
| const container = document.getElementById('messagesContainer');
|
| const indicator = document.createElement('div');
|
| indicator.className = 'typing-indicator';
|
| indicator.id = 'typingIndicator';
|
| indicator.innerHTML = `
|
| <span>HYZE_AI</span>
|
| <span class="typing-text">PROCESSING</span>
|
| <span class="cursor"></span>
|
| `;
|
| container.appendChild(indicator);
|
| scrollToBottom();
|
| }
|
|
|
| function removeTypingIndicator() {
|
| const indicator = document.getElementById('typingIndicator');
|
| if (indicator) indicator.remove();
|
| }
|
|
|
|
|
| function formatMessage(text) {
|
| let safeText = text.replace(/</g, '<').replace(/>/g, '>');
|
|
|
|
|
| let codeBlocks = [];
|
| safeText = safeText.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, lang, code) => {
|
| const id = codeBlockCounter++;
|
| const language = lang || 'text';
|
| codeBlocks.push({id, lang: language, code: code});
|
| return `<!--CODEBLOCK_${id}-->`;
|
| });
|
|
|
|
|
| safeText = safeText.replace(/`([^`]+)`/g, '<code>$1</code>');
|
|
|
|
|
| safeText = safeText.replace(/\*\*(.*?)\*\*/g, '<strong style="color: var(--accent-primary)">$1</strong>');
|
|
|
|
|
| safeText = safeText.replace(/\*(.*?)\*/g, '<em>$1</em>');
|
|
|
|
|
| safeText = safeText.replace(/^\s*-\s+(.*$)/gim, ' ▸ $1');
|
| safeText = safeText.replace(/^\s*\d+\.\s+(.*$)/gim, ' $1');
|
|
|
|
|
| safeText = safeText.replace(/\n/g, '<br>');
|
|
|
|
|
| safeText = safeText.replace(/<!--CODEBLOCK_(\d+)-->/g, (match, id) => {
|
| const block = codeBlocks.find(b => b.id == id);
|
| if (!block) return match;
|
|
|
| return `
|
| <div class="code-block-container" id="code-block-${block.id}">
|
| <div class="code-block-header">
|
| <span class="code-lang">${block.lang.toUpperCase()}</span>
|
| <button class="copy-btn" onclick="copyCode('${block.id}')">COPY</button>
|
| </div>
|
| <pre><code class="language-${block.lang}">${block.code.replace(/</g, '<')}</code></pre>
|
| </div>
|
| `;
|
| });
|
|
|
| return safeText;
|
| }
|
|
|
| function addCopyButtons(container) {
|
|
|
| }
|
|
|
| function copyCode(blockId) {
|
| const block = document.querySelector(`#code-block-${blockId} code`);
|
| if (!block) return;
|
|
|
| const code = block.textContent;
|
| navigator.clipboard.writeText(code).then(() => {
|
| const btn = document.querySelector(`#code-block-${blockId} .copy-btn`);
|
| const originalText = btn.textContent;
|
| btn.textContent = 'COPIED!';
|
| btn.classList.add('copied');
|
|
|
| setTimeout(() => {
|
| btn.textContent = originalText;
|
| btn.classList.remove('copied');
|
| }, 2000);
|
| });
|
| }
|
|
|
|
|
| function saveChatHistory() {
|
| localStorage.setItem('hyze_code_chats', JSON.stringify(messages));
|
| }
|
|
|
| function loadChatHistory() {
|
| const saved = localStorage.getItem('hyze_code_chats');
|
| if (saved) {
|
| try {
|
| messages = JSON.parse(saved);
|
| if (messages.length > 0) {
|
| document.getElementById('welcomeScreen').style.display = 'none';
|
| messages.forEach(msg => {
|
| addMessage(msg.role, msg.content, getTimestamp());
|
| });
|
| }
|
| } catch(e) { console.error("Failed to load history", e); }
|
| }
|
| }
|
|
|
|
|
| document.querySelector('.logo-section').addEventListener('dblclick', () => {
|
| if (confirm('RESET TERMINAL?')) {
|
| clearChat();
|
| }
|
| });
|
| </script>
|
| </body>
|
| </html> |
