File size: 21,878 Bytes
5e0bc6d adcab1c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | <!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>
|