Hugging Face's logo

Spaces:
Philips656
/
newapi
Runtime error

App Files Community
Philips656 commited on
Commit
abb43a8
·
verified ·
1 Parent(s): e769df8

Delete index.html

Browse files
Files changed (1) hide show
  1. index.html +0 -274
index.html DELETED
@@ -1,274 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>NEXUS | Secure AI Gateway</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
9
- <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
10
- <style>
11
- body { font-family: 'Rajdhani', sans-serif; background-color: #030303; color: #e0e0e0; }
12
- .mono { font-family: 'JetBrains Mono', monospace; }
13
- .glass { background: rgba(20, 20, 20, 0.6); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); }
14
- .neon-border { box-shadow: 0 0 10px rgba(0, 255, 136, 0.1), inset 0 0 5px rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.3); }
15
- .neon-text { text-shadow: 0 0 10px rgba(0, 255, 136, 0.5); }
16
- .card-hover:hover { transform: translateY(-2px); border-color: #00ff88; box-shadow: 0 0 20px rgba(0, 255, 136, 0.2); }
17
- /* Transitions */
18
- .page { display: none; opacity: 0; transition: opacity 0.3s ease-in-out; }
19
- .page.active { display: block; opacity: 1; }
20
- </style>
21
- </head>
22
- <body class="h-screen flex flex-col overflow-hidden bg-[url('https://res.cloudinary.com/dflj6x2d3/image/upload/v1709664556/grid-bg_dark_k9w2x8.png')] bg-cover">
23
-
24
- <nav class="glass border-b-0 p-4 flex justify-between items-center z-50">
25
- <div class="flex items-center gap-3">
26
- <div class="w-8 h-8 bg-gradient-to-br from-green-400 to-blue-600 rounded flex items-center justify-center font-bold text-black neon-border">N</div>
27
- <h1 class="text-2xl font-bold tracking-widest text-white">NEXUS<span class="text-green-500 text-sm align-top"> v2.0</span></h1>
28
- </div>
29
- <div class="flex gap-4 text-sm mono">
30
- <button onclick="showPage('marketplace')" class="hover:text-green-400 transition">MARKETPLACE</button>
31
- <button onclick="showPage('chat')" class="hover:text-green-400 transition">TERMINAL</button>
32
- <div id="auth-buttons" class="flex gap-4 border-l border-gray-700 pl-4">
33
- <button onclick="showPage('login')" class="text-gray-400 hover:text-white">LOGIN</button>
34
- <button onclick="showPage('register')" class="text-green-400 hover:text-green-300">REGISTER</button>
35
- </div>
36
- <div id="user-info" class="hidden flex gap-3 items-center border-l border-gray-700 pl-4">
37
- <span id="username-display" class="text-blue-400">User</span>
38
- <button onclick="logout()" class="text-red-400 hover:text-red-300 text-xs">[LOGOUT]</button>
39
- </div>
40
- </div>
41
- </nav>
42
-
43
- <div class="flex-1 overflow-hidden relative">
44
-
45
- <div id="login" class="page active h-full flex items-center justify-center">
46
- <div class="glass p-8 rounded-2xl w-96 space-y-6 neon-border">
47
- <h2 class="text-3xl font-bold text-center mb-8">AUTHENTICATE</h2>
48
- <input type="text" id="login-user" placeholder="Username" class="w-full bg-black/50 border border-gray-700 p-3 rounded text-white focus:border-green-500 outline-none">
49
- <input type="password" id="login-pass" placeholder="Password" class="w-full bg-black/50 border border-gray-700 p-3 rounded text-white focus:border-green-500 outline-none">
50
- <button onclick="handleLogin()" class="w-full bg-green-600 hover:bg-green-500 text-black font-bold p-3 rounded transition">ACCESS SYSTEM</button>
51
- <p class="text-center text-gray-500 text-xs cursor-pointer hover:text-green-400" onclick="showPage('register')">Request New Identity >></p>
52
- </div>
53
- </div>
54
-
55
- <div id="register" class="page h-full flex items-center justify-center">
56
- <div class="glass p-8 rounded-2xl w-96 space-y-6 border border-gray-800">
57
- <h2 class="text-3xl font-bold text-center text-blue-400">NEW IDENTITY</h2>
58
- <input type="text" id="reg-user" placeholder="Username" class="w-full bg-black/50 border border-gray-700 p-3 rounded text-white outline-none">
59
- <input type="password" id="reg-pass" placeholder="Password" class="w-full bg-black/50 border border-gray-700 p-3 rounded text-white outline-none">
60
- <button onclick="handleRegister()" class="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold p-3 rounded transition">INITIALIZE</button>
61
- <p class="text-center text-gray-500 text-xs cursor-pointer hover:text-blue-400" onclick="showPage('login')"><< Return to Login</p>
62
- </div>
63
- </div>
64
-
65
- <div id="marketplace" class="page h-full overflow-y-auto p-8">
66
- <div class="max-w-6xl mx-auto">
67
- <h2 class="text-4xl font-bold mb-2">NEURAL MARKETPLACE</h2>
68
- <p class="text-gray-400 mb-8 mono text-sm">AVAILABLE MODELS :: SELECT MODULE TO LOAD</p>
69
- <div id="model-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
70
- <div class="text-center w-full col-span-3 text-gray-500 animate-pulse">Scanning Neural Network...</div>
71
- </div>
72
- </div>
73
- </div>
74
-
75
- <div id="chat" class="page h-full flex flex-col">
76
- <div id="chat-box" class="flex-1 overflow-y-auto p-6 space-y-6 max-w-5xl mx-auto w-full">
77
- <div class="bg-blue-900/20 border border-blue-500/30 p-4 rounded-lg text-blue-200 text-sm mono">
78
- SYSTEM: Connected via TiDB Shield. Logging Active.
79
- </div>
80
- </div>
81
-
82
- <div class="p-4 glass border-t border-gray-800">
83
- <div class="max-w-4xl mx-auto flex gap-4">
84
- <select id="model-selector" class="bg-black/50 border border-gray-700 text-gray-300 text-xs rounded px-2 outline-none">
85
- <option value="gpt-3.5-turbo">GPT-3.5</option>
86
- </select>
87
- <input id="user-input" type="text" placeholder="Enter command..." class="flex-1 bg-black/50 border border-gray-700 rounded px-4 text-white outline-none focus:border-green-500" onkeydown="if(event.key === 'Enter') sendMessage()">
88
- <button onclick="sendMessage()" class="bg-green-600 text-black font-bold px-6 rounded hover:bg-green-500">SEND</button>
89
- </div>
90
- </div>
91
- </div>
92
-
93
- </div>
94
-
95
- <div id="toast" class="fixed top-4 right-4 bg-red-600 text-white px-6 py-3 rounded shadow-lg hidden translate-x-full transition-transform">Error</div>
96
-
97
- <script>
98
- // --- STATE MANAGEMENT ---
99
- let TOKEN = localStorage.getItem('nexus_token');
100
- let USER = localStorage.getItem('nexus_user');
101
-
102
- if(TOKEN) updateAuthUI(true);
103
-
104
- function showPage(id) {
105
- document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
106
- document.getElementById(id).classList.add('active');
107
- if(id === 'marketplace') fetchModels();
108
- }
109
-
110
- function updateAuthUI(isLoggedIn) {
111
- const authBtns = document.getElementById('auth-buttons');
112
- const userInfo = document.getElementById('user-info');
113
- if (isLoggedIn) {
114
- authBtns.classList.add('hidden');
115
- userInfo.classList.remove('hidden');
116
- document.getElementById('username-display').textContent = USER || 'Agent';
117
- showPage('marketplace');
118
- } else {
119
- authBtns.classList.remove('hidden');
120
- userInfo.classList.add('hidden');
121
- }
122
- }
123
-
124
- function toast(msg, type='error') {
125
- const t = document.getElementById('toast');
126
- t.textContent = msg;
127
- t.className = `fixed top-20 right-4 px-6 py-3 rounded shadow-lg transition-transform z-50 ${type === 'success' ? 'bg-green-600 text-black' : 'bg-red-600 text-white'}`;
128
- t.classList.remove('hidden', 'translate-x-full');
129
- setTimeout(() => t.classList.add('translate-x-full'), 3000);
130
- }
131
-
132
- // --- API INTERACTIONS ---
133
-
134
- async function handleLogin() {
135
- const u = document.getElementById('login-user').value;
136
- const p = document.getElementById('login-pass').value;
137
-
138
- // NOTE: NewAPI default login endpoint
139
- try {
140
- const res = await fetch('/api/user/login', {
141
- method: 'POST',
142
- headers: {'Content-Type': 'application/json'},
143
- body: JSON.stringify({username: u, password: p})
144
- });
145
- const data = await res.json();
146
-
147
- if (data.success) {
148
- TOKEN = data.data.token || "dummy-token"; // NewAPI sometimes returns session cookie, sometimes token
149
- USER = u;
150
- localStorage.setItem('nexus_token', TOKEN);
151
- localStorage.setItem('nexus_user', USER);
152
- updateAuthUI(true);
153
- toast('Welcome back, Agent.', 'success');
154
- } else {
155
- toast(data.message || 'Login Failed');
156
- }
157
- } catch (e) { toast('Connection Error'); }
158
- }
159
-
160
- async function handleRegister() {
161
- const u = document.getElementById('reg-user').value;
162
- const p = document.getElementById('reg-pass').value;
163
-
164
- try {
165
- const res = await fetch('/api/user/register', {
166
- method: 'POST',
167
- headers: {'Content-Type': 'application/json'},
168
- body: JSON.stringify({username: u, password: p})
169
- });
170
- const data = await res.json();
171
- if (data.success) {
172
- toast('Identity Created. Please Login.', 'success');
173
- showPage('login');
174
- } else {
175
- toast(data.message || 'Registration Failed');
176
- }
177
- } catch (e) { toast('Connection Error'); }
178
- }
179
-
180
- async function fetchModels() {
181
- try {
182
- // Fetch from standard OpenAI models endpoint
183
- const res = await fetch('/v1/models', {
184
- headers: { 'Authorization': `Bearer ${TOKEN}` }
185
- });
186
- const data = await res.json();
187
-
188
- const grid = document.getElementById('model-grid');
189
- grid.innerHTML = '';
190
- const selector = document.getElementById('model-selector');
191
- selector.innerHTML = '';
192
-
193
- data.data.forEach(model => {
194
- // Add to Grid
195
- grid.innerHTML += `
196
- <div class="glass p-6 rounded-xl card-hover cursor-pointer relative overflow-hidden group" onclick="selectModel('${model.id}')">
197
- <div class="absolute top-0 right-0 p-2 opacity-10 group-hover:opacity-100 transition">
198
- <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
199
- </div>
200
- <h3 class="text-xl font-bold text-white mb-2">${model.id}</h3>
201
- <p class="text-gray-400 text-xs mono mb-4">PROVIDER: ${model.owned_by || 'UNKNOWN'}</p>
202
- <button class="w-full border border-green-600 text-green-400 py-2 rounded text-xs hover:bg-green-600 hover:text-black transition">INITIALIZE SESSION</button>
203
- </div>
204
- `;
205
- // Add to Dropdown
206
- selector.innerHTML += `<option value="${model.id}">${model.id}</option>`;
207
- });
208
- } catch (e) {
209
- console.error(e);
210
- }
211
- }
212
-
213
- function selectModel(id) {
214
- document.getElementById('model-selector').value = id;
215
- showPage('chat');
216
- toast(`Switched to ${id}`, 'success');
217
- }
218
-
219
- function logout() {
220
- localStorage.clear();
221
- location.reload();
222
- }
223
-
224
- // --- CHAT LOGIC ---
225
- async function sendMessage() {
226
- const text = document.getElementById('user-input').value;
227
- if(!text) return;
228
-
229
- const box = document.getElementById('chat-box');
230
- document.getElementById('user-input').value = '';
231
-
232
- // Add User Msg
233
- box.innerHTML += `<div class="flex justify-end"><div class="bg-green-900/20 border border-green-600 text-green-100 p-3 rounded-xl max-w-[80%]">${text}</div></div>`;
234
-
235
- // Loading
236
- const loadId = 'load-'+Date.now();
237
- box.innerHTML += `<div id="${loadId}" class="text-gray-500 text-xs mono animate-pulse">Processing...</div>`;
238
- box.scrollTo(0, box.scrollHeight);
239
-
240
- const model = document.getElementById('model-selector').value;
241
-
242
- try {
243
- const res = await fetch('/v1/chat/completions', {
244
- method: 'POST',
245
- headers: {
246
- 'Content-Type': 'application/json',
247
- 'Authorization': `Bearer ${TOKEN}` // Uses the User's own token
248
- },
249
- body: JSON.stringify({
250
- model: model,
251
- messages: [{role: 'user', content: text}]
252
- })
253
- });
254
-
255
- const data = await res.json();
256
- document.getElementById(loadId).remove();
257
-
258
- if (res.status === 403) {
259
- box.innerHTML += `<div class="bg-red-900/50 border border-red-500 text-red-200 p-4 rounded mb-2">🚫 SYSTEM ALERT: ${data.error.message}</div>`;
260
- } else if (data.choices) {
261
- const reply = marked.parse(data.choices[0].message.content);
262
- box.innerHTML += `<div class="flex justify-start"><div class="glass p-4 rounded-xl max-w-[80%] prose prose-invert prose-sm">${reply}</div></div>`;
263
- } else {
264
- box.innerHTML += `<div class="text-red-400 text-xs">Error: ${JSON.stringify(data)}</div>`;
265
- }
266
- } catch (e) {
267
- document.getElementById(loadId).remove();
268
- box.innerHTML += `<div class="text-red-500">Connection Failed</div>`;
269
- }
270
- box.scrollTo(0, box.scrollHeight);
271
- }
272
- </script>
273
- </body>
274
- </html>