chore: update 6 file(s)
This commit is contained in:
mike
@@ -1 +1 @@
|
||||
model: ollama_chat/qwen2.5-coder:14b-instruct-q4_K_M
|
||||
model: /models/Qwen/Qwen2.5-Coder-32B-Instruct-GGUF/qwen2.5-coder-32b-instruct-q4_k_m.gguf
|
||||
@@ -1,3 +1,4 @@
|
||||
- name: /models/qwen2.5-coder-32b-instruct-q4_k_m.gguf
|
||||
- name: /models/Qwen/Qwen2.5-Coder-32B-Instruct-GGUF/qwen2.5-coder-32b-instruct-q4_k_m.gguf
|
||||
extra_params:
|
||||
num_ctx: 16384
|
||||
num_ctx: 16384
|
||||
num_threads: 8
|
||||
@@ -1 +1,5 @@
|
||||
.idea/
|
||||
.idea/
|
||||
.aider.tags.cache.v4
|
||||
.aider.chat.history.md
|
||||
.aider.input.history
|
||||
.env
|
||||
|
||||
@@ -2,23 +2,24 @@
|
||||
const BACKENDS = {
|
||||
plato : {
|
||||
prod: '/api/plato',
|
||||
dev : 'http://192.168.1.74:1234/v1',
|
||||
dev : 'http://192.168.1.74:1234/v1', // Removed trailing space
|
||||
name: 'Plato (192.168.1.74)'
|
||||
},
|
||||
stoic : {
|
||||
prod: '/api/stoic',
|
||||
dev : 'http://192.168.1.159:1234/v1',
|
||||
dev : 'http://192.168.1.159:1234/v1', // Removed trailing space
|
||||
name: 'Stoic (192.168.1.159)'
|
||||
},
|
||||
ollama: {
|
||||
prod: '/api/ollama',
|
||||
dev : 'http://192.168.1.159:8081/v1',
|
||||
dev : 'http://192.168.1.159:8081/v1', // Removed trailing space
|
||||
name: 'Ollama (192.168.1.159:8081)'
|
||||
}
|
||||
}
|
||||
|
||||
const IS_PRODUCTION = window.location.hostname === 'jarvis-lan.appmodel.nl'
|
||||
const API_KEY = 'not-needed'
|
||||
const MAX_CHAT_HISTORY = 50 // Maximum messages to keep in history
|
||||
|
||||
// Global state
|
||||
let currentBackend = 'plato'
|
||||
@@ -26,7 +27,7 @@ let currentModel = null
|
||||
let availableModels = []
|
||||
let currentStreamController = null
|
||||
let isStreaming = false
|
||||
let chatHistory = [] // Initialize chat history array
|
||||
let chatHistory = [] // Stores conversation history
|
||||
|
||||
// Get current API URL based on selected backend
|
||||
function getApiUrl() {
|
||||
@@ -38,7 +39,7 @@ function getApiUrl() {
|
||||
function updateBackendDisplay() {
|
||||
const backend = BACKENDS[currentBackend]
|
||||
const displayText = IS_PRODUCTION
|
||||
? `${ backend.prod } → ${ backend.name }`
|
||||
? `${ backend.prod } ? ${ backend.name }`
|
||||
: backend.dev
|
||||
document.getElementById('backendDisplay').textContent = displayText
|
||||
}
|
||||
@@ -84,6 +85,23 @@ function populateModelSelector() {
|
||||
}
|
||||
}
|
||||
|
||||
// Get formatted messages for API (excludes UI-specific properties)
|
||||
function getApiMessages() {
|
||||
// Get last N messages and format for API
|
||||
return chatHistory.slice(-MAX_CHAT_HISTORY).map(({ role, content }) => ({
|
||||
role,
|
||||
content
|
||||
}))
|
||||
}
|
||||
|
||||
// Trim chat history if it exceeds maximum
|
||||
function trimChatHistory() {
|
||||
if (chatHistory.length > MAX_CHAT_HISTORY) {
|
||||
chatHistory = chatHistory.slice(-MAX_CHAT_HISTORY)
|
||||
console.log(`Chat history trimmed to ${ MAX_CHAT_HISTORY } messages`)
|
||||
}
|
||||
}
|
||||
|
||||
// Handle backend and model selection changes
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const backendSelector = document.getElementById('backendSelector')
|
||||
@@ -96,7 +114,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
backendSelector.addEventListener('change', (e) => {
|
||||
currentBackend = e.target.value
|
||||
updateBackendDisplay()
|
||||
console.log('Backend switched to:', currentBackend, '→', getApiUrl())
|
||||
console.log('Backend switched to:', currentBackend, '?', getApiUrl())
|
||||
fetchModels() // Reload models for new backend
|
||||
})
|
||||
|
||||
@@ -146,7 +164,7 @@ function addMessage(role, content, markdown = false, messageId = null) {
|
||||
|
||||
const avatar = document.createElement('div')
|
||||
avatar.className = `avatar ${ role }-avatar`
|
||||
avatar.textContent = role === 'user' ? '👤' : '🤖'
|
||||
avatar.textContent = role === 'user' ? '?' : '?'
|
||||
|
||||
const name = document.createElement('span')
|
||||
name.textContent = role === 'user' ? 'You' : 'Assistant'
|
||||
@@ -183,9 +201,12 @@ function addMessage(role, content, markdown = false, messageId = null) {
|
||||
chatLog.appendChild(messageDiv)
|
||||
chatLog.scrollTop = chatLog.scrollHeight
|
||||
|
||||
// Add message to chat history
|
||||
// Store message in history (excluding UI-specific properties)
|
||||
chatHistory.push({ role, content, markdown, messageId })
|
||||
|
||||
// Trim history if it gets too long
|
||||
trimChatHistory()
|
||||
|
||||
return contentDiv
|
||||
}
|
||||
|
||||
@@ -201,8 +222,8 @@ function parseThinkingTags(content) {
|
||||
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>
|
||||
<span class="thinking-toggle" id="${ id }-toggle">?</span>
|
||||
<span>? Thinking...</span>
|
||||
</div>
|
||||
<div class="thinking-content" id="${ id }">${ thinkContent.trim() }</div>
|
||||
</div>`
|
||||
@@ -215,8 +236,8 @@ function parseThinkingTags(content) {
|
||||
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>
|
||||
<span class="thinking-toggle" id="${ id }-toggle">?</span>
|
||||
<span>? Thinking...</span>
|
||||
</div>
|
||||
<div class="thinking-content" id="${ id }">${ thinkContent.trim() }</div>
|
||||
</div>`
|
||||
@@ -267,7 +288,7 @@ function showTypingIndicator() {
|
||||
|
||||
const avatar = document.createElement('div')
|
||||
avatar.className = 'avatar assistant-avatar'
|
||||
avatar.textContent = '🤖'
|
||||
avatar.textContent = '?'
|
||||
|
||||
const name = document.createElement('span')
|
||||
name.textContent = 'Assistant'
|
||||
@@ -315,7 +336,7 @@ async function handleStreamingResponse(userMessage) {
|
||||
|
||||
const avatar = document.createElement('div')
|
||||
avatar.className = 'avatar assistant-avatar'
|
||||
avatar.textContent = '🤖'
|
||||
avatar.textContent = '?'
|
||||
|
||||
const name = document.createElement('span')
|
||||
name.textContent = 'Assistant'
|
||||
@@ -344,7 +365,7 @@ async function handleStreamingResponse(userMessage) {
|
||||
|
||||
const requestBody = {
|
||||
model : currentModel || 'local-model',
|
||||
messages : [{ role: 'user', content: userMessage }],
|
||||
messages : getApiMessages(), // Send full chat history
|
||||
stream : true,
|
||||
temperature: 0.7,
|
||||
max_tokens : 2000
|
||||
@@ -384,7 +405,7 @@ async function handleStreamingResponse(userMessage) {
|
||||
// Update immediately if enough time has passed
|
||||
updateScheduled = true
|
||||
requestAnimationFrame(() => {
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked)
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant')
|
||||
if (cursorSpan.parentNode) {
|
||||
contentDiv.appendChild(cursorSpan)
|
||||
}
|
||||
@@ -397,7 +418,7 @@ async function handleStreamingResponse(userMessage) {
|
||||
updateScheduled = true
|
||||
setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked)
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant')
|
||||
if (cursorSpan.parentNode) {
|
||||
contentDiv.appendChild(cursorSpan)
|
||||
}
|
||||
@@ -424,7 +445,7 @@ async function handleStreamingResponse(userMessage) {
|
||||
isStreaming = false
|
||||
currentStreamController = null
|
||||
// Final update and remove cursor
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked)
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant')
|
||||
if (cursorSpan.parentNode) {
|
||||
cursorSpan.parentNode.removeChild(cursorSpan)
|
||||
}
|
||||
@@ -446,19 +467,18 @@ async function handleStreamingResponse(userMessage) {
|
||||
}
|
||||
|
||||
// Final update
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked)
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant')
|
||||
chatLog.scrollTop = chatLog.scrollHeight
|
||||
|
||||
} catch (error) {
|
||||
console.error('Streaming error:', error)
|
||||
if (error.name !== 'AbortError') {
|
||||
updateMessageContent(contentDiv, `Error: ${ error.message }`, false)
|
||||
updateMessageContent(contentDiv, `Error: ${ error.message }`, false, 'assistant')
|
||||
}
|
||||
} finally {
|
||||
isStreaming = false
|
||||
currentStreamController = null
|
||||
sendBtn.disabled = false
|
||||
userInput.focus()
|
||||
|
||||
// Remove cursor if still exists
|
||||
if (cursorSpan.parentNode) {
|
||||
@@ -480,7 +500,7 @@ async function handleNonStreamingResponse(userMessage) {
|
||||
|
||||
const requestBody = {
|
||||
model : currentModel || 'local-model',
|
||||
messages : [{ role: 'user', content: userMessage }],
|
||||
messages : getApiMessages(), // Send full chat history
|
||||
stream : false,
|
||||
temperature: 0.7,
|
||||
max_tokens : 2000
|
||||
@@ -519,12 +539,6 @@ async function handleNonStreamingResponse(userMessage) {
|
||||
}
|
||||
}
|
||||
|
||||
function loadChatHistory() {
|
||||
chatHistory.forEach(message => {
|
||||
addMessage(message.role, message.content, message.markdown, message.messageId)
|
||||
})
|
||||
}
|
||||
|
||||
// Stop current stream
|
||||
function stopStream() {
|
||||
if (currentStreamController) {
|
||||
@@ -541,17 +555,24 @@ async function sendMessage() {
|
||||
const userMessage = userInput.value.trim()
|
||||
if (!userMessage || isStreaming) return
|
||||
|
||||
// Add user message to UI and history
|
||||
addMessage('user', userMessage)
|
||||
|
||||
// Clear input field
|
||||
userInput.value = ''
|
||||
userInput.style.height = 'auto'
|
||||
sendBtn.disabled = true
|
||||
|
||||
// Update button text based on streaming state
|
||||
if (streamToggle.checked) {
|
||||
sendBtn.textContent = 'Stop'
|
||||
handleStreamingResponse(userMessage)
|
||||
await handleStreamingResponse(userMessage)
|
||||
} else {
|
||||
handleNonStreamingResponse(userMessage)
|
||||
await handleNonStreamingResponse(userMessage)
|
||||
}
|
||||
|
||||
// Reset button text
|
||||
sendBtn.textContent = 'Send'
|
||||
}
|
||||
|
||||
// Event Listeners
|
||||
@@ -577,28 +598,25 @@ window.onload = () => {
|
||||
userInput.focus()
|
||||
fetchModels()
|
||||
|
||||
// Load chat history
|
||||
loadChatHistory()
|
||||
// Add welcome message (this will be the first entry in chatHistory)
|
||||
const welcomeMessage = `# Welcome to LM Studio Chat! ?
|
||||
|
||||
// Add welcome message
|
||||
setTimeout(() => {
|
||||
const welcomeMessage = `# Welcome to LM Studio Chat! 🚀
|
||||
|
||||
I now support **real-time streaming responses** and **dark, readable text formatting**.
|
||||
I now support **full conversation history**, **real-time streaming responses** and **dark, readable text formatting**.
|
||||
|
||||
## Features:
|
||||
1. **Streaming Mode** (enabled by default) - Watch responses appear word-by-word
|
||||
2. **Markdown Rendering** - Proper formatting for code, lists, tables, and more
|
||||
3. **Readable Dark Text** - No more eye strain from light gray text
|
||||
4. **Model Detection** - Automatically shows your loaded model
|
||||
1. **Full Chat History** - Complete conversation context is now sent to the AI
|
||||
2. **Smart History Management** - Automatically keeps the last ${ MAX_CHAT_HISTORY } messages
|
||||
3. **Streaming Mode** (enabled by default) - Watch responses appear word-by-word
|
||||
4. **Markdown Rendering** - Proper formatting for code, lists, tables, and more
|
||||
5. **Readable Dark Text** - No more eye strain from light gray text
|
||||
|
||||
## Try it out:
|
||||
- Ask a technical question to see **code formatting**
|
||||
- Type \`ls -la\` in a code block
|
||||
- Request a **numbered list** or table
|
||||
- Ask follow-up questions that reference earlier messages
|
||||
- Have a multi-turn conversation with full context
|
||||
- Ask "what did I just ask?" to test history retention
|
||||
- Watch the streaming response in real-time!
|
||||
|
||||
> *Tip: You can toggle streaming and markdown using the checkboxes below.*`
|
||||
addMessage('assistant', welcomeMessage, true)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
addMessage('assistant', welcomeMessage, true)
|
||||
}
|
||||
608
index.html
608
index.html
@@ -58,612 +58,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Configuration
|
||||
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)'
|
||||
},
|
||||
ollama: {
|
||||
prod: '/api/ollama',
|
||||
dev : 'http://192.168.1.159:8081/v1',
|
||||
name: 'Ollama (192.168.1.159:8081)'
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
let chatHistory = [] // Initialize chat history array
|
||||
|
||||
// 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')
|
||||
const sendBtn = document.getElementById('sendBtn')
|
||||
const streamToggle = document.getElementById('streamToggle')
|
||||
const markdownToggle = document.getElementById('markdownToggle')
|
||||
const modelNameSpan = document.getElementById('modelName')
|
||||
|
||||
// Initialize marked with options
|
||||
marked.setOptions({
|
||||
gfm : true,
|
||||
breaks : true,
|
||||
highlight: function(code, lang) {
|
||||
if (window.hljs) {
|
||||
const language = hljs.getLanguage(lang) ? lang : 'plaintext'
|
||||
return hljs.highlight(code, { language }).value
|
||||
}
|
||||
return code
|
||||
}
|
||||
})
|
||||
|
||||
// Auto-resize textarea
|
||||
function autoResize(textarea) {
|
||||
textarea.style.height = 'auto'
|
||||
textarea.style.height = Math.min(textarea.scrollHeight, 300) + 'px'
|
||||
}
|
||||
|
||||
// Old fetchModels function removed - now handled in DOMContentLoaded
|
||||
|
||||
// Add message to chat
|
||||
function addMessage(role, content, markdown = false, messageId = null) {
|
||||
const messageDiv = document.createElement('div')
|
||||
messageDiv.className = `message message-${ role }`
|
||||
if (messageId) {
|
||||
messageDiv.id = messageId
|
||||
}
|
||||
|
||||
const headerDiv = document.createElement('div')
|
||||
headerDiv.className = `message-header ${ role }`
|
||||
|
||||
const avatar = document.createElement('div')
|
||||
avatar.className = `avatar ${ role }-avatar`
|
||||
avatar.textContent = role === 'user' ? '👤' : '🤖'
|
||||
|
||||
const name = document.createElement('span')
|
||||
name.textContent = role === 'user' ? 'You' : 'Assistant'
|
||||
|
||||
headerDiv.appendChild(avatar)
|
||||
headerDiv.appendChild(name)
|
||||
|
||||
const contentDiv = document.createElement('div')
|
||||
|
||||
if (markdown && role === 'assistant' && markdownToggle.checked) {
|
||||
contentDiv.className = 'markdown-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(() => {
|
||||
contentDiv.querySelectorAll('pre code').forEach((block) => {
|
||||
hljs.highlightElement(block)
|
||||
})
|
||||
}, 0)
|
||||
}
|
||||
} else {
|
||||
// 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'
|
||||
}
|
||||
|
||||
messageDiv.appendChild(headerDiv)
|
||||
messageDiv.appendChild(contentDiv)
|
||||
chatLog.appendChild(messageDiv)
|
||||
chatLog.scrollTop = chatLog.scrollHeight
|
||||
|
||||
// Add message to chat history
|
||||
chatHistory.push({ role, content, markdown, messageId })
|
||||
|
||||
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(processedContent)
|
||||
if (window.hljs) {
|
||||
setTimeout(() => {
|
||||
contentDiv.querySelectorAll('pre code').forEach((block) => {
|
||||
hljs.highlightElement(block)
|
||||
})
|
||||
}, 0)
|
||||
}
|
||||
} else {
|
||||
contentDiv.textContent = newContent
|
||||
}
|
||||
}
|
||||
|
||||
// Show typing indicator
|
||||
function showTypingIndicator() {
|
||||
const typingDiv = document.createElement('div')
|
||||
typingDiv.id = 'typingIndicator'
|
||||
typingDiv.className = 'message message-assistant'
|
||||
|
||||
const headerDiv = document.createElement('div')
|
||||
headerDiv.className = 'message-header assistant'
|
||||
|
||||
const avatar = document.createElement('div')
|
||||
avatar.className = 'avatar assistant-avatar'
|
||||
avatar.textContent = '🤖'
|
||||
|
||||
const name = document.createElement('span')
|
||||
name.textContent = 'Assistant'
|
||||
|
||||
headerDiv.appendChild(avatar)
|
||||
headerDiv.appendChild(name)
|
||||
|
||||
const dotsDiv = document.createElement('div')
|
||||
dotsDiv.className = 'typing-indicator'
|
||||
dotsDiv.innerHTML = `
|
||||
<div class="typing-dot"></div>
|
||||
<div class="typing-dot"></div>
|
||||
<div class="typing-dot"></div>
|
||||
<span style="margin-left: 8px;">Thinking...</span>
|
||||
`
|
||||
|
||||
typingDiv.appendChild(headerDiv)
|
||||
typingDiv.appendChild(dotsDiv)
|
||||
chatLog.appendChild(typingDiv)
|
||||
chatLog.scrollTop = chatLog.scrollHeight
|
||||
|
||||
return typingDiv
|
||||
}
|
||||
|
||||
// Remove typing indicator
|
||||
function removeTypingIndicator(typingDiv) {
|
||||
if (typingDiv && typingDiv.parentNode) {
|
||||
typingDiv.parentNode.removeChild(typingDiv)
|
||||
}
|
||||
}
|
||||
|
||||
// Handle streaming response
|
||||
async function handleStreamingResponse(userMessage) {
|
||||
const messageId = 'msg-' + Date.now()
|
||||
let accumulatedContent = ''
|
||||
let contentDiv = null
|
||||
|
||||
// Create initial empty message
|
||||
const messageDiv = document.createElement('div')
|
||||
messageDiv.className = 'message message-assistant'
|
||||
messageDiv.id = messageId
|
||||
|
||||
const headerDiv = document.createElement('div')
|
||||
headerDiv.className = 'message-header assistant'
|
||||
|
||||
const avatar = document.createElement('div')
|
||||
avatar.className = 'avatar assistant-avatar'
|
||||
avatar.textContent = '🤖'
|
||||
|
||||
const name = document.createElement('span')
|
||||
name.textContent = 'Assistant'
|
||||
|
||||
headerDiv.appendChild(avatar)
|
||||
headerDiv.appendChild(name)
|
||||
|
||||
contentDiv = document.createElement('div')
|
||||
contentDiv.className = 'markdown-content'
|
||||
|
||||
messageDiv.appendChild(headerDiv)
|
||||
messageDiv.appendChild(contentDiv)
|
||||
chatLog.appendChild(messageDiv)
|
||||
|
||||
// Add streaming cursor
|
||||
const cursorSpan = document.createElement('span')
|
||||
cursorSpan.className = 'streaming-cursor'
|
||||
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 : currentModel || 'local-model',
|
||||
messages : [{ role: 'user', content: userMessage }],
|
||||
stream : true,
|
||||
temperature: 0.7,
|
||||
max_tokens : 2000
|
||||
}
|
||||
|
||||
const response = await fetch(`${ getApiUrl() }/chat/completions`, {
|
||||
method : 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json',
|
||||
'Authorization': `Bearer ${ API_KEY }`
|
||||
},
|
||||
body : JSON.stringify(requestBody)
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`API Error: ${ response.status } ${ response.statusText }`)
|
||||
}
|
||||
|
||||
const reader = response.body.getReader()
|
||||
const decoder = new TextDecoder()
|
||||
|
||||
isStreaming = true
|
||||
currentStreamController = new AbortController()
|
||||
|
||||
// Debounce DOM updates to reduce stutter
|
||||
let updateScheduled = false
|
||||
let lastUpdate = Date.now()
|
||||
const MIN_UPDATE_INTERVAL = 100 // ms, update at most every 100ms
|
||||
|
||||
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
|
||||
|
||||
const chunk = decoder.decode(value)
|
||||
const lines = chunk.split('\n').filter(line => line.trim() !== '')
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.startsWith('data: ')) {
|
||||
const data = line.slice(6)
|
||||
|
||||
if (data === '[DONE]') {
|
||||
isStreaming = false
|
||||
currentStreamController = null
|
||||
// Final update and remove cursor
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked)
|
||||
if (cursorSpan.parentNode) {
|
||||
cursorSpan.parentNode.removeChild(cursorSpan)
|
||||
}
|
||||
chatLog.scrollTop = chatLog.scrollHeight
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(data)
|
||||
if (parsed.choices && parsed.choices[0].delta.content) {
|
||||
accumulatedContent += parsed.choices[0].delta.content
|
||||
scheduleUpdate()
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('Error parsing stream data:', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Final update
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked)
|
||||
chatLog.scrollTop = chatLog.scrollHeight
|
||||
|
||||
} catch (error) {
|
||||
console.error('Streaming error:', error)
|
||||
if (error.name !== 'AbortError') {
|
||||
updateMessageContent(contentDiv, `Error: ${ error.message }`, false)
|
||||
}
|
||||
} finally {
|
||||
isStreaming = false
|
||||
currentStreamController = null
|
||||
sendBtn.disabled = false
|
||||
userInput.focus()
|
||||
|
||||
// Remove cursor if still exists
|
||||
if (cursorSpan.parentNode) {
|
||||
cursorSpan.parentNode.removeChild(cursorSpan)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle non-streaming response
|
||||
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 : currentModel || 'local-model',
|
||||
messages : [{ role: 'user', content: userMessage }],
|
||||
stream : false,
|
||||
temperature: 0.7,
|
||||
max_tokens : 2000
|
||||
}
|
||||
|
||||
const response = await fetch(`${ getApiUrl() }/chat/completions`, {
|
||||
method : 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json',
|
||||
'Authorization': `Bearer ${ API_KEY }`
|
||||
},
|
||||
body : JSON.stringify(requestBody)
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`API Error: ${ response.status } ${ response.statusText }`)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
removeTypingIndicator(typingIndicator)
|
||||
|
||||
if (data.choices && data.choices.length > 0) {
|
||||
const assistantReply = data.choices[0].message.content
|
||||
addMessage('assistant', assistantReply, markdownToggle.checked)
|
||||
} else {
|
||||
addMessage('assistant', 'No response generated.', false)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error:', error)
|
||||
removeTypingIndicator(typingIndicator)
|
||||
addMessage('assistant', `Error: ${ error.message }`, false)
|
||||
} finally {
|
||||
sendBtn.disabled = false
|
||||
userInput.focus()
|
||||
}
|
||||
}
|
||||
|
||||
function loadChatHistory() {
|
||||
chatHistory.forEach(message => {
|
||||
addMessage(message.role, message.content, message.markdown, message.messageId)
|
||||
})
|
||||
}
|
||||
|
||||
// Stop current stream
|
||||
function stopStream() {
|
||||
if (currentStreamController) {
|
||||
currentStreamController.abort()
|
||||
isStreaming = false
|
||||
currentStreamController = null
|
||||
sendBtn.disabled = false
|
||||
sendBtn.textContent = 'Send'
|
||||
}
|
||||
}
|
||||
|
||||
// Send message
|
||||
async function sendMessage() {
|
||||
const userMessage = userInput.value.trim()
|
||||
if (!userMessage || isStreaming) return
|
||||
|
||||
addMessage('user', userMessage)
|
||||
userInput.value = ''
|
||||
userInput.style.height = 'auto'
|
||||
sendBtn.disabled = true
|
||||
|
||||
if (streamToggle.checked) {
|
||||
sendBtn.textContent = 'Stop'
|
||||
handleStreamingResponse(userMessage)
|
||||
} else {
|
||||
handleNonStreamingResponse(userMessage)
|
||||
}
|
||||
}
|
||||
|
||||
// Event Listeners
|
||||
sendBtn.addEventListener('click', () => {
|
||||
if (isStreaming) {
|
||||
stopStream()
|
||||
} else {
|
||||
sendMessage()
|
||||
}
|
||||
})
|
||||
|
||||
userInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
if (!isStreaming) {
|
||||
sendMessage()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Initialize on load
|
||||
window.onload = () => {
|
||||
userInput.focus()
|
||||
fetchModels()
|
||||
|
||||
// Load chat history
|
||||
loadChatHistory()
|
||||
|
||||
// Add welcome message
|
||||
setTimeout(() => {
|
||||
const welcomeMessage = `# Welcome to LM Studio Chat! 🚀
|
||||
|
||||
I now support **real-time streaming responses** and **dark, readable text formatting**.
|
||||
|
||||
## Features:
|
||||
1. **Streaming Mode** (enabled by default) - Watch responses appear word-by-word
|
||||
2. **Markdown Rendering** - Proper formatting for code, lists, tables, and more
|
||||
3. **Readable Dark Text** - No more eye strain from light gray text
|
||||
4. **Model Detection** - Automatically shows your loaded model
|
||||
|
||||
## Try it out:
|
||||
- Ask a technical question to see **code formatting**
|
||||
- Type \`ls -la\` in a code block
|
||||
- Request a **numbered list** or table
|
||||
- Watch the streaming response in real-time!
|
||||
|
||||
> *Tip: You can toggle streaming and markdown using the checkboxes below.*`
|
||||
addMessage('assistant', welcomeMessage, true)
|
||||
}, 500)
|
||||
}
|
||||
</script>
|
||||
<script src="chatv2.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user