b1ddb04576
SUMMARY: Implemented Phase 3 Task 3.5: Page Transitions - smooth fade transitions between pages for improved perceived performance and user experience. CHANGES: 1. Created page-transitions.js (new): - PageTransitions class with fade out/in effects - Attaches to all internal links automatically - Excludes external links, downloads, and hash links - Respects Ctrl/Cmd+click for new tab behavior - 300ms transition duration - Console logging for debugging 2. Updated tractatus-theme.css: - Added page transition CSS section - body fade-in/fade-out classes - Respects prefers-reduced-motion for accessibility - Smooth 0.3s opacity transitions 3. Added script to key pages: - public/index.html - public/architecture.html - public/about.html - public/researcher.html - public/leader.html - public/implementer.html 4. Regenerated tractatus-theme.min.css with new transitions FEATURES: ✓ Smooth fade-out when clicking internal links ✓ Fade-in on page load ✓ Maintains navbar/footer during transition ✓ Improves perceived performance ✓ Accessible (respects reduced motion preference) ✓ Doesn't break Ctrl+click or right-click UI_TRANSFORMATION_PROJECT_PLAN.md: ✓ Phase 3 Task 3.5: Page Transitions (COMPLETED) 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
259 lines
15 KiB
HTML
259 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>About | Tractatus AI Safety Framework</title>
|
|
<meta name="description" content="Learn about the Tractatus Framework: our mission, values, team, and commitment to preserving human agency through structural AI safety.">
|
|
<link rel="stylesheet" href="/css/fonts.css">
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
|
|
<style>
|
|
/* Accessibility: Skip link */
|
|
.skip-link { position: absolute; left: -9999px; top: 0; }
|
|
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }
|
|
|
|
/* 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) -->
|
|
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></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 text-tractatus-link">Home</a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li class="text-gray-900 font-medium" aria-current="page">About</li>
|
|
</ol>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<div class="bg-gradient-to-br from-blue-50 to-purple-50 py-20">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center">
|
|
<h1 class="text-5xl font-bold text-gray-900 mb-6" data-i18n="header.title">
|
|
About Tractatus
|
|
</h1>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto" data-i18n="header.subtitle">
|
|
A framework for AI safety through architectural constraints, preserving human agency where it matters most.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mission Section -->
|
|
<main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<section class="mb-16">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="mission.heading">Our Mission</h2>
|
|
<div class="prose prose-lg text-gray-600">
|
|
<p class="mb-6" data-i18n-html="mission.intro">
|
|
The Tractatus Framework exists to address a fundamental problem in AI safety: current approaches rely on training, fine-tuning, and corporate governance—all of which can fail, drift, or be overridden. We propose <strong>safety through architecture</strong>.
|
|
</p>
|
|
<p class="mb-6" data-i18n-html="mission.wittgenstein">
|
|
Inspired by Ludwig Wittgenstein's <em>Tractatus Logico-Philosophicus</em>, our framework recognizes that some domains—values, ethics, cultural context, human agency—cannot be systematized. What cannot be systematized must not be automated. AI systems should have structural constraints that prevent them from crossing these boundaries.
|
|
</p>
|
|
<blockquote class="border-l-4 border-blue-600 pl-6 italic text-gray-700 my-6">
|
|
<span data-i18n-html="mission.quote">"Whereof one cannot speak, thereof one must be silent."</span><br>
|
|
<span data-i18n-html="mission.quote_source">— Ludwig Wittgenstein, <em>Tractatus</em> (§7)</span>
|
|
</blockquote>
|
|
<p class="mb-4" data-i18n-html="mission.applied">
|
|
Applied to AI: <strong>"What cannot be systematized must not be automated."</strong>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Core Values -->
|
|
<section class="mb-16">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="core_values.heading">Core Values</h2>
|
|
<div class="space-y-6">
|
|
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-green-600">
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="core_values.sovereignty_title">Sovereignty</h3>
|
|
<p class="text-gray-600" data-i18n="core_values.sovereignty_desc">
|
|
Individuals and communities must maintain control over decisions affecting their data, privacy, and values. AI systems must preserve human agency, not erode it.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-blue-600">
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="core_values.transparency_title">Transparency</h3>
|
|
<p class="text-gray-600" data-i18n="core_values.transparency_desc">
|
|
All AI decisions must be explainable, auditable, and reversible. No black boxes. Users deserve to understand how and why systems make choices, and have power to override them.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-purple-600">
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="core_values.harmlessness_title">Harmlessness</h3>
|
|
<p class="text-gray-600" data-i18n="core_values.harmlessness_desc">
|
|
AI systems must not cause harm through action or inaction. This includes preventing drift, detecting degradation, and enforcing boundaries against values erosion.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-orange-600">
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="core_values.community_title">Community</h3>
|
|
<p class="text-gray-600" data-i18n="core_values.community_desc">
|
|
AI safety is a collective endeavor. We are committed to open collaboration, knowledge sharing, and empowering communities to shape the AI systems that affect their lives.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 text-center">
|
|
<a href="/about/values.html" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition" data-i18n="core_values.read_values_btn">
|
|
Read Our Complete Values Statement →
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section class="mb-16">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="how_it_works.heading">How It Works</h2>
|
|
<div class="prose prose-lg text-gray-600">
|
|
<p class="mb-6" data-i18n="how_it_works.intro">
|
|
The Tractatus Framework consists of five integrated components that work together to enforce structural safety:
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
|
|
<div class="bg-gray-50 rounded-lg p-6">
|
|
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="how_it_works.classifier_title">InstructionPersistenceClassifier</h3>
|
|
<p class="text-sm text-gray-600" data-i18n="how_it_works.classifier_desc">
|
|
Classifies instructions by quadrant (Strategic, Operational, Tactical, System, Stochastic) and determines persistence level (HIGH/MEDIUM/LOW/VARIABLE).
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-6">
|
|
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="how_it_works.validator_title">CrossReferenceValidator</h3>
|
|
<p class="text-sm text-gray-600" data-i18n="how_it_works.validator_desc">
|
|
Validates AI actions against stored instructions to prevent pattern recognition bias (like the 27027 incident where AI's training patterns immediately overrode user's explicit "port 27027" instruction).
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-6">
|
|
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="how_it_works.boundary_title">BoundaryEnforcer</h3>
|
|
<p class="text-sm text-gray-600" data-i18n="how_it_works.boundary_desc">
|
|
Ensures AI never makes values decisions without human approval. Privacy trade-offs, user agency, cultural context—these require human judgment.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-6">
|
|
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="how_it_works.pressure_title">ContextPressureMonitor</h3>
|
|
<p class="text-sm text-gray-600" data-i18n="how_it_works.pressure_desc">
|
|
Detects when session conditions increase error probability (token pressure, message length, task complexity) and adjusts behavior or suggests handoff.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-6">
|
|
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="how_it_works.metacognitive_title">MetacognitiveVerifier</h3>
|
|
<p class="text-sm text-gray-600" data-i18n="how_it_works.metacognitive_desc">
|
|
AI self-checks complex reasoning before proposing actions. Evaluates alignment, coherence, completeness, safety, and alternatives.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 text-center">
|
|
<a href="/implementer.html" class="inline-block bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-700 transition" data-i18n="how_it_works.read_technical_btn">
|
|
Read Technical Documentation & Implementation Guide →
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Origin Story -->
|
|
<section class="mb-16">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="origin_story.heading">Origin Story</h2>
|
|
<div class="prose prose-lg text-gray-600">
|
|
<p class="mb-6" data-i18n="origin_story.paragraph_1">
|
|
The Tractatus Framework emerged from real-world AI failures experienced during extended Claude Code sessions. The "27027 incident"—where AI's training patterns immediately overrode an explicit instruction (user said "port 27027", AI used "port 27017")—revealed that traditional safety approaches were insufficient. This wasn't forgetting; it was pattern recognition bias autocorrecting the user.
|
|
</p>
|
|
<p class="mb-6" data-i18n="origin_story.paragraph_2">
|
|
After documenting multiple failure modes (pattern recognition bias, values drift, silent degradation), we recognized a pattern: AI systems lacked structural constraints. They could theoretically "learn" safety, but in practice their training patterns overrode explicit instructions, and the problem gets worse as capabilities increase.
|
|
</p>
|
|
<p class="mb-4" data-i18n="origin_story.paragraph_3">
|
|
The solution wasn't better training—it was architecture. Drawing inspiration from Wittgenstein's insight that some things lie beyond the limits of language (and thus systematization), we built a framework that enforces boundaries through structure, not aspiration.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- License & Contribution -->
|
|
<section class="mb-16">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="license.heading">License & Contribution</h2>
|
|
<div class="prose prose-lg text-gray-600">
|
|
<p class="mb-4" data-i18n-html="license.intro">
|
|
The Tractatus Framework is open source under the <strong>Apache License 2.0</strong>. We encourage:
|
|
</p>
|
|
<ul class="mb-6">
|
|
<li data-i18n="license.encouragement_1">Academic research and validation studies</li>
|
|
<li data-i18n="license.encouragement_2">Implementation in production AI systems</li>
|
|
<li data-i18n="license.encouragement_3">Submission of failure case studies</li>
|
|
<li data-i18n="license.encouragement_4">Theoretical extensions and improvements</li>
|
|
<li data-i18n="license.encouragement_5">Community collaboration and knowledge sharing</li>
|
|
</ul>
|
|
<p class="mb-8" data-i18n="license.rationale">
|
|
The framework is intentionally permissive because AI safety benefits from transparency and collective improvement, not proprietary control.
|
|
</p>
|
|
<h3 class="text-xl font-bold text-gray-900 mt-8 mb-4" data-i18n="license.why_apache_title">Why Apache 2.0?</h3>
|
|
<p class="mb-4" data-i18n="license.why_apache_intro">
|
|
We chose Apache 2.0 over MIT because it provides:
|
|
</p>
|
|
<ul class="mb-6">
|
|
<li data-i18n-html="license.patent_protection"><strong>Patent Protection:</strong> Explicit patent grant protects users from patent litigation by contributors</li>
|
|
<li data-i18n-html="license.contributor_clarity"><strong>Contributor Clarity:</strong> Clear terms for how contributions are licensed</li>
|
|
<li data-i18n-html="license.permissive_use"><strong>Permissive Use:</strong> Like MIT, allows commercial use and inclusion in proprietary products</li>
|
|
<li data-i18n-html="license.community_standard"><strong>Community Standard:</strong> Widely used in AI/ML projects (TensorFlow, PyTorch, Apache Spark)</li>
|
|
</ul>
|
|
<p class="mt-4">
|
|
<a href="/LICENSE" class="text-blue-600 hover:text-blue-700 font-medium" data-i18n="license.view_license_link">View full Apache 2.0 License →</a>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- CTA Section -->
|
|
<div class="bg-gradient-to-r from-blue-600 to-purple-600 py-16">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-white">
|
|
<h2 class="text-3xl font-bold mb-4" data-i18n="cta.title">Join the Movement</h2>
|
|
<p class="text-xl mb-8 opacity-90" data-i18n="cta.description">
|
|
Help build AI systems that preserve human agency through architectural guarantees.
|
|
</p>
|
|
<div class="flex justify-center space-x-4">
|
|
<a href="/researcher.html" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition" data-i18n="cta.for_researchers_btn">
|
|
For Researchers
|
|
</a>
|
|
<a href="/implementer.html" class="bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white" data-i18n="cta.for_implementers_btn">
|
|
For Implementers
|
|
</a>
|
|
<a href="/leader.html" class="bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white" data-i18n="cta.for_leaders_btn">
|
|
For Leaders
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer with Te Tiriti Acknowledgment -->
|
|
<!-- Footer -->
|
|
<!-- Internationalization -->
|
|
<script src="/js/i18n-simple.js?v=1760818106"></script>
|
|
<script src="/js/components/language-selector.js?v=1760818106"></script>
|
|
|
|
<!-- Scroll Animations (Phase 3) -->
|
|
<script src="/js/scroll-animations.js"></script>
|
|
<!-- Page Transitions (Phase 3) -->
|
|
<script src="/js/page-transitions.js"></script>
|
|
|
|
|
|
<!-- Footer Component -->
|
|
<script src="/js/components/footer.js"></script>
|
|
|
|
</body>
|
|
</html>
|