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

jarvis

Browse Source
This commit is contained in:
mike
2025-12-17 15:46:59 +01:00
parent f6fc261588
commit 3f24902f3f
1 changed files with 124 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LM Studio Chat with Streaming</title> <title>Chat</title>
<!-- Darker markdown styling --> <!-- Darker markdown styling -->
<style> <style>
.markdown-content { .markdown-content {
@@ -206,21 +206,22 @@
padding: 15px; padding: 15px;
background: white; background: white;
display: flex; display: flex;
flex-direction: column;
gap: 10px; gap: 10px;
align-items: flex-end;
} }
#userInput { #userInput {
flex: 1; width: 100%;
padding: 12px 15px; padding: 16px 18px;
border: 1px solid #ddd; border: 2px solid #ddd;
border-radius: 8px; border-radius: 10px;
font-size: 15px; font-size: 16px;
resize: none; resize: none;
min-height: 60px; min-height: 100px;
max-height: 200px; max-height: 300px;
font-family: inherit; font-family: inherit;
line-height: 1.5; line-height: 1.6;
box-sizing: border-box;
} }
#userInput:focus { #userInput:focus {
@@ -314,6 +315,52 @@
} }
} }
.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 { .controls {
display: flex; display: flex;
gap: 10px; gap: 10px;
@@ -344,7 +391,7 @@
<body> <body>
<div id="chatContainer"> <div id="chatContainer">
<div id="header"> <div id="header">
<div>🤖 LM Studio Chat with Streaming</div> <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="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;"> <div style="display: flex; align-items: center; gap: 8px;">
<span>Backend:</span> <span>Backend:</span>
@@ -366,13 +413,13 @@
<div id="chatLog"></div> <div id="chatLog"></div>
<div id="inputArea"> <div id="inputArea">
<div style="flex: 1;"> <textarea
<textarea id="userInput"
id="userInput" placeholder="Type your message here... (Shift+Enter for new line, Enter to send)"
placeholder="Type your message here... (Shift+Enter for new line, Enter to send)" rows="1"
rows="1" oninput="autoResize(this)"
oninput="autoResize(this)" ></textarea>
></textarea> <div style="display: flex; justify-content: space-between; align-items: center;">
<div class="controls"> <div class="controls">
<div> <div>
<label> <label>
@@ -384,8 +431,8 @@
</div> </div>
<div id="modelInfo">Model: <span id="modelName">unknown</span></div> <div id="modelInfo">Model: <span id="modelName">unknown</span></div>
</div> </div>
<button id="sendBtn">Send</button>
</div> </div>
<button id="sendBtn">Send</button>
</div> </div>
</div> </div>
@@ -516,7 +563,7 @@ marked.setOptions({
// Auto-resize textarea // Auto-resize textarea
function autoResize(textarea) { function autoResize(textarea) {
textarea.style.height = 'auto' textarea.style.height = 'auto'
textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px' textarea.style.height = Math.min(textarea.scrollHeight, 300) + 'px'
} }
// Old fetchModels function removed - now handled in DOMContentLoaded // Old fetchModels function removed - now handled in DOMContentLoaded
@@ -546,7 +593,9 @@ function addMessage(role, content, markdown = false, messageId = null) {
if (markdown && role === 'assistant' && markdownToggle.checked) { if (markdown && role === 'assistant' && markdownToggle.checked) {
contentDiv.className = 'markdown-content' contentDiv.className = 'markdown-content'
contentDiv.innerHTML = marked.parse(content) // Parse thinking tags before markdown
const processedContent = parseThinkingTags(content)
contentDiv.innerHTML = marked.parse(processedContent)
// Apply syntax highlighting if hljs is available // Apply syntax highlighting if hljs is available
if (window.hljs) { if (window.hljs) {
setTimeout(() => { setTimeout(() => {
@@ -556,7 +605,9 @@ function addMessage(role, content, markdown = false, messageId = null) {
}, 0) }, 0)
} }
} else { } else {
contentDiv.textContent = content // Parse thinking tags for non-markdown too
const processedContent = parseThinkingTags(content)
contentDiv.innerHTML = processedContent
contentDiv.style.whiteSpace = 'pre-wrap' contentDiv.style.whiteSpace = 'pre-wrap'
contentDiv.style.padding = '8px 0' contentDiv.style.padding = '8px 0'
contentDiv.style.color = '#2d3339' contentDiv.style.color = '#2d3339'
@@ -570,10 +621,60 @@ function addMessage(role, content, markdown = false, messageId = null) {
return contentDiv return contentDiv
} }
// Parse [THINK] tags and create collapsible sections
function parseThinkingTags(content) {
let result = content
let thinkingCounter = 0
// Handle complete [THINK]...[/THINK] blocks
const completeThinkRegex = /\[THINK\]([\s\S]*?)\[\/THINK\]/gi
result = result.replace(completeThinkRegex, (match, thinkContent) => {
thinkingCounter++
const id = `thinking-${Date.now()}-${thinkingCounter}`
return `<div class="thinking-block">
<div class="thinking-header" onclick="toggleThinking('${id}')">
<span class="thinking-toggle" id="${id}-toggle">▼</span>
<span>🤔 Thinking...</span>
</div>
<div class="thinking-content" id="${id}">${thinkContent.trim()}</div>
</div>`
})
// Handle incomplete [THINK] blocks (still streaming)
const incompleteThinkRegex = /\[THINK\]([\s\S]*?)$/gi
result = result.replace(incompleteThinkRegex, (match, thinkContent) => {
thinkingCounter++
const id = `thinking-${Date.now()}-${thinkingCounter}`
return `<div class="thinking-block">
<div class="thinking-header" onclick="toggleThinking('${id}')">
<span class="thinking-toggle" id="${id}-toggle">▼</span>
<span>🤔 Thinking...</span>
</div>
<div class="thinking-content" id="${id}">${thinkContent.trim()}</div>
</div>`
})
return result
}
// Toggle thinking section visibility
window.toggleThinking = function(id) {
const content = document.getElementById(id)
const toggle = document.getElementById(id + '-toggle')
if (content && toggle) {
content.classList.toggle('hidden')
toggle.classList.toggle('collapsed')
}
}
// Update message content (for streaming) // Update message content (for streaming)
function updateMessageContent(contentDiv, newContent, markdown = false) { function updateMessageContent(contentDiv, newContent, markdown = false) {
// Parse thinking tags first
const processedContent = parseThinkingTags(newContent)
if (markdown && markdownToggle.checked) { if (markdown && markdownToggle.checked) {
contentDiv.innerHTML = marked.parse(newContent) contentDiv.innerHTML = marked.parse(processedContent)
if (window.hljs) { if (window.hljs) {
setTimeout(() => { setTimeout(() => {
contentDiv.querySelectorAll('pre code').forEach((block) => { contentDiv.querySelectorAll('pre code').forEach((block) => {