Hugging Face's logo

Spaces:
UntilDot
/
Flask
Running

App Files Community
UntilDot commited on
Commit
9d82f9a
·
verified ·
1 Parent(s): 5152689

Update templates/docs.html

Browse files
Files changed (1) hide show
  1. templates/docs.html +115 -14
templates/docs.html CHANGED
@@ -1,17 +1,118 @@
1
  <!DOCTYPE html>
2
  <html lang="en" class="bg0 text-fg0 dark">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Documentation - MoA Chat</title>
7
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
8
- <link rel="stylesheet" href="/static/style.css" />
9
- </head>
10
- <body class="bg0 text-fg0 transition-colors duration-300 flex flex-col justify-center items-center min-h-screen">
11
-
12
- <h1 class="text-3xl font-bold mb-4">Documentation</h1>
13
- <p class="text-lg mb-8">Coming soon...</p>
14
- <a href="/" class="px-4 py-2 bg-blue text-fg0 rounded hover:bg-purple transition">← Back to Chat</a>
15
-
16
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en" class="bg0 text-fg0 dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Documentation - MoA Chat</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="/static/style.css" />
9
+ </head>
10
+ <body class="bg0 text-fg0 transition-colors duration-300 flex flex-col items-center min-h-screen p-6">
11
+
12
+ <header class="w-full flex justify-between items-center max-w-4xl mb-6">
13
+ <h1 class="text-3xl font-bold">MoA Chat Documentation</h1>
14
+ <button id="themeToggle" class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition">🌙</button>
15
+ </header>
16
+
17
+ <div class="max-w-4xl w-full bg1 rounded p-8 shadow-md">
18
+
19
+ <section class="mb-10">
20
+ <h2 class="text-2xl font-semibold mb-4 text-blue">What is MoA Chat?</h2>
21
+ <p class="mb-4 text-lg">
22
+ <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.
23
+ </p>
24
+ <p class="mb-4">
25
+ MoA Chat implements a simple version of this architecture by:
26
+ </p>
27
+ <ul class="list-disc ml-6 text-lg">
28
+ <li>Querying several different models (LLM-A, LLM-B, LLM-C) at once.</li>
29
+ <li>Combining their answers using another model (LLM-D, the aggregator).</li>
30
+ <li>Delivering a smart, single, structured reply to the user.</li>
31
+ </ul>
32
+ </section>
33
+
34
+ <section class="mb-10">
35
+ <h2 class="text-2xl font-semibold mb-4 text-blue">How MoA Works (Visual)</h2>
36
+ <p class="mb-4 text-center">
37
+ <img src="https://raw.githubusercontent.com/togethercomputer/MoA/main/assets/moa_pipeline.png" alt="MoA Architecture" class="mx-auto rounded shadow-md">
38
+ </p>
39
+ <p class="text-center text-sm opacity-70">Source: Together MoA Architecture Concept</p>
40
+ </section>
41
+
42
+ <section class="mb-10">
43
+ <h2 class="text-2xl font-semibold mb-4 text-blue">How to Use</h2>
44
+ <ol class="list-decimal ml-6 text-lg">
45
+ <li>Click ⚙️ to open the configuration panel.</li>
46
+ <li>Select your preferred models for LLM-A, LLM-B, LLM-C, and Aggregator (LLM-D).</li>
47
+ <li>Type your message in the input box.</li>
48
+ <li>Press <strong>Send</strong>.</li>
49
+ <li>Watch multiple models collaborate for the best response!</li>
50
+ </ol>
51
+ </section>
52
+
53
+ <section class="mb-10">
54
+ <h2 class="text-2xl font-semibold mb-4 text-blue">Features</h2>
55
+ <ul class="list-disc ml-6 text-lg">
56
+ <li>Parallel querying of multiple free or premium models (via OpenRouter, Together, Grok, etc.).</li>
57
+ <li>Structured prompts for each model to encourage quality responses.</li>
58
+ <li>Aggregator model intelligently fuses outputs into one reply.</li>
59
+ <li>Dynamic Light/Dark mode (Gruvbox Material Theme).</li>
60
+ <li>Minimal, fast, and secure frontend with no API keys exposed.</li>
61
+ </ul>
62
+ </section>
63
+
64
+ <section class="mb-10">
65
+ <h2 class="text-2xl font-semibold mb-4 text-blue">Deployment</h2>
66
+ <p class="mb-4 text-lg">
67
+ 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.
68
+ </p>
69
+ <p class="text-lg">
70
+ Requires setting your API keys via Hugging Face's Secrets system (never expose them to the frontend).
71
+ </p>
72
+ </section>
73
+
74
+ <section class="mb-10">
75
+ <h2 class="text-2xl font-semibold mb-4 text-blue">File Structure</h2>
76
+ <ul class="list-disc ml-6 text-lg">
77
+ <li><code>app.py</code> — Flask backend server.</li>
78
+ <li><code>llm/agents.py</code> — Query and aggregation logic for MoA system.</li>
79
+ <li><code>llm/model_config.json</code> — Define available models and providers.</li>
80
+ <li><code>templates/</code> — Contains <code>index.html</code> and <code>docs.html</code>.</li>
81
+ <li><code>static/</code> — Contains <code>style.css</code> and <code>script.js</code>.</li>
82
+ </ul>
83
+ </section>
84
+
85
+ <section class="mb-10">
86
+ <h2 class="text-2xl font-semibold mb-4 text-blue">Credits</h2>
87
+ <p class="text-lg">Made with ❤️ in Panamá by Until Dot. Inspired by Together's MoA architecture.</p>
88
+ </section>
89
+
90
+ </div>
91
+
92
+ <div class="text-center mt-8">
93
+ <a href="/" class="px-6 py-2 bg-blue text-fg0 rounded hover:bg-purple transition text-lg font-semibold">← Back to Chat</a>
94
+ </div>
95
+
96
+ <script>
97
+ const themeToggle = document.getElementById("themeToggle");
98
+ const html = document.documentElement;
99
+ themeToggle.addEventListener("click", () => {
100
+ const isDark = html.classList.toggle("dark");
101
+ localStorage.setItem("theme", isDark ? "dark" : "light");
102
+ themeToggle.textContent = isDark ? "🌙" : "☀️";
103
+ });
104
+
105
+ window.addEventListener("load", () => {
106
+ const savedTheme = localStorage.getItem("theme");
107
+ if (savedTheme === "dark") {
108
+ html.classList.add("dark");
109
+ themeToggle.textContent = "🌙";
110
+ } else {
111
+ html.classList.remove("dark");
112
+ themeToggle.textContent = "☀️";
113
+ }
114
+ });
115
+ </script>
116
+
117
+ </body>
118
  </html>