Hugging Face's logo

Spaces:
UntilDot
/
Flask
Running

App Files Community
UntilDot commited on
Commit
e5067a7
·
verified ·
1 Parent(s): 3bb5602

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +53 -174
templates/index.html CHANGED
@@ -1,181 +1,60 @@
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>MoA Chat</title>
7
- <link
8
- href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
9
- rel="stylesheet"
10
- />
11
- <link rel="stylesheet" href="/static/style.css" />
12
- </head>
13
- <body class="bg0 text-fg0 transition-colors duration-300">
14
- <div class="min-h-screen flex flex-col justify-between p-4">
15
- <header class="flex items-center justify-between mb-4">
16
- <h1 class="text-2xl font-bold">MoA Chat</h1>
17
- <div class="space-x-2">
18
- <button
19
- id="toggleConfig"
20
- class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition"
21
- >
22
- Config
23
- </button>
24
- <button
25
- id="themeToggle"
26
- class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition"
27
- >
28
- Theme
29
- </button>
30
- </div>
31
- </header>
32
 
33
- <div id="configPanel" class="bg1 rounded p-4 mb-4 hidden">
34
- <h2 class="text-lg font-semibold mb-2">Model Selection</h2>
35
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
36
- <div>
37
- <label for="modelA" class="block mb-1">LLM-A</label>
38
- <select
39
- id="modelA"
40
- class="w-full rounded p-2 bg-statusline1"
41
- >
42
- <option value="deepseek/deepseek-chat-v3-0324">
43
- DeepSeek Chat v3
44
- </option>
45
- <option value="google/gemini-2.0-flash-exp">
46
- Gemini 2.0 Flash
47
- </option>
48
- <option value="meta-llama/llama-4-maverick">
49
- LLaMA 4 Maverick
50
- </option>
51
- <option value="microsoft/mai-ds-r1">
52
- MAI DS R1
53
- </option>
54
- <option value="meta-llama/llama-4-scout">
55
- LLaMA 4 Scout
56
- </option>
57
- <option value="google/gemma-3-27b-it">
58
- Gemma 3 27B
59
- </option>
60
- <option value="qwen/qwq-32b">Qwen QWQ 32B</option>
61
- <option value="qwen/qwen2.5-vl-72b-instruct">
62
- Qwen2.5 VL 72B
63
- </option>
64
- <option value="qwen/qwen-2.5-72b-instruct">
65
- Qwen 2.5 72B
66
- </option>
67
- <option value="google/gemini-2.5-pro-exp-03-25">
68
- Gemini 2.5 Pro
69
- </option>
70
- <option value="deepseek/deepseek-r1">
71
- DeepSeek R1
72
- </option>
73
- </select>
74
- </div>
75
- <div>
76
- <label for="modelB" class="block mb-1">LLM-B</label>
77
- <select
78
- id="modelB"
79
- class="w-full rounded p-2 bg-statusline1"
80
- >
81
- <option value="deepseek/deepseek-chat-v3-0324">
82
- DeepSeek Chat v3
83
- </option>
84
- <option value="google/gemini-2.0-flash-exp">
85
- Gemini 2.0 Flash
86
- </option>
87
- <option value="meta-llama/llama-4-maverick">
88
- LLaMA 4 Maverick
89
- </option>
90
- <option value="microsoft/mai-ds-r1">
91
- MAI DS R1
92
- </option>
93
- <option value="meta-llama/llama-4-scout">
94
- LLaMA 4 Scout
95
- </option>
96
- <option value="google/gemma-3-27b-it">
97
- Gemma 3 27B
98
- </option>
99
- <option value="qwen/qwq-32b">Qwen QWQ 32B</option>
100
- <option value="qwen/qwen2.5-vl-72b-instruct">
101
- Qwen2.5 VL 72B
102
- </option>
103
- <option value="qwen/qwen-2.5-72b-instruct">
104
- Qwen 2.5 72B
105
- </option>
106
- <option value="google/gemini-2.5-pro-exp-03-25">
107
- Gemini 2.5 Pro
108
- </option>
109
- <option value="deepseek/deepseek-r1">
110
- DeepSeek R1
111
- </option>
112
- </select>
113
- </div>
114
- <div>
115
- <label for="modelC" class="block mb-1">LLM-C</label>
116
- <select
117
- id="modelC"
118
- class="w-full rounded p-2 bg-statusline1"
119
- >
120
- <option value="deepseek/deepseek-chat-v3-0324">
121
- DeepSeek Chat v3
122
- </option>
123
- <option value="google/gemini-2.0-flash-exp">
124
- Gemini 2.0 Flash
125
- </option>
126
- <option value="meta-llama/llama-4-maverick">
127
- LLaMA 4 Maverick
128
- </option>
129
- <option value="microsoft/mai-ds-r1">
130
- MAI DS R1
131
- </option>
132
- <option value="meta-llama/llama-4-scout">
133
- LLaMA 4 Scout
134
- </option>
135
- <option value="google/gemma-3-27b-it">
136
- Gemma 3 27B
137
- </option>
138
- <option value="qwen/qwq-32b">Qwen QWQ 32B</option>
139
- <option value="qwen/qwen2.5-vl-72b-instruct">
140
- Qwen2.5 VL 72B
141
- </option>
142
- <option value="qwen/qwen-2.5-72b-instruct">
143
- Qwen 2.5 72B
144
- </option>
145
- <option value="google/gemini-2.5-pro-exp-03-25">
146
- Gemini 2.5 Pro
147
- </option>
148
- <option value="deepseek/deepseek-r1">
149
- DeepSeek R1
150
- </option>
151
- </select>
152
- </div>
153
- </div>
154
  </div>
 
 
 
155
 
156
- <main
157
- id="chatContainer"
158
- class="flex-1 overflow-y-auto bg1 p-4 rounded shadow-md space-y-4"
159
- >
160
- <!-- Messages injected here -->
161
- </main>
162
 
163
- <form id="chatForm" class="mt-4 flex">
164
- <input
165
- id="userInput"
166
- type="text"
167
- placeholder="Ask something..."
168
- class="flex-1 px-4 py-2 rounded-l border-none bg-statusline1 text-fg0 placeholder-fg1 focus:outline-none"
169
- />
170
- <button
171
- type="submit"
172
- class="px-4 py-2 bg-green text-fg0 rounded-r hover:bg-visual_green transition"
173
- >
174
- Send
175
- </button>
176
- </form>
177
- </div>
178
 
179
- <script src="/static/script.js"></script>
180
- </body>
181
  </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>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">
11
+ <div class="min-h-screen flex flex-col justify-between p-4">
12
+ <header class="flex items-center justify-between mb-4">
13
+ <h1 class="text-2xl font-bold">MoA Chat</h1>
14
+ <div class="space-x-2">
15
+ <button id="toggleConfig" class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition">Config</button>
16
+ <button id="themeToggle" class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition">Theme</button>
17
+ </div>
18
+ </header>
 
 
 
 
 
 
 
 
 
 
 
 
 
19
 
20
+ <div id="configPanel" class="bg1 rounded p-4 mb-4 hidden">
21
+ <h2 class="text-lg font-semibold mb-2">Model Selection</h2>
22
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
23
+ <div>
24
+ <label class="block mb-1">LLM-A</label>
25
+ <div id="modelA" class="model-dropdown relative bg-statusline1 text-fg0 rounded p-2 cursor-pointer select-none">
26
+ <span class="selected block">Select a model</span>
27
+ <div class="options hidden absolute left-0 right-0 mt-2 bg-statusline1 rounded shadow-md z-10 max-h-60 overflow-y-auto"></div>
28
+ </div>
29
+ </div>
30
+ <div>
31
+ <label class="block mb-1">LLM-B</label>
32
+ <div id="modelB" class="model-dropdown relative bg-statusline1 text-fg0 rounded p-2 cursor-pointer select-none">
33
+ <span class="selected block">Select a model</span>
34
+ <div class="options hidden absolute left-0 right-0 mt-2 bg-statusline1 rounded shadow-md z-10 max-h-60 overflow-y-auto"></div>
35
+ </div>
36
+ </div>
37
+ <div>
38
+ <label class="block mb-1">LLM-C</label>
39
+ <div id="modelC" class="model-dropdown relative bg-statusline1 text-fg0 rounded p-2 cursor-pointer select-none">
40
+ <span class="selected block">Select a model</span>
41
+ <div class="options hidden absolute left-0 right-0 mt-2 bg-statusline1 rounded shadow-md z-10 max-h-60 overflow-y-auto"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
  </div>
43
+ </div>
44
+ </div>
45
+ </div>
46
 
47
+ <main id="chatContainer" class="flex-1 overflow-y-auto bg1 p-4 rounded shadow-md space-y-4">
48
+ <!-- Messages injected here -->
49
+ </main>
 
 
 
50
 
51
+ <form id="chatForm" class="mt-4 flex">
52
+ <input id="userInput" type="text" placeholder="Ask something..."
53
+ class="flex-1 px-4 py-2 rounded-l border-none bg-statusline1 text-fg0 placeholder-fg1 focus:outline-none">
54
+ <button type="submit" class="px-4 py-2 bg-green text-fg0 rounded-r hover:bg-visual_green transition">Send</button>
55
+ </form>
56
+ </div>
 
 
 
 
 
 
 
 
 
57
 
58
+ <script src="/static/script.js"></script>
59
+ </body>
60
  </html>