v0.4.0

Change tool name from Train Line to Transit Designer

Transit presets

• Separate presets and user generated
  • Dynamic preset copy
• Add new Custom Transit System -modal
  • Name, color, station count, loop line toggle, path shape presets and visualizer
• Add hover delete button for Custom presets

Canvas

• Auto-center when selecting presets
• Add adjustable size and opacity settings for marker, label, line and grid under Canvas Style -toggle
• Combine Name and Color value into single row with more compact configuration in Editor
• Add Transit name Legend

Audio Panel

• Add Audio Processing with 8 presets (compression, EQ, reverb, distortion, noise) with Web Audio API
• Add Sound Effects
  • 4 variations per generation
• Change text to speech from 1 to 2 variations per generation

General

• Adjust naming schema to follow transit system
• Audio processing optimization
• Add missing localization components
• Bugfixes

v0.3.1

Improve UI/UX

• Move Line and Grid Styles to Canvas under toggle
• Move Canvas Zoom into Canvas and change from slider to -+ buttons
• Add punch zoom and ctrl + scroll hotkey for desktop zoom
• Add minimal export panel for audio and canvas to image
• Add touch support to canvas
• Fix Preset Panel alignments

v0.3.0

Improve UI/UX

• Adjust colors for buttons
  Header Panel
• New selection tool buttons
  • Move 'Add Station' and 'Draw Path' inside 'Create Train Line' to save space and indicate fine-tuning
  • Replace Select icon
• New Line Style buttons
  Announcement Panel
• Rename 'Audio Queue' -section to 'Audio Control Panel'
  • Add new Train Line audio queue selection with chevron arrows to cycle if canvas has multiple Train Lines
  • Rename 'Transcription' to 'Captions' and move it to Audio Control Panel
    Train Line Preset Panel
• Train Line Presets are more compact to allow more lines to be added
• Change tooltip bottom panel to be description panel of selected preset
  Canvas
• Allow the creation of loop lines by combining first and last stations
  • New modal pop-up to select which station to merge with or cancel operation
• Add interactable Legends that open Edit Panel for 'Edit Line'
• Improve Edit Panel for 'Edit Station' and 'Edit Line' sections
• Change 'Center View' icon
  Misc
• Standardize button styling
• Memoization in announcement panel
• Consolidate audio control logic
• Remove unused code and redundant comments

v0.2.0

• Add new English and Japanese train line templates
  • Both are Solar System lines, but localized as individual lines
  • 37 new AI generated audio files
• Working AI audio generation using ElevenLabs API
• Improve transcribe panel UI/UX
  • Fix station and line tracking with cards
  • If multiple lines, add dropdown to select line
  • Unified icon, station and line colors in announcement panel
  • Store changes made in announcement panel to history
  • Add small indicator to station in canvas when its selected and animate when its audio is playing
• Add legend to canvas to distinguish multiple train lines
• Improve Edit Station and Line to be unified in sync
• Add new transcription module for playing audio
• Improve UI/UX
  • Audio volume and speed unified style
  • Better audio sync with Audio Queue and time tracking
  • Move audiowave animation from card title suffix to dropdown prefix
  • Smoother animation when using Center View
  • Assign single color for Simple Demo
  • Change hover select in locale to toggle view
  • Slightly smaller grid dots
  • More preset colors
  • Remember canvas state when switching between templates
• Bugfixes

v0.1.1

• Dark Mode (clear_darkmode.js)
• Locales (src/locales/)
  • Start with English and Japanese, expand to others later
• Custom Hooks (src/hooks/)
• RemixIcons
• Improved Grid System (GridCanvas.jsx) with better interaction
• Map Editor (MapEditor.jsx) for better station/line management
• Improved Station Components (StationEditor.jsx, StationMarker.jsx, TrainLine.jsx)
• UI Components (APIKeyInput.jsx, PresetSidebar.jsx, Toolbar.jsx)
• Better Announcement System (AnnouncementPanel.jsx)
• Updated Architecture (App.jsx) with new state management
• Tailwind Config Updates (tailwind.config.js) for new styling options
• Vite Config improvements (vite.config.js) for better build process
• Updated dependencies (package-lock.json) with new packages added
• Updated exclusions
• Icon System Upgrade - RemixIcon instead of Lucide (partially)
• Base for mobile UI scaling
• Bugfixes

Prototype v0.1.0

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

• Node.js 18+
• npm or yarn
• ElevenLabs API key (Get one here)

Setup

1. Clone the repository:

git clone <your-repo-url>
cd japanese-train-announcements

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. 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