File size: 5,802 Bytes
0ded64d 9d82f9a b3e498a 9d82f9a b3e498a 9d82f9a b3e498a 9d82f9a b3e498a 9d82f9a b3e498a 9d82f9a b3e498a 9d82f9a b3e498a 9d82f9a b3e498a 9d82f9a b3e498a 9d82f9a b3e498a 9d82f9a b3e498a 9d82f9a b3e498a 9d82f9a b3e498a 9d82f9a b3e498a 9d82f9a b3e498a 9d82f9a 0ded64d |
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 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
<!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>Documentation - 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 flex flex-col items-center min-h-screen p-6">
<header class="w-full flex justify-between items-center max-w-4xl mb-6">
<h1 class="text-3xl font-bold">MoA Chat Documentation</h1>
<button id="themeToggle" class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition">🌙</button>
</header>
<div class="max-w-4xl w-full bg1 rounded p-8 shadow-md">
<section class="mb-10">
<h2 class="text-2xl font-semibold mb-4 text-blue">What is MoA Chat?</h2>
<p class="mb-4 text-lg">
<strong>MoA (Model of Agents)</strong> is a method that allows multiple AI models to collaborate to generate a higher-quality response than a single model could.
</p>
<p class="mb-4">
MoA Chat implements this idea by:
</p>
<ul class="list-disc ml-6 text-lg">
<li>Querying several different models (LLM-A, LLM-B, LLM-C) simultaneously.</li>
<li>Combining their answers using a special model (LLM-D, the aggregator).</li>
<li>Delivering a smart, clear, and polished reply to the user.</li>
</ul>
</section>
<section class="mb-10">
<h2 class="text-2xl font-semibold mb-4 text-blue">How MoA Works (Visual)</h2>
<p class="mb-4 text-center">
<img src="https://raw.githubusercontent.com/togethercomputer/MoA/main/assets/moa-explained.png" alt="MoA Architecture Explained" class="mx-auto rounded shadow-md">
</p>
<p class="text-center text-sm opacity-70">Source: Together Computer, MoA Architecture Overview</p>
</section>
<section class="mb-10">
<h2 class="text-2xl font-semibold mb-4 text-blue">How to Use MoA Chat</h2>
<ol class="list-decimal ml-6 text-lg">
<li>Click ⚙️ to open the model configuration panel.</li>
<li>Select your preferred models for LLM-A, LLM-B, LLM-C, and Aggregator (LLM-D).</li>
<li>Type your message in the chat input box.</li>
<li>Press <strong>Send</strong> and watch the system generate a unified, better answer!</li>
</ol>
</section>
<section class="mb-10">
<h2 class="text-2xl font-semibold mb-4 text-blue">Features</h2>
<ul class="list-disc ml-6 text-lg">
<li>Parallel querying of multiple free and premium LLMs (OpenRouter, Together, Grok, etc.).</li>
<li>Structured system prompts for consistent quality.</li>
<li>Aggregator model intelligently fuses outputs into a coherent final response.</li>
<li>Dynamic Light/Dark Gruvbox Material theme.</li>
<li>Secure: No API keys exposed to frontend.</li>
<li>Minimal, fast, mobile-friendly interface.</li>
</ul>
</section>
<section class="mb-10">
<h2 class="text-2xl font-semibold mb-4 text-blue">Deployment</h2>
<p class="mb-4 text-lg">
MoA Chat is optimized for <strong>Hugging Face Spaces</strong> or any platform supporting Python 3.11+, Flask, and Docker containers.
</p>
<p class="text-lg">
API keys should be stored securely using Hugging Face's <strong>Secrets</strong> system.
</p>
</section>
<section class="mb-10">
<h2 class="text-2xl font-semibold mb-4 text-blue">File Structure</h2>
<ul class="list-disc ml-6 text-lg">
<li><code>app.py</code> — Flask backend server.</li>
<li><code>llm/agents.py</code> — Core querying and aggregation logic.</li>
<li><code>llm/model_config.json</code> — Configures models and providers.</li>
<li><code>templates/</code> — Contains <code>index.html</code> and <code>docs.html</code>.</li>
<li><code>static/</code> — Contains <code>style.css</code> and <code>script.js</code>.</li>
</ul>
</section>
<section class="mb-10">
<h2 class="text-2xl font-semibold mb-4 text-blue">Credits and License</h2>
<p class="mb-4 text-lg">
Inspired by <a href="https://github.com/togethercomputer/MoA" class="text-blue underline hover:text-purple" target="_blank">Together Computer's MoA project</a>.
</p>
<p class="mb-4 text-lg">
This project is based on the concept of collaborative AI agents.
</p>
<p class="text-lg">
Together Computer's original project is licensed under the <strong>Apache 2.0 License</strong>.
</p>
</section>
</div>
<div class="text-center mt-8 space-x-4">
<a href="/" class="px-6 py-2 bg-blue text-fg0 rounded hover:bg-purple transition text-lg font-semibold">← Back to Chat</a>
<a href="https://github.com/togethercomputer/MoA" target="_blank" class="px-6 py-2 bg-blue text-fg0 rounded hover:bg-purple transition text-lg font-semibold">GitHub</a>
</div>
<script>
const themeToggle = document.getElementById("themeToggle");
const html = document.documentElement;
themeToggle.addEventListener("click", () => {
const isDark = html.classList.toggle("dark");
localStorage.setItem("theme", isDark ? "dark" : "light");
themeToggle.textContent = isDark ? "🌙" : "☀️";
});
window.addEventListener("load", () => {
const savedTheme = localStorage.getItem("theme");
if (savedTheme === "dark") {
html.classList.add("dark");
themeToggle.textContent = "🌙";
} else {
html.classList.remove("dark");
themeToggle.textContent = "☀️";
}
});
</script>
</body>
</html>
|