tour/jarvis-lan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: tour:30406ab0eb2fae7cfe82c49e58f427a0bd9c576b
Branches Tags
tour:main
..
compare: tour:3f24902f3fa2f68817cdc8b161ea75888bbd9405
Branches Tags
tour:main

2 Commits
30406ab0eb ... 3f24902f3f

Author SHA1 Message Date
mike
3f24902f3f jarvis 2025-12-17 15:46:59 +01:00
mike
f6fc261588 multiple-models 2025-12-17 15:35:44 +01:00
3 changed files with 316 additions and 55 deletions
Expand all files Collapse all files

1
.aiignore Normal file
View File

@@ -0,0 +1 @@
.idea/

339
index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LM Studio Chat with Streaming</title> <title>Chat</title>
<!-- Darker markdown styling --> <!-- Darker markdown styling -->
<style> <style>
.markdown-content { .markdown-content {
@@ -206,20 +206,22 @@
padding: 15px; padding: 15px;
background: white; background: white;
display: flex; display: flex;
flex-direction: column;
gap: 10px; gap: 10px;
align-items: flex-end;
} }
#userInput { #userInput {
flex: 1; width: 100%;
padding: 12px 15px; padding: 16px 18px;
border: 1px solid #ddd; border: 2px solid #ddd;
border-radius: 8px; border-radius: 10px;
font-size: 14px; font-size: 16px;
resize: none; resize: none;
min-height: 44px; min-height: 100px;
max-height: 120px; max-height: 300px;
font-family: inherit; font-family: inherit;
line-height: 1.6;
box-sizing: border-box;
} }
#userInput:focus { #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 { .controls {
display: flex; display: flex;
gap: 10px; gap: 10px;
@@ -343,20 +391,35 @@
<body> <body>
<div id="chatContainer"> <div id="chatContainer">
<div id="header"> <div id="header">
<div>🤖 LM Studio Chat with Streaming</div> <div>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 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>
<div id="chatLog"></div> <div id="chatLog"></div>
<div id="inputArea"> <div id="inputArea">
<div style="flex: 1;">
<textarea <textarea
id="userInput" id="userInput"
placeholder="Type your message here... (Shift+Enter for new line, Enter to send)" placeholder="Type your message here... (Shift+Enter for new line, Enter to send)"
rows="1" rows="1"
oninput="autoResize(this)" oninput="autoResize(this)"
></textarea> ></textarea>
<div style="display: flex; justify-content: space-between; align-items: center;">
<div class="controls"> <div class="controls">
<div> <div>
<label> <label>
@@ -368,23 +431,114 @@
</div> </div>
<div id="modelInfo">Model: <span id="modelName">unknown</span></div> <div id="modelInfo">Model: <span id="modelName">unknown</span></div>
</div> </div>
</div>
<button id="sendBtn">Send</button> <button id="sendBtn">Send</button>
</div> </div>
</div>
</div> </div>
<script> <script>
// Configuration // Configuration
// Use /api proxy when served from production domain, direct access for local dev const BACKENDS = {
const API_BASE_URL = window.location.hostname === 'jarvis-lan.appmodel.nl' plato: {
? '/api' prod: '/api/plato',
: 'http://192.168.1.74:1234/v1' 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' const API_KEY = 'not-needed'
// Global state // Global state
let currentBackend = 'plato'
let currentModel = null
let availableModels = []
let currentStreamController = null let currentStreamController = null
let isStreaming = false 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 // DOM Elements
const chatLog = document.getElementById('chatLog') const chatLog = document.getElementById('chatLog')
const userInput = document.getElementById('userInput') const userInput = document.getElementById('userInput')
@@ -409,23 +563,10 @@ marked.setOptions({
// Auto-resize textarea // Auto-resize textarea
function autoResize(textarea) { function autoResize(textarea) {
textarea.style.height = 'auto' 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 // Old fetchModels function removed - now handled in DOMContentLoaded
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)
}
}
// Add message to chat // Add message to chat
function addMessage(role, content, markdown = false, messageId = null) { 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) { if (markdown && role === 'assistant' && markdownToggle.checked) {
contentDiv.className = 'markdown-content' 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 // Apply syntax highlighting if hljs is available
if (window.hljs) { if (window.hljs) {
setTimeout(() => { setTimeout(() => {
@@ -462,7 +605,9 @@ function addMessage(role, content, markdown = false, messageId = null) {
}, 0) }, 0)
} }
} else { } 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.whiteSpace = 'pre-wrap'
contentDiv.style.padding = '8px 0' contentDiv.style.padding = '8px 0'
contentDiv.style.color = '#2d3339' contentDiv.style.color = '#2d3339'
@@ -476,10 +621,60 @@ function addMessage(role, content, markdown = false, messageId = null) {
return contentDiv 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) // Update message content (for streaming)
function updateMessageContent(contentDiv, newContent, markdown = false) { function updateMessageContent(contentDiv, newContent, markdown = false) {
// Parse thinking tags first
const processedContent = parseThinkingTags(newContent)
if (markdown && markdownToggle.checked) { if (markdown && markdownToggle.checked) {
contentDiv.innerHTML = marked.parse(newContent) contentDiv.innerHTML = marked.parse(processedContent)
if (window.hljs) { if (window.hljs) {
setTimeout(() => { setTimeout(() => {
contentDiv.querySelectorAll('pre code').forEach((block) => { contentDiv.querySelectorAll('pre code').forEach((block) => {
@@ -572,15 +767,21 @@ async function handleStreamingResponse(userMessage) {
contentDiv.appendChild(cursorSpan) contentDiv.appendChild(cursorSpan)
try { try {
// Auto-select first model if none selected
if (!currentModel && availableModels.length > 0) {
currentModel = availableModels[0].id
document.getElementById('modelSelector').value = currentModel
}
const requestBody = { const requestBody = {
model : 'local-model', model : currentModel || 'local-model',
messages : [{ role: 'user', content: userMessage }], messages : [{ role: 'user', content: userMessage }],
stream : true, stream : true,
temperature: 0.7, temperature: 0.7,
max_tokens : 2000 max_tokens : 2000
} }
const response = await fetch(`${ API_BASE_URL }/chat/completions`, { const response = await fetch(`${ getApiUrl() }/chat/completions`, {
method : 'POST', method : 'POST',
headers: { headers: {
'Content-Type' : 'application/json', 'Content-Type' : 'application/json',
@@ -599,6 +800,46 @@ async function handleStreamingResponse(userMessage) {
isStreaming = true isStreaming = true
currentStreamController = new AbortController() 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) { while (true) {
const { done, value } = await reader.read() const { done, value } = await reader.read()
if (done) break if (done) break
@@ -613,10 +854,12 @@ async function handleStreamingResponse(userMessage) {
if (data === '[DONE]') { if (data === '[DONE]') {
isStreaming = false isStreaming = false
currentStreamController = null currentStreamController = null
// Remove cursor when done // Final update and remove cursor
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked)
if (cursorSpan.parentNode) { if (cursorSpan.parentNode) {
cursorSpan.parentNode.removeChild(cursorSpan) cursorSpan.parentNode.removeChild(cursorSpan)
} }
chatLog.scrollTop = chatLog.scrollHeight
return return
} }
@@ -624,15 +867,7 @@ async function handleStreamingResponse(userMessage) {
const parsed = JSON.parse(data) const parsed = JSON.parse(data)
if (parsed.choices && parsed.choices[0].delta.content) { if (parsed.choices && parsed.choices[0].delta.content) {
accumulatedContent += parsed.choices[0].delta.content accumulatedContent += parsed.choices[0].delta.content
scheduleUpdate()
// 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
}
} }
} catch (e) { } catch (e) {
console.log('Error parsing stream data:', e) console.log('Error parsing stream data:', e)
@@ -668,15 +903,21 @@ async function handleNonStreamingResponse(userMessage) {
const typingIndicator = showTypingIndicator() const typingIndicator = showTypingIndicator()
try { try {
// Auto-select first model if none selected
if (!currentModel && availableModels.length > 0) {
currentModel = availableModels[0].id
document.getElementById('modelSelector').value = currentModel
}
const requestBody = { const requestBody = {
model : 'local-model', model : currentModel || 'local-model',
messages : [{ role: 'user', content: userMessage }], messages : [{ role: 'user', content: userMessage }],
stream : false, stream : false,
temperature: 0.7, temperature: 0.7,
max_tokens : 2000 max_tokens : 2000
} }
const response = await fetch(`${ API_BASE_URL }/chat/completions`, { const response = await fetch(`${ getApiUrl() }/chat/completions`, {
method : 'POST', method : 'POST',
headers: { headers: {
'Content-Type' : 'application/json', 'Content-Type' : 'application/json',

19
nginx.conf
View File

@@ -10,11 +10,30 @@ server {
try_files $uri $uri.html $uri/ =404; try_files $uri $uri.html $uri/ =404;
} }
location = /index.html { location = /index.html {
try_files /index.html =404; try_files /index.html =404;
} }
# Proxy API requests to plato.lan (192.168.1.74) # 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/ { location /api/ {
proxy_pass http://192.168.1.74:1234/v1/; proxy_pass http://192.168.1.74:1234/v1/;
proxy_set_header Host $host; proxy_set_header Host $host;