init
This commit is contained in:
mike
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
.idea
|
||||||
|
.env
|
||||||
10
.idea/.gitignore
generated
vendored
Normal file
10
.idea/.gitignore
generated
vendored
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Ignored default folder with query files
|
||||||
|
/queries/
|
||||||
|
# Datasource local storage ignored files
|
||||||
|
/dataSources/
|
||||||
|
/dataSources.local.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
||||||
62
404.html
Normal file
62
404.html
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Page Not Found</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
line-height: 1.2;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
color: #888;
|
||||||
|
display: table;
|
||||||
|
font-family: sans-serif;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 2em auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #555;
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 280px) {
|
||||||
|
|
||||||
|
body,
|
||||||
|
p {
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin: 0 0 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Page Not Found</h1>
|
||||||
|
<p>Sorry, but the page you were trying to view does not exist.</p>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
<!-- IE needs 512+ bytes: https://docs.microsoft.com/archive/blogs/ieinternals/friendly-http-error-pages -->
|
||||||
3
Dockerfile
Normal file
3
Dockerfile
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
FROM nginx:alpine
|
||||||
|
COPY index.html /usr/share/nginx/html/
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
25
docker-compose.yml
Normal file
25
docker-compose.yml
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
services:
|
||||||
|
jarvis-lan:
|
||||||
|
build:
|
||||||
|
context: ${JARVIS_ROOT_DIR:-/opt/apps/jarvis-lan}
|
||||||
|
dockerfile: Dockerfile
|
||||||
|
container_name: jarvis-lan
|
||||||
|
restart: unless-stopped
|
||||||
|
networks: [ traefik_net ]
|
||||||
|
volumes:
|
||||||
|
- /opt/apps/jarvis-lan:/usr/share/nginx/html:ro
|
||||||
|
labels:
|
||||||
|
- "traefik.enable=true"
|
||||||
|
- "traefik.http.routers.jarvis-lan.rule=Host(`jarvis-lan.appmodel.nl`)"
|
||||||
|
- "traefik.http.routers.jarvis-lan.entrypoints=websecure"
|
||||||
|
- "traefik.http.routers.jarvis-lan.tls=true"
|
||||||
|
- "traefik.http.routers.jarvis-lan.tls.certresolver=letsencrypt"
|
||||||
|
- "traefik.http.services.jarvis-lan.loadbalancer.server.port=80"
|
||||||
|
- "traefik.http.routers.jarvis-lan-http.rule=Host(`jarvis-lan.appmodel.nl`)"
|
||||||
|
- "traefik.http.routers.jarvis-lan-http.entrypoints=web"
|
||||||
|
- "traefik.http.routers.jarvis-lan-http.middlewares=redirect-to-https@file"
|
||||||
|
|
||||||
|
networks:
|
||||||
|
traefik_net:
|
||||||
|
external: true
|
||||||
|
name: traefik_net
|
||||||
785
index.html
Normal file
785
index.html
Normal file
@@ -0,0 +1,785 @@
|
|||||||
|
<!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>http://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
|
||||||
|
const API_BASE_URL = 'http://plato.lan: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>
|
||||||
27
nginx.conf
Normal file
27
nginx.conf
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name localhost;
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
# Enable clean URLs without .html extension
|
||||||
|
location / {
|
||||||
|
# Try the exact URI, then with .html, then as directory with index.html, then 404
|
||||||
|
try_files $uri $uri.html $uri/ =404;
|
||||||
|
}
|
||||||
|
|
||||||
|
# Don't redirect mobile.html to allow device-specific routing
|
||||||
|
# Skip the .html redirect for mobile.html and index.html
|
||||||
|
location = /mobile.html {
|
||||||
|
try_files /mobile.html =404;
|
||||||
|
}
|
||||||
|
|
||||||
|
location = /index.html {
|
||||||
|
try_files /index.html =404;
|
||||||
|
}
|
||||||
|
|
||||||
|
# Gzip compression for better performance
|
||||||
|
gzip on;
|
||||||
|
gzip_vary on;
|
||||||
|
gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user