Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MatVerse 6.0 - Modular Architecture Dashboard</title> | |
| <script src="https://cdn.jsdelivr.net/npm/react@18.0.0/umd/react.development.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/react-dom@18.0.0/umd/react-dom.development.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.js"></script> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; } | |
| .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } | |
| .card-hover { transition: all 0.3s ease; } | |
| .card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.2); } | |
| .timeline-line { background: linear-gradient(to bottom, #667eea, #764ba2); } | |
| .status-badge { padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; } | |
| .status-stable { background-color: #10b981; color: white; } | |
| .status-validated { background-color: #3b82f6; color: white; } | |
| .status-in-progress { background-color: #f59e0b; color: white; } | |
| .status-active { background-color: #10b981; color: white; } | |
| .status-deploying { background-color: #3b82f6; color: white; } | |
| .status-integrating { background-color: #f59e0b; color: white; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const { useState, useEffect } = React; | |
| const ModuleCard = ({ module }) => { | |
| const getStatusClass = (status) => { | |
| switch(status.toLowerCase()) { | |
| case 'estável': return 'status-stable'; | |
| case 'validado': return 'status-validated'; | |
| case 'mvpmvp': return 'status-in-progress'; | |
| case 'vivo': return 'status-active'; | |
| case 'ativo': return 'status-active'; | |
| case 'em deploy': return 'status-deploying'; | |
| case 'em integração': return 'status-integrating'; | |
| default: return 'status-stable'; | |
| } | |
| }; | |
| return ( | |
| <div className="bg-white rounded-lg shadow-lg p-6 card-hover"> | |
| <div className="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 className="text-xl font-bold text-gray-800">{module.name}</h3> | |
| <span className={`status-badge ${getStatusClass(module.status)}`}>{module.status}</span> | |
| </div> | |
| <div className="text-sm text-gray-500"> | |
| <i className="fas fa-code-branch mr-1"></i> | |
| {module.repository} | |
| </div> | |
| </div> | |
| <div className="space-y-2 text-sm"> | |
| <div className="flex"> | |
| <span className="font-semibold text-gray-600 w-24">Função:</span> | |
| <span className="text-gray-700">{module.function}</span> | |
| </div> | |
| <div className="flex"> | |
| <span className="font-semibold text-gray-600 w-24">Stack:</span> | |
| <span className="text-gray-700">{module.stack}</span> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| const TimelineItem = ({ quarter, year, milestone, details }) => ( | |
| <div className="flex mb-6"> | |
| <div className="flex flex-col items-center mr-4"> | |
| <div className="w-4 h-4 bg-purple-600 rounded-full"></div> | |
| <div className="w-0.5 h-full bg-purple-300 mt-2"></div> | |
| </div> | |
| <div className="flex-1"> | |
| <div className="bg-white rounded-lg p-4 shadow-md"> | |
| <div className="flex justify-between items-center mb-2"> | |
| <h4 className="font-bold text-purple-600">{quarter} {year}</h4> | |
| <span className="text-sm text-gray-500">Meta</span> | |
| </div> | |
| <h5 className="font-semibold text-gray-800 mb-1">{milestone}</h5> | |
| <p className="text-sm text-gray-600">{details}</p> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| const App = () => { | |
| const [activeTab, setActiveTab] = useState('overview'); | |
| const modules = [ | |
| { | |
| name: "matverse-core", | |
| function: "Núcleo de coerência semântica (Ψ)", | |
| stack: "FastAPI + NumPy", | |
| status: "estável", | |
| repository: "MatVerse-Hub/matverse-core" | |
| }, | |
| { | |
| name: "Enterprise", | |
| function: "Governança Ω-GATE + QCVaR", | |
| stack: "Python + Pytest", | |
| status: "validado", | |
| repository: "Symbios-Matverse/Enterprise" | |
| }, | |
| { | |
| name: "Pose", | |
| function: "Proof of Semantic Existence (PoSE-PQC)", | |
| stack: "Python puro + HMAC", | |
| status: "v1.0", | |
| repository: "MatVerse-py/Pose" | |
| }, | |
| { | |
| name: "SymbiOS", | |
| function: "Sistema operacional simbiótico Web4", | |
| stack: "FastAPI + JS", | |
| status: "MVPMVP", | |
| repository: "MatVerse-Hub/SymbiOS" | |
| }, | |
| { | |
| name: "Organismo", | |
| function: "Kernel Σ–Ω vivo + dashboard Gradio", | |
| stack: "Python + React/Three.js", | |
| status: "vivo", | |
| repository: "MatVerse-py/organismo" | |
| }, | |
| { | |
| name: "MMCC", | |
| function: "Agregador Planetário (Ω_global)", | |
| stack: "Python CLI", | |
| status: "validado", | |
| repository: "Symbios-Matverse/pro-science-MMCC" | |
| }, | |
| { | |
| name: "ODA-QF", | |
| function: "Organismo Digital Autônomo Quântico-Fractal", | |
| stack: "Python + Solidity", | |
| status: "validado", | |
| repository: "MatVerse-py/ODA-QF" | |
| }, | |
| { | |
| name: "SuperKernel-6.0", | |
| function: "Hamiltoniano + homologia persistente", | |
| stack: "Python + Solidity", | |
| status: "ativo", | |
| repository: "MatVerse-py/SuperKernel-6.0" | |
| }, | |
| { | |
| name: "Superkernel", | |
| function: "Oráculo Polygon + PoSE on-chain", | |
| stack: "Python + Solidity", | |
| status: "em deploy", | |
| repository: "MatVerse-Hub/Superkernel" | |
| }, | |
| { | |
| name: "Captals", | |
| function: "Ecossistema DeFi antifrágil (Ω-Funds, Ω-Bonds)", | |
| stack: "FastAPI + Hardhat + React", | |
| status: "em integração", | |
| repository: "MatVerse-Hub/Captals" | |
| }, | |
| { | |
| name: "PrimeFramework", | |
| function: "quântico-semântico (QIG-Σ)", | |
| stack: "Python + Qiskit", | |
| status: "pronto", | |
| repository: "MatVerse-Hub/Prime" | |
| } | |
| ]; | |
| const timeline = [ | |
| { | |
| quarter: "Q1", | |
| year: "2026", | |
| milestone: "Publicar whitepapers CVaR–POVM e ΦΩ-Dynamics", | |
| details: "Prime + Core.Eng" | |
| }, | |
| { | |
| quarter: "Q2", | |
| year: "2026", | |
| milestone: "Deploy PoLE-M (Polygon)", | |
| details: "Superkernel" | |
| }, | |
| { | |
| quarter: "Q3", | |
| year: "2026", | |
| milestone: "Dashboard global de métricas (Grafana/Poetry)", | |
| details: "MMCC + Organismo" | |
| }, | |
| { | |
| quarter: "Q4", | |
| year: "2026", | |
| milestone: "DAO científica antifrágil (PoLE-DAO)", | |
| details: "Enterprise + Pose" | |
| }, | |
| { | |
| quarter: "2027", | |
| year: "", | |
| milestone: "SymbiOS v6.0 Planetary Release", | |
| details: "integração completa Web4" | |
| } | |
| ]; | |
| return ( | |
| <div className="min-h-screen bg-gray-50"> | |
| {/* Header */} | |
| <header className="gradient-bg text-white"> | |
| <div className="container mx-auto px-4 py-6"> | |
| <div className="flex justify-between items-center"> | |
| <div> | |
| <h1 className="text-3xl font-bold">MatVerse 6.0</h1> | |
| <p className="text-purple-200">Arquitetura Modular Digital Antifrágil</p> | |
| </div> | |
| <div className="text-sm"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" className="text-white hover:underline"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| {/* Navigation Tabs */} | |
| <div className="bg-white shadow-sm"> | |
| <div className="container mx-auto px-4"> | |
| <div className="flex space-x-8"> | |
| {['overview', 'modules', 'governance', 'roadmap', 'protocol'].map((tab) => ( | |
| <button | |
| key={tab} | |
| onClick={() => setActiveTab(tab)} | |
| className={`py-4 px-2 border-b-2 font-medium text-sm ${ | |
| activeTab === tab | |
| ? 'border-purple-600 text-purple-600' | |
| : 'border-transparent text-gray-500 hover:text-gray-700' | |
| }`} | |
| > | |
| {tab.charAt(0).toUpperCase() + tab.slice(1)} | |
| </button> | |
| ))} | |
| </div> | |
| </div> | |
| </div> | |
| {/* Main Content */} | |
| <div className="container mx-auto px-4 py-8"> | |
| {activeTab === 'overview' && ( | |
| <div> | |
| <div className="bg-white rounded-lg shadow-lg p-8 mb-8"> | |
| <h2 className="text-2xl font-bold mb-4">Visão Geral do Ecossistema</h2> | |
| <p className="text-gray-600 mb-6"> | |
| Cada repositório atua como um "órgão" do Organismo Digital Antifrágil, | |
| trabalhando em conjunto através do protocolo Ω-GATE para criar um sistema | |
| modular, escalável e governado por métricas de coerência semântica. | |
| </p> | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div className="text-center p-6 bg-purple-50 rounded-lg"> | |
| <div className="text-3xl font-bold text-purple-600 mb-2">11</div> | |
| <div className="text-gray-700">Módulos Ativos</div> | |
| </div> | |
| <div className="text-center p-6 bg-blue-50 rounded-lg"> | |
| <div className="text-3xl font-bold text-blue-600 mb-2">Ω-GATE</div> | |
| <div className="text-gray-700">Protocolo de Governança</div> | |
| </div> | |
| <div className="text-center p-6 bg-green-50 rounded-lg"> | |
| <div className="text-3xl font-bold text-green-600 mb-2">2026-2027</div> | |
| <div className="text-gray-700">Roadmap Modular</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="bg-white rounded-lg shadow-lg p-8"> | |
| <h3 className="text-xl font-bold mb-4">Módulos Principais</h3> | |
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| {modules.map((module, index) => ( | |
| <ModuleCard key={index} module={module} /> | |
| ))} | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| {activeTab === 'modules' && ( | |
| <div> | |
| <h2 className="text-2xl font-bold mb-6">Estrutura Padrão de Módulos</h2> | |
| <div className="bg-white rounded-lg shadow-lg p-6 mb-6"> | |
| <div className="mb-4"> | |
| <h3 className="text-lg font-semibold mb-2">Estrutura de Diretório</h3> | |
| <pre className="bg-gray-100 p-4 rounded text-sm overflow-x-auto"> | |
| {`matverse-module-template/ | |
| ├── .github/ | |
| │ └── workflows/ | |
| │ └── ci.yml | |
| ├── src/ | |
| │ └── matverse_[nome]/ | |
| │ ├── __init__.py | |
| │ ├── core.py | |
| │ ├── api.py | |
| │ └── pose.py | |
| ├── tests/ | |
| │ ├── test_core.py | |
| │ └── test_api.py | |
| ├── docs/ | |
| │ ├── architecture.md | |
| │ └── evidence_note.json | |
| ├── evidence/ | |
| │ └── 00000001.json | |
| ├── pyproject.toml | |
| ├── requirements.txt | |
| ├── Dockerfile | |
| ├── LICENSE | |
| ├── README.md | |
| └── Ω_state.log`} | |
| </pre> | |
| </div> | |
| <div> | |
| <h3 className="text-lg font-semibold mb-2">pyproject.toml</h3> | |
| <pre className="bg-gray-100 p-4 rounded text-sm overflow-x-auto"> | |
| {`[project] | |
| name = "matverse-[nome-do-módulo]" | |
| version = "6.0.0" | |
| description = "Módulo oficial MatVerse — Governado por Ω-GATE" | |
| authors = [{name = "Mateus Áreas", email = "mateus@matverse.os"}] | |
| license = {text = "MIT"} | |
| readme = "README.md" | |
| requires-python = ">=3.10" | |
| [dependencies] | |
| fastapi>=0.104.0 | |
| uvicorn[standard]>=0.24.0 | |
| pydantic>=2.5.0 | |
| numpy>=1.24.0 | |
| requests>=2.31.0 | |
| [project.optional-dependencies] | |
| dev = ["pytest>=7.4", "ruff", "mypy", "httpx"] | |
| pose = ["cryptography>=41.0"]`} | |
| </pre> | |
| </div> | |
| </div> | |
| <div className="bg-white rounded-lg shadow-lg p-6"> | |
| <h3 className="text-lg font-semibold mb-4">Endpoints Ω-GATE Bridge v2</h3> | |
| <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div className="border-l-4 border-purple-500 pl-4"> | |
| <div className="font-semibold">GET /health</div> | |
| <div className="text-sm text-gray-600">Status do órgão</div> | |
| </div> | |
| <div className="border-l-4 border-purple-500 pl-4"> | |
| <div className="font-semibold">GET /metrics</div> | |
| <div className="text-sm text-gray-600">Métricas locais (Ψ, Θ, CVaR)</div> | |
| </div> | |
| <div className="border-l-4 border-purple-500 pl-4"> | |
| <div className="font-semibold">POST /omega</div> | |
| <div className="text-sm text-gray-600">Cálculo do Ω local</div> | |
| </div> | |
| <div className="border-l-4 border-purple-500 pl-4"> | |
| <div className="font-semibold">POST /pose</div> | |
| <div className="text-sm text-gray-600">Geração de evidência</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| {activeTab === 'governance' && ( | |
| <div> | |
| <div className="bg-white rounded-lg shadow-lg p-8 mb-6"> | |
| <h2 className="text-2xl font-bold mb-6">Governança e Identidade</h2> | |
| <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 className="text-lg font-semibold mb-4">Fórmula de Governança Ω-GATE</h3> | |
| <div className="bg-gray-50 p-4 rounded-lg"> | |
| <p className="font-mono text-lg mb-2">Ω = 0.40·Ψ + 0.30·Θ + 0.20·(1-CVaR) + 0.05·PoLE + 0.05·COG</p> | |
| <p className="text-sm text-gray-600">Constante Civilizacional (λ) = 0.27</p> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 className="text-lg font-semibold mb-4">Princípio de Antifragilidade</h3> | |
| <div className="bg-green-50 p-4 rounded-lg"> | |
| <p className="font-mono text-lg">dΩ/dt ≥ 0</p> | |
| <p className="text-sm text-gray-600">Crescimento contínuo da coerência semântica</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="bg-white rounded-lg shadow-lg p-6"> | |
| <h3 className="text-lg font-semibold mb-4">Arquivos Obrigatórios</h3> | |
| <div className="space-y-3"> | |
| <div className="flex items-center"> | |
| <i className="fas fa-file-alt text-purple-600 mr-3"></i> | |
| <div> | |
| <div className="font-medium">README.md</div> | |
| <div className="text-sm text-gray-600">Contém governança, licença e documentação</div> | |
| </div> | |
| </div> | |
| <div className="flex items-center"> | |
| <i className="fas fa-file-code text-blue-600 mr-3"></i> | |
| <div> | |
| <div className="font-medium">evidence_note.json</div> | |
| <div className="text-sm text-gray-600">Para PoSE auditável</div> | |
| </div> | |
| </div> | |
| <div className="flex items-center"> | |
| <i className="fas fa-file-text text-green-600 mr-3"></i> | |
| <div> | |
| <div className="font-medium">Ω_state.log</div> | |
| <div className="text-sm text-gray-600">Histórico temporal de Ω</div> | |
| </div> | |
| </div> | |
| <div className="flex items-center"> | |
| <i className="fas fa-key text-red-600 mr-3"></i> | |
| <div> | |
| <div className="font-medium">pose_signature.key</div> | |
| <div className="text-sm text-gray-600">Assinatura PQC</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| {activeTab === 'roadmap' && ( | |
| <div> | |
| <div className="bg-white rounded-lg shadow-lg p-8"> | |
| <h2 className="text-2xl font-bold mb-8">Roadmap Modular 2026-2027</h2> | |
| <div className="relative"> | |
| <div className="timeline-line absolute left-4 top-0 bottom-0 w-0.5"></div> | |
| {timeline.map((item, index) => ( | |
| <TimelineItem key={index} {...item} /> | |
| ))} | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| {activeTab === 'protocol' && ( | |
| <div> | |
| <div className="bg-white rounded-lg shadow-lg p-8 mb-6"> | |
| <h2 className="text-2xl font-bold mb-6">Protocolo de Comunicação Intermodular</h2> | |
| <div className="bg-gray-900 text-green-400 p-6 rounded-lg font-mono text-sm overflow-x-auto"> | |
| {`{ | |
| "psi": 0.91, | |
| "theta": 0.88, | |
| "cvar": 0.07, | |
| "omega_local": 0.923, | |
| "pole": 0.95, | |
| "timestamp": 1733702000, | |
| "signature": "POSE_PQC_SIGNATURE" | |
| }`} | |
| </div> | |
| </div> | |
| <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div className="bg-white rounded-lg shadow-lg p-6"> | |
| <h3 className="text-lg font-semibold mb-4">Assinatura</h3> | |
| <p className="text-gray-600 mb-4"> | |
| Gerada por Pose.PoSEPQC para garantir autenticidade e integridade dos dados. | |
| </p> | |
| <div className="bg-blue-50 p-4 rounded-lg"> | |
| <div className="flex items-center"> | |
| <i className="fas fa-shield-alt text-blue-600 mr-2"></i> | |
| <span className="text-sm font-medium">Validação via Enterprise.validate_governance_barrier</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="bg-white rounded-lg shadow-lg p-6"> | |
| <h3 className="text-lg font-semibold mb-4">Auditoria</h3> | |
| <p className="text-gray-600 mb-4"> | |
| Armazenada pelo ODA-QF em Prometheus/Grafana para monitoramento contínuo. | |
| </p> | |
| <div className="bg-green-50 p-4 rounded-lg"> | |
| <div className="flex items-center"> | |
| <i className="fas fa-chart-line text-green-600 mr-2"></i> | |
| <span className="text-sm font-medium">Monitoramento em tempo real</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| {/* Footer */} | |
| <footer className="bg-gray-800 text-white py-8 mt-12"> | |
| <div className="container mx-auto px-4 text-center"> | |
| <p className="mb-2">MatVerse 6.0 - Arquitetura Modular Digital Antifrágil</p> | |
| <p className="text-gray-400 text-sm">© 2024 MatVerse. Todos os direitos reservados.</p> | |
| </div> | |
| </footer> | |
| </div> | |
| ); | |
| }; | |
| ReactDOM.render(<App />, document.getElementById('root')); | |
| </script> | |
| </body> | |
| </html> |