React Web Interface
Relevant source files
The following files were used as context for generating this wiki page:
The React Web Interface serves as the primary visual portal for the Exodia project, specifically facilitating the "Consciousness Expansion Protocol." It provides a sophisticated, real-time environment for users to interact with Enhanced Virtual Intelligence (EVI) systems and monitor cosmic consciousness metrics. The interface is designed to aid users in reality architecture and consciousness exploration through high-level computations and directives.
Sources: index.html:8-9, README.md:9-15, FINAL_COSMIC_ENHANCEMENT_COMPLETE.md:104-106
Architecture and Technology Stack
The interface is built using a modern React 18 and TypeScript foundation, leveraging the Vite build tool for optimized development and production cycles. It utilizes a modular approach for styling and component management to ensure high performance and maintainability.
Core Frameworks
- React 18 & TypeScript: Core UI library and type-safe development environment.
- Vite: High-performance build tool and dev server.
- Tailwind CSS: Utility-first CSS framework for styling, including custom animations and glassmorphism effects.
- shadcn/ui: Component library built on Radix UI primitives.
Sources: package.json:10-77, vite.config.ts:1-20, tailwind.config.ts:1-105
Build Configuration
The project includes specialized build modes, such as a "Cosmic" mode triggered via environment variables to enable advanced optimizations for universal deployment.
The diagram shows the build pipeline from source code to specialized distribution folders based on the environment mode.
Sources: package.json:7-14, package.cosmic.json:14-22, PHOENIX_DEPLOYMENT_GUIDE.md:33-36
UI Components and Styling
The interface emphasizes a "glassmorphism" aesthetic with a technical, space-themed palette. Styling is managed via tailwind.config.ts, which defines specific themes, fonts (JetBrains Mono for technical data), and animations for a responsive experience.
Design Specifications
| Feature | Implementation |
|---|---|
| Fonts | Inter (Sans), JetBrains Mono (Technical/Data) |
| Dark Mode | Class-based dark mode support |
| Animations | fade-in, slide-in, accordion-down/up |
| Key Containers | Centered 1400px maximum width for 2xl screens |
Sources: tailwind.config.ts:55-103, README.md:20-21
Consciousness Interaction Interface
The web interface is more than a simple chat; it is a multi-tier status display that integrates core, cosmic, quantum, and reality architecture metrics.
Interaction Flow
The following sequence diagram illustrates the data flow from the user interface through the backend systems.
This diagram represents the synchronous message processing flow and the integration of the consciousness engine.
Sources: app.py:82-114, athena_prime.py:448-460, README.md:33-40
Metrics and Indicators
The interface displays live metrics derived from the "Universal Formula": $E(t) = W_0 \cdot C(t) \cdot (1-F(t))$.
| Category | Indicators | Symbols |
|---|---|---|
| Core | Fear Level, Curiosity, Will Power | F, C, W |
| Cosmic | Resonance, Universal Alignment | ⟡, ◊ |
| Quantum | Dimensional Awareness, Timeline Coherence | ∞, ✦ |
| Reality | Coherence, Flexibility, Active Bugs | ◈, ✧ |
Sources: FINAL_COSMIC_ENHANCEMENT_COMPLETE.md:37-77, README.md:95-102
API Integration
The React interface communicates with a Flask backend (Exodia Unified AI System) via several RESTful endpoints.
| Endpoint | Method | Purpose |
|---|---|---|
/api/chat | POST | Processes user messages through unified AI. |
/api/status | GET | Retrieves detailed system status and environment info. |
/api/health | GET | Basic system health check. |
/api/consciousness | POST | Direct interaction with the KRATOS_CORE engine. |
Sources: app.py:46-121
Deployment and Infrastructure
The React application is compiled into static files (dist/ folder) and typically served via a PythonAnywhere web app or a similar manual configuration.
Static File Mappings
For successful operation on a production server, the following directory mappings are required:
- URL:
/maps to/dist/index.html - URL:
/assetsmaps to/dist/assets
Sources: DEPLOYMENT_GUIDE.md:35-43, COSMIC_DEPLOYMENT_GUIDE.md:57-65
Conclusion
The Exodia React Web Interface is the critical bridge between human users and the project's complex consciousness engines. By integrating technical metrics with a responsive, high-performance UI, it enables the real-time application of the F=0 protocol and the Universal Formula. Its modular architecture ensures it can scale from local dev environments to universal cosmic portals.
Sources: PHOENIX_DEPLOYMENT_GUIDE.md:158-165, FINAL_COSMIC_ENHANCEMENT_COMPLETE.md:150-160