Compare commits
45 Commits
30406ab0eb
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
9a649a9475 | ||
|
|
11f0f8fbee | ||
|
|
a93f8def81 | ||
|
|
2afa812eea | ||
|
|
a94af25367 | ||
|
|
c551925e86 | ||
|
|
843bf78727 | ||
|
|
5805f1e81c | ||
|
|
19acb7ef15 | ||
|
|
ca941dcc6f | ||
|
|
7e7439d5c2 | ||
|
|
2b6a0c866f | ||
|
|
7b9947da7e | ||
|
|
267e155ad1 | ||
|
|
d6fdb7372d | ||
|
|
8ab0ae4a4d | ||
|
|
2cd98bb5db | ||
|
|
a6c9534d09 | ||
|
|
839fb7e57a | ||
|
|
a054898b34 | ||
|
|
cea5d50fa6 | ||
|
|
c81958d000 | ||
|
|
2e3f811f25 | ||
|
|
5d6ccd0087 | ||
|
|
13a0209e05 | ||
|
|
4d5467753b | ||
|
|
db0811e8a7 | ||
|
|
3c7c4d4233 | ||
|
|
6c7d7f7abe | ||
|
|
e00d78f495 | ||
|
|
8e2c4a6609 | ||
|
|
e7e16a4af2 | ||
|
|
a8f2e2955b | ||
|
|
50b23119d5 | ||
|
|
5c2276ef1e | ||
|
|
cf810a3ba8 | ||
|
|
32abb9ffe7 | ||
|
|
b681147565 | ||
|
|
55eab2ef41 | ||
|
|
051b2911e7 | ||
|
|
531193eb0b | ||
|
|
6ac8598bee | ||
|
|
1687a19116 | ||
|
|
3f24902f3f | ||
|
|
f6fc261588 |
1
.aider.conf.yml
Normal file
1
.aider.conf.yml
Normal file
@@ -0,0 +1 @@
|
|||||||
|
model: /models/qwen2.5-coder-32b-instruct-q4_k_m.gguf
|
||||||
4
.aider.model.settings.yml
Normal file
4
.aider.model.settings.yml
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
- name: /models/qwen2.5-coder-32b-instruct-q4_k_m.gguf
|
||||||
|
extra_params:
|
||||||
|
num_ctx: 16384
|
||||||
|
num_threads: 8
|
||||||
5
.aiignore
Normal file
5
.aiignore
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
.idea/
|
||||||
|
.aider.tags.cache.v4
|
||||||
|
.aider.chat.history.md
|
||||||
|
.aider.input.history
|
||||||
|
.env
|
||||||
3
.gitignore
vendored
3
.gitignore
vendored
@@ -1,2 +1,5 @@
|
|||||||
.idea/
|
.idea/
|
||||||
.env
|
.env
|
||||||
|
.aider*
|
||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
14
Dockerfile
14
Dockerfile
@@ -1,3 +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 nginx.conf /etc/nginx/conf.d/default.conf
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
EXPOSE 80
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
|
|||||||
788
index.html
788
index.html
@@ -1,788 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>LM Studio Chat with Streaming</title>
|
|
||||||
<!-- Darker markdown styling -->
|
|
||||||
<style>
|
|
||||||
.markdown-content {
|
|
||||||
color: #24292f;
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content h1, .markdown-content h2, .markdown-content h3 {
|
|
||||||
color: #1a1a1a;
|
|
||||||
border-bottom: 1px solid #eaecef;
|
|
||||||
padding-bottom: 0.3em;
|
|
||||||
margin-top: 1.5em;
|
|
||||||
margin-bottom: 0.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content h1 {
|
|
||||||
font-size: 1.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content h2 {
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content h3 {
|
|
||||||
font-size: 1.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content p {
|
|
||||||
margin: 0.8em 0;
|
|
||||||
color: #2d3339;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content code {
|
|
||||||
background-color: #f6f8fa;
|
|
||||||
color: #d63384;
|
|
||||||
padding: 0.2em 0.4em;
|
|
||||||
border-radius: 3px;
|
|
||||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content pre {
|
|
||||||
background-color: #0d1117;
|
|
||||||
color: #c9d1d9;
|
|
||||||
padding: 1em;
|
|
||||||
border-radius: 6px;
|
|
||||||
overflow-x: auto;
|
|
||||||
margin: 1em 0;
|
|
||||||
border: 1px solid #30363d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content pre code {
|
|
||||||
background-color: transparent;
|
|
||||||
color: inherit;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content ul, .markdown-content ol {
|
|
||||||
padding-left: 1.8em;
|
|
||||||
margin: 0.8em 0;
|
|
||||||
color: #2d3339;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content li {
|
|
||||||
margin: 0.3em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content blockquote {
|
|
||||||
border-left: 3px solid #d0d7de;
|
|
||||||
padding-left: 1em;
|
|
||||||
margin: 1em 0;
|
|
||||||
color: #57606a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin: 1em 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content th, .markdown-content td {
|
|
||||||
border: 1px solid #d0d7de;
|
|
||||||
padding: 0.5em 1em;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content th {
|
|
||||||
background-color: #f6f8fa;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content tr:nth-child(even) {
|
|
||||||
background-color: #f6f8fa;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<!-- Markdown parser -->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
||||||
<!-- Optional: Highlight.js for better code syntax -->
|
|
||||||
<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>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 20px;
|
|
||||||
background: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
#chatContainer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 95vh;
|
|
||||||
background: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header {
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
color: white;
|
|
||||||
padding: 15px 20px;
|
|
||||||
font-size: 1.2em;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#chatLog {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 20px;
|
|
||||||
background: #fafafa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message {
|
|
||||||
margin-bottom: 25px;
|
|
||||||
animation: fadeIn 0.3s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-user {
|
|
||||||
background: #e3f2fd;
|
|
||||||
border-left: 4px solid #2196f3;
|
|
||||||
padding: 12px 15px;
|
|
||||||
border-radius: 0 8px 8px 0;
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-assistant {
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 15px;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 40px;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-header.user {
|
|
||||||
color: #1976d2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-header.assistant {
|
|
||||||
color: #388e3c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-right: 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar {
|
|
||||||
background: #2196f3;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.assistant-avatar {
|
|
||||||
background: #4caf50;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#inputArea {
|
|
||||||
border-top: 1px solid #e0e0e0;
|
|
||||||
padding: 15px;
|
|
||||||
background: white;
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
#userInput {
|
|
||||||
flex: 1;
|
|
||||||
padding: 12px 15px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
resize: none;
|
|
||||||
min-height: 44px;
|
|
||||||
max-height: 120px;
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
#userInput:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #667eea;
|
|
||||||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
#sendBtn {
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 12px 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.2s, opacity 0.2s;
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sendBtn:hover:not(:disabled) {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
opacity: 0.95;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sendBtn:disabled {
|
|
||||||
background: #ccc;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.typing-indicator {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
padding: 10px 15px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.typing-dot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
background: #4caf50;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: typing 1.4s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.typing-dot:nth-child(2) {
|
|
||||||
animation-delay: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.typing-dot:nth-child(3) {
|
|
||||||
animation-delay: 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(10px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes typing {
|
|
||||||
0%, 60%, 100% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
30% {
|
|
||||||
transform: translateY(-6px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.streaming-cursor {
|
|
||||||
display: inline-block;
|
|
||||||
width: 8px;
|
|
||||||
height: 20px;
|
|
||||||
background-color: #4caf50;
|
|
||||||
margin-left: 2px;
|
|
||||||
animation: blink 1s infinite;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes blink {
|
|
||||||
0%, 50% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
51%, 100% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-btn {
|
|
||||||
padding: 6px 12px;
|
|
||||||
background: #f5f5f5;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-btn:hover {
|
|
||||||
background: #e9e9e9;
|
|
||||||
}
|
|
||||||
|
|
||||||
#modelInfo {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #666;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<div id="chatLog"></div>
|
|
||||||
|
|
||||||
<div id="inputArea">
|
|
||||||
<div style="flex: 1;">
|
|
||||||
<textarea
|
|
||||||
id="userInput"
|
|
||||||
placeholder="Type your message here... (Shift+Enter for new line, Enter to send)"
|
|
||||||
rows="1"
|
|
||||||
oninput="autoResize(this)"
|
|
||||||
></textarea>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<button id="sendBtn">Send</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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 API_KEY = 'not-needed'
|
|
||||||
|
|
||||||
// Global state
|
|
||||||
let currentStreamController = null
|
|
||||||
let isStreaming = false
|
|
||||||
|
|
||||||
// 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, 120) + '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)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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'
|
|
||||||
contentDiv.innerHTML = marked.parse(content)
|
|
||||||
// Apply syntax highlighting if hljs is available
|
|
||||||
if (window.hljs) {
|
|
||||||
setTimeout(() => {
|
|
||||||
contentDiv.querySelectorAll('pre code').forEach((block) => {
|
|
||||||
hljs.highlightElement(block)
|
|
||||||
})
|
|
||||||
}, 0)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
contentDiv.textContent = content
|
|
||||||
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
|
|
||||||
|
|
||||||
return contentDiv
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update message content (for streaming)
|
|
||||||
function updateMessageContent(contentDiv, newContent, markdown = false) {
|
|
||||||
if (markdown && markdownToggle.checked) {
|
|
||||||
contentDiv.innerHTML = marked.parse(newContent)
|
|
||||||
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 {
|
|
||||||
const requestBody = {
|
|
||||||
model : 'local-model',
|
|
||||||
messages : [{ role: 'user', content: userMessage }],
|
|
||||||
stream : true,
|
|
||||||
temperature: 0.7,
|
|
||||||
max_tokens : 2000
|
|
||||||
}
|
|
||||||
|
|
||||||
const response = await fetch(`${ API_BASE_URL }/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()
|
|
||||||
|
|
||||||
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
|
|
||||||
// Remove cursor when done
|
|
||||||
if (cursorSpan.parentNode) {
|
|
||||||
cursorSpan.parentNode.removeChild(cursorSpan)
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} 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 {
|
|
||||||
const requestBody = {
|
|
||||||
model : 'local-model',
|
|
||||||
messages : [{ role: 'user', content: userMessage }],
|
|
||||||
stream : false,
|
|
||||||
temperature: 0.7,
|
|
||||||
max_tokens : 2000
|
|
||||||
}
|
|
||||||
|
|
||||||
const response = await fetch(`${ API_BASE_URL }/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()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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()
|
|
||||||
|
|
||||||
// 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>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
72
nginx.conf
72
nginx.conf
@@ -1,9 +1,35 @@
|
|||||||
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
|
||||||
|
location = /favicon.ico {
|
||||||
|
try_files /favicon.ico =204;
|
||||||
|
access_log off;
|
||||||
|
log_not_found off;
|
||||||
|
}
|
||||||
|
|
||||||
|
# Serve shared JS and CSS directories at root
|
||||||
|
location /js/ {
|
||||||
|
try_files $uri =404;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /css/ {
|
||||||
|
try_files $uri =404;
|
||||||
|
}
|
||||||
|
# Custom 404 page
|
||||||
|
error_page 404 /404.html;
|
||||||
|
location = /404.html {
|
||||||
|
internal;
|
||||||
|
}
|
||||||
|
|
||||||
# Enable clean URLs without .html extension
|
# Enable clean URLs without .html extension
|
||||||
location / {
|
location / {
|
||||||
# Try the exact URI, then with .html, then as directory with index.html, then 404
|
# Try the exact URI, then with .html, then as directory with index.html, then 404
|
||||||
@@ -14,17 +40,57 @@ server {
|
|||||||
try_files /index.html =404;
|
try_files /index.html =404;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Proxy API requests to plato.lan (192.168.1.74)
|
# Proxy API requests to plato.lan (192.168.1.74)
|
||||||
location /api/ {
|
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;
|
||||||
proxy_set_header X-Forwarded-Proto $scheme;
|
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:8081/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 ollama (192.168.1.159:8081)
|
||||||
|
location /api/ollama/ {
|
||||||
|
proxy_pass http://192.168.1.159:8081/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:8080/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;
|
||||||
|
}
|
||||||
|
# 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
5141
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
package.json
Normal file
32
package.json
Normal 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
5
robots.txt
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
# www.robotstxt.org/
|
||||||
|
|
||||||
|
# Allow crawling of all content
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
12
site.webmanifest
Normal file
12
site.webmanifest
Normal 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
91
webpack.config.js
Normal 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') }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
692
www/chatv3.js
Normal file
692
www/chatv3.js
Normal file
@@ -0,0 +1,692 @@
|
|||||||
|
import './style2.css'
|
||||||
|
|
||||||
|
const BACKENDS = {
|
||||||
|
plato : {
|
||||||
|
prod: '/api/plato',
|
||||||
|
dev : 'http://192.168.1.74:8080/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'
|
||||||
|
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!
|
||||||
|
|
||||||
|
I now support **full conversation history**, **real-time streaming responses** and **dark, readable text formatting**.
|
||||||
|
|
||||||
|
## Features:
|
||||||
|
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 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.*`
|
||||||
|
|
||||||
|
// ✅ NEW: Robust parser for backend:model format
|
||||||
|
function splitBackendModel(value) {
|
||||||
|
if (!value || value === ':') {
|
||||||
|
return { backendKey: '', model: '' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const colonIndex = value.indexOf(':')
|
||||||
|
if (colonIndex === -1) {
|
||||||
|
return { backendKey: value, model: '' }
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
backendKey: value.substring(0, colonIndex),
|
||||||
|
model : value.substring(colonIndex + 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getApiUrl() {
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateBackendModelDisplay() {
|
||||||
|
const { backendKey, model } = splitBackendModel(currentBackendModel)
|
||||||
|
const backend = BACKENDS[backendKey]
|
||||||
|
if (!backend) return
|
||||||
|
|
||||||
|
const displayText = IS_PRODUCTION
|
||||||
|
? `${ backend.prod } - ${ backend.name }`
|
||||||
|
: backend.dev
|
||||||
|
const displayElement = document.getElementById('backendDisplay')
|
||||||
|
if (displayElement) {
|
||||||
|
displayElement.textContent = `${ displayText } - Model: ${ model || 'None' }`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchBackendModels() {
|
||||||
|
const selector = document.getElementById('backendModelSelector')
|
||||||
|
let allModels = []
|
||||||
|
|
||||||
|
for (const [backendKey, backendConfig] of Object.entries(BACKENDS)) {
|
||||||
|
try {
|
||||||
|
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) {
|
||||||
|
const data = await response.json()
|
||||||
|
if (data.data && Array.isArray(data.data)) {
|
||||||
|
const models = data.data.map(model => ({
|
||||||
|
backend: backendKey,
|
||||||
|
model : model.id
|
||||||
|
}))
|
||||||
|
allModels = [...allModels, ...models]
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.error(`Failed to fetch models from ${ backendKey }: ${ response.status } ${ response.statusText }`)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error fetching models from ${ backendKey }:`, error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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 populateBackendModelSelector() {
|
||||||
|
const selector = document.getElementById('backendModelSelector')
|
||||||
|
if (!selector) return
|
||||||
|
|
||||||
|
if (availableBackendModels.length === 0) {
|
||||||
|
selector.innerHTML = '<option value="">No models available</option>'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
selector.innerHTML = availableBackendModels.map(backendModel =>
|
||||||
|
`<option value="${ backendModel.backend }:${ backendModel.model }">${ BACKENDS[backendModel.backend].name } - ${ backendModel.model }</option>`
|
||||||
|
).join('')
|
||||||
|
|
||||||
|
if (currentBackendModel && selector.querySelector(`option[value="${ currentBackendModel }"]`)) {
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getApiMessages() {
|
||||||
|
return chatHistory.slice(-MAX_CHAT_HISTORY).map(({ role, content }) => ({
|
||||||
|
role,
|
||||||
|
content
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
function trimChatHistory() {
|
||||||
|
if (chatHistory.length > MAX_CHAT_HISTORY) {
|
||||||
|
chatHistory = chatHistory.slice(-MAX_CHAT_HISTORY)
|
||||||
|
localStorage.setItem('chatHistory', JSON.stringify(chatHistory))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const backendModelSelector = document.getElementById('backendModelSelector')
|
||||||
|
|
||||||
|
if (backendModelSelector) {
|
||||||
|
backendModelSelector.addEventListener('change', (e) => {
|
||||||
|
currentBackendModel = e.target.value
|
||||||
|
updateBackendModelDisplay()
|
||||||
|
fetchBackendModels()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
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')
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
window.autoResize = function autoResize(textarea) {
|
||||||
|
textarea.style.height = 'auto'
|
||||||
|
textarea.style.height = Math.min(textarea.scrollHeight, 300) + 'px'
|
||||||
|
}
|
||||||
|
|
||||||
|
function addMessage(role, content, markdown = false, messageId = null, saveToHistory = true) {
|
||||||
|
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'
|
||||||
|
const processedContent = parseThinkingTags(content)
|
||||||
|
contentDiv.innerHTML = marked.parse(processedContent)
|
||||||
|
if (window.hljs) {
|
||||||
|
setTimeout(() => {
|
||||||
|
contentDiv.querySelectorAll('pre code').forEach((block) => {
|
||||||
|
hljs.highlightElement(block)
|
||||||
|
})
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const processedContent = parseThinkingTags(content)
|
||||||
|
contentDiv.innerHTML = processedContent
|
||||||
|
contentDiv.style.whiteSpace = 'pre-wrap'
|
||||||
|
contentDiv.style.padding = '8px 0'
|
||||||
|
contentDiv.style.color = '#e0e0e0'
|
||||||
|
}
|
||||||
|
|
||||||
|
messageDiv.appendChild(headerDiv)
|
||||||
|
messageDiv.appendChild(contentDiv)
|
||||||
|
if (chatLog) {
|
||||||
|
chatLog.appendChild(messageDiv)
|
||||||
|
chatLog.scrollTop = chatLog.scrollHeight
|
||||||
|
}
|
||||||
|
|
||||||
|
if (saveToHistory) {
|
||||||
|
chatHistory.push({ role, content, markdown, messageId })
|
||||||
|
trimChatHistory()
|
||||||
|
localStorage.setItem('chatHistory', JSON.stringify(chatHistory))
|
||||||
|
}
|
||||||
|
|
||||||
|
return contentDiv
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseThinkingTags(content) {
|
||||||
|
let result = content
|
||||||
|
let thinkingCounter = 0
|
||||||
|
|
||||||
|
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>`
|
||||||
|
})
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateMessageContent(contentDiv, newContent, markdown = false, role) {
|
||||||
|
const processedContent = parseThinkingTags(newContent)
|
||||||
|
|
||||||
|
if (markdown && role === 'assistant' && markdownToggle && markdownToggle.checked) {
|
||||||
|
contentDiv.innerHTML = marked.parse(processedContent)
|
||||||
|
if (window.hljs) {
|
||||||
|
setTimeout(() => {
|
||||||
|
contentDiv.querySelectorAll('pre code').forEach((block) => {
|
||||||
|
hljs.highlightElement(block)
|
||||||
|
})
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
contentDiv.innerHTML = processedContent
|
||||||
|
contentDiv.style.whiteSpace = 'pre-wrap'
|
||||||
|
contentDiv.style.padding = '8px 0'
|
||||||
|
contentDiv.style.color = '#e0e0e0'
|
||||||
|
}
|
||||||
|
if (chatLog) {
|
||||||
|
chatLog.scrollTop = chatLog.scrollHeight
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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)
|
||||||
|
if (chatLog) {
|
||||||
|
chatLog.appendChild(typingDiv)
|
||||||
|
chatLog.scrollTop = chatLog.scrollHeight
|
||||||
|
}
|
||||||
|
|
||||||
|
return typingDiv
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeTypingIndicator(typingDiv) {
|
||||||
|
if (typingDiv && typingDiv.parentNode) {
|
||||||
|
typingDiv.parentNode.removeChild(typingDiv)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleStreamingResponse(userMessage) {
|
||||||
|
const messageId = 'msg-' + Date.now()
|
||||||
|
let accumulatedContent = ''
|
||||||
|
let contentDiv = null
|
||||||
|
|
||||||
|
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)
|
||||||
|
if (chatLog) {
|
||||||
|
chatLog.appendChild(messageDiv)
|
||||||
|
}
|
||||||
|
|
||||||
|
const cursorSpan = document.createElement('span')
|
||||||
|
cursorSpan.className = 'streaming-cursor'
|
||||||
|
contentDiv.appendChild(cursorSpan)
|
||||||
|
|
||||||
|
// ✅ FIX: Create AbortController BEFORE fetch
|
||||||
|
currentStreamController = new AbortController()
|
||||||
|
isStreaming = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { backendKey, model } = splitBackendModel(currentBackendModel)
|
||||||
|
const selectedModel = model || availableBackendModels[0]?.model || 'local-model'
|
||||||
|
|
||||||
|
const requestBody = {
|
||||||
|
model : selectedModel,
|
||||||
|
messages : getApiMessages(),
|
||||||
|
stream : true,
|
||||||
|
temperature : 0.7,
|
||||||
|
repeat_penalty: 1.1,
|
||||||
|
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),
|
||||||
|
signal : currentStreamController.signal // ✅ Now works correctly
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`API Error: ${ response.status } ${ response.statusText }`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const reader = response.body.getReader()
|
||||||
|
const decoder = new TextDecoder()
|
||||||
|
|
||||||
|
let updateScheduled = false
|
||||||
|
let lastUpdate = Date.now()
|
||||||
|
const MIN_UPDATE_INTERVAL = 100
|
||||||
|
|
||||||
|
function scheduleUpdate() {
|
||||||
|
if (updateScheduled) return
|
||||||
|
|
||||||
|
const now = Date.now()
|
||||||
|
const timeSinceLastUpdate = now - lastUpdate
|
||||||
|
|
||||||
|
if (timeSinceLastUpdate >= MIN_UPDATE_INTERVAL) {
|
||||||
|
updateScheduled = true
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
updateMessageContent(contentDiv, accumulatedContent, markdownToggle && markdownToggle.checked, 'assistant')
|
||||||
|
if (cursorSpan.parentNode) {
|
||||||
|
contentDiv.appendChild(cursorSpan)
|
||||||
|
}
|
||||||
|
if (chatLog) {
|
||||||
|
chatLog.scrollTop = chatLog.scrollHeight
|
||||||
|
}
|
||||||
|
lastUpdate = Date.now()
|
||||||
|
updateScheduled = false
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
updateScheduled = true
|
||||||
|
setTimeout(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
updateMessageContent(contentDiv, accumulatedContent, markdownToggle && markdownToggle.checked, 'assistant')
|
||||||
|
if (cursorSpan.parentNode) {
|
||||||
|
contentDiv.appendChild(cursorSpan)
|
||||||
|
}
|
||||||
|
if (chatLog) {
|
||||||
|
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
|
||||||
|
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant')
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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, 'assistant')
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
isStreaming = false
|
||||||
|
currentStreamController = null
|
||||||
|
sendBtn.disabled = false
|
||||||
|
|
||||||
|
if (cursorSpan && cursorSpan.parentNode) {
|
||||||
|
cursorSpan.parentNode.removeChild(cursorSpan)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleNonStreamingResponse(userMessage) {
|
||||||
|
let typingIndicator = null
|
||||||
|
try {
|
||||||
|
typingIndicator = showTypingIndicator()
|
||||||
|
|
||||||
|
const { backendKey, model } = splitBackendModel(currentBackendModel)
|
||||||
|
const selectedModel = model || availableBackendModels[0]?.model || 'local-model'
|
||||||
|
|
||||||
|
const requestBody = {
|
||||||
|
model : selectedModel,
|
||||||
|
messages : getApiMessages(),
|
||||||
|
stream : false,
|
||||||
|
temperature : 0.7,
|
||||||
|
repeat_penalty: 1.1,
|
||||||
|
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)
|
||||||
|
if (typingIndicator) {
|
||||||
|
removeTypingIndicator(typingIndicator)
|
||||||
|
}
|
||||||
|
addMessage('assistant', `Error: ${ error.message }`, false)
|
||||||
|
} finally {
|
||||||
|
sendBtn.disabled = false
|
||||||
|
userInput.focus()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopStream() {
|
||||||
|
if (currentStreamController) {
|
||||||
|
currentStreamController.abort()
|
||||||
|
isStreaming = false
|
||||||
|
currentStreamController = null
|
||||||
|
sendBtn.disabled = false
|
||||||
|
sendBtn.textContent = 'Send'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function sendMessage() {
|
||||||
|
const userMessage = userInput.value.trim()
|
||||||
|
if (!userMessage || isStreaming) return
|
||||||
|
|
||||||
|
// ✅ FIX: Validate backend selection
|
||||||
|
if (!currentBackendModel) {
|
||||||
|
addMessage('assistant', 'Please select a backend model first.', false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
addMessage('user', userMessage, false)
|
||||||
|
|
||||||
|
userInput.value = ''
|
||||||
|
userInput.style.height = 'auto'
|
||||||
|
sendBtn.disabled = true
|
||||||
|
|
||||||
|
if (streamToggle.checked) {
|
||||||
|
sendBtn.textContent = 'Stop'
|
||||||
|
await handleStreamingResponse(userMessage)
|
||||||
|
} else {
|
||||||
|
await handleNonStreamingResponse(userMessage)
|
||||||
|
}
|
||||||
|
|
||||||
|
sendBtn.textContent = 'Send'
|
||||||
|
}
|
||||||
|
|
||||||
|
sendBtn.addEventListener('click', () => {
|
||||||
|
if (isStreaming) {
|
||||||
|
stopStream()
|
||||||
|
} else {
|
||||||
|
sendMessage()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
userInput.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Enter' && !e.shiftKey) {
|
||||||
|
e.preventDefault()
|
||||||
|
if (!isStreaming) {
|
||||||
|
sendMessage()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// ✅ Updated window.onload with better initialization
|
||||||
|
window.onload = () => {
|
||||||
|
if (userInput) userInput.focus()
|
||||||
|
|
||||||
|
// Set default backend BEFORE fetching
|
||||||
|
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() {
|
||||||
|
chatHistory = []
|
||||||
|
localStorage.setItem('chatHistory', JSON.stringify(chatHistory))
|
||||||
|
|
||||||
|
if (chatLog) {
|
||||||
|
chatLog.innerHTML = ''
|
||||||
|
addMessage('assistant', welcomeMessage, true, null, false)
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
www/favicon.ico
Normal file
BIN
www/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
42
www/icon.svg
Normal file
42
www/icon.svg
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="200" height="200"
|
||||||
|
viewBox="0 0 200 200">
|
||||||
|
|
||||||
|
<!-- Background circle -->
|
||||||
|
<circle cx="100" cy="100" r="90" fill="#00A2E8"/>
|
||||||
|
|
||||||
|
<!-- Light‑blue gradient for the inner halo -->
|
||||||
|
<defs>
|
||||||
|
<radialGradient id="halo" cx="50%" cy="30%" r="80%">
|
||||||
|
<stop offset="0%" stop-color="#6BC3FF"/>
|
||||||
|
<stop offset="100%" stop-color="#00A2E8"/>
|
||||||
|
</radialGradient>
|
||||||
|
|
||||||
|
<!-- Stroke for the “m” -->
|
||||||
|
<linearGradient id="mGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#FFFFFF"/>
|
||||||
|
<stop offset="100%" stop-color="#E5F3FF"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- The “m” – a stylised double‑stroke shape -->
|
||||||
|
<path d="
|
||||||
|
M 65,110
|
||||||
|
L 70,80
|
||||||
|
C 75,60 85,50 95,55
|
||||||
|
C 105,60 115,40 125,45
|
||||||
|
L 130,70
|
||||||
|
L 135,90
|
||||||
|
"
|
||||||
|
fill="none" stroke="#FFFFFF" stroke-width="12" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- The “IRC” text -->
|
||||||
|
<text x="140" y="135"
|
||||||
|
font-family="'Segoe UI', Arial, Helvetica, sans"
|
||||||
|
font-weight="700"
|
||||||
|
font-size="70"
|
||||||
|
fill="url(#halo)">
|
||||||
|
mIRC
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
81
www/index.html
Normal file
81
www/index.html
Normal 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>
|
||||||
375
www/style2.css
Normal file
375
www/style2.css
Normal file
@@ -0,0 +1,375 @@
|
|||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 15px 20px;
|
||||||
|
font-size: 1.2em;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatLog {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
animation: fadeIn 0.3s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-user {
|
||||||
|
background: #e3f2fd;
|
||||||
|
border-left: 4px solid #2196f3;
|
||||||
|
padding: 12px 15px;
|
||||||
|
border-radius: 0 8px 8px 0;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-assistant {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 40px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-header.user {
|
||||||
|
color: #1976d2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-header.assistant {
|
||||||
|
color: #388e3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
background: #2196f3;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.assistant-avatar {
|
||||||
|
background: #4caf50;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#inputArea {
|
||||||
|
border-top: 1px solid #e0e0e0;
|
||||||
|
padding: 15px;
|
||||||
|
background: white;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#userInput {
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px 18px;
|
||||||
|
border: 2px solid #ddd;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
resize: none;
|
||||||
|
min-height: 100px;
|
||||||
|
max-height: 300px;
|
||||||
|
font-family: inherit;
|
||||||
|
line-height: 1.6;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#userInput:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #667eea;
|
||||||
|
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#sendBtn {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s, opacity 0.2s;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sendBtn:hover:not(:disabled) {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
opacity: 0.95;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sendBtn:disabled {
|
||||||
|
background: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-indicator {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: #4caf50;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: typing 1.4s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-dot:nth-child(2) {
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-dot:nth-child(3) {
|
||||||
|
animation-delay: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes typing {
|
||||||
|
0%, 60%, 100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
transform: translateY(-6px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.streaming-cursor {
|
||||||
|
display: inline-block;
|
||||||
|
width: 8px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #4caf50;
|
||||||
|
margin-left: 2px;
|
||||||
|
animation: blink 1s infinite;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink {
|
||||||
|
0%, 50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
51%, 100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.thinking-block {
|
||||||
|
margin: 10px 0;
|
||||||
|
border-left: 3px solid #ff9800;
|
||||||
|
background: #fff3e0;
|
||||||
|
border-radius: 6px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thinking-header {
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: #ffe0b2;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #e65100;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thinking-header:hover {
|
||||||
|
background: #ffcc80;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thinking-toggle {
|
||||||
|
transition: transform 0.2s;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thinking-toggle.collapsed {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.thinking-content {
|
||||||
|
padding: 12px;
|
||||||
|
color: #5d4037;
|
||||||
|
font-size: 0.9em;
|
||||||
|
line-height: 1.5;
|
||||||
|
border-top: 1px solid #ffcc80;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thinking-content.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn {
|
||||||
|
padding: 6px 12px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn:hover {
|
||||||
|
background: #e9e9e9;
|
||||||
|
}
|
||||||
|
|
||||||
|
#modelInfo {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content {
|
||||||
|
color: #24292f;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content h1, .markdown-content h2, .markdown-content h3 {
|
||||||
|
color: #1a1a1a;
|
||||||
|
border-bottom: 1px solid #eaecef;
|
||||||
|
padding-bottom: 0.3em;
|
||||||
|
margin-top: 1.5em;
|
||||||
|
margin-bottom: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content h1 {
|
||||||
|
font-size: 1.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content h2 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content h3 {
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content p {
|
||||||
|
margin: 0.8em 0;
|
||||||
|
color: #2d3339;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content code {
|
||||||
|
background-color: #f6f8fa;
|
||||||
|
color: #d63384;
|
||||||
|
padding: 0.2em 0.4em;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||||
|
font-size: 0.9em;
|
||||||
|
user-select: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content pre {
|
||||||
|
background-color: #0d1117;
|
||||||
|
color: #c9d1d9;
|
||||||
|
padding: 1em;
|
||||||
|
border-radius: 6px;
|
||||||
|
overflow-x: auto;
|
||||||
|
margin: 1em 0;
|
||||||
|
border: 1px solid #30363d;
|
||||||
|
user-select: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content pre code {
|
||||||
|
background-color: transparent;
|
||||||
|
color: inherit;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content ul, .markdown-content ol {
|
||||||
|
padding-left: 1.8em;
|
||||||
|
margin: 0.8em 0;
|
||||||
|
color: #2d3339;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content li {
|
||||||
|
margin: 0.3em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content blockquote {
|
||||||
|
border-left: 3px solid #d0d7de;
|
||||||
|
padding-left: 1em;
|
||||||
|
margin: 1em 0;
|
||||||
|
color: #57606a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin: 1em 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content th, .markdown-content td {
|
||||||
|
border: 1px solid #d0d7de;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content th {
|
||||||
|
background-color: #f6f8fa;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-content tr:nth-child(even) {
|
||||||
|
background-color: #f6f8fa;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user