The Memory Lantern:有些故事永不消逝
# 🏮 The Memory Lantern: Some Stories Never Die
The Memory Lantern 是一款以萬聖節、亡靈節及記憶為靈感的互動敍事網頁原型,提供鬼故事生成、紀念訊息撰寫及口述歷史整理三種體驗。它以 HTML、CSS 和 JavaScript 在瀏覽器本機運行,使用模板和簡單規則生成文字,毋須後端、資料庫或 API key。現階段它並非真正的開放權重 AI 應用,未來計劃整合可在瀏覽器本機運行的開放權重模型。
*This is a submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine
What I Built
For the Ghost in the Machine challenge, I built The Memory Lantern, a spooky, interactive storytelling web application inspired by Halloween, Día de los Muertos, and the memories we carry with us.
The idea behind this project is simple: some stories deserve to live forever.
Halloween celebrates mystery, the supernatural, and the unknown, while Día de los Muertos celebrates the lives and memories of people who are no longer with us. I wanted to bring these ideas together in a single experience that combines spooky storytelling with something meaningful: preserving memories and family histories.
The Memory Lantern offers three interactive experiences:
👻 1. Ghost Story Generator
Users can enter a mysterious situation, an abandoned location, or an unusual event and turn it into a spooky story.
For example, imagine an empty college corridor, a flickering light, and a telephone ringing inside a locked room. The application transforms the idea into an atmospheric story with a supernatural twist.
🌼 2. Memory Lantern
Inspired by Día de los Muertos, this feature helps users create heartfelt remembrance messages using personal details they choose to share.
A favorite meal, a familiar saying, or a small childhood memory can become a meaningful tribute.
The goal isn't to contact spirits or make supernatural claims. Instead, it is to help people express their memories through words.
📜 3. Oral History Preserver
Family traditions, recipes, childhood experiences, and community stories are often passed down verbally and can gradually disappear.
This feature helps organize those details into readable stories and suggests questions that can help preserve more of the history.
🎨 The Design
I created a dark, atmospheric interface with glowing golden accents, purple tones, and lantern-inspired visuals. The interface is responsive and designed to feel like entering a small storytelling space at midnight.
I built the current prototype using HTML, CSS, and JavaScript, without requiring a backend, database, or API key.
The project is designed around a larger idea: technology can help us preserve the stories that make us human.
Demo
GitHub Repository:
https://github.com/Shreya-9874/The-Memory-Lantern
The project currently runs locally in a web browser.
To try it:
- Download or clone the repository.
- Open
index.htmlin a modern web browser. - Choose Ghost Story, Memory Lantern, or Oral History.
- Enter a prompt or select an example.
- Click Light the Lantern.
- Copy the generated text or save it as a
.txtfile.
No installation or internet connection is required to run the current prototype.
A deployed demo or video demonstration can be added here once available.
Code
Explore the complete source code:
https://github.com/Shreya-9874/The-Memory-Lantern
The application uses three core web technologies:
- HTML5: Structures the application and its three storytelling experiences.
- CSS3: Creates the dark visual theme, responsive layouts, glowing accents, and interactive elements.
- JavaScript: Handles user interactions, selects examples, generates story text using templates and rules, and provides copy and download functionality.
The application is intentionally lightweight. It runs entirely in the browser and does not send user prompts to an external server.
The code is organized to make the prototype easy to understand and extend. Future versions could introduce a browser-compatible open-weight language model, allowing the storytelling experience to become genuinely AI-powered while preserving the local-first design.
How I Built It
I built The Memory Lantern using HTML, CSS, and JavaScript, focusing on a lightweight, responsive experience that works directly in a browser.
The Technical Architecture
Frontend: HTML5, CSS3, and vanilla JavaScript.
Execution environment: The user's web browser.
Text generation: JavaScript templates and simple rules.
Backend: None.
External API: None.
Data storage: The application does not persist prompts or generated stories to a server. Users can explicitly download their generated text.
The Development Process
I approached the project in several stages:
1. Defining the concept
I explored different interpretations of the Ghost in the Machine theme and chose to combine supernatural storytelling with remembrance and oral history.
2. Designing the interface
I created a dark, atmospheric interface with three distinct experiences so users could choose between fictional horror, personal remembrance, and preserving stories.
3. Building the interactions
I implemented mode selection, example prompts, text generation, clear and reset functionality, clipboard copying, and downloadable text files.
4. Making it accessible
I kept the application lightweight and responsive, avoiding unnecessary dependencies and complicated setup requirements.
5. Considering privacy
I designed the application to operate locally in the browser. Prompts are not transmitted to an external service by the current code.
What About Open-Source AI?
An important distinction: the current version is a browser-based prototype, not yet a genuine open-weight AI application.
It uses JavaScript templates rather than an AI model. Although this makes the prototype portable and private by default, it does not independently satisfy the challenge's requirement that open-source or open-weight AI be central to the project.
My intended next step is to integrate a compatible open-weight model that can run locally in the browser. That would allow the application to generate more varied stories while retaining its privacy-focused architecture.
I want the AI component to be meaningful rather than simply adding an AI label to a conventional web application.
Why Does Open Innovation Matter?
I believe open innovation matters because the tools we build should give people more control over their technology and their data.
This is especially important for an application centered on memories and personal stories.
🔒 Privacy and Personal Memories
People may share deeply personal experiences when writing about someone they miss.
A local-first approach can reduce the need to send those stories to a third-party AI service. In the current prototype, prompts remain in the browser because there is no backend or external API.
🌐 Accessibility
A lightweight HTML, CSS, and JavaScript application is easy to download, inspect, modify, and run.
Users do not need a paid subscription or an API key to try the prototype.
🛠️ Freedom to Experiment
Open technologies make it easier for developers to understand how an application works and build on it.
A future open-weight model integration could let developers experiment with different models, customize prompts, and adapt the storytelling experience to different languages and cultural traditions.
♻️ Long-Term Availability
Family memories and oral histories can remain meaningful for generations. Building with inspectable, adaptable technologies reduces dependence on a single hosted AI provider for the application itself.
The current prototype already runs without a cloud service, although its template-based generation is not AI inference.
My longer-term goal is to preserve this independence while introducing a genuine open-weight AI model.
For me, open innovation isn't only about reducing costs. It's about building technology that people can understand, adapt, and continue using.
My Agent Session
I did not use DevRelay to record an agent session for this prototype.
If I create a recorded development session later, I'll add it here.
The Spirit of It 🕯️
The most meaningful part of this project is the Memory Lantern concept.
We often think of technology as something that helps us work faster or automate everyday tasks. But technology can also help us preserve the little things that might otherwise be forgotten.
A recipe remembered from childhood. A phrase someone always used. A family tradition that has been passed down for decades.
These details may seem ordinary, but they become part of the stories that connect generations.
I wanted to build something that treats those memories with care while still embracing the mystery and atmosphere of Halloween.
The lantern represents the idea that even when someone is no longer physically present, the stories associated with them can continue to be shared.
The Memory Lantern doesn't claim to bring back the dead. It helps keep their stories alive.
Prize Categories
My project currently focuses on:
- Ghost in the Machine theme: Halloween-inspired storytelling and remembrance.
- Open-source web development: A lightweight, browser-based application built with HTML, CSS, and JavaScript.
I have not yet integrated a genuine open-weight AI model, so I am not claiming eligibility for the open-source AI requirement until that integration is implemented.
Thank you for creating a challenge that encourages developers to explore creative and meaningful uses of technology. 🏮
來源:DEV Community · dev.to
