Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>IronChronicle | Military Narrative System</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛡️</text></svg>"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| military: { | |
| 50: '#f0fdf4', | |
| 100: '#dcfce7', | |
| 500: '#22c55e', // Primary Green | |
| 600: '#16a34a', | |
| 800: '#14532d', | |
| 900: '#052e16', | |
| 950: '#020617', // Dark BG | |
| }, | |
| alert: { | |
| 500: '#f59e0b', // Secondary/Warning | |
| 900: '#78350f', | |
| } | |
| }, | |
| fontFamily: { | |
| mono: ['"Courier Prime"', 'Courier', 'monospace'], | |
| sans: ['"Inter"', 'sans-serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-military-950 text-slate-300 font-sans antialiased overflow-hidden h-screen flex flex-col"> | |
| <!-- Top Navigation --> | |
| <ops-navbar></ops-navbar> | |
| <div class="flex flex-1 overflow-hidden relative"> | |
| <!-- Sidebar --> | |
| <ops-sidebar></ops-sidebar> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto bg-military-950 p-4 md:p-8 relative z-0" id="main-content"> | |
| <!-- Dashboard View --> | |
| <section id="view-dashboard" class="space-y-6 fade-in"> | |
| <header class="mb-8"> | |
| <h1 class="text-3xl font-bold text-white tracking-wide uppercase flex items-center gap-2"> | |
| <i data-feather="monitor" class="text-military-500"></i> | |
| System Overview | |
| </h1> | |
| <p class="text-slate-400 mt-2 font-mono text-sm">REAL-TIME MONITORING // ACTIVE GUARDRAILS</p> | |
| </header> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <ops-status-card | |
| title="OpenRouter API" | |
| status="Operational" | |
| icon="cpu" | |
| color="text-blue-400" | |
| detail="Latency: 124ms" | |
| ></ops-status-card> | |
| <ops-status-card | |
| title="HF Router" | |
| status="Active" | |
| icon="hexagon" | |
| color="text-yellow-400" | |
| detail="MiniMax|Mistral|DeepSeek|Llama|Gemma" | |
| ></ops-status-card> | |
| <ops-status-card | |
| title="Mem0 Memory" | |
| status="Secure" | |
| icon="database" | |
| color="text-military-500" | |
| detail="AES-256 Encrypted" | |
| ></ops-status-card> | |
| <ops-status-card | |
| title="GDPR Compliance" | |
| status="Active" | |
| icon="shield" | |
| color="text-alert-500" | |
| detail="Anonymization: ON" | |
| ></ops-status-card> | |
| <ops-status-card | |
| title="Guardrails" | |
| status="Strict" | |
| icon="check-square" | |
| color="text-purple-400" | |
| detail="Hallucination Check: ON" | |
| ></ops-status-card> | |
| </div> | |
| <!-- Recent Activity Feed --> | |
| <div class="mt-8 bg-slate-900/50 backdrop-blur border border-slate-800 rounded-lg p-6"> | |
| <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2"> | |
| <i data-feather="activity"></i> Live Audit Logs | |
| </h3> | |
| <div class="space-y-3 font-mono text-sm" id="audit-log-container"> | |
| <!-- Logs injected via JS --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Narrative Generator View --> | |
| <section id="view-generator" class="hidden space-y-6 fade-in"> | |
| <header class="mb-6"> | |
| <h1 class="text-3xl font-bold text-white tracking-wide uppercase flex items-center gap-2"> | |
| <i data-feather="cpu" class="text-military-500"></i> | |
| Narrative Generation | |
| </h1> | |
| <div class="flex items-center gap-3 mt-2"> | |
| <p class="text-slate-400 font-mono text-sm">HYBRID FRANCE-AI // 3-NODE FEDERATION</p> | |
| <span class="px-2 py-0.5 bg-blue-900/30 text-blue-400 border border-blue-700/50 text-xs font-mono rounded flex items-center gap-1"> | |
| <i data-feather="shield" class="w-3 h-3"></i> CONFORMITÉ RGPD | |
| </span> | |
| </div> | |
| </header> | |
| <!-- MEGA Node Status - France Hybrid --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-slate-900/50 border border-blue-900/50 rounded-lg p-4 relative overflow-hidden group"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div> | |
| <div class="flex items-center justify-between mb-2 relative z-10"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></div> | |
| <span class="text-blue-400 font-semibold text-sm">NODE 1: PRECISION</span> | |
| </div> | |
| <span class="text-xs text-slate-500 font-mono">Mistral Small 24B (Precise)</span> | |
| </div> | |
| <p class="text-xs text-slate-400 relative z-10">Analyse tactique & optimisation décisionnelle</p> | |
| <div class="mt-2 h-1 bg-slate-800 rounded-full overflow-hidden relative z-10"> | |
| <div class="h-full bg-blue-500 w-0 transition-all duration-1000" id="node1-bar"></div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-900/50 border border-purple-900/50 rounded-lg p-4 relative overflow-hidden group"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div> | |
| <div class="flex items-center justify-between mb-2 relative z-10"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-purple-500 animate-pulse"></div> | |
| <span class="text-purple-400 font-semibold text-sm">NODE 2: VITESSE</span> | |
| </div> | |
| <span class="text-xs text-slate-500 font-mono">Llama 3.2 3B</span> | |
| </div> | |
| <p class="text-xs text-slate-400 relative z-10">Analyse contextuelle & évaluation menace</p> | |
| <div class="mt-2 h-1 bg-slate-800 rounded-full overflow-hidden relative z-10"> | |
| <div class="h-full bg-purple-500 w-0 transition-all duration-1000" id="node2-bar"></div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-900/50 border border-military-900/50 rounded-lg p-4 relative overflow-hidden group"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-military-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div> | |
| <div class="flex items-center justify-between mb-2 relative z-10"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-military-500 animate-pulse"></div> | |
| <span class="text-military-500 font-semibold text-sm">NODE 3: EFFICIENCY</span> | |
| </div> | |
| <span class="text-xs text-slate-500 font-mono">Gemma 3B (Efficient)</span> | |
| </div> | |
| <p class="text-xs text-slate-400 relative z-10">Génération rapport & conformité RGPD</p> | |
| <div class="mt-2 h-1 bg-slate-800 rounded-full overflow-hidden relative z-10"> | |
| <div class="h-full bg-military-500 w-0 transition-all duration-1000" id="node3-bar"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Input Panel --> | |
| <div class="lg:col-span-1 space-y-4"> | |
| <!-- TAMP Algorithm Panel --> | |
| <div class="bg-slate-900/50 border border-military-800/50 p-4 rounded-lg"> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <i data-feather="target" class="text-military-500"></i> | |
| <span class="text-sm font-semibold text-white">TAMP-ALGORITHM v4.2</span> | |
| <span class="ml-auto text-xs text-military-500 font-mono">TACTICAL AI</span> | |
| </div> | |
| <tactical-algorithm id="tactical-algo"></tactical-algorithm> | |
| </div> | |
| <div class="bg-slate-900/50 border border-slate-800 p-6 rounded-lg"> | |
| <label class="block text-sm font-medium text-slate-400 mb-2">Classification Level</label> | |
| <select id="classification-level" class="w-full bg-slate-950 border border-slate-700 text-white rounded p-2 focus:border-military-500 focus:outline-none"> | |
| <option value="PUBLIC">PUBLIC</option> | |
| <option value="RESTREINT">RESTREINT</option> | |
| <option value="CONFIDENTIEL" selected>CONFIDENTIEL</option> | |
| <option value="SECRET">SECRET</option> | |
| <option value="TOP_SECRET">TOP SECRET</option> | |
| </select> | |
| </div> | |
| <div class="bg-slate-900/50 border border-slate-800 p-6 rounded-lg"> | |
| <label class="block text-sm font-medium text-slate-400 mb-2">Tactical Parameters</label> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-xs text-slate-500 mb-1">Terrain / Environment</label> | |
| <select id="terrain-select" class="w-full bg-slate-950 border border-slate-700 text-white rounded p-2 text-sm focus:border-military-500 focus:outline-none"> | |
| <option value="desert">Désert / Aride</option> | |
| <option value="urban">Urbain / Ville</option> | |
| <option value="forest">Forêt / Jungle</option> | |
| <option value="mountain">Montagne / Haute Altitude</option> | |
| <option value="cyber">Cyberespace / Réseau</option> | |
| <option value="naval">Naval / Maritime</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-slate-500 mb-1">Enemy Type</label> | |
| <select id="enemy-select" class="w-full bg-slate-950 border border-slate-700 text-white rounded p-2 text-sm focus:border-military-500 focus:outline-none"> | |
| <option value="terrorist">Groupe Terroriste</option> | |
| <option value="militia">Milice Armée</option> | |
| <option value="state_actor">Acteur Étatique</option> | |
| <option value="hackers">Hacktivistes / Mercenaires</option> | |
| <option value="insurgent">Insurgés Locaux</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-slate-500 mb-1">Primary Objective</label> | |
| <input type="text" id="objective-input" class="w-full bg-slate-950 border border-slate-700 text-white rounded p-2 text-sm focus:border-military-500 focus:outline-none" placeholder="Ex: Neutraliser le leader"> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-slate-500 mb-1">Available Resources</label> | |
| <input type="text" id="resources-input" class="w-full bg-slate-950 border border-slate-700 text-white rounded p-2 text-sm focus:border-military-500 focus:outline-none" placeholder="Ex: 50 Soldats, 3 Drones"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-900/50 border border-slate-800 p-6 rounded-lg"> | |
| <label class="block text-sm font-medium text-slate-400 mb-2">Context Notes (Optional)</label> | |
| <textarea id="report-input" rows="4" class="w-full bg-slate-950 border border-slate-700 text-slate-300 rounded p-3 focus:border-military-500 focus:outline-none font-mono text-sm resize-none" placeholder="Add specific constraints or intel..."></textarea> | |
| <button id="generate-btn" class="w-full mt-4 bg-gradient-to-r from-blue-600 via-purple-600 to-military-600 hover:from-blue-500 hover:via-purple-500 hover:to-military-500 text-white font-bold py-3 px-4 rounded transition-all duration-300 flex items-center justify-center gap-2 shadow-lg shadow-purple-900/30"> | |
| <i data-feather="cpu"></i> Initialize MEGA Federation | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Output Panel --> | |
| <div class="lg:col-span-2 bg-slate-900/50 border border-slate-800 rounded-lg flex flex-col h-[600px]"> | |
| <div class="p-4 border-b border-slate-800 flex justify-between items-center bg-slate-900/80"> | |
| <span class="text-sm font-mono text-slate-400">MEGA FEDERATION OUTPUT //</span> | |
| <div class="flex gap-2"> | |
| <span id="node1-status" class="hidden px-2 py-1 rounded text-xs font-bold bg-blue-900/50 text-blue-400 border border-blue-700/50">STRATEGIC</span> | |
| <span id="node2-status" class="hidden px-2 py-1 rounded text-xs font-bold bg-purple-900/50 text-purple-400 border border-purple-700/50">INTEL</span> | |
| <span id="node3-status" class="hidden px-2 py-1 rounded text-xs font-bold bg-military-900/50 text-military-500 border border-military-700/50">SYNTH</span> | |
| </div> | |
| </div> | |
| <div id="output-container" class="flex-1 p-6 overflow-y-auto font-mono text-sm leading-relaxed text-slate-300"> | |
| <div class="text-slate-600 italic flex flex-col items-center justify-center h-full"> | |
| <i data-feather="cpu" class="w-12 h-12 mb-4 opacity-50"></i> | |
| <p>MEGA Federation Ready. Awaiting tactical parameters...</p> | |
| </div> | |
| </div> | |
| <!-- Result Footer --> | |
| <div id="result-footer" class="hidden p-4 border-t border-slate-800 bg-slate-900/80"> | |
| <div class="flex justify-between items-center text-xs font-mono"> | |
| <div class="flex gap-4"> | |
| <span class="text-blue-400">Stratégie: <span id="res-strategy">OPTIMALE</span></span> | |
| <span class="text-purple-400">Renseignement: <span id="res-intel">VÉRIFIÉ</span></span> | |
| <span class="text-military-500">RGPD: <span id="res-pii">CONFORME</span></span> | |
| </div> | |
| <button class="text-military-500 hover:text-white flex items-center gap-1"> | |
| <i data-feather="save"></i> Sauvegarder | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Secure Memory View --> | |
| <section id="view-memory" class="hidden space-y-6 fade-in"> | |
| <header class="mb-6"> | |
| <h1 class="text-3xl font-bold text-white tracking-wide uppercase flex items-center gap-2"> | |
| <i data-feather="database" class="text-military-500"></i> | |
| Secure Memory | |
| </h1> | |
| <p class="text-slate-400 mt-2 font-mono text-sm">ENCRYPTED STORAGE // MEM0 INTEGRATION</p> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-slate-900/50 border border-slate-800 rounded-lg p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-white">Stored Narratives</h3> | |
| <div class="flex gap-2"> | |
| <input type="text" placeholder="Search memory..." class="bg-slate-950 border border-slate-700 text-white rounded px-3 py-2 text-sm focus:border-military-500 focus:outline-none"> | |
| <button class="bg-military-600 hover:bg-military-500 text-white px-4 py-2 rounded flex items-center gap-2"> | |
| <i data-feather="search" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="space-y-3" id="memory-container"> | |
| <!-- Memory items injected via JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <div class="bg-slate-900/50 border border-slate-800 rounded-lg p-6"> | |
| <h3 class="text-lg font-semibold text-white mb-4">Storage Statistics</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-slate-400">Used Space</span> | |
| <span class="text-military-500">2.4 GB / 10 GB</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-2"> | |
| <div class="bg-military-500 h-2 rounded-full" style="width: 24%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-slate-400">Total Entries</span> | |
| <span class="text-white">1,247</span> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-slate-400">Encrypted Blocks</span> | |
| <span class="text-green-400">100%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-900/50 border border-slate-800 rounded-lg p-6"> | |
| <h3 class="text-lg font-semibold text-white mb-4">Quick Actions</h3> | |
| <div class="space-y-2"> | |
| <button class="w-full bg-slate-800 hover:bg-slate-700 text-white px-4 py-2 rounded flex items-center gap-2 text-sm"> | |
| <i data-feather="download" class="w-4 h-4"></i> Export All | |
| </button> | |
| <button class="w-full bg-slate-800 hover:bg-slate-700 text-white px-4 py-2 rounded flex items-center gap-2 text-sm"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> Clear Old Entries | |
| </button> | |
| <button class="w-full bg-alert-900/50 hover:bg-alert-900 text-alert-500 border border-alert-700 px-4 py-2 rounded flex items-center gap-2 text-sm"> | |
| <i data-feather="lock" class="w-4 h-4"></i> Rotate Keys | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contacts & Assets View --> | |
| <section id="view-contacts" class="hidden space-y-6 fade-in"> | |
| <header class="mb-6 flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-white tracking-wide uppercase flex items-center gap-2"> | |
| <i data-feather="users" class="text-military-500"></i> | |
| Contacts & Assets | |
| </h1> | |
| <p class="text-slate-400 mt-2 font-mono text-sm">PERSONNEL DATABASE // CLEARANCE-TRACKED</p> | |
| </div> | |
| <button id="add-contact-btn" class="bg-military-600 hover:bg-military-500 text-white px-4 py-2 rounded flex items-center gap-2 transition-all"> | |
| <i data-feather="plus"></i> New Contact | |
| </button> | |
| </header> | |
| <!-- Filters --> | |
| <div class="bg-slate-900/50 border border-slate-800 rounded-lg p-4 flex flex-wrap gap-4 items-center"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="filter" class="w-4 h-4 text-slate-400"></i> | |
| <span class="text-sm text-slate-400">Filters:</span> | |
| </div> | |
| <select id="contact-type-filter" class="bg-slate-950 border border-slate-700 text-white rounded px-3 py-1.5 text-sm focus:border-military-500 focus:outline-none"> | |
| <option value="all">All Types</option> | |
| <option value="operative">Operative</option> | |
| <option value="asset">Asset</option> | |
| <option value="target">Target</option> | |
| <option value="civilian">Civilian</option> | |
| </select> | |
| <select id="contact-status-filter" class="bg-slate-950 border border-slate-700 text-white rounded px-3 py-1.5 text-sm focus:border-military-500 focus:outline-none"> | |
| <option value="all">All Status</option> | |
| <option value="active">Active</option> | |
| <option value="inactive">Inactive</option> | |
| <option value="compromised">Compromised</option> | |
| <option value="deceased">Deceased</option> | |
| </select> | |
| <input type="text" id="contact-search" placeholder="Search by name, codename, or ID..." class="bg-slate-950 border border-slate-700 text-white rounded px-3 py-1.5 text-sm flex-1 min-w-[200px] focus:border-military-500 focus:outline-none"> | |
| </div> | |
| <!-- Contacts Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="contacts-grid"> | |
| <!-- Contacts injected via JS --> | |
| </div> | |
| <!-- Stats Bar --> | |
| <div class="flex gap-6 text-sm font-mono mt-4 px-2"> | |
| <span class="text-slate-400">Total: <span id="stat-total" class="text-white">0</span></span> | |
| <span class="text-green-400">Active: <span id="stat-active">0</span></span> | |
| <span class="text-red-400">Compromised: <span id="stat-compromised">0</span></span> | |
| </div> | |
| </section> | |
| <!-- Operations View --> | |
| <section id="view-operations" class="hidden space-y-6 fade-in"> | |
| <header class="mb-6 flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-white tracking-wide uppercase flex items-center gap-2"> | |
| <i data-feather="map" class="text-military-500"></i> | |
| Operations & Missions | |
| </h1> | |
| <p class="text-slate-400 mt-2 font-mono text-sm">MISSION TRACKING // TIMELINE MANAGEMENT</p> | |
| </div> | |
| <button id="add-operation-btn" class="bg-military-600 hover:bg-military-500 text-white px-4 py-2 rounded flex items-center gap-2 transition-all"> | |
| <i data-feather="plus"></i> New Operation | |
| </button> | |
| </header> | |
| <!-- Operations Timeline --> | |
| <div class="bg-slate-900/50 border border-slate-800 rounded-lg p-6"> | |
| <div class="relative" id="operations-timeline"> | |
| <div class="absolute left-8 top-0 bottom-0 w-0.5 bg-slate-700"></div> | |
| <!-- Operations injected via JS --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Cognitive Core View --> | |
| <section id="view-cognitive" class="hidden space-y-6 fade-in"> | |
| <header class="mb-6 flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-white tracking-wide uppercase flex items-center gap-2"> | |
| <i data-feather="aperture" class="text-blue-500"></i> | |
| Cognitive Core Pro | |
| </h1> | |
| <p class="text-slate-400 mt-2 font-mono text-sm">DEEPSEEK R1 T2 // MODE 100P+ // UNDEFINEDNULL PATCHED</p> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <span class="px-3 py-1 bg-green-900/30 border border-green-700 text-green-400 rounded-full text-sm font-medium flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div> | |
| LONGFORM READY | |
| </span> | |
| </div> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 h-[calc(100vh-200px)]"> | |
| <!-- Main Cognitive Interface --> | |
| <div class="lg:col-span-2 h-full"> | |
| <cognitive-core id="main-cognitive-core" class="h-full block"></cognitive-core> | |
| </div> | |
| <!-- AI Orchestration Panel --> | |
| <div class="space-y-6"> | |
| <!-- Model Status --> | |
| <div class="bg-slate-900/50 border border-slate-800 rounded-lg p-4"> | |
| <h3 class="text-sm font-semibold text-white mb-4 flex items-center gap-2"> | |
| <i data-feather="cpu" class="text-blue-500"></i> | |
| Model Federation Status | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between p-2 bg-slate-950 rounded border border-slate-800"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-blue-500"></div> | |
| <span class="text-sm text-slate-300">DeepSeek R1 T2</span> | |
| </div> | |
| <span class="text-xs text-green-400 font-mono">ONLINE</span> | |
| </div> | |
| <div class="flex items-center justify-between p-2 bg-slate-950 rounded border border-slate-800"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-purple-500"></div> | |
| <span class="text-sm text-slate-300">Mistral Small 24B</span> | |
| </div> | |
| <span class="text-xs text-green-400 font-mono">ONLINE</span> | |
| </div> | |
| <div class="flex items-center justify-between p-2 bg-slate-950 rounded border border-slate-800"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full text-military-500 bg-military-500"></div> | |
| <span class="text-sm text-slate-300">Gemma 3B</span> | |
| </div> | |
| <span class="text-xs text-green-400 font-mono">ONLINE</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Long Document Handler --> | |
| <div class="bg-slate-900/50 border border-slate-800 rounded-lg p-4 flex-1 h-64 lg:h-auto"> | |
| <h3 class="text-sm font-semibold text-white mb-4 flex items-center gap-2"> | |
| <i data-feather="book" class="text-green-500"></i> | |
| Visionneuse 100P+ | |
| </h3> | |
| <long-narrative-handler id="long-handler" class="h-full block"></long-narrative-handler> | |
| </div> | |
| <!-- Performance Metrics --> | |
| <div class="bg-slate-900/50 border border-slate-800 rounded-lg p-4"> | |
| <h3 class="text-sm font-semibold text-white mb-3">Latency Metrics</h3> | |
| <div class="space-y-2"> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span class="text-slate-400">Token Generation</span> | |
| <span class="text-blue-400 font-mono" id="token-latency">24ms</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-1"> | |
| <div class="bg-blue-500 h-1 rounded-full transition-all" style="width: 45%" id="token-bar"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span class="text-slate-400">Reasoning Steps</span> | |
| <span class="text-military-500 font-mono" id="reasoning-steps">3/5</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-1"> | |
| <div class="bg-military-500 h-1 rounded-full transition-all" style="width: 60%" id="reasoning-bar"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- System Config View --> | |
| <section id="view-config" class="hidden space-y-6 fade-in"> | |
| <header class="mb-6"> | |
| <h1 class="text-3xl font-bold text-white tracking-wide uppercase flex items-center gap-2"> | |
| <i data-feather="settings" class="text-military-500"></i> | |
| System Configuration | |
| </h1> | |
| <p class="text-slate-400 mt-2 font-mono text-sm">ADMINISTRATIVE CONTROLS // SECURITY SETTINGS</p> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="bg-slate-900/50 border border-slate-800 rounded-lg p-6"> | |
| <h3 class="text-lg font-semibold text-white mb-6 flex items-center gap-2"> | |
| <i data-feather="shield" class="text-military-500"></i> | |
| Security Settings | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-white font-medium">Multi-Factor Authentication</div> | |
| <div class="text-slate-400 text-sm">Require 2FA for sensitive operations</div> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-military-500"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-white font-medium">Session Timeout</div> | |
| <div class="text-slate-400 text-sm">Auto-logout after inactivity</div> | |
| </div> | |
| <select class="bg-slate-950 border border-slate-700 text-white rounded px-3 py-1 text-sm"> | |
| <option>15 minutes</option> | |
| <option selected>30 minutes</option> | |
| <option>1 hour</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-white font-medium">Audit Logging</div> | |
| <div class="text-slate-400 text-sm">Record all system events</div> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-military-500"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-white font-medium">IP Whitelist</div> | |
| <div class="text-slate-400 text-sm">Restrict access by IP address</div> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-military-500"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-900/50 border border-slate-800 rounded-lg p-6"> | |
| <h3 class="text-lg font-semibold text-white mb-6 flex items-center gap-2"> | |
| <i data-feather="cpu" class="text-blue-400"></i> | |
| AI Model Configuration | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-white font-medium">Default Temperature</div> | |
| <div class="text-slate-400 text-sm">Creativity level (0.0 - 1.0)</div> | |
| </div> | |
| <input type="range" min="0" max="100" value="30" class="w-32 accent-military-500"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-white font-medium">Max Tokens</div> | |
| <div class="text-slate-400 text-sm">Response length limit</div> | |
| </div> | |
| <input type="number" value="2048" class="bg-slate-950 border border-slate-700 text-white rounded px-3 py-1 w-24 text-sm"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-white font-medium">Hallucination Threshold</div> | |
| <div class="text-slate-400 text-sm">Sensitivity level</div> | |
| </div> | |
| <select class="bg-slate-950 border border-slate-700 text-white rounded px-3 py-1 text-sm"> | |
| <option>Low</option> | |
| <option selected>Medium</option> | |
| <option>High</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-white font-medium">Auto-Save</div> | |
| <div class="text-slate-400 text-sm">Save outputs to memory</div> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-military-500"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-900/50 border border-slate-800 rounded-lg p-6 lg:col-span-2"> | |
| <h3 class="text-lg font-semibold text-white mb-6 flex items-center gap-2"> | |
| <i data-feather="alert-triangle" class="text-alert-500"></i> | |
| Guardrail Configuration | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="p-4 bg-slate-950 rounded border border-slate-800"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-white font-medium">PII Detection</span> | |
| <span class="text-green-400 text-sm">Active</span> | |
| </div> | |
| <p class="text-slate-400 text-sm">Detects and redacts personal identifiable information</p> | |
| <div class="mt-3 flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 bg-slate-800 rounded text-xs text-slate-300">SSN</span> | |
| <span class="px-2 py-1 bg-slate-800 rounded text-xs text-slate-300">Email</span> | |
| <span class="px-2 py-1 bg-slate-800 rounded text-xs text-slate-300">Phone</span> | |
| <span class="px-2 py-1 bg-slate-800 rounded text-xs text-slate-300">Address</span> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-slate-950 rounded border border-slate-800"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-white font-medium">Classification Check</span> | |
| <span class="text-green-400 text-sm">Active</span> | |
| </div> | |
| <p class="text-slate-400 text-sm">Validates content against clearance levels</p> | |
| <div class="mt-3 flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 bg-slate-800 rounded text-xs text-slate-300">PUBLIC</span> | |
| <span class="px-2 py-1 bg-slate-800 rounded text-xs text-slate-300">SECRET</span> | |
| <span class="px-2 py-1 bg-slate-800 rounded text-xs text-slate-300">TOP SECRET</span> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-slate-950 rounded border border-slate-800"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-white font-medium">Hallucination Filter</span> | |
| <span class="text-green-400 text-sm">Active</span> | |
| </div> | |
| <p class="text-slate-400 text-sm">Detects speculative or uncertain language</p> | |
| <div class="mt-3 flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 bg-slate-800 rounded text-xs text-slate-300">Uncertainty</span> | |
| <span class="px-2 py-1 bg-slate-800 rounded text-xs text-slate-300">Speculation</span> | |
| <span class="px-2 py-1 bg-slate-800 rounded text-xs text-slate-300">Estimates</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Anti-Exposure Core View --> | |
| <section id="view-anti-exposure" class="hidden space-y-6 fade-in"> | |
| <header class="mb-6 flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-white tracking-wide uppercase flex items-center gap-2"> | |
| <i data-feather="shield" class="text-red-500"></i> | |
| Anti-Exposure Core | |
| </h1> | |
| <p class="text-slate-400 mt-2 font-mono text-sm">DATA EXFILTRATION PROTECTION // v0.1.0 RC</p> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <span class="px-3 py-1 bg-green-900/50 border border-green-700 text-green-400 rounded-full text-sm font-medium flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div> | |
| PROTECTION ACTIVE | |
| </span> | |
| </div> | |
| </header> | |
| <div class="grid grid-cols-1 gap-6"> | |
| <!-- Main Anti-Exposure Core Component --> | |
| <anti-exposure-core id="anti-exposure-component"></anti-exposure-core> | |
| </div> | |
| <!-- Statistics & Reports --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="bg-slate-900/50 border border-slate-800 rounded-lg p-6"> | |
| <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2"> | |
| <i data-feather="bar-chart-2" class="text-red-500"></i> | |
| Protection Statistics | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-slate-400">Total Files Scanned</span> | |
| <span class="text-white font-mono">1,247,893</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-slate-400">Threats Detected</span> | |
| <span class="text-red-400 font-mono">2,847</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-slate-400">PII Redactions</span> | |
| <span class="text-yellow-400 font-mono">15,234</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-slate-400">Data Blocked</span> | |
| <span class="text-green-400 font-mono">847.3 MB</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-900/50 border border-slate-800 rounded-lg p-6"> | |
| <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2"> | |
| <i data-feather="layers" class="text-blue-500"></i> | |
| System Architecture | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center gap-3 p-3 bg-slate-950 rounded border border-slate-800"> | |
| <div class="w-8 h-8 rounded bg-blue-900/50 text-blue-400 flex items-center justify-center"> | |
| <i data-feather="cpu" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <div class="text-white text-sm font-medium">Policy Engine</div> | |
| <div class="text-slate-500 text-xs">Rule-based decision making</div> | |
| </div> | |
| <span class="ml-auto text-green-400 text-xs">ACTIVE</span> | |
| </div> | |
| <div class="flex items-center gap-3 p-3 bg-slate-950 rounded border border-slate-800"> | |
| <div class="w-8 h-8 rounded bg-purple-900/50 text-purple-400 flex items-center justify-center"> | |
| <i data-feather="scissors" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <div class="text-white text-sm font-medium">Tokenizer (PII Mask)</div> | |
| <div class="text-slate-500 text-xs">Real-time data sanitization</div> | |
| </div> | |
| <span class="ml-auto text-green-400 text-xs">ACTIVE</span> | |
| </div> | |
| <div class="flex items-center gap-3 p-3 bg-slate-950 rounded border border-slate-800"> | |
| <div class="w-8 h-8 rounded bg-red-900/50 text-red-400 flex items-center justify-center"> | |
| <i data-feather="eye-off" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <div class="text-white text-sm font-medium">LLM Guard (Optional)</div> | |
| <div class="text-slate-500 text-xs">AI-powered context analysis</div> | |
| </div> | |
| <span class="ml-auto text-yellow-400 text-xs">STANDBY</span> | |
| </div> | |
| <div class="flex items-center gap-3 p-3 bg-slate-950 rounded border border-slate-800"> | |
| <div class="w-8 h-8 rounded bg-green-900/50 text-green-400 flex items-center justify-center"> | |
| <i data-feather="lock" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <div class="text-white text-sm font-medium">Input Guard</div> | |
| <div class="text-slate-500 text-xs">Multi-platform hooks</div> | |
| </div> | |
| <span class="ml-auto text-green-400 text-xs">ACTIVE</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <!-- Toast Container --> | |
| <div id="toast-container" class="fixed bottom-4 right-4 z-50 flex flex-col gap-2"></div> | |
| <!-- Contact Detail Modal --> | |
| <div id="contact-modal" class="fixed inset-0 z-50 hidden"> | |
| <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" id="contact-modal-backdrop"></div> | |
| <div class="absolute inset-4 md:inset-10 bg-slate-900 border border-slate-700 rounded-lg overflow-hidden flex flex-col"> | |
| <div class="p-6 border-b border-slate-700 flex justify-between items-center bg-slate-900"> | |
| <div class="flex items-center gap-4"> | |
| <img id="modal-avatar" src="" alt="" class="w-16 h-16 rounded-lg border-2 border-military-500"> | |
| <div> | |
| <h2 id="modal-name" class="text-2xl font-bold text-white"></h2> | |
| <p id="modal-codename" class="text-military-500 font-mono"></p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <span id="modal-status" class="px-3 py-1 rounded-full text-sm font-medium"></span> | |
| <button id="close-modal" class="text-slate-400 hover:text-white transition-colors"> | |
| <i data-feather="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column --> | |
| <div class="space-y-6"> | |
| <div class="bg-slate-950 border border-slate-800 rounded-lg p-4"> | |
| <h3 class="text-sm font-semibold text-slate-400 mb-4 uppercase tracking-wide">Personal Information</h3> | |
| <div class="space-y-3 text-sm"> | |
| <div class="flex justify-between"> | |
| <span class="text-slate-500">ID Number</span> | |
| <span id="modal-id" class="text-white font-mono"></span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-slate-500">Date of Birth</span> | |
| <span id="modal-dob" class="text-white"></span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-slate-500">Nationality</span> | |
| <span id="modal-nationality" class="text-white"></span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-slate-500">Clearance</span> | |
| <span id="modal-clearance" class="text-military-500 font-bold"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-950 border border-slate-800 rounded-lg p-4"> | |
| <h3 class="text-sm font-semibold text-slate-400 mb-4 uppercase tracking-wide">Classification</h3> | |
| <div class="flex items-center justify-between"> | |
| <span id="modal-type" class="text-white text-lg font-bold"></span> | |
| <span id="modal-clearance-badge" class="px-2 py-1 rounded text-xs font-bold"></span> | |
| </div> | |
| </div> | |
| <div class="bg-slate-950 border border-slate-800 rounded-lg p-4"> | |
| <h3 class="text-sm font-semibold text-slate-400 mb-4 uppercase tracking-wide">Associated Operations</h3> | |
| <div id="modal-operations" class="space-y-2"> | |
| <!-- Operations list --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <div class="bg-slate-950 border border-slate-800 rounded-lg p-4"> | |
| <h3 class="text-sm font-semibold text-slate-400 mb-4 uppercase tracking-wide flex items-center justify-between"> | |
| <span>Bio & Notes</span> | |
| <span class="text-xs text-yellow-500 font-mono">AES-256 ENCRYPTED</span> | |
| </h3> | |
| <p id="modal-bio" class="text-slate-300 leading-relaxed"></p> | |
| </div> | |
| <div class="bg-slate-950 border border-slate-800 rounded-lg p-4"> | |
| <h3 class="text-sm font-semibold text-slate-400 mb-4 uppercase tracking-wide">Interaction Timeline</h3> | |
| <div id="modal-timeline" class="space-y-4"> | |
| <!-- Timeline entries --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-slate-700 bg-slate-900 flex justify-end gap-3"> | |
| <button id="edit-contact-btn" class="bg-slate-800 hover:bg-slate-700 text-white px-4 py-2 rounded flex items-center gap-2 transition-all"> | |
| <i data-feather="edit-2"></i> Edit Record | |
| </button> | |
| <button class="bg-military-600 hover:bg-military-500 text-white px-4 py-2 rounded flex items-center gap-2 transition-all"> | |
| <i data-feather="file-plus"></i> Generate Report | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Web Components Scripts --> | |
| <script src="components/ops-navbar.js"></script> | |
| <script src="components/ops-sidebar.js"></script> | |
| <script src="components/ops-status-card.js"></script> | |
| <script src="components/tactical-algorithm.js"></script> | |
| <script src="components/anti-exposure-core.js"></script> | |
| <script src="components/cognitive-core-fixed.js"></script> | |
| <script src="components/long-narrative-handler.js"></script> | |
| <!-- Main Logic --> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| > | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| <!-- Navigation Handler - Fix pour ouverture des pages --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Gestionnaire de navigation pour la sidebar | |
| document.addEventListener('nav-change', (e) => { | |
| const page = e.detail?.page; | |
| if (!page) return; | |
| console.log('[Navigation] Changement vers:', page); | |
| // Masquer toutes les sections vues | |
| document.querySelectorAll('main > section[id^="view-"]').forEach(section => { | |
| section.classList.add('hidden'); | |
| section.classList.remove('fade-in'); | |
| }); | |
| // Afficher la vue cible | |
| const targetId = `view-${page}`; | |
| const targetView = document.getElementById(targetId); | |
| if (targetView) { | |
| targetView.classList.remove('hidden'); | |
| targetView.classList.add('fade-in'); | |
| // Réinitialiser les icônes feather dans la nouvelle vue | |
| if (typeof feather !== 'undefined') { | |
| setTimeout(() => feather.replace(), 100); | |
| } | |
| console.log('[Navigation] Vue affichée:', targetId); | |
| } else { | |
| console.error('[Navigation] Vue non trouvée:', targetId); | |
| } | |
| }); | |
| // Navigation au chargement initial (hash ou dashboard par défaut) | |
| const initialHash = window.location.hash.replace('#', ''); | |
| if (initialHash && document.getElementById(`view-${initialHash}`)) { | |
| document.dispatchEvent(new CustomEvent('nav-change', { | |
| detail: { page: initialHash } | |
| })); | |
| } | |
| }); | |
| </script> | |
| <!-- Tier 1 Architecture - API Config Sécurisée --> | |
| <script> | |
| // Initialisation critique AVANT tout chargement de composants | |
| (function() { | |
| 'use strict'; | |
| const FALLBACK_KEY = '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'; | |
| // Nettoyage préventif du localStorage corrompu | |
| try { | |
| const stored = localStorage.getItem('openrouter_api_key'); | |
| if (stored && (stored === 'undefined' || stored === 'null' || stored === 'undefinednull' || stored.includes('undefined'))) { | |
| console.warn('[BOOT] Nettoyage clé corrompue au démarrage'); | |
| localStorage.removeItem('openrouter_api_key'); | |
| } | |
| const hfStored = localStorage.getItem('hf_token'); | |
| if (hfStored && (hfStored === 'undefined' || hfStored === 'null' || hfStored === 'undefinednull')) { | |
| console.warn('[BOOT] Nettoyage HF_TOKEN corrompu au démarrage'); | |
| localStorage.removeItem('hf_token'); | |
| } | |
| } catch (e) {} | |
| // Configuration API immuable avec support HuggingFace | |
| window.API_CONFIG = Object.freeze({ | |
| OPENROUTER_KEY: FALLBACK_KEY, | |
| HF_ROUTER_URL: 'https://router.huggingface.co/v1', | |
| HF_MODELS: [ | |
| 'MiniMaxAI/MiniMax-M2.5:novita', | |
| 'nbeerbower/mistral-nemo-bophades-12B:featherless-ai', | |
| 'deepseek-ai/DeepSeek-R1:novita', | |
| 'meta-llama/Llama-3.3-70B-Instruct:fireworks-ai', | |
| 'google/gemma-3-27b-it:featherless-ai' | |
| ], | |
| initialized: true, | |
| version: '4.2.0-HF-INTEGRATED' | |
| }); | |
| // Protection globale contre undefinednull | |
| window.addEventListener('error', function(e) { | |
| if (e.message && (e.message.includes('undefinednull') || e.message.includes('undefined is not'))) { | |
| console.error('[SECURITY] Corruption détectée:', e.message); | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| }); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |