80 lines
3.6 KiB
HTML
80 lines
3.6 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 & Model:</span>
|
|
<select id="backendModelSelector" style="padding: 4px 8px; border-radius: 4px; border: 1px solid #444; background: #2a2a2a; color: #e0e0e0; min-width: 200px;">
|
|
<option value="">Loading backends and models...</option>
|
|
</select>
|
|
</div>
|
|
<code id="backendDisplay" style="font-size: 0.85em;"></code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="chatLog">
|
|
<div class="message message-assistant"><div class="message-header assistant"><div class="avatar assistant-avatar">?</div><span>Assistant</span></div><div class="markdown-content"><h1>Welcome to LM Studio Chat!</h1>
|
|
<p>I now support <strong>full conversation history</strong>, <strong>real-time streaming responses</strong> and <strong>dark, readable text formatting</strong>.</p>
|
|
<h2>Features:</h2>
|
|
<ol>
|
|
<li><strong>Full Chat History</strong> - Complete conversation context is now sent to the AI</li>
|
|
<li><strong>Smart History Management</strong> - Automatically keeps the last 50 messages</li>
|
|
<li><strong>Streaming Mode</strong> (enabled by default) - Watch responses appear word-by-word</li>
|
|
<li><strong>Markdown Rendering</strong> - Proper formatting for code, lists, tables, and more</li>
|
|
<li><strong>Readable Dark Text</strong> - No more eye strain from light gray text</li>
|
|
</ol>
|
|
<h2>Try it out:</h2>
|
|
<ul>
|
|
<li>Ask follow-up questions that reference earlier messages</li>
|
|
<li>Have a multi-turn conversation with full context</li>
|
|
<li>Ask "what did I just ask?" to test history retention</li>
|
|
<li>Watch the streaming response in real-time!</li>
|
|
</ul>
|
|
<blockquote>
|
|
<p><em>Tip: You can toggle streaming and markdown using the checkboxes below.</em></p>
|
|
</blockquote>
|
|
</div></div>
|
|
</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>
|
|
<button id="resetBtn">Reset Chat</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="chatv3.js"></script>
|
|
</body>
|
|
</html>
|