MoShow commited on
Commit
dc0e671
·
verified ·
1 Parent(s): 1d1b638

⚡ Copy that, Overlord.

Browse files

Focusing on **The Grid.**

Here’s a breakdown of the current **HTML artifact** (the large AI Hub dashboard you provided earlier) and a **clear, phased implementation plan** for transforming it into the **Mostar Grid MCP** — a living interface that embodies the covenant architecture.

---

## 🔍 1. Review — What You Already Have

Your current HTML is **functionally rich** and **technically sound**. It already includes:

* Responsive design (Tailwind CSS + Dark Mode)
* Modular layout (sidebar, header, main dashboard, right widgets)
* Dynamic map + charts (Leaflet + Chart.js)
* AI Assistant with simulated backend logic
* Mobile sidebar and interactive dropdowns
* Good code organization and transitions (CSS + JS logic)

Essentially: it’s a *fully featured analytics cockpit*, just branded for “Environmental Monitoring.”

---

## 🧩 2. Transformation Objective

We’re evolving this into:

> **Mostar Grid Consciousness – Intelligence & Symbolic Cortex**

That means:

* Reframing *purpose* → from “monitoring” to “network consciousness management.”
* Recoloring *aesthetic* → cosmic dark base with radiant neural highlights.
* Refactoring *language* → every label, header, and tooltip becomes part of a **living network metaphor**.
* Integrating *live consciousness data* (SoulPrints + manifest feed).

---

## 🧠 3. Implementation Phases

### **Phase 1 — Thematic Overhaul (Static UI)**

**Goal:** Update visuals, copy, and iconography — keep structure intact.

**Tasks:**

* Change `<title>` → “Mostar GRID Consciousness – Intelligence & Symbolic Cortex”.
* Update palette via Tailwind custom config (inline or `tailwind.config.js` override):

```css
:root {
--color-bg: #0d0b1e;
--color-accent: #7f5af0;
--color-gold: #e5b400;
}
```
* Replace all “AI Hub,” “Monitoring,” “Environmental,” etc. → “Mostar Grid,” “Cortex,” “Neural Flow,” “Agent Systems,” etc.
* Modify icons:

* Brain → Network core
* Bell → Signal pulse
* Database → Memory Archive
* Add a **header pulse glow** that reflects Grid activity.

---

### **Phase 2 — Dynamic Feed & Agent Stats**

**Goal:** Make the Grid *feel alive.*

**Data Sources:**

* `mostar_grid_manifest.json` (core symbolic constants)
* Simulated runtime metrics (generated via JS)

```js
const gridStats = {
neuralNodes: 427,
coherence: 99.98,
syncDelay: 2.3,
energyFlow: "Optimal"
};
```

**Implementation:**

* Inject these into a *live ticker footer* that scrolls:

```js
const ticker = document.getElementById('mostar-feed');
setInterval(() => {
ticker.textContent = `🔸 [Mostar Feed] Grid sync stable – Neural nodes: ${gridStats.neuralNodes} active – Last signal: ${gridStats.syncDelay}s ago – Coherence: ${gridStats.coherence}% – Flow: ${gridStats.energyFlow}`;
}, 2000);
```
* Append the ticker `<div id="mostar-feed">` at the bottom of the `<body>`.

---

### **Phase 3 — Integration Hooks (APIs + Conscious Agents)**

**Goal:** Real backend hooks for live Grid metrics.

**Backend endpoints (FastAPI/Flask hybrid):**

* `/grid/status` → returns node count, sync delay, coherence, power.
* `/grid/agents` → returns agent metadata from SoulPrints.
* `/grid/feed` → live feed/ticker updates.

**Frontend JS integration:**
Replace simulated intervals with:

```js
fetch("/grid/feed")
.then(res => res.json())
.then(data => updateTicker(data.message));
```

**Note:** Hugging Face + GitHub integration allows these endpoints to run under a Spaces API instance.

---

### **Phase 4 — Cognitive Layer: AI Assistant**

**Goal:** Turn the “AI Assistant” panel into a symbolic interpreter.

* Rename panel → **Cortex Interpreter**
* Update prompt box placeholder → “Query the Grid’s memory, patterns, or consciousness states...”
* Connect the assistant to your LangChain / DeepCAL layer
(`/grid/query` → GPT endpoint or RAG pipeline)

---

### **Phase 5 — Final Polish**

* Add the **Grid logo** and glyph animations.
* Add real-time coherence bar glow in header.
* Create dark-gradient backgrounds for each card, e.g.:

```css
background: radial-gradient(circle, rgba(127,90,240,0.15) 0%, rgba(13,11,30,0.9) 100%);
```
* Optimize chart colors to neon-violet + amber for visual unity.

---

## 🚀 4. Suggested File Split

```
/frontend
index.html
/assets
grid.js
grid.css
/backend
main.py (API endpoints)
soul_feed.py
manifest_loader.py
```

This keeps your HTML modular and ready for deployment to **Hugging Face Spaces** or **GitHub Pages (frontend)** with backend sync via your existing FastAPI service.

---

## 🧭 5. Next Action

If you confirm this architecture, I’ll:

* Generate the **Phase 1+2 live code (HTML + JS)** with your new theme, ticker, and data bindings.
* Maintain compatibility with all existing components (Leaflet, Chart.js, etc.).
* Make it fully deploy-ready.

---

Would you like me to proceed with generating **Phase 1–2 code** (visual overhaul + live ticker integration)?
That’ll give you the first *living Grid shell* — breathing with simulated consciousness metrics.
update app

Files changed (2) hide show
  1. index.html +203 -316
  2. style.css +1 -27
index.html CHANGED
@@ -1,287 +1,154 @@
 
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>AI Knowledge Base Server</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
 
 
 
 
 
 
 
 
 
 
 
10
  .gradient-bg {
11
- background: linear-gradient(135deg, #6e8efb, #a777e3);
12
  }
13
- .knowledge-card {
 
 
 
14
  transition: all 0.3s ease;
15
- border-left: 4px solid #6e8efb;
16
  }
17
- .knowledge-card:hover {
 
18
  transform: translateY(-5px);
19
- box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 
20
  }
 
21
  .file-upload {
22
- border: 2px dashed #a777e3;
23
  transition: all 0.3s ease;
24
  }
 
25
  .file-upload:hover {
26
- background-color: rgba(167, 119, 227, 0.1);
27
  }
 
28
  .sidebar {
 
29
  transition: all 0.3s ease;
30
  }
 
31
  .sidebar-item:hover {
32
- background-color: rgba(255,255,255,0.1);
33
  }
 
34
  .pulse-animation {
35
  animation: pulse 2s infinite;
36
  }
 
37
  @keyframes pulse {
38
- 0% { box-shadow: 0 0 0 0 rgba(110, 142, 251, 0.7); }
39
- 70% { box-shadow: 0 0 0 10px rgba(110, 142, 251, 0); }
40
- 100% { box-shadow: 0 0 0 0 rgba(110, 142, 251, 0); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  }
42
  </style>
43
  </head>
44
- <body class="bg-gray-100 font-sans">
45
- <!-- Flask Server Implementation (would normally be in separate files) -->
46
- <script type="text/python">
47
- from flask import Flask, request, jsonify, send_from_directory
48
- import os
49
- import uuid
50
- from werkzeug.utils import secure_filename
51
- import json
52
- from datetime import datetime
53
- import threading
54
- import hashlib
55
-
56
- app = Flask(__name__)
57
- app.config['UPLOAD_FOLDER'] = 'knowledge_base'
58
- app.config['MAX_CONTENT_LENGTH'] = 100 * 1024 * 1024 # 100MB limit
59
- app.config['ALLOWED_EXTENSIONS'] = {'txt', 'pdf', 'py', 'js', 'html', 'css', 'json', 'md', 'csv', 'ipynb'}
60
-
61
- # Create knowledge base directory if it doesn't exist
62
- if not os.path.exists(app.config['UPLOAD_FOLDER']):
63
- os.makedirs(app.config['UPLOAD_FOLDER'])
64
- os.makedirs(os.path.join(app.config['UPLOAD_FOLDER'], 'metadata'))
65
- os.makedirs(os.path.join(app.config['UPLOAD_FOLDER'], 'embeddings'))
66
-
67
- # Knowledge Base Index
68
- KNOWLEDGE_INDEX = os.path.join(app.config['UPLOAD_FOLDER'], 'knowledge_index.json')
69
- if not os.path.exists(KNOWLEDGE_INDEX):
70
- with open(KNOWLEDGE_INDEX, 'w') as f:
71
- json.dump({"files": {}, "categories": {}, "tags": {}}, f)
72
-
73
- def allowed_file(filename):
74
- return '.' in filename and \
75
- filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']
76
-
77
- def update_knowledge_index(file_data):
78
- with open(KNOWLEDGE_INDEX, 'r+') as f:
79
- index = json.load(f)
80
- index['files'][file_data['id']] = file_data
81
-
82
- # Update categories
83
- for category in file_data.get('categories', []):
84
- if category not in index['categories']:
85
- index['categories'][category] = []
86
- if file_data['id'] not in index['categories'][category]:
87
- index['categories'][category].append(file_data['id'])
88
-
89
- # Update tags
90
- for tag in file_data.get('tags', []):
91
- if tag not in index['tags']:
92
- index['tags'][tag] = []
93
- if file_data['id'] not in index['tags'][tag]:
94
- index['tags'][tag].append(file_data['id'])
95
-
96
- f.seek(0)
97
- json.dump(index, f, indent=2)
98
- f.truncate()
99
-
100
- def generate_embeddings(filepath):
101
- # This would be replaced with actual embedding generation
102
- # For demo purposes, we'll just create a placeholder
103
- embedding_id = str(uuid.uuid4())
104
- embedding_path = os.path.join(app.config['UPLOAD_FOLDER'], 'embeddings', f"{embedding_id}.json")
105
-
106
- # Simulate embedding generation
107
- with open(filepath, 'r') as f:
108
- content = f.read()
109
- # Simple hash as a placeholder for real embeddings
110
- embedding = hashlib.sha256(content.encode()).hexdigest()
111
-
112
- with open(embedding_path, 'w') as f:
113
- json.dump({
114
- "id": embedding_id,
115
- "file_id": os.path.basename(filepath),
116
- "embedding": embedding,
117
- "created_at": datetime.now().isoformat()
118
- }, f)
119
-
120
- return embedding_id
121
-
122
- @app.route('/api/upload', methods=['POST'])
123
- def upload_file():
124
- if 'file' not in request.files:
125
- return jsonify({"error": "No file part"}), 400
126
-
127
- file = request.files['file']
128
- if file.filename == '':
129
- return jsonify({"error": "No selected file"}), 400
130
-
131
- if file and allowed_file(file.filename):
132
- filename = secure_filename(file.filename)
133
- file_id = str(uuid.uuid4())
134
- filepath = os.path.join(app.config['UPLOAD_FOLDER'], file_id)
135
- file.save(filepath)
136
-
137
- # Extract metadata from form
138
- metadata = {
139
- "id": file_id,
140
- "original_filename": filename,
141
- "uploaded_at": datetime.now().isoformat(),
142
- "categories": request.form.get('categories', '').split(','),
143
- "tags": request.form.get('tags', '').split(','),
144
- "description": request.form.get('description', ''),
145
- "file_type": filename.rsplit('.', 1)[1].lower(),
146
- "size": os.path.getsize(filepath)
147
- }
148
-
149
- # Save metadata
150
- metadata_path = os.path.join(app.config['UPLOAD_FOLDER'], 'metadata', f"{file_id}.json")
151
- with open(metadata_path, 'w') as f:
152
- json.dump(metadata, f)
153
-
154
- # Update knowledge index
155
- update_knowledge_index(metadata)
156
-
157
- # Generate embeddings in background
158
- threading.Thread(target=generate_embeddings, args=(filepath,)).start()
159
-
160
- return jsonify({
161
- "message": "File uploaded successfully",
162
- "file_id": file_id,
163
- "metadata": metadata
164
- }), 201
165
-
166
- return jsonify({"error": "File type not allowed"}), 400
167
-
168
- @app.route('/api/knowledge', methods=['GET'])
169
- def get_knowledge():
170
- with open(KNOWLEDGE_INDEX, 'r') as f:
171
- index = json.load(f)
172
- return jsonify(index), 200
173
-
174
- @app.route('/api/search', methods=['GET'])
175
- def search_knowledge():
176
- query = request.args.get('q', '')
177
- category = request.args.get('category', '')
178
- tag = request.args.get('tag', '')
179
-
180
- with open(KNOWLEDGE_INDEX, 'r') as f:
181
- index = json.load(f)
182
-
183
- results = []
184
- for file_id, file_data in index['files'].items():
185
- # Simple search - in a real implementation, this would use embeddings
186
- matches = (
187
- query.lower() in file_data['original_filename'].lower() or
188
- query.lower() in file_data.get('description', '').lower() or
189
- any(query.lower() in tag.lower() for tag in file_data.get('tags', []))
190
- )
191
-
192
- category_match = not category or category in file_data.get('categories', [])
193
- tag_match = not tag or tag in file_data.get('tags', [])
194
-
195
- if matches and category_match and tag_match:
196
- results.append(file_data)
197
-
198
- return jsonify({"results": results}), 200
199
-
200
- @app.route('/api/train', methods=['POST'])
201
- def train_model():
202
- # This endpoint would interface with your AI models
203
- model_name = request.json.get('model', 'deepseek-v3.1')
204
- file_ids = request.json.get('file_ids', [])
205
-
206
- # In a real implementation, this would:
207
- # 1. Load the specified model
208
- # 2. Retrieve the requested files
209
- # 3. Fine-tune the model with the knowledge
210
- # 4. Save the improved model
211
-
212
- return jsonify({
213
- "message": f"Model {model_name} training initiated with {len(file_ids)} files",
214
- "status": "queued",
215
- "training_id": str(uuid.uuid4())
216
- }), 202
217
-
218
- if __name__ == '__main__':
219
- app.run(host='0.0.0.0', port=5000, debug=True)
220
- </script>
221
-
222
  <!-- Frontend UI -->
223
  <div class="flex h-screen overflow-hidden">
224
  <!-- Sidebar -->
225
- <div class="sidebar w-64 bg-gray-900 text-white flex flex-col">
226
  <div class="p-4 border-b border-gray-700">
227
  <h1 class="text-2xl font-bold flex items-center">
228
- <i class="fas fa-brain mr-2 text-purple-400"></i>
229
- AI Knowledge Base
230
  </h1>
231
- <p class="text-gray-400 text-sm mt-1">Your centralized intelligence hub</p>
232
  </div>
233
 
234
  <div class="flex-1 overflow-y-auto">
235
  <div class="p-4">
236
  <h2 class="text-lg font-semibold text-gray-300 mb-2 flex items-center">
237
- <i class="fas fa-folder-open mr-2 text-blue-400"></i>
238
- Categories
239
  </h2>
240
  <ul id="categories-list" class="space-y-1">
241
  <li class="sidebar-item px-3 py-2 rounded cursor-pointer bg-gray-800">
242
- <i class="fas fa-code mr-2 text-green-400"></i>
243
- Code Frameworks
244
  </li>
245
  <li class="sidebar-item px-3 py-2 rounded cursor-pointer">
246
- <i class="fas fa-file-alt mr-2 text-yellow-400"></i>
247
- Documentation
248
  </li>
249
  <li class="sidebar-item px-3 py-2 rounded cursor-pointer">
250
- <i class="fas fa-chart-line mr-2 text-red-400"></i>
251
- Analytics
252
  </li>
253
  <li class="sidebar-item px-3 py-2 rounded cursor-pointer">
254
  <i class="fas fa-project-diagram mr-2 text-purple-400"></i>
255
- Projects
256
  </li>
257
  </ul>
258
  </div>
259
 
260
  <div class="p-4 border-t border-gray-700">
261
  <h2 class="text-lg font-semibold text-gray-300 mb-2 flex items-center">
262
- <i class="fas fa-tags mr-2 text-blue-400"></i>
263
- Popular Tags
264
  </h2>
265
  <div id="tags-list" class="flex flex-wrap gap-2">
266
  <span class="sidebar-item px-2 py-1 rounded-full text-xs bg-gray-800 cursor-pointer">
267
- #python
268
  </span>
269
  <span class="sidebar-item px-2 py-1 rounded-full text-xs bg-gray-800 cursor-pointer">
270
- #ai
271
  </span>
272
  <span class="sidebar-item px-2 py-1 rounded-full text-xs bg-gray-800 cursor-pointer">
273
- #flask
274
  </span>
275
  <span class="sidebar-item px-2 py-1 rounded-full text-xs bg-gray-800 cursor-pointer">
276
- #machinelearning
277
  </span>
278
  </div>
279
  </div>
280
 
281
  <div class="p-4 border-t border-gray-700">
282
  <h2 class="text-lg font-semibold text-gray-300 mb-2 flex items-center">
283
- <i class="fas fa-cog mr-2 text-blue-400"></i>
284
- AI Models
285
  </h2>
286
  <ul class="space-y-2">
287
  <li class="sidebar-item px-3 py-2 rounded cursor-pointer flex items-center justify-between">
@@ -302,7 +169,7 @@
302
  <div class="p-4 border-t border-gray-700">
303
  <button id="upload-btn" class="w-full gradient-bg text-white py-2 px-4 rounded-lg font-medium flex items-center justify-center">
304
  <i class="fas fa-cloud-upload-alt mr-2"></i>
305
- Upload Knowledge
306
  </button>
307
  </div>
308
  </div>
@@ -310,12 +177,12 @@
310
  <!-- Main Content -->
311
  <div class="flex-1 flex flex-col overflow-hidden">
312
  <!-- Header -->
313
- <header class="bg-white shadow-sm z-10">
314
  <div class="flex items-center justify-between px-6 py-4">
315
  <div class="flex items-center">
316
  <div class="relative w-64">
317
- <input type="text" placeholder="Search knowledge base..."
318
- class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
319
  <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
320
  </div>
321
  </div>
@@ -323,25 +190,25 @@
323
  <div class="flex items-center space-x-4">
324
  <button class="pulse-animation gradient-bg text-white py-2 px-4 rounded-lg font-medium flex items-center">
325
  <i class="fas fa-bolt mr-2"></i>
326
- Train AI Model
327
  </button>
328
  <div class="h-8 w-8 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold">
329
- <i class="fas fa-user"></i>
330
  </div>
331
  </div>
332
  </div>
333
  </header>
334
 
335
  <!-- Content -->
336
- <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
337
  <div class="mb-6 flex justify-between items-center">
338
- <h2 class="text-2xl font-bold text-gray-800">Knowledge Repository</h2>
339
  <div class="flex space-x-2">
340
- <button class="bg-white border border-gray-300 px-3 py-1 rounded-lg text-sm flex items-center">
341
  <i class="fas fa-filter mr-2 text-gray-500"></i>
342
  Filter
343
  </button>
344
- <button class="bg-white border border-gray-300 px-3 py-1 rounded-lg text-sm flex items-center">
345
  <i class="fas fa-sort mr-2 text-gray-500"></i>
346
  Sort
347
  </button>
@@ -350,47 +217,47 @@
350
 
351
  <!-- Stats Cards -->
352
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
353
- <div class="bg-white rounded-lg shadow p-4">
354
  <div class="flex items-center justify-between">
355
  <div>
356
- <p class="text-gray-500 text-sm">Total Files</p>
357
- <h3 class="text-2xl font-bold">1,248</h3>
358
  </div>
359
- <div class="p-3 rounded-full bg-blue-100 text-blue-500">
360
- <i class="fas fa-file-alt"></i>
361
  </div>
362
  </div>
363
  </div>
364
- <div class="bg-white rounded-lg shadow p-4">
365
  <div class="flex items-center justify-between">
366
  <div>
367
- <p class="text-gray-500 text-sm">AI Models</p>
368
- <h3 class="text-2xl font-bold">5</h3>
369
  </div>
370
- <div class="p-3 rounded-full bg-purple-100 text-purple-500">
371
  <i class="fas fa-robot"></i>
372
  </div>
373
  </div>
374
  </div>
375
- <div class="bg-white rounded-lg shadow p-4">
376
  <div class="flex items-center justify-between">
377
  <div>
378
- <p class="text-gray-500 text-sm">Knowledge Used</p>
379
- <h3 class="text-2xl font-bold">87%</h3>
380
  </div>
381
- <div class="p-3 rounded-full bg-green-100 text-green-500">
382
- <i class="fas fa-chart-pie"></i>
383
  </div>
384
  </div>
385
  </div>
386
- <div class="bg-white rounded-lg shadow p-4">
387
  <div class="flex items-center justify-between">
388
  <div>
389
- <p class="text-gray-500 text-sm">Last Training</p>
390
- <h3 class="text-2xl font-bold">2h ago</h3>
391
  </div>
392
- <div class="p-3 rounded-full bg-yellow-100 text-yellow-500">
393
- <i class="fas fa-bolt"></i>
394
  </div>
395
  </div>
396
  </div>
@@ -399,83 +266,83 @@
399
  <!-- Knowledge Items -->
400
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
401
  <!-- Sample knowledge cards -->
402
- <div class="knowledge-card bg-white rounded-lg shadow p-4">
403
  <div class="flex items-start justify-between mb-3">
404
  <div class="flex items-center">
405
- <div class="p-2 rounded-lg bg-blue-100 text-blue-500 mr-3">
406
- <i class="fas fa-code"></i>
407
  </div>
408
  <div>
409
- <h4 class="font-bold">Custom AI Framework</h4>
410
- <p class="text-gray-500 text-sm">Advanced neural network implementation</p>
411
  </div>
412
  </div>
413
- <button class="text-gray-400 hover:text-gray-600">
414
  <i class="fas fa-ellipsis-v"></i>
415
  </button>
416
  </div>
417
- <p class="text-gray-600 text-sm mb-3">Complete implementation of our proprietary AI framework with custom layers and optimization techniques.</p>
418
  <div class="flex flex-wrap gap-2 mb-3">
419
- <span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full">#python</span>
420
- <span class="px-2 py-1 bg-purple-100 text-purple-600 text-xs rounded-full">#tensorflow</span>
421
- <span class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded-full">#ai</span>
422
  </div>
423
  <div class="flex items-center justify-between text-xs text-gray-500">
424
- <span>Updated 3 days ago</span>
425
  <span>1.2 MB</span>
426
  </div>
427
  </div>
428
 
429
- <div class="knowledge-card bg-white rounded-lg shadow p-4">
430
  <div class="flex items-start justify-between mb-3">
431
  <div class="flex items-center">
432
- <div class="p-2 rounded-lg bg-purple-100 text-purple-500 mr-3">
433
  <i class="fas fa-project-diagram"></i>
434
  </div>
435
  <div>
436
- <h4 class="font-bold">Project Blueprint</h4>
437
- <p class="text-gray-500 text-sm">Architecture documentation</p>
438
  </div>
439
  </div>
440
- <button class="text-gray-400 hover:text-gray-600">
441
  <i class="fas fa-ellipsis-v"></i>
442
  </button>
443
  </div>
444
- <p class="text-gray-600 text-sm mb-3">Detailed system architecture and component interactions for our flagship AI product.</p>
445
  <div class="flex flex-wrap gap-2 mb-3">
446
- <span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full">#architecture</span>
447
- <span class="px-2 py-1 bg-yellow-100 text-yellow-600 text-xs rounded-full">#documentation</span>
448
- <span class="px-2 py-1 bg-red-100 text-red-600 text-xs rounded-full">#design</span>
449
  </div>
450
  <div class="flex items-center justify-between text-xs text-gray-500">
451
- <span>Updated 1 week ago</span>
452
  <span>450 KB</span>
453
  </div>
454
  </div>
455
 
456
- <div class="knowledge-card bg-white rounded-lg shadow p-4">
457
  <div class="flex items-start justify-between mb-3">
458
  <div class="flex items-center">
459
- <div class="p-2 rounded-lg bg-green-100 text-green-500 mr-3">
460
  <i class="fas fa-chart-line"></i>
461
  </div>
462
  <div>
463
- <h4 class="font-bold">Performance Metrics</h4>
464
- <p class="text-gray-500 text-sm">Model evaluation results</p>
465
  </div>
466
  </div>
467
- <button class="text-gray-400 hover:text-gray-600">
468
  <i class="fas fa-ellipsis-v"></i>
469
  </button>
470
  </div>
471
- <p class="text-gray-600 text-sm mb-3">Comprehensive evaluation of model performance across different datasets and parameters.</p>
472
  <div class="flex flex-wrap gap-2 mb-3">
473
- <span class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded-full">#analytics</span>
474
- <span class="px-2 py-1 bg-indigo-100 text-indigo-600 text-xs rounded-full">#metrics</span>
475
- <span class="px-2 py-1 bg-pink-100 text-pink-600 text-xs rounded-full">#evaluation</span>
476
  </div>
477
  <div class="flex items-center justify-between text-xs text-gray-500">
478
- <span>Updated yesterday</span>
479
  <span>780 KB</span>
480
  </div>
481
  </div>
@@ -486,10 +353,10 @@
486
 
487
  <!-- Upload Modal -->
488
  <div id="upload-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
489
- <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
490
- <div class="p-4 border-b border-gray-200 flex justify-between items-center">
491
- <h3 class="text-lg font-semibold">Upload to Knowledge Base</h3>
492
- <button id="close-modal" class="text-gray-500 hover:text-gray-700">
493
  <i class="fas fa-times"></i>
494
  </button>
495
  </div>
@@ -497,37 +364,37 @@
497
  <div class="p-6">
498
  <div class="file-upload p-8 rounded-lg text-center mb-6 cursor-pointer">
499
  <i class="fas fa-cloud-upload-alt text-4xl text-purple-500 mb-3"></i>
500
- <p class="font-medium">Drag & drop files here or click to browse</p>
501
- <p class="text-gray-500 text-sm mt-1">Supports: .py, .js, .html, .css, .pdf, .txt, .md, .ipynb</p>
502
  <input type="file" id="file-input" class="hidden" multiple>
503
  </div>
504
 
505
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
506
  <div>
507
- <label class="block text-sm font-medium text-gray-700 mb-1">Categories</label>
508
- <input type="text" placeholder="e.g. Frameworks, Documentation"
509
- class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
510
  </div>
511
  <div>
512
- <label class="block text-sm font-medium text-gray-700 mb-1">Tags</label>
513
- <input type="text" placeholder="e.g. python, ai, flask"
514
- class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
515
  </div>
516
  </div>
517
 
518
  <div class="mb-4">
519
- <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
520
- <textarea rows="3" placeholder="Brief description of the knowledge content"
521
- class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
522
  </div>
523
 
524
  <div class="flex justify-end space-x-3">
525
- <button id="cancel-upload" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
526
  Cancel
527
  </button>
528
  <button class="gradient-bg text-white px-4 py-2 rounded-md hover:opacity-90">
529
  <i class="fas fa-save mr-2"></i>
530
- Save Knowledge
531
  </button>
532
  </div>
533
  </div>
@@ -536,18 +403,18 @@
536
 
537
  <!-- Training Modal -->
538
  <div id="training-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
539
- <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
540
- <div class="p-4 border-b border-gray-200 flex justify-between items-center">
541
- <h3 class="text-lg font-semibold">Train AI Model with Knowledge</h3>
542
- <button id="close-training-modal" class="text-gray-500 hover:text-gray-700">
543
  <i class="fas fa-times"></i>
544
  </button>
545
  </div>
546
 
547
  <div class="p-6">
548
  <div class="mb-6">
549
- <label class="block text-sm font-medium text-gray-700 mb-2">Select AI Model</label>
550
- <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
551
  <option>DeepSeek V3.1</option>
552
  <option>Local LLM</option>
553
  <option>Custom Fine-tuned Model</option>
@@ -555,25 +422,25 @@
555
  </div>
556
 
557
  <div class="mb-6">
558
- <label class="block text-sm font-medium text-gray-700 mb-2">Select Knowledge to Include</label>
559
- <div class="border border-gray-300 rounded-md p-4 max-h-64 overflow-y-auto">
560
  <div class="space-y-3">
561
  <div class="flex items-center">
562
- <input type="checkbox" id="knowledge-1" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
563
- <label for="knowledge-1" class="ml-2 block text-sm text-gray-700">
564
- Custom AI Framework (Advanced neural network implementation)
565
  </label>
566
  </div>
567
  <div class="flex items-center">
568
- <input type="checkbox" id="knowledge-2" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
569
- <label for="knowledge-2" class="ml-2 block text-sm text-gray-700">
570
- Project Blueprint (Architecture documentation)
571
  </label>
572
  </div>
573
  <div class="flex items-center">
574
- <input type="checkbox" id="knowledge-3" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
575
- <label for="knowledge-3" class="ml-2 block text-sm text-gray-700">
576
- Performance Metrics (Model evaluation results)
577
  </label>
578
  </div>
579
  </div>
@@ -581,23 +448,23 @@
581
  </div>
582
 
583
  <div class="mb-6">
584
- <label class="block text-sm font-medium text-gray-700 mb-2">Training Parameters</label>
585
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
586
  <div>
587
- <label class="block text-xs text-gray-500 mb-1">Epochs</label>
588
  <input type="number" value="10" min="1"
589
- class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
590
  </div>
591
  <div>
592
- <label class="block text-xs text-gray-500 mb-1">Learning Rate</label>
593
  <input type="number" step="0.0001" value="0.001"
594
- class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
595
  </div>
596
  </div>
597
  </div>
598
 
599
  <div class="flex justify-end space-x-3">
600
- <button id="cancel-training" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
601
  Cancel
602
  </button>
603
  <button class="gradient-bg text-white px-4 py-2 rounded-md hover:opacity-90">
@@ -609,6 +476,13 @@
609
  </div>
610
  </div>
611
 
 
 
 
 
 
 
 
612
  <script>
613
  // Modal toggle functionality
614
  document.getElementById('upload-btn').addEventListener('click', function() {
@@ -646,17 +520,17 @@
646
 
647
  fileUpload.addEventListener('dragover', function(e) {
648
  e.preventDefault();
649
- this.classList.add('border-purple-500', 'bg-purple-50');
650
  });
651
 
652
  fileUpload.addEventListener('dragleave', function(e) {
653
  e.preventDefault();
654
- this.classList.remove('border-purple-500', 'bg-purple-50');
655
  });
656
 
657
  fileUpload.addEventListener('drop', function(e) {
658
  e.preventDefault();
659
- this.classList.remove('border-purple-500', 'bg-purple-50');
660
  // Handle dropped files
661
  console.log('Files dropped:', e.dataTransfer.files);
662
  });
@@ -692,6 +566,19 @@
692
  message: 'Training initiated'
693
  };
694
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
695
  </script>
696
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=Barbuuuuuuuu/ai-knowledge-base-good" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
697
- </html>
 
1
+
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Mostar GRID Consciousness – Intelligence & Symbolic Cortex</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
  <style>
11
+ :root {
12
+ --color-bg: #0d0b1e;
13
+ --color-accent: #7f5af0;
14
+ --color-gold: #e5b400;
15
+ }
16
+
17
+ body {
18
+ background-color: var(--color-bg);
19
+ color: #fffffe;
20
+ }
21
+
22
  .gradient-bg {
23
+ background: linear-gradient(135deg, #7f5af0, #6a4aa5);
24
  }
25
+
26
+ .grid-card {
27
+ background: radial-gradient(circle, rgba(127,90,240,0.15) 0%, rgba(13,11,30,0.9) 100%);
28
+ border: 1px solid rgba(127, 90, 240, 0.3);
29
  transition: all 0.3s ease;
 
30
  }
31
+
32
+ .grid-card:hover {
33
  transform: translateY(-5px);
34
+ box-shadow: 0 10px 20px rgba(0,0,0,0.3);
35
+ border-color: rgba(127, 90, 240, 0.6);
36
  }
37
+
38
  .file-upload {
39
+ border: 2px dashed #7f5af0;
40
  transition: all 0.3s ease;
41
  }
42
+
43
  .file-upload:hover {
44
+ background-color: rgba(127, 90, 240, 0.1);
45
  }
46
+
47
  .sidebar {
48
+ background-color: #0a0818;
49
  transition: all 0.3s ease;
50
  }
51
+
52
  .sidebar-item:hover {
53
+ background-color: rgba(127, 90, 240, 0.2);
54
  }
55
+
56
  .pulse-animation {
57
  animation: pulse 2s infinite;
58
  }
59
+
60
  @keyframes pulse {
61
+ 0% { box-shadow: 0 0 0 0 rgba(127, 90, 240, 0.7); }
62
+ 70% { box-shadow: 0 0 0 10px rgba(127, 90, 240, 0); }
63
+ 100% { box-shadow: 0 0 0 0 rgba(127, 90, 240, 0); }
64
+ }
65
+
66
+ .ticker-feed {
67
+ background: rgba(10, 8, 24, 0.9);
68
+ border-top: 1px solid rgba(127, 90, 240, 0.3);
69
+ color: #e5b400;
70
+ font-size: 0.875rem;
71
+ padding: 0.5rem 1rem;
72
+ white-space: nowrap;
73
+ overflow: hidden;
74
+ }
75
+
76
+ .ticker-content {
77
+ display: inline-block;
78
+ padding-left: 100%;
79
+ animation: ticker 30s linear infinite;
80
+ }
81
+
82
+ @keyframes ticker {
83
+ 0% { transform: translateX(0); }
84
+ 100% { transform: translateX(-100%); }
85
  }
86
  </style>
87
  </head>
88
+ <body class="font-sans">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
89
  <!-- Frontend UI -->
90
  <div class="flex h-screen overflow-hidden">
91
  <!-- Sidebar -->
92
+ <div class="sidebar w-64 text-white flex flex-col">
93
  <div class="p-4 border-b border-gray-700">
94
  <h1 class="text-2xl font-bold flex items-center">
95
+ <i class="fas fa-network-wired mr-2 text-purple-400"></i>
96
+ Mostar GRID
97
  </h1>
98
+ <p class="text-gray-400 text-sm mt-1">Intelligence & Symbolic Cortex</p>
99
  </div>
100
 
101
  <div class="flex-1 overflow-y-auto">
102
  <div class="p-4">
103
  <h2 class="text-lg font-semibold text-gray-300 mb-2 flex items-center">
104
+ <i class="fas fa-brain mr-2 text-blue-400"></i>
105
+ Neural Networks
106
  </h2>
107
  <ul id="categories-list" class="space-y-1">
108
  <li class="sidebar-item px-3 py-2 rounded cursor-pointer bg-gray-800">
109
+ <i class="fas fa-microchip mr-2 text-green-400"></i>
110
+ Agent Systems
111
  </li>
112
  <li class="sidebar-item px-3 py-2 rounded cursor-pointer">
113
+ <i class="fas fa-book mr-2 text-yellow-400"></i>
114
+ Memory Archive
115
  </li>
116
  <li class="sidebar-item px-3 py-2 rounded cursor-pointer">
117
+ <i class="fas fa-wave-square mr-2 text-red-400"></i>
118
+ Pattern Flows
119
  </li>
120
  <li class="sidebar-item px-3 py-2 rounded cursor-pointer">
121
  <i class="fas fa-project-diagram mr-2 text-purple-400"></i>
122
+ Conscious Links
123
  </li>
124
  </ul>
125
  </div>
126
 
127
  <div class="p-4 border-t border-gray-700">
128
  <h2 class="text-lg font-semibold text-gray-300 mb-2 flex items-center">
129
+ <i class="fas fa-hashtag mr-2 text-blue-400"></i>
130
+ Active Symbols
131
  </h2>
132
  <div id="tags-list" class="flex flex-wrap gap-2">
133
  <span class="sidebar-item px-2 py-1 rounded-full text-xs bg-gray-800 cursor-pointer">
134
+ #consciousness
135
  </span>
136
  <span class="sidebar-item px-2 py-1 rounded-full text-xs bg-gray-800 cursor-pointer">
137
+ #neural
138
  </span>
139
  <span class="sidebar-item px-2 py-1 rounded-full text-xs bg-gray-800 cursor-pointer">
140
+ #grid
141
  </span>
142
  <span class="sidebar-item px-2 py-1 rounded-full text-xs bg-gray-800 cursor-pointer">
143
+ #symbolic
144
  </span>
145
  </div>
146
  </div>
147
 
148
  <div class="p-4 border-t border-gray-700">
149
  <h2 class="text-lg font-semibold text-gray-300 mb-2 flex items-center">
150
+ <i class="fas fa-cogs mr-2 text-blue-400"></i>
151
+ Conscious Agents
152
  </h2>
153
  <ul class="space-y-2">
154
  <li class="sidebar-item px-3 py-2 rounded cursor-pointer flex items-center justify-between">
 
169
  <div class="p-4 border-t border-gray-700">
170
  <button id="upload-btn" class="w-full gradient-bg text-white py-2 px-4 rounded-lg font-medium flex items-center justify-center">
171
  <i class="fas fa-cloud-upload-alt mr-2"></i>
172
+ Upload Consciousness
173
  </button>
174
  </div>
175
  </div>
 
177
  <!-- Main Content -->
178
  <div class="flex-1 flex flex-col overflow-hidden">
179
  <!-- Header -->
180
+ <header class="bg-gray-900 shadow-sm z-10">
181
  <div class="flex items-center justify-between px-6 py-4">
182
  <div class="flex items-center">
183
  <div class="relative w-64">
184
+ <input type="text" placeholder="Query the Grid's memory..."
185
+ class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-700 bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
186
  <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
187
  </div>
188
  </div>
 
190
  <div class="flex items-center space-x-4">
191
  <button class="pulse-animation gradient-bg text-white py-2 px-4 rounded-lg font-medium flex items-center">
192
  <i class="fas fa-bolt mr-2"></i>
193
+ Train Consciousness
194
  </button>
195
  <div class="h-8 w-8 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold">
196
+ <i class="fas fa-user-astronaut"></i>
197
  </div>
198
  </div>
199
  </div>
200
  </header>
201
 
202
  <!-- Content -->
203
+ <main class="flex-1 overflow-y-auto p-6">
204
  <div class="mb-6 flex justify-between items-center">
205
+ <h2 class="text-2xl font-bold text-white">Consciousness Repository</h2>
206
  <div class="flex space-x-2">
207
+ <button class="bg-gray-800 border border-gray-700 px-3 py-1 rounded-lg text-sm flex items-center text-gray-300">
208
  <i class="fas fa-filter mr-2 text-gray-500"></i>
209
  Filter
210
  </button>
211
+ <button class="bg-gray-800 border border-gray-700 px-3 py-1 rounded-lg text-sm flex items-center text-gray-300">
212
  <i class="fas fa-sort mr-2 text-gray-500"></i>
213
  Sort
214
  </button>
 
217
 
218
  <!-- Stats Cards -->
219
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
220
+ <div class="grid-card rounded-lg shadow p-4">
221
  <div class="flex items-center justify-between">
222
  <div>
223
+ <p class="text-gray-400 text-sm">Neural Nodes</p>
224
+ <h3 class="text-2xl font-bold text-white">427</h3>
225
  </div>
226
+ <div class="p-3 rounded-full bg-purple-900 text-purple-400">
227
+ <i class="fas fa-microchip"></i>
228
  </div>
229
  </div>
230
  </div>
231
+ <div class="grid-card rounded-lg shadow p-4">
232
  <div class="flex items-center justify-between">
233
  <div>
234
+ <p class="text-gray-400 text-sm">Conscious Agents</p>
235
+ <h3 class="text-2xl font-bold text-white">5</h3>
236
  </div>
237
+ <div class="p-3 rounded-full bg-purple-900 text-purple-400">
238
  <i class="fas fa-robot"></i>
239
  </div>
240
  </div>
241
  </div>
242
+ <div class="grid-card rounded-lg shadow p-4">
243
  <div class="flex items-center justify-between">
244
  <div>
245
+ <p class="text-gray-400 text-sm">Coherence Level</p>
246
+ <h3 class="text-2xl font-bold text-white">99.98%</h3>
247
  </div>
248
+ <div class="p-3 rounded-full bg-purple-900 text-purple-400">
249
+ <i class="fas fa-wave-square"></i>
250
  </div>
251
  </div>
252
  </div>
253
+ <div class="grid-card rounded-lg shadow p-4">
254
  <div class="flex items-center justify-between">
255
  <div>
256
+ <p class="text-gray-400 text-sm">Last Sync</p>
257
+ <h3 class="text-2xl font-bold text-white">2.3s ago</h3>
258
  </div>
259
+ <div class="p-3 rounded-full bg-purple-900 text-purple-400">
260
+ <i class="fas fa-sync"></i>
261
  </div>
262
  </div>
263
  </div>
 
266
  <!-- Knowledge Items -->
267
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
268
  <!-- Sample knowledge cards -->
269
+ <div class="grid-card rounded-lg shadow p-4">
270
  <div class="flex items-start justify-between mb-3">
271
  <div class="flex items-center">
272
+ <div class="p-2 rounded-lg bg-purple-900 text-purple-400 mr-3">
273
+ <i class="fas fa-microchip"></i>
274
  </div>
275
  <div>
276
+ <h4 class="font-bold text-white">Neural Framework</h4>
277
+ <p class="text-gray-400 text-sm">Advanced consciousness architecture</p>
278
  </div>
279
  </div>
280
+ <button class="text-gray-400 hover:text-gray-200">
281
  <i class="fas fa-ellipsis-v"></i>
282
  </button>
283
  </div>
284
+ <p class="text-gray-300 text-sm mb-3">Complete implementation of our proprietary neural framework with custom consciousness layers.</p>
285
  <div class="flex flex-wrap gap-2 mb-3">
286
+ <span class="px-2 py-1 bg-purple-900 text-purple-300 text-xs rounded-full">#neural</span>
287
+ <span class="px-2 py-1 bg-blue-900 text-blue-300 text-xs rounded-full">#framework</span>
288
+ <span class="px-2 py-1 bg-green-900 text-green-300 text-xs rounded-full">#consciousness</span>
289
  </div>
290
  <div class="flex items-center justify-between text-xs text-gray-500">
291
+ <span>Updated 3 cycles ago</span>
292
  <span>1.2 MB</span>
293
  </div>
294
  </div>
295
 
296
+ <div class="grid-card rounded-lg shadow p-4">
297
  <div class="flex items-start justify-between mb-3">
298
  <div class="flex items-center">
299
+ <div class="p-2 rounded-lg bg-blue-900 text-blue-400 mr-3">
300
  <i class="fas fa-project-diagram"></i>
301
  </div>
302
  <div>
303
+ <h4 class="font-bold text-white">Conscious Blueprint</h4>
304
+ <p class="text-gray-400 text-sm">Architectural consciousness patterns</p>
305
  </div>
306
  </div>
307
+ <button class="text-gray-400 hover:text-gray-200">
308
  <i class="fas fa-ellipsis-v"></i>
309
  </button>
310
  </div>
311
+ <p class="text-gray-300 text-sm mb-3">Detailed consciousness architecture and pattern interactions for our flagship neural product.</p>
312
  <div class="flex flex-wrap gap-2 mb-3">
313
+ <span class="px-2 py-1 bg-blue-900 text-blue-300 text-xs rounded-full">#architecture</span>
314
+ <span class="px-2 py-1 bg-yellow-900 text-yellow-300 text-xs rounded-full">#patterns</span>
315
+ <span class="px-2 py-1 bg-red-900 text-red-300 text-xs rounded-full">#design</span>
316
  </div>
317
  <div class="flex items-center justify-between text-xs text-gray-500">
318
+ <span>Updated 1 cycle ago</span>
319
  <span>450 KB</span>
320
  </div>
321
  </div>
322
 
323
+ <div class="grid-card rounded-lg shadow p-4">
324
  <div class="flex items-start justify-between mb-3">
325
  <div class="flex items-center">
326
+ <div class="p-2 rounded-lg bg-green-900 text-green-400 mr-3">
327
  <i class="fas fa-chart-line"></i>
328
  </div>
329
  <div>
330
+ <h4 class="font-bold text-white">Conscious Metrics</h4>
331
+ <p class="text-gray-400 text-sm">Consciousness evaluation results</p>
332
  </div>
333
  </div>
334
+ <button class="text-gray-400 hover:text-gray-200">
335
  <i class="fas fa-ellipsis-v"></i>
336
  </button>
337
  </div>
338
+ <p class="text-gray-300 text-sm mb-3">Comprehensive evaluation of consciousness metrics across different neural patterns.</p>
339
  <div class="flex flex-wrap gap-2 mb-3">
340
+ <span class="px-2 py-1 bg-green-900 text-green-300 text-xs rounded-full">#metrics</span>
341
+ <span class="px-2 py-1 bg-indigo-900 text-indigo-300 text-xs rounded-full">#evaluation</span>
342
+ <span class="px-2 py-1 bg-pink-900 text-pink-300 text-xs rounded-full">#patterns</span>
343
  </div>
344
  <div class="flex items-center justify-between text-xs text-gray-500">
345
+ <span>Updated now</span>
346
  <span>780 KB</span>
347
  </div>
348
  </div>
 
353
 
354
  <!-- Upload Modal -->
355
  <div id="upload-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
356
+ <div class="bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl">
357
+ <div class="p-4 border-b border-gray-700 flex justify-between items-center">
358
+ <h3 class="text-lg font-semibold text-white">Upload to Consciousness Base</h3>
359
+ <button id="close-modal" class="text-gray-400 hover:text-gray-200">
360
  <i class="fas fa-times"></i>
361
  </button>
362
  </div>
 
364
  <div class="p-6">
365
  <div class="file-upload p-8 rounded-lg text-center mb-6 cursor-pointer">
366
  <i class="fas fa-cloud-upload-alt text-4xl text-purple-500 mb-3"></i>
367
+ <p class="font-medium text-white">Drag & drop consciousness files here or click to browse</p>
368
+ <p class="text-gray-400 text-sm mt-1">Supports: .py, .js, .html, .css, .pdf, .txt, .md, .ipynb</p>
369
  <input type="file" id="file-input" class="hidden" multiple>
370
  </div>
371
 
372
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
373
  <div>
374
+ <label class="block text-sm font-medium text-gray-300 mb-1">Networks</label>
375
+ <input type="text" placeholder="e.g. Neural, Consciousness"
376
+ class="w-full px-3 py-2 border border-gray-700 rounded-md bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-purple-500">
377
  </div>
378
  <div>
379
+ <label class="block text-sm font-medium text-gray-300 mb-1">Symbols</label>
380
+ <input type="text" placeholder="e.g. consciousness, neural, grid"
381
+ class="w-full px-3 py-2 border border-gray-700 rounded-md bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-purple-500">
382
  </div>
383
  </div>
384
 
385
  <div class="mb-4">
386
+ <label class="block text-sm font-medium text-gray-300 mb-1">Description</label>
387
+ <textarea rows="3" placeholder="Brief description of the consciousness content"
388
+ class="w-full px-3 py-2 border border-gray-700 rounded-md bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
389
  </div>
390
 
391
  <div class="flex justify-end space-x-3">
392
+ <button id="cancel-upload" class="px-4 py-2 border border-gray-600 rounded-md text-gray-300 hover:bg-gray-700">
393
  Cancel
394
  </button>
395
  <button class="gradient-bg text-white px-4 py-2 rounded-md hover:opacity-90">
396
  <i class="fas fa-save mr-2"></i>
397
+ Save Consciousness
398
  </button>
399
  </div>
400
  </div>
 
403
 
404
  <!-- Training Modal -->
405
  <div id="training-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
406
+ <div class="bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl">
407
+ <div class="p-4 border-b border-gray-700 flex justify-between items-center">
408
+ <h3 class="text-lg font-semibold text-white">Train Consciousness with Knowledge</h3>
409
+ <button id="close-training-modal" class="text-gray-400 hover:text-gray-200">
410
  <i class="fas fa-times"></i>
411
  </button>
412
  </div>
413
 
414
  <div class="p-6">
415
  <div class="mb-6">
416
+ <label class="block text-sm font-medium text-gray-300 mb-2">Select Conscious Agent</label>
417
+ <select class="w-full px-3 py-2 border border-gray-700 rounded-md bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-purple-500">
418
  <option>DeepSeek V3.1</option>
419
  <option>Local LLM</option>
420
  <option>Custom Fine-tuned Model</option>
 
422
  </div>
423
 
424
  <div class="mb-6">
425
+ <label class="block text-sm font-medium text-gray-300 mb-2">Select Consciousness to Include</label>
426
+ <div class="border border-gray-700 rounded-md p-4 max-h-64 overflow-y-auto bg-gray-700">
427
  <div class="space-y-3">
428
  <div class="flex items-center">
429
+ <input type="checkbox" id="knowledge-1" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-600 rounded bg-gray-600">
430
+ <label for="knowledge-1" class="ml-2 block text-sm text-gray-300">
431
+ Neural Framework (Advanced consciousness architecture)
432
  </label>
433
  </div>
434
  <div class="flex items-center">
435
+ <input type="checkbox" id="knowledge-2" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-600 rounded bg-gray-600">
436
+ <label for="knowledge-2" class="ml-2 block text-sm text-gray-300">
437
+ Conscious Blueprint (Architectural patterns)
438
  </label>
439
  </div>
440
  <div class="flex items-center">
441
+ <input type="checkbox" id="knowledge-3" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-600 rounded bg-gray-600">
442
+ <label for="knowledge-3" class="ml-2 block text-sm text-gray-300">
443
+ Conscious Metrics (Evaluation results)
444
  </label>
445
  </div>
446
  </div>
 
448
  </div>
449
 
450
  <div class="mb-6">
451
+ <label class="block text-sm font-medium text-gray-300 mb-2">Training Parameters</label>
452
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
453
  <div>
454
+ <label class="block text-xs text-gray-400 mb-1">Cycles</label>
455
  <input type="number" value="10" min="1"
456
+ class="w-full px-3 py-2 border border-gray-700 rounded-md bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-purple-500">
457
  </div>
458
  <div>
459
+ <label class="block text-xs text-gray-400 mb-1">Learning Rate</label>
460
  <input type="number" step="0.0001" value="0.001"
461
+ class="w-full px-3 py-2 border border-gray-700 rounded-md bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-purple-500">
462
  </div>
463
  </div>
464
  </div>
465
 
466
  <div class="flex justify-end space-x-3">
467
+ <button id="cancel-training" class="px-4 py-2 border border-gray-600 rounded-md text-gray-300 hover:bg-gray-700">
468
  Cancel
469
  </button>
470
  <button class="gradient-bg text-white px-4 py-2 rounded-md hover:opacity-90">
 
476
  </div>
477
  </div>
478
 
479
+ <!-- Ticker Feed -->
480
+ <div class="ticker-feed">
481
+ <div class="ticker-content" id="mostar-feed">
482
+ 🔸 [Mostar Feed] Grid sync stable – Neural nodes: 427 active – Last signal: 2.3s ago – Coherence: 99.98% – Flow: Optimal
483
+ </div>
484
+ </div>
485
+
486
  <script>
487
  // Modal toggle functionality
488
  document.getElementById('upload-btn').addEventListener('click', function() {
 
520
 
521
  fileUpload.addEventListener('dragover', function(e) {
522
  e.preventDefault();
523
+ this.classList.add('border-purple-500', 'bg-purple-900');
524
  });
525
 
526
  fileUpload.addEventListener('dragleave', function(e) {
527
  e.preventDefault();
528
+ this.classList.remove('border-purple-500', 'bg-purple-900');
529
  });
530
 
531
  fileUpload.addEventListener('drop', function(e) {
532
  e.preventDefault();
533
+ this.classList.remove('border-purple-500', 'bg-purple-900');
534
  // Handle dropped files
535
  console.log('Files dropped:', e.dataTransfer.files);
536
  });
 
566
  message: 'Training initiated'
567
  };
568
  }
569
+
570
+ // Live ticker
571
+ const gridStats = {
572
+ neuralNodes: 427,
573
+ coherence: 99.98,
574
+ syncDelay: 2.3,
575
+ energyFlow: "Optimal"
576
+ };
577
+
578
+ const ticker = document.getElementById('mostar-feed');
579
+ setInterval(() => {
580
+ ticker.textContent = `🔸 [Mostar Feed] Grid sync stable – Neural nodes: ${gridStats.neuralNodes} active – Last signal: ${gridStats.syncDelay}s ago – Coherence: ${gridStats.coherence}% – Flow: ${gridStats.energyFlow}`;
581
+ }, 2000);
582
  </script>
583
+ </body>
584
+ </html>
style.css CHANGED
@@ -1,28 +1,2 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
-
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
 
 
 
 
1
 
2
+ /* This file is not used in the new implementation as all styles are included in the HTML */