|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>LCARS Multimodal Chat Agent</title> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap'); |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Orbitron', monospace; |
|
|
background: linear-gradient(135deg, #000 0%, #111 50%, #000 100%); |
|
|
color: #ff9900; |
|
|
min-height: 100vh; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.lcars-container { |
|
|
display: grid; |
|
|
grid-template-areas: |
|
|
"header" |
|
|
"main-content" |
|
|
"bottom-panel"; |
|
|
grid-template-rows: 80px 1fr 60px; |
|
|
height: 100vh; |
|
|
gap: 8px; |
|
|
padding: 8px; |
|
|
} |
|
|
|
|
|
.header { |
|
|
grid-area: header; |
|
|
background: linear-gradient(90deg, #ff6600, #ff9900); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 0 30px; |
|
|
border-radius: 0 0 40px 40px; |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
color: #000; |
|
|
font-weight: 900; |
|
|
font-size: 1.8rem; |
|
|
text-shadow: 2px 2px 4px rgba(255,255,255,0.3); |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
grid-area: main-content; |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
border: 2px solid #ff9900; |
|
|
border-radius: 20px; |
|
|
padding: 20px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 15px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.chat-container { |
|
|
flex: 1; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.message-area { |
|
|
flex: 1; |
|
|
background: rgba(0, 20, 40, 0.9); |
|
|
border: 1px solid #336699; |
|
|
border-radius: 15px; |
|
|
padding: 15px; |
|
|
overflow-y: auto; |
|
|
min-height: 300px; |
|
|
} |
|
|
|
|
|
.message { |
|
|
margin-bottom: 15px; |
|
|
padding: 10px; |
|
|
border-radius: 10px; |
|
|
animation: slideIn 0.3s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes slideIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.user-message { |
|
|
background: linear-gradient(135deg, #ff6600, #ff9900); |
|
|
color: #000; |
|
|
margin-left: 50px; |
|
|
border-radius: 15px 15px 5px 15px; |
|
|
} |
|
|
|
|
|
.assistant-message { |
|
|
background: linear-gradient(135deg, #336699, #4488bb); |
|
|
color: #fff; |
|
|
margin-right: 50px; |
|
|
border-radius: 15px 15px 15px 5px; |
|
|
} |
|
|
|
|
|
.thinking-message { |
|
|
background: linear-gradient(135deg, #cc3366, #ff3366); |
|
|
color: #fff; |
|
|
margin-right: 100px; |
|
|
border-radius: 10px; |
|
|
font-style: italic; |
|
|
font-size: 0.9em; |
|
|
} |
|
|
|
|
|
.input-section { |
|
|
background: rgba(0, 30, 60, 0.9); |
|
|
border: 1px solid #ff9900; |
|
|
border-radius: 15px; |
|
|
padding: 15px; |
|
|
} |
|
|
|
|
|
.input-row { |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
align-items: center; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.lcars-input { |
|
|
flex: 1; |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
border: 1px solid #ff9900; |
|
|
border-radius: 10px; |
|
|
padding: 12px; |
|
|
color: #ff9900; |
|
|
font-family: 'Orbitron', monospace; |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
.lcars-input:focus { |
|
|
outline: none; |
|
|
border-color: #ffcc00; |
|
|
box-shadow: 0 0 10px rgba(255, 204, 0, 0.3); |
|
|
} |
|
|
|
|
|
.lcars-button { |
|
|
background: linear-gradient(45deg, #ff6600, #ff9900); |
|
|
border: none; |
|
|
border-radius: 20px; |
|
|
padding: 12px 25px; |
|
|
color: #000; |
|
|
font-family: 'Orbitron', monospace; |
|
|
font-weight: 700; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
text-transform: uppercase; |
|
|
} |
|
|
|
|
|
.lcars-button:hover { |
|
|
background: linear-gradient(45deg, #ff9900, #ffcc00); |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 15px rgba(255, 153, 0, 0.4); |
|
|
} |
|
|
|
|
|
.lcars-button:active { |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.file-input { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.file-label { |
|
|
background: linear-gradient(45deg, #336699, #4488bb); |
|
|
border-radius: 15px; |
|
|
padding: 8px 15px; |
|
|
color: #fff; |
|
|
cursor: pointer; |
|
|
font-size: 12px; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.file-label:hover { |
|
|
background: linear-gradient(45deg, #4488bb, #66aadd); |
|
|
} |
|
|
|
|
|
.controls-panel { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
gap: 10px; |
|
|
margin-top: 15px; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.control-group { |
|
|
flex: 1; |
|
|
min-width: 200px; |
|
|
background: rgba(0, 0, 0, 0.6); |
|
|
border: 1px solid #66aadd; |
|
|
border-radius: 10px; |
|
|
padding: 10px; |
|
|
} |
|
|
|
|
|
.control-group h3 { |
|
|
color: #66aadd; |
|
|
font-size: 14px; |
|
|
margin-bottom: 10px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.settings-row { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
|
|
|
.settings-row label { |
|
|
font-size: 12px; |
|
|
color: #66aadd; |
|
|
min-width: 80px; |
|
|
} |
|
|
|
|
|
.settings-input { |
|
|
flex: 1; |
|
|
background: rgba(0, 0, 0, 0.6); |
|
|
border: 1px solid #66aadd; |
|
|
border-radius: 5px; |
|
|
padding: 5px 10px; |
|
|
color: #66aadd; |
|
|
font-family: 'Orbitron', monospace; |
|
|
font-size: 12px; |
|
|
} |
|
|
|
|
|
.bottom-panel { |
|
|
grid-area: bottom-panel; |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
border-top: 1px solid #ff9900; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 0 20px; |
|
|
font-size: 12px; |
|
|
} |
|
|
|
|
|
.status-indicator { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 5px; |
|
|
} |
|
|
|
|
|
.status-dot { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
background: #00ff66; |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
} |
|
|
|
|
|
.session-info { |
|
|
display: flex; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.session-info span { |
|
|
color: #ffffff; |
|
|
} |
|
|
|
|
|
.thinking-content { |
|
|
white-space: pre-wrap; |
|
|
line-height: 1.4; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.input-row { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.controls-panel { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.control-group { |
|
|
min-width: 100%; |
|
|
} |
|
|
|
|
|
.status-indicator { |
|
|
flex-direction: column; |
|
|
align-items: flex-start; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="lcars-container"> |
|
|
<div class="header"> |
|
|
<h1>L.C.A.R.S - Local Computer Advanced Reasoning System v3.0 </h1> |
|
|
</div> |
|
|
|
|
|
<div class="main-content"> |
|
|
<div class="chat-container"> |
|
|
<div class="message-area" id="messages"> |
|
|
<div class="message assistant-message"> |
|
|
<strong>SYSTEM:</strong> LCARS Multimodal Chat Agent initialized. Ready for communication. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="input-section"> |
|
|
<div class="input-row"> |
|
|
<input type="text" class="lcars-input" id="user-input" placeholder="Enter your message..." /> |
|
|
<button class="lcars-button" onclick="sendMessage()">TRANSMIT</button> |
|
|
</div> |
|
|
<div class="input-row"> |
|
|
<input type="file" id="image-input" class="file-input" accept=".png,.jpg,.jpeg" onchange="handleFileSelect(this, 'image')" /> |
|
|
<label for="image-input" class="file-label">📷 IMAGE</label> |
|
|
|
|
|
<input type="file" id="file-input" class="file-input" accept=".py,.txt,.md,.json,.csv" onchange="handleFileSelect(this, 'file')" /> |
|
|
<label for="file-input" class="file-label">📄 FILE</label> |
|
|
|
|
|
<span id="file-status"></span> |
|
|
</div> |
|
|
|
|
|
<div class="controls-panel"> |
|
|
<div class="control-group"> |
|
|
<h3>SYSTEM CONFIGURATION</h3> |
|
|
<div class="settings-row"> |
|
|
<label>API KEY:</label> |
|
|
<input type="text" class="settings-input" id="api-key" value="not-needed" /> |
|
|
</div> |
|
|
<div class="settings-row"> |
|
|
<label>BASE URL:</label> |
|
|
<input type="text" class="settings-input" id="base-url" value="http://localhost:1234/v1" /> |
|
|
</div> |
|
|
<div class="settings-row"> |
|
|
<label>MODEL:</label> |
|
|
<input type="text" class="settings-input" id="model" value="leroydyer/qwen/qwen2-vl-2b-instruct-q4_k_m.gguf" /> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="control-group"> |
|
|
<h3>GENERATION PARAMETERS</h3> |
|
|
<div class="settings-row"> |
|
|
<label>TEMP:</label> |
|
|
<input type="range" class="settings-input" id="temperature" min="0" max="1" step="0.1" value="0.7" /> |
|
|
<span id="temp-display">0.7</span> |
|
|
</div> |
|
|
<div class="settings-row"> |
|
|
<label>TOP-P:</label> |
|
|
<input type="range" class="settings-input" id="top_p" min="0" max="1" step="0.1" value="1.0" /> |
|
|
<span id="top_p-display">1.0</span> |
|
|
</div> |
|
|
<div class="settings-row"> |
|
|
<label>TOKENS:</label> |
|
|
<input type="number" class="settings-input" id="max_tokens" value="512" /> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="control-group"> |
|
|
<h3>SESSION MANAGEMENT</h3> |
|
|
<div class="input-row"> |
|
|
<button class="lcars-button" style="flex:1; padding:8px; font-size:12px;" onclick="saveSession()">SAVE SESSION</button> |
|
|
<button class="lcars-button" style="flex:1; padding:8px; font-size:12px;" onclick="document.getElementById('load-session').click()">LOAD SESSION</button> |
|
|
</div> |
|
|
<div class="input-row" style="margin-top:5px;"> |
|
|
<button class="lcars-button" style="flex:1; padding:8px; font-size:12px;" onclick="createDataset()">CREATE DATASET</button> |
|
|
<button class="lcars-button" style="flex:1; padding:8px; font-size:12px;" onclick="clearChat()">CLEAR CHAT</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bottom-panel"> |
|
|
<div class="status-indicator"> |
|
|
<div class="status-dot"></div> |
|
|
<span id="system-status">SYSTEM ONLINE</span> |
|
|
</div> |
|
|
<div class="session-info"> |
|
|
<span>MESSAGES: <span id="message-count">0</span></span> |
|
|
<span>STARDATE: <span id="stardate"></span></span> |
|
|
<span>TEMP: <span id="temp-value">0.7</span></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<input type="file" id="load-session" class="file-input" accept=".json" onchange="loadSession(this)" /> |
|
|
|
|
|
<script> |
|
|
|
|
|
let chatHistory = []; |
|
|
let currentImage = null; |
|
|
let currentFile = null; |
|
|
let messageCount = 0; |
|
|
let isProcessing = false; |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
updateStardate(); |
|
|
setInterval(updateStardate, 1000); |
|
|
|
|
|
|
|
|
document.getElementById('user-input').addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter' && !isProcessing) { |
|
|
sendMessage(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('temperature').addEventListener('input', function(e) { |
|
|
document.getElementById('temp-display').textContent = e.target.value; |
|
|
document.getElementById('temp-value').textContent = e.target.value; |
|
|
}); |
|
|
|
|
|
document.getElementById('top_p').addEventListener('input', function(e) { |
|
|
document.getElementById('top_p-display').textContent = e.target.value; |
|
|
}); |
|
|
}); |
|
|
|
|
|
function updateStardate() { |
|
|
const now = new Date(); |
|
|
const stardate = (now.getFullYear() - 2000) * 1000 + |
|
|
(now.getMonth() + 1) * 30 + |
|
|
now.getDate() + |
|
|
(now.getHours() / 24); |
|
|
document.getElementById('stardate').textContent = stardate.toFixed(1); |
|
|
} |
|
|
|
|
|
function addMessage(content, type, isThinking = false) { |
|
|
const messagesArea = document.getElementById('messages'); |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = `message ${type}-message ${isThinking ? 'thinking-message' : ''}`; |
|
|
|
|
|
if (isThinking) { |
|
|
messageDiv.innerHTML = `<strong>THINKING:</strong> <div class="thinking-content">${content}</div>`; |
|
|
} else if (type === 'user') { |
|
|
messageDiv.innerHTML = `<strong>USER:</strong> ${content}`; |
|
|
} else { |
|
|
messageDiv.innerHTML = `<strong>ASSISTANT:</strong> ${content}`; |
|
|
} |
|
|
|
|
|
messagesArea.appendChild(messageDiv); |
|
|
messagesArea.scrollTop = messagesArea.scrollHeight; |
|
|
|
|
|
if (!isThinking) { |
|
|
messageCount++; |
|
|
document.getElementById('message-count').textContent = messageCount; |
|
|
} |
|
|
|
|
|
return messageDiv; |
|
|
} |
|
|
|
|
|
async function sendMessage() { |
|
|
const userInput = document.getElementById('user-input'); |
|
|
const message = userInput.value.trim(); |
|
|
|
|
|
if (!message && !currentImage && !currentFile) return; |
|
|
if (isProcessing) return; |
|
|
|
|
|
isProcessing = true; |
|
|
document.getElementById('system-status').textContent = 'PROCESSING REQUEST'; |
|
|
|
|
|
|
|
|
let displayMessage = message; |
|
|
if (currentImage) displayMessage += ' [IMAGE ATTACHED]'; |
|
|
if (currentFile) displayMessage += ' [FILE ATTACHED]'; |
|
|
|
|
|
addMessage(displayMessage, 'user'); |
|
|
userInput.value = ''; |
|
|
|
|
|
|
|
|
const thinkingDiv = addMessage('Connecting to API and analyzing input...', 'assistant', true); |
|
|
|
|
|
try { |
|
|
|
|
|
const response = await callAPI(message, currentImage, currentFile); |
|
|
|
|
|
|
|
|
if (thinkingDiv && thinkingDiv.parentNode) { |
|
|
thinkingDiv.parentNode.removeChild(thinkingDiv); |
|
|
} |
|
|
|
|
|
|
|
|
addMessage(response.answer, 'assistant'); |
|
|
|
|
|
|
|
|
chatHistory.push({ |
|
|
role: 'user', |
|
|
content: message, |
|
|
image: currentImage ? 'attached' : null, |
|
|
file: currentFile ? 'attached' : null |
|
|
}); |
|
|
chatHistory.push({ |
|
|
role: 'assistant', |
|
|
content: response.answer, |
|
|
thinking: response.thinking |
|
|
}); |
|
|
|
|
|
|
|
|
currentImage = null; |
|
|
currentFile = null; |
|
|
document.getElementById('file-status').textContent = ''; |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
if (thinkingDiv && thinkingDiv.parentNode) { |
|
|
thinkingDiv.parentNode.removeChild(thinkingDiv); |
|
|
} |
|
|
|
|
|
addMessage(`ERROR: ${error.message}`, 'assistant'); |
|
|
} finally { |
|
|
isProcessing = false; |
|
|
document.getElementById('system-status').textContent = 'SYSTEM ONLINE'; |
|
|
} |
|
|
} |
|
|
|
|
|
async function callAPI(message, image = null, fileContent = null) { |
|
|
const apiKey = document.getElementById('api-key').value; |
|
|
const baseUrl = document.getElementById('base-url').value; |
|
|
const model = document.getElementById('model').value; |
|
|
const temperature = parseFloat(document.getElementById('temperature').value); |
|
|
const top_p = parseFloat(document.getElementById('top_p').value); |
|
|
const max_tokens = parseInt(document.getElementById('max_tokens').value); |
|
|
|
|
|
|
|
|
let content = [{ type: "text", text: message }]; |
|
|
|
|
|
if (image) { |
|
|
content.push({ |
|
|
type: "image_url", |
|
|
image_url: { url: `data:image/png;base64,${image}` } |
|
|
}); |
|
|
} |
|
|
|
|
|
if (fileContent) { |
|
|
content.push({ |
|
|
type: "text", |
|
|
text: `File content:\n${fileContent}` |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const messages = [...chatHistory, { role: "user", content: content }]; |
|
|
|
|
|
try { |
|
|
const response = await fetch(`${baseUrl}/chat/completions`, { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
'Authorization': `Bearer ${apiKey}` |
|
|
}, |
|
|
body: JSON.stringify({ |
|
|
model: model, |
|
|
messages: messages, |
|
|
temperature: temperature, |
|
|
top_p: top_p, |
|
|
max_tokens: max_tokens |
|
|
}) |
|
|
}); |
|
|
|
|
|
if (!response.ok) { |
|
|
throw new Error(`API error: ${response.status} ${response.statusText}`); |
|
|
} |
|
|
|
|
|
const data = await response.json(); |
|
|
const assistantMessage = data.choices[0].message.content; |
|
|
|
|
|
|
|
|
const result = parseResponse(assistantMessage); |
|
|
return result; |
|
|
|
|
|
} catch (error) { |
|
|
console.error('API call failed:', error); |
|
|
throw error; |
|
|
} |
|
|
} |
|
|
|
|
|
function parseResponse(text) { |
|
|
let thinking = ""; |
|
|
let answer = text; |
|
|
let artifacts = []; |
|
|
|
|
|
|
|
|
if (text.includes("```")) { |
|
|
const parts = text.split("```"); |
|
|
for (let i = 1; i < parts.length; i += 2) { |
|
|
let code = parts[i].trim(); |
|
|
if (code.startsWith("python")) { |
|
|
code = code.substring(6).trim(); |
|
|
} |
|
|
artifacts.push(code); |
|
|
} |
|
|
answer = parts.filter((_, i) => i % 2 === 0).join(""); |
|
|
} |
|
|
|
|
|
|
|
|
if (text.includes("<thinking>") && text.includes("</thinking>")) { |
|
|
thinking = text.split("<thinking>")[1].split("</thinking>")[0].trim(); |
|
|
} |
|
|
|
|
|
return { |
|
|
thinking: thinking, |
|
|
answer: answer.trim(), |
|
|
artifacts: artifacts |
|
|
}; |
|
|
} |
|
|
|
|
|
function handleFileSelect(input, type) { |
|
|
const file = input.files[0]; |
|
|
if (file) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(e) { |
|
|
if (type === 'image') { |
|
|
currentImage = e.target.result.split(',')[1]; |
|
|
document.getElementById('file-status').innerHTML = '📷 Image loaded'; |
|
|
} else { |
|
|
currentFile = e.target.result; |
|
|
document.getElementById('file-status').innerHTML = '📄 File loaded'; |
|
|
} |
|
|
}; |
|
|
|
|
|
if (type === 'image') { |
|
|
reader.readAsDataURL(file); |
|
|
} else { |
|
|
reader.readAsText(file); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function saveSession() { |
|
|
const sessionData = { |
|
|
timestamp: new Date().toISOString(), |
|
|
chatHistory: chatHistory, |
|
|
settings: { |
|
|
apiKey: document.getElementById('api-key').value, |
|
|
baseUrl: document.getElementById('base-url').value, |
|
|
model: document.getElementById('model').value, |
|
|
temperature: document.getElementById('temperature').value, |
|
|
top_p: document.getElementById('top_p').value, |
|
|
max_tokens: document.getElementById('max_tokens').value |
|
|
} |
|
|
}; |
|
|
|
|
|
const blob = new Blob([JSON.stringify(sessionData, null, 2)], { type: 'application/json' }); |
|
|
const url = URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = `lcars_session_${new Date().toISOString().split('T')[0]}.json`; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
URL.revokeObjectURL(url); |
|
|
|
|
|
addMessage('Session saved successfully.', 'assistant'); |
|
|
} |
|
|
|
|
|
function loadSession(input) { |
|
|
const file = input.files[0]; |
|
|
if (file) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(e) { |
|
|
try { |
|
|
const sessionData = JSON.parse(e.target.result); |
|
|
chatHistory = sessionData.chatHistory || []; |
|
|
|
|
|
|
|
|
document.getElementById('messages').innerHTML = ''; |
|
|
messageCount = 0; |
|
|
document.getElementById('message-count').textContent = '0'; |
|
|
|
|
|
|
|
|
chatHistory.forEach(msg => { |
|
|
if (msg.role === 'user') { |
|
|
addMessage(msg.content, 'user'); |
|
|
} else if (msg.role === 'assistant') { |
|
|
addMessage(msg.content, 'assistant'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
if (sessionData.settings) { |
|
|
document.getElementById('api-key').value = sessionData.settings.apiKey || 'not-needed'; |
|
|
document.getElementById('base-url').value = sessionData.settings.baseUrl || 'http://localhost:1234/v1'; |
|
|
document.getElementById('model').value = sessionData.settings.model || 'gpt-4o-mini'; |
|
|
document.getElementById('temperature').value = sessionData.settings.temperature || 0.7; |
|
|
document.getElementById('temp-display').textContent = sessionData.settings.temperature || 0.7; |
|
|
document.getElementById('temp-value').textContent = sessionData.settings.temperature || 0.7; |
|
|
document.getElementById('top_p').value = sessionData.settings.top_p || 1.0; |
|
|
document.getElementById('top_p-display').textContent = sessionData.settings.top_p || 1.0; |
|
|
document.getElementById('max_tokens').value = sessionData.settings.max_tokens || 512; |
|
|
} |
|
|
|
|
|
addMessage('Session loaded successfully.', 'assistant'); |
|
|
} catch (error) { |
|
|
addMessage(`Error loading session: ${error.message}`, 'assistant'); |
|
|
} |
|
|
}; |
|
|
reader.readAsText(file); |
|
|
} |
|
|
} |
|
|
|
|
|
function createDataset() { |
|
|
if (chatHistory.length === 0) { |
|
|
addMessage('No chat history to create dataset from.', 'assistant'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const conversations = []; |
|
|
let currentConversation = []; |
|
|
|
|
|
for (let i = 0; i < chatHistory.length; i++) { |
|
|
currentConversation.push(chatHistory[i]); |
|
|
|
|
|
|
|
|
if (chatHistory[i].role === 'assistant') { |
|
|
if (currentConversation.length > 0) { |
|
|
conversations.push(currentConversation); |
|
|
currentConversation = []; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (currentConversation.length > 0) { |
|
|
conversations.push(currentConversation); |
|
|
} |
|
|
|
|
|
const dataset = { |
|
|
created: new Date().toISOString(), |
|
|
conversations: conversations, |
|
|
count: conversations.length |
|
|
}; |
|
|
|
|
|
const blob = new Blob([JSON.stringify(dataset, null, 2)], { type: 'application/json' }); |
|
|
const url = URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = `lcars_dataset_${new Date().toISOString().split('T')[0]}.json`; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
URL.revokeObjectURL(url); |
|
|
|
|
|
addMessage(`Dataset created with ${conversations.length} conversations and downloaded successfully.`, 'assistant'); |
|
|
} |
|
|
|
|
|
function clearChat() { |
|
|
if (confirm('Are you sure you want to clear the chat history?')) { |
|
|
document.getElementById('messages').innerHTML = ''; |
|
|
chatHistory = []; |
|
|
messageCount = 0; |
|
|
document.getElementById('message-count').textContent = '0'; |
|
|
addMessage('Chat cleared.', 'assistant'); |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
