Evenfall：準備寧靜夜晚，然後離線休息

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady.

What I Built

At the end of the day, even choosing something calming can become another task: find a story, pick a voice, choose background audio, and hope the connection holds.

Evenfall brings those choices into one quiet place. It generates bedtime stories with Gemma running in the browser, reads them using installed device voices, and synthesizes rain, ocean or brown-noise soundscapes. A shelf keeps favourites, and a three-evening pack lets you prepare ahead.

The selected Week 3 idea is the offline wind-down companion. Its central promise is practical:

after the first online setup, a new story can be generated without an internet connection
.

Demo

click here -> Open Evenfall on Render

Use desktop Chrome on a device with WebGPU support.

1. Start online. Read the Gemma terms and accept them if you agree, then download the model. The tested download was about 537 MB.
2. Wait for the model and offline app copy to be ready. Generate and save one story to check your setup.
3. Disconnect the network and reload the same deployed URL in the same browser profile.
4. Load the cached model and generate a fresh story. Try the saved shelf, local narration and a soundscape.
5. Prepare a three-evening pack, or export saved stories as JSON for backup.

The initial download needs internet. Offline use depends on retaining the browser's app and model caches. Narration needs installed local English voices; the options vary by device. WebGPU availability, memory and generation speed also vary.

These checks were performed on the deployed Render origin, including new Gemma stories with the tab network disabled, offline reload, cached model loading, saved-story persistence and a three-story pack.

Optional online feature: a place-based nature-inspiration search uses SerpApi through a separate Render backend. A real Kyoto search returned five source links and summaries. Recent results remained readable after an offline reload. A new, uncached search requires internet.

The optional search requires a personal backend access token. The public offline story experience does not.

Code

Current application source — integrations branch

Please use that branch: the default main branch contains an earlier static prototype.
The README documents the current demo and its setup requirements.

How I Built It

Evenfall uses Vite and JavaScript for the interface. WebLLM 0.2.86 runs a quantized Gemma 3 1B model in a worker, keeping inference on the device and separate from the interface.

Offline support has two parts: a service worker caches the built app, while WebLLM manages the model cache. Testing only the app shell would have missed the essential question: can the model still generate a new story after the network is disabled?

Browser speech synthesis supplies installed voices. Web Audio generates the soundscapes locally, so there is no audio stream to lose when the connection disappears. Stories live in browser storage, with JSON export/import for backups.

Render hosts the frontend and optional Node backend. The backend keeps the SerpApi key in its environment, restricts browser origins and requires a separate access token. It limits the returned summaries and caches repeated searches. The browser retains recent source summaries for offline reading.

There are real limits. A small model can produce short or repetitive stories. Browser storage can be cleared, device voices differ. Those limits are part of the demo instructions.

Architecture

flowchart TD
  U[Evenfall browser app] --> W[Worker: WebLLM and Gemma]
  W --> G[Device GPU]
  U --> L[Local story shelf]
  U --> A[Device voices and Web Audio]
  C[Service worker app cache] --> U
  M[Cached model weights] --> W
  U -->|Optional online search| R[Authenticated Render backend]
  R --> S[SerpApi]
  R --> I[Source summaries cached in browser]

Why Does Open Innovation Matter?

The offline requirement shaped the architecture. An open-weight model made it possible to move generation onto the device: the core story prompt does not need to go to a hosted inference API. That makes a disconnected evening possible after setup.

Gemma, WebLLM and MLC, and Vite are the foundations credited here. Gemma's weights remain subject to its terms; open weights do not mean unrestricted licensing.

The Lazy Payoff

The payoff demonstrated in testing is fewer repeated choices: a story, a local voice and a soundscape in one place, with saved stories and a pack for later evenings.

Prize Categories

• Best Use of Gemma: browser-local story generation with Gemma 3 1B, including verified generation after disabling the tab's network.
• Best Use of Render: the deployed frontend and optional authenticated search backend run on Render's free services.
• Best Use of GitHub Copilot — GitHub Actions route: the category explicitly permits GitHub Actions automation. Evenfall uses Actions for verification; this is not a claim that Copilot authored the project.
• Best Use of SerpApi: live place-based nature inspiration, bounded source summaries and caching for offline reading.

References

Two community references informed the integration review: Jordan Sterchele's Your First SerpApi Integration in JavaScript — From Hello World to Production discusses server-side credentials and result handling, and API Kumo's Handling API Rate Limits Gracefully discusses avoiding uncontrolled retry behaviour.