Update midi editor

preprocess/tools/midi_editor/README.md

@@ -10,14 +10,16 @@ A full-featured web MIDI editor for singing voice preprocess. It supports real-t
 
 ### 🎼 Piano Roll Editing
 
-- **Visual note editing**: Full range from C1 to C8 with intuitive piano keys
+- **Visual note editing**: Full range from C1 to C8 with intuitive piano key layout
 - **Drag operations**:
   - Move notes: drag note blocks to adjust position and pitch
   - Resize start: drag the left edge to adjust start time
   - Resize end: drag the right edge to adjust end time
-- **Quick pitch adjust**: Command/Ctrl + Up/Down to nudge selected notes
+- **Quick pitch adjust**:
+  - Command/Ctrl + Up/Down to nudge selected note pitch
+  - Use the Transpose control in the toolbar to shift all notes at once
 - **Double-click to add**: Add new notes quickly in empty areas
-- **Piano key preview**: Click a key to audition the pitch
+- **Piano key preview**: Click a key on the left to audition the pitch
 
 ### 🔍 Zoom & Navigation
 
@@ -29,14 +31,14 @@ A full-featured web MIDI editor for singing voice preprocess. It supports real-t
 ### 📝 Lyric Editing
 
 - **Inline editing**: edit lyrics for each note in the side list
-- **Batch fill**: enter a string and auto-fill notes in order
-- **Fill from selection**: start batch fill from the selected note
+- **Batch fill**: enter lyrics and auto-fill notes in order
+- **Fill from selection**: start batch fill from the currently selected note
 - **Precise fields**: edit PITCH, START, and END directly
-- **Confirm edits**: press Enter or click ✓ to confirm
+- **Confirm edits**: press Enter or click ✓ to confirm, avoiding accidental changes
 
 ### 🎵 Audio Alignment
 
-- **Waveform display**: sync waveform with the MIDI timeline
+- **Waveform display**: import audio to display waveform, synced with the MIDI timeline
 - **Formats**: MP3, WAV, OGG, FLAC, M4A, AAC
 - **Sync playback**: play audio and MIDI together with independent volume control
 - **Click to seek**: click waveform or timeline to seek
@@ -44,15 +46,12 @@ A full-featured web MIDI editor for singing voice preprocess. It supports real-t
 ### ⚠️ Overlap Detection
 
 - **Visual highlight**: overlapping notes blink in red
-- **Smart tolerance**: adjacent notes (end equals next start) are not overlaps
 - **One-click fix**: remove all overlaps automatically
-- **Export warning**: warn if overlaps exist during export
 
 ### 📥 Import & Export
 
-- **MIDI import**: parse standard MIDI and lyric metadata
-- **MIDI export**: export MIDI with lyrics
-- **Chinese support**: full UTF-8 lyrics support
+- **MIDI import**: parse standard MIDI files with automatic lyric metadata extraction
+- **MIDI export**: export MIDI files with lyric information
 
 ### 🎨 UI & UX
 
@@ -97,9 +96,9 @@ npm run preview
 
 1. **Import MIDI**: click Import MIDI and select a .mid file
 2. **Edit notes**: drag notes in the piano roll to adjust time and pitch
-3. **Add lyrics**: edit lyrics in the right-side list
-4. **Align audio** (optional): import reference audio
-5. **Export**: click Export MIDI with lyrics
+3. **Add lyrics**: edit lyrics in the right-side list, or use batch fill
+4. **Align audio** (optional): import reference audio for side-by-side editing
+5. **Export**: click Export MIDI to save
 
 ### Shortcuts
 
@@ -120,9 +119,9 @@ npm run preview
 | Button | Description |
 |------|------|
 | ⏮ | Go to start |
-| ⏪ 2s | Back 2 seconds |
+| ⏪ | Back 2 seconds |
 | ▶ / ⏸ | Play / Pause |
-| 2s ⏩ | Forward 2 seconds |
+| ⏩ | Forward 2 seconds |
 | ⏭ | Go to end |
 | Selection | Play selected region |
 
@@ -153,19 +152,19 @@ npm run preview
 ├── vite.config.ts
 ├── public/
 └── src/
-    ├── App.css
-    ├── App.tsx
-    ├── constants.ts
-    ├── index.css
-    ├── main.tsx
-    ├── types.ts
-    ├── assets/
+    ├── App.css              # Main styles (theme variables, layout, components)
+    ├── App.tsx               # Main app component (transport, import/export, transpose)
+    ├── constants.ts          # Constants (grid width, row height, pitch range)
+    ├── i18n.ts               # Internationalization (zh/en translations, smart lyric tokenizer)
+    ├── index.css             # Global styles (Tailwind, root font, theme gradients)
+    ├── main.tsx              # React entry point
+    ├── types.ts              # Type definitions (NoteEvent, TimeSignature, etc.)
     ├── components/
-    │   ├── AudioTrack.tsx
-    │   ├── LyricTable.tsx
-    │   └── PianoRoll.tsx
+    │   ├── AudioTrack.tsx    # Audio waveform display component
+    │   ├── LyricTable.tsx    # Lyric editing table component
+    │   └── PianoRoll.tsx     # Piano roll editor component
     ├── lib/
-    │   └── midi.ts
+    │   └── midi.ts           # MIDI import/export utilities (UTF-8 lyric encoding)
     └── store/
-        └── useMidiStore.ts
+        └── useMidiStore.ts   # Zustand state management
 ```