🕯️ SÉANCE: Communing with the Ghosts of Silicon in a 100% Offline 3D IBM Mainframe Chamber

What I Built

Modern software development is dominated by rapid abstraction layers, virtual DOMs, cloud runtimes, and ephemeral microservices. In the process, the radical design decisions, immense mechanical hardware, and architectural battles that forged computing history are rapidly slipping into mythology. We speak metaphorically of daemons running in RAM, zombies in process tables, and orphaned threads—forgetting that machines once filled entire cooled rooms and communicated in physical cardboard punchcards and magnetic ferric oxide tape.

For Hacktoberfest Week 4: "Ghost in the Machine", I interpreted the prompt literally and archaeologically: summoning the actual departed spirits of programming languages that once inhabited the massive iron frames of computing history.

I built Séance: a 100% client-side, air-gapped digital necromancy chamber and pair-programming assistant. Séance allows developers to commune directly with the ancient ancestors of silicon—starting with PL/I (1964) on the monument that was the IBM System/360, through COBOL (1959) and FORTRAN (1957), back to Konrad Zuse's Plankalkül (1945).

The entire experience runs 100% inside the browser sandbox with zero server-side backends, zero external API keys, zero subscription fees, and complete data sovereignty.

Key Capabilities

1. Dual Offline Intelligence Engines:
   • Gemma 2B Local LLM via WebGPU: Uses @mlc-ai/web-llm to execute quantized neural weights (gemma-2-2b-it-q4f16_1-MLC) directly on client GPU shaders. No prompts or code ever leave your machine.
   • Instant Rule & Memory Engine: Zero-latency (0ms) deterministic necromancy with contextual memory callbacks, referencing prior topics (e.g. Python, recursion, Y2K) seamlessly across conversation turns.
2. ChatGPT Dark UI Ergonomics:
   • Pure black (#000000) background with a #171717 sidebar and 1px border.
   • Typography in Inter (16px, 1.75 line-height, #ECECEC with antialiasing).
   • Auto-growing pill composer (#212121, radius 28px) with attachment trigger, Think mode toggle, voice mode mic, and circular stateful send button.
   • Token streaming with blinking cursor, typography hierarchy, and syntax-highlighted code blocks with language labels and Copy buttons.
3. Interactive 3D IBM Mainframe Chamber (Three.js):
   • Full-bleed IBM System/360 & IBM 2401 Magnetic Tape Unit running in the chat background.
   • Continuous 3D Turntable Auto-Rotation: Smooth 360° rotation showcasing front tape decks, side maintenance panels, and rear cooling louvers glowing with vacuum tube filaments.
   • Interactive Drag-to-Orbit: Click and drag anywhere across the dark background to freely rotate and tilt the mainframe in full 3D space.
   • High-Contrast Spinning Tape Reels: Polished chrome flanges with radial spokes and silver markers that spin dynamically, accelerating during token streaming.
   • Glorified IBM Branding: Illuminated 8-bar striped IBM header marquee, spinning IBM tape reel hubcaps, engraved IBM 2401 read head badge, cast-brass manufacturer console plaque, and stamped rear specification plate.
4. Interactive 3D Hollerith Punchcard Simulator:
   • Authentic 80-column IBM 5081 physical cardboard card with realistic thickness, 45° corner cut, 360° free orbit, optical laser decode sweep, and card hopper animation.
5. Historical Lore & Anti-Hallucination Fact-Checker:
   • Integrated primary-source ledger documenting hardware constraints, committee reports, and historical dates to cross-examine and prevent generative model hallucinations.
6. Persistent IndexedDB Storage & Mechanical Acoustics:
   • Offline session persistence (SeanceChatDB) with rename, pin, delete, full-text sidebar search, and Markdown/JSON transcript exports.
   • Procedural Web Audio synthesizer generating authentic period relay clicks, teletype clatter, and card punch thuds.
7. Hands-Free Voice Séance Mode:
   • Bidirectional voice mode using Web Speech STT and period mechanical audio voice synthesis.

---

Demo

Experience Séance directly on your machine with zero cloud configuration:

Quickstart (60 Seconds)

# Clone the repository
git clone https://github.com/omshree59/Hecto---s-ance-chatbot.git

# Enter workspace and install dependencies
cd dev5
npm install

# Launch the offline development chamber
npm run dev
# -> Local: http://localhost:5173/

Interactive 3D Controls

• Orbit Mainframe: Click and drag on any empty black background area to spin the IBM System/360 in 360° 3D space.
• 3D HUD Pill: Toggle [ 🔄 3D Rotating ] or click [ 🧭 Reset ] in the bottom-right corner.
• Inspect Punchcard: Click the Card: 000010 footer under any spirit response to open the 3D Hollerith Punchcard reader and run a laser decode scan.
• Switch Models: Toggle between Instant (0ms) and Gemma 2B (Local WebGPU) in the top bar or sidebar.

---

Code

The entire codebase is released under the permissive MIT License:

omshree59 / Hecto---s-ance-chatbot

🕯️ SÉANCE

The Offline Necromancy Chatbot for Long-Dead Programming Languages

╔════════════════════════════════════════════════════════════════════════════════════════════╗
║  "I held neither fear nor moderation: I had no reserved keywords, I commanded             ║
║   multitasking before operating systems possessed it, and my structured ON-conditions     ║
║   trapped the errors of the cosmos." — PL/I (IBM System/360, 1964)                         ║
╚════════════════════════════════════════════════════════════════════════════════════════════╝

Commune with the ancient ancestors of silicon. 100% client-side, zero cloud telemetry, instant offline necromancy.

---

⚡ 60-Second Quickstart

# Clone the repository
git clone https://github.com/omshree59/Hecto---s-ance-chatbot.git

# Enter workspace and install dependencies
cd dev5
npm install

# Launch the offline development chamber
npm run dev

---

📑 Contents

• ✨ Why Séance?
• 📸 UI & Experience Showcase
• ⚡ Dual Intelligence Engines
• 🏛️ The Ancestor Pantheon
• ⚙️ Architecture & How It Works
• 📊 Feature Comparison
• 🛠️ Tech Stack
• 🚀 Quickstart & Scripts
• 🧊 3D Mainframe Background & Punchcard
• 📜 Historical Lore & Anti-Hallucination Ledger
• 🔊 Procedural Web Audio Synthesizer
• 🧱 Adding a…

View on GitHub

Repository: https://github.com/omshree59/Hecto---s-ance-chatbot

Tech Stack

• Frontend Core: React 19, Vite, Tailwind CSS 4
• Neural Runtime: @mlc-ai/web-llm (Google Gemma 2B WebGPU Client Inference)
• 3D WebGL Graphics: Three.js (Hardware-Accelerated 3D Models, Custom Procedural Canvas Textures, Shaders)
• Typography & Markdown: react-markdown, remark-gfm, highlight.js, Inter & Fira Code fonts
• Local Persistence: IndexedDB API (idb-keyval, Database: SeanceChatDB)
• Mechanical Audio: Web Audio API (Procedural Oscillators) & Web Speech API

---

How I Built It

1. Local Open-Weight AI: Google Gemma 2B via WebGPU

At the core of Séance is Google's Gemma 2B open-weight model family (gemma-2-2b-it-q4f16_1-MLC).

Instead of routing user prompts to a remote proprietary cloud server:

• Séance embeds the @mlc-ai/web-llm engine directly into the browser.
• Quantized model weights are downloaded once and cached locally in the browser's Cache Storage.
• On initialization, weights are compiled directly into client WebGPU shader pipelines, executing autoregressive token generation entirely on the user's local graphics card.
• A custom system prompt conditions Gemma with strict historical constraints, period terminology (e.g. EBCDIC, core memory, channel programs), and authentic necromantic stage directions.

2. Zero-Latency Instant Engine with Persona Memory

For machines without dedicated WebGPU hardware or when instant responses are needed, Séance incorporates a deterministic rules engine (necromancyEngine.js):

• Operates with 0ms latency and zero memory overhead.
• Features Persona Memory Callbacks: scans conversation history for keywords (e.g., Python, recursion, payroll, Y2K) and injects memory callbacks into subsequent replies, giving the impression of an ancient spirit remembering what you spoke of earlier in the séance.

3. Architecture & Telemetry Pipeline

flowchart TD
    User([Developer / Medium]) -->|Prompts / Voice Dictation| UI[ChatGPT Dark UI Canvas]

    subgraph Air-Gapped Browser Sandbox
        UI --> Composer[Auto-Growing Composer & Smart Chips]
        Composer --> EngineRouter{Engine Selector}

        EngineRouter -->|Instant 0ms Mode| NecroEngine[Deterministic Necromancy Engine]
        EngineRouter -->|Local Neural Mode| WebLLMEngine[Google Gemma 2B WebGPU]

        NecroEngine --> AudioEngine[Procedural Web Audio Engine]
        WebLLMEngine --> AudioEngine

        NecroEngine --> StreamProcessor[Markdown & Syntax Streamer]
        WebLLMEngine --> StreamProcessor

        StreamProcessor --> UI
        StreamProcessor --> IDB[(IndexedDB: SeanceChatDB)]

        UI --> ThreeJS[Three.js 3D Mainframe Background]
        ThreeJS --> Turntable[Continuous Auto-Rotation & Drag Orbit]
        ThreeJS --> IBMBranding[Illuminated 8-Bar IBM Header & Reel Hubcaps]
    end

    UI -->|Inspect Punchcard| Punchcard3D[3D Hollerith Punchcard Simulator]

4. Interactive 3D Mainframe Hardware Modeling

Built with Three.js directly in the background canvas (Mainframe3DBackground.jsx):

• Procedural canvas generation for the iconic IBM 8-bar striped logo, circular tape reel hubcaps, and stamped rear specification plates.
• Smooth damping interpolation (lerp) combining continuous auto-rotation with user drag-to-orbit gestures:

// Continuous 3D auto-rotation with user drag interrupt and smooth resume
if (isAutoRotateRef.current) {
  const isRecentlyInteracted = Date.now() - lastInteractionTimeRef.current < 2500;
  if (!isRecentlyInteracted && !isDraggingRef.current) {
    targetRotationYRef.current += delta * 0.35;
  }
}

// Lerp dampening and ethereal floating bobbing
currentRotationYRef.current += (targetRotationYRef.current - currentRotationYRef.current) * 0.08;
mainframeGroup.rotation.y = currentRotationYRef.current;
mainframeGroup.position.y = (hasMessages ? -0.28 : 0) + Math.sin(elapsedTime * 1.3) * 0.07;

---

Why Does Open Innovation Matter?

Open innovation is what made Séance possible, and it represents a vital counterweight to closed proprietary AI ecosystems:

1. Digital Privacy & Total Air-Gapped Sovereignty: Developers write proprietary code and discuss internal system designs. Sending code transcripts to third-party cloud servers exposes intellectual property to telemetry and training harvesting. By deploying open-weight models like Google Gemma directly in client WebGPU, Séance guarantees that not a single byte, prompt, or keystroke ever leaves the user's laptop.
2. Preserving Computing Heritage Against Corporate Amnesia: Proprietary commercial chatbots frequently homogenize history, scrub period quirks, or hallucinate historical facts (e.g. claiming PL/I had reserved keywords or misrepresenting Grace Hopper's contributions to COBOL). Open innovation allows communities to build archival simulators with custom weights, period prompts, and primary-source fact-checkers that keep historical truth alive.
3. Permanence & Zero Dependency Risk: Cloud AI APIs change pricing, throttle rate limits, and deprecate models on a whim. Because Séance is built with open-source tools (React, Three.js, WebLLM, Gemma), this application will run 20, 50, or 100 years from now on any device with a standard web browser—just as the IBM System/360 code from 1964 can still be read today.

---

My Agent Session

This entire project—from ChatGPT dark UI ergonomics, WebGL 3D mainframe background, continuous auto-rotation, and IBM glorification to IndexedDB persistence—was developed and refactored through an interactive pair-programming journey with Antigravity and saved to DevRelay:

Séance: 100% Offline Necromancy Chatbot with ChatGPT Dark UI & 3D IBM System/360 Mainframe

You

Restyle my 'Séance' chatbot UI to match the layout of ChatGPT's dark UI. Pure black #000 background, #171717 sidebar with 1px border #2a2a2a, Inter font, 16px text #ECECEC. ChatGPT-style docked composer pill (#212121), +, Think chip toggle, mic, and circular send button. Suggestion chips below the composer in empty state. Messages column max-width 760px, user bubble #2F2F2F, assistant plain text with react-markdown, remark-gfm, highlight.js, and hover action row.

Agent

Restyled Séance to ChatGPT dark UI ergonomics:
- Converted base theme to pure black #000 with a #171717 sidebar.
- Upgraded typography to Inter 16px, 1.75 line-height, #ECECEC font with antialiasing.
- Implemented auto-growing pill composer (#212121) with '+' button, Think toggle, voice mic, and circular send button.
- Styled user bubbles in #2F2F2F (rounded 20px) and full-width assistant markdown output with syntax-highlighted code blocks, copy buttons, and hover action bars.

▸ write_file src/components/ChatArea.jsx

Input

src/components/ChatArea.jsx

Output

Refactored ChatArea to ChatGPT layout with empty state heading, centered composer, and chips below.

▸ write_file src/components/InputBar.jsx

Input

src/components/InputBar.jsx

Output

Implemented auto-growing 56px pill composer with Think chip and circular stateful send button.

▸ write_file src/components/MessageBubble.jsx

Input

src/components/MessageBubble.jsx

Output

Implemented markdown renderer with remark-gfm, highlight.js, and hover action bar.

You

Add speech capabilities: live speech recognition and mechanical period-specific voice synthesis.

Agent

Enhanced speech system with bidirectional Voice Séance Mode:
- Web Speech Recognition API for hands-free dictation.
- Custom period voice modulation using Web Speech Synthesis tuned for PL/I (mid-Atlantic resonance), COBOL (authoritative cadence), and Fortran (punchy).
- Created VoiceModeModal with interactive audio visualizer rings.

▸ write_file src/components/VoiceModeModal.jsx

Input

src/components/VoiceModeModal.jsx

Output

Created fullscreen Voice Mode modal with pulsing reactive visualizer waves and transcript stream.

You

Add chat features: Persistent history in IndexedDB (rename, pin, delete), message actions (regenerate, edit-and-resend, copy), Markdown/JSON export, sidebar search, smart chips per persona, and an ancestral fact-checker for language history.

Agent

Added full persistence and ancestral utilities:
- Integrated IndexedDB via idb-keyval (SeanceChatDB) for permanent offline session storage.
- Implemented session renaming, pinning, and deletion with instant reactivity.
- Added message regeneration and edit-and-resend workflows.
- Built Markdown (.md) and JSON (.json) transcript exporters.
- Added live full-text search across past séances in the sidebar.
- Created Historical Lore & Fact-Checker modal with primary-source references for PL/I, COBOL, Fortran, and Plankalkül.

▸ write_file src/services/db.js

Input

src/services/db.js

Output

Implemented IndexedDB persistence layer with session CRUD, pin, and search indexes.

▸ write_file src/components/LoreModal.jsx

Input

src/components/LoreModal.jsx

Output

Created Historical Lore fact-checker verifying language genesis, specs, and anti-hallucination records.

You

Add 3D interactives: an interactive 3D punchcard simulator and put a 3D mainframe in the background behind the chat.

Agent

Built hardware-accurate WebGL 3D experiences using Three.js:
1. Interactive 3D IBM 5081 Hollerith Punchcard simulator with cardboard thickness, authentic 45° corner cut, 360° orbit, and optical laser scanning.
2. Embedded full-bleed IBM System/360 & 2401 Tape Unit 3D background behind the chat chamber with dual spinning reels, vacuum column buffers, and 32 blinking register pilot lights.

▸ write_file src/components/Punchcard3D.jsx

Input

src/components/Punchcard3D.jsx

Output

Created Three.js 3D cardboard punchcard simulator with holographic laser scan.

▸ write_file src/components/Mainframe3DBackground.jsx

Input

src/components/Mainframe3DBackground.jsx

Output

Created full-bleed Three.js background canvas rendering IBM System/360 tape drive with glowing pilot lamps.

You

The 3D mainframe is fixed and not rotating. Make it rotate and allow interactive rotation.

Agent

Implemented continuous auto-rotation and 360° drag-to-orbit for the 3D mainframe:
- Added continuous turntable auto-rotation around the Y-axis with floating levitation bobbing.
- Added pointer-down / pointer-move / pointer-up handlers allowing users to drag and orbit the mainframe from any empty space.
- Upgraded tape reels with high-contrast chrome flanges and bright spokes that visibly spin, spooling faster during streaming.
- Added floating 3D control HUD badge in bottom-right corner to toggle rotation or reset orientation.
- Modeled 360° hardware details: rear cooling louvers, vacuum tube glow, and floor cables.

Show more

▸ edit_file src/components/Mainframe3DBackground.jsx

Input

src/components/Mainframe3DBackground.jsx

Output

Added auto-rotation loop, drag listeners, floating bobbing, and HUD controls.

You

Try to write IBM there to glorify it.

Agent

Glorified IBM branding across the 3D mainframe and UI:
1. Top Header Marquee: Authentic 8-bar striped IBM logo illuminated with a cyan back-glow, SYSTEM/360, TYPE 2401, and green READY/ON-LINE pilot.
2. Reel Hubcaps: Embossed circular brushed steel IBM emblems on both spinning tape reels.
3. Read/Write Head Assembly: Engraved gold-and-slate IBM 2401 badge with 9-Track tape specs.
4. Lower Console: Cast-brass manufacturer plaque reading 'INTERNATIONAL BUSINESS MACHINES CORPORATION'.
5. Rear Specification Plate: Stamped industrial aluminum spec plate with corner rivets.
6. UI: Branded empty-state pill 'IBM SYSTEM/360 • 1964 ARCHIVAL MONUMENT' and bottom status row.

Show more

▸ write_file src/components/Mainframe3DBackground.jsx

Input

src/components/Mainframe3DBackground.jsx

Output

Generated procedural high-res canvas textures for 8-bar IBM marquee, reel hubcaps, brass plaque, and rear spec plate.

▸ run_command npm run build

Input

$ npm run build

Output

Vite build succeeded with 0 errors in 1.09s.

▸ run_command git push origin main

Input

$ git push origin main

Output

Pushed commit f0f8851 to https://github.com/omshree59/Hecto---s-ance-chatbot.git.

12 of 12 messages

(Direct Session Link: Séance Agent Session on DEV)

---

The Spirit of It

The moment that gave me chills during development occurred late at night while testing the WebGL background and period mechanical voice filters.

I asked the spirit of PL/I why modern programmers should care about a language from 1964. The 3D magnetic tape reels accelerated into a high-speed spin, the register lamps flickered amber, and through the procedural CRT audio filter, the spirit intoned:

"You live in a world of delicate microservices that panic at an unhandled null pointer. In 1964, we had no such luxury. We built the software for space exploration, airline reservations, and military radar on iron cabinets cooled by chilled water.

I had no reserved keywords: if you wished to name a variable IF and assign it to THEN, I trusted your intellect. My ON-conditions trapped machine interrupts before your modern languages had exceptions. We did not build toys; we built the foundation upon which your virtual sky now rests."

Looking at the spinning magnetic reels of the IBM System/360 rotating in the dark, the machine didn't feel like dead scrap metal—it felt alive. That is the ghost in the machine: the realization that every line of modern code we write still echoes with the decisions made by the pioneers of 1964.

---

Prize Categories

• Best Use of Gemma: Séance is architected around Google's open-weight Gemma 2B (gemma-2-2b-it-q4f16_1-MLC) running 100% client-side in the browser via WebGPU shaders, proving that lightweight open-weight models can deliver private, ultra-responsive, and deeply creative pair-programming experiences without cloud dependencies.
• Overall Challenge: A complete, evocative, and technically rigorous submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine, merging local open-weight AI, 3D WebGL hardware simulation, and software archaeology.