Spaces:
Sleeping
Sleeping
File size: 4,545 Bytes
cd4f002 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maira Quintessence - Manual Control</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.glass { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }
.chat-scroll::-webkit-scrollbar { width: 5px; }
.chat-scroll::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 10px; }
</style>
</head>
<body class="bg-[#0f172a] text-slate-200 min-h-screen flex items-center justify-center p-4">
<div class="w-full max-w-3xl h-[90vh] glass rounded-3xl flex flex-col overflow-hidden shadow-2xl">
<div class="p-5 border-b border-white/10 flex flex-wrap justify-between items-center gap-4">
<div>
<h1 class="text-xl font-bold text-indigo-400">Maira Neural Core</h1>
<p class="text-xs text-slate-500">Owner: CyberCoder225</p>
</div>
<select id="model-select" class="bg-slate-800 border border-white/20 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
<option value="small">Maira Lite (Fastest)</option>
<option value="medium">Maira Prime (Llama 3.2)</option>
<option value="qwen">Maira Logic (Analytical)</option>
<option value="danube">Maira Chat (Bubbly)</option>
<option value="granite">Maira Art (Creative/Large)</option>
</select>
</div>
<div id="chat-window" class="flex-grow p-6 overflow-y-auto chat-scroll space-y-4">
<div class="bg-indigo-500/10 border border-indigo-500/20 p-4 rounded-2xl rounded-tl-none max-w-[85%]">
Ready for orders, Boss. Which core should I engage?
</div>
</div>
<form id="chat-form" class="p-4 bg-slate-900/50 border-t border-white/10 flex gap-2">
<input type="text" id="user-input" placeholder="Type your message..." required
class="flex-grow bg-slate-800 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all">
<button type="submit" id="send-btn" class="bg-indigo-600 hover:bg-indigo-500 px-6 py-3 rounded-xl font-bold transition-all disabled:opacity-50">
Send
</button>
</form>
</div>
<script>
const chatWindow = document.getElementById('chat-window');
const chatForm = document.getElementById('chat-form');
const userInput = document.getElementById('user-input');
const modelSelect = document.getElementById('model-select');
const sendBtn = document.getElementById('send-btn');
function addMessage(role, text) {
const div = document.createElement('div');
div.className = role === 'user'
? 'bg-slate-700 ml-auto p-4 rounded-2xl rounded-tr-none max-w-[85%] text-white'
: 'bg-indigo-500/10 border border-indigo-500/20 p-4 rounded-2xl rounded-tl-none max-w-[85%]';
div.innerText = text;
chatWindow.appendChild(div);
chatWindow.scrollTop = chatWindow.scrollHeight;
}
chatForm.onsubmit = async (e) => {
e.preventDefault();
const message = userInput.value.trim();
const model = modelSelect.value;
if (!message) return;
addMessage('user', message);
userInput.value = '';
sendBtn.disabled = true;
sendBtn.innerText = 'Thinking...';
try {
const response = await fetch('/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message, model_type: model })
});
const data = await response.json();
if (data.maira) {
addMessage('maira', data.maira);
} else {
addMessage('maira', "Error: " + (data.error || "Unknown core failure"));
}
} catch (err) {
addMessage('maira', "Connection Lost. Is the backend still building?");
} finally {
sendBtn.disabled = false;
sendBtn.innerText = 'Send';
}
};
</script>
</body>
</html> |