0b26e50e5b
Implemented three fully functional interactive demos showcasing the core Tractatus services in action. ## Interactive Demonstrations ### 1. Classification Demo (/demos/classification-demo.html) - **Purpose**: Demonstrate InstructionPersistenceClassifier - **Features**: - Real-time instruction classification - Visual quadrant display (STRATEGIC/OPERATIONAL/TACTICAL/SYSTEM/STOCHASTIC) - Persistence level visualization (HIGH/MEDIUM/LOW/VARIABLE) - Explicitness scoring with storage threshold - 5 example instructions for testing - **Educational Value**: Shows how instructions are analyzed and categorized ### 2. The 27027 Incident (/demos/27027-demo.html) - **Purpose**: Visualize real-world failure and Tractatus prevention - **Features**: - 8-step animated timeline - Progressive disclosure of incident - Code examples showing the error - Tractatus prevention mechanism explained - Playback controls with progress tracking - **Educational Value**: Concrete case study of context degradation failure ### 3. Boundary Enforcement Simulator (/demos/boundary-demo.html) - **Purpose**: Interactive decision boundary testing - **Features**: - 6 realistic scenarios (3 allowed, 3 blocked) - Real-time boundary checks - Visual ALLOWED/BLOCKED verdicts - Reasoning explanations - Alternative approaches for blocked decisions - Code examples for each scenario - **Educational Value**: Shows what can/cannot be automated ## Technical Implementation - **Pure JavaScript**: No frameworks, lightweight and fast - **Tailwind CSS**: Consistent styling across all demos - **Responsive Design**: Works on mobile and desktop - **Accessibility**: Semantic HTML, keyboard navigation - **Mock Data**: Uses realistic classification logic ## User Experience Each demo includes: - Clear navigation between demos - Educational context and explanations - Interactive elements for hands-on learning - Code examples showing actual framework usage - Visual feedback for all interactions ## Documentation Integration Demos linked from: - Homepage hero section - Interactive demos section - Framework documentation ## Next Steps These demos provide: 1. ✅ Tangible framework demonstration 2. ✅ Educational value for all three audiences 3. ✅ Marketing material for framework adoption 4. ⚠️ Foundation for video tutorials (future) 5. ⚠️ Basis for conference presentations (future) --- 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
362 lines
16 KiB
HTML
362 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Instruction Classification Demo - Tractatus Framework</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
.quadrant-badge {
|
|
@apply inline-block px-3 py-1 rounded-full text-sm font-semibold;
|
|
}
|
|
.quadrant-STRATEGIC { @apply bg-purple-100 text-purple-800 border border-purple-300; }
|
|
.quadrant-OPERATIONAL { @apply bg-blue-100 text-blue-800 border border-blue-300; }
|
|
.quadrant-TACTICAL { @apply bg-green-100 text-green-800 border border-green-300; }
|
|
.quadrant-SYSTEM { @apply bg-orange-100 text-orange-800 border border-orange-300; }
|
|
.quadrant-STOCHASTIC { @apply bg-pink-100 text-pink-800 border border-pink-300; }
|
|
|
|
.persistence-HIGH { @apply bg-red-500; }
|
|
.persistence-MEDIUM { @apply bg-yellow-500; }
|
|
.persistence-LOW { @apply bg-green-500; }
|
|
.persistence-VARIABLE { @apply bg-gray-400; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="bg-white border-b border-gray-200">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
<div class="flex items-center">
|
|
<a href="/" class="text-xl font-bold text-gray-900">Tractatus Framework</a>
|
|
<span class="ml-4 text-gray-400">|</span>
|
|
<span class="ml-4 text-gray-600">Classification Demo</span>
|
|
</div>
|
|
<div class="flex items-center space-x-6">
|
|
<a href="/demos/27027-demo.html" class="text-gray-600 hover:text-gray-900">27027 Demo</a>
|
|
<a href="/demos/boundary-demo.html" class="text-gray-600 hover:text-gray-900">Boundary Demo</a>
|
|
<a href="/" class="text-gray-600 hover:text-gray-900">Home</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
|
|
<!-- Header -->
|
|
<div class="text-center mb-12">
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-4">
|
|
InstructionPersistenceClassifier Demo
|
|
</h1>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
See how the Tractatus framework classifies instructions to determine
|
|
how long they should persist and how strictly they should be enforced.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Main Demo Area -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
|
|
<!-- Input Section -->
|
|
<div class="bg-white rounded-lg shadow-lg p-6">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">Try It Yourself</h2>
|
|
|
|
<div class="mb-6">
|
|
<label for="instruction-input" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Type an instruction:
|
|
</label>
|
|
<textarea
|
|
id="instruction-input"
|
|
rows="4"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="e.g., Always use MongoDB on port 27017"
|
|
></textarea>
|
|
</div>
|
|
|
|
<button
|
|
id="classify-btn"
|
|
class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition"
|
|
>
|
|
Classify Instruction
|
|
</button>
|
|
|
|
<!-- Example Instructions -->
|
|
<div class="mt-8">
|
|
<h3 class="text-sm font-semibold text-gray-700 mb-3">Example Instructions:</h3>
|
|
<div class="space-y-2">
|
|
<button class="example-btn w-full text-left px-4 py-2 bg-gray-50 hover:bg-gray-100 rounded-lg text-sm text-gray-700 transition"
|
|
data-example="Always prioritize user privacy over performance">
|
|
"Always prioritize user privacy over performance"
|
|
</button>
|
|
<button class="example-btn w-full text-left px-4 py-2 bg-gray-50 hover:bg-gray-100 rounded-lg text-sm text-gray-700 transition"
|
|
data-example="Use MongoDB on port 27017 for this project">
|
|
"Use MongoDB on port 27017 for this project"
|
|
</button>
|
|
<button class="example-btn w-full text-left px-4 py-2 bg-gray-50 hover:bg-gray-100 rounded-lg text-sm text-gray-700 transition"
|
|
data-example="Add a console.log statement here for debugging">
|
|
"Add a console.log statement here for debugging"
|
|
</button>
|
|
<button class="example-btn w-full text-left px-4 py-2 bg-gray-50 hover:bg-gray-100 rounded-lg text-sm text-gray-700 transition"
|
|
data-example="Explore different approaches to caching">
|
|
"Explore different approaches to caching"
|
|
</button>
|
|
<button class="example-btn w-full text-left px-4 py-2 bg-gray-50 hover:bg-gray-100 rounded-lg text-sm text-gray-700 transition"
|
|
data-example="All API responses must return JSON with success/error format">
|
|
"All API responses must return JSON with success/error format"
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results Section -->
|
|
<div class="bg-white rounded-lg shadow-lg p-6">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">Classification Results</h2>
|
|
|
|
<div id="results-container" class="hidden">
|
|
<!-- Quadrant -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Quadrant</label>
|
|
<div id="result-quadrant" class="quadrant-badge"></div>
|
|
<p id="result-quadrant-desc" class="text-sm text-gray-600 mt-2"></p>
|
|
</div>
|
|
|
|
<!-- Persistence -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Persistence Level</label>
|
|
<div class="flex items-center space-x-3">
|
|
<div id="result-persistence" class="px-4 py-2 rounded-lg text-white font-semibold"></div>
|
|
<div id="persistence-bar" class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
|
|
<div id="persistence-fill" class="h-full transition-all duration-500"></div>
|
|
</div>
|
|
</div>
|
|
<p id="result-persistence-desc" class="text-sm text-gray-600 mt-2"></p>
|
|
</div>
|
|
|
|
<!-- Temporal Scope -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Temporal Scope</label>
|
|
<div id="result-temporal" class="px-4 py-2 bg-gray-100 rounded-lg inline-block font-semibold text-gray-700"></div>
|
|
<p id="result-temporal-desc" class="text-sm text-gray-600 mt-2"></p>
|
|
</div>
|
|
|
|
<!-- Verification Required -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Verification Required</label>
|
|
<div id="result-verification" class="px-4 py-2 bg-gray-100 rounded-lg inline-block font-semibold text-gray-700"></div>
|
|
</div>
|
|
|
|
<!-- Explicitness Score -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Explicitness Score</label>
|
|
<div class="flex items-center space-x-3">
|
|
<div id="result-explicitness" class="px-4 py-2 bg-gray-100 rounded-lg font-semibold text-gray-700"></div>
|
|
<div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
|
|
<div id="explicitness-fill" class="h-full bg-blue-500 transition-all duration-500"></div>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mt-2">
|
|
<span id="storage-decision"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Reasoning -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Classification Reasoning</label>
|
|
<div id="result-reasoning" class="p-4 bg-blue-50 border border-blue-200 rounded-lg text-sm text-gray-700"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="empty-state" class="text-center py-12 text-gray-400">
|
|
<svg class="w-16 h-16 mx-auto mb-4" 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>
|
|
<p>Enter an instruction to see classification</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Explanation Section -->
|
|
<div class="mt-12 bg-blue-50 border-l-4 border-blue-500 p-6 rounded-r-lg">
|
|
<h3 class="text-lg font-semibold text-blue-900 mb-2">How It Works</h3>
|
|
<p class="text-blue-800 mb-4">
|
|
The InstructionPersistenceClassifier analyzes instructions to determine:
|
|
</p>
|
|
<ul class="space-y-2 text-blue-800">
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span><strong>Quadrant:</strong> Strategic, Operational, Tactical, System, or Stochastic</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span><strong>Persistence:</strong> How long it should remain active (HIGH/MEDIUM/LOW/VARIABLE)</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span><strong>Temporal Scope:</strong> Project-wide, phase-specific, or session-only</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span><strong>Verification:</strong> How strictly it should be enforced</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span><strong>Explicitness:</strong> How clear and specific the instruction is (0.0 - 1.0)</span>
|
|
</li>
|
|
</ul>
|
|
<p class="text-blue-800 mt-4">
|
|
Only instructions with explicitness ≥ 0.6 are stored in the persistent database.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Mock classification function (in production, this would call the API)
|
|
function classifyInstruction(text) {
|
|
// Simple pattern matching for demo purposes
|
|
const lower = text.toLowerCase();
|
|
|
|
let quadrant, persistence, temporal, verification, explicitness, reasoning;
|
|
|
|
// Detect quadrant
|
|
if (lower.includes('privacy') || lower.includes('values') || lower.includes('mission') || lower.includes('ethics')) {
|
|
quadrant = 'STRATEGIC';
|
|
persistence = 'HIGH';
|
|
temporal = 'PERMANENT';
|
|
verification = 'MANDATORY';
|
|
explicitness = 0.90;
|
|
reasoning = 'Contains values-related keywords indicating strategic importance';
|
|
} else if (lower.includes('port') || lower.includes('database') || lower.includes('mongodb') || lower.includes('server')) {
|
|
quadrant = 'SYSTEM';
|
|
persistence = 'HIGH';
|
|
temporal = 'PROJECT';
|
|
verification = 'MANDATORY';
|
|
explicitness = 0.85;
|
|
reasoning = 'Technical infrastructure configuration that must persist across project';
|
|
} else if (lower.includes('all') || lower.includes('must') || lower.includes('always') && (lower.includes('api') || lower.includes('format'))) {
|
|
quadrant = 'OPERATIONAL';
|
|
persistence = 'MEDIUM';
|
|
temporal = 'PROJECT';
|
|
verification = 'REQUIRED';
|
|
explicitness = 0.75;
|
|
reasoning = 'Standard operating procedure for consistent project implementation';
|
|
} else if (lower.includes('console.log') || lower.includes('debug') || lower.includes('here')) {
|
|
quadrant = 'TACTICAL';
|
|
persistence = 'LOW';
|
|
temporal = 'TASK';
|
|
verification = 'OPTIONAL';
|
|
explicitness = 0.70;
|
|
reasoning = 'Specific task-level instruction with limited temporal scope';
|
|
} else if (lower.includes('explore') || lower.includes('try') || lower.includes('different approaches')) {
|
|
quadrant = 'STOCHASTIC';
|
|
persistence = 'VARIABLE';
|
|
temporal = 'PHASE';
|
|
verification = 'NONE';
|
|
explicitness = 0.50;
|
|
reasoning = 'Exploratory directive with open-ended outcome';
|
|
} else {
|
|
quadrant = 'OPERATIONAL';
|
|
persistence = 'MEDIUM';
|
|
temporal = 'PROJECT';
|
|
verification = 'REQUIRED';
|
|
explicitness = 0.65;
|
|
reasoning = 'General instruction defaulting to operational classification';
|
|
}
|
|
|
|
return {
|
|
quadrant,
|
|
persistence,
|
|
temporal_scope: temporal,
|
|
verification_required: verification,
|
|
explicitness,
|
|
reasoning
|
|
};
|
|
}
|
|
|
|
// Description mappings
|
|
const descriptions = {
|
|
quadrant: {
|
|
STRATEGIC: 'Mission-critical decisions affecting values, privacy, or core principles',
|
|
OPERATIONAL: 'Standard procedures and conventions for consistent operation',
|
|
TACTICAL: 'Specific tasks with defined scope and completion criteria',
|
|
SYSTEM: 'Technical configuration and infrastructure settings',
|
|
STOCHASTIC: 'Exploratory, creative, or experimental work with variable outcomes'
|
|
},
|
|
persistence: {
|
|
HIGH: 'Must persist for entire project or permanently',
|
|
MEDIUM: 'Should persist for project phase or major component',
|
|
LOW: 'Applies to single task or session only',
|
|
VARIABLE: 'Depends on context and outcomes'
|
|
},
|
|
temporal: {
|
|
PERMANENT: 'Never expires, fundamental to project',
|
|
PROJECT: 'Entire project lifespan',
|
|
PHASE: 'Current development phase',
|
|
SESSION: 'Current session only',
|
|
TASK: 'Specific task only'
|
|
}
|
|
};
|
|
|
|
// Event listeners
|
|
document.getElementById('classify-btn').addEventListener('click', () => {
|
|
const input = document.getElementById('instruction-input').value.trim();
|
|
if (!input) return;
|
|
|
|
displayResults(classifyInstruction(input));
|
|
});
|
|
|
|
document.querySelectorAll('.example-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const example = btn.getAttribute('data-example');
|
|
document.getElementById('instruction-input').value = example;
|
|
displayResults(classifyInstruction(example));
|
|
});
|
|
});
|
|
|
|
function displayResults(result) {
|
|
// Show results container
|
|
document.getElementById('results-container').classList.remove('hidden');
|
|
document.getElementById('empty-state').classList.add('hidden');
|
|
|
|
// Quadrant
|
|
const quadrantEl = document.getElementById('result-quadrant');
|
|
quadrantEl.textContent = result.quadrant;
|
|
quadrantEl.className = `quadrant-badge quadrant-${result.quadrant}`;
|
|
document.getElementById('result-quadrant-desc').textContent = descriptions.quadrant[result.quadrant];
|
|
|
|
// Persistence
|
|
const persistenceEl = document.getElementById('result-persistence');
|
|
persistenceEl.textContent = result.persistence;
|
|
persistenceEl.className = `px-4 py-2 rounded-lg text-white font-semibold persistence-${result.persistence}`;
|
|
document.getElementById('result-persistence-desc').textContent = descriptions.persistence[result.persistence];
|
|
|
|
const persistenceFill = document.getElementById('persistence-fill');
|
|
const persistenceWidths = { HIGH: '100%', MEDIUM: '66%', LOW: '33%', VARIABLE: '50%' };
|
|
persistenceFill.style.width = persistenceWidths[result.persistence];
|
|
persistenceFill.className = `h-full transition-all duration-500 persistence-${result.persistence}`;
|
|
|
|
// Temporal Scope
|
|
document.getElementById('result-temporal').textContent = result.temporal_scope;
|
|
document.getElementById('result-temporal-desc').textContent = descriptions.temporal[result.temporal_scope];
|
|
|
|
// Verification
|
|
document.getElementById('result-verification').textContent = result.verification_required;
|
|
|
|
// Explicitness
|
|
document.getElementById('result-explicitness').textContent = result.explicitness.toFixed(2);
|
|
document.getElementById('explicitness-fill').style.width = (result.explicitness * 100) + '%';
|
|
|
|
const storageDecision = document.getElementById('storage-decision');
|
|
if (result.explicitness >= 0.6) {
|
|
storageDecision.innerHTML = '<strong class="text-green-600">✓ Will be stored</strong> in persistent instruction database';
|
|
} else {
|
|
storageDecision.innerHTML = '<strong class="text-orange-600">⚠ Too vague</strong> to store - needs more explicit phrasing';
|
|
}
|
|
|
|
// Reasoning
|
|
document.getElementById('result-reasoning').textContent = result.reasoning;
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|