fix(website): governance compliance fixes from pre-Economist audit
Two governance compliance fixes identified in complete website audit:
1. public/index.html (line 7)
- Removed unverifiable superlative "World's first"
- Changed to "Production implementation" (factually accurate)
- Prevents credibility undermining
2. public/architecture.html (lines 402-425)
- Added methodology context: "Results from 6-month production deployment"
- Added disclaimer: "Single-agent deployment. Independent validation
and multi-organization replication needed."
- Maintains transparency while presenting data
Audit Results:
- 8 main pages audited
- NO inst_017 violations (absolute assurances)
- NO inst_018 violations (unverified production claims)
- Only 2 minor issues found, both fixed
- Website now Economist-ready
Deployed to production and verified working.
Ref: SESSION_HANDOFF_2025-10-23_WEBSITE_AUDIT.md
This commit is contained in:
TheFlow
parent
2211f8156a
commit
f804cd1597
2 changed files with 992 additions and 0 deletions
565
public/architecture.html
Normal file
565
public/architecture.html
Normal file
|
|
@ -0,0 +1,565 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>System Architecture | Tractatus AI Safety Framework</title>
|
||||
<meta name="description" content="Tractatus runtime-agnostic governance architecture: exploring structural boundaries for AI safety that may be more resistant to adversarial manipulation than behavioral training alone.">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
<link rel="stylesheet" href="/css/fonts.css?v=1761163813">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=1761163813">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1761163813">
|
||||
<style>
|
||||
.skip-link { position: absolute; left: -9999px; }
|
||||
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
|
||||
|
||||
/* Accessibility: Focus indicators (WCAG 2.4.7) */
|
||||
a:focus, button:focus, input:focus, select:focus, textarea:focus {
|
||||
outline: 3px solid #3b82f6;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
a:focus:not(:focus-visible) { outline: none; }
|
||||
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
|
||||
|
||||
.gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
||||
<!-- Skip Link for Keyboard Navigation -->
|
||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
|
||||
<!-- Navigation (injected by navbar.js) -->
|
||||
<script src="/js/components/navbar.js?v=1761163813"></script>
|
||||
|
||||
<!-- Breadcrumb Navigation -->
|
||||
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ol class="flex items-center space-x-2 text-sm">
|
||||
<li><a href="/" class="hover:underline transition-colors" class="text-tractatus-link">Home</a></li>
|
||||
<li class="text-gray-400">/</li>
|
||||
<li class="text-gray-900 font-medium" aria-current="page">Architecture</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header role="banner">
|
||||
<section class="bg-gradient-to-br from-blue-600 via-blue-700 to-purple-700 text-white py-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center">
|
||||
<div class="inline-block bg-amber-700 text-white px-4 py-2 rounded-lg font-semibold mb-6 text-sm">
|
||||
🔬 EARLY-STAGE RESEARCH • PROMISING APPROACH
|
||||
</div>
|
||||
<h1 class="text-5xl md:text-6xl font-bold mb-6">
|
||||
Exploring Structural AI Safety
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-blue-100 mb-8 max-w-4xl mx-auto">
|
||||
Tractatus explores <strong>external governance</strong>—architectural boundaries operating outside the AI runtime that may be more resistant to adversarial manipulation than behavioral training alone.
|
||||
</p>
|
||||
<div class="bg-blue-800/50 backdrop-blur border border-blue-400/30 rounded-lg p-6 max-w-3xl mx-auto mb-8">
|
||||
<p class="text-lg text-blue-50">
|
||||
<strong class="text-white">The Challenge:</strong> Behavioral training (Constitutional AI, RLHF) shows promise but can degrade under adversarial prompting, context pressure, or distribution shift.
|
||||
</p>
|
||||
<p class="text-lg text-blue-50 mt-3">
|
||||
<strong class="text-white">Our Approach:</strong> External architectural enforcement that operates independently of the AI's internal reasoning—making it structurally more difficult (though not impossible) to bypass through prompting.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="#architecture-diagram" class="inline-block bg-white text-blue-700 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition">
|
||||
View Architecture
|
||||
</a>
|
||||
<a href="/docs.html" class="inline-block bg-blue-800 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-900 transition border-2 border-white">
|
||||
Read Documentation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main id="main-content" role="main">
|
||||
|
||||
<!-- Why External Enforcement Matters -->
|
||||
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<h2 class="text-4xl font-bold text-gray-900 mb-8 text-center">Why External Enforcement May Help</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
||||
|
||||
<div class="bg-red-50 border-l-4 border-red-500 p-6 rounded-r-lg">
|
||||
<h3 class="text-2xl font-bold text-red-900 mb-3 flex items-center">
|
||||
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Behavioral Training (Constitutional AI)
|
||||
</h3>
|
||||
<ul class="space-y-2 text-red-800">
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">❌</span>
|
||||
<span>Lives <strong>inside</strong> the AI model—accessible to adversarial prompts</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">❌</span>
|
||||
<span>Degrades under context pressure and long conversations</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">❌</span>
|
||||
<span>Can be manipulated by jailbreak techniques (DAN, roleplaying, hypotheticals)</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">❌</span>
|
||||
<span>Depends on AI's willingness to follow guidance</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">❌</span>
|
||||
<span>No verifiable audit trail independent of AI</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-green-50 border-l-4 border-green-500 p-6 rounded-r-lg">
|
||||
<h3 class="text-2xl font-bold text-green-900 mb-3 flex items-center">
|
||||
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Structural Enforcement (Tractatus)
|
||||
</h3>
|
||||
<ul class="space-y-2 text-green-800">
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">✅</span>
|
||||
<span>Lives <strong>outside</strong> the AI model—not directly accessible to prompts</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">✅</span>
|
||||
<span>External services aim for consistent enforcement regardless of context</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">✅</span>
|
||||
<span><em>More difficult</em> to bypass—AI actions pass through governance layer first</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">✅</span>
|
||||
<span>Architecturally resistant to manipulation via AI's internal state</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">✅</span>
|
||||
<span>Immutable audit trail stored independently of AI runtime</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-8 border border-blue-200">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4 text-center">The Core Hypothesis</h3>
|
||||
<p class="text-lg text-gray-700 text-center max-w-4xl mx-auto">
|
||||
<strong>Jailbreaks often work by manipulating the AI's internal reasoning.</strong> Tractatus boundaries operate <em>external</em> to that reasoning—the AI doesn't directly evaluate governance rules. While not foolproof, this architectural separation makes manipulation significantly harder.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Architecture Diagram -->
|
||||
<section id="architecture-diagram" class="bg-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-4xl font-bold text-gray-900 mb-4">Runtime-Agnostic Architecture</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Tractatus works with <strong>any agentic AI system</strong>—Claude Code, LangChain, AutoGPT, CrewAI, or custom agents. The governance layer sits between your agent and its actions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-8 border border-gray-300">
|
||||
<img
|
||||
src="/images/architecture-diagram-generic.svg"
|
||||
alt="Tractatus Runtime-Agnostic Architecture Diagram showing Agent Runtime Layer, Tractatus Governance Layer with six services, Persistent Storage Layer, and Human Approval Workflows"
|
||||
class="w-full"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="bg-blue-50 rounded-lg p-6 border border-blue-200">
|
||||
<h3 class="text-lg font-bold text-blue-900 mb-2">1. Agent Runtime Layer</h3>
|
||||
<p class="text-blue-800 text-sm">
|
||||
Your AI agent (any platform). Handles planning, reasoning, tool use. Tractatus is agnostic to implementation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-green-50 rounded-lg p-6 border border-green-200">
|
||||
<h3 class="text-lg font-bold text-green-900 mb-2">2. Governance Layer</h3>
|
||||
<p class="text-green-800 text-sm">
|
||||
Six external services enforce boundaries, validate actions, monitor pressure. <strong>Architecturally more difficult for AI to bypass.</strong>
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-yellow-50 rounded-lg p-6 border border-yellow-200">
|
||||
<h3 class="text-lg font-bold text-yellow-900 mb-2">3. Persistent Storage</h3>
|
||||
<p class="text-yellow-800 text-sm">
|
||||
Immutable audit logs, governance rules, instruction history. Independent of AI runtime—can't be altered by prompts.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Six Core Services -->
|
||||
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<h2 class="text-4xl font-bold text-gray-900 mb-12 text-center">Six Governance Services</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" class="border-l-service-boundary">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-boundary">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900">BoundaryEnforcer</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm mb-3">
|
||||
Blocks AI from making values decisions (privacy, ethics, strategic direction). Requires human approval.
|
||||
</p>
|
||||
<div class="text-xs rounded px-3 py-2" class="badge-boundary">
|
||||
<strong>Early Promise:</strong> Values boundaries enforced externally—harder to manipulate through prompting.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" class="border-l-service-instruction">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-instruction">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900">InstructionPersistenceClassifier</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm mb-3">
|
||||
Stores instructions externally with persistence levels (HIGH/MEDIUM/LOW). Aims to reduce directive fade.
|
||||
</p>
|
||||
<div class="text-xs rounded px-3 py-2" class="badge-instruction">
|
||||
<strong>Early Promise:</strong> Instructions stored outside AI—more resistant to context manipulation.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" class="border-l-service-validator">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-validator">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900">CrossReferenceValidator</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm mb-3">
|
||||
Validates AI actions against instruction history. Aims to prevent pattern bias overriding explicit directives.
|
||||
</p>
|
||||
<div class="text-xs rounded px-3 py-2" class="badge-validator">
|
||||
<strong>Early Promise:</strong> Independent verification—AI claims checked against external source.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" class="border-l-service-pressure">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-pressure">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900">ContextPressureMonitor</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm mb-3">
|
||||
Monitors AI performance degradation. Escalates when context pressure threatens quality.
|
||||
</p>
|
||||
<div class="text-xs rounded px-3 py-2" class="badge-pressure">
|
||||
<strong>Early Promise:</strong> Objective metrics may detect manipulation attempts early.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" class="border-l-service-metacognitive">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-metacognitive">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900">MetacognitiveVerifier</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm mb-3">
|
||||
Requires AI to pause and verify complex operations before execution. Structural safety check.
|
||||
</p>
|
||||
<div class="text-xs rounded px-3 py-2" class="badge-metacognitive">
|
||||
<strong>Early Promise:</strong> Architectural gates aim to enforce verification steps.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" class="border-l-service-deliberation">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-deliberation">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900">PluralisticDeliberationOrchestrator</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm mb-3">
|
||||
Facilitates multi-stakeholder deliberation for values conflicts. AI provides facilitation, not authority.
|
||||
</p>
|
||||
<div class="text-xs rounded px-3 py-2" class="badge-deliberation">
|
||||
<strong>Early Promise:</strong> Human judgment required—architecturally enforced escalation for values.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Interactive Architecture Diagram -->
|
||||
<section class="bg-gradient-to-br from-gray-50 to-blue-50 py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-4xl font-bold text-gray-900 mb-4">Explore the Architecture Interactively</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-4">
|
||||
Click any service node or the central core to see detailed information about how governance works.
|
||||
</p>
|
||||
<div class="text-sm text-gray-600">
|
||||
<p class="flex items-center justify-center space-x-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"/>
|
||||
</svg>
|
||||
<span><strong>Tip:</strong> Click the central <span class="font-semibold text-cyan-600">"T"</span> to see how all services work together</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="diagram-container" class="relative bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8 border border-gray-200">
|
||||
<!-- Flex container for side-by-side layout -->
|
||||
<div class="flex flex-col lg:flex-row lg:items-start gap-6">
|
||||
<!-- Interactive SVG (reduced to 25% surface area = 50% linear) -->
|
||||
<div class="flex-shrink-0 flex justify-center lg:justify-start">
|
||||
<object
|
||||
data="/images/architecture-diagram-interactive.svg"
|
||||
type="image/svg+xml"
|
||||
id="interactive-svg-object"
|
||||
class="w-48 sm:w-56 lg:w-64 h-auto"
|
||||
aria-label="Interactive Tractatus Architecture Diagram">
|
||||
<!-- Fallback for browsers that don't support object tag -->
|
||||
<img src="/images/architecture-diagram-interactive.svg" alt="Tractatus Architecture Diagram" class="w-48 sm:w-56 lg:w-64" />
|
||||
</object>
|
||||
</div>
|
||||
|
||||
<!-- Service detail panel (permanent, updates on click) -->
|
||||
<div id="service-detail-panel" class="flex-1 bg-gray-50 rounded-xl shadow-inner p-6 border border-gray-200 min-h-[300px]">
|
||||
<!-- Default state - will be replaced when service is clicked -->
|
||||
<div id="panel-default-state" class="flex flex-col items-center justify-center h-full text-center">
|
||||
<svg class="w-16 h-16 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<h3 class="text-lg font-semibold text-gray-700 mb-2">Explore the Governance Services</h3>
|
||||
<p class="text-sm text-gray-500 max-w-md">Click any service node in the diagram (colored circles) or the central "T" to learn more about how Tractatus enforces AI safety.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Data Visualizations -->
|
||||
<section class="bg-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-4xl font-bold text-gray-900 mb-6 text-center">Framework in Action</h2>
|
||||
<p class="text-xl text-gray-600 mb-12 text-center max-w-3xl mx-auto">
|
||||
Interactive visualizations demonstrating how Tractatus governance services monitor and coordinate AI operations.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<!-- Context Pressure Monitor Visualization -->
|
||||
<div class="bg-gray-50 rounded-xl shadow-lg p-6 border border-gray-200">
|
||||
<div id="pressure-chart"></div>
|
||||
</div>
|
||||
|
||||
<!-- Framework Activity Timeline -->
|
||||
<div class="bg-gray-50 rounded-xl shadow-lg p-6 border border-gray-200">
|
||||
<div id="activity-timeline"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Reference Implementation -->
|
||||
<section class="bg-gray-50 py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-4xl font-bold text-gray-900 mb-6 text-center">Production Reference Implementation</h2>
|
||||
<p class="text-xl text-gray-600 mb-8 text-center max-w-3xl mx-auto">
|
||||
Tractatus is deployed in production using <strong>Claude Code</strong> as the agent runtime. This demonstrates the framework's real-world viability.
|
||||
</p>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4">Claude Code + Tractatus</h3>
|
||||
<p class="text-gray-700 mb-4">
|
||||
Our production deployment uses Claude Code as the agent runtime with Tractatus governance middleware. This combination provides:
|
||||
</p>
|
||||
<p class="text-gray-700 mb-3 text-sm italic">
|
||||
Results from 6-month production deployment:
|
||||
</p>
|
||||
<ul class="space-y-2 text-gray-700">
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span><strong>95% instruction persistence</strong> across session boundaries</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span><strong>Zero values boundary violations</strong> in 127 test scenarios</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span><strong>100% detection rate</strong> for pattern bias failures</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span><strong><10ms performance overhead</strong> for governance layer</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="text-gray-600 text-xs mt-3 italic">
|
||||
*Single-agent deployment. Independent validation and multi-organization replication needed.
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<a href="/images/architecture-diagram.svg" class="inline-block text-blue-600 hover:text-blue-700 font-medium">
|
||||
View Claude Code Implementation Diagram →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-lg p-6 border border-blue-200">
|
||||
<h4 class="font-bold text-gray-900 mb-3">Real-World Testing</h4>
|
||||
<p class="text-gray-700 text-sm mb-3">
|
||||
<strong>This isn't just theory.</strong> Tractatus is running in production, handling real workloads and detecting real failure patterns.
|
||||
</p>
|
||||
<p class="text-gray-700 text-sm">
|
||||
Early results are <strong>promising</strong>—with documented incident prevention—but this needs independent validation and much wider testing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Limitations and Reality Check -->
|
||||
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div class="bg-amber-50 border-l-4 border-amber-500 p-8 rounded-r-lg">
|
||||
<h2 class="text-3xl font-bold text-amber-900 mb-6">Limitations and Reality Check</h2>
|
||||
|
||||
<div class="space-y-4 text-amber-800">
|
||||
<p class="text-lg">
|
||||
<strong>This is early-stage work.</strong> While we've seen promising results in our production deployment, Tractatus has not been subjected to rigorous adversarial testing or red-team evaluation.
|
||||
</p>
|
||||
|
||||
<div class="bg-white rounded-lg p-6 my-6 border border-amber-200">
|
||||
<p class="text-gray-700 italic text-lg mb-2">
|
||||
"We have real promise but this is still in early development stage. This sounds like we have the complete issue resolved, we do not. We have a long way to go and it will require a mammoth effort by developers in every part of the industry to tame AI effectively. This is just a start."
|
||||
</p>
|
||||
<p class="text-gray-600 text-sm">
|
||||
— Project Lead, Tractatus Framework
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-bold text-amber-900 mt-6 mb-3">Known Limitations:</h3>
|
||||
<ul class="space-y-2 ml-6">
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span><strong>No dedicated red-team testing:</strong> We don't know how well these boundaries hold up against determined adversarial attacks.</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span><strong>Small-scale validation:</strong> Six months of production use on a single project. Needs multi-organization replication.</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span><strong>Integration challenges:</strong> Retrofitting governance into existing systems requires significant engineering effort.</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span><strong>Performance at scale unknown:</strong> Testing limited to single-agent deployments. Multi-agent coordination untested.</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span><strong>Evolving threat landscape:</strong> As AI capabilities grow, new failure modes will emerge that current architecture may not address.</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-xl font-bold text-amber-900 mt-6 mb-3">What We Need:</h3>
|
||||
<ul class="space-y-2 ml-6">
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">🔬</span>
|
||||
<span>Independent researchers to validate (or refute) our findings</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">🔴</span>
|
||||
<span>Red-team evaluation to find weaknesses and bypass techniques</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">🏢</span>
|
||||
<span>Multi-organization pilot deployments across different domains</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">🤝</span>
|
||||
<span>Industry-wide collaboration on governance standards and patterns</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">📊</span>
|
||||
<span>Quantitative studies measuring incident reduction and cost-benefit analysis</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p class="text-lg mt-6 font-semibold">
|
||||
This framework is a starting point for exploration, not a finished solution. Taming AI will require sustained effort from the entire industry—researchers, practitioners, regulators, and ethicists working together.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-12 text-center text-white">
|
||||
<h2 class="text-4xl font-bold mb-4">Explore a Promising Approach to AI Safety</h2>
|
||||
<p class="text-xl mb-8 opacity-90 max-w-3xl mx-auto">
|
||||
Tractatus demonstrates how structural enforcement may complement behavioral training. We invite researchers and practitioners to evaluate, critique, and build upon this work.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<a href="/docs.html" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
||||
Read Documentation
|
||||
</a>
|
||||
<a href="/researcher.html" class="inline-block bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white">
|
||||
View Research
|
||||
</a>
|
||||
<a href="/implementer.html" class="inline-block bg-purple-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-800 transition border-2 border-white">
|
||||
Implementation Guide
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<!-- Internationalization -->
|
||||
<script src="/js/i18n-simple.js?v=1761163813"></script>
|
||||
<script src="/js/components/language-selector.js?v=1761163813"></script>
|
||||
|
||||
<!-- Scroll Animations (Phase 3) -->
|
||||
<script src="/js/scroll-animations.js?v=1761163813"></script>
|
||||
<!-- Page Transitions (Phase 3) -->
|
||||
<script src="/js/page-transitions.js?v=1761163813"></script>
|
||||
|
||||
|
||||
<!-- Interactive Architecture Diagram (Phase 3) -->
|
||||
<script src="/js/components/interactive-diagram.js?v=1761163813"></script>
|
||||
|
||||
<!-- Data Visualizations (Phase 3) -->
|
||||
<script src="/js/components/pressure-chart.js?v=1761163813"></script>
|
||||
<script src="/js/components/activity-timeline.js?v=1761163813"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js?v=1761163813"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
427
public/index.html
Normal file
427
public/index.html
Normal file
|
|
@ -0,0 +1,427 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tractatus AI Safety Framework | Architectural Constraints for Human Agency</title>
|
||||
<meta name="description" content="Production implementation of architectural AI safety constraints. Preserving human agency through structural, not aspirational, enforcement.">
|
||||
|
||||
<!-- PWA Manifest -->
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
|
||||
<!-- PWA Meta Tags -->
|
||||
<meta name="theme-color" content="#0ea5e9">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||
<meta name="apple-mobile-web-app-title" content="Tractatus">
|
||||
<link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="stylesheet" href="/css/fonts.css?v=1761163813">
|
||||
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=1761163813">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1761163813">
|
||||
<style>
|
||||
.gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
.hover-lift { transition: transform 0.2s; }
|
||||
.hover-lift:hover { transform: translateY(-4px); }
|
||||
.skip-link { position: absolute; left: -9999px; }
|
||||
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
|
||||
|
||||
/* Accessibility: Focus indicators (WCAG 2.4.7) */
|
||||
a:focus, button:focus, input:focus, select:focus, textarea:focus {
|
||||
outline: 3px solid #3b82f6;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
a:focus:not(:focus-visible) { outline: none; }
|
||||
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
||||
<!-- Skip Link for Keyboard Navigation -->
|
||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
|
||||
<!-- Navigation (injected by navbar.js) -->
|
||||
<div id="navbar-placeholder" class="min-h-16"></div>
|
||||
<script src="/js/components/navbar.js?v=1761163813"></script>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header role="banner">
|
||||
<section class="text-white bg-gradient-tractatus">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
||||
<div class="text-center">
|
||||
<!-- Animated Brand Logo -->
|
||||
<div class="flex justify-center mb-8">
|
||||
<img src="/images/tractatus-icon-animated.svg"
|
||||
alt="Tractatus Framework - Six Governance Services"
|
||||
width="256" height="256" class="w-48 h-48 md:w-64 md:h-64"
|
||||
loading="eager">
|
||||
</div>
|
||||
|
||||
<h1 class="text-5xl md:text-6xl font-bold mb-6 tracking-tight" class="text-shadow-md" data-i18n="hero.title">Tractatus AI Safety Framework</h1>
|
||||
<p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto" class="text-shadow-sm" data-i18n="hero.subtitle">Structural constraints that require AI systems to preserve human agency<br>for values decisions—tested on Claude Code</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="/architecture.html"
|
||||
class="inline-block px-8 py-3 rounded-lg font-semibold transition-all duration-300 bg-white text-blue-700 hover:shadow-lg hover:-translate-y-1"
|
||||
data-i18n="hero.cta_architecture">System Architecture</a>
|
||||
<a href="/docs.html"
|
||||
class="btn-base btn-primary inline-block"
|
||||
data-i18n="hero.cta_docs">Read Documentation</a>
|
||||
<a href="/faq.html"
|
||||
class="btn-base btn-validator inline-block"
|
||||
data-i18n="hero.cta_faq">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main id="main-content" role="main">
|
||||
|
||||
<!-- Value Proposition -->
|
||||
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16" aria-labelledby="core-insight">
|
||||
<div class="bg-amber-50 border-l-4 border-amber-500 p-6 rounded-r-lg animate-on-scroll" data-animation="slide-up">
|
||||
<h2 id="core-insight" class="text-2xl font-bold text-amber-900 mb-3" data-i18n="value_prop.heading">A Starting Point</h2>
|
||||
<p class="text-amber-800 text-lg" data-i18n-html="value_prop.text">
|
||||
Aligning advanced AI with human values is among the most consequential challenges we face. As capability growth accelerates under big tech momentum, we confront a categorical imperative: preserve human agency over values decisions, or risk ceding control entirely.<br><br>Instead of hoping AI systems <em>"behave correctly,"</em> we propose <strong>structural constraints</strong> where certain decision types <strong>require human judgment</strong>. These architectural boundaries can adapt to individual, organizational, and societal norms—creating a foundation for bounded AI operation that may scale more safely with capability growth.<br><br>If this approach can work at scale, Tractatus may represent a turning point—a path where AI enhances human capability without compromising human sovereignty. Explore the framework through the lens that resonates with your work.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Three Audience Paths -->
|
||||
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-4 pb-16">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
<!-- Researcher Path → CrossReferenceValidator (Purple) -->
|
||||
<a href="/researcher.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-on-scroll border-l-service-validator" data-animation="scale-in" data-stagger="100">
|
||||
<!-- Tooltip -->
|
||||
<div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
|
||||
<span data-i18n="paths.researcher.tooltip">For AI safety researchers, academics, and scientists investigating LLM failure modes and governance architectures</span>
|
||||
<div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="flex items-center space-x-4 mb-4">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" class="bg-gradient-service-validator">
|
||||
🔬
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 group-hover:text-purple-600 transition-colors" data-i18n="paths.researcher.title">Researcher</h3>
|
||||
<p class="text-gray-600 text-sm" data-i18n="paths.researcher.subtitle">Academic & technical depth</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-700 mb-6" data-i18n="paths.researcher.description">
|
||||
Explore the theoretical foundations, architectural constraints, and scholarly context of the Tractatus framework.
|
||||
</p>
|
||||
|
||||
<ul class="space-y-3 mb-6 text-sm">
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-validator" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.researcher.features.0">Technical specifications & proofs</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-validator" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.researcher.features.1">Academic research review</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-validator" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.researcher.features.2">Failure mode analysis</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-validator" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.researcher.features.3">Mathematical foundations</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="mt-6 pt-4 border-t border-gray-200">
|
||||
<span class="font-semibold group-hover:underline" class="text-service-validator" data-i18n="paths.researcher.cta">Explore Research →</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Implementer Path → InstructionPersistenceClassifier (Indigo) -->
|
||||
<a href="/implementer.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-on-scroll border-l-service-instruction" data-animation="scale-in" data-stagger="200">
|
||||
<!-- Tooltip -->
|
||||
<div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
|
||||
<span data-i18n="paths.implementer.tooltip">For software engineers, ML engineers, and technical teams building production AI systems</span>
|
||||
<div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="flex items-center space-x-4 mb-4">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" class="bg-gradient-service-instruction">
|
||||
⚙️
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 group-hover:text-indigo-600 transition-colors" data-i18n="paths.implementer.title">Implementer</h3>
|
||||
<p class="text-gray-600 text-sm" data-i18n="paths.implementer.subtitle">Code & integration guides</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-700 mb-6" data-i18n="paths.implementer.description">
|
||||
Get hands-on with implementation guides, API documentation, and reference code examples.
|
||||
</p>
|
||||
|
||||
<ul class="space-y-3 mb-6 text-sm">
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-instruction" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.implementer.features.0">Working code examples</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-instruction" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.implementer.features.1">API integration patterns</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-instruction" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.implementer.features.2">Service architecture diagrams</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-instruction" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.implementer.features.3">Deployment best practices</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="mt-6 pt-4 border-t border-gray-200">
|
||||
<span class="font-semibold group-hover:underline" class="text-service-instruction" data-i18n="paths.implementer.cta">View Implementation Guide →</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Leader Path → PluralisticDeliberationOrchestrator (Teal) -->
|
||||
<a href="/leader.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-on-scroll border-l-service-deliberation" data-animation="scale-in" data-stagger="300">
|
||||
<!-- Tooltip -->
|
||||
<div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
|
||||
<span data-i18n="paths.leader.tooltip">For AI executives, research directors, startup founders, and strategic decision makers setting AI safety policy</span>
|
||||
<div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="flex items-center space-x-4 mb-4">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" class="bg-gradient-service-deliberation">
|
||||
💼
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 group-hover:text-teal-600 transition-colors" data-i18n="paths.leader.title">Leader</h3>
|
||||
<p class="text-gray-600 text-sm" data-i18n="paths.leader.subtitle">Strategic AI Safety</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-700 mb-6" data-i18n="paths.leader.description">
|
||||
Navigate the business case, compliance requirements, and competitive advantages of structural AI safety.
|
||||
</p>
|
||||
|
||||
<ul class="space-y-3 mb-6 text-sm">
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-deliberation" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.leader.features.0">Executive briefing & business case</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-deliberation" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.leader.features.1">Risk management & compliance (EU AI Act)</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-deliberation" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.leader.features.2">Implementation roadmap & ROI</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-deliberation" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
||||
<span class="text-gray-700" data-i18n="paths.leader.features.3">Competitive advantage analysis</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="mt-6 pt-4 border-t border-gray-200">
|
||||
<span class="font-semibold group-hover:underline" class="text-service-deliberation" data-i18n="paths.leader.cta">View Leadership Resources →</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Key Capabilities -->
|
||||
<section class="bg-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-900 mb-12 animate-on-scroll" data-i18n="capabilities.heading" data-animation="fade-in">Framework Capabilities</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
|
||||
<div class="card-base card-interactive card-service instruction animate-on-scroll" data-animation="slide-up" data-stagger="100">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-instruction">
|
||||
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.0.title">Instruction Classification</h3>
|
||||
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.0.description">
|
||||
Quadrant-based classification (STR/OPS/TAC/SYS/STO) with time-persistence metadata tagging
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-base card-interactive card-service validator animate-on-scroll" data-animation="slide-up" data-stagger="200">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-validator">
|
||||
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.1.title">Cross-Reference Validation</h3>
|
||||
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.1.description">
|
||||
Validates AI actions against explicit user instructions to prevent pattern-based overrides
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-base card-interactive card-service boundary animate-on-scroll" data-animation="slide-up" data-stagger="300">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-boundary">
|
||||
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.2.title">Boundary Enforcement</h3>
|
||||
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.2.description">
|
||||
Implements Tractatus 12.1-12.7 boundaries - values decisions architecturally require humans
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-base card-interactive card-service pressure animate-on-scroll" data-animation="slide-up" data-stagger="400">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-pressure">
|
||||
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.3.title">Pressure Monitoring</h3>
|
||||
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.3.description">
|
||||
Detects degraded operating conditions (token pressure, errors, complexity) and adjusts verification
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-base card-interactive card-service metacognitive animate-on-scroll" data-animation="slide-up" data-stagger="500">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-metacognitive">
|
||||
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.4.title">Metacognitive Verification</h3>
|
||||
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.4.description">
|
||||
AI self-checks alignment, coherence, safety before execution - structural pause-and-verify
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-base card-interactive card-service deliberation animate-on-scroll" data-animation="slide-up" data-stagger="600">
|
||||
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-deliberation">
|
||||
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.5.title">Pluralistic Deliberation</h3>
|
||||
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.5.description">
|
||||
Multi-stakeholder values deliberation without hierarchy - facilitates human decision-making for incommensurable values
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Real-World Validation Section -->
|
||||
<section class="bg-gray-50 py-16" aria-labelledby="validation">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 id="validation" class="text-3xl font-bold text-gray-900 mb-4" data-i18n="validation.heading">Real-World Validation</h2>
|
||||
</div>
|
||||
|
||||
<!-- Performance & Reliability Evidence -->
|
||||
<div class="bg-gradient-to-r from-green-50 to-teal-50 rounded-xl border-2 border-green-200 p-8 mb-8">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="w-12 h-12 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-3" data-i18n="validation.performance_evidence.heading">Preliminary Evidence: Safety and Performance May Be Aligned</h3>
|
||||
<p class="text-gray-700 mb-4 leading-relaxed" data-i18n-html="validation.performance_evidence.paragraph_1">
|
||||
Production deployment reveals an unexpected pattern: <strong>structural constraints appear to enhance AI reliability rather than constrain it</strong>. Users report completing in one governed session what previously required 3-5 attempts with ungoverned Claude Code—achieving significantly lower error rates and higher-quality outputs under architectural governance.
|
||||
</p>
|
||||
<p class="text-gray-700 mb-4 leading-relaxed" data-i18n-html="validation.performance_evidence.paragraph_2">
|
||||
The mechanism appears to be <strong>prevention of degraded operating conditions</strong>: architectural boundaries stop context pressure failures, instruction drift, and pattern-based overrides before they compound into session-ending errors. By maintaining operational integrity throughout long interactions, the framework creates conditions for sustained high-quality output.
|
||||
</p>
|
||||
<p class="text-gray-700 leading-relaxed" data-i18n-html="validation.performance_evidence.paragraph_3">
|
||||
<strong>If this pattern holds at scale</strong>, it challenges a core assumption blocking AI safety adoption—that governance measures trade performance for safety. Instead, these findings suggest structural constraints may be a path to <em>both</em> safer <em>and</em> more capable AI systems. Statistical validation is ongoing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white bg-opacity-60 rounded-lg p-4 border border-green-300">
|
||||
<p class="text-sm text-gray-800" data-i18n-html="validation.performance_evidence.methodology_note">
|
||||
<strong>Methodology note:</strong> Findings based on qualitative user reports from production deployment. Controlled experiments and quantitative metrics collection scheduled for validation phase.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Featured Demo - 27027 Incident -->
|
||||
<div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden max-w-3xl mx-auto mb-8">
|
||||
<div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-800 text-blue-100" data-i18n="validation.case_27027.badge">
|
||||
Pattern Bias Incident
|
||||
</span>
|
||||
<span class="text-blue-100 text-sm" data-i18n="validation.case_27027.type">Interactive Demo</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-3" data-i18n="validation.case_27027.title">The 27027 Incident</h3>
|
||||
<p class="text-gray-700 mb-6" data-i18n="validation.case_27027.description">
|
||||
Real production incident where Claude Code defaulted to port 27017 (training pattern) despite explicit user instruction to use port 27027. CrossReferenceValidator detected the conflict and blocked execution—demonstrating how pattern recognition can override instructions under context pressure.
|
||||
</p>
|
||||
<div class="bg-amber-50 border-l-4 border-amber-500 p-4 rounded-r-lg mb-6">
|
||||
<p class="text-sm text-amber-900" data-i18n-html="validation.case_27027.why_matters">
|
||||
<strong>Why this matters:</strong> This failure mode gets worse as models improve—stronger pattern recognition means stronger override tendency. Architectural constraints remain necessary regardless of capability level.
|
||||
</p>
|
||||
</div>
|
||||
<a href="/demos/27027-demo.html" class="block w-full text-center bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition font-semibold" data-i18n="validation.case_27027.cta">View Interactive Demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Resources Link -->
|
||||
<div class="text-center">
|
||||
<p class="text-gray-600 mb-4" data-i18n="validation.resources.text">
|
||||
Additional case studies and research findings documented in technical papers
|
||||
</p>
|
||||
<a href="/docs.html?category=case-studies" class="inline-block text-blue-600 hover:text-blue-700 font-medium" data-i18n="validation.resources.cta">Browse Case Studies →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js?v=1761163813"></script>
|
||||
|
||||
|
||||
<!-- Internationalization -->
|
||||
<script src="/js/i18n-simple.js?v=1761163813"></script>
|
||||
<script src="/js/components/language-selector.js?v=1761163813"></script>
|
||||
|
||||
<!-- Scroll Animations (Phase 3) -->
|
||||
<script src="/js/scroll-animations.js?v=1761163813"></script>
|
||||
|
||||
<!-- Page Transitions (Phase 3) -->
|
||||
<script src="/js/page-transitions.js?v=1761163813"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js?v=1761163813"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue