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

Compare commits

base: tour:8ab0ae4a4d3b75b125fd8ce3407b36969e417519
Branches Tags
tour:main
...
compare: tour:main
Branches Tags
tour:main

15 Commits
8ab0ae4a4d ... main

Author SHA1 Message Date
mike
9a649a9475 chore: update 3 file(s) 2025-12-29 00:00:55 +01:00
mike
11f0f8fbee chore: update 1 file(s) 2025-12-28 23:45:20 +01:00
mike
a93f8def81 chore: update 1 file(s) 2025-12-28 23:40:09 +01:00
mike
2afa812eea chore: update 1 file(s) 2025-12-28 23:39:18 +01:00
mike
a94af25367 chore: update 1 file(s) 2025-12-28 23:37:56 +01:00
mike
c551925e86 chore: update 1 file(s) 2025-12-28 23:36:56 +01:00
mike
843bf78727 chore: update 9 file(s) 2025-12-28 23:24:51 +01:00
mike
5805f1e81c chore: update 8 file(s) 2025-12-28 07:59:46 +01:00
mike
19acb7ef15 chore: update 2 file(s) 2025-12-28 05:39:15 +01:00
mike
ca941dcc6f chore: update 2 file(s) 2025-12-28 05:33:06 +01:00
mike
7e7439d5c2 chore: update 1 file(s) 2025-12-28 05:27:30 +01:00
mike
2b6a0c866f chore: update 2 file(s) 2025-12-28 05:25:26 +01:00
mike
7b9947da7e chore: update 1 file(s) 2025-12-28 05:11:34 +01:00
mike
267e155ad1 chore: update 3 file(s) 2025-12-28 05:01:51 +01:00
mike
d6fdb7372d refactor: combine backend and model selectors into one dropdown 
Co-authored-by: aider (openai//models/qwen2.5-coder-32b-instruct-q4_k_m.gguf) <aider@aider.chat>
 2025-12-28 04:39:24 +01:00
15 changed files with 5634 additions and 204 deletions
Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -1,3 +1,5 @@
.idea/ .idea/
.env .env
.aider* .aider*
node_modules/
dist/

18
Dockerfile
View File

@@ -1,7 +1,15 @@
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY www/ www/
COPY webpack.config.js ./
COPY robots.txt ./
COPY site.webmanifest ./
RUN mkdir -p /usr/share/nginx/html
RUN npm run build
FROM nginx:alpine FROM nginx:alpine
COPY index.html /usr/share/nginx/html/ COPY --from=builder /app/dist /usr/share/nginx/html
COPY style.css /usr/share/nginx/html/
COPY chatv2.js /usr/share/nginx/html/
COPY 404.html /usr/share/nginx/html/
COPY favicon.ico /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

64
index.html
View File

@@ -1,64 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
</head>
<body>
<div id="chatContainer">
<div id="header">
<div>Chat with Streaming</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="ollama">Ollama (192.168.1.159:8081)</option>
<option value="plato">Plato (192.168.1.74)</option>
<option value="stoic">Stoic (192.168.1.159)</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>
<div id="inputArea">
<textarea
id="userInput"
placeholder="Type your message here... (Shift+Enter for new line, Enter to send)"
rows="1"
oninput="autoResize(this)"
></textarea>
<div style="display: flex; justify-content: space-between; align-items: center;">
<div class="controls">
<div>
<label>
<input type="checkbox" id="streamToggle" checked> Streaming
</label>
<label style="margin-left: 15px;">
<input type="checkbox" id="markdownToggle" checked> Markdown
</label>
</div>
<div id="modelInfo">Model: <span id="modelName">unknown</span></div>
</div>
<button id="sendBtn">Send</button>
<button id="resetBtn">Reset Chat</button>
</div>
</div>
</div>
<script src="chatv2.js"></script>
</body>
</html>

34
nginx.conf
View File

@@ -1,9 +1,14 @@
server { server {
listen 80; listen 80;
server_name localhost; server_name _;
root /usr/share/nginx/html; root /usr/share/nginx/html;
index index.html; index index.html;
# Disable caching for all responses during debugging
add_header Cache-Control "no-cache, no-store, must-revalidate" always;
add_header Pragma "no-cache" always;
add_header Expires "0" always;
# Favicon # Favicon
location = /favicon.ico { location = /favicon.ico {
try_files /favicon.ico =204; try_files /favicon.ico =204;
@@ -11,14 +16,14 @@ server {
log_not_found off; log_not_found off;
} }
location = style.css { # Serve shared JS and CSS directories at root
try_files /style.css =204; location /js/ {
try_files $uri =404;
} }
location = chatv2.js { location /css/ {
try_files /chatv2.js =204; try_files $uri =404;
} }
# Custom 404 page # Custom 404 page
error_page 404 /404.html; error_page 404 /404.html;
location = /404.html { location = /404.html {
@@ -39,7 +44,7 @@ server {
# Proxy API requests to plato.lan (192.168.1.74) # Proxy API requests to plato.lan (192.168.1.74)
location /api/plato/ { location /api/plato/ {
proxy_pass http://192.168.1.74:1234/v1/; proxy_pass http://192.168.1.74:8080/v1/;
proxy_set_header Host $host; proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
@@ -48,7 +53,7 @@ server {
# Proxy API requests to stoic.lan (192.168.1.159) # Proxy API requests to stoic.lan (192.168.1.159)
location /api/stoic/ { location /api/stoic/ {
proxy_pass http://192.168.1.159:1234/v1/; proxy_pass http://192.168.1.159:8081/v1/;
proxy_set_header Host $host; proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
@@ -66,15 +71,26 @@ server {
# Default /api/ points to plato for backwards compatibility # 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:8080/v1/;
proxy_set_header Host $host; proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Forwarded-Proto $scheme;
} }
# Cache static assets with content hash - minimal caching
location ~* \.(js|css)$ {
expires 1s; # 1 second for rapid iteration
add_header Cache-Control "public, max-age=1, must-revalidate" always;
}
# Cache images and icons - short caching
location ~* \.(ico|png|svg|jpg|jpeg|gif|webp)$ {
expires 5s; # 5 seconds, adjust as needed
add_header Cache-Control "public, max-age=5, must-revalidate" always;
}
# Gzip compression for better performance # Gzip compression for better performance
gzip on; gzip on;
gzip_vary on; gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json; gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
} }

5141
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

32
package.json Normal file
View File

@@ -0,0 +1,32 @@
{
"name": "jarvis-lan",
"version": "0.0.1",
"description": "",
"private": true,
"type": "module",
"keywords": [
""
],
"license": "",
"author": "",
"scripts": {
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
"watch": "webpack --mode development --watch",
"dev": "webpack serve --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^13.0.1",
"css-loader": "^7.1.2",
"html-webpack-plugin": "^5.6.5",
"mini-css-extract-plugin": "^2.9.4",
"webpack": "^5.104.0",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.2"
},
"dependencies": {
"jsdom": "^27.3.0"
}
}

5
robots.txt Normal file
View File

@@ -0,0 +1,5 @@
# www.robotstxt.org/
# Allow crawling of all content
User-agent: *
Disallow:

12
site.webmanifest Normal file
View File

@@ -0,0 +1,12 @@
{
"short_name": "",
"name": "",
"icons": [{
"src": "icon.png",
"type": "image/png",
"sizes": "192x192"
}],
"start_url": "/?utm_source=homescreen",
"background_color": "#fafafa",
"theme_color": "#fafafa"
}

91
webpack.config.js Normal file
View File

@@ -0,0 +1,91 @@
import path from 'path'
import { fileURLToPath } from 'url'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import { CleanWebpackPlugin } from 'clean-webpack-plugin'
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
export default (env, argv) => {
const isProduction = argv.mode === 'production'
return {
mode: isProduction ? 'production' : 'development',
entry: {
www: ['./www/chatv3.js', './www/style2.css']
},
output: {
path : path.resolve(__dirname, 'dist'),
filename : isProduction ? 'js/[name].[contenthash:8].js' : 'js/[name].js',
publicPath: isProduction ? '../' : '/'
},
module: {
rules: [
{
test: /\.css$/,
use : [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: isProduction ? 'css/[name].[contenthash:8].css' : 'css/[name].css'
}),
new HtmlWebpackPlugin({
template: './www/index.html',
filename: 'index.html',
chunks : ['www'],
inject : 'body',
minify : isProduction
}),
new CopyWebpackPlugin({
patterns: [
{ from: 'www/404.html', to: '404.html' },
{ from: 'www/favicon.ico', to: 'favicon.ico' },
{ from: 'www/icon.svg', to: 'icon.svg' },
{ from: 'robots.txt', to: 'robots.txt', noErrorOnMissing: true },
{ from: 'site.webmanifest', to: 'site.webmanifest', noErrorOnMissing: true }
]
})
],
optimization: {
moduleIds : 'deterministic',
runtimeChunk: 'single',
splitChunks : {
cacheGroups: {
vendor: {
test : /[\\/]node_modules[\\/]/,
name : 'vendors',
chunks: 'all'
}
}
}
},
devtool: isProduction ? 'source-map' : 'eval-source-map',
devServer: {
host : '0.0.0.0',
port : 8082,
allowedHosts : 'all',
hot : true,
devMiddleware: { publicPath: '/' },
static : [
{ directory: path.resolve(__dirname, 'dist') }
]
}
}
}

0
404.html → www/404.html
View File

281
chatv2.js → www/chatv3.js
View File

@@ -1,7 +1,9 @@
import './style2.css'
const BACKENDS = { const BACKENDS = {
plato : { plato : {
prod: '/api/plato', prod: '/api/plato',
dev : 'http://192.168.1.74:1234/v1', dev : 'http://192.168.1.74:8080/v1',
name: 'Plato (192.168.1.74)' name: 'Plato (192.168.1.74)'
}, },
stoic : { stoic : {
@@ -19,6 +21,20 @@ const IS_PRODUCTION = window.location.hostname === 'jarvis-lan.appmodel.nl'
const API_KEY = 'not-needed' const API_KEY = 'not-needed'
const MAX_CHAT_HISTORY = 50 const MAX_CHAT_HISTORY = 50
let currentBackendModel = null
let availableBackendModels = []
let currentStreamController = null
let isStreaming = false
let chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || []
// ✅ FIX: Generate unique IDs and validate message structure
chatHistory = chatHistory.map((message, index) => ({
role : message.role || 'user',
content : message.content || '',
markdown : message.markdown || false,
messageId: message.messageId || `msg-${ Date.now() }-${ index }`
})).filter(msg => msg.content && typeof msg.content === 'string')
const welcomeMessage = `# Welcome to LM Studio Chat! const welcomeMessage = `# Welcome to LM Studio Chat!
I now support **full conversation history**, **real-time streaming responses** and **dark, readable text formatting**. I now support **full conversation history**, **real-time streaming responses** and **dark, readable text formatting**.
@@ -38,68 +54,118 @@ I now support **full conversation history**, **real-time streaming responses** a
> *Tip: You can toggle streaming and markdown using the checkboxes below.*` > *Tip: You can toggle streaming and markdown using the checkboxes below.*`
let currentBackend = 'plato' // ✅ NEW: Robust parser for backend:model format
let currentModel = null function splitBackendModel(value) {
let availableModels = [] if (!value || value === ':') {
let currentStreamController = null return { backendKey: '', model: '' }
let isStreaming = false }
let chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || []
chatHistory = chatHistory.map(message => ({ const colonIndex = value.indexOf(':')
role : message.role || 'user', if (colonIndex === -1) {
content : message.content || '', return { backendKey: value, model: '' }
markdown : message.markdown || false, }
messageId: message.messageId || `msg-${ Date.now() }`
})) return {
backendKey: value.substring(0, colonIndex),
model : value.substring(colonIndex + 1)
}
}
function getApiUrl() { function getApiUrl() {
const backend = BACKENDS[currentBackend] const { backendKey, model } = splitBackendModel(currentBackendModel)
const effectiveBackendKey = backendKey || 'plato'
const backend = BACKENDS[effectiveBackendKey]
if (!backend) {
throw new Error(`Invalid backend: '${ effectiveBackendKey }'`)
}
return IS_PRODUCTION ? backend.prod : backend.dev return IS_PRODUCTION ? backend.prod : backend.dev
} }
function updateBackendDisplay() { function updateBackendModelDisplay() {
const backend = BACKENDS[currentBackend] const { backendKey, model } = splitBackendModel(currentBackendModel)
const backend = BACKENDS[backendKey]
if (!backend) return
const displayText = IS_PRODUCTION const displayText = IS_PRODUCTION
? `${ backend.prod } ? ${ backend.name }` ? `${ backend.prod } - ${ backend.name }`
: backend.dev : backend.dev
document.getElementById('backendDisplay').textContent = displayText const displayElement = document.getElementById('backendDisplay')
if (displayElement) {
displayElement.textContent = `${ displayText } - Model: ${ model || 'None' }`
}
} }
async function fetchModels() { async function fetchBackendModels() {
const selector = document.getElementById('backendModelSelector')
let allModels = []
for (const [backendKey, backendConfig] of Object.entries(BACKENDS)) {
try { try {
const response = await fetch(`${ getApiUrl() }/models`) const apiUrl = IS_PRODUCTION ? backendConfig.prod : backendConfig.dev
console.log(`Fetching models from ${ backendKey }: ${ apiUrl }`)
const response = await fetch(`${ apiUrl }/models`, {
signal: AbortSignal.timeout(5000) // 5 second timeout
})
if (response.ok) { if (response.ok) {
const data = await response.json() const data = await response.json()
availableModels = data.data || [] if (data.data && Array.isArray(data.data)) {
populateModelSelector() const models = data.data.map(model => ({
backend: backendKey,
if (!currentModel && availableModels.length > 0) { model : model.id
currentModel = availableModels[0].id }))
document.getElementById('modelSelector').value = currentModel allModels = [...allModels, ...models]
} }
} else { } else {
console.error('Failed to fetch models:', response.statusText) console.error(`Failed to fetch models from ${ backendKey }: ${ response.status } ${ response.statusText }`)
document.getElementById('modelSelector').innerHTML = '<option value="">Error loading models</option>'
} }
} catch (error) { } catch (error) {
console.error('Error fetching models:', error) console.error(`Error fetching models from ${ backendKey }:`, error)
document.getElementById('modelSelector').innerHTML = '<option value="">Error loading models</option>'
} }
}
availableBackendModels = allModels
if (selector) {
if (availableBackendModels.length === 0) {
selector.innerHTML = '<option value="">No models available (check backends)</option>'
} else {
populateBackendModelSelector()
// Auto-select if no valid model is set
const hasModel = currentBackendModel && currentBackendModel.includes(':') && currentBackendModel.split(':')[1]
if (!hasModel && availableBackendModels.length > 0) {
currentBackendModel = `${ availableBackendModels[0].backend }:${ availableBackendModels[0].model }`
selector.value = currentBackendModel
}
}
}
updateBackendModelDisplay()
} }
function populateModelSelector() { function populateBackendModelSelector() {
const selector = document.getElementById('modelSelector') const selector = document.getElementById('backendModelSelector')
if (availableModels.length === 0) { if (!selector) return
if (availableBackendModels.length === 0) {
selector.innerHTML = '<option value="">No models available</option>' selector.innerHTML = '<option value="">No models available</option>'
return return
} }
selector.innerHTML = availableModels.map(model => selector.innerHTML = availableBackendModels.map(backendModel =>
`<option value="${ model.id }">${ model.id }</option>` `<option value="${ backendModel.backend }:${ backendModel.model }">${ BACKENDS[backendModel.backend].name } - ${ backendModel.model }</option>`
).join('') ).join('')
if (currentModel) { if (currentBackendModel && selector.querySelector(`option[value="${ currentBackendModel }"]`)) {
selector.value = currentModel selector.value = currentBackendModel
} else if (availableBackendModels.length > 0) {
// If current selection is invalid, reset to first available
currentBackendModel = `${ availableBackendModels[0].backend }:${ availableBackendModels[0].model }`
selector.value = currentBackendModel
} }
} }
@@ -118,22 +184,15 @@ function trimChatHistory() {
} }
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const backendSelector = document.getElementById('backendSelector') const backendModelSelector = document.getElementById('backendModelSelector')
const modelSelector = document.getElementById('modelSelector')
backendSelector.value = currentBackend if (backendModelSelector) {
updateBackendDisplay() backendModelSelector.addEventListener('change', (e) => {
fetchModels() currentBackendModel = e.target.value
updateBackendModelDisplay()
backendSelector.addEventListener('change', (e) => { fetchBackendModels()
currentBackend = e.target.value
updateBackendDisplay()
fetchModels()
})
modelSelector.addEventListener('change', (e) => {
currentModel = e.target.value
}) })
}
}) })
const chatLog = document.getElementById('chatLog') const chatLog = document.getElementById('chatLog')
@@ -155,12 +214,12 @@ marked.setOptions({
} }
}) })
function autoResize(textarea) { window.autoResize = function autoResize(textarea) {
textarea.style.height = 'auto' textarea.style.height = 'auto'
textarea.style.height = Math.min(textarea.scrollHeight, 300) + 'px' textarea.style.height = Math.min(textarea.scrollHeight, 300) + 'px'
} }
function addMessage(role, content, markdown = false, messageId = null) { function addMessage(role, content, markdown = false, messageId = null, saveToHistory = true) {
const messageDiv = document.createElement('div') const messageDiv = document.createElement('div')
messageDiv.className = `message message-${ role }` messageDiv.className = `message message-${ role }`
if (messageId) { if (messageId) {
@@ -172,7 +231,7 @@ function addMessage(role, content, markdown = false, messageId = null) {
const avatar = document.createElement('div') const avatar = document.createElement('div')
avatar.className = `avatar ${ role }-avatar` avatar.className = `avatar ${ role }-avatar`
avatar.textContent = role === 'user' ? '?' : '?' avatar.textContent = role === 'user' ? '👤' : '🤖'
const name = document.createElement('span') const name = document.createElement('span')
name.textContent = role === 'user' ? 'You' : 'Assistant' name.textContent = role === 'user' ? 'You' : 'Assistant'
@@ -198,17 +257,21 @@ function addMessage(role, content, markdown = false, messageId = null) {
contentDiv.innerHTML = processedContent 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 = '#e0e0e0'
} }
messageDiv.appendChild(headerDiv) messageDiv.appendChild(headerDiv)
messageDiv.appendChild(contentDiv) messageDiv.appendChild(contentDiv)
if (chatLog) {
chatLog.appendChild(messageDiv) chatLog.appendChild(messageDiv)
chatLog.scrollTop = chatLog.scrollHeight chatLog.scrollTop = chatLog.scrollHeight
}
if (saveToHistory) {
chatHistory.push({ role, content, markdown, messageId }) chatHistory.push({ role, content, markdown, messageId })
trimChatHistory() trimChatHistory()
localStorage.setItem('chatHistory', JSON.stringify(chatHistory)) localStorage.setItem('chatHistory', JSON.stringify(chatHistory))
}
return contentDiv return contentDiv
} }
@@ -259,7 +322,7 @@ window.toggleThinking = function(id) {
function updateMessageContent(contentDiv, newContent, markdown = false, role) { function updateMessageContent(contentDiv, newContent, markdown = false, role) {
const processedContent = parseThinkingTags(newContent) const processedContent = parseThinkingTags(newContent)
if (markdown && role === 'assistant' && markdownToggle.checked) { if (markdown && role === 'assistant' && markdownToggle && markdownToggle.checked) {
contentDiv.innerHTML = marked.parse(processedContent) contentDiv.innerHTML = marked.parse(processedContent)
if (window.hljs) { if (window.hljs) {
setTimeout(() => { setTimeout(() => {
@@ -269,7 +332,13 @@ function updateMessageContent(contentDiv, newContent, markdown = false, role) {
}, 0) }, 0)
} }
} else { } else {
contentDiv.textContent = newContent contentDiv.innerHTML = processedContent
contentDiv.style.whiteSpace = 'pre-wrap'
contentDiv.style.padding = '8px 0'
contentDiv.style.color = '#e0e0e0'
}
if (chatLog) {
chatLog.scrollTop = chatLog.scrollHeight
} }
} }
@@ -283,12 +352,12 @@ function showTypingIndicator() {
const avatar = document.createElement('div') const avatar = document.createElement('div')
avatar.className = 'avatar assistant-avatar' avatar.className = 'avatar assistant-avatar'
avatar.textContent = '?' avatar.textContent = '🤖'
const name = document.createElement('span') const name = document.createElement('span')
name.textContent = 'Assistant' name.textContent = 'Assistant'
headerDiv.appendChild(abatar) headerDiv.appendChild(avatar)
headerDiv.appendChild(name) headerDiv.appendChild(name)
const dotsDiv = document.createElement('div') const dotsDiv = document.createElement('div')
@@ -302,8 +371,10 @@ function showTypingIndicator() {
typingDiv.appendChild(headerDiv) typingDiv.appendChild(headerDiv)
typingDiv.appendChild(dotsDiv) typingDiv.appendChild(dotsDiv)
if (chatLog) {
chatLog.appendChild(typingDiv) chatLog.appendChild(typingDiv)
chatLog.scrollTop = chatLog.scrollHeight chatLog.scrollTop = chatLog.scrollHeight
}
return typingDiv return typingDiv
} }
@@ -328,7 +399,7 @@ async function handleStreamingResponse(userMessage) {
const avatar = document.createElement('div') const avatar = document.createElement('div')
avatar.className = 'avatar assistant-avatar' avatar.className = 'avatar assistant-avatar'
avatar.textContent = '?' avatar.textContent = '🤖'
const name = document.createElement('span') const name = document.createElement('span')
name.textContent = 'Assistant' name.textContent = 'Assistant'
@@ -341,23 +412,28 @@ async function handleStreamingResponse(userMessage) {
messageDiv.appendChild(headerDiv) messageDiv.appendChild(headerDiv)
messageDiv.appendChild(contentDiv) messageDiv.appendChild(contentDiv)
if (chatLog) {
chatLog.appendChild(messageDiv) chatLog.appendChild(messageDiv)
}
const cursorSpan = document.createElement('span') const cursorSpan = document.createElement('span')
cursorSpan.className = 'streaming-cursor' cursorSpan.className = 'streaming-cursor'
contentDiv.appendChild(cursorSpan) contentDiv.appendChild(cursorSpan)
// ✅ FIX: Create AbortController BEFORE fetch
currentStreamController = new AbortController()
isStreaming = true
try { try {
if (!currentModel && availableModels.length > 0) { const { backendKey, model } = splitBackendModel(currentBackendModel)
currentModel = availableModels[0].id const selectedModel = model || availableBackendModels[0]?.model || 'local-model'
document.getElementById('modelSelector').value = currentModel
}
const requestBody = { const requestBody = {
model : currentModel || 'local-model', model : selectedModel,
messages : getApiMessages(), messages : getApiMessages(),
stream : true, stream : true,
temperature: 0.7, temperature : 0.7,
repeat_penalty: 1.1,
max_tokens : 2000 max_tokens : 2000
} }
@@ -367,7 +443,8 @@ async function handleStreamingResponse(userMessage) {
'Content-Type' : 'application/json', 'Content-Type' : 'application/json',
'Authorization': `Bearer ${ API_KEY }` 'Authorization': `Bearer ${ API_KEY }`
}, },
body : JSON.stringify(requestBody) body : JSON.stringify(requestBody),
signal : currentStreamController.signal // ✅ Now works correctly
}) })
if (!response.ok) { if (!response.ok) {
@@ -377,9 +454,6 @@ async function handleStreamingResponse(userMessage) {
const reader = response.body.getReader() const reader = response.body.getReader()
const decoder = new TextDecoder() const decoder = new TextDecoder()
isStreaming = true
currentStreamController = new AbortController()
let updateScheduled = false let updateScheduled = false
let lastUpdate = Date.now() let lastUpdate = Date.now()
const MIN_UPDATE_INTERVAL = 100 const MIN_UPDATE_INTERVAL = 100
@@ -393,11 +467,13 @@ async function handleStreamingResponse(userMessage) {
if (timeSinceLastUpdate >= MIN_UPDATE_INTERVAL) { if (timeSinceLastUpdate >= MIN_UPDATE_INTERVAL) {
updateScheduled = true updateScheduled = true
requestAnimationFrame(() => { requestAnimationFrame(() => {
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant') updateMessageContent(contentDiv, accumulatedContent, markdownToggle && markdownToggle.checked, 'assistant')
if (cursorSpan.parentNode) { if (cursorSpan.parentNode) {
contentDiv.appendChild(cursorSpan) contentDiv.appendChild(cursorSpan)
} }
if (chatLog) {
chatLog.scrollTop = chatLog.scrollHeight chatLog.scrollTop = chatLog.scrollHeight
}
lastUpdate = Date.now() lastUpdate = Date.now()
updateScheduled = false updateScheduled = false
}) })
@@ -405,11 +481,13 @@ async function handleStreamingResponse(userMessage) {
updateScheduled = true updateScheduled = true
setTimeout(() => { setTimeout(() => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant') updateMessageContent(contentDiv, accumulatedContent, markdownToggle && markdownToggle.checked, 'assistant')
if (cursorSpan.parentNode) { if (cursorSpan.parentNode) {
contentDiv.appendChild(cursorSpan) contentDiv.appendChild(cursorSpan)
} }
if (chatLog) {
chatLog.scrollTop = chatLog.scrollHeight chatLog.scrollTop = chatLog.scrollHeight
}
lastUpdate = Date.now() lastUpdate = Date.now()
updateScheduled = false updateScheduled = false
}) })
@@ -465,26 +543,26 @@ async function handleStreamingResponse(userMessage) {
currentStreamController = null currentStreamController = null
sendBtn.disabled = false sendBtn.disabled = false
if (cursorSpan.parentNode) { if (cursorSpan && cursorSpan.parentNode) {
cursorSpan.parentNode.removeChild(cursorSpan) cursorSpan.parentNode.removeChild(cursorSpan)
} }
} }
} }
async function handleNonStreamingResponse(userMessage) { async function handleNonStreamingResponse(userMessage) {
let typingIndicator = null
try { try {
const typingIndicator = showTypingIndicator() typingIndicator = showTypingIndicator()
if (!currentModel && availableModels.length > 0) { const { backendKey, model } = splitBackendModel(currentBackendModel)
currentModel = availableModels[0].id const selectedModel = model || availableBackendModels[0]?.model || 'local-model'
document.getElementById('modelSelector').value = currentModel
}
const requestBody = { const requestBody = {
model : currentModel || 'local-model', model : selectedModel,
messages : getApiMessages(), messages : getApiMessages(),
stream : false, stream : false,
temperature: 0.7, temperature : 0.7,
repeat_penalty: 1.1,
max_tokens : 2000 max_tokens : 2000
} }
@@ -513,7 +591,9 @@ async function handleNonStreamingResponse(userMessage) {
} catch (error) { } catch (error) {
console.error('Error:', error) console.error('Error:', error)
if (typingIndicator) {
removeTypingIndicator(typingIndicator) removeTypingIndicator(typingIndicator)
}
addMessage('assistant', `Error: ${ error.message }`, false) addMessage('assistant', `Error: ${ error.message }`, false)
} finally { } finally {
sendBtn.disabled = false sendBtn.disabled = false
@@ -535,7 +615,13 @@ async function sendMessage() {
const userMessage = userInput.value.trim() const userMessage = userInput.value.trim()
if (!userMessage || isStreaming) return if (!userMessage || isStreaming) return
addMessage('user', userMessage) // ✅ FIX: Validate backend selection
if (!currentBackendModel) {
addMessage('assistant', 'Please select a backend model first.', false)
return
}
addMessage('user', userMessage, false)
userInput.value = '' userInput.value = ''
userInput.style.height = 'auto' userInput.style.height = 'auto'
@@ -568,18 +654,39 @@ userInput.addEventListener('keydown', (e) => {
} }
}) })
// ✅ Updated window.onload with better initialization
window.onload = () => { window.onload = () => {
userInput.focus() if (userInput) userInput.focus()
fetchModels()
if (chatHistory.length === 0) { // Set default backend BEFORE fetching
document.getElementById('resetBtn').addEventListener('click', resetChat) if (!currentBackendModel) {
currentBackendModel = 'plato'
} }
fetchBackendModels().then(() => {
// Load chat history after models are fetched
if (chatLog) {
if (chatHistory.length === 0) {
//addMessage('assistant', welcomeMessage, true, null, false);
} else {
chatHistory.forEach(msg => {
if (typeof msg.content === 'string' && msg.content.trim()) {
addMessage(msg.role, msg.content, msg.markdown, msg.messageId, false)
}
})
}
}
})
document.getElementById('resetBtn')?.addEventListener('click', resetChat)
} }
function resetChat() { function resetChat() {
chatHistory = [] chatHistory = []
chatLog.innerHTML = welcomeMessage
localStorage.setItem('chatHistory', JSON.stringify(chatHistory)) localStorage.setItem('chatHistory', JSON.stringify(chatHistory))
if (chatLog) {
chatLog.innerHTML = ''
addMessage('assistant', welcomeMessage, true, null, false)
}
} }

0
favicon.ico → www/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 174 KiB

After

Width:  |  Height:  |  Size: 174 KiB

0
favico.svg → www/icon.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

81
www/index.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
</head>
<body>
<div id="chatContainer">
<div id="header">
<div>Chat with Streaming</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 & Model:</span>
<select id="backendModelSelector" style="padding: 4px 8px; border-radius: 4px; border: 1px solid #444; background: #2a2a2a; color: #e0e0e0; min-width: 200px;">
<option value="">Loading backends and models...</option>
</select>
</div>
<code id="backendDisplay" style="font-size: 0.85em;"></code>
</div>
</div>
</div>
<div id="chatLog">
<div class="message message-assistant">
<div class="message-header assistant">
<div class="avatar assistant-avatar">?</div>
<span>Assistant</span></div>
<div class="markdown-content"><h1>Welcome to LM Studio Chat!</h1>
<p>I now support <strong>full conversation history</strong>, <strong>real-time streaming responses</strong> and <strong>dark, readable text formatting</strong>.</p>
<h2>Features:</h2>
<ol>
<li><strong>Full Chat History</strong> - Complete conversation context is now sent to the AI</li>
<li><strong>Smart History Management</strong> - Automatically keeps the last 50 messages</li>
<li><strong>Streaming Mode</strong> (enabled by default) - Watch responses appear word-by-word</li>
<li><strong>Markdown Rendering</strong> - Proper formatting for code, lists, tables, and more</li>
<li><strong>Readable Dark Text</strong> - No more eye strain from light gray text</li>
</ol>
<h2>Try it out:</h2>
<ul>
<li>Ask follow-up questions that reference earlier messages</li>
<li>Have a multi-turn conversation with full context</li>
<li>Ask "what did I just ask?" to test history retention</li>
<li>Watch the streaming response in real-time!</li>
</ul>
<blockquote>
<p><em>Tip: You can toggle streaming and markdown using the checkboxes below.</em></p>
</blockquote>
</div>
</div>
</div>
<div id="inputArea">
<textarea
id="userInput"
placeholder="Type your message here... (Shift+Enter for new line, Enter to send)"
rows="1"
oninput="autoResize(this)"
></textarea>
<div style="display: flex; justify-content: space-between; align-items: center;">
<div class="controls">
<div>
<label>
<input type="checkbox" id="streamToggle" checked> Streaming
</label>
<label style="margin-left: 15px;">
<input type="checkbox" id="markdownToggle" checked> Markdown
</label>
</div>
<div id="modelInfo">Model: <span id="modelName">unknown</span></div>
</div>
<button id="sendBtn">Send</button>
<button id="resetBtn">Reset Chat</button>
</div>
</div>
</div>
</body>
</html>

1
style.css → www/style2.css
View File

@@ -9,7 +9,6 @@ body {
#chatContainer { #chatContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 95vh;
background: white; background: white;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);