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:
parent
1fd08082e4
commit
64ff385423
2 changed files with 73 additions and 64 deletions
|
|
@ -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") && (
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue