|
|
<!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> |
