File size: 7,240 Bytes
0ded64d
 
9d82f9a
a2aaec2
 
9d82f9a
 
 
 
1fe15fd
9d82f9a
1fe15fd
 
 
 
 
 
 
 
 
9d82f9a
1fe15fd
0aed15a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a2aaec2
 
9d82f9a
1fe15fd
9d82f9a
 
0ded64d
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
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 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",
      "key_env": "OPENROUTER_API_KEY"
    }
  },
  "models": {
    "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>