|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Assistant - ComSync Pro</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
.scrollbar-hide::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
.message-user { |
|
|
background: linear-gradient(135deg, #3b82f6, #60a5fa); |
|
|
border-radius: 12px 12px 0 12px; |
|
|
align-self: flex-end; |
|
|
} |
|
|
.message-ai { |
|
|
background: rgba(55, 65, 81, 0.8); |
|
|
border-radius: 12px 12px 12px 0; |
|
|
align-self: flex-start; |
|
|
} |
|
|
.typing-indicator span { |
|
|
animation: typing 1.4s infinite ease-in-out; |
|
|
} |
|
|
.typing-indicator span:nth-child(1) { animation-delay: 0s; } |
|
|
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; } |
|
|
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; } |
|
|
@keyframes typing { |
|
|
0%, 60%, 100% { transform: translateY(0); } |
|
|
30% { transform: translateY(-5px); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100"> |
|
|
<div id="vanta-bg" class="fixed inset-0 z-0"></div> |
|
|
<div class="relative z-10 min-h-screen p-4 md:p-6"> |
|
|
|
|
|
<header class="bg-gray-800/80 backdrop-blur-md rounded-xl p-4 mb-6 border border-gray-700/50 shadow-lg"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i data-feather="cpu" class="w-8 h-8 text-purple-400"></i> |
|
|
<h1 class="text-2xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">AI Assistant</h1> |
|
|
</div> |
|
|
<div class="flex flex-wrap items-center gap-4"> |
|
|
<div class="status-pill flex items-center px-3 py-1 rounded-full text-sm bg-green-900/30 text-green-400"> |
|
|
<i data-feather="check-circle" class="w-4 h-4 mr-1"></i> |
|
|
<span id="connection-status">Connected</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-1"> |
|
|
<i data-feather="clock" class="w-5 h-5"></i> |
|
|
<span class="text-sm" id="current-time">14:45:32</span> |
|
|
</div> |
|
|
<button class="settings-btn p-2 bg-gray-700/50 hover:bg-gray-600/50 rounded-lg transition-all"> |
|
|
<i data-feather="settings" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800/80 backdrop-blur-md rounded-xl p-5 border border-gray-700/50 shadow-lg max-w-4xl mx-auto"> |
|
|
<div class="flex flex-col h-[calc(100vh-220px)]"> |
|
|
|
|
|
<div class="mb-4 pb-4 border-b border-gray-700"> |
|
|
<h2 class="text-xl font-semibold flex items-center"> |
|
|
<i data-feather="message-circle" class="w-5 h-5 mr-2 text-purple-400"></i> |
|
|
Dolphin-Mistral AI Assistant |
|
|
</h2> |
|
|
<p class="text-sm text-gray-400 mt-1">Ask anything related to operations, logistics, or emergency procedures</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chat-messages" class="flex-1 overflow-y-auto scrollbar-hide space-y-4 mb-4"> |
|
|
|
|
|
<div class="message-ai p-4 max-w-[80%]"> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="bg-purple-500 rounded-full p-2"> |
|
|
<i data-feather="bot" class="w-4 h-4"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">AI Assistant</p> |
|
|
<p>Hello! I'm your Dolphin-Mistral AI assistant. How can I help with your mission today?</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="typing-indicator" class="message-ai p-4 max-w-[60%] hidden"> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="bg-purple-500 rounded-full p-2"> |
|
|
<i data-feather="bot" class="w-4 h-4"></i> |
|
|
</div> |
|
|
<div class="typing-indicator flex space-x-1 pt-2"> |
|
|
<span class="w-2 h-2 bg-gray-300 rounded-full"></span> |
|
|
<span class="w-2 h-2 bg-gray-300 rounded-full"></span> |
|
|
<span class="w-2 h-2 bg-gray-300 rounded-full"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-4"> |
|
|
<form id="chat-form" class="flex space-x-3"> |
|
|
<input |
|
|
type="text" |
|
|
id="user-input" |
|
|
placeholder="Type your message here..." |
|
|
class="flex-1 bg-gray-700/50 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500" |
|
|
autocomplete="off" |
|
|
> |
|
|
<button |
|
|
type="submit" |
|
|
class="bg-purple-600 hover:bg-purple-700 p-3 rounded-lg transition-colors" |
|
|
> |
|
|
<i data-feather="send" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</form> |
|
|
<p class="text-xs text-gray-500 text-center mt-2">Powered by dphn/Dolphin-Mistral-24B-Venice-Edition</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.NET({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x8b5cf6, |
|
|
backgroundColor: 0x111827, |
|
|
points: 10.00, |
|
|
maxDistance: 22.00, |
|
|
spacing: 18.00 |
|
|
}); |
|
|
|
|
|
|
|
|
function updateTime() { |
|
|
const now = new Date(); |
|
|
document.getElementById('current-time').textContent = now.toLocaleTimeString(); |
|
|
} |
|
|
setInterval(updateTime, 1000); |
|
|
updateTime(); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const chatForm = document.getElementById('chat-form'); |
|
|
const userInput = document.getElementById('user-input'); |
|
|
const chatMessages = document.getElementById('chat-messages'); |
|
|
const typingIndicator = document.getElementById('typing-indicator'); |
|
|
|
|
|
|
|
|
function addMessage(role, content) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = `p-4 max-w-[80%] ${role === 'user' ? 'message-user' : 'message-ai'}`; |
|
|
|
|
|
if (role === 'user') { |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="bg-blue-500 rounded-full p-2"> |
|
|
<i data-feather="user" class="w-4 h-4"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">You</p> |
|
|
<p>${content}</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} else { |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="bg-purple-500 rounded-full p-2"> |
|
|
<i data-feather="bot" class="w-4 h-4"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">AI Assistant</p> |
|
|
<p>${content}</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
chatMessages.appendChild(messageDiv); |
|
|
feather.replace(); |
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
} |
|
|
|
|
|
let isConnected = true; |
|
|
|
|
|
function updateConnectionStatus() { |
|
|
const statusElement = document.getElementById('connection-status'); |
|
|
if (isConnected) { |
|
|
statusElement.textContent = 'Connected'; |
|
|
statusElement.parentElement.className = 'status-pill flex items-center px-3 py-1 rounded-full text-sm bg-green-900/30 text-green-400'; |
|
|
} else { |
|
|
statusElement.textContent = 'Disconnected'; |
|
|
statusElement.parentElement.className = 'status-pill flex items-center px-3 py-1 rounded-full text-sm bg-red-900/30 text-red-400'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
if (Math.random() > 0.8) { |
|
|
isConnected = !isConnected; |
|
|
updateConnectionStatus(); |
|
|
|
|
|
if (!isConnected) { |
|
|
addMessage('ai', 'Warning: Connection to Mission Control has been lost. Attempting to reestablish...'); |
|
|
} else { |
|
|
addMessage('ai', 'Connection restored. Mission Control is now online.'); |
|
|
} |
|
|
} |
|
|
}, 15000); |
|
|
|
|
|
|
|
|
async function simulateAIResponse(userMessage) { |
|
|
|
|
|
if (!isConnected) { |
|
|
addMessage('ai', 'Unable to process request: No connection to Mission Control. Please check your communication systems.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
typingIndicator.classList.remove('hidden'); |
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
|
|
|
|
|
|
const delay = 500 + Math.random() * 1500; |
|
|
await new Promise(resolve => setTimeout(resolve, delay)); |
|
|
|
|
|
|
|
|
typingIndicator.classList.add('hidden'); |
|
|
|
|
|
|
|
|
let response = ""; |
|
|
const lowerMsg = userMessage.toLowerCase(); |
|
|
|
|
|
if (lowerMsg.includes("hello") || lowerMsg.includes("hi") || lowerMsg.includes("hey")) { |
|
|
const greetings = [ |
|
|
"Greetings, operative. How can I assist with your mission today?", |
|
|
"Hello! Ready to support your operational needs. What can I do for you?", |
|
|
"Hi there! I'm monitoring all channels. What's your request?" |
|
|
]; |
|
|
response = greetings[Math.floor(Math.random() * greetings.length)]; |
|
|
} else if (lowerMsg.includes("emergency") || lowerMsg.includes("help") || lowerMsg.includes("mayday")) { |
|
|
response = "CRITICAL ALERT: Emergency protocols activated. Contacting Mission Control immediately on Channel 1. Please state your emergency clearly."; |
|
|
} else if (lowerMsg.includes("procedure") || lowerMsg.includes("protocol") || lowerMsg.includes("sop")) { |
|
|
response = "Accessing Standard Operating Procedures database... Please specify which protocol you require:\n- Emergency Evacuation\n- Medical Response\n- Security Breach\n- Equipment Failure"; |
|
|
} else if (lowerMsg.includes("location") || lowerMsg.includes("position") || lowerMsg.includes("where")) { |
|
|
response = "Integrating GPS tracking systems...\nLatest known positions:\n- John Smith: Sector 7 (40.74844°N, -73.98566°W)\n- Maria Garcia: Base Camp (40.74890°N, -73.98750°W)\n- Robert Johnson: Sector 3 (40.74780°N, -73.98620°W)"; |
|
|
} else if (lowerMsg.includes("weather") || lowerMsg.includes("climate") || lowerMsg.includes("conditions")) { |
|
|
response = "Accessing meteorological data...\nCurrent Conditions:\n- Visibility: Excellent (10km+)\n- Temperature: 22°C (72°F)\n- Wind: 5 km/h NE\n- Atmospheric Pressure: Stable\n- Precipitation: None forecasted"; |
|
|
} else if (lowerMsg.includes("status") || lowerMsg.includes("update") || lowerMsg.includes("report")) { |
|
|
response = "System Status Report:\n- Network: Online\n- GPS: Active\n- Signal Strength: Good\n- Battery: 85%\n- Team Members: 3 Online\nAll systems functioning within normal parameters."; |
|
|
} else if (lowerMsg.includes("channel") || lowerMsg.includes("frequency") || lowerMsg.includes("communication")) { |
|
|
response = "Communication Channels Status:\n- Channel 1 (Operations): Active\n- Channel 2 (Logistics): Active\n- Channel 3 (Medical): Active\n- Channel 4 (Security): Active\nAll channels monitored and operational."; |
|
|
} else { |
|
|
const responses = [ |
|
|
"Acknowledged. Processing your request...", |
|
|
"Understood. I've logged this information in the system.", |
|
|
"Confirmed. All team members notified.", |
|
|
"Analyzing your query... Operational parameters remain stable.", |
|
|
"Request received. Cross-referencing with mission protocols...", |
|
|
"Data processed. No anomalies detected in current operations.", |
|
|
"Command understood. Executing requested action sequence." |
|
|
]; |
|
|
response = responses[Math.floor(Math.random() * responses.length)]; |
|
|
} |
|
|
|
|
|
addMessage('ai', response); |
|
|
} |
|
|
|
|
|
chatForm.addEventListener('submit', async (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
const message = userInput.value.trim(); |
|
|
if (!message) return; |
|
|
|
|
|
|
|
|
addMessage('user', message); |
|
|
userInput.value = ''; |
|
|
|
|
|
|
|
|
await simulateAIResponse(message); |
|
|
}); |
|
|
|
|
|
userInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter' && !e.shiftKey) { |
|
|
e.preventDefault(); |
|
|
chatForm.dispatchEvent(new Event('submit')); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('.settings-btn').addEventListener('click', function() { |
|
|
alert('AI Assistant settings would open here in a full implementation.'); |
|
|
}); |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
if (isConnected && Math.random() > 0.7) { |
|
|
const statuses = [ |
|
|
"Mission Control reports all systems nominal.", |
|
|
"Weather conditions remain stable across all sectors.", |
|
|
"All team members accounted for and reporting normal status.", |
|
|
"Communications network integrity at 98.7% efficiency.", |
|
|
"Power levels maintaining optimal charge across all units." |
|
|
]; |
|
|
const randomStatus = statuses[Math.floor(Math.random() * statuses.length)]; |
|
|
addMessage('ai', `[SYSTEM UPDATE] ${randomStatus}`); |
|
|
} |
|
|
}, 30000); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
