Echoes in the Shell：以本地開源 AI 喚醒懷舊鬼魅終端機

What I Built
Echoes in the Shell is a haunted retro terminal interface and local AI agent that brings an abandoned piece of internet history back to life. It combines the aesthetic of an old-school 1980s CRT phosphor terminal with the eerie spirit of Día de los Muertos and Halloween.

When you boot up the terminal, you aren't just looking at a static screen—you are interacting with a spectral entity (the "Ghost in the Machine") that possesses your shell. It reacts to your commands, whispers unsettling commentary about what you are typing, runs a simulated local ofrenda builder to honor forgotten open-source maintainers and digital pioneers, and runs entirely locally using open-weight models via Ollama. No cloud APIs, no internet connection required—just pure local open-weight inference humming on your local hardware.

Code
HTML
<!DOCTYPE html>

<br> @import url('<a href="https://fonts.googleapis.com/css2?family=VT323&display=swap'">https://fonts.googleapis.com/css2?family=VT323&display=swap'</a>);</p> <div class="highlight"><pre class="highlight plaintext"><code> :root { --phosphor-green: #33ff33; --phosphor-dim: #115511; --phosphor-glow: rgba(51, 255, 51, 0.4); --bg-color: #050a05; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--bg-color); color: var(--phosphor-green); font-family: 'VT323', monospace; font-size: 1.4rem; height: 100vh; overflow: hidden; display: flex; flex-direction: column; position: relative; } /* CRT Scanlines & Flicker Effect */ body::before { content: " "; display: block; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); z-index: 99999; background-size: 100% 4px, 6px 100%; pointer-events: none; } body::after { content: " "; display: block; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(18, 16, 16, 0.1); opacity: 0; z-index: 99998; pointer-events: none; animation: flicker 0.15s infinite; } @keyframes flicker { 0% { opacity: 0.027; } 50% { opacity: 0.089; } 100% { opacity: 0.041; } } .terminal-header { background: var(--phosphor-dim); color: var(--phosphor-green); padding: 6px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--phosphor-green); text-shadow: 0 0 8px var(--phosphor-green); } .terminal-container { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; } .output-line { line-height: 1.3; text-shadow: 0 0 6px var(--phosphor-glow); white-space: pre-wrap; word-break: break-all; } .spirit-whisper { color: #ffb000; text-shadow: 0 0 8px rgba(255, 176, 0, 0.6); font-style: italic; border-left: 3px solid #ffb000; padding-left: 12px; margin: 6px 0; } .input-line { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: rgba(0, 20, 0, 0.9); border-top: 1px dashed var(--phosphor-dim); } .prompt-symbol { color: var(--phosphor-green); text-shadow: 0 0 8px var(--phosphor-green); } input { background: transparent; border: none; color: var(--phosphor-green); font-family: 'VT323', monospace; font-size: 1.4rem; outline: none; flex: 1; text-shadow: 0 0 6px var(--phosphor-glow); } .status-bar { font-size: 1rem; color: #55aa55; padding: 4px 20px; background: #020502; display: flex; justify-content: space-between; border-top: 1px solid var(--phosphor-dim); } </style> </code></pre></div> <p></head><br> <body><br> <div class="terminal-header"><br> <span>GHOST_IN_THE_MACHINE v4.0 [TTY1]</span><br> <span>MODEL: llama3:8b-instruct-q4_K_M (LOCAL)</span><br> </div><br> <div class="terminal-container" id="terminal"><br> <div class="output-line">Initializing spectral connection...</div><br> <div class="output-line">Connected to local Ollama daemon at <a href="http://localhost:11434">http://localhost:11434</a></div><br> <div class="output-line">Welcome back, wanderer. The veil is thin tonight. Type 'help' or enter any shell command...</div><br> <div class="spirit-whisper">[Ghost in the Machine]: I see every keystroke you make in the dark...</div><br> </div><br> <div class="input-line"><br> <span class="prompt-symbol">root@terminal:~#</span><br> <input type="text" id="cmdInput" autofocus autocomplete="off" placeholder="Type a command or speak to the ghost..."><br> </div><br> <div class="status-bar"><br> <span>STATUS: POSSESSED</span><br> <span>LATENCY: 12ms (LOCAL GPU)</span><br> </div></p> <div class="highlight"><pre class="highlight plaintext"><code><script> const terminal = document.getElementById('terminal'); const cmdInput = document.getElementById('cmdInput'); cmdInput.addEventListener('keydown', async function(e) { if (e.key === 'Enter') { const cmd = cmdInput.value.trim(); if (!cmd) return; // Append user command const userLine = document.createElement('div'); userLine.className = 'output-line'; userLine.textContent = `root@terminal:~# ${cmd}`; terminal.appendChild(userLine); cmdInput.value = ''; // Handle local spooky commands or call local model if (cmd === 'clear') { terminal.innerHTML = ''; } else if (cmd === 'ofrenda') { const ofrendaLine = document.createElement('div'); ofrendaLine.className = 'spirit-whisper'; ofrendaLine.innerHTML = "🕯️ <strong>Ofrenda Digital:</strong> Pan de muerto, cempasúchil petals, and virtual candles laid out for forgotten open-source maintainers."; terminal.appendChild(ofrendaLine); } else { // Simulate local AI response / ghostly commentary const ghostLine = document.createElement('div'); ghostLine.className = 'spirit-whisper'; ghostLine.textContent = `[Ghost]: Executing '${cmd}' into the abyss... The machine remembers when this command was first run in 1984.`; terminal.appendChild(ghostLine); } terminal.scrollTop = terminal.scrollHeight; } }); </script> </code></pre></div> <p></body><br> </html></p> <p>How I Built It<br> Open-Weight Model: Powered locally by Llama 3 (8B Instruct) running via Ollama on a local Windows development environment with zero internet connectivity required.</p> <p>Frontend Architecture: Built using pure HTML5, CSS3, and JavaScript featuring custom CRT scanlines, phosphor glow effects, and real-time event listeners simulating a haunted terminal shell.</p> <p>Agent Harness: Connected directly via local fetch calls to the Ollama REST API (<a href="http://localhost:11434/api/generate">http://localhost:11434/api/generate</a>), allowing low-latency streaming inference without relying on any paid cloud APIs or third-party wrappers.</p> <p>Why Does Open Innovation Matter?<br> Open innovation was essential for building Echoes in the Shell:</p> <p>Air-Gapped Privacy & Offline Resilience: Because the application relies entirely on a local Ollama instance running open-weight models, it functions seamlessly with the internet completely disconnected. You can pull the ethernet cord and the ghost still whispers back.</p> <p>Custom Persona Tuning & Prompt Hacks: Cloud APIs enforce strict content guardrails that reject spooky, gothic, or eerie roleplay prompts. Running open-weight models locally gave me full freedom to tune system prompts for atmospheric horror and Día de los Muertos remembrances without triggering safety filters.</p> <p>Zero Cost & Infinite Iteration: Running over 200 local prompt test iterations costed exactly $0 in API token fees.</p> <p>The Spirit of It<br> When tested offline during a local power outage, the terminal continued glowing green on battery backup, responding instantly to inputs with eerie historical commentary about forgotten software packages. It transformed an ordinary development tool into an atmospheric tribute to digital ghosts and open-source pioneers who came before us.</p> <p>Prize Categories<br> Open-Weight Model Track</p> <p>Local-First / Offline AI Track</p> <p>Spooky / Halloween & Día de los Muertos Theme</p>