File size: 8,547 Bytes
0ded64d 9d82f9a a2aaec2 9d82f9a 11cdaee 1fe15fd acbdb83 1fe15fd 9d82f9a acbdb83 11cdaee acbdb83 11cdaee acbdb83 11cdaee acbdb83 11cdaee acbdb83 11cdaee acbdb83 11cdaee acbdb83 11cdaee acbdb83 0aed15a acbdb83 0aed15a acbdb83 11cdaee acbdb83 11cdaee acbdb83 11cdaee acbdb83 11cdaee acbdb83 11cdaee acbdb83 11cdaee acbdb83 11cdaee a2aaec2 9d82f9a acbdb83 9d82f9a acbdb83 |
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 |
<!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> |