|
|
<!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: auto 1fr auto; |
|
|
min-height: 100vh; |
|
|
padding: 20px; |
|
|
gap: 20px; |
|
|
} |
|
|
.header { |
|
|
grid-area: header; |
|
|
text-align: center; |
|
|
padding: 15px; |
|
|
background: rgba(255, 153, 0, 0.1); |
|
|
border: 2px solid #ff9900; |
|
|
border-radius: 15px; |
|
|
} |
|
|
.main-content { |
|
|
grid-area: main-content; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 20px; |
|
|
} |
|
|
.chat-container { |
|
|
flex: 1; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
border: 2px solid #ff9900; |
|
|
border-radius: 15px; |
|
|
overflow: hidden; |
|
|
} |
|
|
.message-area { |
|
|
flex: 1; |
|
|
padding: 20px; |
|
|
overflow-y: auto; |
|
|
max-height: 500px; |
|
|
} |
|
|
.message { |
|
|
margin-bottom: 15px; |
|
|
padding: 10px; |
|
|
border-radius: 10px; |
|
|
animation: fadeIn 0.3s; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
.user-message { |
|
|
background: rgba(255, 153, 0, 0.2); |
|
|
border-left: 4px solid #ff9900; |
|
|
} |
|
|
.assistant-message { |
|
|
background: rgba(0, 153, 255, 0.2); |
|
|
border-left: 4px solid #0099ff; |
|
|
} |
|
|
.thinking-message { |
|
|
background: rgba(153, 0, 255, 0.2); |
|
|
border-left: 4px solid #9900ff; |
|
|
font-style: italic; |
|
|
} |
|
|
.input-section { |
|
|
padding: 15px; |
|
|
background: rgba(50, 50, 50, 0.9); |
|
|
border-top: 2px solid #ff9900; |
|
|
} |
|
|
.input-row { |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
margin-bottom: 10px; |
|
|
align-items: center; |
|
|
} |
|
|
.lcars-input { |
|
|
flex: 1; |
|
|
padding: 12px 20px; |
|
|
background: #333; |
|
|
border: 2px solid #ff9900; |
|
|
border-radius: 20px; |
|
|
color: #ff9900; |
|
|
font-family: 'Orbitron', monospace; |
|
|
font-size: 16px; |
|
|
} |
|
|
.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, #0066cc, #0099ff); |
|
|
border: none; |
|
|
border-radius: 20px; |
|
|
padding: 12px 25px; |
|
|
color: #fff; |
|
|
font-family: 'Orbitron', monospace; |
|
|
font-weight: 700; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
text-transform: uppercase; |
|
|
} |
|
|
.file-label:hover { |
|
|
background: linear-gradient(45deg, #0099ff, #00ccff); |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 15px rgba(0, 153, 255, 0.4); |
|
|
} |
|
|
.status-bar { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
padding: 10px; |
|
|
background: rgba(255, 153, 0, 0.1); |
|
|
border: 1px solid #ff9900; |
|
|
border-radius: 10px; |
|
|
font-size: 14px; |
|
|
} |
|
|
.bottom-panel { |
|
|
grid-area: bottom-panel; |
|
|
text-align: center; |
|
|
padding: 15px; |
|
|
background: rgba(255, 153, 0, 0.1); |
|
|
border: 2px solid #ff9900; |
|
|
border-radius: 15px; |
|
|
font-size: 12px; |
|
|
} |
|
|
#file-status { |
|
|
color: #00ff99; |
|
|
font-weight: bold; |
|
|
} |
|
|
#system-status { |
|
|
color: #ff9900; |
|
|
font-weight: bold; |
|
|
} |
|
|
#message-count { |
|
|
color: #9900ff; |
|
|
font-weight: bold; |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.input-row { |
|
|
flex-direction: column; |
|
|
} |
|
|
.lcars-button, .file-label { |
|
|
width: 100%; |
|
|
} |
|
|
} |
|
|
</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" class="file-input" id="file-input" accept="*" /> |
|
|
<label for="file-input" class="file-label">📎 ATTACH FILE</label> |
|
|
<button class="lcars-button" onclick="saveSession()">💾 SAVE SESSION</button> |
|
|
<button class="lcars-button" onclick="clearChat()">🗑️ CLEAR CHAT</button> |
|
|
</div> |
|
|
<div class="status-bar"> |
|
|
<span>File Status: <span id="file-status">NONE</span></span> |
|
|
<span>System Status: <span id="system-status">SYSTEM ONLINE</span></span> |
|
|
<span>Messages: <span id="message-count">0</span></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bottom-panel"> |
|
|
🚀 L.C.A.R.S - Enhanced Local Computer Advanced Reasoning System v3.0 • Starfleet Command • Computer Core Online |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let chatHistory = []; |
|
|
let messageCount = 1; |
|
|
let currentFile = null; |
|
|
|
|
|
|
|
|
const messageArea = document.getElementById('messages'); |
|
|
const userInput = document.getElementById('user-input'); |
|
|
const fileInput = document.getElementById('file-input'); |
|
|
const fileStatus = document.getElementById('file-status'); |
|
|
const systemStatus = document.getElementById('system-status'); |
|
|
const messageCountEl = document.getElementById('message-count'); |
|
|
|
|
|
|
|
|
fileInput.addEventListener('change', function(e) { |
|
|
if (e.target.files.length > 0) { |
|
|
currentFile = e.target.files[0]; |
|
|
fileStatus.textContent = `${currentFile.name} (${formatFileSize(currentFile.size)})`; |
|
|
fileStatus.style.color = '#00ff99'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function formatFileSize(bytes) { |
|
|
if (bytes === 0) return '0 Bytes'; |
|
|
const k = 1024; |
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB']; |
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k)); |
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; |
|
|
} |
|
|
|
|
|
|
|
|
function addMessage(content, sender, isThinking = false) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.classList.add('message'); |
|
|
|
|
|
if (sender === 'user') { |
|
|
messageDiv.classList.add('user-message'); |
|
|
messageDiv.innerHTML = `<strong>USER:</strong> ${content}`; |
|
|
} else if (isThinking) { |
|
|
messageDiv.classList.add('thinking-message'); |
|
|
messageDiv.innerHTML = `<strong>THINKING:</strong> ${content}`; |
|
|
} else { |
|
|
messageDiv.classList.add('assistant-message'); |
|
|
messageDiv.innerHTML = `<strong>LCARS:</strong> ${content}`; |
|
|
} |
|
|
|
|
|
messageArea.appendChild(messageDiv); |
|
|
messageArea.scrollTop = messageArea.scrollHeight; |
|
|
|
|
|
if (!isThinking) { |
|
|
messageCount++; |
|
|
messageCountEl.textContent = messageCount; |
|
|
} |
|
|
|
|
|
return messageDiv; |
|
|
} |
|
|
|
|
|
|
|
|
async function sendMessage() { |
|
|
const message = userInput.value.trim(); |
|
|
if (!message && !currentFile) return; |
|
|
|
|
|
systemStatus.textContent = 'PROCESSING REQUEST'; |
|
|
document.querySelector('.lcars-button[onclick="sendMessage()"]').disabled = true; |
|
|
|
|
|
|
|
|
let displayMessage = message; |
|
|
if (currentFile) displayMessage += ` [FILE: ${currentFile.name}]`; |
|
|
addMessage(displayMessage, 'user'); |
|
|
userInput.value = ''; |
|
|
|
|
|
|
|
|
const thinkingDiv = addMessage('Analyzing input and formulating response...', 'assistant', true); |
|
|
|
|
|
try { |
|
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 1500)); |
|
|
|
|
|
|
|
|
if (thinkingDiv && thinkingDiv.parentNode) { |
|
|
thinkingDiv.parentNode.removeChild(thinkingDiv); |
|
|
} |
|
|
|
|
|
|
|
|
const response = generateResponse(message); |
|
|
addMessage(response, 'assistant'); |
|
|
|
|
|
|
|
|
chatHistory.push({role: 'user', content: message, file: currentFile ? currentFile.name : null}); |
|
|
chatHistory.push({role: 'assistant', content: response}); |
|
|
|
|
|
|
|
|
currentFile = null; |
|
|
fileInput.value = ''; |
|
|
fileStatus.textContent = 'NONE'; |
|
|
fileStatus.style.color = ''; |
|
|
} catch (error) { |
|
|
|
|
|
if (thinkingDiv && thinkingDiv.parentNode) { |
|
|
thinkingDiv.parentNode.removeChild(thinkingDiv); |
|
|
} |
|
|
addMessage(`ERROR: ${error.message}`, 'assistant'); |
|
|
} finally { |
|
|
systemStatus.textContent = 'SYSTEM ONLINE'; |
|
|
document.querySelector('.lcars-button[onclick="sendMessage()"]').disabled = false; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function generateResponse(input) { |
|
|
const responses = [ |
|
|
"I've processed your request. The analysis indicates optimal parameters for execution.", |
|
|
"Understood. I'm initiating the requested protocols now.", |
|
|
"Acknowledged. The system has completed the background processes related to your query.", |
|
|
"Confirmed. I've updated the main database with the new information.", |
|
|
"Processing complete. The results have been archived in the primary LCARS network.", |
|
|
"Task finished. All subsystems report nominal status.", |
|
|
"Operation successful. The requested files have been transferred to your personal directory.", |
|
|
"Analysis complete. I recommend proceeding with the next phase of the mission.", |
|
|
"Data received. I'm cross-referencing with Starfleet's central archives.", |
|
|
"Query resolved. The solution has been implemented across all connected systems." |
|
|
]; |
|
|
|
|
|
|
|
|
if (input.toLowerCase().includes('hello') || input.toLowerCase().includes('hi')) { |
|
|
return "Greetings! I am LCARS, the Local Computer Advanced Reasoning System. How may I assist you today?"; |
|
|
} |
|
|
if (input.toLowerCase().includes('help')) { |
|
|
return "I can assist with various tasks including data analysis, file processing, system diagnostics, and mission planning. Please specify your requirements."; |
|
|
} |
|
|
if (input.toLowerCase().includes('status')) { |
|
|
return "All primary systems are functioning within normal parameters. No critical alerts detected. Secondary systems report 97.3% efficiency."; |
|
|
} |
|
|
|
|
|
return responses[Math.floor(Math.random() * responses.length)]; |
|
|
} |
|
|
|
|
|
|
|
|
function saveSession() { |
|
|
if (chatHistory.length === 0) { |
|
|
addMessage('No conversation to save.', 'assistant'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const sessionData = { |
|
|
timestamp: new Date().toISOString(), |
|
|
chatHistory: chatHistory |
|
|
}; |
|
|
|
|
|
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 clearChat() { |
|
|
if (confirm('Are you sure you want to clear the chat history?')) { |
|
|
messageArea.innerHTML = '<div class="message assistant-message"><strong>SYSTEM:</strong> LCARS Multimodal Chat Agent initialized. Ready for communication.</div>'; |
|
|
chatHistory = []; |
|
|
messageCount = 1; |
|
|
messageCountEl.textContent = '0'; |
|
|
addMessage('Chat cleared.', 'assistant'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
userInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
sendMessage(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
messageCountEl.textContent = messageCount; |
|
|
</script> |
|
|
</body> |
|
|
</html> |
