Spaces:
Sleeping
Sleeping
| <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> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| 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 header header" | |
| "left-panel main-content right-panel" | |
| "bottom-left bottom-center bottom-right"; | |
| grid-template-rows: 80px 1fr 60px; | |
| grid-template-columns: 200px 1fr 200px; | |
| height: 100vh; | |
| gap: 8px; | |
| padding: 8px; | |
| } | |
| .lcars-panel { | |
| background: linear-gradient(45deg, #336699, #4488bb); | |
| border-radius: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .lcars-panel::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); | |
| animation: shimmer 3s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| .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); | |
| } | |
| .left-panel { | |
| grid-area: left-panel; | |
| background: linear-gradient(180deg, #cc3366, #ff3366); | |
| border-radius: 0 40px 40px 0; | |
| padding: 20px; | |
| } | |
| .right-panel { | |
| grid-area: right-panel; | |
| background: linear-gradient(180deg, #6633cc, #9933ff); | |
| border-radius: 40px 0 0 40px; | |
| padding: 20px; | |
| } | |
| .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; | |
| } | |
| .bottom-left { | |
| grid-area: bottom-left; | |
| background: linear-gradient(90deg, #00ccff, #0099cc); | |
| border-radius: 40px 40px 0 0; | |
| } | |
| .bottom-center { | |
| grid-area: bottom-center; | |
| background: linear-gradient(90deg, #00ff66, #00cc44); | |
| border-radius: 40px 40px 40px 40px; | |
| } | |
| .bottom-right { | |
| grid-area: bottom-right; | |
| background: linear-gradient(90deg, #ffcc00, #ff9900); | |
| border-radius: 40px 40px 0 0; | |
| } | |
| .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); | |
| } | |
| .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); | |
| } | |
| .settings-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 10px; | |
| margin-top: 15px; | |
| } | |
| .settings-row label { | |
| font-size: 12px; | |
| color: #66aadd; | |
| min-width: 80px; | |
| } | |
| .settings-input { | |
| 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; | |
| flex: 1; | |
| } | |
| .status-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0 20px; | |
| background: rgba(0, 0, 0, 0.8); | |
| border-top: 1px solid #ff9900; | |
| height: 40px; | |
| 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; } | |
| } | |
| .side-button { | |
| width: 100%; | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 10px; | |
| padding: 10px; | |
| color: #fff; | |
| font-family: 'Orbitron', monospace; | |
| font-size: 11px; | |
| cursor: pointer; | |
| margin-bottom: 10px; | |
| transition: all 0.3s; | |
| } | |
| .side-button:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| transform: scale(1.05); | |
| } | |
| .session-info { | |
| font-size: 10px; | |
| color: rgba(255, 255, 255, 0.7); | |
| margin-top: 10px; | |
| } | |
| @media (max-width: 1200px) { | |
| .lcars-container { | |
| grid-template-areas: | |
| "header header header" | |
| "main-content main-content main-content" | |
| "bottom-left bottom-center bottom-right"; | |
| grid-template-columns: 1fr; | |
| } | |
| .left-panel, .right-panel { display: none; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="lcars-container"> | |
| <div class="header"> | |
| <h1>🧠 MULTIMODAL CHAT AGENT - LCARS INTERFACE</h1> | |
| </div> | |
| <div class="left-panel lcars-panel"> | |
| <div class="side-controls"> | |
| <button class="side-button" onclick="saveSession()">SAVE SESSION</button> | |
| <button class="side-button" onclick="document.getElementById('load-session').click()">LOAD SESSION</button> | |
| <button class="side-button" onclick="createDataset()">CREATE DATASET</button> | |
| <button class="side-button" onclick="clearChat()">CLEAR CHAT</button> | |
| <div class="session-info"> | |
| <div>SESSION: ACTIVE</div> | |
| <div>MESSAGES: <span id="message-count">0</span></div> | |
| </div> | |
| </div> | |
| </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="settings-grid"> | |
| <div class="settings-row"> | |
| <label>API:</label> | |
| <input type="text" class="settings-input" id="api-key" value="not-needed" /> | |
| </div> | |
| <div class="settings-row"> | |
| <label>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="qwen2-vl-2b-instruct" /> | |
| </div> | |
| <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" oninput="document.getElementById('temp-display').textContent=this.value" /> | |
| <span id="temp-display">0.7</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="status-bar"> | |
| <div class="status-indicator"> | |
| <div class="status-dot"></div> | |
| <span>SYSTEM ONLINE</span> | |
| </div> | |
| <div>STARDATE: <span id="stardate"></span></div> | |
| </div> | |
| </div> | |
| <div class="right-panel lcars-panel"> | |
| <div class="side-controls"> | |
| <button class="side-button" onclick="toggleSettings()">SETTINGS</button> | |
| <button class="side-button" onclick="showHelp()">HELP</button> | |
| <button class="side-button" onclick="showStats()">STATISTICS</button> | |
| <button class="side-button" onclick="exportChat()">EXPORT</button> | |
| <div class="session-info"> | |
| <div>TEMP: <span id="temp-display">0.7</span></div> | |
| <div>TOKENS: <span id="token-count">512</span></div> | |
| <div>STATUS: READY</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bottom-left lcars-panel"></div> | |
| <div class="bottom-center lcars-panel"></div> | |
| <div class="bottom-right lcars-panel"></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; | |
| document.addEventListener('DOMContentLoaded', function () { | |
| updateStardate(); | |
| setInterval(updateStardate, 1000); | |
| document.getElementById('user-input').addEventListener('keypress', e => { | |
| if (e.key === 'Enter') sendMessage(); | |
| }); | |
| }); | |
| 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>PROCESSING:</strong> ${content}`; | |
| } 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; | |
| } | |
| } | |
| async function sendMessage() { | |
| const input = document.getElementById('user-input'); | |
| const message = input.value.trim(); | |
| if (!message && !currentImage && !currentFile) return; | |
| addMessage(message + (currentImage ? ' [📷]' : '') + (currentFile ? ' [📄]' : ''), 'user'); | |
| input.value = ''; | |
| addMessage('Analyzing input and generating response...', 'assistant', true); | |
| setTimeout(() => { | |
| const thinkingMsg = document.querySelector('.thinking-message'); | |
| if (thinkingMsg) thinkingMsg.remove(); | |
| let response = "I've processed your input. "; | |
| if (message.includes("hello")) response = "Greetings, Captain. How may I assist you today?"; | |
| else if (currentImage) response = "Image analysis complete. Visual data is coherent and within expected parameters."; | |
| else if (currentFile) response = "File processed. Data structure is intact. Awaiting further instructions."; | |
| else response += "Response generated successfully."; | |
| addMessage(response, 'assistant'); | |
| chatHistory.push({ role: 'user', content: message, image: currentImage, file: currentFile }); | |
| chatHistory.push({ role: 'assistant', content: response }); | |
| currentImage = currentFile = null; | |
| document.getElementById('file-status').textContent = ''; | |
| }, 1500); | |
| } | |
| 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').textContent = '📷 Image loaded'; | |
| } else { | |
| currentFile = e.target.result; | |
| document.getElementById('file-status').textContent = '📄 File loaded'; | |
| } | |
| }; | |
| type === 'image' ? reader.readAsDataURL(file) : reader.readAsText(file); | |
| } | |
| } | |
| function saveSession() { | |
| const data = { | |
| timestamp: new Date().toISOString(), | |
| chatHistory, | |
| settings: { | |
| apiKey: document.getElementById('api-key').value, | |
| baseUrl: document.getElementById('base-url').value, | |
| model: document.getElementById('model').value, | |
| temperature: document.getElementById('temperature').value | |
| } | |
| }; | |
| const blob = new Blob([JSON.stringify(data, 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`; | |
| a.click(); | |
| URL.revokeObjectURL(url); | |
| addMessage("Session saved.", "assistant"); | |
| } | |
| function loadSession(input) { | |
| const file = input.files[0]; | |
| if (file) { | |
| const reader = new FileReader(); | |
| reader.onload = function (e) { | |
| try { | |
| const data = JSON.parse(e.target.result); | |
| chatHistory = data.chatHistory || []; | |
| document.getElementById('messages').innerHTML = ''; | |
| addMessage("Session restored from backup.", "assistant"); | |
| } catch (err) { | |
| addMessage("Error loading session.", "assistant"); | |
| } | |
| }; | |
| reader.readAsText(file); | |
| } | |
| } | |
| function createDataset() { | |
| if (chatHistory.length === 0) { | |
| addMessage("No chat history to create dataset.", "assistant"); | |
| return; | |
| } | |
| const dataset = [chatHistory]; | |
| 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 = `dataset_${new Date().toISOString().split('T')[0]}.json`; | |
| a.click(); | |
| URL.revokeObjectURL(url); | |
| addMessage("Training dataset created.", "assistant"); | |
| } | |
| function clearChat() { | |
| document.getElementById('messages').innerHTML = ''; | |
| chatHistory = []; | |
| messageCount = 0; | |
| document.getElementById('message-count').textContent = '0'; | |
| addMessage("Chat cleared.", "assistant"); | |
| } | |
| function exportChat() { | |
| const text = chatHistory.map(m => `${m.role.toUpperCase()}: ${m.content}`).join('\n'); | |
| const blob = new Blob([text], { type: 'text/plain' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = 'chat_export.txt'; | |
| a.click(); | |
| URL.revokeObjectURL(url); | |
| } | |
| function showHelp() { addMessage("Help: Type a message, attach files, and press TRANSMIT.", "assistant"); } | |
| function showStats() { addMessage(`Messages: ${messageCount}`, "assistant"); } | |
| function toggleSettings() { addMessage("Settings panel toggled.", "assistant"); } | |
| </script> | |
| </body> | |
| </html> |