Spaces:

UntilDot
/

Flask

Running

App Files Files Community

UntilDot commited on 3 days ago

Commit

11cdaee

verified ·

1 Parent(s): 0aed15a

Update templates/docs.html

Browse files

Files changed (1) hide show

templates/docs.html +128 -140

templates/docs.html CHANGED Viewed

@@ -7,73 +7,57 @@
   <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 min-h-screen">
-  <!-- Top Fixed Bar -->
-  <header class="flex items-center justify-between p-4 bg1 shadow-md sticky top-0 z-50">
-    <h1 class="text-2xl font-bold">Documentation</h1>
-    <div class="space-x-2 flex items-center">
-      <a href="/" id="chatButton" class="px-3 py-1 rounded bg-blue hover:bg-purple text-fg0 transition">← Chat</a>
-      <button id="langToggle" class="px-3 py-1 rounded bg-blue hover:bg-purple text-fg0 transition">🌐</button>
-      <button id="themeToggle" class="px-3 py-1 rounded bg-blue hover:bg-purple text-fg0 transition">🌙</button>
     </div>
   </header>
-  <!-- Scrollable Main Content -->
-  <main class="flex-1 overflow-y-auto p-6 space-y-8 flex flex-col items-center">
-    <div class="w-full max-w-3xl space-y-8">
-      <!-- English Section -->
-      <section id="en" class="space-y-8">
-        <div class="space-y-4">
-          <h2 class="text-xl font-semibold">What is MoA Chat?</h2>
-          <p>
-            MoA Chat is a minimalistic, self-hostable AI chat platform based on the Mixture of Agents (MoA) architecture.
-            It queries multiple AI models (LLMs) simultaneously and combines their answers into a final response.
-          </p>
-        </div>
-        <div class="space-y-4">
-          <h2 class="text-xl font-semibold">How It Works</h2>
-          <img src="https://github.com/togethercomputer/MoA/raw/main/assets/moa-explained.png" alt="MoA Architecture" class="rounded shadow-lg mx-auto max-w-md">
-          <p>
-            Three models (LLM-A, LLM-B, LLM-C) answer the prompt individually. A fourth model (LLM-D) acts as an aggregator,
-            synthesizing the responses into a single high-quality answer.
-          </p>
-        </div>
-        <div class="space-y-4">
-          <h2 class="text-xl font-semibold">Features</h2>
-          <ul class="list-disc list-inside space-y-2">
-            <li>🔹 Modern, responsive, and fast web UI</li>
-            <li>🔹 Gruvbox Material theming with auto light/dark mode</li>
-            <li>🔹 Parallel API querying for faster responses</li>
-            <li>🔹 Dynamic model loading — no hardcoding needed</li>
-            <li>🔹 100% free and self-hostable</li>
-          </ul>
-        </div>
-        <div class="space-y-4">
-          <h2 class="text-xl font-semibold">How to Self-Host</h2>
-          <p>Clone the repository:</p>
-          <pre class="bg-statusline1 p-4 rounded overflow-x-auto"><code>git clone https://github.com/your-repo/moa-chat.git
-cd moa-chat</code></pre>
-          <p>Deploy to Hugging Face Spaces or locally via Docker:</p>
-          <pre class="bg-statusline1 p-4 rounded overflow-x-auto"><code>docker build -t moa-chat .
-docker run -p 7860:7860 moa-chat</code></pre>
-          <p>Create your API keys and add them to Hugging Face Secrets:</p>
-          <pre class="bg-statusline1 p-4 rounded overflow-x-auto"><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>
-          <p>To add more models, edit <code>llm/model_config.json</code>:</p>
-          <pre class="bg-statusline1 p-4 rounded overflow-x-auto"><code>{
   "providers": {
     "openrouter": {
       "url": "https://openrouter.ai/api/v1/chat/completions",
@@ -84,90 +68,94 @@ GROQ_API_KEY=your-groq-key</code></pre>
     "deepseek/deepseek-chat-v3-0324:free": "openrouter"
   }
 }</code></pre>
-          <p>No backend code modification needed after updating the config.</p>
-        </div>
-        <div class="space-y-4">
-          <h2 class="text-xl font-semibold">License</h2>
-          <p>Licensed under <strong>Apache 2.0</strong>.</p>
-        </div>
-        <div class="space-y-4">
-          <h2 class="text-xl font-semibold">Credits</h2>
-          <p>Inspired by <a href="https://github.com/togethercomputer/MoA" target="_blank" class="text-blue hover:text-purple underline">Together MoA</a>. Built with ❤️ in Panamá.</p>
-        </div>
-      </section>
-      <!-- Spanish Section -->
-      <section id="es" class="space-y-8 hidden">
-        <div class="space-y-4">
-          <h2 class="text-xl font-semibold">¿Qué es MoA Chat?</h2>
-          <p>
-            MoA Chat es una plataforma minimalista de chat de IA, basada en la arquitectura Mixture of Agents (MoA).
-            Permite consultar múltiples modelos de lenguaje (LLMs) simultáneamente y combinar sus respuestas.
-          </p>
-        </div>
-        <div class="space-y-4">
-          <h2 class="text-xl font-semibold">¿Cómo Funciona?</h2>
-          <img src="https://github.com/togethercomputer/MoA/raw/main/assets/moa-explained.png" alt="Arquitectura MoA" class="rounded shadow-lg mx-auto max-w-md">
-          <p>
-            Tres modelos (LLM-A, LLM-B, LLM-C) responden. El modelo LLM-D agrega y sintetiza las respuestas en una final coherente.
-          </p>
-        </div>
-        <div class="space-y-4">
-          <h2 class="text-xl font-semibold">Características</h2>
-          <ul class="list-disc list-inside space-y-2">
-            <li>🔹 UI moderna y rápida</li>
-            <li>🔹 Tematización Gruvbox con modo claro/oscuro automático</li>
-            <li>🔹 Consultas paralelas para mayor rapidez</li>
-            <li>🔹 Soporte dinámico de modelos</li>
-            <li>🔹 100% autohospedable</li>
-          </ul>
-        </div>
-        <div class="space-y-4">
-          <h2 class="text-xl font-semibold">Cómo Autohospedarlo</h2>
-          <p>Clona el repositorio:</p>
-          <pre class="bg-statusline1 p-4 rounded overflow-x-auto"><code>git clone https://github.com/your-repo/moa-chat.git
-cd moa-chat</code></pre>
-          <p>Despliega en Hugging Face o corre localmente con Docker:</p>
-          <pre class="bg-statusline1 p-4 rounded overflow-x-auto"><code>docker build -t moa-chat .
-docker run -p 7860:7860 moa-chat</code></pre>
-          <p>Agrega tus llaves API en Hugging Face Secrets:</p>
-          <pre class="bg-statusline1 p-4 rounded overflow-x-auto"><code>OPENROUTER_API_KEY=tu-clave
-GROK_API_KEY=tu-clave
-TOGETHER_API_KEY=tu-clave
-GROQ_API_KEY=tu-clave</code></pre>
-          <p>Edita <code>llm/model_config.json</code> para añadir modelos nuevos.</p>
-        </div>
-        <div class="space-y-4">
-          <h2 class="text-xl font-semibold">Licencia</h2>
-          <p>Licenciado bajo <strong>Apache 2.0</strong>.</p>
-        </div>
-        <div class="space-y-4">
-          <h2 class="text-xl font-semibold">Créditos</h2>
-          <p>Inspirado por <a href="https://github.com/togethercomputer/MoA" target="_blank" class="text-blue hover:text-purple underline">Together MoA</a>. Construido con ❤️ en Panamá.</p>
-        </div>
-      </section>
-    </div>
   </main>
-  <script src="/static/docs.js"></script>
 </body>
 </html>

   <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",
     "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>