|
<!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"> |
|
|
|
<header class="w-full flex justify-between p-4"> |
|
<div class="flex space-x-2"> |
|
<button id="themeToggle" class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition">🌙</button> |
|
<button id="langToggle" class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition">🌐</button> |
|
</div> |
|
<a href="/" class="bg-blue px-4 py-1 rounded text-fg0 hover:bg-purple transition">← Back to Chat</a> |
|
</header> |
|
|
|
<main class="p-8 max-w-4xl w-full flex flex-col space-y-8 items-center text-center overflow-y-auto"> |
|
|
|
<section id="en" class="space-y-8"> |
|
<h1 class="text-3xl font-bold">MoA Chat - Documentation</h1> |
|
|
|
<p><strong>MoA Chat</strong> is an experimental project inspired by the MoA (Mixture of Agents) technique where multiple AI models collaborate to produce better answers.</p> |
|
|
|
<img src="https://github.com/togethercomputer/MoA/blob/main/assets/moa-explained.png?raw=true" alt="MoA Architecture" class="w-full max-w-2xl rounded shadow"> |
|
|
|
<h2 class="text-2xl font-semibold">🚀 Features</h2> |
|
<ul class="list-disc list-inside text-left"> |
|
<li>Connects multiple LLMs simultaneously</li> |
|
<li>Uses a fourth LLM as an aggregator</li> |
|
<li>Fully open source and self-hostable</li> |
|
<li>Built using Python and Flask</li> |
|
<li>Deployed easily on Hugging Face Spaces</li> |
|
</ul> |
|
|
|
<h2 class="text-2xl font-semibold">⚙️ How to Self-Host</h2> |
|
<p>To clone this project and run it manually:</p> |
|
<pre><code>git clone https://huggingface.co/spaces/UntilDot/Flask |
|
cd Flask |
|
python3 -m venv venv |
|
source venv/bin/activate |
|
pip install -r requirements.txt |
|
python app.py</code></pre> |
|
|
|
<p>If you wish to use Docker (advanced users):</p> |
|
<pre><code>docker build -t moa-chat . |
|
docker run -d -p 7860:7860 --env-file .env moa-chat</code></pre> |
|
|
|
<h2 class="text-2xl font-semibold">🔑 API Keys</h2> |
|
<p>The system uses secrets for security. You must define these keys in your Hugging Face Space settings or your .env file:</p> |
|
<pre><code>OPENROUTER_API_KEY=your-openrouter-key |
|
GROK_API_KEY=your-grok-key |
|
TOGETHER_API_KEY=your-together-key |
|
GROQ_API_KEY=your-groq-key</code></pre> |
|
|
|
<h2 class="text-2xl font-semibold">🛠️ Adding More Models</h2> |
|
<p>To add new models, edit <code>llm/model_config.json</code> like this:</p> |
|
<pre><code>{ |
|
"providers": { |
|
"openrouter": { |
|
"url": "https://openrouter.ai/api/v1/chat/completions", |
|
"key_env": "OPENROUTER_API_KEY" |
|
} |
|
}, |
|
"models": { |
|
"deepseek/deepseek-chat-v3-0324:free": "openrouter" |
|
} |
|
}</code></pre> |
|
|
|
<p>Each model must point to a provider. Each provider defines its own endpoint and required secret.</p> |
|
|
|
<h2 class="text-2xl font-semibold">📖 License</h2> |
|
<p>This project is licensed under <strong>Apache 2.0</strong>.</p> |
|
|
|
<footer class="text-sm opacity-70 pt-8"> |
|
Made with ❤️ in Panamá |
|
</footer> |
|
</section> |
|
|
|
<section id="es" class="space-y-8 hidden"> |
|
<h1 class="text-3xl font-bold">MoA Chat - Documentación</h1> |
|
|
|
<p><strong>MoA Chat</strong> es un proyecto experimental inspirado en la técnica MoA (Mixture of Agents), donde varios modelos de IA colaboran para generar mejores respuestas.</p> |
|
|
|
<img src="https://github.com/togethercomputer/MoA/blob/main/assets/moa-explained.png?raw=true" alt="Arquitectura MoA" class="w-full max-w-2xl rounded shadow"> |
|
|
|
<h2 class="text-2xl font-semibold">🚀 Características</h2> |
|
<ul class="list-disc list-inside text-left"> |
|
<li>Conecta múltiples LLMs simultáneamente</li> |
|
<li>Utiliza un cuarto LLM como agregador</li> |
|
<li>Completamente open source y autohospedable</li> |
|
<li>Construido con Python y Flask</li> |
|
<li>Desplegado fácilmente en Hugging Face Spaces</li> |
|
</ul> |
|
|
|
<h2 class="text-2xl font-semibold">⚙️ Cómo Autohospedar</h2> |
|
<p>Para clonar y ejecutar este proyecto manualmente:</p> |
|
<pre><code>git clone https://huggingface.co/spaces/UntilDot/Flask |
|
cd Flask |
|
python3 -m venv venv |
|
source venv/bin/activate |
|
pip install -r requirements.txt |
|
python app.py</code></pre> |
|
|
|
<p>O si deseas usar Docker (usuarios avanzados):</p> |
|
<pre><code>docker build -t moa-chat . |
|
docker run -d -p 7860:7860 --env-file .env moa-chat</code></pre> |
|
|
|
<h2 class="text-2xl font-semibold">🔑 Llaves API</h2> |
|
<p>Debes definir las llaves API en la configuración del espacio o en tu archivo <code>.env</code>:</p> |
|
<pre><code>OPENROUTER_API_KEY=tu-clave-openrouter |
|
GROK_API_KEY=tu-clave-grok |
|
TOGETHER_API_KEY=tu-clave-together |
|
GROQ_API_KEY=tu-clave-groq</code></pre> |
|
|
|
<h2 class="text-2xl font-semibold">🛠️ Agregar Modelos</h2> |
|
<p>Para agregar modelos, edita <code>llm/model_config.json</code> así:</p> |
|
<pre><code>{ |
|
"providers": { |
|
"openrouter": { |
|
"url": "https://openrouter.ai/api/v1/chat/completions", |
|
"key_env": "OPENROUTER_API_KEY" |
|
} |
|
}, |
|
"models": { |
|
"deepseek/deepseek-chat-v3-0324:free": "openrouter" |
|
} |
|
}</code></pre> |
|
|
|
<p>Cada modelo debe apuntar a un proveedor que define el endpoint y la clave secreta necesaria.</p> |
|
|
|
<h2 class="text-2xl font-semibold">📖 Licencia</h2> |
|
<p>Este proyecto está licenciado bajo <strong>Apache 2.0</strong>.</p> |
|
|
|
<footer class="text-sm opacity-70 pt-8"> |
|
Hecho con ❤️ en Panamá |
|
</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> |
|
|