Skip to content

Prototype v0.1.0

Pre-release
Pre-release

Choose a tag to compare

View all tags
@LandoNikko LandoNikko released this 06 Oct 14:35
· 19 commits to main since this release
v0.1.0
0c418d6

Japanese Train Announcements Creator

Prototype base for a a creative web tool that allows users to design train route maps and generate realistic train announcements using ElevenLabs API. The tool visualizes train movements on a customizable map with animations while playing corresponding audio announcements.

Features

  • Interactive Map Editor: Create custom train route maps with a grid-based SVG canvas
  • Station Management: Add, edit, and customize stations with colors and names
  • Smooth Line Drawing: Connect stations with beautiful curved lines using D3.js
  • Path Animations: Watch lines animate with smooth drawing effects
  • Audio Generation: Generate realistic train announcements with ElevenLabs API
  • Multiple Voices: Choose from different voice options for announcements
  • Privacy-First: All data stored locally in browser session storage
  • No Backend Required: Runs entirely client-side

Tech Stack

  • React - UI framework
  • Vite - Build tool and dev server
  • Tailwind CSS - Styling
  • D3.js - Path generation and smooth curves
  • Framer Motion - UI animations
  • Lucide React - Icons
  • ElevenLabs API - Text-to-speech generation

Installation

Prerequisites

Setup

  1. Clone the repository:
git clone <your-repo-url>
cd japanese-train-announcements
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open your browser to http://localhost:5173

Project Structure

/src
  /components
    /MapEditor
      - MapEditor.jsx       # Main map container
      - GridCanvas.jsx      # Grid background
      - StationMarker.jsx   # Station SVG components
      - TrainLine.jsx       # Animated line components
      - StationEditor.jsx   # Station properties panel
    /AnnouncementEditor
      - AnnouncementPanel.jsx    # Main announcements container
      - AnnouncementCard.jsx     # Individual announcement display
      - AnnouncementGenerator.jsx # Generation dialog
    /Shared
      - Toolbar.jsx         # Top toolbar
      - APIKeyInput.jsx     # API key management modal
  /utils
    - elevenLabsAPI.js      # ElevenLabs integration
  App.jsx                   # Root component
  main.jsx                  # Entry point
  index.css                 # Global styles

Privacy & Security

  • No Server, no tracking, no analytics, no data collection

Roadmap

  • LLM integration for automatic announcement text generation
  • Train icon animation along paths
  • Timeline editor with drag-and-drop
  • Audio caching with IndexedDB
  • Export functionality (ZIP, merged audio)
  • Platform announcements
  • Sound effects (door chimes, bells)
  • Preset templates (Yamanote Line, Chuo Line, etc.)
  • Real-world train line imports
Assets 2
Loading