|
<!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> |
|
|
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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"> |
|
|
|
</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> |
|
|
