Hugging Face's logo

Spaces:
Fabuilds
/
sovereign-node
Sleeping

App Files Community
Fabuilds commited on
Commit
3eb08b0
·
verified ·
1 Parent(s): 3cb6c22

Delete dashboard.html

Browse files
Files changed (1) hide show
  1. dashboard.html +0 -656
dashboard.html DELETED
@@ -1,656 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>SOVEREIGN NODE | 0x52 CONTROL</title>
8
- <style>
9
- :root {
10
- --bg: #050505;
11
- --glass: rgba(255, 255, 255, 0.05);
12
- --border: rgba(255, 255, 255, 0.1);
13
- --text: #e0e0e0;
14
- --accent: #00ff9d;
15
- /* Chiral Green */
16
- --accent-dim: rgba(0, 255, 157, 0.2);
17
- --logic: #ff0055;
18
- --creative: #00ccff;
19
- --memory: #ffcc00;
20
- --ethics: #aa00ff;
21
- }
22
-
23
- body {
24
- background-color: var(--bg);
25
- color: var(--text);
26
- font-family: 'Courier New', monospace;
27
- margin: 0;
28
- padding: 20px;
29
- display: grid;
30
- grid-template-columns: 350px 1fr;
31
- gap: 20px;
32
- height: 100vh;
33
- box-sizing: border-box;
34
- overflow: hidden;
35
- }
36
-
37
- /* --- LEFT PANEL: STEERING --- */
38
- #steering-panel {
39
- background: var(--glass);
40
- border: 1px solid var(--border);
41
- border-radius: 8px;
42
- padding: 15px;
43
- overflow-y: auto;
44
- backdrop-filter: blur(10px);
45
- display: flex;
46
- flex-direction: column;
47
- gap: 20px;
48
- }
49
-
50
- .section-header {
51
- font-size: 14px;
52
- font-weight: bold;
53
- border-bottom: 1px solid var(--border);
54
- padding-bottom: 5px;
55
- margin-bottom: 10px;
56
- text-transform: uppercase;
57
- letter-spacing: 2px;
58
- }
59
-
60
- .slider-group {
61
- margin-bottom: 15px;
62
- }
63
-
64
- .slider-group h3 {
65
- margin: 0 0 10px 0;
66
- font-size: 12px;
67
- color: var(--text);
68
- display: flex;
69
- align-items: center;
70
- gap: 8px;
71
- }
72
-
73
- .dot {
74
- width: 8px;
75
- height: 8px;
76
- border-radius: 50%;
77
- display: inline-block;
78
- }
79
-
80
- .dot-0 {
81
- background: var(--logic);
82
- box-shadow: 0 0 5px var(--logic);
83
- }
84
-
85
- .dot-1 {
86
- background: var(--creative);
87
- box-shadow: 0 0 5px var(--creative);
88
- }
89
-
90
- .dot-2 {
91
- background: var(--memory);
92
- box-shadow: 0 0 5px var(--memory);
93
- }
94
-
95
- .dot-3 {
96
- background: var(--ethics);
97
- box-shadow: 0 0 5px var(--ethics);
98
- }
99
-
100
- .slider-row {
101
- display: flex;
102
- align-items: center;
103
- gap: 10px;
104
- margin-bottom: 5px;
105
- font-size: 11px;
106
- }
107
-
108
- .slider-row span {
109
- width: 40px;
110
- text-align: right;
111
- opacity: 0.7;
112
- }
113
-
114
- input[type="range"] {
115
- flex-grow: 1;
116
- -webkit-appearance: none;
117
- height: 4px;
118
- background: var(--border);
119
- border-radius: 2px;
120
- outline: none;
121
- }
122
-
123
- input[type="range"]::-webkit-slider-thumb {
124
- -webkit-appearance: none;
125
- width: 12px;
126
- height: 12px;
127
- border-radius: 50%;
128
- background: var(--text);
129
- cursor: pointer;
130
- transition: background 0.2s;
131
- }
132
-
133
- input[type="range"]:hover::-webkit-slider-thumb {
134
- background: var(--accent);
135
- }
136
-
137
- /* --- RIGHT PANEL: CHAT & VISUALS --- */
138
- #main-panel {
139
- display: grid;
140
- grid-template-rows: 1fr 200px;
141
- gap: 20px;
142
- height: 100%;
143
- }
144
-
145
- #chat-window {
146
- background: var(--glass);
147
- border: 1px solid var(--border);
148
- border-radius: 8px;
149
- display: flex;
150
- flex-direction: column;
151
- overflow: hidden;
152
- }
153
-
154
- #messages {
155
- flex-grow: 1;
156
- padding: 20px;
157
- overflow-y: auto;
158
- display: flex;
159
- flex-direction: column;
160
- gap: 15px;
161
- }
162
-
163
- .msg {
164
- max-width: 80%;
165
- padding: 10px 15px;
166
- border-radius: 4px;
167
- font-size: 13px;
168
- line-height: 1.4;
169
- }
170
-
171
- .msg.user {
172
- align-self: flex-end;
173
- background: rgba(255, 255, 255, 0.1);
174
- border: 1px solid var(--border);
175
- }
176
-
177
- .msg.system {
178
- align-self: flex-start;
179
- background: rgba(0, 0, 0, 0.3);
180
- border: 1px solid var(--accent-dim);
181
- color: var(--accent);
182
- }
183
-
184
- .msg-meta {
185
- font-size: 10px;
186
- opacity: 0.5;
187
- margin-top: 5px;
188
- display: block;
189
- }
190
-
191
- #input-area {
192
- padding: 15px;
193
- border-top: 1px solid var(--border);
194
- display: flex;
195
- gap: 10px;
196
- background: rgba(0, 0, 0, 0.2);
197
- }
198
-
199
- input[type="text"] {
200
- flex-grow: 1;
201
- background: transparent;
202
- border: 1px solid var(--border);
203
- color: var(--text);
204
- padding: 10px;
205
- font-family: inherit;
206
- outline: none;
207
- }
208
-
209
- input[type="text"]:focus {
210
- border-color: var(--accent);
211
- }
212
-
213
- button {
214
- background: var(--accent);
215
- color: #000;
216
- border: none;
217
- padding: 10px 20px;
218
- font-weight: bold;
219
- cursor: pointer;
220
- text-transform: uppercase;
221
- }
222
-
223
- button:hover {
224
- box-shadow: 0 0 10px var(--accent);
225
- }
226
-
227
- #visualizer-panel {
228
- background: var(--glass);
229
- border: 1px solid var(--border);
230
- border-radius: 8px;
231
- position: relative;
232
- overflow: hidden;
233
- }
234
-
235
- canvas {
236
- width: 100%;
237
- height: 100%;
238
- }
239
-
240
- #status-bar {
241
- position: absolute;
242
- top: 10px;
243
- left: 10px;
244
- font-size: 10px;
245
- color: var(--accent);
246
- }
247
- </style>
248
- </head>
249
-
250
- <body>
251
-
252
- <!-- LEFT: STEERING -->
253
- <div id="steering-panel">
254
- <div class="section-header">MASTER CONTROL</div>
255
-
256
- <div class="slider-group">
257
- <h3>LOGIC BIAS</h3>
258
- <input type="range" id="master-0" min="0.1" max="5.0" step="0.1" value="1.0"
259
- oninput="updateMaster(0, this.value)">
260
- </div>
261
- <div class="slider-group">
262
- <h3>CREATIVITY BIAS</h3>
263
- <input type="range" id="master-1" min="0.1" max="5.0" step="0.1" value="1.0"
264
- oninput="updateMaster(1, this.value)">
265
- </div>
266
- <div class="slider-group">
267
- <h3>MEMORY BIAS</h3>
268
- <input type="range" id="master-2" min="0.1" max="5.0" step="0.1" value="1.0"
269
- oninput="updateMaster(2, this.value)">
270
- </div>
271
- <div class="slider-group">
272
- <h3>ETHICS BIAS</h3>
273
- <input type="range" id="master-3" min="0.1" max="5.0" step="0.1" value="1.0"
274
- oninput="updateMaster(3, this.value)">
275
- </div>
276
-
277
- <button onclick="toggleAdvanced()" style="margin-top:20px; font-size: 10px; background: #333;">TOGGLE
278
- FINE-TUNING (32-EDGE)</button>
279
-
280
- <div id="advanced-controls"
281
- style="display:none; margin-top: 20px; border-top: 1px solid var(--border); padding-top:10px;">
282
- <div class="section-header" style="color: #666;">Geometric Mixing Console</div>
283
- <div id="sliders-container">
284
- <!-- Populated via JS -->
285
- Loading Structure...
286
- </div>
287
- <button onclick="resetSliders()"
288
- style="margin-top: 10px; background: transparent; border: 1px solid var(--border); color: var(--text);">Reset
289
- to Neutral</button>
290
- </div>
291
- </div>
292
-
293
- <!-- RIGHT: MAIN -->
294
- <div id="main-panel">
295
-
296
- <!-- TABS -->
297
- <div style="display:flex; gap:10px; margin-bottom:10px;">
298
- <button onclick="setMode('CHAT')" id="btn-chat" style="flex:1;">REASON (Output)</button>
299
- <button onclick="setMode('ANALYZE')" id="btn-analyze" style="flex:1; background:rgba(255,255,255,0.1);">SCAN
300
- (Input)</button>
301
- </div>
302
-
303
- <!-- CHAT MODE -->
304
- <div id="chat-window">
305
- <div id="messages">
306
- <div class="msg system">
307
- [SOVEREIGN NODE ONLINE]
308
- <br>Dual-System Architecture Ready.
309
- <br>Connected to Port 5200.
310
- </div>
311
- </div>
312
- <div id="input-area">
313
- <input type="text" id="query-input" placeholder="Enter query for the Sovereign..."
314
- onkeydown="if(event.key==='Enter') sendQuery()">
315
- <button onclick="sendQuery()">Reason</button>
316
- </div>
317
- </div>
318
-
319
- <!-- ANALYZE MODE -->
320
- <div id="analyze-window"
321
- style="display:none; flex-direction:column; background:var(--glass); border:1px solid var(--border); border-radius:8px; flex-grow:1; overflow:hidden;">
322
- <textarea id="analyze-input" placeholder="PASTE CODE OR TEXT HERE TO SCAN GEOMETRY..."
323
- style="flex-grow:1; background:transparent; color:var(--text); border:none; padding:20px; font-family:'Courier New'; resize:none; outline:none;"></textarea>
324
- <div style="padding:15px; border-top:1px solid var(--border); display:flex; gap:10px;">
325
- <button onclick="analyzeText()" style="width:100%;">INITIATE CHIRAL SCAN</button>
326
- </div>
327
- <div id="scan-results"
328
- style="padding:15px; background:rgba(0,0,0,0.5); font-size:12px; height:100px; overflow-y:auto; font-family:'Courier New';">
329
- Ready to Scan.
330
- </div>
331
- </div>
332
-
333
- <!-- VISUALIZER -->
334
- <div id="visualizer-panel">
335
- <div id="status-bar">TESSERACT STATE: IDLE</div>
336
- <canvas id="tesseract-canvas"></canvas>
337
- </div>
338
- </div>
339
-
340
- <script>
341
- const API_URL = "http://127.0.0.1:5200";
342
- const TOKEN = "0x528-A2A-SOVEREIGN";
343
-
344
- let EDGES = [];
345
- let SLIDER_VALUES = new Array(32).fill(1.0);
346
-
347
- function setMode(mode) {
348
- document.getElementById('chat-window').style.display = mode === 'CHAT' ? 'flex' : 'none';
349
- document.getElementById('analyze-window').style.display = mode === 'ANALYZE' ? 'flex' : 'none';
350
-
351
- document.getElementById('btn-chat').style.background = mode === 'CHAT' ? 'var(--accent)' : 'rgba(255,255,255,0.1)';
352
- document.getElementById('btn-chat').style.color = mode === 'CHAT' ? '#000' : '#fff';
353
-
354
- document.getElementById('btn-analyze').style.background = mode === 'ANALYZE' ? 'var(--accent)' : 'rgba(255,255,255,0.1)';
355
- document.getElementById('btn-analyze').style.color = mode === 'ANALYZE' ? '#000' : '#fff';
356
- }
357
-
358
- // --- INIT ---
359
- async function init() {
360
- try {
361
- // Fetch Structure
362
- const r = await fetch(`${API_URL}/v1/system/structure`, {
363
- headers: { "X-Chiral-Token": TOKEN }
364
- });
365
- const data = await r.json();
366
- EDGES = data.edges;
367
-
368
- renderSliders(data.edges, data.dimensions);
369
-
370
- // Init Visualizer
371
- initVisualizer();
372
-
373
- // Status
374
- document.getElementById('status-bar').innerText = `SYSTEM CONNECTED: ${data.total_edges} Edges Loaded.`;
375
-
376
- } catch (e) {
377
- console.error(e);
378
- document.getElementById('sliders-container').innerHTML = `<span style="color:red">CONNECTION FAILED: ${e}</span>`;
379
- }
380
- }
381
-
382
- async function analyzeText() {
383
- const text = document.getElementById('analyze-input').value;
384
- if (!text) return;
385
-
386
- document.getElementById('scan-results').innerText = "SCANNING...";
387
-
388
- try {
389
- const r = await fetch(`${API_URL}/v1/analyze`, {
390
- method: 'POST',
391
- headers: {
392
- "Content-Type": "application/json",
393
- "X-Chiral-Token": TOKEN
394
- },
395
- body: JSON.stringify({ text: text })
396
- });
397
-
398
- const data = await r.json();
399
-
400
- const resHTML = `
401
- <strong>CLASSIFICATION: ${data.classification}</strong><br>
402
- Integrity: ${(data.integrity_score * 100).toFixed(1)}% | Tokens: ${data.token_count}<br>
403
- <span style="color:#ff0055">LOGIC: ${(data.geometric_signature[0] * 100).toFixed(0)}%</span> |
404
- <span style="color:#00ccff">CREAT: ${(data.geometric_signature[1] * 100).toFixed(0)}%</span> |
405
- <span style="color:#ffcc00">MEM: ${(data.geometric_signature[2] * 100).toFixed(0)}%</span> |
406
- <span style="color:#aa00ff">ETHIC: ${(data.geometric_signature[3] * 100).toFixed(0)}%</span>
407
- `;
408
-
409
- document.getElementById('scan-results').innerHTML = resHTML;
410
-
411
- // Update Radar
412
- drawRadar(data.geometric_signature);
413
-
414
- } catch (e) {
415
- document.getElementById('scan-results').innerText = "SCAN FAILED: " + e;
416
- }
417
- }
418
-
419
-
420
- function toggleAdvanced() {
421
- const adv = document.getElementById('advanced-controls');
422
- adv.style.display = adv.style.display === 'none' ? 'block' : 'none';
423
- }
424
-
425
- function updateMaster(dimIdx, value) {
426
- const val = parseFloat(value);
427
- // Update all edges matching this dimension
428
- EDGES.forEach(edge => {
429
- if (edge.dimension === dimIdx) {
430
- const slider = document.getElementById(`slider-${edge.edge_index}`);
431
- if (slider) {
432
- slider.value = val;
433
- SLIDER_VALUES[edge.edge_index] = val;
434
- }
435
- }
436
- });
437
- drawTesseract();
438
- }
439
-
440
- function renderSliders(edges, dimensions) {
441
- const container = document.getElementById('sliders-container');
442
- container.innerHTML = "";
443
-
444
- // Group by Dimension
445
- const groups = {};
446
- for (let dim in dimensions) groups[dim] = [];
447
-
448
- edges.forEach(edge => {
449
- if (!groups[edge.dimension]) groups[edge.dimension] = [];
450
- groups[edge.dimension].push(edge);
451
- });
452
-
453
- // Create UI Groups
454
- for (let dim in dimensions) {
455
- const groupDiv = document.createElement('div');
456
- groupDiv.className = 'slider-group';
457
-
458
- const title = document.createElement('h3');
459
- title.innerHTML = `<span class="dot dot-${dim}"></span> ${dimensions[dim]}`;
460
- groupDiv.appendChild(title);
461
-
462
- groups[dim].forEach(edge => {
463
- const row = document.createElement('div');
464
- row.className = 'slider-row';
465
-
466
- const label = document.createElement('span');
467
- label.innerText = `E${edge.edge_index}`;
468
- label.title = `Vertices: ${edge.vertices[0]} -> ${edge.vertices[1]}`;
469
-
470
- const slider = document.createElement('input');
471
- slider.type = 'range';
472
- slider.min = '0.1';
473
- slider.max = '5.0';
474
- slider.step = '0.1';
475
- slider.value = '1.0';
476
- slider.id = `slider-${edge.edge_index}`;
477
-
478
- // Track value changes
479
- slider.addEventListener('input', (e) => {
480
- updateWeight(edge.edge_index, e.target.value);
481
- });
482
-
483
- row.appendChild(label);
484
- row.appendChild(slider);
485
- groupDiv.appendChild(row);
486
- });
487
-
488
- container.appendChild(groupDiv);
489
- }
490
-
491
- // Init weights array
492
- SLIDER_VALUES = new Array(32).fill(1.0);
493
- }
494
-
495
- function updateWeight(index, value) {
496
- SLIDER_VALUES[index] = parseFloat(value);
497
- drawTesseract(); // Redraw
498
- }
499
-
500
- function resetSliders() {
501
- SLIDER_VALUES.fill(1.0);
502
- document.querySelectorAll('input[type="range"]').forEach(el => el.value = 1.0);
503
- drawTesseract();
504
- }
505
-
506
- // --- CHAT ---
507
- async function sendQuery() {
508
- const input = document.getElementById('query-input');
509
- const text = input.value.trim();
510
- if (!text) return;
511
-
512
- // add user msg
513
- addMessage(text, 'user');
514
- input.value = "";
515
-
516
- // Show loading
517
- const loadId = addMessage("Reasoning...", 'system');
518
-
519
- try {
520
- const r = await fetch(`${API_URL}/v1/reason`, {
521
- method: 'POST',
522
- headers: {
523
- "Content-Type": "application/json",
524
- "X-Chiral-Token": TOKEN
525
- },
526
- body: JSON.stringify({
527
- query: text,
528
- steering_weights: SLIDER_VALUES
529
- })
530
- });
531
-
532
- const data = await r.json();
533
-
534
- // Highlight Keywords
535
- let formatted = data.response;
536
- const colors = {
537
- "AXIOM": "#ef4444", "DEDUCE": "#ef4444", "STRUCTURE": "#ef4444", "ORDER": "#ef4444",
538
- "FLUX": "#06b6d4", "SPIRAL": "#06b6d4", "DREAM": "#06b6d4", "ECHO": "#06b6d4", "TWIST": "#06b6d4",
539
- "ANCIENT": "#fbbf24", "RECALL": "#fbbf24", "TRACE": "#fbbf24", "BOND": "#fbbf24", "ROOT": "#fbbf24",
540
- "TRUTH": "#aa00ff", "GUARD": "#aa00ff", "LIGHT": "#aa00ff", "DUTY": "#aa00ff", "ANCHOR": "#aa00ff"
541
- };
542
-
543
- Object.keys(colors).forEach(word => {
544
- const regex = new RegExp(`\\b${word}\\b`, 'gi');
545
- formatted = formatted.replace(regex, `<span style="color:${colors[word]}; font-weight:bold;">${word.toUpperCase()}</span>`);
546
- });
547
-
548
- // Update msg
549
- const meta = `Mode: ${data.mode} | Coherence: ${data.coherence.toFixed(2)}`;
550
- updateMessage(loadId, `${formatted}<span class="msg-meta">${meta}</span>`);
551
-
552
- // Update Radar
553
- if (data.analysis && data.analysis.scores) {
554
- drawRadar(data.analysis.scores);
555
- }
556
-
557
- } catch (e) {
558
- updateMessage(loadId, `ERROR: ${e}`);
559
- }
560
- }
561
-
562
- let msgCount = 0;
563
- function addMessage(html, type) {
564
- const div = document.createElement('div');
565
- div.className = `msg ${type}`;
566
- div.id = `msg-${msgCount++}`;
567
- div.innerHTML = html;
568
- document.getElementById('messages').appendChild(div);
569
- // Scroll down
570
- const win = document.getElementById('messages');
571
- win.scrollTop = win.scrollHeight;
572
- return div.id;
573
- }
574
-
575
- function updateMessage(id, html) {
576
- const div = document.getElementById(id);
577
- if (div) div.innerHTML = html;
578
- }
579
-
580
- // --- VISUALIZER (RADAR CHART) ---
581
- let ctx;
582
- function initVisualizer() {
583
- const canvas = document.getElementById('tesseract-canvas');
584
- canvas.width = canvas.parentElement.offsetWidth;
585
- canvas.height = canvas.parentElement.offsetHeight;
586
- ctx = canvas.getContext('2d');
587
- drawRadar({ 0: 0.25, 1: 0.25, 2: 0.25, 3: 0.25 });
588
- }
589
-
590
- function drawRadar(scores) {
591
- if (!ctx) return;
592
- const w = ctx.canvas.width;
593
- const h = ctx.canvas.height;
594
- const cx = w / 2;
595
- const cy = h / 2;
596
- const r = Math.min(w, h) / 3;
597
-
598
- ctx.clearRect(0, 0, w, h);
599
-
600
- // Shape
601
- const vals = [
602
- scores[0] || 0.1, // Logic (Top)
603
- scores[1] || 0.1, // Creat (Right)
604
- scores[3] || 0.1, // Ethics (Bottom)
605
- scores[2] || 0.1 // Memory (Left)
606
- ];
607
-
608
- // Draw Axes
609
- ctx.strokeStyle = '#333';
610
- ctx.beginPath();
611
- ctx.moveTo(cx, cy - r); ctx.lineTo(cx, cy + r);
612
- ctx.moveTo(cx - r, cy); ctx.lineTo(cx + r, cy);
613
- ctx.stroke();
614
-
615
- // Labels
616
- ctx.fillStyle = '#666';
617
- ctx.font = '10px monospace';
618
- ctx.fillText("LOGIC", cx - 15, cy - r - 10);
619
- ctx.fillText("ETHICS", cx - 18, cy + r + 15);
620
- ctx.fillText("CREAT", cx + r + 10, cy + 3);
621
- ctx.fillText("MEM", cx - r - 30, cy + 3);
622
-
623
- // Draw Polygon
624
- ctx.fillStyle = 'rgba(0, 255, 157, 0.2)';
625
- ctx.strokeStyle = '#00ff9d';
626
- ctx.lineWidth = 2;
627
- ctx.beginPath();
628
-
629
- const pts = [
630
- { x: cx, y: cy - (vals[0] * r) },
631
- { x: cx + (vals[1] * r), y: cy },
632
- { x: cx, y: cy + (vals[2] * r) },
633
- { x: cx - (vals[3] * r), y: cy }
634
- ];
635
-
636
- ctx.moveTo(pts[0].x, pts[0].y);
637
- ctx.lineTo(pts[1].x, pts[1].y);
638
- ctx.lineTo(pts[2].x, pts[2].y);
639
- ctx.lineTo(pts[3].x, pts[3].y);
640
- ctx.closePath();
641
- ctx.fill();
642
- ctx.stroke();
643
- }
644
-
645
- // Stub for old function calls in case bound events trigger
646
- function drawTesseract() {
647
- // For now, do nothing or redraw radar if we had state
648
- // But radar is driven by response, not input sliders directly
649
- // We could visualize input bias here if we wanted
650
- }
651
-
652
- window.onload = init;
653
- </script>
654
- </body>
655
-
656
- </html>