Spaces:

agentcyone
/

knowledge-whisper

Running

App Files Files Community

agentcyone commited on Jul 24, 2025

Commit

58b7726

verified ·

1 Parent(s): 941998a

proceed - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +892 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Knowledge Whisper
-emoji: 😻
-colorFrom: indigo
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: knowledge-whisper
+emoji: 🐳
+colorFrom: blue
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,892 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+#!/bin/bash
+set -euo pipefail
+echo "🔨 Building all Docker images and pushing..."
+for app in ../spaces/*; do
+  appname=$(basename "$app")
+  docker build -t ghcr.io/agentcyone/$appname:latest "$app"
+  docker push ghcr.io/agentcyone/$appname:latest
+done
+echo "🚀 Deploying Helm charts..."
+for app in ../helm_charts/*; do
+  appname=$(basename "$app")
+  helm upgrade --install $appname "$app" --namespace totality --create-namespace
+done
+echo "✅ Build and deploy complete."
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: totality-ingress
+  namespace: totality
+  annotations:
+    nginx.ingress.kubernetes.io/rewrite-target: /
+spec:
+  rules:
+  - http:
+      paths: {{- range $app := (list "space_app_1" "space_app_2") }}
+      - path: /api/{{ $app }}
+        pathType: Prefix
+        backend:
+          service:
+            name: {{ $app }}-service
+            port:
+              number: 80 {{- end }}
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: prometheus
+  namespace: totality
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: prometheus
+  template:
+    metadata:
+      labels:
+        app: prometheus
+    spec:
+      containers:
+      - name: prometheus
+        image: prom/prometheus:latest
+        ports:
+        - containerPort: 9090
+        volumeMounts:
+        - mountPath: /etc/prometheus
+          name: config
+      volumes:
+      - name: config
+        configMap:
+          name: prometheus-config
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: prometheus
+  namespace: totality
+spec:
+  type: ClusterIP
+  ports:
+  - port: 9090
+  selector:
+    app: prometheus
+name: Totality Spaces CI/CD
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v3
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v2
+    - name: Login to GitHub Container Registry
+      uses: docker/login-action@v2
+      with:
+        registry: ${{ env.REGISTRY }}
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+    - name: Build and push images
+      run: |
+        for app in spaces/*; do
+          appname=$(basename "$app")
+          echo "Building $appname..."
+          docker build -t ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}/$appname:latest $app
+          docker push ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}/$appname:latest
+        done
+    - name: Set up Helm
+      uses: azure/setup-helm@v3
+      with:
+        version: 'v3.11.1'
+    - name: Deploy to Kubernetes
+      run: |
+        for app in helm_charts/*; do
+          appname=$(basename "$app")
+          echo "Deploying $appname..."
+          helm upgrade --install $appname $app \
+            --namespace totality \
+            --create-namespace \
+            --wait \
+            --timeout 5m
+        done
+    - name: Verify deployments
+      run: |
+        kubectl get pods -n totality
+# Default values for space_app_1
+replicaCount: 2
+image:
+  repository: ghcr.io/agentcyone/space_app_1
+  tag: latest
+  pullPolicy: IfNotPresent
+service:
+  type: ClusterIP
+  port: 80
+  targetPort: 7860
+  annotations: {}
+ingress:
+  enabled: false
+  className: ""
+  annotations: {}
+  hosts:
+    - host: chart-example.local
+      paths:
+        - path: /
+          pathType: ImplementationSpecific
+  tls: []
+resources:
+  requests:
+    cpu: 250m
+    memory: 512Mi
+  limits:
+    cpu: 500m
+    memory: 1Gi
+autoscaling:
+  enabled: true
+  minReplicas: 2
+  maxReplicas: 10
+  targetCPUUtilizationPercentage: 50
+  targetMemoryUtilizationPercentage: 50
+nodeSelector: {}
+tolerations: []
+affinity: {}
+# Generic Dockerfile template for Spaces applications
+FROM python:3.10-slim
+WORKDIR /app
+# Install dependencies first for better caching
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+# Copy application code
+COPY . .
+# Expose default Gradio port
+EXPOSE 7860
+# Health check
+HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost:7860/ || exit 1
+# Run the application
+CMD ["python", "app.py"]
+# Totality SaaS Platform
+Enterprise-grade mathematical knowledge platform with scalable deployment architecture.
+## Features
+- Dockerized Spaces applications
+- Helm charts for Kubernetes deployment
+- CI/CD pipelines
+- Monitoring stack (Prometheus + Grafana)
+- API Gateway with NGINX
+- Ray Serve for distributed computing
+- Multi-cloud Terraform configs
+## Quick Start
+```bash
+# Build and deploy all spaces
+./scripts/build_and_deploy.sh
+```
+## Repository Structure
+```
+totality_saas/
+├── README.md
+├── spaces/
+│   ├── space_app_1/
+│   │   ├── app.py
+│   │   ├── requirements.txt
+│   │    └── Dockerfile
+│    └── space_app_2/
+│       ├── app.py
+│       ├── requirements.txt
+│        └── Dockerfile
+├── dockerfiles/
+│   └── generic.Dockerfile
+├── helm_charts/
+│   ├── space_app_1/
+│   │   ├── Chart.yaml
+│   │   ├── values.yaml
+│   │   └── templates/
+│   │       ├── deployment.yaml
+│   │       └── service.yaml
+│   └── space_app_2/
+│       ├── Chart.yaml
+│       ├── values.yaml
+│       └── templates/
+│           ├── deployment.yaml
+│           └── service.yaml
+├── ci_cd/
+│   └── github-actions.yaml
+├── monitoring/
+│   ├── prometheus-deployment.yaml
+│   ├── grafana-deployment.yaml
+│   └── dashboards/
+│       └── totality-dashboard.json
+├── api_gateway/
+│    └── nginx-ingress.yaml
+├── ray_serve/
+│   └── ray-serve-cluster.yaml
+├── terraform/
+│    └── multi-cloud-clusters.tf
+└── scripts/
+    ├── build_and_deploy.sh
+    └── scale_autoscaler.yaml
+```
+## Architecture
+![Architecture Diagram](docs/architecture.png)
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Knowledge Whisper - Enterprise Agents</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .card-hover {
+            transition: all 0.3s ease;
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        .search-container {
+            position: relative;
+        }
+        .search-container:after {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 2px;
+            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+            transform: scaleX(0);
+            transform-origin: left;
+            transition: transform 0.3s ease;
+        }
+        .search-container:focus-within:after {
+            transform: scaleX(1);
+        }
+        .timeline-item:before {
+            content: "";
+            position: absolute;
+            left: -1.5rem;
+            top: 0;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #3b82f6;
+            border: 2px solid white;
+        }
+        .timeline-line:before {
+            content: "";
+            position: absolute;
+            left: -1.125rem;
+            top: 0;
+            width: 2px;
+            height: 100%;
+            background: #e5e7eb;
+        }
+        .floating-btn {
+            animation: float 3s ease-in-out infinite;
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+    </style>
+</head>
+<body class="bg-gray-50 font-sans antialiased">
+    <!-- Header -->
+    <header class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center mb-4 md:mb-0">
+                    <i class="fas fa-brain text-3xl mr-3"></i>
+                    <div>
+                        <h1 class="text-2xl font-bold">Knowledge Whisper</h1>
+                        <p class="text-blue-100 text-sm">Enterprise Agents Portal</p>
+                    </div>
+                </div>
+                <div class="relative w-full md:w-1/3 search-container">
+                    <input type="text" placeholder="Search mathematicians..."
+                           class="w-full bg-white/20 backdrop-blur-sm rounded-lg py-2 px-4 pl-10 text-white placeholder-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
+                    <i class="fas fa-search absolute left-3 top-3 text-blue-100"></i>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section class="mb-12 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-8 shadow-inner">
+            <div class="flex flex-col lg:flex-row items-center">
+                <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-8">
+                    <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Mathematical Legacy Explorer</h2>
+                    <p class="text-gray-600 mb-6 text-lg">Discover the interconnected knowledge of history's greatest mathematical minds. Explore their contributions, relationships, and impact on modern mathematics.</p>
+                    <div class="flex flex-wrap gap-3">
+                        <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full font-medium transition-all flex items-center">
+                            <i class="fas fa-play mr-2"></i> Interactive Tour
+                        </button>
+                        <button class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-2 rounded-full font-medium transition-all flex items-center">
+                            <i class="fas fa-book-open mr-2"></i> View Timeline
+                        </button>
+                    </div>
+                </div>
+                <div class="lg:w-1/2 relative">
+                    <div class="bg-white p-6 rounded-xl shadow-lg">
+                        <div class="flex justify-between items-center mb-4">
+                            <h3 class="font-bold text-gray-800">Top Influential Mathematicians</h3>
+                            <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">By Impact Score</span>
+                        </div>
+                        <div class="space-y-4">
+                            <div class="flex items-center p-3 bg-blue-50 rounded-lg">
+                                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-800 font-bold mr-4">1</div>
+                                <div>
+                                    <h4 class="font-medium">Leonhard Euler</h4>
+                                    <p class="text-xs text-gray-500">12% influence score</p>
+                                </div>
+                                <div class="ml-auto text-blue-600">
+                                    <i class="fas fa-arrow-right"></i>
+                                </div>
+                            </div>
+                            <div class="flex items-center p-3 hover:bg-blue-50 rounded-lg transition-colors">
+                                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-800 font-bold mr-4">2</div>
+                                <div>
+                                    <h4 class="font-medium">Carl Gauss</h4>
+                                    <p class="text-xs text-gray-500">10% influence score</p>
+                                </div>
+                                <div class="ml-auto text-gray-400 hover:text-blue-600 transition-colors">
+                                    <i class="fas fa-arrow-right"></i>
+                                </div>
+                            </div>
+                            <div class="flex items-center p-3 hover:bg-blue-50 rounded-lg transition-colors">
+                                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-800 font-bold mr-4">3</div>
+                                <div>
+                                    <h4 class="font-medium">Archimedes</h4>
+                                    <p class="text-xs text-gray-500">10% influence score</p>
+                                </div>
+                                <div class="ml-auto text-gray-400 hover:text-blue-600 transition-colors">
+                                    <i class="fas fa-arrow-right"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-xl shadow-lg w-32 h-32 flex items-center justify-center floating-btn">
+                        <div class="text-center">
+                            <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-1">
+                                <i class="fas fa-plus text-indigo-600"></i>
+                            </div>
+                            <p class="text-xs font-medium text-gray-600">Add Agent</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Categories Section -->
+        <section class="mb-12">
+            <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
+                <i class="fas fa-tags text-blue-500 mr-3"></i> Explore by Categories
+            </h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+                <div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow card-hover flex flex-col items-center text-center">
+                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mb-3">
+                        <i class="fas fa-calculator"></i>
+                    </div>
+                    <h3 class="font-medium text-gray-800">Calculus</h3>
+                    <p class="text-xs text-gray-500 mt-1">Newton, Leibniz, Euler</p>
+                </div>
+                <div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow card-hover flex flex-col items-center text-center">
+                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600 mb-3">
+                        <i class="fas fa-shapes"></i>
+                    </div>
+                    <h3 class="font-medium text-gray-800">Geometry</h3>
+                    <p class="text-xs text-gray-500 mt-1">Euclid, Pythagoras</p>
+                </div>
+                <div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow card-hover flex flex-col items-center text-center">
+                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mb-3">
+                        <i class="fas fa-infinity"></i>
+                    </div>
+                    <h3 class="font-medium text-gray-800">Number Theory</h3>
+                    <p class="text-xs text-gray-500 mt-1">Fermat, Gauss</p>
+                </div>
+                <div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow card-hover flex flex-col items-center text-center">
+                    <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600 mb-3">
+                        <i class="fas fa-project-diagram"></i>
+                    </div>
+                    <h3 class="font-medium text-gray-800">Algebra</h3>
+                    <p class="text-xs text-gray-500 mt-1">Galois, Abel</p>
+                </div>
+                <div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow card-hover flex flex-col items-center text-center">
+                    <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center text-red-600 mb-3">
+                        <i class="fas fa-wave-square"></i>
+                    </div>
+                    <h3 class="font-medium text-gray-800">Analysis</h3>
+                    <p class="text-xs text-gray-500 mt-1">Cauchy, Weierstrass</p>
+                </div>
+                <div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow card-hover flex flex-col items-center text-center">
+                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mb-3">
+                        <i class="fas fa-atom"></i>
+                    </div>
+                    <h3 class="font-medium text-gray-800">Physics</h3>
+                    <p class="text-xs text-gray-500 mt-1">Newton, Lagrange</p>
+                </div>
+            </div>
+        </section>
+        <!-- Mathematicians Grid -->
+        <section class="mb-12">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold text-gray-800 flex items-center">
+                    <i class="fas fa-users text-blue-500 mr-3"></i> All Mathematicians
+                </h2>
+                <div class="flex items-center space-x-2">
+                    <span class="text-sm text-gray-500">Filter:</span>
+                    <select class="bg-white border border-gray-200 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-300">
+                        <option>All Time Periods</option>
+                        <option>Ancient</option>
+                        <option>Medieval</option>
+                        <option>Renaissance</option>
+                        <option>Modern</option>
+                    </select>
+                </div>
+            </div>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                <!-- Mathematician Cards -->
+                <!-- We'll generate these dynamically with JavaScript -->
+                <div id="mathematicians-container"></div>
+            </div>
+            <div class="mt-8 flex justify-center">
+                <button class="bg-white border border-gray-200 hover:border-blue-300 text-blue-600 px-6 py-2 rounded-full font-medium transition-all flex items-center">
+                    <i class="fas fa-redo mr-2"></i> Load More
+                </button>
+            </div>
+        </section>
+        <!-- Timeline Section -->
+        <section class="mb-12 bg-white rounded-xl shadow-sm p-6">
+            <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
+                <i class="fas fa-history text-blue-500 mr-3"></i> Mathematical Timeline
+            </h2>
+            <div class="relative pl-8">
+                <div class="timeline-line absolute left-0 top-0 bottom-0"></div>
+                <div class="mb-8 timeline-item relative pl-6">
+                    <div class="bg-blue-50 rounded-xl p-4">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="font-bold text-blue-800">Ancient Mathematics</h3>
+                            <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">600 BCE - 500 CE</span>
+                        </div>
+                        <p class="text-sm text-gray-600">Thales, Pythagoras, Euclid, Archimedes, Ptolemy, Diophantus</p>
+                    </div>
+                </div>
+                <div class="mb-8 timeline-item relative pl-6">
+                    <div class="bg-indigo-50 rounded-xl p-4">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="font-bold text-indigo-800">Medieval Mathematics</h3>
+                            <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">500 - 1500</span>
+                        </div>
+                        <p class="text-sm text-gray-600">Al-Khwarizmi, Fibonacci, Bhaskara II, Omar Khayyam</p>
+                    </div>
+                </div>
+                <div class="mb-8 timeline-item relative pl-6">
+                    <div class="bg-purple-50 rounded-xl p-4">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="font-bold text-purple-800">Renaissance Mathematics</h3>
+                            <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">1500 - 1700</span>
+                        </div>
+                        <p class="text-sm text-gray-600">Cardano, Viete, Napier, Descartes, Fermat, Pascal</p>
+                    </div>
+                </div>
+                <div class="mb-8 timeline-item relative pl-6">
+                    <div class="bg-pink-50 rounded-xl p-4">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="font-bold text-pink-800">Age of Enlightenment</h3>
+                            <span class="text-xs bg-pink-100 text-pink-800 px-2 py-1 rounded-full">1700 - 1800</span>
+                        </div>
+                        <p class="text-sm text-gray-600">Newton, Leibniz, Euler, Bernoulli family, Lagrange, Laplace</p>
+                    </div>
+                </div>
+                <div class="timeline-item relative pl-6">
+                    <div class="bg-green-50 rounded-xl p-4">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="font-bold text-green-800">Modern Mathematics</h3>
+                            <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">1800 - Present</span>
+                        </div>
+                        <p class="text-sm text-gray-600">Gauss, Cauchy, Galois, Riemann, Poincaré, Hilbert, Grothendieck</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Connections Graph -->
+        <section class="mb-12 bg-gray-900 rounded-xl p-6 text-white">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold flex items-center">
+                    <i class="fas fa-project-diagram text-blue-300 mr-3"></i> Knowledge Connections
+                </h2>
+                <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded-full text-sm font-medium transition-all">
+                    <i class="fas fa-expand mr-1"></i> Fullscreen
+                </button>
+            </div>
+            <div class="bg-gray-800 rounded-lg p-4 h-96 flex items-center justify-center">
+                <div class="text-center">
+                    <i class="fas fa-network-wired text-5xl text-gray-600 mb-4"></i>
+                    <h3 class="text-xl font-medium mb-2">Interactive Graph Visualization</h3>
+                    <p class="text-gray-400 max-w-md mx-auto">This area would display an interactive network graph showing connections between mathematicians, their influences, and collaborations.</p>
+                    <button class="mt-4 bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full font-medium transition-all">
+                        <i class="fas fa-play mr-2"></i> Launch Visualizer
+                    </button>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-8">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between">
+                <div class="mb-6 md:mb-0">
+                    <div class="flex items-center mb-4">
+                        <i class="fas fa-brain text-2xl text-blue-300 mr-2"></i>
+                        <span class="text-xl font-bold">Knowledge Whisper</span>
+                    </div>
+                    <p class="text-gray-400 max-w-xs">Exploring the interconnected legacy of mathematical thought through history.</p>
+                </div>
+                <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
+                    <div>
+                        <h3 class="text-lg font-medium mb-4">Resources</h3>
+                        <ul class="space-y-2">
+                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Documentation</a></li>
+                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">API</a></li>
+                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Tutorials</a></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h3 class="text-lg font-medium mb-4">Company</h3>
+                        <ul class="space-y-2">
+                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">About</a></li>
+                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Blog</a></li>
+                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Careers</a></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h3 class="text-lg font-medium mb-4">Connect</h3>
+                        <div class="flex space-x-4">
+                            <a href="#" class="text-gray-400 hover:text-white transition-colors">
+                                <i class="fab fa-twitter"></i>
+                            </a>
+                            <a href="#" class="text-gray-400 hover:text-white transition-colors">
+                                <i class="fab fa-github"></i>
+                            </a>
+                            <a href="#" class="text-gray-400 hover:text-white transition-colors">
+                                <i class="fab fa-linkedin"></i>
+                            </a>
+                            <a href="#" class="text-gray-400 hover:text-white transition-colors">
+                                <i class="fab fa-youtube"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-8 pt-8 text-sm text-gray-400">
+                <div class="flex flex-col md:flex-row justify-between items-center">
+                    <p>© 2023 Knowledge Whisper. All rights reserved.</p>
+                    <div class="flex space-x-6 mt-4 md:mt-0">
+                        <a href="#" class="hover:text-white transition-colors">Privacy</a>
+                        <a href="#" class="hover:text-white transition-colors">Terms</a>
+                        <a href="#" class="hover:text-white transition-colors">Cookies</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mathematicians data
+        const mathematicians = [
+            { id: 1, name: "Isaac Newton", era: "17th-18th", field: "Calculus, Physics", influence: 1 },
+            { id: 2, name: "Gottfried Leibniz", era: "17th-18th", field: "Calculus", influence: 6 },
+            { id: 3, name: "Joseph Lagrange", era: "18th", field: "Analysis", influence: 6 },
+            { id: 4, name: "Leonhard Euler", era: "18th", field: "All", influence: 12 },
+            { id: 5, name: "Pierre Laplace", era: "18th-19th", field: "Analysis", influence: 1 },
+            { id: 6, name: "Euclid", era: "Ancient", field: "Geometry", influence: 8 },
+            { id: 7, name: "Carl Gauss", era: "18th-19th", field: "All", influence: 10 },
+            { id: 8, name: "Archimedes", era: "Ancient", field: "Geometry", influence: 10 },
+            { id: 9, name: "Rene Descartes", era: "17th", field: "Algebra", influence: 2 },
+            { id: 10, name: "Gerolamo Cardano", era: "16th", field: "Algebra", influence: 3 },
+            { id: 11, name: "Adrien-Marie Legendre", era: "18th-19th", field: "Number Theory", influence: 0 },
+            { id: 12, name: "Pythagoras", era: "Ancient", field: "Geometry", influence: 3 },
+            { id: 13, name: "Gaspard Monge", era: "18th-19th", field: "Geometry", influence: 0 },
+            { id: 14, name: "Jean d'Alembert", era: "18th", field: "Analysis", influence: 0 },
+            { id: 15, name: "Augustin Cauchy", era: "19th", field: "Analysis", influence: 9 },
+            { id: 16, name: "Joseph Fourier", era: "18th-19th", field: "Analysis", influence: 0 },
+            { id: 17, name: "Pierre Fermat", era: "17th", field: "Number Theory", influence: 13 },
+            { id: 18, name: "John Napier", era: "16th-17th", field: "Logarithms", influence: 0 },
+            { id: 19, name: "Blaise Pascal", era: "17th", field: "Probability", influence: 10 },
+            { id: 20, name: "Apollonius", era: "Ancient", field: "Geometry", influence: 0 },
+            { id: 21, name: "Leonardo Fibonacci", era: "Medieval", field: "Number Theory", influence: 30 },
+            { id: 22, name: "François Viete", era: "16th-17th", field: "Algebra", influence: 48 },
+            { id: 23, name: "Ptolemy", era: "Ancient", field: "Astronomy", influence: 0 },
+            { id: 24, name: "Christiaan Huygens", era: "17th", field: "Physics", influence: 0 },
+            { id: 25, name: "Regiomontanus", era: "15th", field: "Trigonometry", influence: 0 },
+            { id: 26, name: "Diophantus", era: "Ancient", field: "Algebra", influence: 38 },
+            { id: 27, name: "Colin Maclaurin", era: "18th", field: "Calculus", influence: 0 },
+            { id: 28, name: "Jacob Bernoulli", era: "17th-18th", field: "Calculus", influence: 53 },
+            { id: 29, name: "Pappus", era: "Ancient", field: "Geometry", influence: 0 },
+            { id: 30, name: "Bonaventura Cavalieri", era: "17th", field: "Geometry", influence: 0 },
+            { id: 31, name: "Carl Jacobi", era: "19th", field: "Analysis", influence: 18 },
+            { id: 32, name: "Johann Bernoulli", era: "17th-18th", field: "Calculus", influence: 0 },
+            { id: 33, name: "John Wallis", era: "17th", field: "Calculus", influence: 0 },
+            { id: 34, name: "William Hamilton", era: "19th", field: "Algebra", influence: 39 },
+            { id: 35, name: "Niccolò Tartaglia", era: "16th", field: "Algebra", influence: 0 },
+            { id: 36, name: "Heron", era: "Ancient", field: "Geometry", influence: 0 },
+            { id: 37, name: "Jean-Victor Poncelet", era: "19th", field: "Geometry", influence: 51 },
+            { id: 38, name: "Bernhard Riemann", era: "19th", field: "Analysis", influence: 21 },
+            { id: 39, name: "Siméon Poisson", era: "18th-19th", field: "Analysis", influence: 0 },
+            { id: 40, name: "Niels Abel", era: "19th", field: "Algebra", influence: 18 },
+            { id: 41, name: "Michel Chasles", era: "19th", field: "Geometry", influence: 0 },
+            { id: 42, name: "Luigi Cremona", era: "19th", field: "Geometry", influence: 0 },
+            { id: 43, name: "Gilles Roberval", era: "17th", field: "Calculus", influence: 0 },
+            { id: 44, name: "Roger Boscovich", era: "18th", field: "Physics", influence: 0 },
+            { id: 45, name: "Galileo Galilei", era: "16th-17th", field: "Physics", influence: 37 },
+            { id: 46, name: "Alexis Clairaut", era: "18th", field: "Analysis", influence: 46 },
+            { id: 47, name: "Johann Lambert", era: "18th", field: "Geometry", influence: 49 },
+            { id: 48, name: "Isaac Barrow", era: "17th", field: "Calculus", influence: 0 },
+            { id: 49, name: "Jacques Strum", era: "19th", field: "Algebra", influence: 0 },
+            { id: 50, name: "Simon Stevin", era: "16th-17th", field: "Decimal System", influence: 0 },
+            { id: 51, name: "Augustus de Morgan", era: "19th", field: "Logic", influence: 0 },
+            { id: 52, name: "Brook Taylor", era: "18th", field: "Analysis", influence: 0 },
+            { id: 53, name: "Johannes Kepler", era: "16th-17th", field: "Astronomy", influence: 33 },
+            { id: 54, name: "Daniel Bernoulli", era: "18th", field: "Physics", influence: 0 },
+            { id: 55, name: "Girard Desargues", era: "17th", field: "Geometry", influence: 0 },
+            { id: 56, name: "Henri Briggs", era: "16th-17th", field: "Logarithms", influence: 0 },
+            { id: 57, name: "James Sylvester", era: "19th", field: "Algebra", influence: 0 },
+            { id: 58, name: "Lazare Carnot", era: "18th-19th", field: "Geometry", influence: 0 },
+            { id: 59, name: "Pierre Maupertuis", era: "18th", field: "Physics", influence: 0 },
+            { id: 60, name: "Charles Babbage", era: "19th", field: "Computing", influence: 0 },
+            { id: 61, name: "Charles Hermite", era: "19th", field: "Number Theory", influence: 52 },
+            { id: 62, name: "Thales", era: "Ancient", field: "Geometry", influence: 0 },
+            { id: 63, name: "Henry Smith", era: "19th", field: "Number Theory", influence: 0 },
+            { id: 64, name: "Sofia Kovalevskaya", era: "19th", field: "Analysis", influence: 0 },
+            { id: 65, name: "Luca Pacioli", era: "15th-16th", field: "Accounting", influence: 0 },
+            { id: 66, name: "Hippocrates", era: "Ancient", field: "Geometry", influence: 35 },
+            { id: 67, name: "Gerbert", era: "10th", field: "Arithmetic", influence: 0 },
+            { id: 68, name: "Alfred Clebsch", era: "19th", field: "Algebra", influence: 0 },
+            { id: 69, name: "Julius Plucker", era: "19th", field: "Geometry", influence: 0 },
+            { id: 70, name: "Hermann Grassmann", era: "19th", field: "Algebra", influence: 0 },
+            { id: 71, name: "Peter Dirichlet", era: "19th", field: "Number Theory", influence: 27 },
+            { id: 72, name: "Arthur Cayley", era: "19th", field: "Algebra", influence: 27 },
+            { id: 73, name: "Muhammed al-Khwārizmi", era: "9th", field: "Algebra", influence: 31 },
+            { id: 74, name: "Roger Cotes", era: "18th", field: "Analysis", influence: 0 },
+            { id: 75, name: "Abraham De Moivre", era: "17th-18th", field: "Probability", influence: 0 },
+            { id: 76, name: "George Boole", era: "19th", field: "Logic", influence: 54 },
+            { id: 77, name: "Karl Weierstrass", era: "19th", field: "Analysis", influence: 26 },
+            { id: 78, name: "Sophus Lie", era: "19th", field: "Algebra", influence: 0 },
+            { id: 79, name: "Nikolai Lobachevsky", era: "19th", field: "Geometry", influence: 45 },
+            { id: 80, name: "Ahmes", era: "Ancient", field: "Arithmetic", influence: 0 },
+            { id: 81, name: "Jean-Charles Borda", era: "18th", field: "Geometry", influence: 0 },
+            { id: 82, name: "Eugenio Beltrami", era: "19th", field: "Geometry", influence: 0 },
+            { id: 83, name: "Paolo Frisi", era: "18th", field: "Physics", influence: 0 },
+            { id: 84, name: "Evariste Galois", era: "19th", field: "Algebra", influence: 23 },
+            { id: 85, name: "Evangelista Torricelli", era: "17th", field: "Physics", influence: 0 },
+            { id: 86, name: "Jean-Étienne Montucla", era: "18th", field: "History", influence: 0 },
+            { id: 87, name: "Otto Hesse", era: "19th", field: "Algebra", influence: 0 },
+            { id: 88, name: "Jordanus de Nemore", era: "13th", field: "Mechanics", influence: 0 },
+            { id: 89, name: "Plato", era: "Ancient", field: "Philosophy", influence: 0 },
+            { id: 90, name: "Henri Poincare", era: "19th-20th", field: "Topology", influence: 20 },
+            { id: 91, name: "Jakob Steiner", era: "19th", field: "Geometry", influence: 38 },
+            { id: 92, name: "Edmond Halley", era: "17th-18th", field: "Astronomy", influence: 0 },
+            { id: 93, name: "Andre Ampere", era: "18th-19th", field: "Physics", influence: 0 },
+            { id: 94, name: "Guillaume L'Hospital", era: "17th-18th", field: "Calculus", influence: 0 },
+            { id: 95, name: "William Thomson", era: "19th", field: "Physics", influence: 0 },
+            { id: 96, name: "Boethius", era: "5th-6th", field: "Arithmetic", influence: 0 },
+            { id: 97, name: "Ehrenfried Tschirnhausen", era: "17th-18th", field: "Algebra", influence: 0 },
+            { id: 98, name: "Bhaskara II", era: "12th", field: "Algebra", influence: 0 },
+            { id: 99, name: "Eratosthenes", era: "Ancient", field: "Geometry", influence: 0 },
+            { id: 100, name: "Zeno of Elea", era: "Ancient", field: "Philosophy", influence: 0 }
+        ];
+        // Function to get a random color class
+        function getRandomColor() {
+            const colors = ['blue', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'green', 'teal', 'cyan'];
+            return colors[Math.floor(Math.random() * colors.length)];
+        }
+        // Function to render mathematician cards
+        function renderMathematicians() {
+            const container = document.getElementById('mathematicians-container');
+            container.innerHTML = '';
+            mathematicians.forEach(math => {
+                const color = getRandomColor();
+                const card = document.createElement('div');
+                card.className = 'bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-all card-hover fade-in';
+                card.innerHTML = `
+                    <div class="flex items-center mb-3">
+                        <div class="w-10 h-10 bg-${color}-100 rounded-full flex items-center justify-center text-${color}-600 font-bold mr-3">
+                            ${math.name.charAt(0)}
+                        </div>
+                        <div>
+                            <h3 class="font-medium text-gray-800">${math.name}</h3>
+                            <p class="text-xs text-gray-500">${math.era} century</p>
+                        </div>
+                    </div>
+                    <div class="text-xs text-gray-600 mb-2">${math.field}</div>
+                    <div class="flex justify-between items-center">
+                        <div class="text-xs">
+                            <span class="font-medium text-${color}-600">Influence:</span>
+                            <span> ${math.influence}%</span>
+                        </div>
+                        <button class="text-xs bg-${color}-50 text-${color}-600 hover:bg-${color}-100 px-2 py-1 rounded-full transition-colors">
+                            <i class="fas fa-arrow-right text-xs"></i>
+                        </button>
+                    </div>
+                `;
+                container.appendChild(card);
+            });
+        }
+        // Initialize the page
+        document.addEventListener('DOMContentLoaded', () => {
+            renderMathematicians();
+            // Add animation to cards as they appear
+            const cards = document.querySelectorAll('.fade-in');
+            cards.forEach((card, index) => {
+                card.style.animationDelay = `${index * 0.05}s`;
+            });
+            // Simple search functionality
+            const searchInput = document.querySelector('input[type="text"]');
+            searchInput.addEventListener('input', (e) => {
+                const searchTerm = e.target.value.toLowerCase();
+                const filtered = mathematicians.filter(math =>
+                    math.name.toLowerCase().includes(searchTerm) ||
+                    math.field.toLowerCase().includes(searchTerm) ||
+                    math.era.toLowerCase().includes(searchTerm)
+                );
+                // Re-render with filtered results
+                if (searchTerm.length > 0) {
+                    const container = document.getElementById('mathematicians-container');
+                    container.innerHTML = '';
+                    if (filtered.length === 0) {
+                        container.innerHTML = `
+                            <div class="col-span-full text-center py-12">
+                                <i class="fas fa-search text-4xl text-gray-300 mb-4"></i>
+                                <h3 class="text-lg font-medium text-gray-500">No mathematicians found</h3>
+                                <p class="text-gray-400">Try a different search term</p>
+                            </div>
+                        `;
+                    } else {
+                        filtered.forEach(math => {
+                            const color = getRandomColor();
+                            const card = document.createElement('div');
+                            card.className = 'bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-all card-hover fade-in';
+                            card.innerHTML = `
+                                <div class="flex items-center mb-3">
+                                    <div class="w-10 h-10 bg-${color}-100 rounded-full flex items-center justify-center text-${color}-600 font-bold mr-3">
+                                        ${math.name.charAt(0)}
+                                    </div>
+                                    <div>
+                                        <h3 class="font-medium text-gray-800">${math.name}</h3>
+                                        <p class="text-xs text-gray-500">${math.era} century</p>
+                                    </div>
+                                </div>
+                                <div class="text-xs text-gray-600 mb-2">${math.field}</div>
+                                <div class="flex justify-between items-center">
+                                    <div class="text-xs">
+                                        <span class="font-medium text-${color}-600">Influence:</span>
+                                        <span> ${math.influence}%</span>
+                                    </div>
+                                    <button class="text-xs bg-${color}-50 text-${color}-600 hover:bg-${color}-100 px-2 py-1 rounded-full transition-colors">
+                                        <i class="fas fa-arrow-right text-xs"></i>
+                                    </button>
+                                </div>
+                            `;
+                            container.appendChild(card);
+                        });
+                    }
+                } else {
+                    renderMathematicians();
+                }
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=agentcyone/knowledge-whisper" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>