File size: 6,622 Bytes
0ded64d 9d82f9a a2aaec2 9d82f9a a2aaec2 9d82f9a a2aaec2 9d82f9a a2aaec2 9d82f9a a2aaec2 9d82f9a a2aaec2 9d82f9a a2aaec2 9d82f9a a2aaec2 9d82f9a a2aaec2 9d82f9a a2aaec2 9d82f9a a2aaec2 9d82f9a a2aaec2 9d82f9a a2aaec2 b3e498a a2aaec2 b3e498a a2aaec2 b3e498a 9d82f9a a2aaec2 9d82f9a a2aaec2 9d82f9a a2aaec2 9d82f9a a2aaec2 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 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 |
<!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" />
<style>
.sticky-buttons {
position: fixed;
top: 1rem;
right: 1rem;
display: flex;
gap: 0.5rem;
z-index: 1000;
}
.sticky-buttons button {
padding: 0.5rem 0.75rem;
background-color: var(--blue);
color: var(--fg1);
border: none;
border-radius: 0.375rem;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
}
.sticky-buttons button:hover {
background-color: var(--purple);
color: var(--fg0);
}
</style>
</head>
<body class="bg0 text-fg0 transition-colors duration-300">
<div class="sticky-buttons">
<button id="themeToggle">🌙</button>
<a href="/" class="px-3 py-2 bg-blue text-fg0 rounded hover:bg-purple transition text-center">← Chat</a>
<button id="langToggle">🇬🇧/🇪🇸</button>
</div>
<main class="flex flex-col items-center p-6 space-y-6 max-w-4xl mx-auto">
<!-- English Section -->
<section id="en" lang="en">
<h1 class="text-3xl font-bold mb-6">MoA Chat Documentation</h1>
<p class="text-lg mb-4">
MoA Chat is a multi-agent AI system where several AI models answer a prompt independently, and a fourth model (the Aggregator) synthesizes their responses into a final answer.
</p>
<img src="https://raw.githubusercontent.com/togethercomputer/MoA/main/assets/moa-explained.png" alt="MoA Diagram" class="rounded shadow mb-6">
<h2 class="text-2xl font-semibold mt-6 mb-2">How it Works</h2>
<ul class="list-disc list-inside mb-6">
<li>LLM-A, LLM-B, and LLM-C receive your prompt and answer independently.</li>
<li>LLM-D (Aggregator) combines their answers into one final response.</li>
</ul>
<h2 class="text-2xl font-semibold mt-6 mb-2">How to Self-Host</h2>
<ol class="list-decimal list-inside mb-6 space-y-2">
<li>Clone the repository.</li>
<li>Create a `.env` file with your API keys (OpenRouter, Together, Grok, etc.).</li>
<li>Edit `llm/model_config.json` to configure providers and models.</li>
<li>Run the app:
<pre class="bg-statusline1 rounded p-3 mt-2 overflow-x-auto">pip install -r requirements.txt
python app.py</pre>
</li>
<li>Deploy to Hugging Face Spaces if you prefer (using Docker or Python template).</li>
</ol>
<h2 class="text-2xl font-semibold mt-6 mb-2">Adding More Models</h2>
<p class="mb-4">
To add models, simply edit `llm/model_config.json`.
Example:
</p>
<pre class="bg-statusline1 rounded p-3 overflow-x-auto">
"models": {
"newmodel/awesome-13b": "openrouter",
"another/model-v2": "together"
}
</pre>
<h2 class="text-2xl font-semibold mt-6 mb-2">License</h2>
<p class="mb-2">
This project is licensed under the GNU Affero General Public License v3.0 (AGPLv3).
</p>
<p class="mb-6 text-sm opacity-70">
You are free to use, modify, and share this project as long as you also make your changes available under the same license.
</p>
<footer class="text-center text-sm opacity-70">
Made with ❤️ in Panamá • Powered by Open Source
</footer>
</section>
<!-- Spanish Section -->
<section id="es" lang="es" class="hidden">
<h1 class="text-3xl font-bold mb-6">Documentación de MoA Chat</h1>
<p class="text-lg mb-4">
MoA Chat es un sistema de múltiples agentes donde varios modelos de IA responden a una solicitud de forma independiente, y un cuarto modelo (el Agregador) sintetiza sus respuestas en una sola.
</p>
<img src="https://raw.githubusercontent.com/togethercomputer/MoA/main/assets/moa-explained.png" alt="Diagrama MoA" class="rounded shadow mb-6">
<h2 class="text-2xl font-semibold mt-6 mb-2">Cómo Funciona</h2>
<ul class="list-disc list-inside mb-6">
<li>LLM-A, LLM-B y LLM-C reciben tu pregunta y responden de forma independiente.</li>
<li>LLM-D (Agregador) combina esas respuestas en una sola.</li>
</ul>
<h2 class="text-2xl font-semibold mt-6 mb-2">Cómo Autoalojar</h2>
<ol class="list-decimal list-inside mb-6 space-y-2">
<li>Clona el repositorio.</li>
<li>Crea un archivo `.env` con tus claves API (OpenRouter, Together, Grok, etc.).</li>
<li>Edita `llm/model_config.json` para configurar proveedores y modelos.</li>
<li>Ejecuta:
<pre class="bg-statusline1 rounded p-3 mt-2 overflow-x-auto">pip install -r requirements.txt
python app.py</pre>
</li>
<li>O despliega en Hugging Face Spaces si prefieres.</li>
</ol>
<h2 class="text-2xl font-semibold mt-6 mb-2">Agregar Más Modelos</h2>
<p class="mb-4">
Para agregar modelos, simplemente edita `llm/model_config.json`.
Ejemplo:
</p>
<pre class="bg-statusline1 rounded p-3 overflow-x-auto">
"models": {
"newmodel/awesome-13b": "openrouter",
"another/model-v2": "together"
}
</pre>
<h2 class="text-2xl font-semibold mt-6 mb-2">Licencia</h2>
<p class="mb-2">
Este proyecto está licenciado bajo la Licencia Pública General Affero de GNU v3.0 (AGPLv3).
</p>
<p class="mb-6 text-sm opacity-70">
Puedes usar, modificar y compartir este proyecto siempre que también compartas tus cambios bajo la misma licencia.
</p>
<footer class="text-center text-sm opacity-70">
Hecho con ❤️ en Panamá • Impulsado por Software Libre
</footer>
</section>
</main>
<script>
// === Theme Toggle ===
const themeToggle = document.getElementById('themeToggle');
themeToggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
themeToggle.textContent = document.documentElement.classList.contains('dark') ? '🌙' : '☀️';
});
// === Language Toggle ===
const langToggle = document.getElementById('langToggle');
const en = document.getElementById('en');
const es = document.getElementById('es');
langToggle.addEventListener('click', () => {
en.classList.toggle('hidden');
es.classList.toggle('hidden');
});
</script>
</body>
</html>
|