跳到正文
DEV Community· abhimanyu sharma·· 3 小時前AI 評分34

Ghostlight AI:結合鬼故事生成與回憶保存的瀏覽器 AI 故事體驗

Ghostlight AI — Stories from the Other Side

AI 導讀

Ghostlight AI 是一款以 HTML、CSS 和 JavaScript 建構的瀏覽器 AI 故事體驗,使用 Transformers.js 在瀏覽器載入開放權重模型 FLAN-T5 Small 生成文字。它提供鬼故事生成器及 Memory Keeper,分別用來創作故事和書寫紀念訊息;推理不需付費 AI API 金鑰或自訂應用程式伺服器。

正文

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine

What I Built

👻 Ghostlight AI — Stories from the Other Side

For the Ghost in the Machine challenge, I built Ghostlight AI, a spooky, browser-based AI storytelling experience inspired by Halloween, Día de los Muertos, and the stories and memories that stay with us.

The project has two main features:

  • 🎃 Ghost Story Generator: Create mysterious, spooky stories based on a selected mood and location.
  • 🕯️ Memory Keeper: Write meaningful remembrance messages to celebrate loved ones and preserve special memories.

I wanted to combine the playful spirit of Halloween with something more meaningful: using technology not only to create fictional stories but also to help people express and preserve memories.

The interface features a magical ghost, a haunted atmosphere, glowing purple visuals, candles, marigolds, and Día de los Muertos-inspired artwork.

My goal was to make AI storytelling accessible through a simple website without requiring users to install a local AI runtime.

Demo

🌐 Live Project: Ghostlight AI

🖼️ Project Poster: The poster showcases the Ghostlight AI experience, its spooky storytelling interface, and the Memory Keeper feature.

Explore the project and experience a little magic from the other side!

Code

💻 GitHub Repository: Ghostlight AI on GitHub

The project is built using HTML, CSS, and JavaScript, with an open-source AI model integrated into the browser.

Feel free to explore the code, suggest improvements, and contribute to the project!

How I Built It

I kept the architecture simple and focused on accessibility.

Technology stack:

  • HTML5: Structures the storytelling interface.
  • CSS3: Creates the Halloween-inspired design, glowing effects, and responsive layout.
  • Vanilla JavaScript: Handles user interactions, story generation, and the Memory Keeper experience.
  • Transformers.js: Provides browser-based inference using a compatible open-source model.
  • FLAN-T5 Small: The open-weight language model used for text generation.
  • Hugging Face model ecosystem: Provides access to the model used by the application.

The model is loaded in the browser through Transformers.js, using the Xenova/flan-t5-small model.

The application does not require a paid AI API key or a custom application server for inference. The model files must be downloaded when first loading the model, so an internet connection is required initially. Actual offline availability depends on whether the required assets are cached and accessible.

I also included a fallback storytelling mechanism so users can still explore the interface if the model fails to load. The fallback uses predefined generation logic rather than AI inference.

The result is a lightweight project that brings open-source AI into a fun, themed web experience.

Why Does Open Innovation Matter?

Open innovation matters because AI should be something developers can explore, understand, adapt, and build with—not just consume through closed services.

By using open-source tools and an open-weight model, I could experiment with browser-based inference and build an interactive experience without depending on a paid proprietary AI API.

This approach offers several benefits:

  • Accessibility: Developers can experiment without needing a paid AI API subscription.
  • Transparency: The project can be inspected, modified, and extended by the community.
  • Privacy potential: Browser-based inference can reduce the need to send prompts to a remote inference service, although privacy also depends on the application's implementation and its external dependencies.
  • Learning: Developers can explore how AI models integrate with ordinary web technologies.
  • Community collaboration: Contributors can improve the interface, generation logic, accessibility, and model integration.

Open innovation makes it easier to turn a creative idea into an experiment that other developers can learn from and build upon.

My Agent Session

I built this project by combining web development with open-source AI integration, focusing on making the experience simple and accessible.

I have not attached a DevRelay agent session to this submission. If I record one, I can add the session link here.

The Spirit of It

What if a ghost could tell a story—and help us remember the people who made our lives special?

That question inspired Ghostlight AI.

Halloween is often associated with spooky stories, haunted houses, and mysterious characters. Día de los Muertos adds another dimension: remembering and celebrating loved ones.

I wanted my project to bring these ideas together.

The Ghost Story Generator creates space for imagination, while the Memory Keeper offers a place to express remembrance. One celebrates fictional worlds; the other honors real memories.

For me, the spirit of Ghost in the Machine is about giving technology a human touch. AI can help us create something entertaining, but it can also help us express feelings, explore ideas, and keep meaningful stories alive.

Sometimes, the most memorable technology is the kind that helps us reconnect with our own humanity.

Prize Categories

My primary focus is the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine.

If additional partner prize categories are listed on the official challenge page, I will select only those that match the project's actual technologies and implementation.


Thanks for checking out Ghostlight AI! 👻

If you like the project, visit the repository, share your feedback, and consider contributing.

Create Tales. Preserve Memories. Keep the Magic Alive. 🕯️🎃

來源:DEV Community · dev.to