Compare commits
2 Commits
30406ab0eb
...
3f24902f3f
| Author | SHA1 | Date | |
|---|---|---|---|
|
3f24902f3f | ||
|
|
f6fc261588 |
351
index.html
351
index.html
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LM Studio Chat with Streaming</title>
|
||||
<title>Chat</title>
|
||||
<!-- Darker markdown styling -->
|
||||
<style>
|
||||
.markdown-content {
|
||||
@@ -206,20 +206,22 @@
|
||||
padding: 15px;
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
#userInput {
|
||||
flex: 1;
|
||||
padding: 12px 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
padding: 16px 18px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
resize: none;
|
||||
min-height: 44px;
|
||||
max-height: 120px;
|
||||
min-height: 100px;
|
||||
max-height: 300px;
|
||||
font-family: inherit;
|
||||
line-height: 1.6;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#userInput:focus {
|
||||
@@ -313,6 +315,52 @@
|
||||
}
|
||||
}
|
||||
|
||||
.thinking-block {
|
||||
margin: 10px 0;
|
||||
border-left: 3px solid #ff9800;
|
||||
background: #fff3e0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.thinking-header {
|
||||
padding: 8px 12px;
|
||||
background: #ffe0b2;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
color: #e65100;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.thinking-header:hover {
|
||||
background: #ffcc80;
|
||||
}
|
||||
|
||||
.thinking-toggle {
|
||||
transition: transform 0.2s;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.thinking-toggle.collapsed {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.thinking-content {
|
||||
padding: 12px;
|
||||
color: #5d4037;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.5;
|
||||
border-top: 1px solid #ffcc80;
|
||||
}
|
||||
|
||||
.thinking-content.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
@@ -343,20 +391,35 @@
|
||||
<body>
|
||||
<div id="chatContainer">
|
||||
<div id="header">
|
||||
<div>🤖 LM Studio Chat with Streaming</div>
|
||||
<div style="font-size: 0.9em; opacity: 0.9;">Connected to: <code>/api (proxied to plato.lan:1234)</code></div>
|
||||
<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="plato">Plato (192.168.1.74)</option>
|
||||
<option value="stoic">Stoic (192.168.1.158)</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">
|
||||
<div style="flex: 1;">
|
||||
<textarea
|
||||
id="userInput"
|
||||
placeholder="Type your message here... (Shift+Enter for new line, Enter to send)"
|
||||
rows="1"
|
||||
oninput="autoResize(this)"
|
||||
></textarea>
|
||||
<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>
|
||||
@@ -368,23 +431,114 @@
|
||||
</div>
|
||||
<div id="modelInfo">Model: <span id="modelName">unknown</span></div>
|
||||
</div>
|
||||
<button id="sendBtn">Send</button>
|
||||
</div>
|
||||
<button id="sendBtn">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Configuration
|
||||
// Use /api proxy when served from production domain, direct access for local dev
|
||||
const API_BASE_URL = window.location.hostname === 'jarvis-lan.appmodel.nl'
|
||||
? '/api'
|
||||
: 'http://192.168.1.74:1234/v1'
|
||||
const BACKENDS = {
|
||||
plato: {
|
||||
prod: '/api/plato',
|
||||
dev: 'http://192.168.1.74:1234/v1',
|
||||
name: 'Plato (192.168.1.74)'
|
||||
},
|
||||
stoic: {
|
||||
prod: '/api/stoic',
|
||||
dev: 'http://192.168.1.159:1234/v1',
|
||||
name: 'Stoic (192.168.1.159)'
|
||||
}
|
||||
}
|
||||
|
||||
const IS_PRODUCTION = window.location.hostname === 'jarvis-lan.appmodel.nl'
|
||||
const API_KEY = 'not-needed'
|
||||
|
||||
// Global state
|
||||
let currentBackend = 'plato'
|
||||
let currentModel = null
|
||||
let availableModels = []
|
||||
let currentStreamController = null
|
||||
let isStreaming = false
|
||||
|
||||
// Get current API URL based on selected backend
|
||||
function getApiUrl() {
|
||||
const backend = BACKENDS[currentBackend]
|
||||
return IS_PRODUCTION ? backend.prod : backend.dev
|
||||
}
|
||||
|
||||
// Update backend display
|
||||
function updateBackendDisplay() {
|
||||
const backend = BACKENDS[currentBackend]
|
||||
const displayText = IS_PRODUCTION
|
||||
? `${backend.prod} → ${backend.name}`
|
||||
: backend.dev
|
||||
document.getElementById('backendDisplay').textContent = displayText
|
||||
}
|
||||
|
||||
// Fetch available models from backend
|
||||
async function fetchModels() {
|
||||
try {
|
||||
const response = await fetch(`${getApiUrl()}/models`)
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
availableModels = data.data || []
|
||||
populateModelSelector()
|
||||
|
||||
// Auto-select first model if none selected
|
||||
if (!currentModel && availableModels.length > 0) {
|
||||
currentModel = availableModels[0].id
|
||||
document.getElementById('modelSelector').value = currentModel
|
||||
}
|
||||
} else {
|
||||
console.error('Failed to fetch models:', response.statusText)
|
||||
document.getElementById('modelSelector').innerHTML = '<option value="">Error loading models</option>'
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching models:', error)
|
||||
document.getElementById('modelSelector').innerHTML = '<option value="">Error loading models</option>'
|
||||
}
|
||||
}
|
||||
|
||||
// Populate model selector dropdown
|
||||
function populateModelSelector() {
|
||||
const selector = document.getElementById('modelSelector')
|
||||
if (availableModels.length === 0) {
|
||||
selector.innerHTML = '<option value="">No models available</option>'
|
||||
return
|
||||
}
|
||||
|
||||
selector.innerHTML = availableModels.map(model =>
|
||||
`<option value="${model.id}">${model.id}</option>`
|
||||
).join('')
|
||||
|
||||
if (currentModel) {
|
||||
selector.value = currentModel
|
||||
}
|
||||
}
|
||||
|
||||
// Handle backend and model selection changes
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const backendSelector = document.getElementById('backendSelector')
|
||||
const modelSelector = document.getElementById('modelSelector')
|
||||
|
||||
backendSelector.value = currentBackend
|
||||
updateBackendDisplay()
|
||||
fetchModels()
|
||||
|
||||
backendSelector.addEventListener('change', (e) => {
|
||||
currentBackend = e.target.value
|
||||
updateBackendDisplay()
|
||||
console.log('Backend switched to:', currentBackend, '→', getApiUrl())
|
||||
fetchModels() // Reload models for new backend
|
||||
})
|
||||
|
||||
modelSelector.addEventListener('change', (e) => {
|
||||
currentModel = e.target.value
|
||||
console.log('Model selected:', currentModel)
|
||||
})
|
||||
})
|
||||
|
||||
// DOM Elements
|
||||
const chatLog = document.getElementById('chatLog')
|
||||
const userInput = document.getElementById('userInput')
|
||||
@@ -409,23 +563,10 @@ marked.setOptions({
|
||||
// Auto-resize textarea
|
||||
function autoResize(textarea) {
|
||||
textarea.style.height = 'auto'
|
||||
textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px'
|
||||
textarea.style.height = Math.min(textarea.scrollHeight, 300) + 'px'
|
||||
}
|
||||
|
||||
// Fetch available models
|
||||
async function fetchModels() {
|
||||
try {
|
||||
const response = await fetch(`${ API_BASE_URL }/models`)
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
if (data.data && data.data.length > 0) {
|
||||
modelNameSpan.textContent = data.data[0].id
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('Could not fetch models:', error)
|
||||
}
|
||||
}
|
||||
// Old fetchModels function removed - now handled in DOMContentLoaded
|
||||
|
||||
// Add message to chat
|
||||
function addMessage(role, content, markdown = false, messageId = null) {
|
||||
@@ -452,7 +593,9 @@ function addMessage(role, content, markdown = false, messageId = null) {
|
||||
|
||||
if (markdown && role === 'assistant' && markdownToggle.checked) {
|
||||
contentDiv.className = 'markdown-content'
|
||||
contentDiv.innerHTML = marked.parse(content)
|
||||
// Parse thinking tags before markdown
|
||||
const processedContent = parseThinkingTags(content)
|
||||
contentDiv.innerHTML = marked.parse(processedContent)
|
||||
// Apply syntax highlighting if hljs is available
|
||||
if (window.hljs) {
|
||||
setTimeout(() => {
|
||||
@@ -462,7 +605,9 @@ function addMessage(role, content, markdown = false, messageId = null) {
|
||||
}, 0)
|
||||
}
|
||||
} else {
|
||||
contentDiv.textContent = content
|
||||
// Parse thinking tags for non-markdown too
|
||||
const processedContent = parseThinkingTags(content)
|
||||
contentDiv.innerHTML = processedContent
|
||||
contentDiv.style.whiteSpace = 'pre-wrap'
|
||||
contentDiv.style.padding = '8px 0'
|
||||
contentDiv.style.color = '#2d3339'
|
||||
@@ -476,10 +621,60 @@ function addMessage(role, content, markdown = false, messageId = null) {
|
||||
return contentDiv
|
||||
}
|
||||
|
||||
// Parse [THINK] tags and create collapsible sections
|
||||
function parseThinkingTags(content) {
|
||||
let result = content
|
||||
let thinkingCounter = 0
|
||||
|
||||
// Handle complete [THINK]...[/THINK] blocks
|
||||
const completeThinkRegex = /\[THINK\]([\s\S]*?)\[\/THINK\]/gi
|
||||
result = result.replace(completeThinkRegex, (match, thinkContent) => {
|
||||
thinkingCounter++
|
||||
const id = `thinking-${Date.now()}-${thinkingCounter}`
|
||||
return `<div class="thinking-block">
|
||||
<div class="thinking-header" onclick="toggleThinking('${id}')">
|
||||
<span class="thinking-toggle" id="${id}-toggle">▼</span>
|
||||
<span>🤔 Thinking...</span>
|
||||
</div>
|
||||
<div class="thinking-content" id="${id}">${thinkContent.trim()}</div>
|
||||
</div>`
|
||||
})
|
||||
|
||||
// Handle incomplete [THINK] blocks (still streaming)
|
||||
const incompleteThinkRegex = /\[THINK\]([\s\S]*?)$/gi
|
||||
result = result.replace(incompleteThinkRegex, (match, thinkContent) => {
|
||||
thinkingCounter++
|
||||
const id = `thinking-${Date.now()}-${thinkingCounter}`
|
||||
return `<div class="thinking-block">
|
||||
<div class="thinking-header" onclick="toggleThinking('${id}')">
|
||||
<span class="thinking-toggle" id="${id}-toggle">▼</span>
|
||||
<span>🤔 Thinking...</span>
|
||||
</div>
|
||||
<div class="thinking-content" id="${id}">${thinkContent.trim()}</div>
|
||||
</div>`
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
// Toggle thinking section visibility
|
||||
window.toggleThinking = function(id) {
|
||||
const content = document.getElementById(id)
|
||||
const toggle = document.getElementById(id + '-toggle')
|
||||
|
||||
if (content && toggle) {
|
||||
content.classList.toggle('hidden')
|
||||
toggle.classList.toggle('collapsed')
|
||||
}
|
||||
}
|
||||
|
||||
// Update message content (for streaming)
|
||||
function updateMessageContent(contentDiv, newContent, markdown = false) {
|
||||
// Parse thinking tags first
|
||||
const processedContent = parseThinkingTags(newContent)
|
||||
|
||||
if (markdown && markdownToggle.checked) {
|
||||
contentDiv.innerHTML = marked.parse(newContent)
|
||||
contentDiv.innerHTML = marked.parse(processedContent)
|
||||
if (window.hljs) {
|
||||
setTimeout(() => {
|
||||
contentDiv.querySelectorAll('pre code').forEach((block) => {
|
||||
@@ -572,15 +767,21 @@ async function handleStreamingResponse(userMessage) {
|
||||
contentDiv.appendChild(cursorSpan)
|
||||
|
||||
try {
|
||||
// Auto-select first model if none selected
|
||||
if (!currentModel && availableModels.length > 0) {
|
||||
currentModel = availableModels[0].id
|
||||
document.getElementById('modelSelector').value = currentModel
|
||||
}
|
||||
|
||||
const requestBody = {
|
||||
model : 'local-model',
|
||||
model : currentModel || 'local-model',
|
||||
messages : [{ role: 'user', content: userMessage }],
|
||||
stream : true,
|
||||
temperature: 0.7,
|
||||
max_tokens : 2000
|
||||
}
|
||||
|
||||
const response = await fetch(`${ API_BASE_URL }/chat/completions`, {
|
||||
const response = await fetch(`${ getApiUrl() }/chat/completions`, {
|
||||
method : 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json',
|
||||
@@ -599,6 +800,46 @@ async function handleStreamingResponse(userMessage) {
|
||||
isStreaming = true
|
||||
currentStreamController = new AbortController()
|
||||
|
||||
// Debounce DOM updates to reduce stutter
|
||||
let updateScheduled = false
|
||||
let lastUpdate = Date.now()
|
||||
const MIN_UPDATE_INTERVAL = 50 // ms, update at most every 50ms
|
||||
|
||||
function scheduleUpdate() {
|
||||
if (updateScheduled) return
|
||||
|
||||
const now = Date.now()
|
||||
const timeSinceLastUpdate = now - lastUpdate
|
||||
|
||||
if (timeSinceLastUpdate >= MIN_UPDATE_INTERVAL) {
|
||||
// Update immediately if enough time has passed
|
||||
updateScheduled = true
|
||||
requestAnimationFrame(() => {
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked)
|
||||
if (cursorSpan.parentNode) {
|
||||
contentDiv.appendChild(cursorSpan)
|
||||
}
|
||||
chatLog.scrollTop = chatLog.scrollHeight
|
||||
lastUpdate = Date.now()
|
||||
updateScheduled = false
|
||||
})
|
||||
} else {
|
||||
// Schedule update after remaining time
|
||||
updateScheduled = true
|
||||
setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked)
|
||||
if (cursorSpan.parentNode) {
|
||||
contentDiv.appendChild(cursorSpan)
|
||||
}
|
||||
chatLog.scrollTop = chatLog.scrollHeight
|
||||
lastUpdate = Date.now()
|
||||
updateScheduled = false
|
||||
})
|
||||
}, MIN_UPDATE_INTERVAL - timeSinceLastUpdate)
|
||||
}
|
||||
}
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
@@ -613,10 +854,12 @@ async function handleStreamingResponse(userMessage) {
|
||||
if (data === '[DONE]') {
|
||||
isStreaming = false
|
||||
currentStreamController = null
|
||||
// Remove cursor when done
|
||||
// Final update and remove cursor
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked)
|
||||
if (cursorSpan.parentNode) {
|
||||
cursorSpan.parentNode.removeChild(cursorSpan)
|
||||
}
|
||||
chatLog.scrollTop = chatLog.scrollHeight
|
||||
return
|
||||
}
|
||||
|
||||
@@ -624,15 +867,7 @@ async function handleStreamingResponse(userMessage) {
|
||||
const parsed = JSON.parse(data)
|
||||
if (parsed.choices && parsed.choices[0].delta.content) {
|
||||
accumulatedContent += parsed.choices[0].delta.content
|
||||
|
||||
// Update content every 5 characters for smoother display
|
||||
if (accumulatedContent.length % 5 === 0 || parsed.choices[0].finish_reason) {
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked)
|
||||
if (cursorSpan.parentNode) {
|
||||
contentDiv.appendChild(cursorSpan)
|
||||
}
|
||||
chatLog.scrollTop = chatLog.scrollHeight
|
||||
}
|
||||
scheduleUpdate()
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('Error parsing stream data:', e)
|
||||
@@ -668,15 +903,21 @@ async function handleNonStreamingResponse(userMessage) {
|
||||
const typingIndicator = showTypingIndicator()
|
||||
|
||||
try {
|
||||
// Auto-select first model if none selected
|
||||
if (!currentModel && availableModels.length > 0) {
|
||||
currentModel = availableModels[0].id
|
||||
document.getElementById('modelSelector').value = currentModel
|
||||
}
|
||||
|
||||
const requestBody = {
|
||||
model : 'local-model',
|
||||
model : currentModel || 'local-model',
|
||||
messages : [{ role: 'user', content: userMessage }],
|
||||
stream : false,
|
||||
temperature: 0.7,
|
||||
max_tokens : 2000
|
||||
}
|
||||
|
||||
const response = await fetch(`${ API_BASE_URL }/chat/completions`, {
|
||||
const response = await fetch(`${ getApiUrl() }/chat/completions`, {
|
||||
method : 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json',
|
||||
|
||||
19
nginx.conf
19
nginx.conf
@@ -10,11 +10,30 @@ server {
|
||||
try_files $uri $uri.html $uri/ =404;
|
||||
}
|
||||
|
||||
|
||||
location = /index.html {
|
||||
try_files /index.html =404;
|
||||
}
|
||||
|
||||
# Proxy API requests to plato.lan (192.168.1.74)
|
||||
location /api/plato/ {
|
||||
proxy_pass http://192.168.1.74:1234/v1/;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
|
||||
# Proxy API requests to stoic.lan (192.168.1.159)
|
||||
location /api/stoic/ {
|
||||
proxy_pass http://192.168.1.159:1234/v1/;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
|
||||
# Default /api/ points to plato for backwards compatibility
|
||||
location /api/ {
|
||||
proxy_pass http://192.168.1.74:1234/v1/;
|
||||
proxy_set_header Host $host;
|
||||
|
||||
Reference in New Issue
Block a user