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> | |
| <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> | |
| // State management | |
| let chatHistory = []; | |
| let currentImage = null; | |
| let currentFile = null; | |
| let messageCount = 0; | |
| let isProcessing = false; | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| updateStardate(); | |
| setInterval(updateStardate, 1000); | |
| // Enter key support | |
| document.getElementById('user-input').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter' && !isProcessing) { | |
| sendMessage(); | |
| } | |
| }); | |
| // Slider updates | |
| 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'; | |
| // Add user message | |
| let displayMessage = message; | |
| if (currentImage) displayMessage += ' [IMAGE ATTACHED]'; | |
| if (currentFile) displayMessage += ' [FILE ATTACHED]'; | |
| addMessage(displayMessage, 'user'); | |
| userInput.value = ''; | |
| // Show thinking | |
| const thinkingDiv = addMessage('Connecting to API and analyzing input...', 'assistant', true); | |
| try { | |
| // Connect to the API | |
| const response = await callAPI(message, currentImage, currentFile); | |
| // Remove thinking message | |
| if (thinkingDiv && thinkingDiv.parentNode) { | |
| thinkingDiv.parentNode.removeChild(thinkingDiv); | |
| } | |
| // Add response | |
| addMessage(response.answer, 'assistant'); | |
| // Update chat history | |
| chatHistory.push({ | |
| role: 'user', | |
| content: message, | |
| image: currentImage ? 'attached' : null, | |
| file: currentFile ? 'attached' : null | |
| }); | |
| chatHistory.push({ | |
| role: 'assistant', | |
| content: response.answer, | |
| thinking: response.thinking | |
| }); | |
| // Clear attachments | |
| currentImage = null; | |
| currentFile = null; | |
| document.getElementById('file-status').textContent = ''; | |
| } catch (error) { | |
| // Remove thinking message | |
| 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); | |
| // Prepare the content for the API | |
| 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}` | |
| }); | |
| } | |
| // Prepare the messages history | |
| 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; | |
| // Parse thinking, answer, and artifacts | |
| 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 = []; | |
| // Extract code blocks | |
| 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(""); | |
| } | |
| // Extract thinking if present | |
| 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]; // Remove data URL prefix | |
| 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 || []; | |
| // Clear current messages | |
| document.getElementById('messages').innerHTML = ''; | |
| messageCount = 0; | |
| document.getElementById('message-count').textContent = '0'; | |
| // Load messages | |
| chatHistory.forEach(msg => { | |
| if (msg.role === 'user') { | |
| addMessage(msg.content, 'user'); | |
| } else if (msg.role === 'assistant') { | |
| addMessage(msg.content, 'assistant'); | |
| } | |
| }); | |
| // Load settings if available | |
| 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; | |
| } | |
| // Group conversations (every user message and following assistant response) | |
| const conversations = []; | |
| let currentConversation = []; | |
| for (let i = 0; i < chatHistory.length; i++) { | |
| currentConversation.push(chatHistory[i]); | |
| // When we have an assistant response, save the conversation | |
| if (chatHistory[i].role === 'assistant') { | |
| if (currentConversation.length > 0) { | |
| conversations.push(currentConversation); | |
| currentConversation = []; | |
| } | |
| } | |
| } | |
| // Add any remaining messages | |
| 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> |