feat: modernize UI with gradient design, glass morphism, and enhanced visual appeal

- Add purple/indigo gradient background throughout app
- Implement glass morphism effects on all cards
- Add gradient buttons with smooth hover animations
- Integrate emoji icons for better visual communication
- Enhance typography with improved font stack
- Add loading spinners and smooth transitions
- Improve color scheme with modern purple/indigo palette
- Add glowing shadows and depth effects
- Maintain responsive design and touch-friendly interactions

diagnose_issue.md

@@ -0,0 +1,79 @@
+# Audiobook Generation Issue - Diagnosis
+
+## Problem
+The story is coming out with only one voice (Narrator) instead of multiple voices for different characters.
+
+## Root Cause Analysis
+
+Based on my investigation, I found that:
+
+1. **Ollama IS working correctly** - When I tested with your story, it correctly detected all 3 characters:
+   - Lily
+   - Benny  
+   - Sammy
+
+2. **The backend logs show** that when you used the web interface, it only received 40 characters of text:
+   ```
+   2025-12-09 10:16:52,356 - main - INFO - Role detection requested for text of length 40
+   2025-12-09 10:16:52,358 - main - INFO - Detected 1 roles: ['Narrator']
+   ```
+
+3. **Your full story is 3,749 characters**, so something went wrong in the web interface.
+
+## Possible Causes
+
+### Most Likely: Text wasn't fully pasted or was truncated
+- The web interface might have had an issue with the paste operation
+- The text area might have a character limit
+- There might have been a copy/paste error
+
+### Less Likely: Backend issue
+- The backend is working correctly (I tested it directly)
+- Ollama is running and detecting speakers properly
+
+## Solution Steps
+
+### Step 1: Verify Backend is Running
+```bash
+# Check if backend is running
+curl http://localhost:8001/api/health
+
+# Should return: {"status":"ok"}
+```
+
+### Step 2: Test with the Full Story via API
+I'll create a test script that sends your full story directly to the backend to verify it works end-to-end.
+
+### Step 3: Check Frontend
+If the API works but the web interface doesn't, there might be an issue with:
+- Text area character limits
+- Copy/paste handling
+- Form submission
+
+## Quick Test Script
+
+Run this to test the full workflow with your story:
+
+```bash
+python3 test_full_workflow.py
+```
+
+This will:
+1. Send your full story to the role detection endpoint
+2. Show you what roles are detected
+3. Generate a sample audiobook with different voices
+4. Save it as `test_output.wav`
+
+## Expected Results
+
+When working correctly, you should see:
+- **3-4 roles detected**: Lily, Benny, Sammy, and possibly Narrator
+- **Multiple voices in the audio**: Each character should have a distinct voice
+- **Proper segmentation**: Dialogue should be assigned to the correct character
+
+## Next Steps
+
+1. Try the test script to verify the backend works
+2. If backend works, try the web interface again with the full story
+3. Make sure to paste the ENTIRE story (all 3,749 characters)
+4. Check the browser console for any JavaScript errors