From d6fdb7372d4eb880c7cae6cef6cb483b181147d6 Mon Sep 17 00:00:00 2001 From: mike Date: Sun, 28 Dec 2025 04:39:24 +0100 Subject: [PATCH] refactor: combine backend and model selectors into one dropdown Co-authored-by: aider (openai//models/qwen2.5-coder-32b-instruct-q4_k_m.gguf) --- chatv2.js | 88 ++++++++++++++++++++++++++---------------------------- index.html | 14 ++------- 2 files changed, 46 insertions(+), 56 deletions(-) diff --git a/chatv2.js b/chatv2.js index 363b5d4..661686a 100644 --- a/chatv2.js +++ b/chatv2.js @@ -19,6 +19,19 @@ const IS_PRODUCTION = window.location.hostname === 'jarvis-lan.appmodel.nl' const API_KEY = 'not-needed' const MAX_CHAT_HISTORY = 50 +let currentBackendModel = null +let availableBackendModels = [] +let currentStreamController = null +let isStreaming = false +let chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || [] + +chatHistory = chatHistory.map(message => ({ + role : message.role || 'user', + content : message.content || '', + markdown : message.markdown || false, + messageId: message.messageId || `msg-${ Date.now() }` +})) + const welcomeMessage = `# Welcome to LM Studio Chat! I now support **full conversation history**, **real-time streaming responses** and **dark, readable text formatting**. @@ -38,68 +51,60 @@ I now support **full conversation history**, **real-time streaming responses** a > *Tip: You can toggle streaming and markdown using the checkboxes below.*` -let currentBackend = 'plato' -let currentModel = null -let availableModels = [] -let currentStreamController = null -let isStreaming = false -let chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || [] - -chatHistory = chatHistory.map(message => ({ - role : message.role || 'user', - content : message.content || '', - markdown : message.markdown || false, - messageId: message.messageId || `msg-${ Date.now() }` -})) function getApiUrl() { - const backend = BACKENDS[currentBackend] + const [backendKey, model] = currentBackendModel.split(':') + const backend = BACKENDS[backendKey] return IS_PRODUCTION ? backend.prod : backend.dev } -function updateBackendDisplay() { - const backend = BACKENDS[currentBackend] +function updateBackendModelDisplay() { + const [backendKey, model] = currentBackendModel.split(':') + const backend = BACKENDS[backendKey] const displayText = IS_PRODUCTION ? `${ backend.prod } ? ${ backend.name }` : backend.dev - document.getElementById('backendDisplay').textContent = displayText + document.getElementById('backendDisplay').textContent = `${ displayText } - Model: ${ model }` } -async function fetchModels() { +async function fetchBackendModels() { try { const response = await fetch(`${ getApiUrl() }/models`) if (response.ok) { const data = await response.json() - availableModels = data.data || [] - populateModelSelector() + availableBackendModels = data.data.map(model => ({ + backend: currentBackendModel.split(':')[0], + model: model.id + })) + populateBackendModelSelector() - if (!currentModel && availableModels.length > 0) { - currentModel = availableModels[0].id - document.getElementById('modelSelector').value = currentModel + if (!currentBackendModel && availableBackendModels.length > 0) { + currentBackendModel = `${ availableBackendModels[0].backend }:${ availableBackendModels[0].model }` + document.getElementById('backendModelSelector').value = currentBackendModel } } else { console.error('Failed to fetch models:', response.statusText) - document.getElementById('modelSelector').innerHTML = '' + document.getElementById('backendModelSelector').innerHTML = '' } } catch (error) { console.error('Error fetching models:', error) - document.getElementById('modelSelector').innerHTML = '' + document.getElementById('backendModelSelector').innerHTML = '' } } -function populateModelSelector() { - const selector = document.getElementById('modelSelector') - if (availableModels.length === 0) { +function populateBackendModelSelector() { + const selector = document.getElementById('backendModelSelector') + if (availableBackendModels.length === 0) { selector.innerHTML = '' return } - selector.innerHTML = availableModels.map(model => - `` + selector.innerHTML = availableBackendModels.map(backendModel => + `` ).join('') - if (currentModel) { - selector.value = currentModel + if (currentBackendModel) { + selector.value = currentBackendModel } } @@ -118,22 +123,15 @@ function trimChatHistory() { } document.addEventListener('DOMContentLoaded', () => { - const backendSelector = document.getElementById('backendSelector') - const modelSelector = document.getElementById('modelSelector') + const backendModelSelector = document.getElementById('backendModelSelector') - backendSelector.value = currentBackend - updateBackendDisplay() - fetchModels() - - backendSelector.addEventListener('change', (e) => { - currentBackend = e.target.value - updateBackendDisplay() - fetchModels() + backendModelSelector.addEventListener('change', (e) => { + currentBackendModel = e.target.value + updateBackendModelDisplay() + fetchBackendModels() }) - modelSelector.addEventListener('change', (e) => { - currentModel = e.target.value - }) + fetchBackendModels() }) const chatLog = document.getElementById('chatLog') diff --git a/index.html b/index.html index 29ba8c1..e653d32 100644 --- a/index.html +++ b/index.html @@ -15,17 +15,9 @@
Chat with Streaming
- Backend: - -
-
- Model: - +