|
|
<!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 min-h-screen"> |
|
|
|
|
|
|
|
|
<header class="flex items-center justify-between p-4 bg1 shadow-md sticky top-0 z-50"> |
|
|
<h1 class="text-2xl font-bold">Documentation</h1> |
|
|
<div class="space-x-2 flex items-center"> |
|
|
<a href="/" id="chatButton" class="px-3 py-1 rounded bg-blue hover:bg-purple text-fg0 transition">← Chat</a> |
|
|
<button id="langToggle" class="px-3 py-1 rounded bg-blue hover:bg-purple text-fg0 transition">🌐</button> |
|
|
<button id="themeToggle" class="px-3 py-1 rounded bg-blue hover:bg-purple text-fg0 transition">🌙</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6 space-y-8"> |
|
|
|
|
|
|
|
|
<section id="en" class="space-y-8"> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<h2 class="text-xl font-semibold">What is MoA Chat?</h2> |
|
|
<p> |
|
|
MoA Chat is a minimalistic and modern multi-model AI chat platform based on the "Mixture of Agents" (MoA) architecture. |
|
|
It allows you to query multiple language models (LLMs) simultaneously, and combine their responses into a final answer. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<h2 class="text-xl font-semibold">How It Works</h2> |
|
|
<img src="https://github.com/togethercomputer/MoA/raw/main/assets/moa-explained.png" alt="MoA System Architecture" class="rounded shadow-lg"> |
|
|
<p> |
|
|
Each conversation consists of three AI models (LLM-A, LLM-B, LLM-C) answering separately based on a structured system prompt, |
|
|
and one aggregator model (LLM-D) combining their outputs into a high-quality final response. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<h2 class="text-xl font-semibold">Features</h2> |
|
|
<ul class="list-disc list-inside space-y-2"> |
|
|
<li>🔹 Minimal, fast, fully responsive UI.</li> |
|
|
<li>🔹 Supports any OpenRouter, Groq, Together AI, or Grok model easily.</li> |
|
|
<li>🔹 Auto-theme (light/dark) detection based on your device.</li> |
|
|
<li>🔹 Smooth animations and Gruvbox Material palette.</li> |
|
|
<li>🔹 Self-hostable without any hidden costs.</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<h2 class="text-xl font-semibold">How to Self-Host</h2> |
|
|
<p>1. Deploy to Hugging Face Spaces (Docker).</p> |
|
|
<p>2. Add your API keys under "Secrets" (OPENROUTER_API_KEY, GROK_API_KEY, etc).</p> |
|
|
<p>3. Configure `llm/model_config.json` to add new providers or models.</p> |
|
|
<p>4. That's it! No database required.</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<h2 class="text-xl font-semibold">Adding Models</h2> |
|
|
<p> |
|
|
To add new models, simply update the <code>llm/model_config.json</code> file by mapping model names to providers. |
|
|
No backend changes are needed — the app automatically pulls from the updated list. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<h2 class="text-xl font-semibold">License</h2> |
|
|
<p>This project is licensed under the <strong>AGPLv3</strong>. |
|
|
Fully free, fully open-source, no restrictions.</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<h2 class="text-xl font-semibold">Credits</h2> |
|
|
<p>Inspired by <a href="https://github.com/togethercomputer/MoA" class="text-blue underline hover:text-purple" target="_blank">Together MoA</a> and built with ❤️ in Panamá.</p> |
|
|
</div> |
|
|
|
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="es" class="space-y-8 hidden"> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<h2 class="text-xl font-semibold">¿Qué es MoA Chat?</h2> |
|
|
<p> |
|
|
MoA Chat es una plataforma de chat de IA moderna y minimalista basada en la arquitectura "Mixture of Agents" (MoA). |
|
|
Permite consultar múltiples modelos de lenguaje (LLMs) al mismo tiempo y combinar sus respuestas en una sola. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<h2 class="text-xl font-semibold">¿Cómo Funciona?</h2> |
|
|
<img src="https://github.com/togethercomputer/MoA/raw/main/assets/moa-explained.png" alt="Arquitectura MoA" class="rounded shadow-lg"> |
|
|
<p> |
|
|
Cada conversación involucra tres modelos de IA (LLM-A, LLM-B, LLM-C) respondiendo por separado con un prompt estructurado, |
|
|
y un modelo agregador (LLM-D) que combina las respuestas en una final de alta calidad. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<h2 class="text-xl font-semibold">Características</h2> |
|
|
<ul class="list-disc list-inside space-y-2"> |
|
|
<li>🔹 UI rápida, minimalista y adaptable.</li> |
|
|
<li>🔹 Soporte para OpenRouter, Groq, Together AI, Grok.</li> |
|
|
<li>🔹 Cambio automático de tema claro/oscuro.</li> |
|
|
<li>🔹 Animaciones suaves y paleta Gruvbox Material.</li> |
|
|
<li>🔹 100% autohospedable.</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<h2 class="text-xl font-semibold">Cómo Autohospedarlo</h2> |
|
|
<p>1. Despliega en Hugging Face Spaces (Docker).</p> |
|
|
<p>2. Agrega tus llaves API en "Secrets" (OPENROUTER_API_KEY, GROK_API_KEY, etc).</p> |
|
|
<p>3. Configura <code>llm/model_config.json</code> para agregar modelos o proveedores.</p> |
|
|
<p>4. ¡Listo! No requiere base de datos.</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<h2 class="text-xl font-semibold">Agregar Modelos</h2> |
|
|
<p> |
|
|
Para agregar nuevos modelos, solo edita <code>llm/model_config.json</code>. |
|
|
La app actualizará las opciones automáticamente. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<h2 class="text-xl font-semibold">Licencia</h2> |
|
|
<p>Este proyecto usa la licencia <strong>AGPLv3</strong>.</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<h2 class="text-xl font-semibold">Créditos</h2> |
|
|
<p>Inspirado en <a href="https://github.com/togethercomputer/MoA" class="text-blue underline hover:text-purple" target="_blank">Together MoA</a> y construido con ❤️ en Panamá.</p> |
|
|
</div> |
|
|
|
|
|
</section> |
|
|
|
|
|
</main> |
|
|
|
|
|
<script src="/static/docs.js"></script> |
|
|
|
|
|
</body> |
|
|
</html> |
|
|
|
