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