File size: 4,565 Bytes
e5067a7 718aa48 f0c7d53 e200929 3fe6297 f0c7d53 718aa48 f0c7d53 d92563e f0c7d53 3fe6297 d92563e f0c7d53 d92563e f0c7d53 e5067a7 f0c7d53 3fe6297 d92563e f0c7d53 d92563e f0c7d53 e5067a7 f0c7d53 3fe6297 d92563e f0c7d53 d92563e f0c7d53 e5067a7 f0c7d53 3fe6297 d92563e f0c7d53 d92563e f0c7d53 e875521 f0c7d53 e5067a7 f0c7d53 e5067a7 f0c7d53 a84172d e200929 f0c7d53 718aa48 f0c7d53 3fe6297 f0c7d53 e875521 f0c7d53 718aa48 f0c7d53 718aa48 |
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 |
<!DOCTYPE html>
<html lang="en" class="bg0 text-fg0 dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MoA Chat</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="/static/style.css" />
</head>
<body class="bg0 text-fg0 transition-colors duration-300">
<div class="main-container flex flex-col p-4">
<header class="flex items-center justify-between mb-4">
<h1 class="text-2xl font-bold">MoA Chat</h1>
<div class="space-x-2 flex items-center">
<button id="toggleConfig" class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition">⚙️</button>
<button id="docsButton" class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition">Docs</button>
<button id="themeToggle" class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition">🌙</button>
</div>
</header>
<div id="configPanel" class="bg1 rounded p-4 mb-4 hidden transition-all duration-500 overflow-hidden max-h-full">
<h2 class="text-lg font-semibold mb-4">Model Selection</h2> <!-- Moved up and margin adjusted -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<!-- Model Zone A -->
<div class="model-zone">
<label class="block mb-1 model-label">LLM-A</label>
<div class="model-name hidden mb-1 font-semibold"></div>
<div id="modelA" class="model-dropdown relative bg-statusline1 text-fg0 rounded p-2 cursor-pointer select-none">
<span class="selected block">Select a model</span>
<div class="options hidden absolute left-0 right-0 mt-2 bg-[#282828] rounded shadow-lg z-10 max-h-60 overflow-y-auto"></div>
</div>
<div id="loaderA" class="loader hidden mt-2 flex justify-center"></div>
</div>
<!-- Model Zone B -->
<div class="model-zone">
<label class="block mb-1 model-label">LLM-B</label>
<div class="model-name hidden mb-1 font-semibold"></div>
<div id="modelB" class="model-dropdown relative bg-statusline1 text-fg0 rounded p-2 cursor-pointer select-none">
<span class="selected block">Select a model</span>
<div class="options hidden absolute left-0 right-0 mt-2 bg-[#282828] rounded shadow-lg z-10 max-h-60 overflow-y-auto"></div>
</div>
<div id="loaderB" class="loader hidden mt-2 flex justify-center"></div>
</div>
<!-- Model Zone C -->
<div class="model-zone">
<label class="block mb-1 model-label">LLM-C</label>
<div class="model-name hidden mb-1 font-semibold"></div>
<div id="modelC" class="model-dropdown relative bg-statusline1 text-fg0 rounded p-2 cursor-pointer select-none">
<span class="selected block">Select a model</span>
<div class="options hidden absolute left-0 right-0 mt-2 bg-[#282828] rounded shadow-lg z-10 max-h-60 overflow-y-auto"></div>
</div>
<div id="loaderC" class="loader hidden mt-2 flex justify-center"></div>
</div>
<!-- Model Zone Aggregator -->
<div class="model-zone">
<label class="block mb-1 model-label">LLM-D (Aggregator)</label>
<div class="model-name hidden mb-1 font-semibold"></div>
<div id="aggregator" class="model-dropdown relative bg-statusline1 text-fg0 rounded p-2 cursor-pointer select-none">
<span class="selected block">Select a model</span>
<div class="options hidden absolute left-0 right-0 mt-2 bg-[#282828] rounded shadow-lg z-10 max-h-60 overflow-y-auto"></div>
</div>
<div id="loaderD" class="loader hidden mt-2 flex justify-center"></div>
</div>
</div>
</div>
<main id="chatContainer" class="flex-1 bg1 p-4 rounded shadow-md">
<!-- Messages (message-wrapper with message-bubble) injected here -->
</main>
<form id="chatForm" class="mt-4 flex">
<input id="userInput" type="text" placeholder="Ask something..."
class="flex-1 px-4 py-2 rounded-l border-none bg-statusline1 text-fg0 placeholder-fg1 focus:outline-none">
<button type="submit" class="px-4 py-2 bg-green text-fg0 rounded-r hover:bg-visual_green transition">Send</button>
</form>
<footer class="text-center mt-6 text-sm opacity-70">
Made with ❤️ in Panamá
</footer>
</div>
<script src="/static/script.js"></script>
</body>
</html>
|