|
<!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-3 py-1 rounded text-fg0 hover:bg-purple transition duration-300" style="background-color: var(--blue) !important; color: var(--fg1) !important; font-weight: 700; letter-spacing: 0.25px;">← Back to Chat</a> |
|
</header> |
|
|
|
<main class="p-8 max-w-6xl w-full flex flex-col space-y-8 items-center text-justify overflow-y-auto mx-auto"> |
|
|
|
<section id="content" class="space-y-8 mt-0"> |
|
<h1 class="text-3xl font-bold text-center pt-4" data-i18n="title">MoA Chat - Documentation</h1> |
|
|
|
<h2 class="text-2xl font-bold border-b-2 pb-2" style="border-color: var(--blue);" data-i18n="what_is_title">📖 What is MoA Chat?</h2> |
|
<p data-i18n="intro"><strong>MoA Chat</strong> is a simple but powerful chat platform where multiple AI models answer the same question at the same time, and an aggregator model combines their outputs into one final answer.</p> |
|
<ul class="list-disc list-inside text-left"> |
|
<li data-i18n="tech_1">Built in <strong>Python 3</strong>.</li> |
|
<li data-i18n="tech_2">Web framework: <strong>Flask</strong>.</li> |
|
<li data-i18n="tech_3">Frontend: HTML, JavaScript, TailwindCSS (optionally removable).</li> |
|
<li data-i18n="tech_4">Designed to work <strong>first on Hugging Face Spaces</strong>, but can also be <strong>self-hosted</strong>.</li> |
|
</ul> |
|
<img src="https://github.com/togethercomputer/MoA/blob/main/assets/moa-explained.png?raw=true" alt="MoA Architecture" class="mx-auto w-full max-w-2xl rounded shadow block" data-i18n-alt="architecture_alt"> |
|
|
|
<h2 class="text-2xl font-bold border-b-2 pb-2" style="border-color: var(--blue);" data-i18n="features_title">⚙️ Features</h2> |
|
<ul class="list-disc list-inside text-left"> |
|
<li data-i18n="feature_1">Send your question once — multiple AI models answer simultaneously.</li> |
|
<li data-i18n="feature_2">Aggregator model (LLM-D) summarizes all responses.</li> |
|
<li data-i18n="feature_3">Fully configurable: choose which models you want to use.</li> |
|
<li data-i18n="feature_4">Modern minimal UI with light/dark theme toggle.</li> |
|
<li data-i18n="feature_5">Spanish/English documentation switch.</li> |
|
<li data-i18n="feature_6"><strong>Free models</strong> supported through <strong>OpenRouter</strong> and others.</li> |
|
<li data-i18n="feature_7"><strong>No API keys exposed</strong> in the frontend (safe backend request).</li> |
|
</ul> |
|
|
|
<h2 class="text-2xl font-bold border-b-2 pb-2" style="border-color: var(--blue);" data-i18n="self_host_title">🛠️ Self Hosting</h2> |
|
<p data-i18n="self_host_intro">You can clone the project like this (includes the Dockerfile for containerization):</p> |
|
<pre class="code-block"><code>git clone https://huggingface.co/spaces/UntilDot/Flask</code></pre> |
|
<h3 data-i18n="requirements_title">Requirements:</h3> |
|
<ul class="list-disc list-inside text-left"> |
|
<li data-i18n="req_1">Python 3.11+</li> |
|
<li data-i18n="req_2">Pip</li> |
|
<li data-i18n="req_3">Create a <code>.env</code> file and add your API keys.</li> |
|
</ul> |
|
<h3 data-i18n="install_title">Install dependencies:</h3> |
|
<pre class="code-block"><code>pip install -r requirements.txt</code></pre> |
|
<h3 data-i18n="run_title">Run locally:</h3> |
|
<pre class="code-block"><code>python app.py</code></pre> |
|
<p data-i18n="port_note">Default port is <strong>7860</strong> (to match Hugging Face standard).</p> |
|
<h3 class="text-xl font-semibold underline" data-i18n="docker_title">🐳 Docker support:</h3> |
|
<p data-i18n="docker_intro">Your repository includes a <code>Dockerfile</code> for easy containerization when you clone it. Here's the content:</p> |
|
<pre class="code-block"><code># Use a slim Python base |
|
FROM python:3.11-slim |
|
|
|
# Set working directory |
|
WORKDIR /app |
|
|
|
# Install dependencies |
|
COPY requirements.txt ./ |
|
RUN pip install --no-cache-dir -r requirements.txt |
|
|
|
# Copy source code |
|
COPY . . |
|
|
|
# Expose the default Hugging Face Spaces port |
|
EXPOSE 7860 |
|
|
|
# Run the app |
|
CMD ["python", "app.py"]</code></pre> |
|
<p data-i18n="docker_alt_option">Alternatively, you can manually create your own <code>Dockerfile</code> with the above content if you prefer to customize it.</p> |
|
<p data-i18n="docker_build">To build and run the Docker container after cloning the repository:</p> |
|
<pre class="code-block"><code>docker build -t moa-chat . |
|
docker run -d -p 7860:7860 --env-file .env moa-chat</code></pre> |
|
<p data-i18n="docker_secrets_note">Docker will NOT automatically inject secrets unless you:</p> |
|
<ul class="list-disc list-inside text-left"> |
|
<li data-i18n="docker_secret_env">Use a <code>.env</code> file with <code>--env-file .env</code></li> |
|
<li data-i18n="docker_secret_manual">Manually use <code>-e VAR=VALUE</code> flags in <code>docker run</code></li> |
|
</ul> |
|
|
|
<h2 class="text-2xl font-bold border-b-2 pb-2" style="border-color: var(--blue);" data-i18n="api_keys_title">🔑 Environment Variables (Secrets)</h2> |
|
<p data-i18n="api_keys_intro">To use this app, you must set your API keys in <strong>secrets</strong> or <strong>environment variables</strong>.</p> |
|
<p data-i18n="api_keys_syntax">Follow this syntax:</p> |
|
<pre class="code-block"><code data-i18n="api_keys_code">OPENROUTER_API_KEY=your-openrouter-key |
|
TOGETHER_API_KEY=your-together-key |
|
GROK_API_KEY=your-grok-key |
|
GROQ_API_KEY=your-groq-key</code></pre> |
|
<p data-i18n="api_keys_location">You can set these in:</p> |
|
<ul class="list-disc list-inside text-left"> |
|
<li data-i18n="api_loc_1">Hugging Face <strong>Secrets</strong> section (recommended if on Spaces)</li> |
|
<li data-i18n="api_loc_2"><code>.env</code> file (only for self-hosting)</li> |
|
</ul> |
|
|
|
<h2 class="text-2xl font-bold border-b-2 pb-2" style="border-color: var(--blue);" data-i18n="add_models_title">🧩 How to Add More Models</h2> |
|
<p data-i18n="add_models_intro">All models and providers are declared inside:</p> |
|
<pre class="code-block"><code>llm/model_config.json</code></pre> |
|
<p data-i18n="add_models_structure">The structure looks like this:</p> |
|
<pre class="code-block"><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 data-i18n="add_models_steps_title"><strong>To add a new model:</strong></p> |
|
<ul class="list-disc list-inside text-left"> |
|
<li data-i18n="add_step_1">Find the right provider (OpenRouter, Together, Grok, Groq, etc).</li> |
|
<li data-i18n="add_step_2">Add its endpoint URL under "providers" if not already listed.</li> |
|
<li data-i18n="add_step_3">Add your model name under "models" section, linking it to the provider.</li> |
|
</ul> |
|
<p data-i18n="add_models_note">Make sure your environment variables (secrets) are correctly configured.</p> |
|
|
|
<h2 class="text-2xl font-bold border-b-2 pb-2" style="border-color: var(--blue);" data-i18n="license_title">🏷️ Licensing</h2> |
|
<p data-i18n="license_text">This project is licensed under <strong>Apache 2.0</strong> — You are free to use, modify, and distribute, even commercially.</p> |
|
|
|
|
|
|
|
<footer class="text-sm opacity-70 pt-8 text-center" data-i18n="footer"> |
|
Made with ❤️ in Panamá<br>by UntilDot |
|
<div class="mt-2 flex justify-center"> |
|
<span class="mx-2">✨</span> |
|
<span class="mx-2">✨</span> |
|
</div> |
|
</footer> |
|
</section> |
|
|
|
</main> |
|
|
|
<script src="/static/docs.js"></script> |
|
|
|
</body> |
|
</html> |
