Flask / templates /docs.html
UntilDot's picture
Update templates/docs.html
11cdaee verified
raw
history blame
6.56 kB
<!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>