fix: disable Translate to English setting for the whisper turbo model (#259)

* feat: disable Translate to English switch for the whisper turbo

* add parakeet-tdt-0.6b-v2 to unsupportedTranslationModels

* disable language selector for parakeet v2

---------

Co-authored-by: CJ Pais <cj@cjpais.com>
This commit is contained in:
Bogdan 2025-10-29 21:37:19 +02:00 committed by GitHub
parent 1fd08082e4
commit 64ff385423
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 73 additions and 64 deletions

View file

@ -11,6 +11,8 @@ interface LanguageSelectorProps {
grouped?: boolean;
}
const unsupportedModels = ["parakeet-tdt-0.6b-v2", "parakeet-tdt-0.6b-v3"];
export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
descriptionMode = "tooltip",
grouped = false,
@ -23,8 +25,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
const searchInputRef = useRef<HTMLInputElement>(null);
const selectedLanguage = getSetting("selected_language") || "auto";
const isParakeetModel = currentModel === "parakeet-tdt-0.6b-v3";
const isLanguageSelectionDisabled = isParakeetModel;
const isUnsupported = unsupportedModels.includes(currentModel);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
@ -68,7 +69,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
[searchQuery],
);
const selectedLanguageName = isParakeetModel
const selectedLanguageName = isUnsupported
? "Auto"
: LANGUAGES.find((lang) => lang.value === selectedLanguage)?.label ||
"Auto";
@ -84,7 +85,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
};
const handleToggle = () => {
if (isUpdating("selected_language") || isLanguageSelectionDisabled) return;
if (isUpdating("selected_language") || isUnsupported) return;
setIsOpen(!isOpen);
};
@ -106,27 +107,25 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
<SettingContainer
title="Language"
description={
isParakeetModel
isUnsupported
? "Parakeet model automatically detects the language. No manual selection is needed."
: "Select the language for speech recognition. Auto will automatically determine the language, while selecting a specific language can improve accuracy for that language."
}
descriptionMode={descriptionMode}
grouped={grouped}
disabled={isLanguageSelectionDisabled}
disabled={isUnsupported}
>
<div className="flex items-center space-x-1">
<div className="relative" ref={dropdownRef}>
<button
type="button"
className={`px-2 py-1 text-sm font-semibold bg-mid-gray/10 border border-mid-gray/80 rounded min-w-[200px] text-left flex items-center justify-between transition-all duration-150 ${
isUpdating("selected_language") || isLanguageSelectionDisabled
isUpdating("selected_language") || isUnsupported
? "opacity-50 cursor-not-allowed"
: "hover:bg-logo-primary/10 cursor-pointer hover:border-logo-primary"
}`}
onClick={handleToggle}
disabled={
isUpdating("selected_language") || isLanguageSelectionDisabled
}
disabled={isUpdating("selected_language") || isUnsupported}
>
<span className="truncate">{selectedLanguageName}</span>
<svg
@ -146,55 +145,51 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
</svg>
</button>
{isOpen &&
!isUpdating("selected_language") &&
!isLanguageSelectionDisabled && (
<div className="absolute top-full left-0 right-0 mt-1 bg-background border border-mid-gray/80 rounded shadow-lg z-50 max-h-60 overflow-hidden">
{/* Search input */}
<div className="p-2 border-b border-mid-gray/80">
<input
ref={searchInputRef}
type="text"
value={searchQuery}
onChange={handleSearchChange}
onKeyDown={handleKeyDown}
placeholder="Search languages..."
className="w-full px-2 py-1 text-sm bg-mid-gray/10 border border-mid-gray/40 rounded focus:outline-none focus:ring-1 focus:ring-logo-primary focus:border-logo-primary"
/>
</div>
<div className="max-h-48 overflow-y-auto">
{filteredLanguages.length === 0 ? (
<div className="px-2 py-2 text-sm text-mid-gray text-center">
No languages found
</div>
) : (
filteredLanguages.map((language) => (
<button
key={language.value}
type="button"
className={`w-full px-2 py-1 text-sm text-left hover:bg-logo-primary/10 transition-colors duration-150 ${
selectedLanguage === language.value
? "bg-logo-primary/20 text-logo-primary font-semibold"
: ""
}`}
onClick={() => handleLanguageSelect(language.value)}
>
<div className="flex items-center justify-between">
<span className="truncate">{language.label}</span>
</div>
</button>
))
)}
</div>
{isOpen && !isUpdating("selected_language") && !isUnsupported && (
<div className="absolute top-full left-0 right-0 mt-1 bg-background border border-mid-gray/80 rounded shadow-lg z-50 max-h-60 overflow-hidden">
{/* Search input */}
<div className="p-2 border-b border-mid-gray/80">
<input
ref={searchInputRef}
type="text"
value={searchQuery}
onChange={handleSearchChange}
onKeyDown={handleKeyDown}
placeholder="Search languages..."
className="w-full px-2 py-1 text-sm bg-mid-gray/10 border border-mid-gray/40 rounded focus:outline-none focus:ring-1 focus:ring-logo-primary focus:border-logo-primary"
/>
</div>
)}
<div className="max-h-48 overflow-y-auto">
{filteredLanguages.length === 0 ? (
<div className="px-2 py-2 text-sm text-mid-gray text-center">
No languages found
</div>
) : (
filteredLanguages.map((language) => (
<button
key={language.value}
type="button"
className={`w-full px-2 py-1 text-sm text-left hover:bg-logo-primary/10 transition-colors duration-150 ${
selectedLanguage === language.value
? "bg-logo-primary/20 text-logo-primary font-semibold"
: ""
}`}
onClick={() => handleLanguageSelect(language.value)}
>
<div className="flex items-center justify-between">
<span className="truncate">{language.label}</span>
</div>
</button>
))
)}
</div>
</div>
)}
</div>
<ResetButton
onClick={handleReset}
disabled={
isUpdating("selected_language") || isLanguageSelectionDisabled
}
disabled={isUpdating("selected_language") || isUnsupported}
/>
</div>
{isUpdating("selected_language") && (

View file

@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React, { useEffect, useMemo } from "react";
import { listen } from "@tauri-apps/api/event";
import { ToggleSwitch } from "../ui/ToggleSwitch";
import { useSettings } from "../../hooks/useSettings";
@ -9,13 +9,31 @@ interface TranslateToEnglishProps {
grouped?: boolean;
}
const unsupportedTranslationModels = [
"parakeet-tdt-0.6b-v2",
"parakeet-tdt-0.6b-v3",
"turbo",
];
export const TranslateToEnglish: React.FC<TranslateToEnglishProps> = React.memo(
({ descriptionMode = "tooltip", grouped = false }) => {
const { getSetting, updateSetting, isUpdating } = useSettings();
const { currentModel, loadCurrentModel } = useModels();
const { currentModel, loadCurrentModel, models } = useModels();
const translateToEnglish = getSetting("translate_to_english") || false;
const isParakeetModel = currentModel === "parakeet-tdt-0.6b-v3";
const isDisabledTranslation =
unsupportedTranslationModels.includes(currentModel);
const description = useMemo(() => {
if (isDisabledTranslation) {
const currentModelDisplayName = models.find(
(model) => model.id === currentModel,
)?.name;
return `Translation is not supported by the ${currentModelDisplayName} model.`;
}
return "Automatically translate speech from other languages to English during transcription.";
}, [models, currentModel, isDisabledTranslation]);
// Listen for model state changes to update UI reactively
useEffect(() => {
@ -33,13 +51,9 @@ export const TranslateToEnglish: React.FC<TranslateToEnglishProps> = React.memo(
checked={translateToEnglish}
onChange={(enabled) => updateSetting("translate_to_english", enabled)}
isUpdating={isUpdating("translate_to_english")}
disabled={isParakeetModel}
disabled={isDisabledTranslation}
label="Translate to English"
description={
isParakeetModel
? "Translation is not supported by the Parakeet model."
: "Automatically translate speech from other languages to English during transcription."
}
description={description}
descriptionMode={descriptionMode}
grouped={grouped}
/>