Upload 4 files

9ed9d45 verified 7 months ago

29.2 kB

	<!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>
	// 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>