Update templates/docs.html

templates/docs.html

@@ -19,55 +19,55 @@
     <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 lets multiple AI agents (different LLMs) collaborate to generate a higher-quality response than a single model could.
+        <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 a simple version of this architecture by:
+        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) at once.</li>
-        <li>Combining their answers using another model (LLM-D, the aggregator).</li>
-        <li>Delivering a smart, single, structured reply to the user.</li>
+        <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_pipeline.png" alt="MoA Architecture" class="mx-auto rounded shadow-md">
+        <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 MoA Architecture Concept</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</h2>
+      <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 configuration panel.</li>
+        <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 input box.</li>
-        <li>Press <strong>Send</strong>.</li>
-        <li>Watch multiple models collaborate for the best response!</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 or premium models (via OpenRouter, Together, Grok, etc.).</li>
-        <li>Structured prompts for each model to encourage quality responses.</li>
-        <li>Aggregator model intelligently fuses outputs into one reply.</li>
-        <li>Dynamic Light/Dark mode (Gruvbox Material Theme).</li>
-        <li>Minimal, fast, and secure frontend with no API keys exposed.</li>
+        <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 to run on <strong>Hugging Face Spaces</strong> or any platform that supports Python 3.11+, Flask, and Docker-based containers.
+        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">
-        Requires setting your API keys via Hugging Face's Secrets system (never expose them to the frontend).
+        API keys should be stored securely using Hugging Face's <strong>Secrets</strong> system.
       </p>
     </section>
 
@@ -75,22 +75,31 @@
       <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> — Query and aggregation logic for MoA system.</li>
-        <li><code>llm/model_config.json</code> — Define available models and providers.</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</h2>
-      <p class="text-lg">Made with ❤️ in Panamá by Until Dot. Inspired by Together's MoA architecture.</p>
+      <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">
+  <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>