Enhance GenerationForm to autoplay generated audio

- Integrated audio playback functionality by utilizing the apiClient to fetch audio URLs.
- Updated the GenerationForm to set audio state with the generated audio details after successful generation.
- Improved user experience by automatically playing the generated audio upon completion.

app/src/components/Generation/GenerationForm.tsx

@@ -23,8 +23,10 @@ import {
 } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
 import { useToast } from '@/components/ui/use-toast';
+import { apiClient } from '@/lib/api/client';
 import { useGeneration } from '@/lib/hooks/useGeneration';
 import { useProfile } from '@/lib/hooks/useProfiles';
+import { usePlayerStore } from '@/stores/playerStore';
 import { useUIStore } from '@/stores/uiStore';
 
 const generationSchema = z.object({
@@ -42,6 +44,7 @@ export function GenerationForm() {
   const { data: selectedProfile } = useProfile(selectedProfileId || '');
   const generation = useGeneration();
   const { toast } = useToast();
+  const setAudio = usePlayerStore((state) => state.setAudio);
 
   const form = useForm<GenerationFormValues>({
     resolver: zodResolver(generationSchema),
@@ -79,6 +82,10 @@ export function GenerationForm() {
         description: `Audio generated (${result.duration.toFixed(2)}s)`,
       });
 
+      // Autoplay the generated audio
+      const audioUrl = apiClient.getAudioUrl(result.id);
+      setAudio(audioUrl, result.id, data.text.substring(0, 50));
+
       form.reset();
     } catch (error) {
       toast({