Hugging Face's logo

Spaces:
humza7656
/
MultiModel
Running

App Files Community
humza7656 commited on
Commit
cc0b604
·
verified ·
1 Parent(s): 5268478

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +286 -17
index.html CHANGED
@@ -1,19 +1,288 @@
1
  <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
  <!doctype html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>MultiModel AI — Multi‑Column Chat</title>
7
+ <meta name="description" content="Ask once, view Gemini, OpenAi, Meta, and Alibaba in tabs on mobile and 4 columns on desktop." />
8
+ <meta name="theme-color" content="#0b0b0e" />
9
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet" />
12
+ <script src="https://cdn.tailwindcss.com"></script>
13
+ <script>
14
+ tailwind.config = { theme: { extend: { colors: { brand: { DEFAULT: '#22c55e', foreground: '#0b0b0e' }, accent: '#60a5fa' }, fontFamily: { sans: ['Inter','ui-sans-serif','system-ui'] } } } };
15
+ </script>
16
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
17
+ <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.7/dist/purify.min.js"></script>
18
+ <style>:root{color-scheme:dark}html,body{height:100%}
19
+ .bubble table{width:100%;border-collapse:collapse;margin-top:.5rem}
20
+ .bubble th,.bubble td{border:1px solid rgba(255,255,255,.15);padding:.5rem;vertical-align:top}
21
+ .bubble th{background:rgba(255,255,255,.06);font-weight:600}
22
+ .bubble pre{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:.75rem;border-radius:.5rem;overflow:auto}
23
+ .bubble code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
24
+ .scroll-area{scroll-behavior:smooth; overscroll-behavior:contain}
25
+ .scroll-area::-webkit-scrollbar{height:10px;width:10px}
26
+ .scroll-area::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}
27
+ .scroll-area::-webkit-scrollbar-track{background:transparent}
28
+ @keyframes caretBlink{50%{opacity:.2}}
29
+ .caret{display:inline-block;width:2px;height:1em;background:rgba(255,255,255,.8);vertical-align:-0.15em;animation:caretBlink 1s steps(2,start) infinite;margin-left:2px}
30
+ </style>
31
+ </head>
32
+ <body class="bg-neutral-950 text-white font-sans antialiased selection:bg-brand/30">
33
+ <div class="flex min-h-screen">
34
+ <!-- Sidebar (desktop) -->
35
+ <aside class="hidden lg:flex w-64 flex-col border-r border-white/10 bg-white/[0.02]">
36
+ <div class="h-16 flex items-center gap-2 px-4 border-b border-white/10">
37
+ <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-brand/20 text-brand">
38
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5"><path d="M4 5a2 2 0 0 1 2-2h1l1-1h6l1 1h1a2 2 0 0 1 2 2v3H4V5Zm0 5h16v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-7Zm5 2a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H9Z"/></svg>
39
+ </span>
40
+ <span class="text-lg font-extrabold tracking-tight">MultiModel AI</span>
41
+ </div>
42
+ </aside>
43
+
44
+ <!-- Main -->
45
+ <div class="flex-1 flex flex-col min-w-0">
46
+ <header class="sticky top-0 z-40 border-b border-white/10 backdrop-blur supports-[backdrop-filter]:bg-neutral-950/70">
47
+ <div class="px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-4">
48
+ <div class="lg:hidden inline-flex items-center gap-2">
49
+ <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-brand/20 text-brand">
50
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5"><path d="M4 5a2 2 0 0 1 2-2h1l1-1h6l1 1h1a2 2 0 0 1 2 2v3H4V5Zm0 5h16v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-7Zm5 2a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H9Z"/></svg>
51
+ </span>
52
+ <span class="text-lg font-extrabold tracking-tight">MultiModel AI</span>
53
+ </div>
54
+ </div>
55
+ </header>
56
+
57
+ <main class="flex-1 flex flex-col">
58
+ <!-- Tabs (mobile and desktop) -->
59
+ <div class="border-b border-white/10 p-2">
60
+ <div id="tabs" class="inline-flex rounded-lg bg-white/5 p-1 text-white/70 border border-white/10 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]">
61
+ <button data-tab="All" class="tab px-3 py-1.5 rounded bg-white/10 text-white">All</button>
62
+ <button data-tab="Gemini" class="tab px-3 py-1.5 rounded hover:bg-white/10">Gemini</button>
63
+ <button data-tab="OpenAi" class="tab px-3 py-1.5 rounded hover:bg-white/10">OpenAi</button>
64
+ <button data-tab="Meta" class="tab px-3 py-1.5 rounded hover:bg-white/10">Meta</button>
65
+ <button data-tab="Alibaba" class="tab px-3 py-1.5 rounded hover:bg-white/10">Alibaba</button>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Chat area -->
70
+ <div id="chat" class="relative flex-1 overflow-hidden">
71
+ <!-- Mobile panes -->
72
+ <div id="mobile-panes" class="lg:hidden h-full overflow-y-auto p-4 pb-28 relative scroll-area">
73
+ <div id="pane-All" class="pane flex flex-col gap-4"></div>
74
+ <div id="pane-Gemini" class="pane hidden flex flex-col gap-4"></div>
75
+ <div id="pane-OpenAi" class="pane hidden flex flex-col gap-4"></div>
76
+ <div id="pane-Meta" class="pane hidden flex flex-col gap-4"></div>
77
+ <div id="pane-Alibaba" class="pane hidden flex flex-col gap-4"></div>
78
+ </div>
79
+
80
+ <!-- Desktop 4 columns -->
81
+ <div id="grid" class="hidden lg:grid grid-cols-1 xl:grid-cols-4 gap-4 h-full p-4 pb-24 scroll-area">
82
+ <!-- Column template instances -->
83
+ <div class="col flex flex-col rounded-xl border border-white/10 bg-white/[0.03] overflow-hidden">
84
+ <div class="h-12 border-b border-white/10 px-3 flex items-center gap-2"><span class="h-7 w-7 inline-flex items-center justify-center rounded-full bg-gradient-to-br from-fuchsia-500/30 to-sky-500/30 ring-1 ring-white/10"><img src="https://cdn.simpleicons.org/google/ffffff" alt="Gemini" class="h-4 w-4"/></span><span class="font-semibold">Gemini</span></div>
85
+ <div id="col-Gemini" class="flex-1 overflow-y-auto p-3 pb-24 flex flex-col gap-3 scroll-area"></div>
86
+ </div>
87
+ <div class="col flex flex-col rounded-xl border border-white/10 bg-white/[0.03] overflow-hidden">
88
+ <div class="h-12 border-b border-white/10 px-3 flex items-center gap-2"><span class="h-7 w-7 inline-flex items-center justify-center rounded-full bg-emerald-500/30 ring-1 ring-white/10"><img src="https://cdn.simpleicons.org/openai/ffffff" alt="OpenAI" class="h-4 w-4"/></span><span class="font-semibold">OpenAi</span></div>
89
+ <div id="col-OpenAi" class="flex-1 overflow-y-auto p-3 pb-24 flex flex-col gap-3 scroll-area"></div>
90
+ </div>
91
+ <div class="col flex flex-col rounded-xl border border-white/10 bg-white/[0.03] overflow-hidden">
92
+ <div class="h-12 border-b border-white/10 px-3 flex items-center gap-2"><span class="h-7 w-7 inline-flex items-center justify-center rounded-full bg-blue-500/30 ring-1 ring-white/10"><img src="https://cdn.simpleicons.org/meta/ffffff" alt="Meta" class="h-4 w-4"/></span><span class="font-semibold">Meta</span></div>
93
+ <div id="col-Meta" class="flex-1 overflow-y-auto p-3 pb-24 flex flex-col gap-3 scroll-area"></div>
94
+ </div>
95
+ <div class="col flex flex-col rounded-xl border border-white/10 bg-white/[0.03] overflow-hidden">
96
+ <div class="h-12 border-b border-white/10 px-3 flex items-center gap-2"><span class="h-7 w-7 inline-flex items-center justify-center rounded-full bg-amber-500/30 ring-1 ring-white/10"><img src="https://cdn.simpleicons.org/alibabacloud/ffffff" alt="Alibaba" class="h-4 w-4"/></span><span class="font-semibold">Alibaba</span></div>
97
+ <div id="col-Alibaba" class="flex-1 overflow-y-auto p-3 pb-24 flex flex-col gap-3 scroll-area"></div>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Composer -->
102
+ <div class="absolute bottom-0 left-0 right-0 border-t border-white/10 bg-neutral-950/80 backdrop-blur p-3">
103
+ <div class="relative max-w-5xl mx-auto">
104
+ <textarea id="prompt" rows="2" class="w-full rounded-lg bg-white/5 border border-white/10 pl-3 pr-64 py-3 text-sm placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-brand" placeholder="Press Enter to send • Shift+Enter for newline"></textarea>
105
+ <button id="send" class="absolute right-3 bottom-6 inline-flex h-10 items-center gap-2 justify-center rounded-lg bg-gradient-to-r from-[#22c55e] to-[#16a34a] px-5 text-sm font-semibold text-black shadow-lg shadow-emerald-500/20 hover:brightness-105 active:translate-y-[1px] focus:outline-none focus:ring-2 focus:ring-emerald-400/60 transition-all">Send
106
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path d="M3 12l18-9-9 18-1.8-6.2L3 12z"/></svg>
107
+ </button>
108
+ <button id="setPrompt" class="absolute right-36 bottom-6 inline-flex h-10 items-center gap-2 justify-center rounded-lg bg-white/10 px-3 text-sm font-medium text-white hover:bg-white/15 border border-white/10 backdrop-blur-sm transition-all"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path d="M11 2l1.5 3.5L16 7l-3.5 1.5L11 12l-1.5-3.5L6 7l3.5-1.5L11 2zM18 14l1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2z"/></svg> Set Prompt</button>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <div id="status" class="hidden px-4 sm:px-6 lg:px-8 pb-4 text-sm"></div>
114
+
115
+ <div class="px-4 sm:px-6 lg:px-8 mt-1 mb-4 flex items-center gap-3 text-xs text-white/60">
116
+ <a href="#" id="clear" class="hover:text-white">Clear</a>
117
+ </div>
118
+ </main>
119
+ </div>
120
+ </div>
121
+
122
+ <template id="msg-template">
123
+ <div class="msg group flex items-start gap-3">
124
+ <div class="avatar h-8 w-8 shrink-0 rounded-full bg-white/10 flex items-center justify-center text-xs font-semibold"></div>
125
+ <div class="max-w-[85%]">
126
+ <div class="header flex items-center gap-2 mb-1">
127
+ <span class="name text-sm font-semibold"></span>
128
+ <span class="time text-xs text-white/50"></span>
129
+ <button class="copy ml-auto hidden md:inline-flex items-center gap-1 px-2.5 py-1 rounded-md bg-white/5 border border-white/10 text-xs hover:bg-white/10 transition-opacity opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3.5 h-3.5"><path d="M16 1H4a2 2 0 0 0-2 2v12h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z"/></svg>Copy</button>
130
+ </div>
131
+ <div class="bubble rounded-2xl px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap"></div>
132
+ </div>
133
+ </div>
134
+ </template>
135
+
136
+ <script>
137
+ const BASE='https://834b4129b12c.ngrok-free.app';
138
+ const ENDPOINT='/MultiModel';
139
+ const MODELS=['Gemini','OpenAi','Meta','Alibaba'];
140
+ const LOGOS={
141
+ Gemini:'https://cdn.simpleicons.org/google/ffffff',
142
+ OpenAi:'https://cdn.simpleicons.org/openai/ffffff',
143
+ Meta:'https://cdn.simpleicons.org/meta/ffffff',
144
+ Alibaba:'https://cdn.simpleicons.org/alibabacloud/ffffff'
145
+ };
146
+ const AVATAR_BG={
147
+ Gemini:'bg-gradient-to-br from-fuchsia-500/30 to-sky-500/30',
148
+ OpenAi:'bg-emerald-500/30',
149
+ Meta:'bg-blue-500/30',
150
+ Alibaba:'bg-amber-500/30'
151
+ };
152
+ const promptEl=document.getElementById('prompt');
153
+ const sendBtn=document.getElementById('send');
154
+ const setBtn=document.getElementById('setPrompt');
155
+ const statusEl=document.getElementById('status');
156
+ const exportBtn=document.getElementById('export');
157
+ const clearBtn=document.getElementById('clear');
158
+ const usageEl=document.getElementById('usage');
159
+
160
+ let lastResponse=null; let chats=0; function bumpUsage(){ chats++; if(usageEl) usageEl.textContent=chats+'/25'; }
161
+
162
+ function setStatus(msg,type='info'){ statusEl.className='px-4 sm:px-6 lg:px-8 pb-4 text-sm '+(type==='error'?'text-red-400':'text-white/70'); statusEl.textContent=msg; statusEl.classList.remove('hidden'); }
163
+ function clearStatus(){ statusEl.classList.add('hidden'); }
164
+ function pane(id){ return document.getElementById('pane-'+id); }
165
+ function col(id){ return document.getElementById('col-'+id); }
166
+ function now(){ return new Date().toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'}); }
167
+ function decodeEntities(s){const ta=document.createElement('textarea'); ta.innerHTML=s; return ta.value;}
168
+
169
+ function scrollToBottom(el){ try{ el.scrollTo({top: el.scrollHeight, behavior:'smooth'}); }catch{ el.scrollTop = el.scrollHeight; } }
170
+
171
+ function typeAssistant(el, raw, done){
172
+ const tokens = raw.split(/(\s+)/); // keep spaces
173
+ const total = tokens.length; const perTick = Math.max(1, Math.ceil(total/180)); // ~180 steps max
174
+ el.textContent='';
175
+ const caret=document.createElement('span'); caret.className='caret'; el.appendChild(caret);
176
+ let i=0; function tick(){
177
+ for(let k=0;k<perTick && i<total;k++,i++){
178
+ // insert before caret to keep it at the end
179
+ caret.before(document.createTextNode(tokens[i]));
180
+ }
181
+ const scroller = el.closest('.overflow-y-auto, .scroll-area'); if(scroller) scrollToBottom(scroller);
182
+ if(i<total){ requestAnimationFrame(()=> setTimeout(tick, 16)); }
183
+ else { caret.remove(); done && done(); }
184
+ }
185
+ tick();
186
+ }
187
+
188
+ function addMessageTo(container,{role,name,text}){
189
+ const tpl=document.getElementById('msg-template'); const node=tpl.content.firstElementChild.cloneNode(true);
190
+ const avatar=node.querySelector('.avatar'); const nameEl=node.querySelector('.name'); const timeEl=node.querySelector('.time'); const bubble=node.querySelector('.bubble'); const copyBtn=node.querySelector('.copy');
191
+ nameEl.textContent=name; timeEl.textContent=now();
192
+ if(role==='user'){ node.classList.add('flex-row-reverse'); avatar.textContent='You'.slice(0,2); bubble.className+=' bg-brand text-black rounded-br-md'; node.querySelector('.header').classList.add('flex-row-reverse','gap-2'); copyBtn.classList.add('hidden'); }
193
+ else { avatar.innerHTML=`<span class="inline-flex h-8 w-8 items-center justify-center rounded-full ${AVATAR_BG[name]||'bg-white/10'} ring-1 ring-white/10"><img src="${LOGOS[name]||'https://cdn.simpleicons.org/circle/ffffff'}" alt="${name}" class="h-4 w-4"/></span>`; bubble.className+=' bg-white/5 border border-white/10'; copyBtn.addEventListener('click',()=>{navigator.clipboard.writeText(text); setStatus('Copied '+name+' response.'); setTimeout(clearStatus,1200);}); }
194
+ // Markdown rendering with sanitization (supports tables, lists, code)
195
+ const raw=decodeEntities(text).replace(/\u0000/g,'');
196
+ if(role==='user'){
197
+ bubble.innerHTML=DOMPurify.sanitize(raw).replace(/\n/g,'<br/>');
198
+ } else {
199
+ // type plain text first, then replace with rich markdown
200
+ typeAssistant(bubble, raw, ()=>{ marked.setOptions({gfm:true, breaks:true}); bubble.innerHTML = DOMPurify.sanitize(marked.parse(raw)); });
201
+ }
202
+ container.appendChild(node);
203
+ // autoscroll
204
+ const scrollEl = container.closest('.overflow-y-auto, .scroll-area') || container;
205
+ if(scrollEl) { scrollToBottom(scrollEl); }
206
+ }
207
+
208
+ function addMessage(targets,{role,name,text}){
209
+ // mobile panes
210
+ targets.forEach(t=>{ const p=pane(t); if(p) addMessageTo(p,{role,name,text}); });
211
+ // desktop columns (skip All)
212
+ targets.filter(t=>t!=='All').forEach(t=>{ const c=col(t); if(c) addMessageTo(c,{role,name,text}); });
213
+ }
214
+
215
+ function setActive(tab){
216
+ document.querySelectorAll('.tab').forEach(b=>{ b.classList.remove('bg-white/10','text-white'); if(b.dataset.tab===tab) b.classList.add('bg-white/10','text-white'); });
217
+ // Mobile panes
218
+ document.querySelectorAll('.pane').forEach(p=>p.classList.add('hidden')); if(pane(tab)) pane(tab).classList.remove('hidden');
219
+ // Desktop grid toggle
220
+ const grid=document.getElementById('grid');
221
+ if(!grid) return;
222
+ const cols=[...grid.querySelectorAll('.col')];
223
+ if(tab==='All'){
224
+ grid.classList.remove('xl:grid-cols-1');
225
+ grid.classList.add('xl:grid-cols-4');
226
+ cols.forEach(c=>{ c.classList.remove('hidden'); c.classList.remove('xl:col-span-4'); });
227
+ requestAnimationFrame(()=> scrollToBottom(grid));
228
+ } else {
229
+ grid.classList.remove('xl:grid-cols-4');
230
+ grid.classList.add('xl:grid-cols-1');
231
+ cols.forEach(c=>{ const isMatch=c.querySelector('.font-semibold')?.textContent===tab; c.classList.toggle('hidden', !isMatch); c.classList.toggle('xl:col-span-4', isMatch); if(isMatch){ const target=document.getElementById('col-'+tab); requestAnimationFrame(()=> scrollToBottom(target)); } });
232
+ }
233
+ }
234
+
235
+ async function setPrompt(){
236
+ const q=promptEl.value.trim(); if(!q){ setStatus('Enter text to clean first.', 'error'); return; }
237
+ setStatus('Cleaning prompt...', 'info');
238
+ setBtn?.setAttribute('disabled','true'); setBtn && (setBtn.textContent='Cleaning...');
239
+ try{
240
+ const url=BASE+'/set_prompt?text='+encodeURIComponent(q);
241
+ const res=await fetch(url,{method:'GET', headers:{'Accept':'application/json','ngrok-skip-browser-warning':'1'}});
242
+ if(!res.ok) throw new Error('HTTP '+res.status);
243
+ const ct=res.headers.get('content-type')||'';
244
+ let data; if(ct.includes('application/json')){ data=await res.json(); } else { const txt=await res.text(); try{ data=JSON.parse(txt); } catch{ data={ _raw: txt }; } }
245
+ let cleaned = data['Clean Prompt'] || data.cleanPrompt || data.cleaned || '';
246
+ if(!cleaned && typeof data._raw==='string'){
247
+ const m=/\"Clean Prompt\"\s*:\s*\"([\s\S]*?)\"/.exec(data._raw); if(m) cleaned=m[1];
248
+ }
249
+ if(cleaned){ promptEl.value=cleaned; promptEl.focus(); promptEl.setSelectionRange(cleaned.length, cleaned.length); setStatus('Prompt set.', 'info'); setTimeout(clearStatus, 1000); }
250
+ else { setStatus('No cleaned prompt returned (got non‑JSON or HTML).', 'error'); }
251
+ } catch(e){ setStatus('Set Prompt failed: '+(e.message||e), 'error'); }
252
+ finally { setBtn?.removeAttribute('disabled'); setBtn && (setBtn.textContent='Set Prompt'); }
253
+ }
254
+
255
+ async function query(){
256
+ const q=promptEl.value.trim(); if(!q){setStatus('Enter a message.', 'error');return}
257
+ clearStatus(); bumpUsage(); const targets=['All',...MODELS];
258
+ addMessage(targets,{role:'user', name:'You', text:q}); promptEl.value=''; sendBtn.disabled=true; sendBtn.textContent='Sending...';
259
+ try{
260
+ const url=BASE+ENDPOINT+'?text='+encodeURIComponent(q);
261
+ const res=await fetch(url,{method:'GET', headers:{'Accept':'application/json','ngrok-skip-browser-warning':'1'}});
262
+ if(!res.ok) throw new Error('HTTP '+res.status);
263
+ const ct=res.headers.get('content-type')||'';
264
+ let data;
265
+ if(ct.includes('application/json')){ data=await res.json(); }
266
+ else { const txt=await res.text(); try{ data=JSON.parse(txt); } catch{ data={ _raw: txt }; } }
267
+ lastResponse=data;
268
+ const keys = Object.keys(data).filter(k=>k!=="_raw");
269
+ if(!keys.length){
270
+ if(data._raw?.startsWith('<!DOCTYPE')) setStatus('Server returned HTML (likely CORS/ngrok warning). Enable CORS or add allowed origin.', 'error');
271
+ else setStatus('No JSON payload from server.', 'error');
272
+ return;
273
+ }
274
+ for(const key of keys){ const text=String(data[key]||''); addMessage(['All', key], {role:'assistant', name:key, text}); }
275
+ }catch(e){ setStatus('Request failed. Check server/CORS. '+(e.message||e),'error'); }
276
+ finally{ sendBtn.disabled=false; sendBtn.textContent='Send'; }
277
+ }
278
+
279
+ // Tabs (mobile)
280
+ document.addEventListener('click', (e)=>{ const btn=e.target.closest('.tab'); if(btn){ setActive(btn.dataset.tab); } }); setActive('All');
281
+ // Actions
282
+ sendBtn.addEventListener('click',query); setBtn?.addEventListener('click', setPrompt); promptEl.addEventListener('keydown',e=>{ if(e.key==='Enter'){ if(e.shiftKey){ return; } e.preventDefault(); query(); } });
283
+ exportBtn?.addEventListener('click',()=>{ if(!lastResponse){setStatus('Nothing to export.', 'error');return} const blob=new Blob([JSON.stringify(lastResponse,null,2)],{type:'application/json'}); const a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='multimodel-response.json'; a.click(); });
284
+ clearBtn.addEventListener('click',e=>{ e.preventDefault(); document.querySelectorAll('.pane').forEach(p=>p.innerHTML=''); ['Gemini','OpenAi','Meta','Alibaba'].forEach(m=>{ const c=col(m); if(c) c.innerHTML=''; }); clearStatus(); });
285
+ document.getElementById('newChat')?.addEventListener('click',()=>{ document.querySelectorAll('.pane').forEach(p=>p.innerHTML=''); ['Gemini','OpenAi','Meta','Alibaba'].forEach(m=>{ const c=col(m); if(c) c.innerHTML=''; }); clearStatus(); });
286
+ </script>
287
+ </body>
288
  </html>