Background Processing Architecture

Goal

Enable text-to-speech conversion and webpage content extraction to continue running in the background when users navigate away from the conversion page or switch to different audio content. This allows users to multitask within the application without interrupting ongoing conversions.

Current Limitations

• Conversions stop when users navigate away from the home page

• Users can't browse the library or listen to other content during conversion

• Page extraction process is blocked during navigation

• No persistent state for ongoing conversions

Proposed Architecture

1. Background Task Management

• Implement a global state store using Zustand to track background tasks

• Tasks will persist across route changes

• Each task will have a unique identifier and status tracking

Copyinterface BackgroundTask {
  id: string;
  type: 'conversion' | 'extraction';
  status: 'running' | 'completed' | 'failed';
  progress?: number;
  result?: {
    text: string;
    audioUrl: string;
    sourceType: 'url' | 'paste';
    sourceUrl?: string;
    imageUrl?: string;
  };
}

2. Data Flow

1. User initiates conversion/extraction

2. Task is registered in background store

3. Process continues regardless of navigation

4. On completion:

   • Result is stored in IndexedDB

   • User is notified via toast

   • Option to load new content or continue current session

3. Component Structure

Copysrc/
├── store/
│   └── backgroundTasks.ts    # Global background task state
├── utils/
│   └── textToSpeech.ts      # Modified for background processing
└── components/
    └── MainContent.tsx      # Updated to handle background tasks

4. Implementation Phases

Phase 1: Background Task Store

• Create Zustand store for task management

• Implement task tracking and status updates

• Add persistence across route changes

Phase 2: Text-to-Speech Modifications

• Decouple conversion process from component lifecycle

• Add progress tracking

• Implement cancellation tokens

Phase 3: UI Integration

• Add non-blocking toast notifications

• Create task completion prompts

• Implement accept/reject flow for new content

Phase 4: Library Integration

• Auto-save completed conversions

• Update library in real-time

• Maintain playback state during updates

5. Error Handling

• Failed tasks will be tracked and reported

• Users can retry failed conversions

• Error states persist across navigation

6. State Management

Copyinterface BackgroundState {
  tasks: Map<string, BackgroundTask>;
  activeTask?: string;
  notifications: NotificationQueue;
}

7. User Experience Considerations

• Clear progress indicators

• Non-intrusive notifications

• Seamless playback transitions

• Option to manage background tasks

8. Technical Considerations

• Use Web Workers for heavy processing

• Implement proper cleanup on task completion

• Handle memory management for audio resources

• Ensure IndexedDB operations are atomic

Migration Strategy

1. Implement changes incrementally

2. Maintain existing functionality

3. Add background processing in parallel

4. Switch to new system once stable

Success Metrics

• Uninterrupted playback during conversions

• Successful background task completion

• Smooth navigation experience

• Proper task state management

Future Enhancements

• Multiple simultaneous conversions

• Task prioritization

• Advanced queue management

• Batch processing capabilities