跳到正文
DEV Community· Anubhav Batham·· 3 小時前AI 評分38

AI Ghost Story Generator:以本地開放權重 LLM 製作雙語恐怖故事體驗

AI Ghost Story Generator

AI 導讀

AI Ghost Story Generator 是一款開源恐怖故事網頁應用,使用 Ollama 在本地執行 Meta 的 llama3.2:3b,支援英文及印地文生成。用戶可選擇 6 種恐怖子類型及 3 種故事長度,並透過瀏覽器語音合成和 Web Audio API 聆聽故事及恐怖氛圍音效。

正文

AI Ghost Story Generator: Bringing Gothic Folklore to Life with Local Open-Weight LLMs, Hindi Support & Horror Voice Narration 👻
This is a submission for the MLH x DEV Writing Challenge

What I Built
AI Ghost Story Generator is an open-source, full-sensory horror storytelling web application. It transforms simple seeds, late-night thoughts, eerie childhood memories, or urban folklore into chilling, original ghost stories in both English and Hindi (हिन्दी).

Instead of treating AI as a sterile chatbot in a plain white box, I set out to make the machine feel genuinely haunted. When you summon a story, you don't just receive text—you enter an immersive, multisensory gothic experience:

Local Open-Weight AI Generation: Powered by Meta's llama3.2:3b model running locally through Ollama via a lightweight
_
Flask_

backend. It supports 6 distinct horror sub-genres (Haunted House, Ghost Mystery, Ancient Folklore, Supernatural Horror, Halloween Adventure, and Emotional Ghost Story) across 3 configurable story lengths (Short ~200w, Medium ~400w, Long ~700w).
Scary Horror Voice Narration: Built on the browser's native Web Speech API (window.speechSynthesis), featuring sentence-level chunking to eliminate browser synthesis cutoffs, pitch and speed modulation for an authentic campfire cadence, and dedicated support for Hindi voices (Google हिन्दी, Microsoft Kalpana/Hemant).
Procedural Haunted Ambience (0 KB External Audio): Uses the Web Audio API to synthesize procedural gusting wind (via pink noise and LFO-modulated biquad filters) and a 55Hz sub-bass supernatural drone directly in the browser—with zero external audio files or copyright concerns.
Living Haunted Visual Canvas: Pure CSS keyframe animations featuring an animated walking ghost traversing the viewport with synchronized vertical stride physics, floating spirits with glowing halos, a gothic mansion silhouette with flickering candlelight, drifting multi-tier fog, and arcane summoning runes.
Writer-First Utilities: One-click clipboard copy, client-side .txt story file downloads with formatted headers, and a "Surprise Me 👻" inspiration bank containing 21 curated horror seeds.
What Inspired It?
Growing up, hearing ghost stories around a campfire or listening to grandmother's folklore on dark stormy nights was an unforgettable experience. Today, most generative AI applications feel like corporate spreadsheets or sanitized chatbots. Furthermore, mainstream commercial AI APIs are locked behind subscription credit cards, impose token billing, store private prompts in the cloud, and often trigger overzealous safety filters when asked to write chilling horror fiction.

I wanted to prove that open-source, open-weight AI running on consumer hardware can evoke genuine emotion, terror, and wonder—bringing authentic Indian folklore and western gothic traditions together into an accessible, privacy-first playground.

_What I Learned Along the Way*_*
Taming Web Speech API Cutoffs: Chromium and WebKit browsers have a notorious bug where speechSynthesis silently crashes or stops speaking after ~250 characters or 15 seconds. I designed a custom sentence-level chunking queue ([.!?।\n]) that feeds sentences sequentially, preserving full playback control (Play, Pause, Resume, Replay).
Procedural Audio Engineering: Creating eerie sound effects doesn't require downloading massive .mp3 files. Synthesizing pink noise through an LFO-modulated bandpass filter recreates whistling winter wind, while dual sine waves at 55Hz and 110Hz generate an infrasonic hum that induces psychological dread.
Bilingual LLM Prompt Engineering: Instructing an open-weight 3B parameter model to generate literary Hindi in clean Devanagari script (without transliteration or code-switching) required crafting fine-tuned prompt constraints, cultural tone guidelines, and dedicated output tags (Title: / शीर्षक:, Story: / कहानी:).
Two-Tier CSS Animation Physics: Animating a character walking across the screen while bobbing up and down usually causes CSS transform collisions. Separating the horizontal screen traverse (translateX) into an outer container and the vertical stride bounce (translateY) into an inner element eliminated glitches completely.
Demo
🌐 Live Web Application: https://ai-ghost-story-generator.vercel.app/

💻 GitHub Repository: https://github.com/anubhav9236/ai-ghost-story-generator

Walkthrough & Features in Action
Summoning Inspiration: Click the floating assistant ghost or hit "Surprise Me 👻" to load a spine-chilling premise in English or Hindi (e.g., "A late-night subway train that stops at an abandoned underground station not on any transit map" or "एक वीरान रेलवे स्टेशन जहाँ रात के ठीक 2 बजे एक पुरानी स्टीम ट्रेन आती है...").
Configuring the Ritual: Select your desired language, choose from 6 horror sub-genres, adjust story length (Short ~200 words, Medium ~400 words, Long ~700 words), or specify a custom story title.
The Arcane Summoning State: While the AI generates, the screen enters a mystical trance: rotating summoning rune rings spin, spirits float across the altar, and real-time status messages display the ritual's progress.
Immersive Story Presentation & Narration: The story renders in gothic typography with clean paragraph separation. Hit "Listen to Story" to hear the deep voice narrate the tale, accompanied by howling winds and the 55Hz supernatural drone.
One-Click Export: Copy the story directly to your clipboard or download it as a formatted .txt file for your creative writing portfolio.
text
+-----------------------------------------------------------------------+
| 👻 AI GHOST STORY GENERATOR |
| [ English | हिन्दी ] |
| |
| Story Seed: "An antique grandfather clock that chimes at 3:00 AM..." |
| Category: [ Haunted House ] Length: [ Medium ~400 words ] |
| [ 🔮 Summon Ghost Story ] |
| |
| ------------------------------------------------------------------- |
| 📖 The Midnight Chiming of Blackwood Manor |
| "The pendulum swung with an unnatural weight..." |
| |
| 🔊 Narration: [ ▶ Play ] [ ❚❚ Pause ] [ ⏹ Stop ] |
| 🌫️ Haunted Atmosphere: [ ON ] | Volume: [ 50% ] |
| [ 📋 Copy Story ] [ 💾 Download TXT ] |
+-----------------------------------------------------------------------+
Partner Technologies
To build a reliable, private, and high-performance storytelling engine, this project leveraged key partner and open-source technologies:

1._ Meta Llama_ 3.2 (Open-Weight Model: llama3.2:3b)
Implementation: The core narrative engine utilizes Meta's lightweight, open-weight Llama 3.2 3B model.
Why It Shined: At only 3 billion parameters, Llama 3.2 runs blazingly fast on standard consumer laptops and edge devices without requiring high-end dedicated GPUs. It exhibits remarkable creative depth, understanding subtle gothic tropes, suspenseful pacing, and generating authentic Devanagari Hindi text.
Inference Configuration: Configured with temperature: 0.8 (for descriptive literary variety) and top_p: 0.9, paired with dynamic token limits (num_predict: 260 for Short, 500 for Medium, and 850 for Long) to balance generation speed with narrative richness.

  1. Ollama (Local AI Runtime & API Bridge) Implementation: Serves as the inference runtime, communicating with our Python/Flask backend via its native REST API (POST http://127.0.0.1:11434/api/generate). Developer Experience: Ollama provided an instantaneous developer experience—single-command model pulls (ollama pull llama3.2:3b) and a clean JSON API allowed rapid iteration during hackathon prototyping. It completely eliminated third-party cloud rate limits, API key leakage risks, and subscription costs.
  2. GitHub (Open Source Collaboration & CI/CD) Implementation: Complete project version control, automated testing workflows, and open-source issue management. Developer Experience: The repository includes a comprehensive pytest suite (

test_app.py
) covering 12 unit and integration test cases (mocking Ollama endpoints, validating bilingual prompt constructions, and verifying API payload boundaries).
Hackathon Experience
Participating in this hackathon was an exhilarating creative journey:

The Atmosphere
Building against the clock brought an electrifying energy. While many AI hackathon projects gravitate toward commercial productivity tools, enterprise dashboards, or data summarizers, I wanted to lean into art, folklore, and sensory storytelling.

Hacking late into the night in a dimly lit room, brainstorming haunted folklore scenarios, and listening to the procedural audio synthesizer come to life set a uniquely atmospheric mood that perfectly matched the project's soul.

The Defining Moment
The turning point happened around 2:00 AM while testing the bilingual Hindi generation. I prompted the system with an idea about an abandoned railway junction in the misty hills of Shimla. When the generated Hindi folklore story appeared on screen and the synthesized narration began reciting it in a slow, ominous cadence—underlaid by the gentle 55Hz sub-bass drone and whistling wind—I felt genuine goosebumps. It was a tangible reminder of the power of technology to connect us back to ancient storytelling traditions.

Key Takeaways & What's Next
This hackathon proved that open-source AI and browser-native multimedia standards can create captivating, immersive art without a hefty cloud budget.

Moving forward, I plan to expand the AI Ghost Story Generator with:

Multi-speaker voice dialogues (narrator vs. ghostly entity).
Dynamic SVG mood lighting that shifts based on the emotional sentiment of each paragraph.
Fine-tuned community lore packs (Celtic folklore, Japanese Kaidan, and Appalachian myths).
_ Community Wisdom_
When building interactive voice and local AI web applications, community patterns and insights from fellow builders on DEV provide invaluable guidance:

Local AI Pipelines with Flask & Ollama: Exploring how developers configure lightweight Python wrappers for Ollama helped shape our non-streaming token budgeting and robust error handling. See community discussions on Building Local AI Web Apps with Ollama and Python on DEV for architectural blueprints on edge-based AI.
Overcoming Web Speech API Gotchas: Managing browser speech synthesis across different operating systems and languages is a known challenge. Insights from DEV articles like Creating a Speech Synthesizer using Web Speech API highlight best practices for handling asynchronous voiceschanged events and sentence boundary queue management.
Code & Links

GitHub Repository: https://github.com/anubhav9236/ai-ghost-story-generator

Live Demo: https://ai-ghost-story-generator.vercel.app/

License: MIT Open Source

來源:DEV Community · dev.to