Update templates/docs.html

templates/docs.html

@@ -14,110 +14,97 @@
       <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>
+    <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-4xl w-full flex flex-col space-y-8 items-center text-center overflow-y-auto">
+  <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="en" class="space-y-8">
-      <h1 class="text-3xl font-bold">MoA Chat - Documentation</h1>
+    <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>
 
-      <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-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-semibold">🚀 Features</h2>
+      <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>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>
+        <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-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 .
+      <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-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
+      <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>
-
-      <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>
+      <p data-i18n="api_keys_location">You can set these in:</p>
       <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>
+        <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-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>{
+      <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",
@@ -128,34 +115,31 @@ GROQ_API_KEY=tu-clave-groq</code></pre>
     "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>
 
-      <p>Cada modelo debe apuntar a un proveedor que define el endpoint y la clave secreta necesaria.</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>
 
-      <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 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>
-    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>
+  <script src="/static/docs.js"></script>
 
 </body>
-</html>
+</html>