64 lines
2.7 KiB
HTML
64 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chat</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="chatContainer">
|
|
<div id="header">
|
|
<div>Chat with Streaming</div>
|
|
<div style="font-size: 0.9em; opacity: 0.9; display: flex; align-items: center; gap: 15px; flex-wrap: wrap;">
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<span>Backend:</span>
|
|
<select id="backendSelector" style="padding: 4px 8px; border-radius: 4px; border: 1px solid #444; background: #2a2a2a; color: #e0e0e0;">
|
|
<option value="ollama">Ollama (192.168.1.159:8081)</option>
|
|
<option value="plato">Plato (192.168.1.74)</option>
|
|
<option value="stoic">Stoic (192.168.1.159)</option>
|
|
</select>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<span>Model:</span>
|
|
<select id="modelSelector" style="padding: 4px 8px; border-radius: 4px; border: 1px solid #444; background: #2a2a2a; color: #e0e0e0; min-width: 200px;">
|
|
<option value="">Loading models...</option>
|
|
</select>
|
|
</div>
|
|
<code id="backendDisplay" style="font-size: 0.85em;"></code>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="chatLog"></div>
|
|
|
|
<div id="inputArea">
|
|
<textarea
|
|
id="userInput"
|
|
placeholder="Type your message here... (Shift+Enter for new line, Enter to send)"
|
|
rows="1"
|
|
oninput="autoResize(this)"
|
|
></textarea>
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div class="controls">
|
|
<div>
|
|
<label>
|
|
<input type="checkbox" id="streamToggle" checked> Streaming
|
|
</label>
|
|
<label style="margin-left: 15px;">
|
|
<input type="checkbox" id="markdownToggle" checked> Markdown
|
|
</label>
|
|
</div>
|
|
<div id="modelInfo">Model: <span id="modelName">unknown</span></div>
|
|
</div>
|
|
<button id="sendBtn">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="chatv2.js"></script>
|
|
</body>
|
|
</html>
|