Refactor audio generation components and improve debugging capabilities

- Introduced useGenerationForm hook to streamline audio generation form handling, including validation and model download management.
- Updated FloatingGenerateBox and GenerationForm components to utilize the new hook, enhancing code organization and reducing duplication.
- Replaced console logging with a debug utility for better logging control during audio playback and generation processes.
- Improved error handling in HistoryTable and MainEditor components by integrating toast notifications for user feedback.
- Adjusted audio recording duration limits across various components for consistency.

app/src/lib/utils/audio.ts

@@ -17,6 +17,41 @@ export function formatAudioDuration(seconds: number): string {
   return `${mins}:${secs.toString().padStart(2, '0')}`;
 }
 
+/**
+ * Get audio duration from a File.
+ * If the file has a recordedDuration property (from recording hooks),
+ * use that instead of trying to read metadata. This fixes issues on Windows
+ * where WebM files from MediaRecorder don't have proper duration metadata.
+ */
+export async function getAudioDuration(
+  file: File & { recordedDuration?: number },
+): Promise<number> {
+  if (file.recordedDuration !== undefined && Number.isFinite(file.recordedDuration)) {
+    return file.recordedDuration;
+  }
+
+  return new Promise((resolve, reject) => {
+    const audio = new Audio();
+    const url = URL.createObjectURL(file);
+
+    audio.addEventListener('loadedmetadata', () => {
+      URL.revokeObjectURL(url);
+      if (Number.isFinite(audio.duration) && audio.duration > 0) {
+        resolve(audio.duration);
+      } else {
+        reject(new Error('Audio file has invalid duration metadata'));
+      }
+    });
+
+    audio.addEventListener('error', () => {
+      URL.revokeObjectURL(url);
+      reject(new Error('Failed to load audio file'));
+    });
+
+    audio.src = url;
+  });
+}
+
 /**
  * Convert any audio blob to WAV format using Web Audio API.
  * This ensures compatibility without requiring ffmpeg on the backend.

app/src/lib/utils/debug.ts

@@ -0,0 +1,19 @@
+const DEBUG = import.meta.env.DEV;
+
+export const debug = {
+  log: (...args: unknown[]) => {
+    if (DEBUG) {
+      console.log(...args);
+    }
+  },
+  error: (...args: unknown[]) => {
+    if (DEBUG) {
+      console.error(...args);
+    }
+  },
+  warn: (...args: unknown[]) => {
+    if (DEBUG) {
+      console.warn(...args);
+    }
+  },
+};