Spaces:

UntilDot
/

Flask

Running

App Files Files Community

UntilDot commited on 4 days ago

Commit

a2aaec2

verified ·

1 Parent(s): b3e498a

Update templates/docs.html

Browse files

Files changed (1) hide show

templates/docs.html +139 -90

templates/docs.html CHANGED Viewed

@@ -1,125 +1,174 @@
 <!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 p-6">
-  <header class="w-full flex justify-between items-center max-w-4xl mb-6">
-    <h1 class="text-3xl font-bold">MoA Chat Documentation</h1>
-    <button id="themeToggle" class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition">🌙</button>
-  </header>
-  <div class="max-w-4xl w-full bg1 rounded p-8 shadow-md">
-    <section class="mb-10">
-      <h2 class="text-2xl font-semibold mb-4 text-blue">What is MoA Chat?</h2>
-      <p class="mb-4 text-lg">
-        <strong>MoA (Model of Agents)</strong> is a method that allows multiple AI models to collaborate to generate a higher-quality response than a single model could.
       </p>
       <p class="mb-4">
-        MoA Chat implements this idea by:
       </p>
-      <ul class="list-disc ml-6 text-lg">
-        <li>Querying several different models (LLM-A, LLM-B, LLM-C) simultaneously.</li>
-        <li>Combining their answers using a special model (LLM-D, the aggregator).</li>
-        <li>Delivering a smart, clear, and polished reply to the user.</li>
-      </ul>
-    </section>
-    <section class="mb-10">
-      <h2 class="text-2xl font-semibold mb-4 text-blue">How MoA Works (Visual)</h2>
-      <p class="mb-4 text-center">
-        <img src="https://raw.githubusercontent.com/togethercomputer/MoA/main/assets/moa-explained.png" alt="MoA Architecture Explained" class="mx-auto rounded shadow-md">
       </p>
-      <p class="text-center text-sm opacity-70">Source: Together Computer, MoA Architecture Overview</p>
-    </section>
-    <section class="mb-10">
-      <h2 class="text-2xl font-semibold mb-4 text-blue">How to Use MoA Chat</h2>
-      <ol class="list-decimal ml-6 text-lg">
-        <li>Click ⚙️ to open the model configuration panel.</li>
-        <li>Select your preferred models for LLM-A, LLM-B, LLM-C, and Aggregator (LLM-D).</li>
-        <li>Type your message in the chat input box.</li>
-        <li>Press <strong>Send</strong> and watch the system generate a unified, better answer!</li>
-      </ol>
-    </section>
-    <section class="mb-10">
-      <h2 class="text-2xl font-semibold mb-4 text-blue">Features</h2>
-      <ul class="list-disc ml-6 text-lg">
-        <li>Parallel querying of multiple free and premium LLMs (OpenRouter, Together, Grok, etc.).</li>
-        <li>Structured system prompts for consistent quality.</li>
-        <li>Aggregator model intelligently fuses outputs into a coherent final response.</li>
-        <li>Dynamic Light/Dark Gruvbox Material theme.</li>
-        <li>Secure: No API keys exposed to frontend.</li>
-        <li>Minimal, fast, mobile-friendly interface.</li>
-      </ul>
     </section>
-    <section class="mb-10">
-      <h2 class="text-2xl font-semibold mb-4 text-blue">Deployment</h2>
-      <p class="mb-4 text-lg">
-        MoA Chat is optimized for <strong>Hugging Face Spaces</strong> or any platform supporting Python 3.11+, Flask, and Docker containers.
-      </p>
-      <p class="text-lg">
-        API keys should be stored securely using Hugging Face's <strong>Secrets</strong> system.
       </p>
-    </section>
-    <section class="mb-10">
-      <h2 class="text-2xl font-semibold mb-4 text-blue">File Structure</h2>
-      <ul class="list-disc ml-6 text-lg">
-        <li><code>app.py</code> — Flask backend server.</li>
-        <li><code>llm/agents.py</code> — Core querying and aggregation logic.</li>
-        <li><code>llm/model_config.json</code> — Configures models and providers.</li>
-        <li><code>templates/</code> — Contains <code>index.html</code> and <code>docs.html</code>.</li>
-        <li><code>static/</code> — Contains <code>style.css</code> and <code>script.js</code>.</li>
       </ul>
-    </section>
-    <section class="mb-10">
-      <h2 class="text-2xl font-semibold mb-4 text-blue">Credits and License</h2>
-      <p class="mb-4 text-lg">
-        Inspired by <a href="https://github.com/togethercomputer/MoA" class="text-blue underline hover:text-purple" target="_blank">Together Computer's MoA project</a>.
       </p>
-      <p class="mb-4 text-lg">
-        This project is based on the concept of collaborative AI agents.
       </p>
-      <p class="text-lg">
-        Together Computer's original project is licensed under the <strong>Apache 2.0 License</strong>.
       </p>
-    </section>
-  </div>
-  <div class="text-center mt-8 space-x-4">
-    <a href="/" class="px-6 py-2 bg-blue text-fg0 rounded hover:bg-purple transition text-lg font-semibold">← Back to Chat</a>
-    <a href="https://github.com/togethercomputer/MoA" target="_blank" class="px-6 py-2 bg-blue text-fg0 rounded hover:bg-purple transition text-lg font-semibold">GitHub</a>
-  </div>
   <script>
-    const themeToggle = document.getElementById("themeToggle");
-    const html = document.documentElement;
-    themeToggle.addEventListener("click", () => {
-      const isDark = html.classList.toggle("dark");
-      localStorage.setItem("theme", isDark ? "dark" : "light");
-      themeToggle.textContent = isDark ? "🌙" : "☀️";
     });
-    window.addEventListener("load", () => {
-      const savedTheme = localStorage.getItem("theme");
-      if (savedTheme === "dark") {
-        html.classList.add("dark");
-        themeToggle.textContent = "🌙";
-      } else {
-        html.classList.remove("dark");
-        themeToggle.textContent = "☀️";
-      }
     });
   </script>

 <!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" />
+  <style>
+    .sticky-buttons {
+      position: fixed;
+      top: 1rem;
+      right: 1rem;
+      display: flex;
+      gap: 0.5rem;
+      z-index: 1000;
+    }
+    .sticky-buttons button {
+      padding: 0.5rem 0.75rem;
+      background-color: var(--blue);
+      color: var(--fg1);
+      border: none;
+      border-radius: 0.375rem;
+      font-weight: bold;
+      cursor: pointer;
+      transition: background-color 0.3s;
+    }
+    .sticky-buttons button:hover {
+      background-color: var(--purple);
+      color: var(--fg0);
+    }
+  </style>
 </head>
+<body class="bg0 text-fg0 transition-colors duration-300">
+  <div class="sticky-buttons">
+    <button id="themeToggle">🌙</button>
+    <a href="/" class="px-3 py-2 bg-blue text-fg0 rounded hover:bg-purple transition text-center">← Chat</a>
+    <button id="langToggle">🇬🇧/🇪🇸</button>
+  </div>
+  <main class="flex flex-col items-center p-6 space-y-6 max-w-4xl mx-auto">
+    <!-- English Section -->
+    <section id="en" lang="en">
+      <h1 class="text-3xl font-bold mb-6">MoA Chat Documentation</h1>
+      <p class="text-lg mb-4">
+        MoA Chat is a multi-agent AI system where several AI models answer a prompt independently, and a fourth model (the Aggregator) synthesizes their responses into a final answer.
       </p>
+      <img src="https://raw.githubusercontent.com/togethercomputer/MoA/main/assets/moa-explained.png" alt="MoA Diagram" class="rounded shadow mb-6">
+      <h2 class="text-2xl font-semibold mt-6 mb-2">How it Works</h2>
+      <ul class="list-disc list-inside mb-6">
+        <li>LLM-A, LLM-B, and LLM-C receive your prompt and answer independently.</li>
+        <li>LLM-D (Aggregator) combines their answers into one final response.</li>
+      </ul>
+      <h2 class="text-2xl font-semibold mt-6 mb-2">How to Self-Host</h2>
+      <ol class="list-decimal list-inside mb-6 space-y-2">
+        <li>Clone the repository.</li>
+        <li>Create a `.env` file with your API keys (OpenRouter, Together, Grok, etc.).</li>
+        <li>Edit `llm/model_config.json` to configure providers and models.</li>
+        <li>Run the app:
+          <pre class="bg-statusline1 rounded p-3 mt-2 overflow-x-auto">pip install -r requirements.txt
+python app.py</pre>
+        </li>
+        <li>Deploy to Hugging Face Spaces if you prefer (using Docker or Python template).</li>
+      </ol>
+      <h2 class="text-2xl font-semibold mt-6 mb-2">Adding More Models</h2>
       <p class="mb-4">
+        To add models, simply edit `llm/model_config.json`.
+        Example:
       </p>
+      <pre class="bg-statusline1 rounded p-3 overflow-x-auto">
+"models": {
+  "newmodel/awesome-13b": "openrouter",
+  "another/model-v2": "together"
+}
+      </pre>
+      <h2 class="text-2xl font-semibold mt-6 mb-2">License</h2>
+      <p class="mb-2">
+        This project is licensed under the GNU Affero General Public License v3.0 (AGPLv3).
+      </p>
+      <p class="mb-6 text-sm opacity-70">
+        You are free to use, modify, and share this project as long as you also make your changes available under the same license.
       </p>
+      <footer class="text-center text-sm opacity-70">
+        Made with ❤️ in Panamá • Powered by Open Source
+      </footer>
     </section>
+    <!-- Spanish Section -->
+    <section id="es" lang="es" class="hidden">
+      <h1 class="text-3xl font-bold mb-6">Documentación de MoA Chat</h1>
+      <p class="text-lg mb-4">
+        MoA Chat es un sistema de múltiples agentes donde varios modelos de IA responden a una solicitud de forma independiente, y un cuarto modelo (el Agregador) sintetiza sus respuestas en una sola.
       </p>
+      <img src="https://raw.githubusercontent.com/togethercomputer/MoA/main/assets/moa-explained.png" alt="Diagrama MoA" class="rounded shadow mb-6">
+      <h2 class="text-2xl font-semibold mt-6 mb-2">Cómo Funciona</h2>
+      <ul class="list-disc list-inside mb-6">
+        <li>LLM-A, LLM-B y LLM-C reciben tu pregunta y responden de forma independiente.</li>
+        <li>LLM-D (Agregador) combina esas respuestas en una sola.</li>
       </ul>
+      <h2 class="text-2xl font-semibold mt-6 mb-2">Cómo Autoalojar</h2>
+      <ol class="list-decimal list-inside mb-6 space-y-2">
+        <li>Clona el repositorio.</li>
+        <li>Crea un archivo `.env` con tus claves API (OpenRouter, Together, Grok, etc.).</li>
+        <li>Edita `llm/model_config.json` para configurar proveedores y modelos.</li>
+        <li>Ejecuta:
+          <pre class="bg-statusline1 rounded p-3 mt-2 overflow-x-auto">pip install -r requirements.txt
+python app.py</pre>
+        </li>
+        <li>O despliega en Hugging Face Spaces si prefieres.</li>
+      </ol>
+      <h2 class="text-2xl font-semibold mt-6 mb-2">Agregar Más Modelos</h2>
+      <p class="mb-4">
+        Para agregar modelos, simplemente edita `llm/model_config.json`.
+        Ejemplo:
       </p>
+      <pre class="bg-statusline1 rounded p-3 overflow-x-auto">
+"models": {
+  "newmodel/awesome-13b": "openrouter",
+  "another/model-v2": "together"
+}
+      </pre>
+      <h2 class="text-2xl font-semibold mt-6 mb-2">Licencia</h2>
+      <p class="mb-2">
+        Este proyecto está licenciado bajo la Licencia Pública General Affero de GNU v3.0 (AGPLv3).
       </p>
+      <p class="mb-6 text-sm opacity-70">
+        Puedes usar, modificar y compartir este proyecto siempre que también compartas tus cambios bajo la misma licencia.
       </p>
+      <footer class="text-center text-sm opacity-70">
+        Hecho con ❤️ en Panamá • Impulsado por Software Libre
+      </footer>
+    </section>
+  </main>
   <script>
+    // === Theme Toggle ===
+    const themeToggle = document.getElementById('themeToggle');
+    themeToggle.addEventListener('click', () => {
+      document.documentElement.classList.toggle('dark');
+      themeToggle.textContent = document.documentElement.classList.contains('dark') ? '🌙' : '☀️';
     });
+    // === Language Toggle ===
+    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>