File size: 3,742 Bytes
e5067a7 718aa48 e5067a7 3fe6297 e5067a7 e875521 e5067a7 718aa48 e5067a7 e875521 3fe6297 e5067a7 4e7077c e5067a7 3fe6297 e5067a7 4e7077c e5067a7 3fe6297 e5067a7 4e7077c a84172d e5067a7 3fe6297 e875521 e5067a7 a84172d e5067a7 718aa48 e5067a7 3fe6297 e875521 a826bc4 e875521 e5067a7 718aa48 e5067a7 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 |
<!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">
<h2 class="text-lg font-semibold mb-2">Model Selection</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<label class="block mb-1">LLM-A</label>
<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>
<div>
<label class="block mb-1">LLM-B</label>
<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>
<div>
<label class="block mb-1">LLM-C</label>
<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>
<div>
<label class="block mb-1">Aggregator</label>
<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>
</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 Panama
</footer>
</div>
<script src="/static/script.js"></script>
</body>
</html>
|