Add local TTS speed preference

Author: AnthonyRonning

frontend/src-tauri/src/tts.rs

@@ -89,6 +89,8 @@ const TTS_TOTAL_STEPS: usize = 10;
 const TTS_CHUNK_MAX_CHARS: usize = 450;
 const SUPERTONIC3_TTS_SPEED: f32 = 1.0;
 const LEGACY_TTS_SPEED: f32 = 1.2;
+const MIN_TTS_SPEED: f32 = 0.5;
+const MAX_TTS_SPEED: f32 = 2.0;
 
 const AVAILABLE_LANGS: &[&str] = &[
     "en", "ko", "ja", "ar", "bg", "cs", "da", "de", "el", "es", "et", "fi", "fr", "hi", "hr", "hu",
@@ -227,6 +229,20 @@ fn default_tts_speed(model_version: ModelVersion) -> f32 {
     }
 }
 
+fn sanitize_tts_speed(speed: f32) -> f32 {
+    if speed.is_finite() {
+        speed.clamp(MIN_TTS_SPEED, MAX_TTS_SPEED)
+    } else {
+        SUPERTONIC3_TTS_SPEED
+    }
+}
+
+fn resolve_tts_speed(model_version: ModelVersion, requested_speed: Option<f32>) -> f32 {
+    requested_speed
+        .map(sanitize_tts_speed)
+        .unwrap_or_else(|| default_tts_speed(model_version))
+}
+
 fn tts_trace_enabled() -> bool {
     std::env::var("MAPLE_TTS_TRACE")
         .map(|value| {
@@ -1384,6 +1400,7 @@ pub async fn tts_chunk_text(text: String) -> Result<TTSChunkTextResponse, String
 #[tauri::command]
 pub async fn tts_synthesize(
     text: String,
+    speed: Option<f32>,
     state: tauri::State<'_, Mutex<TTSState>>,
 ) -> Result<TTSSynthesizeResponse, String> {
     let mut guard = state.lock().map_err(|e| e.to_string())?;
@@ -1395,7 +1412,7 @@ pub async fn tts_synthesize(
         .ok_or("Voice style not loaded")?
         .clone();
     let tts = guard.tts.as_mut().ok_or("TTS engine not loaded")?;
-    let speed = default_tts_speed(tts.model_version);
+    let speed = resolve_tts_speed(tts.model_version, speed);
     let model_version = tts.model_version;
     let sample_rate = tts.sample_rate;
     let trace = tts_trace_enabled();
@@ -1452,6 +1469,7 @@ pub async fn tts_synthesize_chunk(
     text: String,
     chunk_index: usize,
     chunk_count: usize,
+    speed: Option<f32>,
     state: tauri::State<'_, Mutex<TTSState>>,
 ) -> Result<TTSSynthesizeResponse, String> {
     let mut guard = state.lock().map_err(|e| e.to_string())?;
@@ -1462,7 +1480,7 @@ pub async fn tts_synthesize_chunk(
         .ok_or("Voice style not loaded")?
         .clone();
     let tts = guard.tts.as_mut().ok_or("TTS engine not loaded")?;
-    let speed = default_tts_speed(tts.model_version);
+    let speed = resolve_tts_speed(tts.model_version, speed);
     let model_version = tts.model_version;
     let sample_rate = tts.sample_rate;
     let trace = tts_trace_enabled();
@@ -1617,6 +1635,23 @@ mod tests {
         assert_eq!(default_tts_speed(ModelVersion::Legacy), 1.2);
     }
 
+    #[test]
+    fn resolve_tts_speed_clamps_user_preference() {
+        assert_eq!(resolve_tts_speed(ModelVersion::Supertonic3, Some(0.1)), 0.5);
+        assert_eq!(resolve_tts_speed(ModelVersion::Supertonic3, Some(1.4)), 1.4);
+        assert_eq!(resolve_tts_speed(ModelVersion::Supertonic3, Some(3.0)), 2.0);
+        assert_eq!(
+            resolve_tts_speed(ModelVersion::Supertonic3, Some(f32::NAN)),
+            1.0
+        );
+    }
+
+    #[test]
+    fn resolve_tts_speed_uses_model_default_without_user_preference() {
+        assert_eq!(resolve_tts_speed(ModelVersion::Supertonic3, None), 1.0);
+        assert_eq!(resolve_tts_speed(ModelVersion::Legacy, None), 1.2);
+    }
+
     #[test]
     fn chunk_text_splits_long_sentence_by_words_when_needed() {
         let chunks = chunk_text("Hello world. Bye.", 10);

frontend/src/components/TTSDownloadDialog.tsx

@@ -7,14 +7,23 @@ import {
   DialogTitle
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
-import { Volume2, Download, AlertCircle, Loader2, Check, Trash2 } from "lucide-react";
-import { useTTS } from "@/services/tts/TTSContext";
+import { Volume2, Download, AlertCircle, Loader2, Check, Trash2, RotateCcw } from "lucide-react";
+import {
+  useTTS,
+  TTS_MIN_PLAYBACK_SPEED,
+  TTS_MAX_PLAYBACK_SPEED,
+  TTS_PLAYBACK_SPEED_STEP
+} from "@/services/tts/TTSContext";
 
 interface TTSDownloadDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
 }
 
+function formatPlaybackSpeed(speed: number): string {
+  return `${speed.toFixed(1)}x`;
+}
+
 export function TTSDownloadDialog({ open, onOpenChange }: TTSDownloadDialogProps) {
   const {
     status,
@@ -24,6 +33,10 @@ export function TTSDownloadDialog({ open, onOpenChange }: TTSDownloadDialogProps
     totalSizeMB,
     upgradeAvailable,
     modelVersion,
+    playbackSpeed,
+    hasCustomPlaybackSpeed,
+    setPlaybackSpeed,
+    resetPlaybackSpeed,
     startDownload,
     deleteModels
   } = useTTS();
@@ -167,6 +180,40 @@ export function TTSDownloadDialog({ open, onOpenChange }: TTSDownloadDialogProps
                   TTS is ready! Click the speaker icon on any assistant message to listen.
                 </p>
               </div>
+              <div className="space-y-3 rounded-lg border p-3">
+                <div className="flex items-center justify-between gap-3">
+                  <p className="text-sm font-medium">Speech speed</p>
+                  <span className="text-sm tabular-nums text-muted-foreground">
+                    {formatPlaybackSpeed(playbackSpeed)}
+                  </span>
+                </div>
+                <input
+                  type="range"
+                  min={TTS_MIN_PLAYBACK_SPEED}
+                  max={TTS_MAX_PLAYBACK_SPEED}
+                  step={TTS_PLAYBACK_SPEED_STEP}
+                  value={playbackSpeed}
+                  onChange={(event) => setPlaybackSpeed(Number(event.currentTarget.value))}
+                  className="h-2 w-full cursor-pointer accent-primary"
+                  aria-label="Speech speed"
+                />
+                <div className="flex items-center justify-between text-xs text-muted-foreground">
+                  <span>{formatPlaybackSpeed(TTS_MIN_PLAYBACK_SPEED)}</span>
+                  <span>{formatPlaybackSpeed(TTS_MAX_PLAYBACK_SPEED)}</span>
+                </div>
+                <div className="flex justify-end">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={resetPlaybackSpeed}
+                    disabled={!hasCustomPlaybackSpeed}
+                    className="gap-2"
+                  >
+                    <RotateCcw className="h-4 w-4" />
+                    Reset
+                  </Button>
+                </div>
+              </div>
               {isUpgradeAvailable && modelVersion === "legacy" && (
                 <div className="space-y-3 rounded-lg border p-3">
                   <div className="flex items-start gap-3">

frontend/src/services/tts/TTSContext.tsx

@@ -53,6 +53,14 @@ interface DownloadProgress {
   percent: number;
 }
 
+export const TTS_MIN_PLAYBACK_SPEED = 0.5;
+export const TTS_MAX_PLAYBACK_SPEED = 2.0;
+export const TTS_PLAYBACK_SPEED_STEP = 0.1;
+
+const SUPERTONIC3_DEFAULT_PLAYBACK_SPEED = 1.0;
+const LEGACY_DEFAULT_PLAYBACK_SPEED = 1.2;
+const TTS_PLAYBACK_SPEED_STORAGE_KEY = "ttsPlaybackSpeed";
+
 interface TTSContextValue {
   status: TTSStatus;
   error: string | null;
@@ -65,13 +73,17 @@ interface TTSContextValue {
   isPreparing: boolean;
   isPlaying: boolean;
   currentPlayingId: string | null;
+  playbackSpeed: number;
+  hasCustomPlaybackSpeed: boolean;
   isTauriEnv: boolean;
 
   checkStatus: () => Promise<void>;
   startDownload: () => Promise<void>;
   deleteModels: () => Promise<void>;
   speak: (text: string, messageId: string) => Promise<void>;
   stop: () => void;
+  setPlaybackSpeed: (speed: number) => void;
+  resetPlaybackSpeed: () => void;
   clearPlaybackError: () => void;
 }
 
@@ -101,6 +113,38 @@ function errorMessage(err: unknown, fallback: string): string {
   return fallback;
 }
 
+function clampPlaybackSpeed(speed: number): number {
+  if (!Number.isFinite(speed)) {
+    return SUPERTONIC3_DEFAULT_PLAYBACK_SPEED;
+  }
+  const clamped = Math.min(TTS_MAX_PLAYBACK_SPEED, Math.max(TTS_MIN_PLAYBACK_SPEED, speed));
+  return Number(clamped.toFixed(2));
+}
+
+function readPlaybackSpeedOverride(): number | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  try {
+    const stored = window.localStorage.getItem(TTS_PLAYBACK_SPEED_STORAGE_KEY);
+    if (!stored) {
+      return null;
+    }
+
+    const speed = Number(stored);
+    return Number.isFinite(speed) ? clampPlaybackSpeed(speed) : null;
+  } catch {
+    return null;
+  }
+}
+
+function defaultPlaybackSpeedForModel(modelVersion: "supertonic3" | "legacy" | null): number {
+  return modelVersion === "legacy"
+    ? LEGACY_DEFAULT_PLAYBACK_SPEED
+    : SUPERTONIC3_DEFAULT_PLAYBACK_SPEED;
+}
+
 export function TTSProvider({ children }: { children: ReactNode }) {
   // Check Tauri environment - TTS is available on desktop and iOS (not Android)
   const isTauriEnv = isTauriDesktop() || (isTauri() && isIOS());
@@ -117,6 +161,12 @@ export function TTSProvider({ children }: { children: ReactNode }) {
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentPlayingId, setCurrentPlayingId] = useState<string | null>(null);
   const [playbackError, setPlaybackError] = useState<string | null>(null);
+  const [playbackSpeedOverride, setPlaybackSpeedOverride] = useState<number | null>(() =>
+    readPlaybackSpeedOverride()
+  );
+  const playbackSpeed =
+    playbackSpeedOverride ?? clampPlaybackSpeed(defaultPlaybackSpeedForModel(modelVersion));
+  const hasCustomPlaybackSpeed = playbackSpeedOverride !== null;
 
   const requestIdRef = useRef(0);
   const synthesisInFlightRef = useRef(false);
@@ -137,6 +187,35 @@ export function TTSProvider({ children }: { children: ReactNode }) {
     }
   }, []);
 
+  const setPlaybackSpeed = useCallback((speed: number) => {
+    const clamped = clampPlaybackSpeed(speed);
+    setPlaybackSpeedOverride(clamped);
+
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    try {
+      window.localStorage.setItem(TTS_PLAYBACK_SPEED_STORAGE_KEY, clamped.toString());
+    } catch {
+      // Ignore
+    }
+  }, []);
+
+  const resetPlaybackSpeed = useCallback(() => {
+    setPlaybackSpeedOverride(null);
+
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    try {
+      window.localStorage.removeItem(TTS_PLAYBACK_SPEED_STORAGE_KEY);
+    } catch {
+      // Ignore
+    }
+  }, []);
+
   // Check TTS status from Rust backend
   const checkStatus = useCallback(async () => {
     if (!isTauriEnv) {
@@ -330,11 +409,13 @@ export function TTSProvider({ children }: { children: ReactNode }) {
       const requestId = requestIdRef.current + 1;
       requestIdRef.current = requestId;
       const startedAt = performance.now();
+      const speed = playbackSpeed;
       try {
         debugTTS("speak start", {
           messageId,
           rawChars: text.length,
-          processedChars: processedText.length
+          processedChars: processedText.length,
+          speed
         });
         synthesisInFlightRef.current = true;
         setIsPreparing(true);
@@ -467,7 +548,8 @@ export function TTSProvider({ children }: { children: ReactNode }) {
           const result = await invoke<TTSSynthesizeResponse>("tts_synthesize_chunk", {
             text: chunks[chunkIndex],
             chunkIndex: chunkIndex + 1,
-            chunkCount: chunks.length
+            chunkCount: chunks.length,
+            speed
           });
 
           if (requestIdRef.current !== requestId) {
@@ -621,7 +703,7 @@ export function TTSProvider({ children }: { children: ReactNode }) {
         stop();
       }
     },
-    [isTauriEnv, status, stop]
+    [isTauriEnv, playbackSpeed, status, stop]
   );
 
   const clearPlaybackError = useCallback(() => {
@@ -697,12 +779,16 @@ export function TTSProvider({ children }: { children: ReactNode }) {
         isPreparing,
         isPlaying,
         currentPlayingId,
+        playbackSpeed,
+        hasCustomPlaybackSpeed,
         isTauriEnv,
         checkStatus,
         startDownload,
         deleteModels,
         speak,
         stop,
+        setPlaybackSpeed,
+        resetPlaybackSpeed,
         clearPlaybackError
       }}
     >