Spaces:

dokii
/

aetheria

Running

File size: 15,547 Bytes

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

    /* TOC and SPEC Modal Styles */
    #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">

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

  <!-- TOC and SPEC Buttons -->
  <div id="spec-icon" title="Show T20-MAS Specification">&#128270;</div> <!-- Document Icon -->
  <div id="toc-icon" title="Show Table of Contents">&#9776;</div>

  <!-- TOC Modal -->
  <div id="toc-modal" class="modal">
    <div class="modal-content">
      <button class="modal-close" id="toc-close-btn">&times;</button>
      <!-- TOC Content -->
      <div class="toc-main-header">Aetheria OS</div>
      <!-- [Your existing TOC content goes here] -->
    </div>
  </div>

  <!-- SPEC Modal -->
  <div id="spec-modal" class="modal">
    <div class="modal-content">
      <button class="modal-close" id="spec-close-btn">&times;</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>

      <!-- Add the rest of the specification content here -->
      <!-- For brevity, only part of the spec is included -->
      <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>

      <!-- Continue adding the full specification content here as needed -->

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

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

  <!-- Scripts -->
  <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);

      // TOC Modal
      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'));
      }

      // SPEC Modal
      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>