| |
|
| | <!DOCTYPE html> |
| | <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; |
| | } |
| | |
| | |
| | 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; |
| | } |
| | |
| | |
| | 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 { |
| | 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; |
| | } |
| | |
| | |
| | .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 .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 .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 .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; } |
| | |
| | |
| | .state-blue .tchip-core, |
| | .state-red .tchip-core, |
| | .state-gold .tchip-core { |
| | animation: pulse-glow 2s ease-in-out infinite; |
| | } |
| | |
| | |
| | .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-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 { |
| | 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); |
| | } |
| | |
| | |
| | .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-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-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 { |
| | 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; |
| | } |
| | |
| | |
| | @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 .tchip-symbol { |
| | animation: blink 0.3s infinite; |
| | } |
| | |
| | |
| | .highlight-red { color: var(--red); font-weight: bold; } |
| | .highlight-gold { color: var(--gold); font-weight: bold; } |
| | </style> |
| | </head> |
| | <body> |
| |
|
| | <div class="container"> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| | |
| | |
| | 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; |
| | |
| | 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' }, |
| | }; |
| | |
| | |
| | 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; |
| | } |
| | } |
| | |
| | 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'); |
| | } |
| | |
| | |
| | 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; |
| | } |
| | } |
| | |
| | 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`); |
| | } |
| | } |
| | |
| | |
| | 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; |
| | } |
| | } |
| | |
| | |
| | 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'); |
| | } |
| | |
| | |
| | const uncertaintyWords = ['suggest', 'possible', 'might', 'may', 'could', 'perhaps', |
| | 'likely', 'probably', 'unclear', 'uncertain', 'ambiguous', |
| | 'depends', 'context']; |
| | const hasUncertainty = uncertaintyWords.some(w => lower.includes(w)); |
| | |
| | |
| | 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 }; |
| | } |
| | |
| | |
| | |
| | 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'; |
| | } |
| | |
| | |
| | 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'); |
| | |
| | |
| | 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; |
| | |
| | |
| | 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'; |
| | |
| | |
| | ['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...'; |
| | }); |
| | |
| | |
| | ['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 = '—'; |
| | }); |
| | |
| | |
| | await new Promise(r => setTimeout(r, 800)); |
| | |
| | const result = analyzeText(text); |
| | tchip.classList.remove('processing'); |
| | |
| | |
| | setTChipState(result.state); |
| | |
| | |
| | updateLayers(result.layers); |
| | |
| | |
| | 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]); |
| | |
| | |
| | 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(); |
| | } |
| | }); |
| | |
| | |
| | setTChipState('blue'); |
| | tchipSymbol.textContent = '◈'; |
| | tchipStateText.textContent = 'AWAITING INPUT'; |
| | </script> |
| | </body> |
| | </html> |
| |
|
