Update templates/docs.html
Browse files- templates/docs.html +115 -14
templates/docs.html
CHANGED
|
@@ -1,17 +1,118 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html lang="en" class="bg0 text-fg0 dark">
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
<
|
| 14 |
-
<
|
| 15 |
-
|
| 16 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 17 |
</html>
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html lang="en" class="bg0 text-fg0 dark">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Documentation - MoA Chat</title>
|
| 7 |
+
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
| 8 |
+
<link rel="stylesheet" href="/static/style.css" />
|
| 9 |
+
</head>
|
| 10 |
+
<body class="bg0 text-fg0 transition-colors duration-300 flex flex-col items-center min-h-screen p-6">
|
| 11 |
+
|
| 12 |
+
<header class="w-full flex justify-between items-center max-w-4xl mb-6">
|
| 13 |
+
<h1 class="text-3xl font-bold">MoA Chat Documentation</h1>
|
| 14 |
+
<button id="themeToggle" class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition">🌙</button>
|
| 15 |
+
</header>
|
| 16 |
+
|
| 17 |
+
<div class="max-w-4xl w-full bg1 rounded p-8 shadow-md">
|
| 18 |
+
|
| 19 |
+
<section class="mb-10">
|
| 20 |
+
<h2 class="text-2xl font-semibold mb-4 text-blue">What is MoA Chat?</h2>
|
| 21 |
+
<p class="mb-4 text-lg">
|
| 22 |
+
<strong>MoA (Model of Agents)</strong> is a method that lets multiple AI agents (different LLMs) collaborate to generate a higher-quality response than a single model could.
|
| 23 |
+
</p>
|
| 24 |
+
<p class="mb-4">
|
| 25 |
+
MoA Chat implements a simple version of this architecture by:
|
| 26 |
+
</p>
|
| 27 |
+
<ul class="list-disc ml-6 text-lg">
|
| 28 |
+
<li>Querying several different models (LLM-A, LLM-B, LLM-C) at once.</li>
|
| 29 |
+
<li>Combining their answers using another model (LLM-D, the aggregator).</li>
|
| 30 |
+
<li>Delivering a smart, single, structured reply to the user.</li>
|
| 31 |
+
</ul>
|
| 32 |
+
</section>
|
| 33 |
+
|
| 34 |
+
<section class="mb-10">
|
| 35 |
+
<h2 class="text-2xl font-semibold mb-4 text-blue">How MoA Works (Visual)</h2>
|
| 36 |
+
<p class="mb-4 text-center">
|
| 37 |
+
<img src="https://raw.githubusercontent.com/togethercomputer/MoA/main/assets/moa_pipeline.png" alt="MoA Architecture" class="mx-auto rounded shadow-md">
|
| 38 |
+
</p>
|
| 39 |
+
<p class="text-center text-sm opacity-70">Source: Together MoA Architecture Concept</p>
|
| 40 |
+
</section>
|
| 41 |
+
|
| 42 |
+
<section class="mb-10">
|
| 43 |
+
<h2 class="text-2xl font-semibold mb-4 text-blue">How to Use</h2>
|
| 44 |
+
<ol class="list-decimal ml-6 text-lg">
|
| 45 |
+
<li>Click ⚙️ to open the configuration panel.</li>
|
| 46 |
+
<li>Select your preferred models for LLM-A, LLM-B, LLM-C, and Aggregator (LLM-D).</li>
|
| 47 |
+
<li>Type your message in the input box.</li>
|
| 48 |
+
<li>Press <strong>Send</strong>.</li>
|
| 49 |
+
<li>Watch multiple models collaborate for the best response!</li>
|
| 50 |
+
</ol>
|
| 51 |
+
</section>
|
| 52 |
+
|
| 53 |
+
<section class="mb-10">
|
| 54 |
+
<h2 class="text-2xl font-semibold mb-4 text-blue">Features</h2>
|
| 55 |
+
<ul class="list-disc ml-6 text-lg">
|
| 56 |
+
<li>Parallel querying of multiple free or premium models (via OpenRouter, Together, Grok, etc.).</li>
|
| 57 |
+
<li>Structured prompts for each model to encourage quality responses.</li>
|
| 58 |
+
<li>Aggregator model intelligently fuses outputs into one reply.</li>
|
| 59 |
+
<li>Dynamic Light/Dark mode (Gruvbox Material Theme).</li>
|
| 60 |
+
<li>Minimal, fast, and secure frontend with no API keys exposed.</li>
|
| 61 |
+
</ul>
|
| 62 |
+
</section>
|
| 63 |
+
|
| 64 |
+
<section class="mb-10">
|
| 65 |
+
<h2 class="text-2xl font-semibold mb-4 text-blue">Deployment</h2>
|
| 66 |
+
<p class="mb-4 text-lg">
|
| 67 |
+
MoA Chat is optimized to run on <strong>Hugging Face Spaces</strong> or any platform that supports Python 3.11+, Flask, and Docker-based containers.
|
| 68 |
+
</p>
|
| 69 |
+
<p class="text-lg">
|
| 70 |
+
Requires setting your API keys via Hugging Face's Secrets system (never expose them to the frontend).
|
| 71 |
+
</p>
|
| 72 |
+
</section>
|
| 73 |
+
|
| 74 |
+
<section class="mb-10">
|
| 75 |
+
<h2 class="text-2xl font-semibold mb-4 text-blue">File Structure</h2>
|
| 76 |
+
<ul class="list-disc ml-6 text-lg">
|
| 77 |
+
<li><code>app.py</code> — Flask backend server.</li>
|
| 78 |
+
<li><code>llm/agents.py</code> — Query and aggregation logic for MoA system.</li>
|
| 79 |
+
<li><code>llm/model_config.json</code> — Define available models and providers.</li>
|
| 80 |
+
<li><code>templates/</code> — Contains <code>index.html</code> and <code>docs.html</code>.</li>
|
| 81 |
+
<li><code>static/</code> — Contains <code>style.css</code> and <code>script.js</code>.</li>
|
| 82 |
+
</ul>
|
| 83 |
+
</section>
|
| 84 |
+
|
| 85 |
+
<section class="mb-10">
|
| 86 |
+
<h2 class="text-2xl font-semibold mb-4 text-blue">Credits</h2>
|
| 87 |
+
<p class="text-lg">Made with ❤️ in Panamá by Until Dot. Inspired by Together's MoA architecture.</p>
|
| 88 |
+
</section>
|
| 89 |
+
|
| 90 |
+
</div>
|
| 91 |
+
|
| 92 |
+
<div class="text-center mt-8">
|
| 93 |
+
<a href="/" class="px-6 py-2 bg-blue text-fg0 rounded hover:bg-purple transition text-lg font-semibold">← Back to Chat</a>
|
| 94 |
+
</div>
|
| 95 |
+
|
| 96 |
+
<script>
|
| 97 |
+
const themeToggle = document.getElementById("themeToggle");
|
| 98 |
+
const html = document.documentElement;
|
| 99 |
+
themeToggle.addEventListener("click", () => {
|
| 100 |
+
const isDark = html.classList.toggle("dark");
|
| 101 |
+
localStorage.setItem("theme", isDark ? "dark" : "light");
|
| 102 |
+
themeToggle.textContent = isDark ? "🌙" : "☀️";
|
| 103 |
+
});
|
| 104 |
+
|
| 105 |
+
window.addEventListener("load", () => {
|
| 106 |
+
const savedTheme = localStorage.getItem("theme");
|
| 107 |
+
if (savedTheme === "dark") {
|
| 108 |
+
html.classList.add("dark");
|
| 109 |
+
themeToggle.textContent = "🌙";
|
| 110 |
+
} else {
|
| 111 |
+
html.classList.remove("dark");
|
| 112 |
+
themeToggle.textContent = "☀️";
|
| 113 |
+
}
|
| 114 |
+
});
|
| 115 |
+
</script>
|
| 116 |
+
|
| 117 |
+
</body>
|
| 118 |
</html>
|