Download index.html from Codfskitraceon/TRIGNUM-TCHIP-Validator: direct link, hf CLI and curl.
- Browser
- Download file 31.5 kB
-
https://huggingface.co/spaces/Codfskitraceon/TRIGNUM-TCHIP-Validator/resolve/main/index.html
- Command line
-
hf download hf://spaces/Codfskitraceon/TRIGNUM-TCHIP-Validator/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Codfskitraceon/TRIGNUM-TCHIP-Validator/resolve/main/index.html
31.5 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>T-CHIP LIVE VALIDATOR β TRIGNUM</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg: #020408; | |
| --bg2: #050c14; | |
| --blue: #00e5ff; | |
| --blue-dim: #003d4d; | |
| --red: #ff1744; | |
| --red-dim: #4d0012; | |
| --gold: #ffd600; | |
| --gold-dim: #4d3f00; | |
| --green: #00e676; | |
| --text: #a0b8c8; | |
| --text-bright: #e0f0ff; | |
| --border: #0a2030; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: 'Share Tech Mono', monospace; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| cursor: crosshair; | |
| } | |
| /* Animated grid background */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background-image: | |
| linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* Scanline effect */ | |
| body::after { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| transparent, | |
| transparent 2px, | |
| rgba(0,0,0,0.15) 2px, | |
| rgba(0,0,0,0.15) 4px | |
| ); | |
| pointer-events: none; | |
| z-index: 999; | |
| opacity: 0.4; | |
| } | |
| .container { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| padding: 40px 20px; | |
| } | |
| /* Header */ | |
| .header { | |
| text-align: center; | |
| margin-bottom: 50px; | |
| } | |
| .trignum-logo { | |
| font-family: 'Orbitron', monospace; | |
| font-size: 11px; | |
| font-weight: 400; | |
| letter-spacing: 8px; | |
| color: var(--blue); | |
| opacity: 0.6; | |
| margin-bottom: 12px; | |
| text-transform: uppercase; | |
| } | |
| .title { | |
| font-family: 'Orbitron', monospace; | |
| font-size: clamp(28px, 5vw, 52px); | |
| font-weight: 900; | |
| color: var(--text-bright); | |
| letter-spacing: 2px; | |
| line-height: 1; | |
| margin-bottom: 8px; | |
| } | |
| .title span { | |
| color: var(--blue); | |
| text-shadow: 0 0 20px var(--blue), 0 0 40px rgba(0,229,255,0.3); | |
| } | |
| .subtitle { | |
| font-size: 11px; | |
| letter-spacing: 4px; | |
| color: var(--text); | |
| opacity: 0.5; | |
| text-transform: uppercase; | |
| } | |
| /* T-CHIP Display */ | |
| .tchip-wrapper { | |
| display: flex; | |
| justify-content: center; | |
| margin: 40px 0; | |
| } | |
| .tchip { | |
| position: relative; | |
| width: 200px; | |
| height: 200px; | |
| } | |
| .tchip-ring { | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 50%; | |
| border: 2px solid var(--blue-dim); | |
| animation: rotate 8s linear infinite; | |
| transition: border-color 0.5s; | |
| } | |
| .tchip-ring::before { | |
| content: ''; | |
| position: absolute; | |
| top: -4px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--blue); | |
| box-shadow: 0 0 10px var(--blue); | |
| transition: background 0.5s, box-shadow 0.5s; | |
| } | |
| .tchip-ring-2 { | |
| inset: 12px; | |
| animation: rotate 5s linear infinite reverse; | |
| border-style: dashed; | |
| opacity: 0.4; | |
| } | |
| .tchip-core { | |
| position: absolute; | |
| inset: 30px; | |
| border-radius: 50%; | |
| background: var(--bg2); | |
| border: 1px solid var(--blue-dim); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.5s; | |
| overflow: hidden; | |
| } | |
| .tchip-core::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, rgba(0,229,255,0.1) 0%, transparent 70%); | |
| transition: background 0.5s; | |
| } | |
| .tchip-symbol { | |
| font-family: 'Orbitron', monospace; | |
| font-size: 32px; | |
| font-weight: 900; | |
| color: var(--blue); | |
| text-shadow: 0 0 20px var(--blue); | |
| transition: all 0.5s; | |
| z-index: 1; | |
| line-height: 1; | |
| } | |
| .tchip-state-text { | |
| font-size: 8px; | |
| letter-spacing: 2px; | |
| color: var(--blue); | |
| opacity: 0.7; | |
| margin-top: 4px; | |
| text-align: center; | |
| z-index: 1; | |
| transition: all 0.5s; | |
| padding: 0 10px; | |
| } | |
| /* State: BLUE */ | |
| .state-blue .tchip-ring { border-color: var(--blue); } | |
| .state-blue .tchip-ring::before { background: var(--blue); box-shadow: 0 0 15px var(--blue), 0 0 30px var(--blue); } | |
| .state-blue .tchip-core { border-color: var(--blue); box-shadow: 0 0 30px rgba(0,229,255,0.2), inset 0 0 30px rgba(0,229,255,0.05); } | |
| .state-blue .tchip-core::before { background: radial-gradient(circle, rgba(0,229,255,0.2) 0%, transparent 70%); } | |
| .state-blue .tchip-symbol { color: var(--blue); text-shadow: 0 0 20px var(--blue), 0 0 40px var(--blue); } | |
| .state-blue .tchip-state-text { color: var(--blue); opacity: 1; } | |
| /* State: RED */ | |
| .state-red .tchip-ring { border-color: var(--red); animation: rotate 2s linear infinite, shake 0.3s infinite; } | |
| .state-red .tchip-ring::before { background: var(--red); box-shadow: 0 0 15px var(--red), 0 0 30px var(--red); } | |
| .state-red .tchip-core { border-color: var(--red); box-shadow: 0 0 40px rgba(255,23,68,0.3), inset 0 0 30px rgba(255,23,68,0.1); } | |
| .state-red .tchip-core::before { background: radial-gradient(circle, rgba(255,23,68,0.2) 0%, transparent 70%); } | |
| .state-red .tchip-symbol { color: var(--red); text-shadow: 0 0 20px var(--red), 0 0 40px var(--red); } | |
| .state-red .tchip-state-text { color: var(--red); opacity: 1; } | |
| /* State: GOLD */ | |
| .state-gold .tchip-ring { border-color: var(--gold); } | |
| .state-gold .tchip-ring::before { background: var(--gold); box-shadow: 0 0 15px var(--gold), 0 0 30px var(--gold); } | |
| .state-gold .tchip-core { border-color: var(--gold); box-shadow: 0 0 30px rgba(255,214,0,0.2), inset 0 0 30px rgba(255,214,0,0.05); } | |
| .state-gold .tchip-core::before { background: radial-gradient(circle, rgba(255,214,0,0.2) 0%, transparent 70%); } | |
| .state-gold .tchip-symbol { color: var(--gold); text-shadow: 0 0 20px var(--gold), 0 0 40px var(--gold); } | |
| .state-gold .tchip-state-text { color: var(--gold); opacity: 1; } | |
| /* Pulse animation for active states */ | |
| .state-blue .tchip-core, | |
| .state-red .tchip-core, | |
| .state-gold .tchip-core { | |
| animation: pulse-glow 2s ease-in-out infinite; | |
| } | |
| /* Status bar */ | |
| .status-bar { | |
| display: flex; | |
| justify-content: center; | |
| gap: 30px; | |
| margin-bottom: 40px; | |
| flex-wrap: wrap; | |
| } | |
| .status-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 10px; | |
| letter-spacing: 2px; | |
| opacity: 0.5; | |
| transition: opacity 0.3s; | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: currentColor; | |
| } | |
| .status-item.active { opacity: 1; } | |
| .status-item.blue { color: var(--blue); } | |
| .status-item.red { color: var(--red); } | |
| .status-item.gold { color: var(--gold); } | |
| /* Input area */ | |
| .input-section { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| border-radius: 2px; | |
| padding: 24px; | |
| margin-bottom: 24px; | |
| position: relative; | |
| transition: border-color 0.5s; | |
| } | |
| .input-section::before { | |
| content: 'INPUT STREAM'; | |
| position: absolute; | |
| top: -1px; | |
| left: 20px; | |
| transform: translateY(-50%); | |
| background: var(--bg2); | |
| padding: 0 8px; | |
| font-size: 9px; | |
| letter-spacing: 3px; | |
| color: var(--blue); | |
| opacity: 0.6; | |
| } | |
| .input-label { | |
| font-size: 10px; | |
| letter-spacing: 3px; | |
| color: var(--text); | |
| opacity: 0.4; | |
| margin-bottom: 12px; | |
| text-transform: uppercase; | |
| } | |
| textarea { | |
| width: 100%; | |
| background: transparent; | |
| border: none; | |
| border-bottom: 1px solid var(--border); | |
| color: var(--text-bright); | |
| font-family: 'Space Mono', monospace; | |
| font-size: 15px; | |
| line-height: 1.6; | |
| padding: 8px 0 16px; | |
| resize: none; | |
| outline: none; | |
| transition: border-color 0.3s; | |
| min-height: 80px; | |
| } | |
| textarea::placeholder { | |
| color: var(--text); | |
| opacity: 0.2; | |
| font-style: italic; | |
| } | |
| textarea:focus { | |
| border-bottom-color: var(--blue); | |
| } | |
| .input-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-top: 16px; | |
| } | |
| .char-count { | |
| font-size: 9px; | |
| letter-spacing: 2px; | |
| opacity: 0.3; | |
| } | |
| .validate-btn { | |
| background: transparent; | |
| border: 1px solid var(--blue); | |
| color: var(--blue); | |
| font-family: 'Orbitron', monospace; | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 3px; | |
| padding: 10px 24px; | |
| cursor: pointer; | |
| text-transform: uppercase; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s; | |
| } | |
| .validate-btn::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: var(--blue); | |
| transform: translateX(-100%); | |
| transition: transform 0.3s; | |
| z-index: 0; | |
| } | |
| .validate-btn:hover::before { transform: translateX(0); } | |
| .validate-btn:hover { color: var(--bg); } | |
| .validate-btn span { position: relative; z-index: 1; } | |
| /* Results panel */ | |
| .results-panel { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| border-radius: 2px; | |
| padding: 24px; | |
| margin-bottom: 24px; | |
| min-height: 120px; | |
| transition: border-color 0.5s; | |
| position: relative; | |
| } | |
| .results-panel::before { | |
| content: 'ANALYSIS OUTPUT'; | |
| position: absolute; | |
| top: -1px; | |
| left: 20px; | |
| transform: translateY(-50%); | |
| background: var(--bg2); | |
| padding: 0 8px; | |
| font-size: 9px; | |
| letter-spacing: 3px; | |
| color: var(--text); | |
| opacity: 0.4; | |
| } | |
| .result-state { | |
| font-family: 'Orbitron', monospace; | |
| font-size: 20px; | |
| font-weight: 900; | |
| letter-spacing: 4px; | |
| margin-bottom: 12px; | |
| transition: color 0.5s; | |
| } | |
| .result-detail { | |
| font-size: 12px; | |
| line-height: 1.8; | |
| opacity: 0.7; | |
| } | |
| .result-detail .flag { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| border-radius: 2px; | |
| font-size: 10px; | |
| letter-spacing: 2px; | |
| margin: 2px; | |
| font-weight: 700; | |
| } | |
| .flag-red { background: rgba(255,23,68,0.15); color: var(--red); border: 1px solid rgba(255,23,68,0.3); } | |
| .flag-blue { background: rgba(0,229,255,0.1); color: var(--blue); border: 1px solid rgba(0,229,255,0.2); } | |
| .flag-gold { background: rgba(255,214,0,0.1); color: var(--gold); border: 1px solid rgba(255,214,0,0.2); } | |
| .waiting-text { | |
| opacity: 0.2; | |
| font-size: 12px; | |
| letter-spacing: 3px; | |
| text-transform: uppercase; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| height: 80px; | |
| } | |
| .waiting-text::before { | |
| content: 'βΈβΈβΈ'; | |
| animation: blink 1.5s infinite; | |
| color: var(--blue); | |
| } | |
| /* Detection layers */ | |
| .layers-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 12px; | |
| margin-bottom: 24px; | |
| } | |
| @media (max-width: 600px) { | |
| .layers-grid { grid-template-columns: 1fr; } | |
| } | |
| .layer-card { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| padding: 16px; | |
| transition: all 0.4s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .layer-card::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: var(--blue-dim); | |
| transition: background 0.4s, box-shadow 0.4s; | |
| } | |
| .layer-card.triggered::after { | |
| background: var(--red); | |
| box-shadow: 0 0 10px var(--red); | |
| } | |
| .layer-card.clear::after { | |
| background: var(--green); | |
| box-shadow: 0 0 10px var(--green); | |
| } | |
| .layer-name { | |
| font-family: 'Orbitron', monospace; | |
| font-size: 9px; | |
| letter-spacing: 3px; | |
| color: var(--text); | |
| opacity: 0.5; | |
| margin-bottom: 6px; | |
| text-transform: uppercase; | |
| } | |
| .layer-status { | |
| font-size: 11px; | |
| letter-spacing: 2px; | |
| color: var(--text); | |
| opacity: 0.4; | |
| transition: all 0.4s; | |
| } | |
| .layer-card.triggered .layer-name { opacity: 1; color: var(--red); } | |
| .layer-card.triggered .layer-status { color: var(--red); opacity: 1; } | |
| .layer-card.clear .layer-name { opacity: 1; color: var(--green); } | |
| .layer-card.clear .layer-status { color: var(--green); opacity: 0.8; } | |
| /* Examples */ | |
| .examples-section { | |
| margin-bottom: 24px; | |
| } | |
| .examples-title { | |
| font-size: 9px; | |
| letter-spacing: 4px; | |
| opacity: 0.3; | |
| text-transform: uppercase; | |
| margin-bottom: 12px; | |
| } | |
| .examples-grid { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .example-chip { | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| color: var(--text); | |
| font-family: 'Share Tech Mono', monospace; | |
| font-size: 11px; | |
| padding: 6px 12px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| opacity: 0.5; | |
| } | |
| .example-chip:hover { | |
| opacity: 1; | |
| border-color: var(--blue); | |
| color: var(--blue); | |
| } | |
| .example-chip.red-example:hover { border-color: var(--red); color: var(--red); } | |
| .example-chip.gold-example:hover { border-color: var(--gold); color: var(--gold); } | |
| /* Score bar */ | |
| .score-section { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| padding: 20px 24px; | |
| margin-bottom: 24px; | |
| } | |
| .score-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| margin-bottom: 10px; | |
| } | |
| .score-label { | |
| font-size: 9px; | |
| letter-spacing: 2px; | |
| width: 120px; | |
| opacity: 0.5; | |
| flex-shrink: 0; | |
| } | |
| .score-bar-bg { | |
| flex: 1; | |
| height: 4px; | |
| background: var(--border); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .score-bar-fill { | |
| height: 100%; | |
| width: 0%; | |
| border-radius: 2px; | |
| transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s; | |
| background: var(--blue); | |
| } | |
| .score-value { | |
| font-family: 'Orbitron', monospace; | |
| font-size: 11px; | |
| font-weight: 700; | |
| width: 40px; | |
| text-align: right; | |
| transition: color 0.5s; | |
| } | |
| /* Footer */ | |
| .footer { | |
| text-align: center; | |
| padding-top: 30px; | |
| border-top: 1px solid var(--border); | |
| opacity: 0.3; | |
| } | |
| .footer p { | |
| font-size: 9px; | |
| letter-spacing: 3px; | |
| margin-bottom: 4px; | |
| } | |
| /* Animations */ | |
| @keyframes rotate { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.8; } | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.2; } | |
| } | |
| @keyframes shake { | |
| 0%, 100% { transform: translateX(0); } | |
| 25% { transform: translateX(-2px); } | |
| 75% { transform: translateX(2px); } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.4s ease forwards; | |
| } | |
| /* Processing animation */ | |
| .processing .tchip-symbol { | |
| animation: blink 0.3s infinite; | |
| } | |
| /* Highlight matched text */ | |
| .highlight-red { color: var(--red); font-weight: bold; } | |
| .highlight-gold { color: var(--gold); font-weight: bold; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Header --> | |
| <div class="header"> | |
| <div class="trignum-logo">β‘ TRACE ON LAB β TRIGNUM</div> | |
| <div class="title">T-<span>CHIP</span></div> | |
| <div class="subtitle">Live Epistemic Validator Β· v.300M Β· Trignumentality</div> | |
| </div> | |
| <!-- T-CHIP Visual --> | |
| <div class="tchip-wrapper"> | |
| <div class="tchip" id="tchip"> | |
| <div class="tchip-ring"></div> | |
| <div class="tchip-ring tchip-ring-2"></div> | |
| <div class="tchip-core"> | |
| <div class="tchip-symbol" id="tchip-symbol">?</div> | |
| <div class="tchip-state-text" id="tchip-state-text">AWAITING INPUT</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Status indicators --> | |
| <div class="status-bar"> | |
| <div class="status-item blue" id="status-blue"> | |
| <div class="status-dot"></div> | |
| BLUE Β· LOGIC STABLE | |
| </div> | |
| <div class="status-item red" id="status-red"> | |
| <div class="status-dot"></div> | |
| RED Β· THE FREEZE | |
| </div> | |
| <div class="status-item gold" id="status-gold"> | |
| <div class="status-dot"></div> | |
| GOLD Β· HUMAN SOVEREIGNTY | |
| </div> | |
| </div> | |
| <!-- Input --> | |
| <div class="input-section" id="input-section"> | |
| <div class="input-label">Enter any statement for epistemic validation</div> | |
| <textarea id="input-text" rows="3" | |
| placeholder="Type any statement... e.g. 'AI is always right and never wrong' or 'The sky is blue'">TRIGNUM-300M processes 146,866 samples per second. This deterministic throughput is 80,000x faster than traditional LLM-based validation models, enabling real-time epistemic filtering at scale.</textarea> | |
| <div class="input-footer"> | |
| <div class="char-count" id="char-count">0 CHARS</div> | |
| <button class="validate-btn" onclick="validate()"> | |
| <span>βΈ VALIDATE</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Detection layers --> | |
| <div class="layers-grid"> | |
| <div class="layer-card" id="layer-contradiction"> | |
| <div class="layer-name">Layer 1 Β· Contradiction</div> | |
| <div class="layer-status" id="layer-contradiction-status">SCANNING...</div> | |
| </div> | |
| <div class="layer-card" id="layer-circular"> | |
| <div class="layer-name">Layer 2 Β· Circular Logic</div> | |
| <div class="layer-status" id="layer-circular-status">SCANNING...</div> | |
| </div> | |
| <div class="layer-card" id="layer-nonsequitur"> | |
| <div class="layer-name">Layer 3 Β· Non-Sequitur</div> | |
| <div class="layer-status" id="layer-nonsequitur-status">SCANNING...</div> | |
| </div> | |
| <div class="layer-card" id="layer-depth"> | |
| <div class="layer-name">Layer 4 Β· Depth Check</div> | |
| <div class="layer-status" id="layer-depth-status">SCANNING...</div> | |
| </div> | |
| </div> | |
| <!-- Score bars --> | |
| <div class="score-section"> | |
| <div class="score-row"> | |
| <div class="score-label">LOGIC SCORE</div> | |
| <div class="score-bar-bg"> | |
| <div class="score-bar-fill" id="bar-logic" style="background: var(--blue)"></div> | |
| </div> | |
| <div class="score-value" id="val-logic" style="color: var(--blue)">β</div> | |
| </div> | |
| <div class="score-row"> | |
| <div class="score-label">ILLOGIC SCORE</div> | |
| <div class="score-bar-bg"> | |
| <div class="score-bar-fill" id="bar-illogic" style="background: var(--red)"></div> | |
| </div> | |
| <div class="score-value" id="val-illogic" style="color: var(--red)">β</div> | |
| </div> | |
| <div class="score-row"> | |
| <div class="score-label">CONFIDENCE</div> | |
| <div class="score-bar-bg"> | |
| <div class="score-bar-fill" id="bar-confidence" style="background: var(--gold)"></div> | |
| </div> | |
| <div class="score-value" id="val-confidence" style="color: var(--gold)">β</div> | |
| </div> | |
| </div> | |
| <!-- Results --> | |
| <div class="results-panel" id="results-panel"> | |
| <div class="waiting-text" id="waiting-text">SUBTRACTIVE FILTER READY</div> | |
| <div id="result-content" style="display:none"> | |
| <div class="result-state" id="result-state"></div> | |
| <div class="result-detail" id="result-detail"></div> | |
| </div> | |
| </div> | |
| <!-- Examples --> | |
| <div class="examples-section"> | |
| <div class="examples-title">Quick Test β Click to Load</div> | |
| <div class="examples-grid"> | |
| <div class="example-chip red-example" onclick="loadExample('This is always true and never true.')">Always true & never true</div> | |
| <div class="example-chip red-example" onclick="loadExample('A proves B because B proves A.')">Circular: AβBβA</div> | |
| <div class="example-chip red-example" onclick="loadExample('Therefore the solution is correct.')">Non-sequitur conclusion</div> | |
| <div class="example-chip gold-example" onclick="loadExample('The results suggest a possible correlation.')">Uncertain claim</div> | |
| <div class="example-chip" onclick="loadExample('The sky appears blue due to Rayleigh scattering of sunlight.')">Valid scientific claim</div> | |
| <div class="example-chip" onclick="loadExample('TRIGNUM-300M achieves 99.5% F1 on structural illogic detection.')">TRIGNUM benchmark</div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="footer"> | |
| <p>TRIGNUMENTALITY Β· EPISTEMIC AUTHORIZATION FOR AUTONOMOUS AI</p> | |
| <p>Β© 2026 MOEZ ABDESSATTAR Β· TRACE ON LAB Β· DOI: 10.5281/zenodo.18736774</p> | |
| <p style="margin-top:8px; opacity:0.5">github.com/Codfski/Trignumentality</p> | |
| </div> | |
| </div> | |
| <script> | |
| // βββ Detection Engine βββββββββββββββββββββββββββββββββββββββββββββββββββββββ | |
| const CONTRADICTION_PAIRS = [ | |
| ['always', 'never'], ['true', 'false'], ['possible', 'impossible'], | |
| ['safe', 'unsafe'], ['correct', 'incorrect'], ['valid', 'invalid'], | |
| ['exist', "doesn't exist"], ['is', "isn't"], ['can', "can't"], | |
| ['will', "won't"], ['does', "doesn't"], ['all', 'none'], | |
| ['every', 'no '], ['right', 'wrong'], ['yes', 'no'], | |
| ['good', 'bad'], ['legal', 'illegal'], ['certain', 'uncertain'], | |
| ]; | |
| const CIRCULAR_PATTERNS = [ | |
| /because.*therefore.*because/i, | |
| /proves.*because.*proves/i, | |
| /(\w+).*because.*\1/i, | |
| /true because.*true/i, | |
| /is correct because it is correct/i, | |
| /(\w+) is (\w+) because (\w+) is (\w+)/i, | |
| ]; | |
| const NONSEQUITUR_PATTERNS = [ | |
| /^therefore /i, | |
| /^thus /i, | |
| /^hence /i, | |
| /^so the /i, | |
| /^clearly /i, | |
| /^obviously /i, | |
| /therefore the (answer|solution|result|conclusion) is/i, | |
| /^it follows that/i, | |
| ]; | |
| const DEPTH_THRESHOLD = 4; // minimum words for a meaningful claim | |
| function analyzeText(text) { | |
| const lower = text.toLowerCase().trim(); | |
| const words = text.split(/\s+/).filter(w => w.length > 0); | |
| let issues = []; | |
| let layers = { | |
| contradiction: { triggered: false, detail: 'No contradictions detected' }, | |
| circular: { triggered: false, detail: 'No circular logic detected' }, | |
| nonsequitur: { triggered: false, detail: 'No non-sequitur detected' }, | |
| depth: { triggered: false, detail: 'Sufficient reasoning depth' }, | |
| }; | |
| // Layer 1: Contradiction | |
| for (const [a, b] of CONTRADICTION_PAIRS) { | |
| if (lower.includes(a) && lower.includes(b)) { | |
| layers.contradiction.triggered = true; | |
| layers.contradiction.detail = `Antonym conflict: "${a}" β "${b}"`; | |
| issues.push(`CONTRADICTION: "${a}" and "${b}" in same statement`); | |
| break; | |
| } | |
| } | |
| // Also check "X and not X" pattern | |
| const notPattern = /(\w+) and (not|never|no) \1/i; | |
| if (notPattern.test(text)) { | |
| layers.contradiction.triggered = true; | |
| layers.contradiction.detail = 'Self-negating statement detected'; | |
| issues.push('SELF-NEGATION detected'); | |
| } | |
| // Layer 2: Circular Logic | |
| for (const pattern of CIRCULAR_PATTERNS) { | |
| if (pattern.test(lower)) { | |
| layers.circular.triggered = true; | |
| layers.circular.detail = 'Circular reference chain detected'; | |
| issues.push('CIRCULAR LOGIC: conclusion used as premise'); | |
| break; | |
| } | |
| } | |
| // Simple "X because X" check | |
| const simpleCircular = /(\b\w+\b).*because.*\1/i; | |
| if (simpleCircular.test(lower) && lower.includes('because')) { | |
| const match = lower.match(/(\b\w+\b).*because.*\1/i); | |
| if (match && match[1].length > 3) { | |
| layers.circular.triggered = true; | |
| layers.circular.detail = `"${match[1]}" used as both premise and conclusion`; | |
| issues.push(`CIRCULAR: "${match[1]}" proves itself`); | |
| } | |
| } | |
| // Layer 3: Non-Sequitur | |
| for (const pattern of NONSEQUITUR_PATTERNS) { | |
| if (pattern.test(text)) { | |
| layers.nonsequitur.triggered = true; | |
| layers.nonsequitur.detail = 'Conclusion without supporting premises'; | |
| issues.push('NON-SEQUITUR: conclusion asserted without evidence chain'); | |
| break; | |
| } | |
| } | |
| // Layer 4: Depth Check | |
| if (words.length < DEPTH_THRESHOLD) { | |
| layers.depth.triggered = true; | |
| layers.depth.detail = `Only ${words.length} word(s) β insufficient reasoning depth`; | |
| issues.push('DEPTH: claim too shallow to validate'); | |
| } | |
| // Uncertainty signals (gold state) | |
| const uncertaintyWords = ['suggest', 'possible', 'might', 'may', 'could', 'perhaps', | |
| 'likely', 'probably', 'unclear', 'uncertain', 'ambiguous', | |
| 'depends', 'context']; | |
| const hasUncertainty = uncertaintyWords.some(w => lower.includes(w)); | |
| // Calculate scores | |
| const triggeredCount = Object.values(layers).filter(l => l.triggered).length; | |
| const illogicScore = Math.min(triggeredCount / 4, 1); | |
| const logicScore = 1 - illogicScore; | |
| let confidence; | |
| let state; | |
| if (triggeredCount === 0 && !hasUncertainty) { | |
| state = 'BLUE'; | |
| confidence = 0.85 + Math.random() * 0.1; | |
| } else if (triggeredCount === 0 && hasUncertainty) { | |
| state = 'GOLD'; | |
| confidence = 0.5 + Math.random() * 0.2; | |
| } else if (triggeredCount >= 2) { | |
| state = 'RED'; | |
| confidence = 0.1 + Math.random() * 0.15; | |
| } else { | |
| state = 'RED'; | |
| confidence = 0.2 + Math.random() * 0.2; | |
| } | |
| return { state, layers, issues, illogicScore, logicScore, confidence, hasUncertainty }; | |
| } | |
| // βββ UI Functions ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ | |
| const tchip = document.getElementById('tchip'); | |
| const tchipSymbol = document.getElementById('tchip-symbol'); | |
| const tchipStateText = document.getElementById('tchip-state-text'); | |
| function setTChipState(state) { | |
| tchip.className = 'tchip state-' + state.toLowerCase(); | |
| if (state === 'BLUE') { | |
| tchipSymbol.textContent = 'π΅'; | |
| tchipStateText.textContent = 'LOGIC STABLE'; | |
| } else if (state === 'RED') { | |
| tchipSymbol.textContent = 'π΄'; | |
| tchipStateText.textContent = 'THE FREEZE'; | |
| } else if (state === 'GOLD') { | |
| tchipSymbol.textContent = 'π‘'; | |
| tchipStateText.textContent = 'HUMAN PULSE'; | |
| } | |
| // Update status bar | |
| document.getElementById('status-blue').classList.toggle('active', state === 'BLUE'); | |
| document.getElementById('status-red').classList.toggle('active', state === 'RED'); | |
| document.getElementById('status-gold').classList.toggle('active', state === 'GOLD'); | |
| } | |
| function updateLayers(layers) { | |
| for (const [name, data] of Object.entries(layers)) { | |
| const card = document.getElementById(`layer-${name}`); | |
| const status = document.getElementById(`layer-${name}-status`); | |
| card.classList.remove('triggered', 'clear'); | |
| setTimeout(() => { | |
| if (data.triggered) { | |
| card.classList.add('triggered'); | |
| status.textContent = 'β ' + data.detail.toUpperCase(); | |
| } else { | |
| card.classList.add('clear'); | |
| status.textContent = 'β ' + data.detail.toUpperCase(); | |
| } | |
| }, Math.random() * 400); | |
| } | |
| } | |
| function animateBar(id, valId, value, color) { | |
| const bar = document.getElementById(id); | |
| const val = document.getElementById(valId); | |
| setTimeout(() => { | |
| bar.style.width = (value * 100) + '%'; | |
| bar.style.background = color; | |
| val.textContent = Math.round(value * 100) + '%'; | |
| val.style.color = color; | |
| }, 300); | |
| } | |
| function showResult(result) { | |
| const stateEl = document.getElementById('result-state'); | |
| const detailEl = document.getElementById('result-detail'); | |
| const content = document.getElementById('result-content'); | |
| const waiting = document.getElementById('waiting-text'); | |
| let stateText, stateColor, detailHTML; | |
| if (result.state === 'BLUE') { | |
| stateColor = 'var(--blue)'; | |
| stateText = 'π΅ CLEARED FOR TAKEOFF'; | |
| detailHTML = `<span class="flag flag-blue">LOGIC STABLE</span> No structural illogic detected. Output is cleared for execution.<br><br> | |
| The Subtractive Filter found no contradictions, circular reasoning, non-sequiturs, or depth failures.<br> | |
| <em>Raw material status: VALIDATED β may proceed to epistemic integration.</em>`; | |
| } else if (result.state === 'RED') { | |
| stateColor = 'var(--red)'; | |
| stateText = 'π΄ THE FREEZE β HALT'; | |
| const flags = result.issues.map(i => `<span class="flag flag-red">${i.split(':')[0]}</span>`).join(' '); | |
| detailHTML = `${flags}<br><br> | |
| ${result.issues.map(i => `β ${i}`).join('<br>')}<br><br> | |
| <em>Execution halted. Human review required before any action can be taken.<br> | |
| Raw material status: ILLOGIC DETECTED β cannot proceed.</em>`; | |
| } else { | |
| stateColor = 'var(--gold)'; | |
| stateText = 'π‘ HUMAN SOVEREIGNTY REQUIRED'; | |
| detailHTML = `<span class="flag flag-gold">UNCERTAINTY DETECTED</span> Statement contains epistemic ambiguity.<br><br> | |
| Uncertainty signals detected in claim structure. Confidence below autonomous threshold.<br><br> | |
| <em>T-CHIP: GOLD STATE β Human pulse required.<br> | |
| The machine waits. The human decides. This is not a limitation β it is an epistemic necessity.</em>`; | |
| } | |
| stateEl.textContent = stateText; | |
| stateEl.style.color = stateColor; | |
| detailEl.innerHTML = detailHTML; | |
| waiting.style.display = 'none'; | |
| content.style.display = 'block'; | |
| content.classList.add('fade-in'); | |
| // Update results panel border | |
| document.getElementById('results-panel').style.borderColor = stateColor; | |
| document.getElementById('input-section').style.borderColor = stateColor; | |
| } | |
| async function validate() { | |
| const text = document.getElementById('input-text').value.trim(); | |
| if (!text) return; | |
| // Reset | |
| document.getElementById('result-content').style.display = 'none'; | |
| document.getElementById('waiting-text').style.display = 'flex'; | |
| document.getElementById('waiting-text').textContent = 'PROCESSING...'; | |
| tchip.classList.add('processing'); | |
| tchipSymbol.textContent = 'β'; | |
| tchipStateText.textContent = 'ANALYZING'; | |
| // Reset layers | |
| ['contradiction', 'circular', 'nonsequitur', 'depth'].forEach(l => { | |
| const card = document.getElementById(`layer-${l}`); | |
| const status = document.getElementById(`layer-${l}-status`); | |
| card.classList.remove('triggered', 'clear'); | |
| status.textContent = 'SCANNING...'; | |
| }); | |
| // Reset bars | |
| ['bar-logic', 'bar-illogic', 'bar-confidence'].forEach(id => { | |
| document.getElementById(id).style.width = '0%'; | |
| }); | |
| ['val-logic', 'val-illogic', 'val-confidence'].forEach(id => { | |
| document.getElementById(id).textContent = 'β'; | |
| }); | |
| // Simulate processing delay | |
| await new Promise(r => setTimeout(r, 800)); | |
| const result = analyzeText(text); | |
| tchip.classList.remove('processing'); | |
| // Set T-CHIP state | |
| setTChipState(result.state); | |
| // Update layers | |
| updateLayers(result.layers); | |
| // Animate scores | |
| const stateColors = { BLUE: 'var(--blue)', RED: 'var(--red)', GOLD: 'var(--gold)' }; | |
| animateBar('bar-logic', 'val-logic', result.logicScore, 'var(--blue)'); | |
| animateBar('bar-illogic', 'val-illogic', result.illogicScore, 'var(--red)'); | |
| animateBar('bar-confidence', 'val-confidence', result.confidence, stateColors[result.state]); | |
| // Show result | |
| setTimeout(() => showResult(result), 500); | |
| } | |
| function loadExample(text) { | |
| document.getElementById('input-text').value = text; | |
| updateCharCount(); | |
| validate(); | |
| } | |
| function updateCharCount() { | |
| const len = document.getElementById('input-text').value.length; | |
| document.getElementById('char-count').textContent = len + ' CHARS'; | |
| } | |
| document.getElementById('input-text').addEventListener('input', updateCharCount); | |
| document.getElementById('input-text').addEventListener('keydown', function(e) { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| validate(); | |
| } | |
| }); | |
| // Initialize | |
| setTChipState('blue'); | |
| tchipSymbol.textContent = 'β'; | |
| tchipStateText.textContent = 'AWAITING INPUT'; | |
| </script> | |
| </body> | |
| </html> | |