multiple-models

.aiignore

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

index.html

@@ -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;
+       min-height: 60px;
-       max-height: 120px;
+       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 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'
 
 // 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
+// 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
 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
-
+							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) {
 						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',

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;