Upload 13 files

.dockerignore

@@ -0,0 +1,255 @@
+# Bio Human Atlas Viewer - Docker Ignore
+# Gaston Software Solutions Tec, Uganda
+# AR Dashboard Specific Exclusions
+
+# Git
+.git
+.gitignore
+.gitattributes
+
+# Documentation
+README.md
+CHANGELOG.md
+LICENSE
+*.md
+
+# Development files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# Virtual environments
+venv/
+env/
+ENV/
+env.bak/
+venv.bak/
+.venv/
+
+# Testing
+.pytest_cache/
+.coverage
+htmlcov/
+.tox/
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+.hypothesis/
+test-*.js
+test-*.py
+test_*.py
+*test*.html
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# pyenv
+.python-version
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Node.js
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Logs
+logs/
+*.log
+
+# Runtime data
+pids/
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# nyc test coverage
+.nyc_output
+
+# Dependency directories
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Temporary files
+tmp/
+temp/
+*.tmp
+*.temp
+
+# IDE files
+*.sublime-project
+*.sublime-workspace
+
+# Local development
+local/
+.local/
+
+# Backup files
+*.bak
+*.backup
+
+# Database files
+*.db
+*.sqlite
+*.sqlite3
+
+# Compiled files
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.so
+
+# Archives
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+
+# Media files (if not needed)
+*.mp4
+*.avi
+*.mov
+*.wmv
+*.flv
+*.webm
+
+# Large data files
+*.csv
+*.json.gz
+*.parquet
+
+# Development scripts
+scripts/dev/
+scripts/test/
+dev-tools/
+
+# Documentation build
+docs/_build/
+site/
+
+# AR Dashboard specific exclusions
+debug-*.js
+debug-*.html
+debug-*.py
+analyze-*.js
+analyze-*.py
+fix-*.js
+fix-*.py
+deploy-*.bat
+deploy-*.py
+setup-*.py
+install-*.bat
+start-*.bat
+launch-*.bat
+monitor-*.js
+verify-*.js
+check-*.js
+check-*.py
+test_*.js
+Frontend/
+oabrowser/
+3Dslicer/
+Bio/
+conductor_*/
+spillover_deploy/
+war/
+econ/
+deep/
+deepseek-ai-*/
+DeepSeek-OCR/
+aegis_*/
+langgraph/
+tec/
+tt/
+chatterbox-turbo-demo/
+ChatUI/
+fastsdcpu_temp/
+hf_space_temp/
+New folder/
+output/
+pdb_cache/
+venv_*/
+__pycache__/

.gitattributes

@@ -1,35 +1,35 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,49 @@
+FROM python:3.9-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    g++ \
+    curl \
+    && rm -rf /var/lib/apt/lists/* \
+    && apt-get clean
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
+
+# Copy application files
+COPY app.py .
+COPY ar_dashboard.html .
+
+# Create necessary directories and move template file
+RUN mkdir -p templates static/css static/js static/images logs && \
+    mv ar_dashboard.html templates/ar_dashboard.html
+
+# Create non-root user for security
+RUN useradd --create-home --shell /bin/bash app && \
+    chown -R app:app /app
+USER app
+
+# Expose port
+EXPOSE 7860
+
+# Set environment variables
+ENV FLASK_APP=app.py
+ENV FLASK_ENV=production
+ENV PORT=7860
+ENV PYTHONPATH=/app
+ENV PYTHONUNBUFFERED=1
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost:7860/health || exit 1
+
+# Run the application
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers", "2", "--timeout", "120", "--access-logfile", "-", "--error-logfile", "-", "app:app"]

README.md

@@ -1,10 +1,49 @@
----
-title: AR
-emoji: 🐠
-colorFrom: yellow
-colorTo: blue
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: AEGIS AR Dashboard
+emoji: 🚀
+colorFrom: blue
+colorTo: blue
+sdk: docker
+pinned: false
+license: mit
+---
+
+# AEGIS BIO DIGITAL LAB 10 - AR Portal Dashboard
+
+Welcome to the AEGIS Bio Digital Lab 10 Augmented Reality Portal Dashboard.
+
+## Features
+
+- 🌐 Unified portal access for all AEGIS components
+- 📊 Real-time system status monitoring
+- 🎨 Modern, responsive interface
+- 🔧 RESTful API endpoints
+- 🏥 Health monitoring and diagnostics
+
+## Portals
+
+1. **Portal Control** - Main control center
+2. **SciBERT Analysis** - Scientific analysis tools
+3. **Conductor** - System orchestration
+4. **Economic Modal** - Economic modeling
+5. **War Modal** - Strategic analysis
+6. **Disease Modal** - Disease tracking
+7. **DeepSeek** - AI deep analysis
+8. **Image Modal** - Image processing
+9. **Drug Development** - Pharmaceutical research
+10. **Visual Kinetic** - Visual analytics
+
+## API Endpoints
+
+- `GET /` - Main dashboard interface
+- `GET /health` - Health check
+- `GET /api/status` - System status
+- `POST /api/update-urls` - Update portal URLs
+
+## Usage
+
+The dashboard automatically loads and displays all available portals. Click on any portal card to access the respective system component.
+
+---
+
+**© 2025 AEGIS Systems - Advanced Biological Research Platform**

app.py

@@ -0,0 +1,234 @@
+from flask import Flask, render_template, request, jsonify
+from flask_cors import CORS
+from datetime import datetime
+import os
+
+app = Flask(__name__)
+CORS(app)
+
+# In-memory store for the frontend base URL.
+# The Cloudflare Worker calls /api/update-urls whenever the frontend URL changes.
+current_urls = {
+    'base_url': '',
+    'last_updated': '',
+    'portals': []
+}
+
+# All 10 AEGIS analysis windows + their metadata
+WINDOW_DEFINITIONS = [
+    {
+        'window': 2,
+        'name': 'Tech Analysis',
+        'path': '/window2',
+        'icon': 'cpu',
+        'color': 'blue',
+        'description': 'TEC model — technology threat scores for any year',
+    },
+    {
+        'window': 3,
+        'name': 'Conductor Synthesis',
+        'path': '/window3',
+        'icon': 'git-branch',
+        'color': 'purple',
+        'description': 'Groq synthesis of tech threats into strategic insights',
+    },
+    {
+        'window': 4,
+        'name': 'Economic Analysis',
+        'path': '/window4',
+        'icon': 'trending-up',
+        'color': 'yellow',
+        'description': '12 economic impact indicators from conductor results',
+    },
+    {
+        'window': 5,
+        'name': 'War Analysis',
+        'path': '/window5',
+        'icon': 'shield',
+        'color': 'red',
+        'description': 'Dual AI + live conflict data — war risk predictions',
+    },
+    {
+        'window': 6,
+        'name': 'Climate Analysis',
+        'path': '/window6',
+        'icon': 'cloud',
+        'color': 'cyan',
+        'description': 'World Bank CCKP — climate-conflict nexus assessment',
+    },
+    {
+        'window': 7,
+        'name': 'Disease Prediction',
+        'path': '/window7',
+        'icon': 'activity',
+        'color': 'orange',
+        'description': 'AI biosecurity risk — top 3 disease outbreak predictions',
+    },
+    {
+        'window': 8,
+        'name': 'Drug Discovery',
+        'path': '/window8',
+        'icon': 'zap',
+        'color': 'green',
+        'description': '4-phase pipeline — SMILES, DiffDock, Vina, manufacturing',
+    },
+    {
+        'window': 9,
+        'name': 'Visual Disease',
+        'path': '/window9',
+        'icon': 'image',
+        'color': 'pink',
+        'description': 'AI-generated pathogen morphology visualizations',
+    },
+    {
+        'window': 10,
+        'name': 'Visual Kinetic',
+        'path': '/window10',
+        'icon': 'eye',
+        'color': 'indigo',
+        'description': '3D PK/PD simulation with live cardiac monitoring',
+    },
+    {
+        'window': 11,
+        'name': 'AR Portal',
+        'path': '/window11',
+        'icon': 'scan',
+        'color': 'teal',
+        'description': 'Augmented Reality — scan QR to view all windows remotely',
+    },
+]
+
+
+def build_portals(base_url: str) -> list:
+    """Build portal list from window definitions + a given base URL."""
+    return [
+        {
+            **w,
+            'url': f"{base_url.rstrip('/')}{w['path']}",
+            'qr_url': f"{base_url.rstrip('/')}{w['path']}",
+        }
+        for w in WINDOW_DEFINITIONS
+    ]
+
+
+# ── Routes ────────────────────────────────────────────────────────────────────
+
+@app.route('/')
+def index():
+    """AR Portal Dashboard — shows QR grid for all windows."""
+    return render_template(
+        'ar_dashboard.html',
+        base_url=current_urls.get('base_url', ''),
+        last_updated=current_urls.get('last_updated', ''),
+        portals=current_urls.get('portals', []),
+    )
+
+
+@app.route('/ping', methods=['GET'])
+def ping():
+    """UptimeRobot keep-alive — returns 200 instantly, no heavy work."""
+    return jsonify({'status': 'ok', 'message': 'AR Space is alive'}), 200
+
+
+@app.route('/health')
+def health():
+    """Health check."""
+    return jsonify({'status': 'healthy', 'timestamp': datetime.now().isoformat()})
+
+
+@app.route('/api/status')
+def status():
+    """Current AR system status — called by the worker."""
+    return jsonify({
+        'status': 'online',
+        'base_url': current_urls.get('base_url', ''),
+        'last_updated': current_urls.get('last_updated', ''),
+        'portals_count': len(current_urls.get('portals', [])),
+        'total_windows': len(WINDOW_DEFINITIONS),
+    })
+
+
+@app.route('/api/update-urls', methods=['POST'])
+def update_urls():
+    """
+    Called by the Cloudflare Worker (or directly) to register the frontend
+    base URL.  Once set, /api/qr-data returns ready-to-use QR links.
+    """
+    try:
+        data = request.get_json()
+        if not data or 'base_url' not in data:
+            return jsonify({'error': 'base_url is required'}), 400
+
+        base_url = data['base_url'].rstrip('/')
+        portals   = build_portals(base_url)
+        timestamp = datetime.now().isoformat()
+
+        current_urls.update({
+            'base_url':     base_url,
+            'last_updated': timestamp,
+            'portals':      portals,
+        })
+
+        return jsonify({
+            'success':       True,
+            'message':       'URLs updated successfully',
+            'base_url':      base_url,
+            'timestamp':     timestamp,
+            'portals_count': len(portals),
+        })
+
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+@app.route('/api/qr-data', methods=['GET'])
+def qr_data():
+    """
+    Returns all window URLs ready for QR-code generation.
+    Window 11 frontend calls this via the worker proxy to render the QR grid.
+    Optional ?window=N to get a single window's data.
+    """
+    window_param = request.args.get('window')
+    base_url     = current_urls.get('base_url', '')
+
+    if not base_url:
+        return jsonify({
+            'error':   'base_url not configured yet',
+            'hint':    'POST {"base_url": "https://your-app.com"} to /api/update-urls',
+            'portals': [],
+        }), 503
+
+    portals = current_urls.get('portals') or build_portals(base_url)
+
+    if window_param:
+        try:
+            wnum   = int(window_param)
+            portal = next((p for p in portals if p['window'] == wnum), None)
+            if not portal:
+                return jsonify({'error': f'Window {wnum} not found'}), 404
+            return jsonify({'success': True, 'portal': portal})
+        except ValueError:
+            return jsonify({'error': 'window must be an integer'}), 400
+
+    return jsonify({
+        'success':      True,
+        'base_url':     base_url,
+        'last_updated': current_urls.get('last_updated', ''),
+        'portals':      portals,
+        'total':        len(portals),
+    })
+
+
+@app.route('/api/windows', methods=['GET'])
+def windows():
+    """Static list of all window definitions (no base_url needed)."""
+    return jsonify({
+        'success': True,
+        'windows': WINDOW_DEFINITIONS,
+        'total':   len(WINDOW_DEFINITIONS),
+    })
+
+
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port, debug=False)

ar_dashboard.html

@@ -0,0 +1,844 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AEGIS BIO DIGITAL LAB 10 - AR Portal</title>
+    <meta name="description" content="AEGIS Bio Digital Lab 10 Augmented Reality Portal Dashboard">
+    
+    <!-- Lucide Icons CDN -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
+    
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+            color: white;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+
+        .header {
+            background: rgba(0, 0, 0, 0.4);
+            padding: 1.5rem 2rem;
+            backdrop-filter: blur(15px);
+            border-bottom: 1px solid rgba(0, 255, 255, 0.3);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+
+        .header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 0.5rem;
+            background: linear-gradient(45deg, #00FFFF, #0080FF);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-align: center;
+            animation: pulse 2s infinite;
+        }
+
+        .header .subtitle {
+            font-size: 1.2rem;
+            text-align: center;
+            opacity: 0.9;
+            color: #E3F2FD;
+        }
+
+        .status-bar {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 2rem;
+            margin-top: 1rem;
+            flex-wrap: wrap;
+        }
+
+        .status-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+
+        .status-online {
+            color: #4CAF50;
+        }
+
+        .status-offline {
+            color: #f44336;
+        }
+
+        .main-content {
+            padding: 2rem;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        .hero-section {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+
+        .hero-section h2 {
+            font-size: 2rem;
+            margin-bottom: 1rem;
+            color: #00FFFF;
+        }
+
+        .hero-section p {
+            font-size: 1.1rem;
+            opacity: 0.9;
+            max-width: 600px;
+            margin: 0 auto;
+            line-height: 1.6;
+        }
+
+        .portals-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 3rem;
+        }
+
+        .portal-card {
+            background: rgba(0, 0, 0, 0.4);
+            border: 1px solid rgba(0, 255, 255, 0.3);
+            border-radius: 15px;
+            padding: 1.5rem;
+            text-align: center;
+            backdrop-filter: blur(10px);
+            transition: all 0.3s ease;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+            /* Prevent layout shifts during updates */
+            min-height: 200px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        .portal-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
+            transition: left 0.5s;
+        }
+
+        .portal-card:hover::before {
+            left: 100%;
+        }
+
+        .portal-card:hover {
+            transform: translateY(-5px);
+            border-color: rgba(0, 255, 255, 0.6);
+            box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
+        }
+
+        /* Smooth transitions for status updates */
+        .status-item {
+            transition: all 0.3s ease;
+        }
+
+        .status-online {
+            color: #4CAF50;
+            transition: color 0.3s ease;
+        }
+
+        .status-offline {
+            color: #f44336;
+            transition: color 0.3s ease;
+        }
+
+        /* Prevent text jumping during updates */
+        .status-item span {
+            min-width: 150px;
+            display: inline-block;
+            text-align: left;
+        }
+
+        /* Smooth icon transitions */
+        [data-lucide] {
+            transition: all 0.2s ease;
+        }
+
+        .portal-icon {
+            width: 60px;
+            height: 60px;
+            margin: 0 auto 1rem;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            z-index: 1;
+        }
+
+        .portal-card h3 {
+            font-size: 1.2rem;
+            margin-bottom: 0.5rem;
+            color: white;
+            position: relative;
+            z-index: 1;
+        }
+
+        .portal-card p {
+            font-size: 0.9rem;
+            opacity: 0.8;
+            margin-bottom: 1rem;
+            position: relative;
+            z-index: 1;
+        }
+
+        .launch-btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.5rem 1rem;
+            background: rgba(0, 255, 255, 0.2);
+            border: 1px solid rgba(0, 255, 255, 0.4);
+            border-radius: 25px;
+            color: #00FFFF;
+            text-decoration: none;
+            font-size: 0.9rem;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            position: relative;
+            z-index: 1;
+        }
+
+        .launch-btn:hover {
+            background: rgba(0, 255, 255, 0.3);
+            color: white;
+        }
+
+        /* Color variations for different portals */
+        .color-blue { background: linear-gradient(135deg, #2196F3, #1976D2); }
+        .color-green { background: linear-gradient(135deg, #4CAF50, #388E3C); }
+        .color-purple { background: linear-gradient(135deg, #9C27B0, #7B1FA2); }
+        .color-yellow { background: linear-gradient(135deg, #FF9800, #F57C00); }
+        .color-red { background: linear-gradient(135deg, #f44336, #D32F2F); }
+        .color-orange { background: linear-gradient(135deg, #FF5722, #E64A19); }
+        .color-indigo { background: linear-gradient(135deg, #3F51B5, #303F9F); }
+        .color-pink { background: linear-gradient(135deg, #E91E63, #C2185B); }
+        .color-teal { background: linear-gradient(135deg, #009688, #00796B); }
+        .color-cyan { background: linear-gradient(135deg, #00BCD4, #0097A7); }
+        .color-emerald { background: linear-gradient(135deg, #4CAF50, #2E7D32); }
+
+        .qr-section {
+            background: rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(0, 255, 255, 0.3);
+            border-radius: 15px;
+            padding: 2rem;
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .qr-section h3 {
+            color: #00FFFF;
+            margin-bottom: 1rem;
+            font-size: 1.5rem;
+        }
+
+        .qr-code-container {
+            margin: 1rem 0;
+        }
+
+        .qr-code-container img {
+            max-width: 200px;
+            border-radius: 10px;
+            border: 2px solid rgba(0, 255, 255, 0.3);
+        }
+
+        .api-section {
+            background: rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(0, 255, 255, 0.3);
+            border-radius: 15px;
+            padding: 2rem;
+            margin-bottom: 2rem;
+        }
+
+        .api-section h3 {
+            color: #00FFFF;
+            margin-bottom: 1rem;
+            font-size: 1.5rem;
+        }
+
+        .api-endpoints {
+            display: grid;
+            gap: 0.5rem;
+            font-family: 'Courier New', monospace;
+            font-size: 0.9rem;
+        }
+
+        .api-endpoint {
+            background: rgba(0, 0, 0, 0.4);
+            padding: 0.75rem;
+            border-radius: 8px;
+            border-left: 3px solid #00FFFF;
+        }
+
+        .footer {
+            background: rgba(0, 0, 0, 0.4);
+            padding: 2rem;
+            text-align: center;
+            border-top: 1px solid rgba(0, 255, 255, 0.3);
+            margin-top: 2rem;
+        }
+
+        .footer p {
+            opacity: 0.7;
+            margin-bottom: 0.5rem;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.8; }
+        }
+
+        @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+
+        .animate-spin {
+            animation: spin 1s linear infinite;
+        }
+
+        .error-notification {
+            animation: slideIn 0.3s ease-out;
+        }
+
+        @keyframes slideIn {
+            from {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+
+        .portal-card {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .portal-card:active {
+            transform: translateY(-2px) scale(0.98);
+        }
+
+        @media (max-width: 768px) {
+            .header h1 {
+                font-size: 1.8rem;
+            }
+            
+            .portals-grid {
+                grid-template-columns: 1fr;
+                gap: 1rem;
+            }
+            
+            .status-bar {
+                flex-direction: column;
+                gap: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <h1>AEGIS BIO DIGITAL LAB 10</h1>
+        <div class="subtitle">AUGMENTED REALITY PORTAL DASHBOARD</div>
+        
+        <div class="status-bar">
+            <div class="status-item">
+                <i data-lucide="globe"></i>
+                <span>10 Active Portals</span>
+            </div>
+            <div class="status-item" id="connection-status">
+                <i data-lucide="wifi" id="status-icon"></i>
+                <span id="status-text">Checking Connection...</span>
+            </div>
+            <div class="status-item">
+                <i data-lucide="clock"></i>
+                <span id="current-time"></span>
+            </div>
+        </div>
+    </header>
+
+    <main class="main-content">
+        <section class="hero-section">
+            <h2>🚀 Portal Access Dashboard</h2>
+            <p>
+                Welcome to the AEGIS Bio Digital Lab 10 AR Portal. 
+                Access all system components through this unified interface. 
+                Each portal provides specialized functionality for biological research and analysis.
+            </p>
+        </section>
+
+        <section class="portals-grid" id="portals-container">
+            <!-- Portals will be dynamically loaded here -->
+        </section>
+    </main>
+
+    <footer class="footer">
+        <p>🔬 Advanced Biological Research Platform</p>
+        <p>🚀 Powered by AEGIS Technology</p>
+        <p>&copy; 2025 AEGIS Systems - All Rights Reserved</p>
+    </footer>
+
+    <!-- Server-side data injection -->
+    <div id="server-data" 
+         data-portals='{% if portals %}{{ portals | tojson | safe }}{% else %}[]{% endif %}'
+         data-base-url='{% if base_url %}{{ base_url }}{% else %}{% endif %}'
+         data-last-updated='{% if last_updated %}{{ last_updated }}{% else %}{% endif %}'
+         style="display: none;">
+    </div>
+    
+    <script>
+        // Get server-side data from HTML data attributes
+        const serverDataElement = document.getElementById('server-data');
+        window.portalsData = JSON.parse(serverDataElement.getAttribute('data-portals') || '[]');
+        window.baseUrl = serverDataElement.getAttribute('data-base-url') || '';
+        window.lastUpdated = serverDataElement.getAttribute('data-last-updated') || '';
+    </script>
+    
+    <script>
+        // Initialize Lucide icons
+        lucide.createIcons();
+
+        // Portal data with icons
+        const defaultPortals = [
+            { name: 'AEGIS BIO DIGITAL LAB 10 TIME TRAVEL SYSTEM', url: '#', icon: 'settings', color: 'blue', description: 'Main control center' },
+            { name: 'AEGIS BIO DIGITAL LAB 10 CROSS-CONTINENTAL CONTAGION', url: '#', icon: 'bar-chart-3', color: 'green', description: 'Scientific analysis tools' },
+            { name: 'AEGIS BIO DIGITAL LAB 10 CONDUCTOR', url: '#', icon: 'cpu', color: 'purple', description: 'System orchestration' },
+            { name: 'AEGIS Bio Digital Lab 10 ECONOMIC PROCESSOR', url: '#', icon: 'dollar-sign', color: 'yellow', description: 'Economic modeling' },
+            { name: 'AEGIS BIO DIGITAL LAB 10 WAR ANALYST EXPERT', url: '#', icon: 'shield', color: 'red', description: 'Strategic analysis' },
+            { name: 'AEGIS BIO DIGITAL LAB 10 DISEASE ANALYST EXPERT SYSTEM', url: '#', icon: 'bug', color: 'orange', description: 'Disease tracking' },
+            { name: 'AEGIS-BIO LAB-10 VANGUARD', url: '#', icon: 'brain', color: 'indigo', description: 'AI deep analysis' },
+            { name: 'AEGIS-BIO LAB-10 3D IMAGE LAB ASSISTANT', url: '#', icon: 'image', color: 'pink', description: 'Image processing' },
+            { name: 'AEGIS Bio Digital Lab 10 - Drug Development System', url: '#', icon: 'pill', color: 'teal', description: 'Pharmaceutical research' },
+            { name: 'AEGIS BIO DIGITAL LAB 10 Trail - Visual Kinetic System', url: '#', icon: 'eye', color: 'cyan', description: 'Visual analytics' }
+        ];
+
+        // Update time
+        function updateTime() {
+            const now = new Date();
+            document.getElementById('current-time').textContent = now.toLocaleString();
+        }
+
+        // Global state for smooth updates
+        let currentPortalsData = null;
+        let isInitialLoad = true;
+        let updateTimeout = null;
+
+        // Debounced update function to prevent rapid successive updates
+        function debouncedUpdate(callback, delay = 500) {
+            if (updateTimeout) {
+                clearTimeout(updateTimeout);
+            }
+            updateTimeout = setTimeout(callback, delay);
+        }
+
+        // Load portals from API or use defaults with smooth updates
+        async function loadPortals(forceUpdate = false) {
+            const container = document.getElementById('portals-container');
+            
+            // Only show loading state on initial load
+            if (isInitialLoad) {
+                container.innerHTML = `
+                    <div style="grid-column: 1 / -1; text-align: center; padding: 2rem;">
+                        <i data-lucide="loader-2" class="animate-spin" style="width: 48px; height: 48px; margin-bottom: 1rem;"></i>
+                        <p>Loading portals...</p>
+                    </div>
+                `;
+                lucide.createIcons();
+            }
+            
+            let portalsData = null;
+            
+            // Try to load from status API first
+            try {
+                const response = await fetch('/api/status');
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data.base_url && data.base_url !== '') {
+                        // Generate portals from base URL
+                        portalsData = [
+                            { name: 'AEGIS BIO DIGITAL LAB 10 TIME TRAVEL SYSTEM', url: `${data.base_url}/portal`, icon: 'settings', color: 'blue', description: 'Main control center' },
+                            { name: 'AEGIS BIO DIGITAL LAB 10 CROSS-CONTINENTAL CONTAGION', url: `${data.base_url}/analysis`, icon: 'bar-chart-3', color: 'green', description: 'Scientific analysis tools' },
+                            { name: 'AEGIS BIO DIGITAL LAB 10 CONDUCTOR', url: `${data.base_url}/conductor`, icon: 'cpu', color: 'purple', description: 'System orchestration' },
+                            { name: 'AEGIS Bio Digital Lab 10 ECONOMIC PROCESSOR', url: `${data.base_url}/economic`, icon: 'dollar-sign', color: 'yellow', description: 'Economic modeling' },
+                            { name: 'AEGIS BIO DIGITAL LAB 10 WAR ANALYST EXPERT', url: `${data.base_url}/war`, icon: 'shield', color: 'red', description: 'Strategic analysis' },
+                            { name: 'AEGIS BIO DIGITAL LAB 10 DISEASE ANALYST EXPERT SYSTEM', url: `${data.base_url}/disease`, icon: 'bug', color: 'orange', description: 'Disease tracking' },
+                            { name: 'AEGIS-BIO LAB-10 VANGUARD', url: `${data.base_url}/deepseek`, icon: 'brain', color: 'indigo', description: 'AI deep analysis' },
+                            { name: 'AEGIS-BIO LAB-10 3D IMAGE LAB ASSISTANT', url: `${data.base_url}/image`, icon: 'image', color: 'pink', description: 'Image processing' },
+                            { name: 'AEGIS Bio Digital Lab 10 - Drug Development System', url: `${data.base_url}/drug`, icon: 'pill', color: 'teal', description: 'Pharmaceutical research' },
+                            { name: 'AEGIS BIO DIGITAL LAB 10 Trail - Visual Kinetic System', url: `${data.base_url}/visual-kinetic`, icon: 'eye', color: 'cyan', description: 'Visual analytics' }
+                        ];
+                    }
+                }
+            } catch (error) {
+                console.warn('Failed to load portals from API:', error);
+            }
+            
+            // Check if portals data is available from server-side injection
+            if (!portalsData && window.portalsData && window.portalsData.length > 0) {
+                portalsData = window.portalsData;
+            }
+            
+            // Fallback to default portals if no data available
+            const portalsToUse = portalsData || defaultPortals;
+            
+            // Check if data has actually changed to avoid unnecessary updates
+            const newDataString = JSON.stringify(portalsToUse);
+            const currentDataString = JSON.stringify(currentPortalsData);
+            
+            if (!forceUpdate && !isInitialLoad && newDataString === currentDataString) {
+                // No changes, skip update to prevent flickering
+                return;
+            }
+            
+            // Store current data
+            currentPortalsData = portalsToUse;
+            
+            // Smooth update: only update URLs if structure is the same
+            if (!isInitialLoad && portalsToUse.length === (currentPortalsData?.length || 0)) {
+                updatePortalURLsSilently(portalsToUse);
+            } else {
+                // Full rebuild only when necessary
+                renderPortalsComplete(portalsToUse);
+            }
+            
+            isInitialLoad = false;
+        }
+
+        // Silently update only the URLs without rebuilding the entire DOM
+        function updatePortalURLsSilently(portalsData) {
+            const portalCards = document.querySelectorAll('.portal-card');
+            
+            portalsData.forEach((portal, index) => {
+                const card = portalCards[index];
+                if (card) {
+                    // Update onclick handler
+                    card.onclick = () => openPortal(portal.url, portal.name);
+                    
+                    // Update launch button
+                    const launchBtn = card.querySelector('.launch-btn');
+                    if (launchBtn) {
+                        launchBtn.href = portal.url;
+                        launchBtn.onclick = (e) => {
+                            e.stopPropagation();
+                            openPortal(portal.url, portal.name);
+                        };
+                    }
+                }
+            });
+        }
+
+        // Complete portal rendering (used for initial load or structure changes)
+        function renderPortalsComplete(portalsData) {
+            const container = document.getElementById('portals-container');
+            
+            container.innerHTML = portalsData.map(portal => `
+                <div class="portal-card" onclick="openPortal('${portal.url}', '${portal.name}')">
+                    <div class="portal-icon color-${portal.color}">
+                        <i data-lucide="${portal.icon}"></i>
+                    </div>
+                    <h3>${portal.name}</h3>
+                    <p>${portal.description}</p>
+                    <a href="${portal.url}" class="launch-btn" onclick="event.stopPropagation(); openPortal('${portal.url}', '${portal.name}')">
+                        <span>Launch Portal</span>
+                        <i data-lucide="external-link"></i>
+                    </a>
+                </div>
+            `).join('');
+            
+            lucide.createIcons();
+        }
+
+        // Open portal
+        function openPortal(url) {
+            if (url && url !== '#') {
+                window.open(url, '_blank', 'noopener,noreferrer');
+            }
+        }
+
+        // Global state for status updates
+        let lastStatusData = null;
+
+        // Check system status with silent updates
+        async function checkStatus() {
+            try {
+                const response = await fetch('/api/status');
+                const data = await response.json();
+                
+                // Check if status data has actually changed
+                const newStatusString = JSON.stringify(data);
+                const lastStatusString = JSON.stringify(lastStatusData);
+                
+                if (newStatusString === lastStatusString) {
+                    // No changes, skip DOM updates to prevent flickering
+                    return;
+                }
+                
+                // Store new status data
+                lastStatusData = data;
+                
+                const statusIcon = document.getElementById('status-icon');
+                const statusText = document.getElementById('status-text');
+                const connectionStatus = document.getElementById('connection-status');
+                
+                if (data.status === 'online') {
+                    statusIcon.setAttribute('data-lucide', 'wifi');
+                    if (data.base_url && data.base_url !== '') {
+                        statusText.textContent = `Live URLs Active (${data.portals_count}/${data.total_portals})`;
+                        connectionStatus.className = 'status-item status-online';
+                    } else {
+                        statusText.textContent = 'Online - Waiting for URLs';
+                        connectionStatus.className = 'status-item status-online';
+                    }
+                } else {
+                    statusIcon.setAttribute('data-lucide', 'wifi-off');
+                    statusText.textContent = 'System Offline';
+                    connectionStatus.className = 'status-item status-offline';
+                }
+                
+                // Update last updated time if available
+                if (data.last_updated) {
+                    const lastUpdated = new Date(data.last_updated);
+                    const timeAgo = getTimeAgo(lastUpdated);
+                    const timeElement = document.querySelector('.status-item:last-child span');
+                    if (timeElement) {
+                        timeElement.textContent = `Updated ${timeAgo}`;
+                    }
+                }
+                
+                // Only recreate icons if status actually changed
+                lucide.createIcons();
+                
+            } catch (error) {
+                // Only update UI if error state is different from current state
+                if (!lastStatusData || lastStatusData.status !== 'error') {
+                    const statusIcon = document.getElementById('status-icon');
+                    const statusText = document.getElementById('status-text');
+                    const connectionStatus = document.getElementById('connection-status');
+                    
+                    statusIcon.setAttribute('data-lucide', 'wifi-off');
+                    statusText.textContent = 'Connection Error';
+                    connectionStatus.className = 'status-item status-offline';
+                    
+                    lastStatusData = { status: 'error' };
+                    lucide.createIcons();
+                }
+            }
+        }
+
+        // Helper function to get time ago
+        function getTimeAgo(date) {
+            const now = new Date();
+            const diffMs = now - date;
+            const diffSecs = Math.floor(diffMs / 1000);
+            const diffMins = Math.floor(diffSecs / 60);
+            const diffHours = Math.floor(diffMins / 60);
+            
+            if (diffSecs < 60) return `${diffSecs}s ago`;
+            if (diffMins < 60) return `${diffMins}m ago`;
+            if (diffHours < 24) return `${diffHours}h ago`;
+            return date.toLocaleDateString();
+        }
+
+        // Update portal URLs function with silent update indicator
+        async function updatePortalUrls(newUrls) {
+            try {
+                // Add subtle update indicator without disrupting layout
+                const statusBar = document.querySelector('.status-bar');
+                const originalOpacity = statusBar.style.opacity;
+                statusBar.style.opacity = '0.7';
+                
+                const response = await fetch('/api/update-urls', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ urls: newUrls })
+                });
+                
+                const data = await response.json();
+                
+                // Restore opacity
+                setTimeout(() => {
+                    statusBar.style.opacity = originalOpacity || '1';
+                }, 300);
+                
+                if (data.success) {
+                    // Use debounced update to prevent flickering
+                    debouncedUpdate(() => {
+                        loadPortals();
+                    }, 100);
+                    return true;
+                } else {
+                    console.error('Failed to update URLs:', data.error);
+                    return false;
+                }
+            } catch (error) {
+                console.error('Error updating URLs:', error);
+                return false;
+            }
+        }
+
+        // Initialize dashboard with optimized updates
+        function initDashboard() {
+            updateTime();
+            loadPortals(true); // Force initial load
+            checkStatus();
+            
+            // Update time every second
+            setInterval(updateTime, 1000);
+            
+            // Check status and reload portals every 10 seconds with silent updates
+            setInterval(() => {
+                checkStatus();
+                loadPortals(); // Silent update - only updates if data changed
+            }, 10000);
+        }
+
+        // Handle keyboard shortcuts
+        document.addEventListener('keydown', function(event) {
+            // Ctrl/Cmd + R to refresh portals
+            if ((event.ctrlKey || event.metaKey) && event.key === 'r') {
+                event.preventDefault();
+                loadPortals();
+                checkStatus();
+            }
+        });
+
+        // Handle window focus/blur for status updates with debouncing
+        window.addEventListener('focus', function() {
+            debouncedUpdate(() => {
+                checkStatus();
+                loadPortals();
+            }, 200);
+        });
+
+        // Initialize when DOM is loaded
+        document.addEventListener('DOMContentLoaded', initDashboard);
+
+        // Handle portal card animations
+        document.addEventListener('mouseover', function(event) {
+            if (event.target.closest('.portal-card')) {
+                event.target.closest('.portal-card').style.transform = 'translateY(-5px) scale(1.02)';
+            }
+        });
+
+        document.addEventListener('mouseout', function(event) {
+            if (event.target.closest('.portal-card')) {
+                event.target.closest('.portal-card').style.transform = 'translateY(0) scale(1)';
+            }
+        });
+
+        // Add loading states
+        function showLoading(elementId) {
+            const element = document.getElementById(elementId);
+            if (element) {
+                element.innerHTML = '<i data-lucide="loader-2" class="animate-spin"></i> Loading...';
+                lucide.createIcons();
+            }
+        }
+
+        function hideLoading(elementId, originalContent) {
+            const element = document.getElementById(elementId);
+            if (element) {
+                element.innerHTML = originalContent;
+                lucide.createIcons();
+            }
+        }
+
+        // Add error handling for portal launches
+        function handlePortalError(portalName, error) {
+            console.error(`Error launching ${portalName}:`, error);
+            
+            // Show user-friendly error message
+            const errorDiv = document.createElement('div');
+            errorDiv.className = 'error-notification';
+            errorDiv.style.cssText = `
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                background: rgba(244, 67, 54, 0.9);
+                color: white;
+                padding: 1rem;
+                border-radius: 8px;
+                z-index: 1000;
+                max-width: 300px;
+                backdrop-filter: blur(10px);
+            `;
+            errorDiv.innerHTML = `
+                <div style="display: flex; align-items: center; gap: 0.5rem;">
+                    <i data-lucide="alert-circle"></i>
+                    <span>Failed to launch ${portalName}</span>
+                </div>
+            `;
+            
+            document.body.appendChild(errorDiv);
+            lucide.createIcons();
+            
+            // Remove error message after 5 seconds
+            setTimeout(() => {
+                if (errorDiv.parentNode) {
+                    errorDiv.parentNode.removeChild(errorDiv);
+                }
+            }, 5000);
+        }
+
+        // Enhanced portal opening with error handling
+        function openPortalSafe(url, name) {
+            try {
+                if (url && url !== '#') {
+                    const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
+                    
+                    // Check if popup was blocked
+                    if (!newWindow || newWindow.closed || typeof newWindow.closed === 'undefined') {
+                        throw new Error('Popup blocked or failed to open');
+                    }
+                } else {
+                    throw new Error('Invalid URL');
+                }
+            } catch (error) {
+                handlePortalError(name, error);
+            }
+        }
+
+        // Update the openPortal function to use the safer version
+        function openPortal(url, name = 'Portal') {
+            openPortalSafe(url, name);
+        }
+
+        // Add service worker registration for offline support
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', function() {
+                navigator.serviceWorker.register('/sw.js')
+                    .then(function(registration) {
+                        console.log('ServiceWorker registration successful');
+                    })
+                    .catch(function(error) {
+                        console.log('ServiceWorker registration failed');
+                    });
+            });
+        }
+    </script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,6 @@
+Flask==2.3.3
+Flask-CORS==4.0.0
+gunicorn==21.2.0
+huggingface_hub>=0.19.0
+python-dotenv==1.0.0
+requests==2.31.0

templates/ar_dashboard.html

@@ -0,0 +1,662 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AEGIS BIO DIGITAL LAB 10 - AR Portal</title>
+    <meta name="description" content="AEGIS Bio Digital Lab 10 Augmented Reality Portal Dashboard">
+    
+    <!-- Lucide Icons CDN -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
+    
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+            color: white;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+
+        .header {
+            background: rgba(0, 0, 0, 0.4);
+            padding: 1.5rem 2rem;
+            backdrop-filter: blur(15px);
+            border-bottom: 1px solid rgba(0, 255, 255, 0.3);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+
+        .header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 0.5rem;
+            background: linear-gradient(45deg, #00FFFF, #0080FF);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-align: center;
+            animation: pulse 2s infinite;
+        }
+
+        .header .subtitle {
+            font-size: 1.2rem;
+            text-align: center;
+            opacity: 0.9;
+            color: #E3F2FD;
+        }
+
+        .status-bar {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 2rem;
+            margin-top: 1rem;
+            flex-wrap: wrap;
+        }
+
+        .status-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+
+        .status-online {
+            color: #4CAF50;
+        }
+
+        .status-offline {
+            color: #f44336;
+        }
+
+        .main-content {
+            padding: 2rem;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        .hero-section {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+
+        .hero-section h2 {
+            font-size: 2rem;
+            margin-bottom: 1rem;
+            color: #00FFFF;
+        }
+
+        .hero-section p {
+            font-size: 1.1rem;
+            opacity: 0.9;
+            max-width: 600px;
+            margin: 0 auto;
+            line-height: 1.6;
+        }
+
+        .portals-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 3rem;
+        }
+
+        .portal-card {
+            background: rgba(0, 0, 0, 0.4);
+            border: 1px solid rgba(0, 255, 255, 0.3);
+            border-radius: 15px;
+            padding: 1.5rem;
+            text-align: center;
+            backdrop-filter: blur(10px);
+            transition: all 0.3s ease;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .portal-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
+            transition: left 0.5s;
+        }
+
+        .portal-card:hover::before {
+            left: 100%;
+        }
+
+        .portal-card:hover {
+            transform: translateY(-5px);
+            border-color: rgba(0, 255, 255, 0.6);
+            box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
+        }
+
+        .portal-icon {
+            width: 60px;
+            height: 60px;
+            margin: 0 auto 1rem;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            z-index: 1;
+        }
+
+        .portal-card h3 {
+            font-size: 1.2rem;
+            margin-bottom: 0.5rem;
+            color: white;
+            position: relative;
+            z-index: 1;
+        }
+
+        .portal-card p {
+            font-size: 0.9rem;
+            opacity: 0.8;
+            margin-bottom: 1rem;
+            position: relative;
+            z-index: 1;
+        }
+
+        .launch-btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.5rem 1rem;
+            background: rgba(0, 255, 255, 0.2);
+            border: 1px solid rgba(0, 255, 255, 0.4);
+            border-radius: 25px;
+            color: #00FFFF;
+            text-decoration: none;
+            font-size: 0.9rem;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            position: relative;
+            z-index: 1;
+        }
+
+        .launch-btn:hover {
+            background: rgba(0, 255, 255, 0.3);
+            color: white;
+        }
+
+        /* Color variations for different portals */
+        .color-blue { background: linear-gradient(135deg, #2196F3, #1976D2); }
+        .color-green { background: linear-gradient(135deg, #4CAF50, #388E3C); }
+        .color-purple { background: linear-gradient(135deg, #9C27B0, #7B1FA2); }
+        .color-yellow { background: linear-gradient(135deg, #FF9800, #F57C00); }
+        .color-red { background: linear-gradient(135deg, #f44336, #D32F2F); }
+        .color-orange { background: linear-gradient(135deg, #FF5722, #E64A19); }
+        .color-indigo { background: linear-gradient(135deg, #3F51B5, #303F9F); }
+        .color-pink { background: linear-gradient(135deg, #E91E63, #C2185B); }
+        .color-teal { background: linear-gradient(135deg, #009688, #00796B); }
+        .color-cyan { background: linear-gradient(135deg, #00BCD4, #0097A7); }
+        .color-emerald { background: linear-gradient(135deg, #4CAF50, #2E7D32); }
+
+        .qr-section {
+            background: rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(0, 255, 255, 0.3);
+            border-radius: 15px;
+            padding: 2rem;
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .qr-section h3 {
+            color: #00FFFF;
+            margin-bottom: 1rem;
+            font-size: 1.5rem;
+        }
+
+        .qr-code-container {
+            margin: 1rem 0;
+        }
+
+        .qr-code-container img {
+            max-width: 200px;
+            border-radius: 10px;
+            border: 2px solid rgba(0, 255, 255, 0.3);
+        }
+
+        .api-section {
+            background: rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(0, 255, 255, 0.3);
+            border-radius: 15px;
+            padding: 2rem;
+            margin-bottom: 2rem;
+        }
+
+        .api-section h3 {
+            color: #00FFFF;
+            margin-bottom: 1rem;
+            font-size: 1.5rem;
+        }
+
+        .api-endpoints {
+            display: grid;
+            gap: 0.5rem;
+            font-family: 'Courier New', monospace;
+            font-size: 0.9rem;
+        }
+
+        .api-endpoint {
+            background: rgba(0, 0, 0, 0.4);
+            padding: 0.75rem;
+            border-radius: 8px;
+            border-left: 3px solid #00FFFF;
+        }
+
+        .footer {
+            background: rgba(0, 0, 0, 0.4);
+            padding: 2rem;
+            text-align: center;
+            border-top: 1px solid rgba(0, 255, 255, 0.3);
+            margin-top: 2rem;
+        }
+
+        .footer p {
+            opacity: 0.7;
+            margin-bottom: 0.5rem;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.8; }
+        }
+
+        @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+
+        .animate-spin {
+            animation: spin 1s linear infinite;
+        }
+
+        .error-notification {
+            animation: slideIn 0.3s ease-out;
+        }
+
+        @keyframes slideIn {
+            from {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+
+        .portal-card {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .portal-card:active {
+            transform: translateY(-2px) scale(0.98);
+        }
+
+        @media (max-width: 768px) {
+            .header h1 {
+                font-size: 1.8rem;
+            }
+            
+            .portals-grid {
+                grid-template-columns: 1fr;
+                gap: 1rem;
+            }
+            
+            .status-bar {
+                flex-direction: column;
+                gap: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <h1>AEGIS BIO DIGITAL LAB 10</h1>
+        <div class="subtitle">AUGMENTED REALITY PORTAL DASHBOARD</div>
+        
+        <div class="status-bar">
+            <div class="status-item">
+                <i data-lucide="globe"></i>
+                <span>10 Active Portals</span>
+            </div>
+            <div class="status-item" id="connection-status">
+                <i data-lucide="wifi" id="status-icon"></i>
+                <span id="status-text">Checking Connection...</span>
+            </div>
+            <div class="status-item">
+                <i data-lucide="clock"></i>
+                <span id="current-time"></span>
+            </div>
+        </div>
+    </header>
+
+    <main class="main-content">
+        <section class="hero-section">
+            <h2>🚀 Portal Access Dashboard</h2>
+            <p>
+                Welcome to the AEGIS Bio Digital Lab 10 AR Portal. 
+                Access all system components through this unified interface. 
+                Each portal provides specialized functionality for biological research and analysis.
+            </p>
+        </section>
+
+        <section class="portals-grid" id="portals-container">
+            <!-- Portals will be dynamically loaded here -->
+        </section>
+
+        <section class="api-section">
+            <h3>🔧 API Endpoints</h3>
+            <div class="api-endpoints">
+                <div class="api-endpoint">POST /api/update-urls - Update portal URLs</div>
+                <div class="api-endpoint">GET /api/status - System status</div>
+                <div class="api-endpoint">GET /health - Health check</div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="footer">
+        <p>🔬 Advanced Biological Research Platform</p>
+        <p>🚀 Powered by AEGIS Technology</p>
+        <p>&copy; 2025 AEGIS Systems - All Rights Reserved</p>
+    </footer>
+
+    <script>
+        // Server-side data will be injected here if available
+        window.portalsData = null;
+    </script>
+    
+    <script>
+        // Initialize Lucide icons
+        lucide.createIcons();
+
+        // Portal data with icons
+        const defaultPortals = [
+            { name: 'Portal Control', url: '#', icon: 'settings', color: 'blue', description: 'Main control center' },
+            { name: 'SciBERT Analysis', url: '#', icon: 'bar-chart-3', color: 'green', description: 'Scientific analysis tools' },
+            { name: 'Conductor', url: '#', icon: 'cpu', color: 'purple', description: 'System orchestration' },
+            { name: 'Economic Modal', url: '#', icon: 'dollar-sign', color: 'yellow', description: 'Economic modeling' },
+            { name: 'War Modal', url: '#', icon: 'shield', color: 'red', description: 'Strategic analysis' },
+            { name: 'Disease Modal', url: '#', icon: 'bug', color: 'orange', description: 'Disease tracking' },
+            { name: 'DeepSeek', url: '#', icon: 'brain', color: 'indigo', description: 'AI deep analysis' },
+            { name: 'Image Modal', url: '#', icon: 'image', color: 'pink', description: 'Image processing' },
+            { name: 'Drug Development', url: '#', icon: 'pill', color: 'teal', description: 'Pharmaceutical research' },
+            { name: 'Visual Kinetic', url: '#', icon: 'eye', color: 'cyan', description: 'Visual analytics' }
+        ];
+
+        // Update time
+        function updateTime() {
+            const now = new Date();
+            document.getElementById('current-time').textContent = now.toLocaleString();
+        }
+
+        // Load portals from API or use defaults
+        async function loadPortals() {
+            const container = document.getElementById('portals-container');
+            
+            // Show loading state
+            container.innerHTML = `
+                <div style="grid-column: 1 / -1; text-align: center; padding: 2rem;">
+                    <i data-lucide="loader-2" class="animate-spin" style="width: 48px; height: 48px; margin-bottom: 1rem;"></i>
+                    <p>Loading portals...</p>
+                </div>
+            `;
+            lucide.createIcons();
+            
+            let portalsData = null;
+            
+            // Try to load from API first
+            try {
+                const response = await fetch('/api/portals');
+                if (response.ok) {
+                    const data = await response.json();
+                    portalsData = data.portals;
+                }
+            } catch (error) {
+                console.warn('Failed to load portals from API:', error);
+            }
+            
+            // Check if portals data is available from server-side injection
+            if (!portalsData && typeof window.portalsData !== 'undefined') {
+                portalsData = window.portalsData;
+            }
+            
+            // Fallback to default portals if no data available
+            const portalsToUse = portalsData || defaultPortals;
+            
+            container.innerHTML = portalsToUse.map(portal => `
+                <div class="portal-card" onclick="openPortal('${portal.url}', '${portal.name}')">
+                    <div class="portal-icon color-${portal.color}">
+                        <i data-lucide="${portal.icon}"></i>
+                    </div>
+                    <h3>${portal.name}</h3>
+                    <p>${portal.description}</p>
+                    <a href="${portal.url}" class="launch-btn" onclick="event.stopPropagation(); openPortal('${portal.url}', '${portal.name}')">
+                        <span>Launch Portal</span>
+                        <i data-lucide="external-link"></i>
+                    </a>
+                </div>
+            `).join('');
+            
+            lucide.createIcons();
+        }
+
+        // Open portal
+        function openPortal(url) {
+            if (url && url !== '#') {
+                window.open(url, '_blank', 'noopener,noreferrer');
+            }
+        }
+
+        // Check system status
+        async function checkStatus() {
+            try {
+                const response = await fetch('/api/status');
+                const data = await response.json();
+                
+                const statusIcon = document.getElementById('status-icon');
+                const statusText = document.getElementById('status-text');
+                const connectionStatus = document.getElementById('connection-status');
+                
+                if (data.status === 'online') {
+                    statusIcon.setAttribute('data-lucide', 'wifi');
+                    statusText.textContent = 'System Online';
+                    connectionStatus.className = 'status-item status-online';
+                } else {
+                    statusIcon.setAttribute('data-lucide', 'wifi-off');
+                    statusText.textContent = 'System Offline';
+                    connectionStatus.className = 'status-item status-offline';
+                }
+                
+                lucide.createIcons();
+            } catch (error) {
+                const statusIcon = document.getElementById('status-icon');
+                const statusText = document.getElementById('status-text');
+                const connectionStatus = document.getElementById('connection-status');
+                
+                statusIcon.setAttribute('data-lucide', 'wifi-off');
+                statusText.textContent = 'Connection Error';
+                connectionStatus.className = 'status-item status-offline';
+                
+                lucide.createIcons();
+            }
+        }
+
+        // Update portal URLs
+        async function updatePortalUrls(newUrls) {
+            try {
+                const response = await fetch('/api/update-urls', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ urls: newUrls })
+                });
+                
+                const data = await response.json();
+                
+                if (data.success) {
+                    loadPortals();
+                    return true;
+                } else {
+                    console.error('Failed to update URLs:', data.error);
+                    return false;
+                }
+            } catch (error) {
+                console.error('Error updating URLs:', error);
+                return false;
+            }
+        }
+
+        // Initialize dashboard
+        function initDashboard() {
+            updateTime();
+            loadPortals();
+            checkStatus();
+            
+            // Update time every second
+            setInterval(updateTime, 1000);
+            
+            // Check status every 30 seconds
+            setInterval(checkStatus, 30000);
+        }
+
+        // Handle keyboard shortcuts
+        document.addEventListener('keydown', function(event) {
+            // Ctrl/Cmd + R to refresh portals
+            if ((event.ctrlKey || event.metaKey) && event.key === 'r') {
+                event.preventDefault();
+                loadPortals();
+                checkStatus();
+            }
+        });
+
+        // Handle window focus/blur for status updates
+        window.addEventListener('focus', function() {
+            checkStatus();
+        });
+
+        // Initialize when DOM is loaded
+        document.addEventListener('DOMContentLoaded', initDashboard);
+
+        // Handle portal card animations
+        document.addEventListener('mouseover', function(event) {
+            if (event.target.closest('.portal-card')) {
+                event.target.closest('.portal-card').style.transform = 'translateY(-5px) scale(1.02)';
+            }
+        });
+
+        document.addEventListener('mouseout', function(event) {
+            if (event.target.closest('.portal-card')) {
+                event.target.closest('.portal-card').style.transform = 'translateY(0) scale(1)';
+            }
+        });
+
+        // Add loading states
+        function showLoading(elementId) {
+            const element = document.getElementById(elementId);
+            if (element) {
+                element.innerHTML = '<i data-lucide="loader-2" class="animate-spin"></i> Loading...';
+                lucide.createIcons();
+            }
+        }
+
+        function hideLoading(elementId, originalContent) {
+            const element = document.getElementById(elementId);
+            if (element) {
+                element.innerHTML = originalContent;
+                lucide.createIcons();
+            }
+        }
+
+        // Add error handling for portal launches
+        function handlePortalError(portalName, error) {
+            console.error(`Error launching ${portalName}:`, error);
+            
+            // Show user-friendly error message
+            const errorDiv = document.createElement('div');
+            errorDiv.className = 'error-notification';
+            errorDiv.style.cssText = `
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                background: rgba(244, 67, 54, 0.9);
+                color: white;
+                padding: 1rem;
+                border-radius: 8px;
+                z-index: 1000;
+                max-width: 300px;
+                backdrop-filter: blur(10px);
+            `;
+            errorDiv.innerHTML = `
+                <div style="display: flex; align-items: center; gap: 0.5rem;">
+                    <i data-lucide="alert-circle"></i>
+                    <span>Failed to launch ${portalName}</span>
+                </div>
+            `;
+            
+            document.body.appendChild(errorDiv);
+            lucide.createIcons();
+            
+            // Remove error message after 5 seconds
+            setTimeout(() => {
+                if (errorDiv.parentNode) {
+                    errorDiv.parentNode.removeChild(errorDiv);
+                }
+            }, 5000);
+        }
+
+        // Enhanced portal opening with error handling
+        function openPortalSafe(url, name) {
+            try {
+                if (url && url !== '#') {
+                    const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
+                    
+                    // Check if popup was blocked
+                    if (!newWindow || newWindow.closed || typeof newWindow.closed === 'undefined') {
+                        throw new Error('Popup blocked or failed to open');
+                    }
+                } else {
+                    throw new Error('Invalid URL');
+                }
+            } catch (error) {
+                handlePortalError(name, error);
+            }
+        }
+
+        // Update the openPortal function to use the safer version
+        function openPortal(url, name = 'Portal') {
+            openPortalSafe(url, name);
+        }
+
+        // Add service worker registration for offline support
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', function() {
+                navigator.serviceWorker.register('/sw.js')
+                    .then(function(registration) {
+                        console.log('ServiceWorker registration successful');
+                    })
+                    .catch(function(error) {
+                        console.log('ServiceWorker registration failed');
+                    });
+            });
+        }
+    </script>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,317 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bio Human Atlas Viewer | Gaston Software Solutions Tec</title>
+    <meta name="description" content="Interactive 3D human anatomy atlas with virus visualization and drug development insights">
+    <meta name="keywords" content="anatomy, 3D visualization, medical, virus, drug development, atlas">
+    <meta name="author" content="Gaston Software Solutions Tec, Uganda">
+    
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://huggingface.co/spaces/gsstec/bio_human">
+    <meta property="og:title" content="Bio Human Atlas Viewer">
+    <meta property="og:description" content="Interactive 3D human anatomy atlas with virus visualization">
+    <meta property="og:image" content="/static/preview.png">
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://huggingface.co/spaces/gsstec/bio_human">
+    <meta property="twitter:title" content="Bio Human Atlas Viewer">
+    <meta property="twitter:description" content="Interactive 3D human anatomy atlas with virus visualization">
+    <meta property="twitter:image" content="/static/preview.png">
+
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+            color: white;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .header {
+            background: rgba(0, 0, 0, 0.3);
+            padding: 1rem 2rem;
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 0.5rem;
+            background: linear-gradient(45deg, #4CAF50, #2196F3);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .header .subtitle {
+            font-size: 1.1rem;
+            opacity: 0.9;
+            margin-bottom: 0.5rem;
+        }
+
+        .header .organization {
+            font-size: 0.9rem;
+            opacity: 0.7;
+            font-style: italic;
+        }
+
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+            text-align: center;
+        }
+
+        .hero-section {
+            max-width: 800px;
+            margin-bottom: 3rem;
+        }
+
+        .hero-section h2 {
+            font-size: 2rem;
+            margin-bottom: 1rem;
+            color: #E3F2FD;
+        }
+
+        .hero-section p {
+            font-size: 1.2rem;
+            line-height: 1.6;
+            opacity: 0.9;
+            margin-bottom: 2rem;
+        }
+
+        .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 2rem;
+            margin-bottom: 3rem;
+            max-width: 1000px;
+        }
+
+        .feature-card {
+            background: rgba(255, 255, 255, 0.1);
+            padding: 2rem;
+            border-radius: 15px;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+        }
+
+        .feature-card h3 {
+            font-size: 1.3rem;
+            margin-bottom: 1rem;
+            color: #4CAF50;
+        }
+
+        .feature-card p {
+            opacity: 0.9;
+            line-height: 1.5;
+        }
+
+        .cta-section {
+            margin-top: 2rem;
+        }
+
+        .btn {
+            display: inline-block;
+            padding: 1rem 2rem;
+            margin: 0.5rem;
+            background: linear-gradient(45deg, #4CAF50, #2196F3);
+            color: white;
+            text-decoration: none;
+            border-radius: 50px;
+            font-weight: bold;
+            font-size: 1.1rem;
+            transition: all 0.3s ease;
+            border: none;
+            cursor: pointer;
+        }
+
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+        }
+
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.2);
+            border: 2px solid rgba(255, 255, 255, 0.3);
+        }
+
+        .api-section {
+            background: rgba(0, 0, 0, 0.2);
+            padding: 2rem;
+            border-radius: 15px;
+            margin-top: 2rem;
+            max-width: 800px;
+        }
+
+        .api-section h3 {
+            color: #4CAF50;
+            margin-bottom: 1rem;
+        }
+
+        .api-endpoints {
+            text-align: left;
+            font-family: 'Courier New', monospace;
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+
+        .api-endpoints div {
+            margin: 0.5rem 0;
+            padding: 0.5rem;
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 5px;
+        }
+
+        .footer {
+            background: rgba(0, 0, 0, 0.3);
+            padding: 1rem 2rem;
+            text-align: center;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .footer p {
+            opacity: 0.7;
+            font-size: 0.9rem;
+        }
+
+        @media (max-width: 768px) {
+            .header h1 {
+                font-size: 2rem;
+            }
+            
+            .hero-section h2 {
+                font-size: 1.5rem;
+            }
+            
+            .hero-section p {
+                font-size: 1rem;
+            }
+            
+            .features {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <h1>Bio Human Atlas Viewer</h1>
+        <div class="subtitle">Interactive 3D Human Anatomy Visualization</div>
+        <div class="organization">Gaston Software Solutions Tec, Uganda</div>
+    </header>
+
+    <main class="main-content">
+        <section class="hero-section">
+            <h2>Explore Human Anatomy in 3D</h2>
+            <p>
+                Advanced interactive 3D anatomy atlas featuring virus visualization, 
+                drug development insights, and comprehensive biological analysis. 
+                Built with cutting-edge web technologies for medical education and research.
+            </p>
+        </section>
+
+        <section class="features">
+            <div class="feature-card">
+                <h3>🧬 3D Anatomy Visualization</h3>
+                <p>Interactive 3D models of human anatomy with detailed organ systems, tissues, and cellular structures using WebGL technology.</p>
+            </div>
+            
+            <div class="feature-card">
+                <h3>🔬 Educational Platform</h3>
+                <p>Comprehensive learning tool for medical students, researchers, and healthcare professionals with detailed anatomical information.</p>
+            </div>
+            
+            <div class="feature-card">
+                <h3>🌐 Web-Based Access</h3>
+                <p>No installation required - access the full 3D anatomy atlas directly through your web browser on any device.</p>
+            </div>
+            
+            <div class="feature-card">
+                <h3>� Cross-Platform</h3>
+                <p>Responsive design that works seamlessly on desktop, tablet, and mobile devices with touch and mouse controls.</p>
+            </div>
+        </section>
+
+        <section class="cta-section">
+            <a href="/viewer" class="btn">Launch 3D Atlas Viewer</a>
+            <a href="/api/health" class="btn btn-secondary">API Status</a>
+        </section>
+
+        <section class="api-section">
+            <h3>Available API Endpoints</h3>
+            <div class="api-endpoints">
+                <div>GET /api/health - Service health check</div>
+                <div>GET /api/atlas/structure - Atlas configuration</div>
+                <div>GET /api/bio-digital-lab - Bio digital lab data</div>
+                <div>GET /api/disease-analysis - Disease analysis data</div>
+                <div>GET /api/drug-development - Drug development results</div>
+                <div>GET /api/comprehensive-virus-data - Complete virus dataset</div>
+                <div>GET /api/atlas/virus-mapping - Virus-anatomy mapping</div>
+                <div>GET /api/sample-data - Sample anatomical data</div>
+                <div>GET /api/atlas/demo-structures - Demo 3D structures</div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="footer">
+        <p>&copy; 2026 Gaston Software Solutions Tec, Uganda. All rights reserved.</p>
+        <p>Bio Human Atlas Viewer - Advanced 3D Anatomy Visualization Platform</p>
+    </footer>
+
+    <script>
+        // Add some interactive effects
+        document.addEventListener('DOMContentLoaded', function() {
+            // Animate feature cards on scroll
+            const observerOptions = {
+                threshold: 0.1,
+                rootMargin: '0px 0px -50px 0px'
+            };
+
+            const observer = new IntersectionObserver(function(entries) {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.style.opacity = '1';
+                        entry.target.style.transform = 'translateY(0)';
+                    }
+                });
+            }, observerOptions);
+
+            // Observe feature cards
+            document.querySelectorAll('.feature-card').forEach(card => {
+                card.style.opacity = '0';
+                card.style.transform = 'translateY(20px)';
+                card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+                observer.observe(card);
+            });
+
+            // Add click tracking for analytics
+            document.querySelectorAll('.btn').forEach(btn => {
+                btn.addEventListener('click', function(e) {
+                    console.log('Button clicked:', this.textContent);
+                });
+            });
+        });
+    </script>
+</body>
+</html>

templates/index_aegis.html

@@ -0,0 +1,988 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AEGIS BIO LAB 10 CONDUCTOR - Grid Interface</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #667eea 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        
+        .container {
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+            width: 100%;
+            max-width: 1600px;
+            height: 90vh;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr;
+            gap: 20px;
+            padding: 25px;
+        }
+        
+        /* Grid squares */
+        .grid-square {
+            background: #f8f9fa;
+            border-radius: 15px;
+            border: 2px solid #e9ecef;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            position: relative;
+        }
+        
+        /* Header for each square */
+        .square-header {
+            background: linear-gradient(135deg, #1e3c72, #2a5298);
+            color: white;
+            padding: 15px 20px;
+            border-radius: 13px 13px 0 0;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            flex-shrink: 0;
+            z-index: 2;
+        }
+        
+        .square-header h3 {
+            font-size: 1.2em;
+            font-weight: 600;
+            margin: 0;
+        }
+        
+        /* Scrollable content area */
+        .square-content {
+            flex: 1;
+            overflow-y: auto;
+            overflow-x: hidden;
+            padding: 20px;
+        }
+        
+        /* Custom scrollbar for all squares */
+        .square-content::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        .square-content::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 4px;
+        }
+        
+        .square-content::-webkit-scrollbar-thumb {
+            background: #c1c1c1;
+            border-radius: 4px;
+        }
+        
+        .square-content::-webkit-scrollbar-thumb:hover {
+            background: #a8a8a8;
+        }
+        
+        /* Square 1: Status & Controls */
+        #square-1 .square-content {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        
+        .status-panel {
+            background: white;
+            border-radius: 12px;
+            padding: 20px;
+            border-left: 4px solid #007bff;
+        }
+        
+        .status-panel.ready {
+            border-left-color: #28a745;
+        }
+        
+        .status-panel.loading {
+            border-left-color: #ffc107;
+        }
+        
+        .status-panel.error {
+            border-left-color: #dc3545;
+        }
+        
+        .status-text {
+            font-size: 1.1em;
+            font-weight: 600;
+            margin-bottom: 10px;
+        }
+        
+        .status-details {
+            font-size: 0.9em;
+            color: #666;
+            line-height: 1.5;
+        }
+        
+        .control-group {
+            background: white;
+            border-radius: 12px;
+            padding: 15px;
+            margin-bottom: 10px;
+        }
+        
+        .control-group label {
+            display: block;
+            margin-bottom: 8px;
+            color: #555;
+            font-weight: 600;
+            font-size: 0.9em;
+        }
+        
+        .control-group select,
+        .control-group input[type="range"] {
+            width: 100%;
+            margin-bottom: 5px;
+        }
+        
+        .slider-container {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        
+        .slider-value {
+            min-width: 40px;
+            text-align: center;
+            font-weight: 600;
+            color: #1e3c72;
+        }
+        
+        .action-buttons {
+            display: flex;
+            gap: 10px;
+            margin-top: 10px;
+        }
+        
+        .action-btn {
+            flex: 1;
+            padding: 12px;
+            border: none;
+            border-radius: 10px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        
+        .primary-btn {
+            background: linear-gradient(135deg, #1e3c72, #2a5298);
+            color: white;
+        }
+        
+        .danger-btn {
+            background: linear-gradient(135deg, #dc3545, #c82333);
+            color: white;
+        }
+        
+        .action-btn:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+        
+        /* Square 2: Chat Interface */
+        .chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            margin-bottom: 15px;
+        }
+        
+        .message {
+            margin-bottom: 15px;
+            display: flex;
+        }
+        
+        .message.user {
+            justify-content: flex-end;
+        }
+        
+        .message-content {
+            max-width: 85%;
+            padding: 12px 16px;
+            border-radius: 15px;
+            word-wrap: break-word;
+            line-height: 1.5;
+        }
+        
+        .message.user .message-content {
+            background: linear-gradient(135deg, #1e3c72, #2a5298);
+            color: white;
+            border-bottom-right-radius: 5px;
+        }
+        
+        .message.assistant .message-content {
+            background: white;
+            color: #333;
+            border: 1px solid #e9ecef;
+            border-bottom-left-radius: 5px;
+        }
+        
+        .chat-input-container {
+            background: white;
+            padding: 15px;
+            border-radius: 12px;
+            border: 2px solid #e9ecef;
+        }
+        
+        .chat-input-container textarea {
+            width: 100%;
+            border: none;
+            outline: none;
+            resize: none;
+            font-family: inherit;
+            font-size: 14px;
+            line-height: 1.5;
+            min-height: 60px;
+        }
+        
+        /* Square 3: Threat Analysis */
+        .threat-scores-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+        
+        .threat-score-card {
+            background: white;
+            padding: 15px;
+            border-radius: 10px;
+            border: 1px solid #e9ecef;
+        }
+        
+        .threat-score-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        
+        .threat-name {
+            font-weight: 600;
+            color: #555;
+        }
+        
+        .threat-value {
+            font-weight: 700;
+            color: #1e3c72;
+            font-size: 1.2em;
+        }
+        
+        .analysis-controls {
+            background: white;
+            padding: 20px;
+            border-radius: 12px;
+            margin-bottom: 20px;
+        }
+        
+        .year-input {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 15px;
+        }
+        
+        .year-input label {
+            font-weight: 600;
+            color: #555;
+            min-width: 100px;
+        }
+        
+        .year-input input {
+            flex: 1;
+            padding: 8px 12px;
+            border: 2px solid #e9ecef;
+            border-radius: 8px;
+            font-size: 14px;
+        }
+        
+        .run-analysis-btn {
+            width: 100%;
+            padding: 15px;
+            background: linear-gradient(135deg, #28a745, #20c997);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        
+        .run-analysis-btn:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
+        }
+        
+        /* Square 4: Analysis Results */
+        .metrics-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+        
+        .metric-card {
+            background: white;
+            padding: 15px;
+            border-radius: 10px;
+            border-left: 4px solid #1e3c72;
+            text-align: center;
+        }
+        
+        .metric-value {
+            font-size: 1.8em;
+            font-weight: 700;
+            color: #1e3c72;
+            margin-bottom: 5px;
+        }
+        
+        .metric-label {
+            font-size: 0.9em;
+            color: #666;
+            font-weight: 600;
+        }
+        
+        .analysis-details {
+            background: white;
+            padding: 20px;
+            border-radius: 12px;
+            margin-top: 20px;
+        }
+        
+        .analysis-section {
+            margin-bottom: 25px;
+        }
+        
+        .analysis-section h4 {
+            color: #1e3c72;
+            margin-bottom: 10px;
+            font-size: 1.1em;
+            border-bottom: 2px solid #e9ecef;
+            padding-bottom: 5px;
+        }
+        
+        .analysis-text {
+            white-space: pre-wrap;
+            line-height: 1.6;
+            font-size: 14px;
+            color: #444;
+        }
+        
+        .region-list {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            gap: 10px;
+            margin-top: 10px;
+        }
+        
+        .region-item {
+            background: #f1f8ff;
+            padding: 8px 12px;
+            border-radius: 6px;
+            font-size: 0.85em;
+            border-left: 3px solid #1e3c72;
+        }
+        
+        .loading-spinner {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #1e3c72;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-right: 10px;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        /* Placeholder states */
+        .placeholder {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: #666;
+            text-align: center;
+            padding: 40px;
+        }
+        
+        .placeholder-icon {
+            font-size: 3em;
+            margin-bottom: 20px;
+            opacity: 0.5;
+        }
+        
+        /* Responsive design */
+        @media (max-width: 1200px) {
+            .container {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto;
+                height: auto;
+                min-height: 90vh;
+            }
+            
+            .grid-square {
+                min-height: 300px;
+            }
+        }
+        
+        @media (max-width: 768px) {
+            .threat-scores-grid,
+            .metrics-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .region-list {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Square 1: Status & Controls -->
+        <div id="square-1" class="grid-square">
+            <div class="square-header">
+                <div class="loading-spinner"></div>
+                <h3>Status & Configuration</h3>
+            </div>
+            <div class="square-content">
+                <div id="status-panel" class="status-panel loading">
+                    <div class="status-text" id="status-text">Loading AEGIS CONDUCTOR...</div>
+                    <div class="status-details" id="status-details">Initializing multi-domain expert system</div>
+                </div>
+                
+                <div class="control-group">
+                    <label for="analysis-type">Analysis Domain</label>
+                    <select id="analysis-type">
+                        <option value="general">🌐 General Analysis</option>
+                        <option value="economic">🏦 Economics</option>
+                        <option value="technology">🔬 Technology</option>
+                        <option value="security">🛡️ Security</option>
+                        <option value="health">🏥 Health & Bio</option>
+                        <option value="environment">🌍 Environment</option>
+                        <option value="strategic">📋 Strategic Planning</option>
+                        <option value="threat">⚠️ Threat Assessment</option>
+                        <option value="aegis_conductor">🧬 AEGIS Conductor</option>
+                    </select>
+                </div>
+                
+                <div class="control-group">
+                    <label for="temperature">Response Creativity</label>
+                    <div class="slider-container">
+                        <input type="range" id="temperature" min="0.1" max="1.0" step="0.1" value="0.7">
+                        <div class="slider-value" id="temperature-value">0.7</div>
+                    </div>
+                </div>
+                
+                <div class="control-group">
+                    <label for="max-tokens">Response Length</label>
+                    <div class="slider-container">
+                        <input type="range" id="max-tokens" min="128" max="512" step="64" value="256">
+                        <div class="slider-value" id="max-tokens-value">256</div>
+                    </div>
+                </div>
+                
+                <div class="action-buttons">
+                    <button id="clear-btn" class="action-btn danger-btn">Clear Chat</button>
+                    <button id="refresh-btn" class="action-btn primary-btn">Refresh Status</button>
+                </div>
+                
+                <div class="control-group">
+                    <h4>System Info</h4>
+                    <div id="system-info">
+                        <p>Model: <span id="model-name">Loading...</span></p>
+                        <p>Version: <span id="model-version">Loading...</span></p>
+                        <p>Regions: <span id="model-regions">Loading...</span></p>
+                        <p>Optimization: <span id="model-optimization">8-bit quantization</span></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Square 2: Chat Interface -->
+        <div id="square-2" class="grid-square">
+            <div class="square-header">
+                <span>💬</span>
+                <h3>Multi-Domain Chat</h3>
+            </div>
+            <div class="square-content">
+                <div class="chat-messages" id="chat-messages">
+                    <div class="message assistant">
+                        <div class="message-content">
+                            Welcome to AEGIS BIO LAB 10 CONDUCTOR! I'm your multi-domain expert system capable of analyzing any topic across:
+                            <br><br>
+                            • Economics & Finance<br>
+                            • Technology & AI<br>
+                            • Security & Defense<br>
+                            • Health & Biotechnology<br>
+                            • Environment & Climate<br>
+                            • Strategic Planning
+                            <br><br>
+                            What would you like to analyze today?
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="chat-input-container">
+                    <textarea 
+                        id="message-input" 
+                        placeholder="Ask about any topic... (Press Shift+Enter for new line)"
+                        rows="3"
+                        disabled
+                    ></textarea>
+                    <div class="action-buttons" style="margin-top: 10px;">
+                        <button id="send-btn" class="action-btn primary-btn" disabled>Send Message</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Square 3: Threat Analysis -->
+        <div id="square-3" class="grid-square">
+            <div class="square-header">
+                <span>🎯</span>
+                <h3>Threat Assessment</h3>
+            </div>
+            <div class="square-content">
+                <div class="threat-scores-grid">
+                    <div class="threat-score-card">
+                        <div class="threat-score-header">
+                            <span class="threat-name">AI Threats</span>
+                            <span class="threat-value" id="ai-value">7.0</span>
+                        </div>
+                        <input type="range" id="ai-score" min="0" max="10" step="0.1" value="7.0">
+                    </div>
+                    
+                    <div class="threat-score-card">
+                        <div class="threat-score-header">
+                            <span class="threat-name">Cyber Threats</span>
+                            <span class="threat-value" id="cyber-value">6.5</span>
+                        </div>
+                        <input type="range" id="cyber-score" min="0" max="10" step="0.1" value="6.5">
+                    </div>
+                    
+                    <div class="threat-score-card">
+                        <div class="threat-score-header">
+                            <span class="threat-name">Bio Threats</span>
+                            <span class="threat-value" id="bio-value">8.0</span>
+                        </div>
+                        <input type="range" id="bio-score" min="0" max="10" step="0.1" value="8.0">
+                    </div>
+                    
+                    <div class="threat-score-card">
+                        <div class="threat-score-header">
+                            <span class="threat-name">Nuclear Threats</span>
+                            <span class="threat-value" id="nuclear-value">4.0</span>
+                        </div>
+                        <input type="range" id="nuclear-score" min="0" max="10" step="0.1" value="4.0">
+                    </div>
+                    
+                    <div class="threat-score-card">
+                        <div class="threat-score-header">
+                            <span class="threat-name">Climate Threats</span>
+                            <span class="threat-value" id="climate-value">7.5</span>
+                        </div>
+                        <input type="range" id="climate-score" min="0" max="10" step="0.1" value="7.5">
+                    </div>
+                    
+                    <div class="threat-score-card">
+                        <div class="threat-score-header">
+                            <span class="threat-name">Space Threats</span>
+                            <span class="threat-value" id="space-value">5.0</span>
+                        </div>
+                        <input type="range" id="space-score" min="0" max="10" step="0.1" value="5.0">
+                    </div>
+                </div>
+                
+                <div class="analysis-controls">
+                    <div class="year-input">
+                        <label for="analysis-year">Analysis Year:</label>
+                        <input type="number" id="analysis-year" min="2024" max="2030" value="2024">
+                    </div>
+                    
+                    <button id="run-analysis-btn" class="run-analysis-btn" disabled>
+                        🚀 Run Comprehensive Analysis
+                    </button>
+                </div>
+                
+                <div class="control-group">
+                    <h4>Global Coverage</h4>
+                    <div class="region-list">
+                        <div class="region-item">North America</div>
+                        <div class="region-item">Europe</div>
+                        <div class="region-item">Asia</div>
+                        <div class="region-item">Africa</div>
+                        <div class="region-item">South America</div>
+                        <div class="region-item">Middle East</div>
+                        <div class="region-item">Oceania</div>
+                        <div class="region-item">Arctic Region</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Square 4: Analysis Results -->
+        <div id="square-4" class="grid-square">
+            <div class="square-header">
+                <span>📊</span>
+                <h3>Analysis Results</h3>
+            </div>
+            <div class="square-content">
+                <div id="analysis-placeholder" class="placeholder">
+                    <div class="placeholder-icon">📈</div>
+                    <h3>Analysis Results</h3>
+                    <p>Configure threat scores and run analysis to see comprehensive results here.</p>
+                    <p>Results will include:</p>
+                    <ul style="text-align: left; margin-top: 10px;">
+                        <li>Market shock index</li>
+                        <li>Economic impact classification</li>
+                        <li>Threat level assessment</li>
+                        <li>Regional vulnerabilities</li>
+                        <li>Contagion metrics</li>
+                        <li>Detailed analysis report</li>
+                    </ul>
+                </div>
+                
+                <div id="analysis-results" style="display: none;">
+                    <div class="metrics-grid" id="metrics-display"></div>
+                    
+                    <div class="analysis-details">
+                        <div class="analysis-section">
+                            <h4>Comprehensive Analysis</h4>
+                            <div class="analysis-text" id="detailed-analysis"></div>
+                        </div>
+                        
+                        <div class="analysis-section" id="regional-section" style="display: none;">
+                            <h4>Regional Vulnerabilities</h4>
+                            <div class="region-list" id="regional-vulnerabilities"></div>
+                        </div>
+                        
+                        <div class="analysis-section" id="contagion-section" style="display: none;">
+                            <h4>Contagion Metrics</h4>
+                            <div id="contagion-metrics"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let chatHistory = [];
+        let isGenerating = false;
+
+        // DOM Elements
+        const statusPanel = document.getElementById('status-panel');
+        const statusText = document.getElementById('status-text');
+        const statusDetails = document.getElementById('status-details');
+        const chatMessages = document.getElementById('chat-messages');
+        const messageInput = document.getElementById('message-input');
+        const sendBtn = document.getElementById('send-btn');
+        const clearBtn = document.getElementById('clear-btn');
+        const refreshBtn = document.getElementById('refresh-btn');
+        const runAnalysisBtn = document.getElementById('run-analysis-btn');
+        
+        // System info elements
+        const modelName = document.getElementById('model-name');
+        const modelVersion = document.getElementById('model-version');
+        const modelRegions = document.getElementById('model-regions');
+        
+        // Control elements
+        const analysisTypeSelect = document.getElementById('analysis-type');
+        const temperatureSlider = document.getElementById('temperature');
+        const temperatureValue = document.getElementById('temperature-value');
+        const maxTokensSlider = document.getElementById('max-tokens');
+        const maxTokensValue = document.getElementById('max-tokens-value');
+        
+        // Threat score elements
+        const threatScores = {
+            ai: { slider: document.getElementById('ai-score'), value: document.getElementById('ai-value') },
+            cyber: { slider: document.getElementById('cyber-score'), value: document.getElementById('cyber-value') },
+            bio: { slider: document.getElementById('bio-score'), value: document.getElementById('bio-value') },
+            nuclear: { slider: document.getElementById('nuclear-score'), value: document.getElementById('nuclear-value') },
+            climate: { slider: document.getElementById('climate-score'), value: document.getElementById('climate-value') },
+            space: { slider: document.getElementById('space-score'), value: document.getElementById('space-value') }
+        };
+
+        // Update slider values
+        temperatureSlider.addEventListener('input', () => {
+            temperatureValue.textContent = temperatureSlider.value;
+        });
+
+        maxTokensSlider.addEventListener('input', () => {
+            maxTokensValue.textContent = maxTokensSlider.value;
+        });
+
+        // Update threat score values
+        Object.keys(threatScores).forEach(key => {
+            threatScores[key].slider.addEventListener('input', () => {
+                threatScores[key].value.textContent = threatScores[key].slider.value;
+            });
+        });
+
+        // Check model status
+        function checkStatus() {
+            fetch('/status')
+                .then(response => response.json())
+                .then(data => {
+                    if (data.loaded) {
+                        statusPanel.className = 'status-panel ready';
+                        statusText.textContent = 'AEGIS CONDUCTOR Ready';
+                        statusDetails.textContent = `Model ${data.model} v${data.version} loaded successfully`;
+                        
+                        modelName.textContent = data.model;
+                        modelVersion.textContent = data.version;
+                        modelRegions.textContent = data.regions;
+                        
+                        messageInput.disabled = false;
+                        sendBtn.disabled = false;
+                        runAnalysisBtn.disabled = false;
+                    } else if (data.status.includes('Error')) {
+                        statusPanel.className = 'status-panel error';
+                        statusText.textContent = 'System Error';
+                        statusDetails.textContent = data.status;
+                    } else {
+                        statusPanel.className = 'status-panel loading';
+                        statusText.textContent = 'Loading System';
+                        statusDetails.textContent = data.status;
+                        setTimeout(checkStatus, 2000);
+                    }
+                })
+                .catch(error => {
+                    console.error('Status check failed:', error);
+                    statusPanel.className = 'status-panel error';
+                    statusText.textContent = 'Connection Error';
+                    statusDetails.textContent = 'Cannot connect to AEGIS server';
+                    setTimeout(checkStatus, 5000);
+                });
+        }
+
+        // Add message to chat
+        function addMessage(content, isUser = false) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message ${isUser ? 'user' : 'assistant'}`;
+            
+            const contentDiv = document.createElement('div');
+            contentDiv.className = 'message-content';
+            
+            if (isUser) {
+                contentDiv.textContent = content;
+            } else {
+                contentDiv.innerHTML = content.replace(/\n/g, '<br>');
+            }
+            
+            messageDiv.appendChild(contentDiv);
+            chatMessages.appendChild(messageDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+
+        // Send message
+        function sendMessage() {
+            const message = messageInput.value.trim();
+            if (!message || isGenerating) return;
+
+            isGenerating = true;
+            sendBtn.disabled = true;
+            sendBtn.textContent = 'Analyzing...';
+            
+            addMessage(message, true);
+            messageInput.value = '';
+
+            fetch('/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    message: message,
+                    history: chatHistory,
+                    temperature: parseFloat(temperatureSlider.value),
+                    max_tokens: parseInt(maxTokensSlider.value),
+                    analysis_type: analysisTypeSelect.value
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) {
+                    addMessage(`Error: ${data.error}`);
+                } else {
+                    addMessage(data.response);
+                    chatHistory.push({
+                        user: message,
+                        assistant: data.response
+                    });
+                }
+            })
+            .catch(error => {
+                console.error('Chat error:', error);
+                addMessage('Sorry, there was an error processing your message. Please try again.');
+            })
+            .finally(() => {
+                isGenerating = false;
+                sendBtn.disabled = false;
+                sendBtn.textContent = 'Send Message';
+            });
+        }
+
+        // Run AEGIS analysis
+        function runAegisAnalysis() {
+            if (isGenerating) return;
+            
+            isGenerating = true;
+            runAnalysisBtn.disabled = true;
+            runAnalysisBtn.textContent = 'Analyzing...';
+            
+            document.getElementById('analysis-placeholder').style.display = 'none';
+            document.getElementById('analysis-results').style.display = 'block';
+            
+            const analysisData = {
+                ai_score: parseFloat(threatScores.ai.slider.value),
+                cyber_score: parseFloat(threatScores.cyber.slider.value),
+                bio_score: parseFloat(threatScores.bio.slider.value),
+                nuclear_score: parseFloat(threatScores.nuclear.slider.value),
+                climate_score: parseFloat(threatScores.climate.slider.value),
+                space_score: parseFloat(threatScores.space.slider.value),
+                year: parseInt(document.getElementById('analysis-year').value)
+            };
+            
+            fetch('/aegis_analysis', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(analysisData)
+            })
+            .then(response => response.json())
+            .then(data => {
+                displayAnalysisResults(data);
+            })
+            .catch(error => {
+                console.error('Analysis error:', error);
+                document.getElementById('detailed-analysis').innerHTML = 
+                    '<p style="color: #dc3545;">Analysis failed. Please try again.</p>';
+            })
+            .finally(() => {
+                isGenerating = false;
+                runAnalysisBtn.disabled = false;
+                runAnalysisBtn.textContent = '🚀 Run Comprehensive Analysis';
+            });
+        }
+
+        // Display analysis results
+        function displayAnalysisResults(data) {
+            const metricsDisplay = document.getElementById('metrics-display');
+            const detailedAnalysis = document.getElementById('detailed-analysis');
+            const regionalSection = document.getElementById('regional-section');
+            const regionalVulnerabilities = document.getElementById('regional-vulnerabilities');
+            const contagionSection = document.getElementById('contagion-section');
+            const contagionMetrics = document.getElementById('contagion-metrics');
+            
+            // Display metrics
+            metricsDisplay.innerHTML = `
+                <div class="metric-card">
+                    <div class="metric-value">${data.market_shock_index ? data.market_shock_index.toFixed(3) : 'N/A'}</div>
+                    <div class="metric-label">Market Shock Index</div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-value">${data.impact_classification || 'N/A'}</div>
+                    <div class="metric-label">Impact Level</div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-value">${data.threat_level || 'N/A'}</div>
+                    <div class="metric-label">Threat Level</div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-value">${Object.keys(data.regional_vulnerabilities || {}).length}</div>
+                    <div class="metric-label">Regions</div>
+                </div>
+            `;
+            
+            // Detailed analysis
+            detailedAnalysis.textContent = data.reasoning_analysis || 'No analysis available';
+            
+            // Regional vulnerabilities
+            if (data.regional_vulnerabilities && Object.keys(data.regional_vulnerabilities).length > 0) {
+                regionalSection.style.display = 'block';
+                regionalVulnerabilities.innerHTML = '';
+                
+                Object.entries(data.regional_vulnerabilities).forEach(([region, score]) => {
+                    const regionDiv = document.createElement('div');
+                    regionDiv.className = 'region-item';
+                    regionDiv.innerHTML = `<strong>${region}:</strong> ${typeof score === 'number' ? score.toFixed(2) : score}/10`;
+                    regionalVulnerabilities.appendChild(regionDiv);
+                });
+            }
+            
+            // Contagion metrics
+            if (data.contagion_metrics && Object.keys(data.contagion_metrics).length > 0) {
+                contagionSection.style.display = 'block';
+                contagionMetrics.innerHTML = '';
+                
+                Object.entries(data.contagion_metrics).forEach(([metric, score]) => {
+                    const metricDiv = document.createElement('div');
+                    metricDiv.style.marginBottom = '8px';
+                    metricDiv.innerHTML = `
+                        <strong>${metric.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}:</strong> 
+                        <span style="float: right; font-weight: 600; color: #1e3c72;">
+                            ${typeof score === 'number' ? score.toFixed(3) : score}
+                        </span>
+                    `;
+                    contagionMetrics.appendChild(metricDiv);
+                });
+            }
+            
+            // Scroll to top of results
+            document.getElementById('square-4').querySelector('.square-content').scrollTop = 0;
+        }
+
+        // Clear chat
+        function clearChat() {
+            chatHistory = [];
+            chatMessages.innerHTML = `
+                <div class="message assistant">
+                    <div class="message-content">
+                        Chat cleared! AEGIS BIO LAB 10 CONDUCTOR ready for new analysis.
+                    </div>
+                </div>
+            `;
+            
+            fetch('/clear', { method: 'POST' })
+                .catch(error => console.error('Clear error:', error));
+        }
+
+        // Event listeners
+        sendBtn.addEventListener('click', sendMessage);
+        clearBtn.addEventListener('click', clearChat);
+        refreshBtn.addEventListener('click', checkStatus);
+        runAnalysisBtn.addEventListener('click', runAegisAnalysis);
+        
+        messageInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        });
+
+        // Initialize
+        checkStatus();
+    </script>
+</body>
+</html>