File size: 4,470 Bytes
e5067a7 718aa48 f0c7d53 3fe6297 f0c7d53 718aa48 f0c7d53 3fe6297 f0c7d53 e5067a7 f0c7d53 3fe6297 f0c7d53 e5067a7 f0c7d53 3fe6297 f0c7d53 e5067a7 f0c7d53 3fe6297 f0c7d53 e875521 f0c7d53 e5067a7 f0c7d53 e5067a7 f0c7d53 a84172d 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 |
<!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="min-h-screen flex flex-col justify-between 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-2">Model Selection</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="model-zone">
<label class="block mb-1 model-label">LLM-A</label>
<div class="model-name hidden mb-1 font-semibold"></div> <!-- inserted -->
<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>
<div class="model-zone">
<label class="block mb-1 model-label">LLM-B</label>
<div class="model-name hidden mb-1 font-semibold"></div> <!-- inserted -->
<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>
<div class="model-zone">
<label class="block mb-1 model-label">LLM-C</label>
<div class="model-name hidden mb-1 font-semibold"></div> <!-- inserted -->
<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>
<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> <!-- inserted -->
<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 overflow-y-auto bg1 p-4 rounded shadow-md space-y-4">
<!-- Messages 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>
|