|
|
<!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"> |
|
|
<button |
|
|
id="toggleConfig" |
|
|
class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition" |
|
|
> |
|
|
Config |
|
|
</button> |
|
|
<button |
|
|
id="themeToggle" |
|
|
class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition" |
|
|
> |
|
|
Theme |
|
|
</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-3 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-statusline1 rounded shadow-md 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-statusline1 rounded shadow-md 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-statusline1 rounded shadow-md 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" |
|
|
> |
|
|
|
|
|
</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> |
|
|
</div> |
|
|
|
|
|
<script src="/static/script.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
