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

multiple-models

Browse Source
This commit is contained in:
mike
2025-12-17 15:35:44 +01:00
parent 30406ab0eb
commit f6fc261588
3 changed files with 197 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.aiignore Normal file
View File

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

214
index.html
View File

@@ -215,11 +215,12 @@
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 14px;
font-size: 15px;
resize: none;
min-height: 44px;
max-height: 120px;
min-height: 60px;
max-height: 200px;
font-family: inherit;
line-height: 1.5;
}
#userInput:focus {
@@ -344,7 +345,22 @@
<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 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>
@@ -375,16 +391,107 @@
<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 +516,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, 200) + '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) {
@@ -572,15 +666,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 +699,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 +753,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 +766,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 +802,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
View File

@@ -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;