| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>🦙 Llama.cpp Chat + Memory + Monitor</title> |
| <link rel="stylesheet" href="/static/style.css"> |
| </head> |
| <body> |
| <div id="app"> |
| <header> |
| <div class="brand"> |
| <span class="llama">🦙</span> |
| <div> |
| <h1>Llama.cpp Chat</h1> |
| <span class="subtitle">CPU-only · OpenAI-compatible · Tool-calling · Persistent Memory</span> |
| </div> |
| </div> |
| <div class="header-actions"> |
| <button id="new-chat-btn" onclick="newChat()" class="btn btn-secondary" title="Neuen Chat starten">+ Neu</button> |
| <button id="start-server-btn" onclick="startServer()" class="btn btn-primary"> |
| <span class="btn-icon">▶</span> |
| <span id="btn-text">Start Server</span> |
| </button> |
| </div> |
| </header> |
|
|
| <div class="main-grid"> |
| |
| <aside id="monitor-panel" class="monitor-panel"> |
| <div class="panel-header"> |
| <span class="panel-title">📊 System Monitor</span> |
| <span class="live-badge">● LIVE</span> |
| </div> |
| <div class="monitor-content"> |
| <div class="metric-row"> |
| <span class="metric-label">CPU Load</span> |
| <div class="bar-box"><div id="cpu-bar" class="bar-fill" style="width:0%"></div></div> |
| <span id="cpu-text" class="metric-value">0%</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">RAM</span> |
| <div class="bar-box"><div id="ram-bar" class="bar-fill ram" style="width:0%"></div></div> |
| <span id="ram-text" class="metric-value">0/0 MB</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Disk /data</span> |
| <div class="bar-box"><div id="disk-bar" class="bar-fill disk" style="width:0%"></div></div> |
| <span id="disk-text" class="metric-value">0/0 MB</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Load Avg</span> |
| <span id="load-text" class="metric-value right">0.00 0.00 0.00</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">llama-server</span> |
| <span id="llama-status" class="metric-value right">?</span> |
| </div> |
| <div id="llama-procs" class="llama-procs"></div> |
|
|
| <div class="mini-log"> |
| <div class="mini-log-title">🦙 llama-server metrics</div> |
| <pre id="llama-metrics">waiting...</pre> |
| </div> |
|
|
| <div class="chart-title">CPU % (60s)</div> |
| <canvas id="cpu-chart" width="260" height="80"></canvas> |
| <div class="chart-title">RAM % (60s)</div> |
| <canvas id="ram-chart" width="260" height="80"></canvas> |
| </div> |
| </aside> |
|
|
| |
| <main class="chat-column"> |
| <div class="status-bar"> |
| <div class="status-left"> |
| <div class="status-indicator" id="status-dot"></div> |
| <span id="status-text">Prüfe Status...</span> |
| </div> |
| <div class="status-mode">Mode: direct answers, tool calls as JSON, persistent memory</div> |
| </div> |
|
|
| <div id="loading-panel" class="loading-panel hidden"> |
| <div class="loading-header"> |
| <span class="spinner"></span> |
| <span id="loading-text">Modell wird geladen...</span> |
| </div> |
| <div class="progress-container"> |
| <div id="progress-bar" class="progress-bar" style="width: 0%"></div> |
| </div> |
| <div id="loading-detail" class="loading-detail">Warte auf llama-server Health-Check...</div> |
| </div> |
|
|
| <div class="controls"> |
| <div class="control-group"> |
| <label>Modell:</label> |
| <select id="model-select"> |
| <option value="Qwen2.5-Coder-3B-Instruct-Q4_K_M.gguf" selected>Qwen2.5-Coder-3B (schnell)</option> |
| <option value="Qwen2.5-Coder-7B-Instruct-Q4_K_M.gguf">Qwen2.5-Coder-7B (genauer)</option> |
| </select> |
| </div> |
| <div class="control-group"> |
| <label>Temperatur:</label> |
| <input type="number" id="temperature" value="0.7" min="0" max="2" step="0.1"> |
| </div> |
| <div class="control-group"> |
| <label>Max Tokens:</label> |
| <input type="number" id="n-predict" value="512" min="1" max="4096" step="1"> |
| </div> |
| </div> |
|
|
| <div id="chat" class="chat"> |
| <div class="empty-state"> |
| <div class="empty-icon">💬</div> |
| <p>Server ist bereit. Klicke auf "Start Server" oder sende eine Nachricht.</p> |
| </div> |
| </div> |
|
|
| <div id="processing" class="processing hidden"> |
| <div class="processing-content"> |
| <div class="processing-dots"><span></span><span></span><span></span></div> |
| <span id="processing-text">Modell denkt...</span> |
| <div class="processing-timer" id="processing-timer">0.0s</div> |
| </div> |
| </div> |
|
|
| <div class="input-area"> |
| <textarea id="input" placeholder="Nachricht eingeben... (Shift+Enter für neue Zeile, Enter zum Senden)" rows="2"></textarea> |
| <button id="send-btn" onclick="sendMessage()" class="btn btn-send">Senden</button> |
| </div> |
| </main> |
|
|
| |
| <aside id="memory-panel" class="memory-panel"> |
| <div class="panel-header"> |
| <span class="panel-title">🧠 Memory</span> |
| <button class="btn btn-sm" onclick="refreshMemory()" title="Aktualisieren">↻</button> |
| </div> |
| <div class="memory-actions"> |
| <input id="mem-category" placeholder="category" value="preference"> |
| <input id="mem-key" placeholder="key"> |
| <input id="mem-value" placeholder="value"> |
| <button class="btn btn-sm btn-primary" onclick="manualStoreMemory()">Speichern</button> |
| </div> |
| <div id="memory-list" class="memory-list"> |
| <div class="memory-empty">Noch keine Erinnerungen.</div> |
| </div> |
| <div class="memory-footer"> |
| <button class="btn btn-sm" onclick="exportMemory()">⬇ Export JSON</button> |
| <button class="btn btn-sm btn-danger" onclick="clearSessionMemory()">🗑 Session löschen</button> |
| </div> |
| </aside> |
| </div> |
| </div> |
|
|
| <script src="/static/chat.js"></script> |
| </body> |
| </html> |
|
|
