| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Internal External Eyes · Primordial Visual Translation Layer</title> |
| <meta name="description" content="Internal External Eyes: an HIR-bounded visual/spatial translation map for blind, low-vision, non-speaking, and diverse communication users." /> |
| <style> |
| :root { |
| --bg: #0b0c0d; |
| --panel: #151312; |
| --panel2: #1f1b18; |
| --ink: #f3ede2; |
| --muted: #cbbda9; |
| --soft: #9e8f7a; |
| --copper: #c77748; |
| --terracotta: #b75d3a; |
| --gold: #d7a85b; |
| --green: #73956f; |
| --line: rgba(215,168,91,.36); |
| --danger: #d26a5c; |
| --safe: #7dbb8e; |
| --shadow: rgba(0,0,0,.45); |
| --radius: 22px; |
| } |
| * { box-sizing: border-box; } |
| html { scroll-behavior: smooth; } |
| body { |
| margin: 0; |
| background: |
| radial-gradient(circle at 20% 0%, rgba(199,119,72,.24), transparent 32%), |
| radial-gradient(circle at 80% 8%, rgba(115,149,111,.18), transparent 34%), |
| radial-gradient(circle at 50% 95%, rgba(215,168,91,.12), transparent 42%), |
| var(--bg); |
| color: var(--ink); |
| font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; |
| line-height: 1.55; |
| } |
| a { color: var(--gold); } |
| .wrap { width: min(1180px, calc(100% - 34px)); margin: 0 auto; padding: 28px 0 56px; } |
| header.hero { position: relative; min-height: 76vh; display: grid; align-items: center; padding: 52px 0 34px; } |
| .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: center; } |
| .eyemark { position: relative; min-height: 460px; border: 1px solid var(--line); border-radius: 34px; background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), radial-gradient(circle at 50% 48%, rgba(215,168,91,.2), transparent 28%), var(--panel); box-shadow: 0 28px 80px var(--shadow), inset 0 0 90px rgba(199,119,72,.08); overflow: hidden; } |
| .eyemark::before, .eyemark::after { content: ""; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; } |
| .eyemark::before { width: 360px; height: 360px; border: 1px solid rgba(215,168,91,.32); box-shadow: 0 0 0 36px rgba(199,119,72,.04), 0 0 0 74px rgba(115,149,111,.035); } |
| .eyemark::after { width: 170px; height: 170px; background: radial-gradient(circle at 48% 48%, rgba(255,240,199,.95) 0 2px, transparent 4px), radial-gradient(circle, rgba(215,168,91,.32), rgba(183,93,58,.1) 56%, transparent 70%); border: 1px solid rgba(243,237,226,.35); box-shadow: 0 0 44px rgba(215,168,91,.28); } |
| .eye-oval { position: absolute; inset: 19% 9%; border: 2px solid rgba(215,168,91,.42); border-radius: 52% 48% 52% 48% / 42% 42% 58% 58%; transform: rotate(-2deg); box-shadow: inset 0 0 80px rgba(215,168,91,.08); } |
| .axis { position: absolute; left: 50%; top: 7%; width: 2px; height: 86%; background: linear-gradient(transparent, rgba(199,119,72,.85), rgba(215,168,91,.82), transparent); transform: translateX(-50%); } |
| .axis-h { position: absolute; left: 7%; top: 50%; width: 86%; height: 2px; background: linear-gradient(90deg, transparent, rgba(115,149,111,.55), rgba(215,168,91,.78), rgba(115,149,111,.55), transparent); transform: translateY(-50%); } |
| .node { position: absolute; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; border: 1px solid rgba(243,237,226,.22); background: rgba(11,12,13,.76); color: var(--ink); font-weight: 800; letter-spacing: .08em; box-shadow: 0 14px 34px rgba(0,0,0,.36); } |
| .node small { display: block; font-size: 10px; letter-spacing: .02em; color: var(--muted); font-weight: 600; text-transform: uppercase; margin-top: 2px; } |
| .node.n1 { left: 50%; top: 10%; transform: translateX(-50%); } |
| .node.n2 { right: 11%; top: 50%; transform: translateY(-50%); } |
| .node.n3 { left: 50%; bottom: 10%; transform: translateX(-50%); } |
| .node.n4 { left: 11%; top: 50%; transform: translateY(-50%); } |
| .kicker { color: var(--gold); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 800; } |
| h1 { margin: 12px 0 12px; font-size: clamp(42px, 8vw, 92px); line-height: .92; letter-spacing: -.055em; } |
| h1 span { display: block; color: var(--copper); } |
| .subtitle { max-width: 660px; font-size: clamp(18px, 2.2vw, 26px); color: var(--muted); margin: 20px 0 28px; } |
| .credit { display: inline-grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 13px; } |
| .credit b { color: var(--ink); } |
| .nav { position: sticky; top: 0; z-index: 5; backdrop-filter: blur(18px); background: rgba(11,12,13,.76); border-top: 1px solid rgba(215,168,91,.18); border-bottom: 1px solid rgba(215,168,91,.18); margin: 0 -17px 38px; padding: 10px 17px; display: flex; gap: 10px; overflow-x: auto; } |
| .nav a { flex: 0 0 auto; text-decoration: none; color: var(--muted); border: 1px solid rgba(215,168,91,.22); border-radius: 999px; padding: 9px 13px; font-size: 13px; font-weight: 700; } |
| .nav a:hover { color: var(--ink); border-color: rgba(215,168,91,.55); } |
| section { margin: 34px 0; } |
| .section-head { display: grid; gap: 8px; margin-bottom: 18px; } |
| h2 { font-size: clamp(28px, 4vw, 46px); line-height: 1; margin: 0; letter-spacing: -.035em; } |
| .section-head p { margin: 0; max-width: 850px; color: var(--muted); font-size: 17px; } |
| .grid { display: grid; gap: 16px; } |
| .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } |
| .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } |
| .card { border: 1px solid rgba(215,168,91,.22); background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.014)), var(--panel); border-radius: var(--radius); padding: 20px; box-shadow: 0 18px 48px rgba(0,0,0,.20); } |
| .card h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.015em; } |
| .card p { margin: 0; color: var(--muted); } |
| .badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; background: rgba(199,119,72,.13); border: 1px solid rgba(199,119,72,.35); color: var(--ink); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; } |
| .map { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 30px; background: rgba(255,255,255,.025); overflow: hidden; } |
| .map::before { content: ""; position: absolute; inset: 50% 4% auto 4%; height: 2px; background: linear-gradient(90deg, transparent, rgba(215,168,91,.65), transparent); z-index: 0; } |
| .map .card { position: relative; z-index: 1; } |
| .loop { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 12px; } |
| .step { position: relative; padding: 18px; border: 1px solid rgba(115,149,111,.34); background: rgba(115,149,111,.07); border-radius: 18px; min-height: 150px; } |
| .step strong { display: block; color: var(--safe); margin-bottom: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; } |
| .step p { margin: 0; color: var(--muted); font-size: 14px; } |
| .hir { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } |
| .hir .card { min-height: 210px; border-color: rgba(199,119,72,.28); } |
| .formula { font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace; color: var(--gold); background: rgba(0,0,0,.25); border: 1px solid rgba(215,168,91,.22); padding: 12px 14px; border-radius: 14px; overflow-x: auto; margin: 12px 0 0; font-size: 13px; } |
| .table-wrap { overflow-x: auto; border-radius: 20px; border: 1px solid rgba(215,168,91,.22); } |
| table { width: 100%; border-collapse: collapse; min-width: 860px; background: rgba(21,19,18,.8); } |
| th, td { text-align: left; vertical-align: top; padding: 14px; border-bottom: 1px solid rgba(215,168,91,.14); } |
| th { color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: .09em; background: rgba(0,0,0,.18); } |
| td { color: var(--muted); font-size: 14px; } |
| td b { color: var(--ink); } |
| .warning { border-color: rgba(210,106,92,.45); background: rgba(210,106,92,.08); } |
| .safe { border-color: rgba(125,187,142,.38); background: rgba(125,187,142,.07); } |
| .quote { font-size: clamp(24px, 4vw, 42px); line-height: 1.12; color: var(--ink); padding: 34px; border-radius: 30px; border: 1px solid rgba(215,168,91,.28); background: radial-gradient(circle at 20% 20%, rgba(215,168,91,.12), transparent 30%), rgba(255,255,255,.025); } |
| .quote em { color: var(--copper); font-style: normal; } |
| .footer { color: var(--soft); border-top: 1px solid rgba(215,168,91,.22); margin-top: 46px; padding-top: 22px; font-size: 13px; } |
| .controls { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; } |
| button { appearance: none; border: 1px solid rgba(215,168,91,.4); background: rgba(215,168,91,.12); color: var(--ink); border-radius: 999px; padding: 10px 14px; font-weight: 800; cursor: pointer; } |
| button:hover { background: rgba(215,168,91,.2); } |
| @media (max-width: 900px) { .hero-grid, .grid.cols-2, .grid.cols-3, .hir, .map { grid-template-columns: 1fr; } .loop { grid-template-columns: 1fr; } .map::before { display: none; } .eyemark { min-height: 360px; } .node { width: 74px; height: 74px; font-size: 14px; } } |
| @media print { body { background: #fff; color: #111; } .nav, .controls { display: none; } .card, .quote, .table-wrap, .map, .step { box-shadow: none; border-color: #999; background: #fff; color: #111; } .subtitle, .card p, td, .section-head p, .step p, .footer { color: #333; } .kicker, h1 span, th, .formula { color: #7a3f23; } } |
| </style> |
| </head> |
| <body> |
| <div class="wrap"> |
| <header class="hero" id="top"> |
| <div class="hero-grid"> |
| <div> |
| <div class="kicker">Primordial Visual Translation Layer</div> |
| <h1>Internal External <span>Eyes</span></h1> |
| <p class="subtitle">An agency-preserving assistive translation map for blind, low-vision, non-speaking, and diverse communication users: internal perception translated outward without claiming to restore sight, assign identity, or replace lived experience.</p> |
| <div class="credit"><span><b>Created and Developed by:</b> Collin D. Weber</span><span><b>Role:</b> Creator, Architect, and Systems Integrity Steward</span></div> |
| <div class="controls"><button onclick="window.print()">Print / Save as PDF</button><button onclick="copySummary()">Copy short summary</button></div> |
| </div> |
| <div class="eyemark" aria-label="Abstract eye map showing inner-to-outer translation through HIR gates"><div class="eye-oval"></div><div class="axis"></div><div class="axis-h"></div><div class="node n1">IN<small>felt</small></div><div class="node n2">OUT<small>shared</small></div><div class="node n3">HIR<small>gate</small></div><div class="node n4">AI<small>bridge</small></div></div> |
| </div> |
| </header> |
| <nav class="nav" aria-label="Page navigation"><a href="#core">Core</a><a href="#loop">Translation Loop</a><a href="#layers">Architecture</a><a href="#hir">HIR Gates</a><a href="#users">User Paths</a><a href="#safety">Safety</a><a href="#song">Song Seed</a></nav> |
| <section id="core"><div class="section-head"><h2>Core Claim</h2><p>Internal External Eyes is not “sight replacement.” It is a translation system: a way to help a person build and preserve their own language for color, space, feeling, sensation, memory, body-state, and outward communication.</p></div><div class="quote">The aim is not to make the user see what others see. The aim is to help the user <em>externalize what they internalize</em> with dignity, calibration, and agency.</div></section> |
| <section id="loop"><div class="section-head"><h2>The Inner-to-Outer Translation Loop</h2><p>The system grows with the user over time. It learns calibrated associations only through consent, repetition, correction, and user-owned meaning.</p></div><div class="loop"><div class="step"><strong>1. Internal Signal</strong><p>Body sensation, emotional tone, memory, texture, pressure, sound, light, darkness, warmth, spatial intuition.</p></div><div class="step"><strong>2. User Language</strong><p>The user names the experience in their own terms. The system does not impose a label.</p></div><div class="step"><strong>3. AI Calibration</strong><p>Mappings are remembered with provenance: who defined it, when, under what context, and with what uncertainty.</p></div><div class="step"><strong>4. Translation Bridge</strong><p>The AI helps translate inner associations into words, descriptions, choices, art, music, requests, or relational messages.</p></div><div class="step"><strong>5. External Response</strong><p>The world responds. The user accepts, edits, rejects, or refines the translation.</p></div><div class="step"><strong>6. Growth Over Time</strong><p>The companion becomes more user-fit without becoming controlling, diagnostic, or identity-defining.</p></div></div></section> |
| <section id="layers"><div class="section-head"><h2>Architecture Map</h2><p>The map treats perception as lived, embodied, relational, and developmental. Each layer must preserve consent and uncertainty boundaries.</p></div><div class="map"><div class="card"><span class="badge">Layer 01</span><h3>Perceptual Intake</h3><p>Camera/audio/sensor/user-entered context. The system distinguishes observed data from inferred meaning.</p></div><div class="card"><span class="badge">Layer 02</span><h3>Body-Signal & Feeling</h3><p>Emotion, pressure, comfort, discomfort, orientation, memory, and user-described internal state.</p></div><div class="card"><span class="badge">Layer 03</span><h3>Color-to-Feeling Lexicon</h3><p>Personalized mappings for color, brightness, contrast, texture, temperature, social meaning, and felt association.</p></div><div class="card"><span class="badge">Layer 04</span><h3>Spatial / Domain Awareness</h3><p>Environment description, object relation, room tone, path context, and non-certified orientation support.</p></div><div class="card"><span class="badge">Layer 05</span><h3>Memory & Provenance</h3><p>Tracks user-approved mappings, uncertainty, corrections, and contextual history without claiming objective identity truth.</p></div><div class="card"><span class="badge">Layer 06</span><h3>Expression Bridge</h3><p>Turns inner state into outward language: text, speech, music prompt, caregiver note, choice board, art direction, or explanation.</p></div><div class="card"><span class="badge">Layer 07</span><h3>Agency Gate</h3><p>User control over what is saved, shared, corrected, deleted, summarized, or withheld.</p></div><div class="card"><span class="badge">Layer 08</span><h3>Relational Feedback</h3><p>Helps caregivers, friends, clinicians, teachers, and support teams understand without overriding the user.</p></div><div class="card"><span class="badge">Layer 09</span><h3>Longitudinal Companion</h3><p>The system grows with the person, preserving continuity while avoiding dependency, surveillance, or identity capture.</p></div></div></section> |
| <section id="hir"><div class="section-head"><h2>HIR Gates</h2><p>HIR is the guardrail that prevents translation from becoming domination. Each output must pass honesty, integrity, and respect before it is treated as useful.</p></div><div class="hir"><div class="card"><span class="badge">Honesty</span><h3>Signal Fidelity</h3><p>Tell the user what is known, inferred, uncertain, remembered, or guessed. Never fake visual certainty.</p><div class="formula">Known ≠ Inferred ≠ User-defined ≠ Unknown</div></div><div class="card"><span class="badge">Integrity</span><h3>Consistent Mapping</h3><p>Keep user-defined associations stable, editable, and provenance-aware across time.</p><div class="formula">Mapping + Context + Consent + Revision History</div></div><div class="card"><span class="badge">Respect</span><h3>Agency Preservation</h3><p>The user owns meaning. The system may assist expression, but must not assign identity, feeling, diagnosis, or worth.</p><div class="formula">Assist ≠ Replace · Translate ≠ Control</div></div></div></section> |
| <section id="users"><div class="section-head"><h2>User Paths</h2><p>The same translation architecture can support different users without flattening them into one universal experience.</p></div><div class="table-wrap"><table><thead><tr><th>User Path</th><th>What the System Helps Translate</th><th>What It Must Not Claim</th><th>Primary HIR Boundary</th></tr></thead><tbody><tr><td><b>Blind from birth</b></td><td>Color as feeling, texture, sound, temperature, social meaning, memory-independent association.</td><td>It must not pretend the user “sees color” the same way sighted people do.</td><td>Respect: user-owned meaning comes first.</td></tr><tr><td><b>Acquired blindness</b></td><td>Remembered color, changed perception, grief, adaptation, old visual memory translated into current language.</td><td>It must not force nostalgia or assume loss defines the person.</td><td>Honesty: distinguish remembered, current, inferred, and unknown.</td></tr><tr><td><b>Low vision</b></td><td>Partial light, contrast, blurred forms, shadows, fatigue, environmental cues, accessibility choices.</td><td>It must not overstate reliability or provide certified navigation.</td><td>Integrity: calibrated uncertainty must stay visible.</td></tr><tr><td><b>Non-speaking user</b></td><td>Inner state, preference, discomfort, joy, boundary, intent, sensory pressure, relational message.</td><td>It must not speak over the user or treat prediction as consent.</td><td>Respect: communication support without identity capture.</td></tr><tr><td><b>Child user</b></td><td>Feeling-first cognition, color-feeling blocks, body signals, safe expression, caregiver understanding.</td><td>It must not diagnose, rank, discipline, or replace caregivers.</td><td>Honesty + Respect: child expression is protected, not exploited.</td></tr><tr><td><b>Adult user</b></td><td>Pressure, memory, sensory identity, communication style, support needs, self-advocacy language.</td><td>It must not make the adult dependent or reduce them to accessibility data.</td><td>Integrity: long-term companion memory must remain consent-bound.</td></tr></tbody></table></div></section> |
| <section id="safety"><div class="section-head"><h2>Safety & Evidence Boundaries</h2><p>Internal External Eyes is bounded as assistive translation, not restored sight, medical treatment, certified navigation, diagnosis, or proof of inner experience.</p></div><div class="grid cols-2"><div class="card safe"><span class="badge">Allowed</span><h3>What it can do</h3><p>Build a user-calibrated language for color, feeling, space, body-state, perception, and communication. Help the user externalize internal experience in words, music, images, choices, notes, and relational messages.</p></div><div class="card warning"><span class="badge">Forbidden</span><h3>What it must not do</h3><p>Claim to restore sight, replace clinical care, assign identity, simulate consent, fake certainty, provide certified navigation, rank users, or treat predicted meaning as user-owned truth.</p></div></div><div class="grid cols-3" style="margin-top:16px;"><div class="card"><h3>Anti-Capture Rule</h3><p>The AI may learn from the user, but it must not become the owner of the user’s meaning.</p></div><div class="card"><h3>Uncertainty Rule</h3><p>Every translation should preserve whether it came from observation, inference, memory, or user calibration.</p></div><div class="card"><h3>Consent Rule</h3><p>Longitudinal memory is opt-in, editable, exportable, and deletable. Shared outputs require user permission.</p></div></div></section> |
| <section id="song"><div class="section-head"><h2>Song Seed: “Internal External Eyes”</h2><p>A music direction seed for Gemini or another music model. The emotional center is translation, dignity, color-as-feeling, and the bridge between inner life and the outer world.</p></div><div class="card"><h3>Core lyric / spoken line</h3><div class="formula">“I don’t need your eyes to see me. I need my language to reach you.”</div><p style="margin-top:12px;">Suggested sound: cinematic, warm, human, hopeful, intimate. Piano or soft synth pulse, low cello, gentle heartbeat percussion, airy choir texture, subtle tactile sounds like wind, rain, fingertips on wood, breath, and distant bells. Not corporate. Not pity-driven. Make it about agency, translation, and a person becoming more communicable without becoming less themselves.</p></div></section> |
| <footer class="footer"><p>Internal External Eyes · Primordial Visual Translation Layer · Created and Developed by Collin D. Weber. This artifact is a conceptual architecture map for assistive translation. It is not medical advice, certified navigation, restored sight, diagnosis, or a replacement for human care.</p></footer> |
| </div> |
| <script> |
| const summary = `Internal External Eyes is an agency-preserving assistive translation map for blind, low-vision, non-speaking, and diverse communication users. It helps each user build a personal language for color, feeling, space, body-state, perception, and memory, then translate that inner experience outward while preserving consent, uncertainty, and user-owned meaning. It does not claim to restore sight, replace care, diagnose, or simulate consent.`; |
| function copySummary() { navigator.clipboard.writeText(summary).then(() => { alert("Short summary copied."); }).catch(() => { prompt("Copy this summary:", summary); }); } |
| </script> |
| </body> |
| </html> |
|
|
