Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NeuroLake++ Cognitive Spec</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Share Tech Mono', monospace; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); | |
| } | |
| .matrix-text { | |
| color: #00ff41; | |
| text-shadow: 0 0 5px #00ff41; | |
| } | |
| .terminal-border { | |
| border: 1px solid #00ff41; | |
| box-shadow: 0 0 10px #00ff41; | |
| } | |
| .code-block { | |
| background-color: rgba(0, 20, 10, 0.7); | |
| border-radius: 0.5rem; | |
| position: relative; | |
| border: 1px solid #00ff41; | |
| box-shadow: 0 0 15px rgba(0, 255, 65, 0.3); | |
| } | |
| .code-header { | |
| background-color: #0f172a; | |
| border-top-left-radius: 0.5rem; | |
| border-top-right-radius: 0.5rem; | |
| padding: 0.5rem 1rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .code-dots { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .code-dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| } | |
| .code-dot-red { | |
| background-color: #ef4444; | |
| } | |
| .code-dot-yellow { | |
| background-color: #f59e0b; | |
| } | |
| .code-dot-green { | |
| background-color: #10b981; | |
| } | |
| .code-filename { | |
| margin-left: 1rem; | |
| color: #94a3b8; | |
| font-family: monospace; | |
| } | |
| .code-content { | |
| padding: 1rem; | |
| overflow-x: auto; | |
| } | |
| pre { | |
| margin: 0; | |
| font-family: 'Courier New', Courier, monospace; | |
| color: #e2e8f0; | |
| line-height: 1.5; | |
| } | |
| .json-key { | |
| color: #00ff41; | |
| } | |
| .json-value { | |
| color: #ffffff; | |
| } | |
| .json-string { | |
| color: #00ff99; | |
| } | |
| .json-number { | |
| color: #00ccff; | |
| } | |
| .json-boolean { | |
| color: #ff00ff; | |
| } | |
| .json-null { | |
| color: #ff6600; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .nav-tab { | |
| transition: all 0.2s ease; | |
| } | |
| .nav-tab:hover:not(.active) { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-900 text-slate-100 min-h-screen"> | |
| <div class="gradient-bg w-full py-16 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex items-center justify-center mb-6"> | |
| <div class="bg-white/20 p-3 rounded-full"> | |
| <i class="fas fa-brain text-white text-3xl"></i> | |
| </div> | |
| </div> | |
| <h1 class="text-4xl md:text-5xl font-bold text-center matrix-text mb-4">NEUROLAKE++</h1> | |
| <p class="text-xl text-center matrix-text max-w-3xl mx-auto"> | |
| The cognitive foundation for agent memory, multimodal RAG, and long-term adaptive knowledge | |
| </p> | |
| </div> | |
| </div> | |
| <div class="max-w-6xl mx-auto px-4 py-12"> | |
| <div class="bg-black/70 rounded-xl terminal-border overflow-hidden mb-12 backdrop-blur-sm"> | |
| <div class="p-6 md:p-8"> | |
| <h2 class="text-2xl font-bold mb-4 text-white">🧠 Cognitive Spec – Layer by Layer</h2> | |
| <p class="text-slate-300 mb-6"> | |
| NeuroLake++ is not just a file format, but a foundation for cognitive tooling, RAG agents, and long-term adaptive memory. | |
| </p> | |
| <div class="flex flex-wrap border-b border-slate-700 mb-6"> | |
| <button class="nav-tab px-4 py-2 font-medium text-sm rounded-t-lg mr-1 active" data-tab="manifest"> | |
| <i class="fas fa-file-alt mr-2"></i> Manifest | |
| </button> | |
| <button class="nav-tab px-4 py-2 font-medium text-sm rounded-t-lg mr-1" data-tab="chunk"> | |
| <i class="fas fa-cube mr-2"></i> Chunk | |
| </button> | |
| <button class="nav-tab px-4 py-2 font-medium text-sm rounded-t-lg mr-1" data-tab="memory"> | |
| <i class="fas fa-memory mr-2"></i> Memory | |
| </button> | |
| <button class="nav-tab px-4 py-2 font-medium text-sm rounded-t-lg" data-tab="graph"> | |
| <i class="fas fa-project-diagram mr-2"></i> Graph | |
| </button> | |
| </div> | |
| <div id="manifest" class="tab-content active"> | |
| <div class="mb-4"> | |
| <h3 class="text-lg font-semibold text-white mb-2">📜 Global Manifest File (<code class="bg-slate-700 px-2 py-1 rounded">manifest.json</code>)</h3> | |
| <p class="text-slate-300 mb-4"> | |
| Describes all contents in a "NeuroLake Object Group" (e.g., an S3 prefix or ZIP archive), defines modality coverage, versioning, and affordances. | |
| </p> | |
| </div> | |
| <div class="code-block"> | |
| <div class="code-header"> | |
| <div class="code-dots"> | |
| <div class="code-dot code-dot-red"></div> | |
| <div class="code-dot code-dot-yellow"></div> | |
| <div class="code-dot code-dot-green"></div> | |
| </div> | |
| <div class="code-filename">manifest.json</div> | |
| </div> | |
| <div class="code-content"> | |
| <pre><code>{ | |
| <span class="json-key">"neuro_lake_version"</span>: <span class="json-string">"0.4.1"</span>, | |
| <span class="json-key">"description"</span>: <span class="json-string">"Memory & knowledge corpus for legal assistant GPT agent"</span>, | |
| <span class="json-key">"modality_map"</span>: { | |
| <span class="json-key">"text"</span>: <span class="json-boolean">true</span>, | |
| <span class="json-key">"image"</span>: <span class="json-boolean">true</span>, | |
| <span class="json-key">"pdf"</span>: <span class="json-boolean">true</span>, | |
| <span class="json-key">"audio"</span>: <span class="json-boolean">false</span>, | |
| <span class="json-key">"embedding"</span>: <span class="json-boolean">true</span> | |
| }, | |
| <span class="json-key">"index_types"</span>: [ | |
| <span class="json-string">"dense"</span>, | |
| <span class="json-string">"sparse"</span>, | |
| <span class="json-string">"graph"</span> | |
| ], | |
| <span class="json-key">"agent_hooks"</span>: [ | |
| <span class="json-string">"summarize"</span>, | |
| <span class="json-string">"retrieve"</span>, | |
| <span class="json-string">"chain_reasoning"</span> | |
| ], | |
| <span class="json-key">"chunks"</span>: [ | |
| <span class="json-string">"chunk_00001.json"</span>, | |
| <span class="json-string">"chunk_00002.json"</span>, | |
| <span class="json-string">...</span> | |
| ] | |
| }</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="chunk" class="tab-content"> | |
| <div class="mb-4"> | |
| <h3 class="text-lg font-semibold text-white mb-2">🔹 Chunk File (<code class="bg-slate-700 px-2 py-1 rounded">chunk_00001.json</code>)</h3> | |
| <p class="text-slate-300 mb-4"> | |
| Represents a unit of retrieval. Can be a memory, a doc fragment, a multimodal pair, etc. | |
| </p> | |
| </div> | |
| <div class="code-block"> | |
| <div class="code-header"> | |
| <div class="code-dots"> | |
| <div class="code-dot code-dot-red"></div> | |
| <div class="code-dot code-dot-yellow"></div> | |
| <div class="code-dot code-dot-green"></div> | |
| </div> | |
| <div class="code-filename">chunk_00001.json</div> | |
| </div> | |
| <div class="code-content"> | |
| <pre><code>{ | |
| <span class="json-key">"chunk_id"</span>: <span class="json-string">"00001"</span>, | |
| <span class="json-key">"type"</span>: <span class="json-string">"doc_fragment"</span>, | |
| <span class="json-key">"modality"</span>: [ | |
| <span class="json-string">"text"</span>, | |
| <span class="json-string">"embedding"</span> | |
| ], | |
| <span class="json-key">"content"</span>: <span class="json-string">"The GDPR stipulates that personal data must be processed lawfully..."</span>, | |
| <span class="json-key">"source"</span>: { | |
| <span class="json-key">"origin"</span>: <span class="json-string">"GDPR_FullText_EN.pdf"</span>, | |
| <span class="json-key">"section"</span>: <span class="json-string">"Article 5 - Principles"</span> | |
| }, | |
| <span class="json-key">"timestamp"</span>: <span class="json-string">"2023-08-22T11:45:12Z"</span>, | |
| <span class="json-key">"tags"</span>: [ | |
| <span class="json-string">"GDPR"</span>, | |
| <span class="json-string">"data processing"</span>, | |
| <span class="json-string">"privacy"</span> | |
| ], | |
| <span class="json-key">"embedding"</span>: [ | |
| <span class="json-number">0.14</span>, | |
| <span class="json-number">0.91</span>, | |
| <span class="json-number">-0.55</span>, | |
| <span class="json-string">...</span> | |
| ], | |
| <span class="json-key">"affordances"</span>: [ | |
| <span class="json-string">"summarize"</span>, | |
| <span class="json-string">"cite"</span>, | |
| <span class="json-string">"retrieve"</span> | |
| ], | |
| <span class="json-key">"version_info"</span>: { | |
| <span class="json-key">"chunk_hash"</span>: <span class="json-string">"sha256:abcd123..."</span>, | |
| <span class="json-key">"model_embedding"</span>: <span class="json-string">"OpenAI/text-embedding-3-large@2024-01"</span>, | |
| <span class="json-key">"format"</span>: <span class="json-string">"utf8/text"</span> | |
| } | |
| }</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="memory" class="tab-content"> | |
| <div class="mb-4"> | |
| <h3 class="text-lg font-semibold text-white mb-2">🧩 Episodic Memory Block (<code class="bg-slate-700 px-2 py-1 rounded">chunk_00192.json</code>)</h3> | |
| <p class="text-slate-300 mb-4"> | |
| Useful for personal assistants, dev copilots, design bots... | |
| </p> | |
| </div> | |
| <div class="code-block"> | |
| <div class="code-header"> | |
| <div class="code-dots"> | |
| <div class="code-dot code-dot-red"></div> | |
| <div class="code-dot code-dot-yellow"></div> | |
| <div class="code-dot code-dot-green"></div> | |
| </div> | |
| <div class="code-filename">chunk_00192.json</div> | |
| </div> | |
| <div class="code-content"> | |
| <pre><code>{ | |
| <span class="json-key">"chunk_id"</span>: <span class="json-string">"00192"</span>, | |
| <span class="json-key">"type"</span>: <span class="json-string">"episodic_memory"</span>, | |
| <span class="json-key">"agent"</span>: <span class="json-string">"gpt-legal-aide"</span>, | |
| <span class="json-key">"user_context"</span>: { | |
| <span class="json-key">"persona"</span>: <span class="json-string">"in-house legal advisor"</span>, | |
| <span class="json-key">"session_intent"</span>: <span class="json-string">"understand data retention policies"</span> | |
| }, | |
| <span class="json-key">"summary"</span>: <span class="json-string">"User asked about retention periods for biometric data in smart meters."</span>, | |
| <span class="json-key">"reflection"</span>: <span class="json-string">"Follow up on DPA guidelines in Czech Republic."</span>, | |
| <span class="json-key">"embedding"</span>: [ | |
| <span class="json-string">...</span> | |
| ], | |
| <span class="json-key">"related_chunks"</span>: [ | |
| <span class="json-string">"00001"</span>, | |
| <span class="json-string">"00017"</span> | |
| ], | |
| <span class="json-key">"created"</span>: <span class="json-string">"2025-06-14T20:14:22Z"</span> | |
| }</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="graph" class="tab-content"> | |
| <div class="mb-4"> | |
| <h3 class="text-lg font-semibold text-white mb-2">🌐 Graph Index File (<code class="bg-slate-700 px-2 py-1 rounded">graph_index.json</code>)</h3> | |
| <p class="text-slate-300 mb-4"> | |
| Describes entity-entity, chunk-chunk relationships across modalities. | |
| </p> | |
| </div> | |
| <div class="code-block"> | |
| <div class="code-header"> | |
| <div class="code-dots"> | |
| <div class="code-dot code-dot-red"></div> | |
| <div class="code-dot code-dot-yellow"></div> | |
| <div class="code-dot code-dot-green"></div> | |
| </div> | |
| <div class="code-filename">graph_index.json</div> | |
| </div> | |
| <div class="code-content"> | |
| <pre><code>{ | |
| <span class="json-key">"nodes"</span>: [ | |
| { | |
| <span class="json-key">"id"</span>: <span class="json-string">"GDPR"</span>, | |
| <span class="json-key">"type"</span>: <span class="json-string">"legal_concept"</span> | |
| }, | |
| { | |
| <span class="json-key">"id"</span>: <span class="json-string">"chunk_00001"</span>, | |
| <span class="json-key">"type"</span>: <span class="json-string">"text"</span> | |
| }, | |
| { | |
| <span class="json-key">"id"</span>: <span class="json-string">"chunk_00192"</span>, | |
| <span class="json-key">"type"</span>: <span class="json-string">"memory"</span> | |
| }, | |
| { | |
| <span class="json-key">"id"</span>: <span class="json-string">"UserLukas"</span>, | |
| <span class="json-key">"type"</span>: <span class="json-string">"user"</span> | |
| } | |
| ], | |
| <span class="json-key">"edges"</span>: [ | |
| { | |
| <span class="json-key">"from"</span>: <span class="json-string">"chunk_00001"</span>, | |
| <span class="json-key">"to"</span>: <span class="json-string">"GDPR"</span>, | |
| <span class="json-key">"rel"</span>: <span class="json-string">"mentions"</span> | |
| }, | |
| { | |
| <span class="json-key">"from"</span>: <span class="json-string">"chunk_00192"</span>, | |
| <span class="json-key">"to"</span>: <span class="json-string">"chunk_00001"</span>, | |
| <span class="json-key">"rel"</span>: <span class="json-string">"references"</span> | |
| }, | |
| { | |
| <span class="json-key">"from"</span>: <span class="json-string">"UserLukas"</span>, | |
| <span class="json-key">"to"</span>: <span class="json-string">"chunk_00192"</span>, | |
| <span class="json-key">"rel"</span>: <span class="json-string">"authored"</span> | |
| } | |
| ] | |
| }</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-800 rounded-xl shadow-xl overflow-hidden mb-12"> | |
| <div class="p-6 md:p-8"> | |
| <h2 class="text-2xl font-bold mb-6 text-white">🔧 Planned Tooling</h2> | |
| <p class="text-slate-300 mb-6"> | |
| We can prototype this using: | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="bg-slate-700/50 p-4 rounded-lg border border-slate-700"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-blue-500/20 p-2 rounded-full mr-3"> | |
| <i class="fas fa-database text-blue-400"></i> | |
| </div> | |
| <h3 class="font-semibold">DuckDB</h3> | |
| </div> | |
| <p class="text-sm text-slate-300"> | |
| Locally index & query JSONL files as a pseudo-RAG engine | |
| </p> | |
| </div> | |
| <div class="bg-slate-700/50 p-4 rounded-lg border border-slate-700"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-purple-500/20 p-2 rounded-full mr-3"> | |
| <i class="fas fa-folder-open text-purple-400"></i> | |
| </div> | |
| <h3 class="font-semibold">S3 Storage</h3> | |
| </div> | |
| <p class="text-sm text-slate-300"> | |
| Folder layout for deployable storage with versioning | |
| </p> | |
| </div> | |
| <div class="bg-slate-700/50 p-4 rounded-lg border border-slate-700"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-green-500/20 p-2 rounded-full mr-3"> | |
| <i class="fas fa-robot text-green-400"></i> | |
| </div> | |
| <h3 class="font-semibold">Embedding Models</h3> | |
| </div> | |
| <p class="text-sm text-slate-300"> | |
| Local OpenAI-compatible embedding + mini-retriever (FAISS) | |
| </p> | |
| </div> | |
| <div class="bg-slate-700/50 p-4 rounded-lg border border-slate-700"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-yellow-500/20 p-2 rounded-full mr-3"> | |
| <i class="fas fa-window-maximize text-yellow-400"></i> | |
| </div> | |
| <h3 class="font-semibold">Browser WASM</h3> | |
| </div> | |
| <p class="text-sm text-slate-300"> | |
| Memory retrieval with WASM + embedding hashing (LlamaIndex) | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-800 rounded-xl shadow-xl overflow-hidden mb-12"> | |
| <div class="p-6 md:p-8"> | |
| <h2 class="text-2xl font-bold mb-6 text-white">🔥 What This Enables</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="feature-card bg-slate-700/50 p-5 rounded-lg border border-slate-700 transition-all duration-300 hover:border-blue-500"> | |
| <div class="flex items-start mb-3"> | |
| <div class="bg-blue-500/20 p-2 rounded-full mr-3"> | |
| <i class="fas fa-sliders-h text-blue-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-white">Personalized, evolving memory</h3> | |
| <p class="text-sm text-slate-300 mt-1"> | |
| Agents that learn and remember across sessions | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="feature-card bg-slate-700/50 p-5 rounded-lg border border-slate-700 transition-all duration-300 hover:border-purple-500"> | |
| <div class="flex items-start mb-3"> | |
| <div class="bg-purple-500/20 p-2 rounded-full mr-3"> | |
| <i class="fas fa-images text-purple-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-white">Multimodal memory-retrieval</h3> | |
| <p class="text-sm text-slate-300 mt-1"> | |
| GPTs that see, cite, and recall across formats | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="feature-card bg-slate-700/50 p-5 rounded-lg border border-slate-700 transition-all duration-300 hover:border-green-500"> | |
| <div class="flex items-start mb-3"> | |
| <div class="bg-green-500/20 p-2 rounded-full mr-3"> | |
| <i class="fas fa-link text-green-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-white">Graph-enhanced RAG</h3> | |
| <p class="text-sm text-slate-300 mt-1"> | |
| Enables reasoning, tool-use, and disambiguation | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="feature-card bg-slate-700/50 p-5 rounded-lg border border-slate-700 transition-all duration-300 hover:border-yellow-500"> | |
| <div class="flex items-start mb-3"> | |
| <div class="bg-yellow-500/20 p-2 rounded-full mr-3"> | |
| <i class="fas fa-history text-yellow-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-white">Time travel / version audit</h3> | |
| <p class="text-sm text-slate-300 mt-1"> | |
| Trace how knowledge or memory evolved | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="feature-card bg-slate-700/50 p-5 rounded-lg border border-slate-700 transition-all duration-300 hover:border-red-500"> | |
| <div class="flex items-start mb-3"> | |
| <div class="bg-red-500/20 p-2 rounded-full mr-3"> | |
| <i class="fas fa-plug text-red-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-white">Plug-and-play RAG agents</h3> | |
| <p class="text-sm text-slate-300 mt-1"> | |
| Universal context sources, future-ready APIs | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-800 rounded-xl shadow-xl overflow-hidden"> | |
| <div class="p-6 md:p-8"> | |
| <h2 class="text-2xl font-bold mb-6 text-white">🎯 Next Steps</h2> | |
| <p class="text-slate-300 mb-6"> | |
| Here are a few possible next steps to take NeuroLake++ forward: | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-gradient-to-br from-blue-900/50 to-blue-800/50 p-5 rounded-lg border border-blue-800/50"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-500/20 p-3 rounded-full mr-4"> | |
| <i class="fas fa-laptop-code text-blue-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-white text-lg mb-2">Local PoC</h3> | |
| <p class="text-sm text-blue-100 mb-3"> | |
| DuckDB + NeuroLake++-style JSON index → basic RAG prototype | |
| </p> | |
| <button class="text-xs bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full transition-colors"> | |
| Prototype | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-purple-900/50 to-purple-800/50 p-5 rounded-lg border border-purple-800/50"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-500/20 p-3 rounded-full mr-4"> | |
| <i class="fas fa-memory text-purple-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-white text-lg mb-2">Memory Builder</h3> | |
| <p class="text-sm text-purple-100 mb-3"> | |
| A tool to create episodic memory blocks from user sessions | |
| </p> | |
| <button class="text-xs bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded-full transition-colors"> | |
| Design | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-green-900/50 to-green-800/50 p-5 rounded-lg border border-green-800/50"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-500/20 p-3 rounded-full mr-4"> | |
| <i class="fas fa-server text-green-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-white text-lg mb-2">S3 Storage Layout</h3> | |
| <p class="text-sm text-green-100 mb-3"> | |
| Full design of how NeuroLake++ would live, grow, and update in S3 | |
| </p> | |
| <button class="text-xs bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded-full transition-colors"> | |
| Architect | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-yellow-900/50 to-yellow-800/50 p-5 rounded-lg border border-yellow-800/50"> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-500/20 p-3 rounded-full mr-4"> | |
| <i class="fas fa-robot text-yellow-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-white text-lg mb-2">Agent SDK</h3> | |
| <p class="text-sm text-yellow-100 mb-3"> | |
| Design function signatures for agents to remember(), reflect(), and query_memory() | |
| </p> | |
| <button class="text-xs bg-yellow-600 hover:bg-yellow-700 text-white px-3 py-1 rounded-full transition-colors"> | |
| Develop | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="bg-slate-800/50 py-8 px-4 border-t border-slate-700/50"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <div class="flex items-center"> | |
| <div class="bg-white/20 p-2 rounded-full mr-3"> | |
| <i class="fas fa-brain text-white"></i> | |
| </div> | |
| <span class="font-bold text-white">NeuroLake++</span> | |
| </div> | |
| <p class="text-sm text-slate-400 mt-2"> | |
| The cognitive foundation for agent memory | |
| </p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-slate-400 hover:text-white transition-colors"> | |
| <i class="fab fa-github text-lg"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-white transition-colors"> | |
| <i class="fab fa-twitter text-lg"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-white transition-colors"> | |
| <i class="fab fa-discord text-lg"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center text-sm text-slate-500"> | |
| © 2024 NeuroLake++ Project. All specifications are open for discussion and contribution. | |
| </div> | |
| </div> | |
| </footer> | |
| <div id="threejs-container" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;"></div> | |
| <script> | |
| // Three.js Matrix-like background | |
| const container = document.getElementById('threejs-container'); | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| container.appendChild(renderer.domElement); | |
| // Create grid | |
| const gridSize = 30; | |
| const gridDivisions = 30; | |
| const gridHelper = new THREE.GridHelper(gridSize, gridDivisions, 0x00ff41, 0x00aa33); | |
| gridHelper.position.y = -5; | |
| scene.add(gridHelper); | |
| // Add floating particles | |
| const particles = new THREE.BufferGeometry(); | |
| const particleCount = 1000; | |
| const posArray = new Float32Array(particleCount * 3); | |
| for(let i = 0; i < particleCount * 3; i++) { | |
| posArray[i] = (Math.random() - 0.5) * 20; | |
| } | |
| particles.setAttribute('position', new THREE.BufferAttribute(posArray, 3)); | |
| const particleMaterial = new THREE.PointsMaterial({ | |
| size: 0.1, | |
| color: 0x00ff41, | |
| transparent: true, | |
| opacity: 0.8 | |
| }); | |
| const particleSystem = new THREE.Points(particles, particleMaterial); | |
| scene.add(particleSystem); | |
| camera.position.z = 10; | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| particleSystem.rotation.y += 0.001; | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| // Tab switching functionality | |
| document.querySelectorAll('.nav-tab').forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| // Remove active class from all tabs and content | |
| document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active')); | |
| document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); | |
| // Add active class to clicked tab and corresponding content | |
| tab.classList.add('active'); | |
| const tabId = tab.getAttribute('data-tab'); | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| // Add animation to feature cards on hover | |
| document.querySelectorAll('.feature-card').forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| card.style.transform = 'translateY(-5px)'; | |
| card.style.boxShadow = '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)'; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.style.transform = ''; | |
| card.style.boxShadow = ''; | |
| }); | |
| }); | |
| </script> | |
| <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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=LukasBe/neurolake-plus-plus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |