| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Aetheria OS - Awakening</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Varela+Round:wght@300;400;600;700&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Varela Round', sans-serif; |
| overflow: hidden; |
| background-image: url('https://ai.violass.club/Gemini_Generated_Image_8x72rk8x72rk8x72.jpeg'); |
| background-size: cover; |
| background-position: center; |
| background-repeat: no-repeat; |
| background-attachment: fixed; |
| position: relative; |
| } |
| |
| body::before { |
| content: ""; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-color: #0F172A; |
| opacity: 0; |
| transition: opacity 2.5s ease-in-out; |
| z-index: -1; |
| } |
| |
| body.less-intense-bg::before { |
| opacity: 0.6; |
| } |
| |
| .glow { |
| box-shadow: 0 0 15px 5px rgba(173, 216, 230, 0.6), 0 0 30px 10px rgba(173, 216, 230, 0.4), 0 0 45px 15px rgba(173, 216, 230, 0.2); |
| } |
| |
| .pillar-glow { |
| box-shadow: 0 0 8px 2px rgba(224, 176, 255, 0.5), 0 0 15px 4px rgba(224, 176, 255, 0.3); |
| } |
| |
| .pipe-glow { |
| filter: drop-shadow(0 0 3px rgba(173, 216, 230, 0.7)); |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| @keyframes fadeInScale { |
| from { opacity: 0; transform: scale(0.8); } |
| to { opacity: 1; transform: scale(1); } |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { transform: scale(1); box-shadow: 0 0 15px 5px rgba(173, 216, 230, 0.6), 0 0 30px 10px rgba(173, 216, 230, 0.4), 0 0 45px 15px rgba(173, 216, 230, 0.2); } |
| 50% { transform: scale(1.05); box-shadow: 0 0 20px 8px rgba(173, 216, 230, 0.8), 0 0 40px 15px rgba(173, 216, 230, 0.5), 0 0 60px 20px rgba(173, 216, 230, 0.3); } |
| } |
| |
| @keyframes orbit { |
| from { transform: rotate(0deg) translateX(120px) rotate(0deg); } |
| to { transform: rotate(360deg) translateX(120px) rotate(-360deg); } |
| } |
| |
| @keyframes orbit-sm { |
| from { transform: rotate(0deg) translateX(80px) rotate(0deg); } |
| to { transform: rotate(360deg) translateX(80px) rotate(-360deg); } |
| } |
| |
| .animate-fadeIn { animation: fadeIn 1.5s ease-out forwards; } |
| .animate-fadeInScale { animation: fadeInScale 1.5s ease-out forwards; } |
| .animate-pulse { animation: pulse 3s infinite ease-in-out; } |
| .delay-1s { animation-delay: 1s; } |
| .delay-1_5s { animation-delay: 1.5s; } |
| .delay-2s { animation-delay: 2s; } |
| .delay-2_5s { animation-delay: 2.5s; } |
| .delay-3s { animation-delay: 3s; } |
| .delay-3_5s { animation-delay: 3.5s; } |
| .delay-4s { animation-delay: 4s; } |
| |
| .pillar { |
| width: 24px; |
| height: 24px; |
| position: absolute; |
| border-radius: 50%; |
| background-color: rgba(224, 176, 255, 0.3); |
| border: 1px solid rgba(224, 176, 255, 0.7); |
| } |
| |
| @media (min-width: 768px) { |
| .pillar { |
| width: 32px; |
| height: 32px; |
| } |
| } |
| |
| .pillar-cc { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } |
| .pillar-apn { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } |
| .pillar-re { border-radius: 20%; transform: rotate(45deg); } |
| .pillar-con { clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); } |
| .pillar-coa { border-radius: 50%; } |
| .pillar-sr {} |
| |
| .pipe-line { |
| position: absolute; |
| background-color: rgba(173, 216, 230, 0.5); |
| height: 1px; |
| transform-origin: left center; |
| opacity: 0; |
| } |
| |
| |
| #spec-icon, #toc-icon { |
| position: fixed; |
| bottom: 20px; |
| font-size: 28px; |
| color: #a0aec0; |
| background-color: rgba(15, 23, 42, 0.6); |
| padding: 10px 14px; |
| border-radius: 50%; |
| cursor: pointer; |
| z-index: 10000; |
| transition: color 0.3s, background-color 0.3s; |
| line-height: 1; |
| } |
| |
| #spec-icon:hover, #toc-icon:hover { |
| color: #e2e8f0; |
| background-color: rgba(15, 23, 42, 0.8); |
| } |
| |
| #spec-icon { left: 20px; } |
| #toc-icon { left: 80px; } |
| |
| .modal { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-color: rgba(0, 0, 0, 0.6); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| z-index: 9999; |
| opacity: 0; |
| visibility: hidden; |
| transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; |
| } |
| |
| .modal.visible { |
| opacity: 1; |
| visibility: visible; |
| transition: opacity 0.3s ease-in-out, visibility 0s linear 0s; |
| } |
| |
| .modal-content { |
| width: 85%; |
| max-width: 800px; |
| max-height: 85vh; |
| overflow-y: auto; |
| background-color: rgba(233, 233, 233, 0.9); |
| color: #111; |
| padding: 25px 30px; |
| border-radius: 8px; |
| box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); |
| position: relative; |
| font-family: sans-serif; |
| line-height: 1.6; |
| } |
| |
| .modal-close { |
| position: absolute; |
| top: 10px; |
| right: 15px; |
| font-size: 30px; |
| font-weight: bold; |
| color: #aaa; |
| cursor: pointer; |
| background: none; |
| border: none; |
| line-height: 1; |
| } |
| |
| .modal-close:hover { |
| color: #333; |
| } |
| |
| .modal h2, .modal h3, .modal h4 { |
| color: #2c3e50; |
| margin-top: 25px; |
| border-bottom: 2px solid #3498db; |
| padding-bottom: 10px; |
| } |
| |
| .modal h3 { |
| color: #14487b; |
| border-bottom: 1px solid #7f8c8d; |
| padding-bottom: 5px; |
| } |
| |
| .modal h4 { |
| color: #104069; |
| } |
| |
| .modal ul { |
| list-style-type: none; |
| padding-left: 0; |
| } |
| |
| .modal li { |
| margin-bottom: 8px; |
| padding-left: 20px; |
| position: relative; |
| } |
| |
| .modal li::before { |
| content: "•"; |
| position: absolute; |
| left: 0; |
| color: #3498db; |
| } |
| |
| .modal .note { |
| font-style: italic; |
| color: #7f8c8d; |
| font-size: 0.9em; |
| } |
| |
| .modal code { |
| padding: 2px 5px; |
| border-radius: 4px; |
| font-family: monospace; |
| background-color: rgba(150, 170, 150, 0.9); |
| color: #2d392d; |
| } |
| </style> |
| </head> |
| <body class="text-gray-200 min-h-screen flex flex-col items-center justify-center p-4"> |
|
|
| |
| <div id="splash-container" class="relative flex flex-col items-center justify-center w-full max-w-2xl opacity-0 animate-fadeIn" style="animation-duration: 1s; position: relative; z-index: 1;"> |
| <div id="pantheon-core" class="w-24 h-24 md:w-32 md:h-32 bg-blue-300 rounded-full glow animate-pulse animate-fadeInScale opacity-0" style="animation-delay: 0.5s;"></div> |
| <div id="pillars-container" class="absolute top-1/2 left-1/2 w-0 h-0"></div> |
| <div id="lines-container" class="absolute top-1/2 left-1/2 w-0 h-0"></div> |
|
|
| <div class="text-center mt-12 md:mt-16"> |
| <h1 id="title" class="text-5xl md:text-7xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-sky-300 via-blue-300 to-indigo-400 opacity-0 animate-fadeInScale" style="animation-delay: 2s;">Aetheria</h1> |
| <p id="subtitle" class="mt-3 md:mt-4 text-lg md:text-2xl text-indigo-200 opacity-0 animate-fadeInScale" style="animation-delay: 2.8s;">Meta-Operating System for Collaborative Intelligence</p> |
| <p id="status" class="mt-8 md:mt-10 text-sm md:text-base text-sky-400 opacity-0 animate-fadeIn" style="animation-delay: 3.8s;">Awakening Concord...</p> |
| </div> |
|
|
| <div class="absolute inset-0 flex items-center justify-center -z-10 opacity-0 animate-fadeIn" style="animation-delay: 4.5s; animation-duration: 3s;"> |
| <span class="text-xs text-slate-700 absolute top-1/4 left-1/4 transform -rotate-12">Sacred Rites</span> |
| <span class="text-xs text-slate-700 absolute bottom-1/3 right-1/4 transform rotate-6">Divine Archetypes</span> |
| <span class="text-xs text-slate-700 absolute top-1/3 right-1/5 transform rotate-15">Aetheric Pipes</span> |
| <span class="text-xs text-slate-700 absolute bottom-1/4 left-1/5 transform -rotate-8">Concordium</span> |
| </div> |
| </div> |
|
|
| |
| <div id="spec-icon" title="Show T20-MAS Specification">🔎</div> |
| <div id="toc-icon" title="Show Table of Contents">☰</div> |
|
|
| |
| <div id="toc-modal" class="modal"> |
| <div class="modal-content"> |
| <button class="modal-close" id="toc-close-btn">×</button> |
| |
| <div class="toc-main-header">Aetheria OS</div> |
| |
| </div> |
| </div> |
|
|
| |
| <div id="spec-modal" class="modal"> |
| <div class="modal-content"> |
| <button class="modal-close" id="spec-close-btn">×</button> |
| <h2>T20-MAS Web App Specification (Conceptual, Stand-alone)</h2> |
|
|
| <h3>1. Introduction</h3> |
| <p>This document outlines the conceptual specification for a stand-alone, no-backend T20-MAS (Task-Oriented Multi-Agent System) Web Application...</p> |
|
|
| <h3>2. Overall Goal</h3> |
| <p>Generation of a specification of a stand-alone T20-MAS Web App, no backend, purely conceptual.</p> |
|
|
| <h3>3. Architectural Context and Insights</h3> |
| <ul> |
| <li><strong>Client-Side Execution:</strong> All MAS logic, communication, and state management must reside within the browser's JavaScript environment...</li> |
| <li><strong>No Backend:</strong> Eliminates server-side persistence, APIs, and computation...</li> |
| <li><strong>MAS in the Browser:</strong> Requires browser-compatible implementations for components like the <code>MessageBus</code>...</li> |
| <li><strong>Conceptual Focus:</strong> The specification defines the structure and interfaces without requiring a full implementation...</li> |
| </ul> |
|
|
| |
| |
| <h3>4. Core Components and Interfaces</h3> |
| <h4>4.1. Agent Definition (<code>runtime/agent.py</code> basis)</h4> |
| <p><strong>Agent Class:</strong> The fundamental unit of the MAS. Responsible for executing tasks based on its profile (name, role, goal) and system instructions.</p> |
|
|
| <h4>4.2. Core Runtime (<code>runtime/core.py</code> basis)</h4> |
| <p><strong>ExecutionContext:</strong> Manages the state and context for a workflow, including plans and artifacts...</p> |
|
|
| |
|
|
| <h3>8. Scope and Limitations</h3> |
| <ul> |
| <li><strong>Conceptual:</strong> This specification is conceptual and does not include implementation details for browser-specific adaptations.</li> |
| <li><strong>Stand-alone:</strong> No backend server is involved; all processing occurs client-side.</li> |
| <li><strong>Limited Scalability:</strong> Performance and memory are constrained by the user's browser capabilities.</li> |
| <li><strong>No Data Sharing:</strong> Each user session is independent; data is not shared between users.</li> |
| </ul> |
| </div> |
| </div> |
|
|
| |
| <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=dokii/aetheria" style="color: #fff;text-decoration: underline;" target="_blank">Remix</a> |
| </p> |
|
|
| |
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| const pillarsContainer = document.getElementById('pillars-container'); |
| const linesContainer = document.getElementById('lines-container'); |
| const core = document.getElementById('pantheon-core'); |
| const numPillars = 6; |
| const orbitRadius = window.innerWidth < 768 ? 80 : 120; |
| const pillarSize = window.innerWidth < 768 ? 24 : 32; |
| |
| const pillarClasses = ['pillar-cc', 'pillar-apn', 'pillar-re', 'pillar-con', 'pillar-coa', 'pillar-sr']; |
| |
| for (let i = 0; i < numPillars; i++) { |
| const angle = (i / numPillars) * 2 * Math.PI; |
| const x = Math.cos(angle) * orbitRadius; |
| const y = Math.sin(angle) * orbitRadius; |
| |
| const pillar = document.createElement('div'); |
| pillar.className = `pillar ${pillarClasses[i % pillarClasses.length]} opacity-0 animate-fadeInScale pillar-glow`; |
| pillar.style.left = `${x - (pillarSize / 2)}px`; |
| pillar.style.top = `${y - (pillarSize / 2)}px`; |
| pillar.style.animationDelay = `${1 + i * 0.2}s`; |
| pillarsContainer.appendChild(pillar); |
| |
| const line = document.createElement('div'); |
| line.className = 'pipe-line pipe-glow animate-fadeIn'; |
| line.style.animationDelay = `${1.2 + i * 0.2}s`; |
| |
| const distance = Math.sqrt(x * x + y * y); |
| const lineAngle = Math.atan2(y, x) * (180 / Math.PI); |
| |
| line.style.width = `${distance}px`; |
| line.style.transform = `rotate(${lineAngle}deg)`; |
| line.style.left = `0px`; |
| line.style.top = `0px`; |
| linesContainer.appendChild(line); |
| } |
| |
| setTimeout(() => document.body.classList.add('less-intense-bg'), 2500); |
| |
| |
| const tocIcon = document.getElementById('toc-icon'); |
| const tocModal = document.getElementById('toc-modal'); |
| const tocCloseBtn = document.getElementById('toc-close-btn'); |
| if (tocIcon && tocModal && tocCloseBtn) { |
| tocIcon.addEventListener('click', () => tocModal.classList.add('visible')); |
| tocCloseBtn.addEventListener('click', () => tocModal.classList.remove('visible')); |
| tocModal.addEventListener('click', e => e.target === tocModal && tocModal.classList.remove('visible')); |
| } |
| |
| |
| const specIcon = document.getElementById('spec-icon'); |
| const specModal = document.getElementById('spec-modal'); |
| const specCloseBtn = document.getElementById('spec-close-btn'); |
| if (specIcon && specModal && specCloseBtn) { |
| specIcon.addEventListener('click', () => specModal.classList.add('visible')); |
| specCloseBtn.addEventListener('click', () => specModal.classList.remove('visible')); |
| specModal.addEventListener('click', e => e.target === specModal && specModal.classList.remove('visible')); |
| } |
| }); |
| </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://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=dokii/aetheria" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
