feat(i18n): add interactive diagram modal translations for EN/DE/FR

- Added diagram_services section to all three language JSON files
- Modified interactive-diagram.js to load translations from i18n system
- Added language change event listeners to update modals dynamically
- Removed hardcoded English serviceData from JavaScript
- Modals now fully translate when language is switched
This commit is contained in:
TheFlow 2025-10-26 13:15:50 +13:00
parent e0bea7c893
commit 25fccdde4b
4 changed files with 325 additions and 199 deletions

View file

@ -8,211 +8,55 @@
class InteractiveDiagram {
constructor() {
this.serviceData = {
overview: {
name: 'Tractatus Governance Layer',
shortName: 'Overview',
color: '#0ea5e9',
icon: '⚙️',
description: 'Six external governance services working together to enforce AI safety boundaries outside the AI runtime.',
details: [
'All services operate externally to the AI—making manipulation harder',
'Instruction storage and validation work together to prevent directive fade',
'Boundary enforcement and deliberation coordinate on values decisions',
'Pressure monitoring adjusts verification requirements dynamically',
'Metacognitive gates ensure AI pauses before high-risk operations',
'Each service addresses a different failure mode in AI safety'
],
promise: 'External architectural enforcement that is structurally more difficult to bypass than behavioral training alone.'
},
boundary: {
name: 'BoundaryEnforcer',
shortName: 'Boundary',
color: '#10b981',
icon: '🔒',
description: 'Blocks AI from making values decisions (privacy, ethics, strategic direction). Requires human approval.',
details: [
'Enforces Tractatus 12.1-12.7 boundaries',
'Values decisions architecturally require humans',
'Prevents AI autonomous decision-making on ethical questions',
'External enforcement - harder to bypass via prompting'
],
promise: 'Values boundaries enforced externally—harder to manipulate through prompting.'
},
instruction: {
name: 'InstructionPersistenceClassifier',
shortName: 'Instruction',
color: '#6366f1',
icon: '📋',
description: 'Stores instructions externally with persistence levels (HIGH/MEDIUM/LOW). Aims to reduce directive fade.',
details: [
'Quadrant-based classification (STR/OPS/TAC/SYS/STO)',
'Time-persistence metadata tagging',
'Temporal horizon modeling (STRATEGIC, OPERATIONAL, TACTICAL)',
'External storage independent of AI runtime'
],
promise: 'Instructions stored outside AI—more resistant to context manipulation.'
},
validator: {
name: 'CrossReferenceValidator',
shortName: 'Validator',
color: '#8b5cf6',
icon: '✓',
description: 'Validates AI actions against instruction history. Aims to prevent pattern bias overriding explicit directives.',
details: [
'Cross-references AI claims with external instruction history',
'Detects pattern-based overrides of explicit user directives',
'Independent verification layer',
'Helps prevent instruction drift'
],
promise: 'Independent verification—AI claims checked against external source.'
},
pressure: {
name: 'ContextPressureMonitor',
shortName: 'Pressure',
color: '#f59e0b',
icon: '⚡',
description: 'Monitors AI performance degradation. Escalates when context pressure threatens quality.',
details: [
'Tracks token usage, complexity, error rates',
'Detects degraded operating conditions',
'Adjusts verification requirements under pressure',
'Objective metrics for quality monitoring'
],
promise: 'Objective metrics may detect manipulation attempts early.'
},
metacognitive: {
name: 'MetacognitiveVerifier',
shortName: 'Metacognitive',
color: '#ec4899',
icon: '💡',
description: 'Requires AI to pause and verify complex operations before execution. Structural safety check.',
details: [
'AI self-checks alignment, coherence, safety before execution',
'Structural pause-and-verify gates',
'Selective verification (not constant)',
'Architectural enforcement of reflection steps'
],
promise: 'Architectural gates aim to enforce verification steps.'
},
deliberation: {
name: 'PluralisticDeliberationOrchestrator',
shortName: 'Deliberation',
color: '#14b8a6',
icon: '👥',
description: 'Facilitates multi-stakeholder deliberation for values conflicts where no single "correct" answer exists.',
details: [
'Non-hierarchical coordination for values conflicts',
'Stakeholder perspective representation',
'Consensus-building for ethical trade-offs',
'Addresses values pluralism in AI safety'
],
promise: 'Facilitates deliberation across stakeholder perspectives for values conflicts.'
}
};
this.activeService = null;
this.loadTranslations();
this.init();
}
init() {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => this.setup());
} else {
this.setup();
}
console.log('[InteractiveDiagram] Initialized');
}
setup() {
// SVG is loaded via <object> tag, need to access its contentDocument
const objectElement = document.getElementById('interactive-svg-object');
if (!objectElement) {
console.warn('[InteractiveDiagram] SVG object element not found');
return;
}
// Wait for object to load with retry mechanism
const initializeSVG = () => {
const svgDoc = objectElement.contentDocument;
if (!svgDoc) {
console.warn('[InteractiveDiagram] Could not access SVG contentDocument, retrying...');
setTimeout(initializeSVG, 100);
return;
}
// The SVG is the document element itself, or we can query for it
let svg = svgDoc.getElementById('interactive-arch-diagram');
if (!svg) {
// Try getting the root SVG element
svg = svgDoc.documentElement;
console.log('[InteractiveDiagram] Using documentElement as SVG');
}
if (!svg) {
console.warn('[InteractiveDiagram] SVG diagram not found in contentDocument');
return;
}
// Verify it's actually an SVG element (case-insensitive check)
const tagName = svg.tagName ? svg.tagName.toLowerCase() : '';
if (tagName !== 'svg') {
console.warn('[InteractiveDiagram] Element found but not SVG, tagName:', tagName, '- retrying...');
// This is the race condition - contentDocument is HTML, not SVG yet
setTimeout(initializeSVG, 100);
return;
}
// Store reference to SVG document for later use
this.svgDoc = svgDoc;
this.svg = svg;
const nodes = svg.querySelectorAll('.service-node');
console.log(`[InteractiveDiagram] Found ${nodes.length} service nodes`);
if (nodes.length === 0) {
console.warn('[InteractiveDiagram] No service nodes found in SVG');
return;
}
nodes.forEach(node => {
const serviceId = node.getAttribute('data-service');
// Click handler
node.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
this.showServiceDetails(serviceId);
}, true);
// Touch support for mobile devices
node.addEventListener('touchstart', (e) => {
e.preventDefault();
const serviceId = node.getAttribute('data-service');
this.showServiceDetails(serviceId);
}, { passive: false });
// Hover effects
node.addEventListener('mouseenter', () => {
this.highlightService(serviceId);
});
node.addEventListener('mouseleave', () => {
this.unhighlightService(serviceId);
});
// Add pointer cursor via JavaScript (CSP-compliant)
node.style.cursor = 'pointer';
});
this.addKeyboardNavigation(nodes);
// Show initial state (overview)
this.showServiceDetails('overview');
console.log('[InteractiveDiagram] Setup complete, showing overview');
loadTranslations() {
// Get translations from i18n system
const i18n = window.i18nTranslations || {};
const diagram = i18n.diagram_services || {};
// Define static properties (icons and colors)
const staticProps = {
overview: { color: '#0ea5e9', icon: '⚙️' },
boundary: { color: '#10b981', icon: '🔒' },
instruction: { color: '#6366f1', icon: '📋' },
validator: { color: '#8b5cf6', icon: '✓' },
pressure: { color: '#f59e0b', icon: '⚡' },
metacognitive: { color: '#ec4899', icon: '💡' },
deliberation: { color: '#14b8a6', icon: '👥' }
};
// Build serviceData from translations
this.serviceData = {};
Object.keys(staticProps).forEach(serviceId => {
const trans = diagram[serviceId] || {};
const details = [];
// Collect detail1-detail6 (some services have 4, overview has 6)
for (let i = 1; i <= 6; i++) {
if (trans[`detail${i}`]) {
details.push(trans[`detail${i}`]);
}
}
this.serviceData[serviceId] = {
name: trans.name || serviceId,
shortName: trans.shortName || serviceId,
color: staticProps[serviceId].color,
icon: staticProps[serviceId].icon,
description: trans.description || '',
details: details,
promise: trans.promise || ''
};
});
console.log('[InteractiveDiagram] Loaded translations for', Object.keys(this.serviceData).length, 'services');
}
// FIXED: Better load detection with SVG verification
const checkAndInit = () => {
const svgDoc = objectElement.contentDocument;
@ -423,6 +267,66 @@ if (typeof window !== 'undefined') {
window.interactiveDiagram = new InteractiveDiagram();
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = InteractiveDiagram;
}
// Listen for language changes and reload translations
handleLanguageChange() {
console.log('[InteractiveDiagram] Language changed, reloading translations');
this.loadTranslations();
// Re-render current service if one is active
if (this.activeService) {
const service = this.serviceData[this.activeService];
if (service) {
this.renderServicePanel(service);
}
}
}
}
// Initialize and listen for language changes
if (typeof window !== 'undefined') {
window.interactiveDiagram = new InteractiveDiagram();
// Listen for i18n initialization and language changes
window.addEventListener('i18nInitialized', () => {
if (window.interactiveDiagram) {
window.interactiveDiagram.handleLanguageChange();
// Listen for language changes and reload translations
handleLanguageChange() {
console.log('[InteractiveDiagram] Language changed, reloading translations');
this.loadTranslations();
// Re-render current service if one is active
if (this.activeService) {
const service = this.serviceData[this.activeService];
if (service) {
this.renderServicePanel(service);
}
}
}
}
// Initialize and listen for language changes
if (typeof window !== 'undefined') {
window.interactiveDiagram = new InteractiveDiagram();
// Listen for i18n initialization
window.addEventListener('i18nInitialized', () => {
if (window.interactiveDiagram) {
window.interactiveDiagram.handleLanguageChange();
}
});
// Listen for language changes
window.addEventListener('languageChanged', () => {
if (window.interactiveDiagram) {
window.interactiveDiagram.handleLanguageChange();
}
});
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = InteractiveDiagram;
}

View file

@ -127,5 +127,79 @@
"btn_docs": "Dokumentation Lesen",
"btn_research": "Forschung Ansehen",
"btn_implementation": "Implementierungsleitfaden"
},
"diagram_services": {
"overview": {
"name": "Tractatus Governance-Ebene",
"shortName": "Übersicht",
"description": "Sechs externe Governance-Dienste arbeiten zusammen, um KI-Sicherheitsgrenzen außerhalb der KI-Laufzeit durchzusetzen.",
"detail1": "Alle Dienste operieren extern zur KI Manipulation wird erschwert",
"detail2": "Anweisungsspeicherung und Validierung arbeiten zusammen, um Direktiven-Verfall zu verhindern",
"detail3": "Grenzdurchsetzung und Beratung koordinieren Werteentscheidungen",
"detail4": "Drucküberwachung passt Verifikationsanforderungen dynamisch an",
"detail5": "Metakognitive Gates stellen sicher, dass KI vor risikoreichen Operationen pausiert",
"detail6": "Jeder Dienst adressiert einen anderen Fehlermodus in der KI-Sicherheit",
"promise": "Externe architektonische Durchsetzung, die strukturell schwieriger zu umgehen ist als verhaltensbasiertes Training allein."
},
"boundary": {
"name": "BoundaryEnforcer",
"shortName": "Grenze",
"description": "Blockiert die KI daran, Werteentscheidungen zu treffen (Datenschutz, Ethik, strategische Ausrichtung). Erfordert menschliche Genehmigung.",
"detail1": "Erzwingt Tractatus 12.1-12.7 Grenzen",
"detail2": "Werteentscheidungen erfordern architektonisch Menschen",
"detail3": "Verhindert autonome KI-Entscheidungen bei ethischen Fragen",
"detail4": "Externe Durchsetzung - schwieriger durch Prompting zu umgehen",
"promise": "Wertegrenzen extern durchgesetzt schwieriger durch Prompting zu manipulieren."
},
"instruction": {
"name": "InstructionPersistenceClassifier",
"shortName": "Anweisung",
"description": "Speichert Anweisungen extern mit Persistenzstufen (HIGH/MEDIUM/LOW). Zielt darauf ab, Direktiven-Verfall zu reduzieren.",
"detail1": "Quadrantenbasierte Klassifikation (STR/OPS/TAC/SYS/STO)",
"detail2": "Zeitpersistenz-Metadaten-Tagging",
"detail3": "Temporale Horizont-Modellierung (STRATEGIC, OPERATIONAL, TACTICAL)",
"detail4": "Externe Speicherung unabhängig von der KI-Laufzeit",
"promise": "Anweisungen außerhalb der KI gespeichert widerstandsfähiger gegen Kontextmanipulation."
},
"validator": {
"name": "CrossReferenceValidator",
"shortName": "Validator",
"description": "Validiert KI-Aktionen gegen Anweisungshistorie. Zielt darauf ab, Musterbias-Überschreibung expliziter Direktiven zu verhindern.",
"detail1": "Gleicht KI-Behauptungen mit externer Anweisungshistorie ab",
"detail2": "Erkennt musterbasierte Überschreibungen expliziter Benutzerdirektiven",
"detail3": "Unabhängige Verifikationsebene",
"detail4": "Hilft, Anweisungsdrift zu verhindern",
"promise": "Unabhängige Verifikation KI-Behauptungen gegen externe Quelle geprüft."
},
"pressure": {
"name": "ContextPressureMonitor",
"shortName": "Druck",
"description": "Überwacht KI-Leistungsverschlechterung. Eskaliert, wenn Kontextdruck die Qualität bedroht.",
"detail1": "Verfolgt Token-Nutzung, Komplexität, Fehlerraten",
"detail2": "Erkennt degradierte Betriebsbedingungen",
"detail3": "Passt Verifikationsanforderungen unter Druck an",
"detail4": "Objektive Metriken zur Qualitätsüberwachung",
"promise": "Objektive Metriken können Manipulationsversuche frühzeitig erkennen."
},
"metacognitive": {
"name": "MetacognitiveVerifier",
"shortName": "Metakognitiv",
"description": "Erfordert, dass die KI pausiert und komplexe Operationen vor der Ausführung überprüft. Strukturelle Sicherheitsprüfung.",
"detail1": "KI überprüft Ausrichtung, Kohärenz, Sicherheit vor Ausführung selbst",
"detail2": "Strukturelle Pause-und-Verifikations-Gates",
"detail3": "Selektive Verifikation (nicht konstant)",
"detail4": "Architektonische Durchsetzung von Reflexionsschritten",
"promise": "Architektonische Gates zielen darauf ab, Verifikationsschritte durchzusetzen."
},
"deliberation": {
"name": "PluralisticDeliberationOrchestrator",
"shortName": "Beratung",
"description": "Erleichtert Multi-Stakeholder-Beratung bei Wertekonflikten, bei denen keine einzelne \"richtige\" Antwort existiert.",
"detail1": "Nicht-hierarchische Koordination bei Wertekonflikten",
"detail2": "Repräsentation von Stakeholder-Perspektiven",
"detail3": "Konsensbildung für ethische Abwägungen",
"detail4": "Adressiert Wertepluralismus in der KI-Sicherheit",
"promise": "Erleichtert Beratung über Stakeholder-Perspektiven hinweg bei Wertekonflikten."
}
}
}

View file

@ -127,5 +127,79 @@
"btn_docs": "Read Documentation",
"btn_research": "View Research",
"btn_implementation": "Implementation Guide"
},
"diagram_services": {
"overview": {
"name": "Tractatus Governance Layer",
"shortName": "Overview",
"description": "Six external governance services working together to enforce AI safety boundaries outside the AI runtime.",
"detail1": "All services operate externally to the AI—making manipulation harder",
"detail2": "Instruction storage and validation work together to prevent directive fade",
"detail3": "Boundary enforcement and deliberation coordinate on values decisions",
"detail4": "Pressure monitoring adjusts verification requirements dynamically",
"detail5": "Metacognitive gates ensure AI pauses before high-risk operations",
"detail6": "Each service addresses a different failure mode in AI safety",
"promise": "External architectural enforcement that is structurally more difficult to bypass than behavioral training alone."
},
"boundary": {
"name": "BoundaryEnforcer",
"shortName": "Boundary",
"description": "Blocks AI from making values decisions (privacy, ethics, strategic direction). Requires human approval.",
"detail1": "Enforces Tractatus 12.1-12.7 boundaries",
"detail2": "Values decisions architecturally require humans",
"detail3": "Prevents AI autonomous decision-making on ethical questions",
"detail4": "External enforcement - harder to bypass via prompting",
"promise": "Values boundaries enforced externally—harder to manipulate through prompting."
},
"instruction": {
"name": "InstructionPersistenceClassifier",
"shortName": "Instruction",
"description": "Stores instructions externally with persistence levels (HIGH/MEDIUM/LOW). Aims to reduce directive fade.",
"detail1": "Quadrant-based classification (STR/OPS/TAC/SYS/STO)",
"detail2": "Time-persistence metadata tagging",
"detail3": "Temporal horizon modeling (STRATEGIC, OPERATIONAL, TACTICAL)",
"detail4": "External storage independent of AI runtime",
"promise": "Instructions stored outside AI—more resistant to context manipulation."
},
"validator": {
"name": "CrossReferenceValidator",
"shortName": "Validator",
"description": "Validates AI actions against instruction history. Aims to prevent pattern bias overriding explicit directives.",
"detail1": "Cross-references AI claims with external instruction history",
"detail2": "Detects pattern-based overrides of explicit user directives",
"detail3": "Independent verification layer",
"detail4": "Helps prevent instruction drift",
"promise": "Independent verification—AI claims checked against external source."
},
"pressure": {
"name": "ContextPressureMonitor",
"shortName": "Pressure",
"description": "Monitors AI performance degradation. Escalates when context pressure threatens quality.",
"detail1": "Tracks token usage, complexity, error rates",
"detail2": "Detects degraded operating conditions",
"detail3": "Adjusts verification requirements under pressure",
"detail4": "Objective metrics for quality monitoring",
"promise": "Objective metrics may detect manipulation attempts early."
},
"metacognitive": {
"name": "MetacognitiveVerifier",
"shortName": "Metacognitive",
"description": "Requires AI to pause and verify complex operations before execution. Structural safety check.",
"detail1": "AI self-checks alignment, coherence, safety before execution",
"detail2": "Structural pause-and-verify gates",
"detail3": "Selective verification (not constant)",
"detail4": "Architectural enforcement of reflection steps",
"promise": "Architectural gates aim to enforce verification steps."
},
"deliberation": {
"name": "PluralisticDeliberationOrchestrator",
"shortName": "Deliberation",
"description": "Facilitates multi-stakeholder deliberation for values conflicts where no single \"correct\" answer exists.",
"detail1": "Non-hierarchical coordination for values conflicts",
"detail2": "Stakeholder perspective representation",
"detail3": "Consensus-building for ethical trade-offs",
"detail4": "Addresses values pluralism in AI safety",
"promise": "Facilitates deliberation across stakeholder perspectives for values conflicts."
}
}
}

View file

@ -127,5 +127,79 @@
"btn_docs": "Lire la Documentation",
"btn_research": "Voir la Recherche",
"btn_implementation": "Guide d'Implémentation"
},
"diagram_services": {
"overview": {
"name": "Couche de Gouvernance Tractatus",
"shortName": "Aperçu",
"description": "Six services de gouvernance externes travaillant ensemble pour appliquer les limites de sécurité de l'IA en dehors du runtime de l'IA.",
"detail1": "Tous les services opèrent en externe à l'IA rendant la manipulation plus difficile",
"detail2": "Le stockage des instructions et la validation travaillent ensemble pour prévenir l'effacement des directives",
"detail3": "L'application des frontières et la délibération coordonnent les décisions de valeurs",
"detail4": "La surveillance de la pression ajuste les exigences de vérification de manière dynamique",
"detail5": "Les portes métacognitives assurent que l'IA marque une pause avant les opérations à haut risque",
"detail6": "Chaque service adresse un mode de défaillance différent dans la sécurité de l'IA",
"promise": "Application architecturale externe structurellement plus difficile à contourner que la formation comportementale seule."
},
"boundary": {
"name": "BoundaryEnforcer",
"shortName": "Frontière",
"description": "Empêche l'IA de prendre des décisions de valeurs (confidentialité, éthique, direction stratégique). Nécessite l'approbation humaine.",
"detail1": "Applique les limites Tractatus 12.1-12.7",
"detail2": "Les décisions de valeurs nécessitent architecturalement des humains",
"detail3": "Empêche la prise de décision autonome de l'IA sur les questions éthiques",
"detail4": "Application externe - plus difficile à contourner via prompting",
"promise": "Frontières de valeurs appliquées en externe plus difficile à manipuler par prompting."
},
"instruction": {
"name": "InstructionPersistenceClassifier",
"shortName": "Instruction",
"description": "Stocke les instructions en externe avec des niveaux de persistance (HIGH/MEDIUM/LOW). Vise à réduire l'effacement des directives.",
"detail1": "Classification basée sur les quadrants (STR/OPS/TAC/SYS/STO)",
"detail2": "Étiquetage de métadonnées de persistance temporelle",
"detail3": "Modélisation d'horizon temporel (STRATEGIC, OPERATIONAL, TACTICAL)",
"detail4": "Stockage externe indépendant du runtime de l'IA",
"promise": "Instructions stockées en dehors de l'IA plus résistantes à la manipulation contextuelle."
},
"validator": {
"name": "CrossReferenceValidator",
"shortName": "Validateur",
"description": "Valide les actions de l'IA contre l'historique des instructions. Vise à empêcher le biais de pattern de remplacer les directives explicites.",
"detail1": "Vérifie les affirmations de l'IA avec l'historique des instructions externe",
"detail2": "Détecte les remplacements basés sur les patterns des directives utilisateur explicites",
"detail3": "Couche de vérification indépendante",
"detail4": "Aide à prévenir la dérive des instructions",
"promise": "Vérification indépendante affirmations de l'IA vérifiées contre une source externe."
},
"pressure": {
"name": "ContextPressureMonitor",
"shortName": "Pression",
"description": "Surveille la dégradation des performances de l'IA. Escalade lorsque la pression contextuelle menace la qualité.",
"detail1": "Suit l'utilisation des tokens, la complexité, les taux d'erreur",
"detail2": "Détecte les conditions de fonctionnement dégradées",
"detail3": "Ajuste les exigences de vérification sous pression",
"detail4": "Métriques objectives pour le suivi de la qualité",
"promise": "Les métriques objectives peuvent détecter les tentatives de manipulation tôt."
},
"metacognitive": {
"name": "MetacognitiveVerifier",
"shortName": "Métacognitif",
"description": "Exige que l'IA pause et vérifie les opérations complexes avant l'exécution. Vérification de sécurité structurelle.",
"detail1": "L'IA vérifie elle-même l'alignement, la cohérence, la sécurité avant l'exécution",
"detail2": "Portes structurelles de pause et vérification",
"detail3": "Vérification sélective (pas constante)",
"detail4": "Application architecturale des étapes de réflexion",
"promise": "Les portes architecturales visent à appliquer les étapes de vérification."
},
"deliberation": {
"name": "PluralisticDeliberationOrchestrator",
"shortName": "Délibération",
"description": "Facilite la délibération multi-parties prenantes pour les conflits de valeurs où aucune réponse \"correcte\" unique n'existe.",
"detail1": "Coordination non hiérarchique pour les conflits de valeurs",
"detail2": "Représentation des perspectives des parties prenantes",
"detail3": "Construction de consensus pour les compromis éthiques",
"detail4": "Adresse le pluralisme des valeurs dans la sécurité de l'IA",
"promise": "Facilite la délibération à travers les perspectives des parties prenantes pour les conflits de valeurs."
}
}
}