Flare Admin UI Setup

Quick Start (HuggingFace Deployment)

Just push all files to HuggingFace Space. The Dockerfile will handle everything:

Build Angular UI
Install Python dependencies
Serve both UI and API on port 7860

Local Development

Backend Setup

# Install Python dependencies
pip install -r requirements.txt

# Set encryption key (if needed)
export FLARE_TOKEN_KEY="your-32-byte-base64-key"

# Run backend
python app.py

Frontend Setup (for development only)

# Navigate to UI directory
cd flare-ui

# Install dependencies
npm install

# Run development server (proxies to backend on port 7860)
npm start

# Build for production (creates static/ directory)
npm run build

Docker Deployment

# Build and run
docker build -t flare-admin .
docker run -p 7860:7860 flare-admin

Access at http://localhost:7860

Default Login

Username: admin
Password: admin

Creating Admin User

To create a new admin user with proper password hash:

import hashlib

password = "your-password"
password_hash = hashlib.sha256(password.encode()).hexdigest()
print(f"Password hash: {password_hash}")

Add the user to service_config.jsonc:

{
  "config": {
    "users": [
      {
        "username": "newuser",
        "password_hash": "your-hash-here",
        "salt": "random_salt_string"
      }
    ]
  }
}

Project Structure

/
├── app.py                  # Main FastAPI application
├── admin_routes.py         # Admin API endpoints
├── chat_handler.py         # Chat functionality
├── service_config.jsonc    # Configuration file
├── Dockerfile             # Handles everything for deployment
├── flare-ui/              # Angular UI source
│   ├── src/
│   │   ├── app/
│   │   │   ├── components/
│   │   │   ├── services/
│   │   │   └── guards/
│   │   └── index.html
│   └── package.json
└── static/                # Built UI files (auto-generated by Docker)

Features Implemented

✅ User authentication with JWT
✅ Environment configuration
✅ Project management
✅ Version control
✅ API management
✅ Activity logging
✅ Race condition handling
✅ Import/Export functionality

TODO

User Info tab (password change)
APIs tab (CRUD operations)
Projects tab (full CRUD)
Test tab implementation
Intent/Parameter dialogs
Version comparison
Auto-save for drafts
Keyboard shortcuts

⚠️ Production Deployment Note

This setup is optimized for HuggingFace Spaces and development environments. For production on-premise deployment, a more robust architecture will be implemented.

Planned Production Architecture:

1. Web Server Layer

Nginx as reverse proxy and static file server
SSL/TLS termination
Request rate limiting and security headers
Gzip compression for static assets

2. Application Layer

Gunicorn/Uvicorn workers for Python ASGI
Process management with Supervisor or systemd
Horizontal scaling with multiple worker processes
Health check endpoints for monitoring

3. Session & Cache Layer

Redis for distributed session storage
Centralized cache for LLM responses
Session affinity for WebSocket connections

4. Database Layer (Optional)

PostgreSQL for configuration storage (replacing JSON file)
Backup and replication strategies
Migration tools for schema updates

5. Monitoring & Logging

Prometheus + Grafana for metrics
ELK Stack (Elasticsearch, Logstash, Kibana) for log aggregation
Application Performance Monitoring (APM)
Alert configuration for critical events

6. Deployment Options

Option A: Docker Compose (Small-Medium Scale)

services:
  nginx:
    image: nginx:alpine
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - ./static:/usr/share/nginx/html
    ports:
      - "80:80"
      - "443:443"

  app:
    image: flare-admin:production
    scale: 3  # 3 instances
    environment:
      - REDIS_URL=redis://redis:6379

  redis:
    image: redis:alpine
    volumes:
      - redis-data:/data

Option B: Kubernetes (Large Scale)

Helm charts for easy deployment
Horizontal Pod Autoscaler (HPA)
Ingress controller for routing
Persistent Volume Claims for data
Secrets management for credentials

7. Security Considerations

JWT token rotation and refresh
API rate limiting per user
Input validation and sanitization
Regular security audits
Compliance with data protection regulations

8. Backup & Disaster Recovery

Automated daily backups
Point-in-time recovery
Geo-redundant storage
Disaster recovery procedures
RTO/RPO targets defined

Production Deployment Timeline:

Phase 1: Current setup (HF Spaces, development)
Phase 2: Docker Compose setup for on-premise pilot
Phase 3: Full production architecture with monitoring
Phase 4: Kubernetes deployment for enterprise scale

A comprehensive DEPLOYMENT.md guide will be created when transitioning to production architecture.