Commit Graph

185 Commits

Author SHA1 Message Date
b1rdmania 6caf5d6f01 Add X and GitHub links to FAQ header. 2025-12-20 11:46:43 +00:00
b1rdmania 241ea2f020 Add GitHub link to FAQ. 2025-12-20 11:43:09 +00:00
b1rdmania 7b7f854ffc Tighten FAQ copy and add X link. 2025-12-20 11:41:55 +00:00
b1rdmania 9c9bd0f9ae Add FAQ modal and link in header. 2025-12-19 23:40:00 +00:00
b1rdmania b20971f456 Add musical note icon to MOTIF title
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-19 23:37:32 +00:00
b1rdmania f11967f8d3 Skip leading silence in preview playback
Normalize event times to start at 0 in SoundfontMIDIPlayer,
matching the existing fix in SynthesisEngine. Prevents delay
when MIDI files have silence before the first note.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 23:34:06 +00:00
b1rdmania bfb96c65b5 Add shared iOS audio unlock helper. 2025-12-18 23:21:48 +00:00
b1rdmania 9eb40ce614 Add iOS 'Enable Audio' CTA for Motif playback. 2025-12-18 23:21:41 +00:00
b1rdmania 234f6e38b5 Replace track count with source in results table
Changed table columns from Title | Duration | Tracks
to Title | Source | Duration - more useful to see where
the MIDI is from (BitMidi, etc.) than track count.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 21:23:12 +00:00
b1rdmania 34092f2301 Fix 10-second silence at start of Motif playback
Normalize all event times to start at 0 by finding the earliest
event across all roles and subtracting that offset. Prevents
silence when MIDI files have delayed first notes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 21:20:28 +00:00
b1rdmania 7209fad127 Auto-stop Motif playback on search/song change
- Stop Motif audio when starting a new search
- Stop Motif audio when selecting a different song
- Prevents overlapping audio from previous generations

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 21:14:26 +00:00
b1rdmania 02914bdcd0 Adjust 'Use on your website' UX to coming soon. 2025-12-18 21:08:08 +00:00
b1rdmania d0be58296e Add embeddable /embed widget and copy-paste snippet. 2025-12-18 20:58:35 +00:00
b1rdmania e33cd26238 Reference NES/Game Boy in Motif synthesis copy
Changed to "NES/Game Boy synthesis engine" to connect the technical
specs to the actual Nintendo hardware this style comes from.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 20:30:29 +00:00
b1rdmania a5bfde5c4e Simplify social preview title and description
Title: MOTIF
Description: Procedural Music Synthesis from MIDI

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 20:29:20 +00:00
b1rdmania 74fdcfbeaa Add social preview image and update meta tags
- Added chiptune_blog_piece_1000x.webp as OpenGraph preview image
- Updated meta tags to point to webp file
- Social sharing on Telegram/Twitter will now show the retro gaming preview

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 20:28:35 +00:00
b1rdmania da0a0daa1f Update Motif copy to be more technically accurate
Changed from "Retro game console vibes" to explain the actual synthesis:
- Pure oscillator synthesis
- Triangle, square, and sawtooth waveforms
- Polyphonic chiptune generation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 20:24:19 +00:00
b1rdmania 823d0290be Improve Motif Generation copy - less tech, more drama
Before:
- "Procedural Synthesis"
- "Web Audio oscillators with dynamic filtering and envelopes."

After:
- "Generate Your Variation"
- "Retro game console vibes. Same notes, entirely different energy."

Less nerdy spec sheet, more exciting payoff moment.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 20:20:45 +00:00
b1rdmania 0cd50cba1f Fix iOS/mobile UX: simplified table + better touch targets
Mobile UX improvements:
- Simplify results table: Title | Duration | Tracks only
- Remove Source (always bitmidi) and Match columns
- Make entire row clickable - no button needed
- Hide Tracks column on mobile (<640px)
- Larger touch targets throughout

Progress bar fixes:
- Larger thumb (20px) for easier iOS touch
- Both 'input' and 'change' events for iOS compatibility
- Larger wrapper height (44px) for comfortable touch
- Scale animation on active thumb
- Better track styling

Table improvements:
- Mobile-responsive padding
- Better cursor states
- Cleaner selected state with accent border

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 20:16:08 +00:00
b1rdmania 7601909cda Simplify UX: single preview player before generation
UX Flow: Search → Preview → Generate

Changes:
- Remove 3-column player grid (Tone.js, Soundfont, Custom)
- Keep only Soundfont piano as simple preview
- New section title: "Preview - Review the MIDI before generation"
- Clean horizontal layout: Play | Stop | Volume | Try Next
- This sets up Motif generation as the main event
- Removed Tone.js and EnhancedMIDIPlayer dependencies
- Bundle size reduced from 314KB to 76KB (-238KB!)

Better flow with less confusion. Preview is quick, generation is the focus.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 20:07:09 +00:00
b1rdmania 9daecd192a Trigger Vercel deployment 2025-12-18 20:00:16 +00:00
b1rdmania 00e4944971 Tighten UX with Synthwave design system
Design System: Synthwave aesthetic with 8px grid
- Add CSS variables for colors, spacing, shadows, glows
- Consistent 8px spacing grid throughout
- Unified border-radius (8px) and shadows
- Better typography scale and hierarchy
- Refined button styles with smooth transitions
- Tighter card layouts with hover effects
- Cleaner input fields with focus states
- More polished player boxes and sections
- Consistent use of neon accent colors (#00ff88, #ffaa44)
- Improved visual hierarchy and readability

All spacing now uses calc(var(--spacing-unit) * N) for consistency

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 19:55:05 +00:00
b1rdmania a262f714e5 Improve Motif player layout and alignment
- Reorganize controls into a cleaner horizontal flow
- Place Generate, Stop, and Volume controls in one row
- Better visual alignment and spacing
- Progress bar section sits cleanly below controls
- Responsive flexbox layout that wraps on smaller screens
- Remove awkward two-column grid layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 19:20:52 +00:00
b1rdmania 3031614914 Add progress bar and seek controls to Motif player
- Add interactive progress bar with visual fill indicator
- Show current time and total duration
- Enable seeking/scrubbing through the synthesis
- Improve Motif player UX with cleaner layout
- Add progress tracking that updates 10x per second
- Format time display as MM:SS
- Progress bar appears when playback starts
- Seeking updates event indices for smooth playback

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 19:17:02 +00:00
b1rdmania 96477e9c4a Fix Vercel deploy: build dist and run Express as serverless. 2025-12-18 19:16:47 +00:00
b1rdmania 1b10f006f9 Fix iOS zoom and production API configuration
- Fix iOS auto-zoom on input focus (set font-size: 16px)
- Lock viewport to prevent manual zoom (maximum-scale=1.0)
- Make API URL configurable via VITE_API_URL environment variable
- Add TypeScript types for Vite environment variables
- Create deployment guide with Vercel/backend setup instructions
- Add .env.example for local development configuration
- Add vercel.json for unified frontend/backend deployment

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 19:09:23 +00:00
b1rdmania 593bbd7032 Refine playback stability and scoring. 2025-12-18 15:14:37 +00:00
b1rdmania 5a6921c483 Polish UI layout and highlight Motif section. 2025-12-18 15:03:27 +00:00
b1rdmania 6daacb6bb5 Update README for GitHub and add project About details. 2025-12-18 14:43:20 +00:00
b1rdmania 2c9d06d8d7 Improve MIDI search and add browser playback engines. 2025-12-18 14:25:38 +00:00
b1rdmania 4fdc6984bc Enhance MIDI search results and dual player UI
- Improved search results table with detailed metadata display
- Added functionality to preview original MIDI alongside generated motifs
- Implemented automatic selection of the best result with visual confidence indicators
- Enhanced user experience with a "Try Next Result" button for A/B testing

These updates provide users with better insights into MIDI quality and facilitate easier comparisons between original and generated compositions.
2025-12-18 12:18:44 +00:00
b1rdmania 177e8fbed3 Implement complete search results + dual player UI
Backend Enhancements:
- Add ParsedMIDIInfo with track analysis and quality issues
- New /api/midi/parse endpoint for MIDI metadata extraction
- Enhanced MIDIService with parseMIDI method

MIDI Preview Player:
- Complete MIDIPlayer class with polyphonic playback
- Basic oscillator mapping (bass=square, mid=triangle, high=sine)
- Lookahead scheduling with proper cleanup
- Automatic stopping when MIDI ends

New UI Flow:
1. Search → Results table with metadata
2. Select MIDI → Shows parsed info (duration, tracks, tempo)
3. Dual transport: Preview Original vs Generate Motif
4. Try Next Result button for easy A/B testing

Search Results Table:
- Title, source, confidence bar, duration, track count
- Quality issues display (short duration, few notes, etc.)
- Auto-select best result, manual selection available
- Visual confidence bars and issue warnings

This makes the project feel "real" - you can now:
- See exactly what MIDI was found
- Verify it's the right song via preview
- Compare original vs procedural synthesis
- Easily try different results

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-17 21:04:29 +00:00
b1rdmania 2d4c748d4c Major role mapping and synthesis improvements
Role Mapping Rewrite:
- Replace naive hard thresholds with scored feature analysis
- Extract comprehensive track features (polyphony, repetition, phrase continuity)
- Add melody vs accompaniment separation logic
- Competitive role allocation with fallback handling
- Support for 6 roles: bass, drone, ostinato, texture, accents, melody

Chord Detection & Polyphony:
- Extract chord events from simultaneous notes (50ms window)
- Add ChordEvent type with multiple pitches
- SynthesisEngine supports both single notes and chords
- Drone/texture layers use chords, others remain monophonic

Feature Extraction:
- medianPitch, pitchRange, noteDensity analysis
- polyphonyRatio calculation via note overlap detection
- repetitionScore using 4-note pattern matching
- phraseContinuity detection via stepwise motion
- register classification (low/mid/high)

This should dramatically improve "sounds like the song" recognition
by using actual musical features instead of arbitrary cutoffs.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-17 21:00:33 +00:00
b1rdmania 11c894bd91 Add complete MIDI search and synthesis pipeline
Backend (MVP):
- Express API with /search and /fetch endpoints
- BitMidi and Dongrays search adapters with scoring heuristics
- CORS proxy with disk caching and validation
- Quality assessment and file size limits

Frontend Integration:
- Switch to @tonejs/midi parser for reliable MIDI parsing
- MIDIService for backend API communication
- MotifEngine updated to try real MIDI, fallback to synthetic
- Enhanced error handling and logging

Development:
- Concurrent frontend/backend npm scripts
- Basic project documentation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-17 20:45:40 +00:00
b1rdmania 4b7836b925 Initial Motif project setup
- Web Audio + TypeScript procedural synthesis engine
- Role-based MIDI structure extraction
- Vite build tooling and development setup
- Core architecture: Engine, RoleMapper, SynthesisEngine
- Minimal UI for testing synthesis generation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-17 20:33:48 +00:00