|
|
<!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"> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
const themeToggle = document.getElementById('themeToggle'); |
|
|
themeToggle.addEventListener('click', () => { |
|
|
document.documentElement.classList.toggle('dark'); |
|
|
themeToggle.textContent = document.documentElement.classList.contains('dark') ? '🌙' : '☀️'; |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
|
|
|
