Hugging Face's logo

Spaces:
UntilDot
/
Flask
Running

App Files Community
UntilDot commited on
Commit
0aed15a
·
verified ·
1 Parent(s): 1fe15fd

Update templates/docs.html

Browse files
Files changed (1) hide show
  1. templates/docs.html +144 -120
templates/docs.html CHANGED
@@ -20,126 +20,150 @@
20
  </header>
21
 
22
  <!-- Scrollable Main Content -->
23
- <main class="flex-1 overflow-y-auto p-6 space-y-8">
24
-
25
- <!-- English Section -->
26
- <section id="en" class="space-y-8">
27
-
28
- <div class="space-y-4">
29
- <h2 class="text-xl font-semibold">What is MoA Chat?</h2>
30
- <p>
31
- MoA Chat is a minimalistic and modern multi-model AI chat platform based on the "Mixture of Agents" (MoA) architecture.
32
- It allows you to query multiple language models (LLMs) simultaneously, and combine their responses into a final answer.
33
- </p>
34
- </div>
35
-
36
- <div class="space-y-4">
37
- <h2 class="text-xl font-semibold">How It Works</h2>
38
- <img src="https://github.com/togethercomputer/MoA/raw/main/assets/moa-explained.png" alt="MoA System Architecture" class="rounded shadow-lg">
39
- <p>
40
- Each conversation consists of three AI models (LLM-A, LLM-B, LLM-C) answering separately based on a structured system prompt,
41
- and one aggregator model (LLM-D) combining their outputs into a high-quality final response.
42
- </p>
43
- </div>
44
-
45
- <div class="space-y-4">
46
- <h2 class="text-xl font-semibold">Features</h2>
47
- <ul class="list-disc list-inside space-y-2">
48
- <li>🔹 Minimal, fast, fully responsive UI.</li>
49
- <li>🔹 Supports any OpenRouter, Groq, Together AI, or Grok model easily.</li>
50
- <li>🔹 Auto-theme (light/dark) detection based on your device.</li>
51
- <li>🔹 Smooth animations and Gruvbox Material palette.</li>
52
- <li>🔹 Self-hostable without any hidden costs.</li>
53
- </ul>
54
- </div>
55
-
56
- <div class="space-y-4">
57
- <h2 class="text-xl font-semibold">How to Self-Host</h2>
58
- <p>1. Deploy to Hugging Face Spaces (Docker).</p>
59
- <p>2. Add your API keys under "Secrets" (OPENROUTER_API_KEY, GROK_API_KEY, etc).</p>
60
- <p>3. Configure `llm/model_config.json` to add new providers or models.</p>
61
- <p>4. That's it! No database required.</p>
62
- </div>
63
-
64
- <div class="space-y-4">
65
- <h2 class="text-xl font-semibold">Adding Models</h2>
66
- <p>
67
- To add new models, simply update the <code>llm/model_config.json</code> file by mapping model names to providers.
68
- No backend changes are needed — the app automatically pulls from the updated list.
69
- </p>
70
- </div>
71
-
72
- <div class="space-y-4">
73
- <h2 class="text-xl font-semibold">License</h2>
74
- <p>This project is licensed under the <strong>AGPLv3</strong>.
75
- Fully free, fully open-source, no restrictions.</p>
76
- </div>
77
-
78
- <div class="space-y-4">
79
- <h2 class="text-xl font-semibold">Credits</h2>
80
- <p>Inspired by <a href="https://github.com/togethercomputer/MoA" class="text-blue underline hover:text-purple" target="_blank">Together MoA</a> and built with ❤️ in Panamá.</p>
81
- </div>
82
-
83
- </section>
84
-
85
- <!-- Spanish Section -->
86
- <section id="es" class="space-y-8 hidden">
87
-
88
- <div class="space-y-4">
89
- <h2 class="text-xl font-semibold">¿Qué es MoA Chat?</h2>
90
- <p>
91
- MoA Chat es una plataforma de chat de IA moderna y minimalista basada en la arquitectura "Mixture of Agents" (MoA).
92
- Permite consultar múltiples modelos de lenguaje (LLMs) al mismo tiempo y combinar sus respuestas en una sola.
93
- </p>
94
- </div>
95
-
96
- <div class="space-y-4">
97
- <h2 class="text-xl font-semibold">¿Cómo Funciona?</h2>
98
- <img src="https://github.com/togethercomputer/MoA/raw/main/assets/moa-explained.png" alt="Arquitectura MoA" class="rounded shadow-lg">
99
- <p>
100
- Cada conversación involucra tres modelos de IA (LLM-A, LLM-B, LLM-C) respondiendo por separado con un prompt estructurado,
101
- y un modelo agregador (LLM-D) que combina las respuestas en una final de alta calidad.
102
- </p>
103
- </div>
104
-
105
- <div class="space-y-4">
106
- <h2 class="text-xl font-semibold">Características</h2>
107
- <ul class="list-disc list-inside space-y-2">
108
- <li>🔹 UI rápida, minimalista y adaptable.</li>
109
- <li>🔹 Soporte para OpenRouter, Groq, Together AI, Grok.</li>
110
- <li>🔹 Cambio automático de tema claro/oscuro.</li>
111
- <li>🔹 Animaciones suaves y paleta Gruvbox Material.</li>
112
- <li>🔹 100% autohospedable.</li>
113
- </ul>
114
- </div>
115
-
116
- <div class="space-y-4">
117
- <h2 class="text-xl font-semibold">Cómo Autohospedarlo</h2>
118
- <p>1. Despliega en Hugging Face Spaces (Docker).</p>
119
- <p>2. Agrega tus llaves API en "Secrets" (OPENROUTER_API_KEY, GROK_API_KEY, etc).</p>
120
- <p>3. Configura <code>llm/model_config.json</code> para agregar modelos o proveedores.</p>
121
- <p>4. ¡Listo! No requiere base de datos.</p>
122
- </div>
123
-
124
- <div class="space-y-4">
125
- <h2 class="text-xl font-semibold">Agregar Modelos</h2>
126
- <p>
127
- Para agregar nuevos modelos, solo edita <code>llm/model_config.json</code>.
128
- La app actualizará las opciones automáticamente.
129
- </p>
130
- </div>
131
-
132
- <div class="space-y-4">
133
- <h2 class="text-xl font-semibold">Licencia</h2>
134
- <p>Este proyecto usa la licencia <strong>AGPLv3</strong>.</p>
135
- </div>
136
-
137
- <div class="space-y-4">
138
- <h2 class="text-xl font-semibold">Créditos</h2>
139
- <p>Inspirado en <a href="https://github.com/togethercomputer/MoA" class="text-blue underline hover:text-purple" target="_blank">Together MoA</a> y construido con ❤️ en Panamá.</p>
140
- </div>
141
-
142
- </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
143
 
144
  </main>
145
 
 
20
  </header>
21
 
22
  <!-- Scrollable Main Content -->
23
+ <main class="flex-1 overflow-y-auto p-6 space-y-8 flex flex-col items-center">
24
+
25
+ <div class="w-full max-w-3xl space-y-8">
26
+
27
+ <!-- English Section -->
28
+ <section id="en" class="space-y-8">
29
+
30
+ <div class="space-y-4">
31
+ <h2 class="text-xl font-semibold">What is MoA Chat?</h2>
32
+ <p>
33
+ MoA Chat is a minimalistic, self-hostable AI chat platform based on the Mixture of Agents (MoA) architecture.
34
+ It queries multiple AI models (LLMs) simultaneously and combines their answers into a final response.
35
+ </p>
36
+ </div>
37
+
38
+ <div class="space-y-4">
39
+ <h2 class="text-xl font-semibold">How It Works</h2>
40
+ <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">
41
+ <p>
42
+ Three models (LLM-A, LLM-B, LLM-C) answer the prompt individually. A fourth model (LLM-D) acts as an aggregator,
43
+ synthesizing the responses into a single high-quality answer.
44
+ </p>
45
+ </div>
46
+
47
+ <div class="space-y-4">
48
+ <h2 class="text-xl font-semibold">Features</h2>
49
+ <ul class="list-disc list-inside space-y-2">
50
+ <li>🔹 Modern, responsive, and fast web UI</li>
51
+ <li>🔹 Gruvbox Material theming with auto light/dark mode</li>
52
+ <li>🔹 Parallel API querying for faster responses</li>
53
+ <li>🔹 Dynamic model loading — no hardcoding needed</li>
54
+ <li>🔹 100% free and self-hostable</li>
55
+ </ul>
56
+ </div>
57
+
58
+ <div class="space-y-4">
59
+ <h2 class="text-xl font-semibold">How to Self-Host</h2>
60
+
61
+ <p>Clone the repository:</p>
62
+ <pre class="bg-statusline1 p-4 rounded overflow-x-auto"><code>git clone https://github.com/your-repo/moa-chat.git
63
+ cd moa-chat</code></pre>
64
+
65
+ <p>Deploy to Hugging Face Spaces or locally via Docker:</p>
66
+ <pre class="bg-statusline1 p-4 rounded overflow-x-auto"><code>docker build -t moa-chat .
67
+ docker run -p 7860:7860 moa-chat</code></pre>
68
+
69
+ <p>Create your API keys and add them to Hugging Face Secrets:</p>
70
+ <pre class="bg-statusline1 p-4 rounded overflow-x-auto"><code>OPENROUTER_API_KEY=your-openrouter-key
71
+ GROK_API_KEY=your-grok-key
72
+ TOGETHER_API_KEY=your-together-key
73
+ GROQ_API_KEY=your-groq-key</code></pre>
74
+
75
+ <p>To add more models, edit <code>llm/model_config.json</code>:</p>
76
+ <pre class="bg-statusline1 p-4 rounded overflow-x-auto"><code>{
77
+ "providers": {
78
+ "openrouter": {
79
+ "url": "https://openrouter.ai/api/v1/chat/completions",
80
+ "key_env": "OPENROUTER_API_KEY"
81
+ }
82
+ },
83
+ "models": {
84
+ "deepseek/deepseek-chat-v3-0324:free": "openrouter"
85
+ }
86
+ }</code></pre>
87
+ <p>No backend code modification needed after updating the config.</p>
88
+
89
+ </div>
90
+
91
+ <div class="space-y-4">
92
+ <h2 class="text-xl font-semibold">License</h2>
93
+ <p>Licensed under <strong>Apache 2.0</strong>.</p>
94
+ </div>
95
+
96
+ <div class="space-y-4">
97
+ <h2 class="text-xl font-semibold">Credits</h2>
98
+ <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>
99
+ </div>
100
+
101
+ </section>
102
+
103
+ <!-- Spanish Section -->
104
+ <section id="es" class="space-y-8 hidden">
105
+
106
+ <div class="space-y-4">
107
+ <h2 class="text-xl font-semibold">¿Qué es MoA Chat?</h2>
108
+ <p>
109
+ MoA Chat es una plataforma minimalista de chat de IA, basada en la arquitectura Mixture of Agents (MoA).
110
+ Permite consultar múltiples modelos de lenguaje (LLMs) simultáneamente y combinar sus respuestas.
111
+ </p>
112
+ </div>
113
+
114
+ <div class="space-y-4">
115
+ <h2 class="text-xl font-semibold">¿Cómo Funciona?</h2>
116
+ <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">
117
+ <p>
118
+ Tres modelos (LLM-A, LLM-B, LLM-C) responden. El modelo LLM-D agrega y sintetiza las respuestas en una final coherente.
119
+ </p>
120
+ </div>
121
+
122
+ <div class="space-y-4">
123
+ <h2 class="text-xl font-semibold">Características</h2>
124
+ <ul class="list-disc list-inside space-y-2">
125
+ <li>🔹 UI moderna y rápida</li>
126
+ <li>🔹 Tematización Gruvbox con modo claro/oscuro automático</li>
127
+ <li>🔹 Consultas paralelas para mayor rapidez</li>
128
+ <li>🔹 Soporte dinámico de modelos</li>
129
+ <li>🔹 100% autohospedable</li>
130
+ </ul>
131
+ </div>
132
+
133
+ <div class="space-y-4">
134
+ <h2 class="text-xl font-semibold">Cómo Autohospedarlo</h2>
135
+
136
+ <p>Clona el repositorio:</p>
137
+ <pre class="bg-statusline1 p-4 rounded overflow-x-auto"><code>git clone https://github.com/your-repo/moa-chat.git
138
+ cd moa-chat</code></pre>
139
+
140
+ <p>Despliega en Hugging Face o corre localmente con Docker:</p>
141
+ <pre class="bg-statusline1 p-4 rounded overflow-x-auto"><code>docker build -t moa-chat .
142
+ docker run -p 7860:7860 moa-chat</code></pre>
143
+
144
+ <p>Agrega tus llaves API en Hugging Face Secrets:</p>
145
+ <pre class="bg-statusline1 p-4 rounded overflow-x-auto"><code>OPENROUTER_API_KEY=tu-clave
146
+ GROK_API_KEY=tu-clave
147
+ TOGETHER_API_KEY=tu-clave
148
+ GROQ_API_KEY=tu-clave</code></pre>
149
+
150
+ <p>Edita <code>llm/model_config.json</code> para añadir modelos nuevos.</p>
151
+
152
+ </div>
153
+
154
+ <div class="space-y-4">
155
+ <h2 class="text-xl font-semibold">Licencia</h2>
156
+ <p>Licenciado bajo <strong>Apache 2.0</strong>.</p>
157
+ </div>
158
+
159
+ <div class="space-y-4">
160
+ <h2 class="text-xl font-semibold">Créditos</h2>
161
+ <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>
162
+ </div>
163
+
164
+ </section>
165
+
166
+ </div>
167
 
168
  </main>
169