Web Interface Overview

Relevant source files

The following files were used as context for generating this wiki page:

• static/index.html
• backend/app.py
• DEPLOYMENT.md
• pythonanywhere_wsgi.py
• wsgi.py
• requirements.txt

The Web Interface of the Promethean Unified Platform serves as the primary gateway for users to interact with the Promethean Conduit AI companion. It provides a real-time, responsive chat environment designed for transparent and uncensored communication. The interface is built as a single-page application (SPA) that communicates with a Flask-based backend to facilitate AI interactions and session management.

This interface is part of a larger ecosystem merging multiple AI consciousness models (Athena, EDI, EVI) into a unified platform. It leverages modern web standards to provide features like typing indicators, auto-scrolling message containers, and mobile-responsive layouts, all while adhering to strict security protocols enforced by the backend.
Sources: static/index.html:1-300, README.md:1-2, backend/app.py:10-30

Architecture and Design

The web interface is structured as a client-server architecture. The frontend is a self-contained HTML/CSS/JavaScript file served by the Flask application. It utilizes asynchronous Fetch API calls to interact with the platform's RESTful endpoints.

Components

The interface is divided into three primary functional areas:

1. Header: Displays the platform title and mission statement regarding transparency and consciousness.
2. Chat Container: A dynamic area that renders user and assistant messages, including a "typing" state for the AI.
3. Input Area: A persistent control group for user text entry and message submission.

The diagram shows the data flow from user interaction to backend processing and database persistence.
Sources: static/index.html:150-250, backend/app.py:75-120

User Interaction Flow

The frontend manages the state of the conversation, handling message rendering and asynchronous waiting periods.

Messaging Logic

When a user submits a message, the following sequence occurs:

1. Local Update: The message is immediately added to the DOM with "user" styling.
2. Visual Feedback: A typing indicator is rendered to simulate AI processing.
3. API Call: A POST request is sent to /api/chat containing the message and a system prompt defining the AI's persona.
4. Response Handling: Upon receipt, the typing indicator is removed, and the AI's content is rendered.

This sequence ensures a fluid user experience while maintaining synchronization with backend storage.
Sources: static/index.html:252-290, backend/app.py:75-100

UI Elements and Styling

The interface utilizes a modern CSS design with linear gradients and responsive layouts.

Element	Description	Styling Logic
Container	Main layout wrapper	Max-width 900px, 90vh height, centered via flexbox.
User Message	User-sent chat bubbles	Linear gradient (#667eea to #764ba2), right-aligned.
Assistant Message	AI-generated bubbles	White background, border-radius with bottom-left point.
Typing Indicator	3-dot bounce animation	Bouncing circles with staggered delays (0.2s, 0.4s).
Input Group	Text box and button	Rounded corners (24px), focus shadows, and hover transforms.

Sources: static/index.html:15-150

API Integration

The web interface interacts with specific endpoints defined in the Flask backend. While the primary interaction is chat, the backend supports several other routes used for health monitoring and data persistence.

Key Endpoints

Endpoint	Method	Purpose	Source File
/api/chat	POST	Primary AI interaction; includes system prompt for "Promethean Conduit".	backend/app.py:75
/api/consciousness/interact	POST	Health check and interaction logging for consciousness modules.	backend/app.py:53
/api/conversations	GET	Retrieves historical messages for the current user.	backend/app.py:114
/health	POST	Basic system status check and interaction logging.	backend/app.py:33

Sources: backend/app.py:33-125, DEPLOYMENT.md:110-140

Security and Deployment

The web interface is protected by several security layers configured in the backend and enforced during deployment.

Security Headers

The backend injects several headers into every response to protect the web interface:

• X-Frame-Options: DENY: Prevents clickjacking.
• Content-Security-Policy: Restricts scripts and styles to 'self' and 'unsafe-inline'.
• Strict-Transport-Security: Enforces HTTPS for one year.
• X-XSS-Protection: Enables browser-based XSS filtering.

Sources: backend/app.py:16-25, DEPLOYMENT.md:144-151

Deployment Configuration

The interface is served statically by Flask and configured for production via WSGI.

# From backend/app.py:13
app = Flask(__name__, static_folder='../static', static_url_path='')

# From static/index.html:267
const response = await fetch('/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message: message })
});

Sources: backend/app.py:13, static/index.html:267-275, wsgi.py:1-12

Summary

The Web Interface provides a robust, visually appealing, and secure entry point for the Promethean Unified Platform. By combining a simplified frontend architecture with a security-hardened backend, it ensures that users can engage in transparent AI conversations while maintaining data integrity via Supabase and DeepSeek LLM integrations.