File size: 6,637 Bytes
0ded64d 9d82f9a a2aaec2 9d82f9a 1fe15fd 9d82f9a 1fe15fd 9d82f9a 1fe15fd a2aaec2 1fe15fd 9d82f9a a2aaec2 1fe15fd 9d82f9a a2aaec2 9d82f9a 1fe15fd 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 |
<!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">
<!-- Top Fixed Bar -->
<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>
<!-- Scrollable Main Content -->
<main class="flex-1 overflow-y-auto p-6 space-y-8">
<!-- English Section -->
<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>
<!-- Spanish 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>
|